Use "pickProps" function for prop drilling in profile panel.

This commit is contained in:
Buster Neece 2023-01-04 11:37:07 -06:00
parent 3a2e782570
commit c34c1fb16f
No known key found for this signature in database
GPG Key ID: F1D2E64A0005E80E
9 changed files with 19 additions and 56 deletions

View File

@ -1,6 +1,6 @@
<template> <template>
<profile-header <profile-header
v-bind="$props" v-bind="pickProps(props, headerPanelProps)"
:np="np" :np="np"
/> />
@ -10,7 +10,7 @@
> >
<div class="col-lg-7"> <div class="col-lg-7">
<profile-now-playing <profile-now-playing
v-bind="$props" v-bind="pickProps(props, nowPlayingPanelProps)"
:np="np" :np="np"
/> />
@ -20,34 +20,35 @@
/> />
<profile-streams <profile-streams
v-bind="$props"
:np="np" :np="np"
/> />
<profile-public-pages v-bind="$props" /> <profile-public-pages
v-bind="pickProps(props, {...publicPagesPanelProps,...embedModalProps})"
/>
</div> </div>
<div class="col-lg-5"> <div class="col-lg-5">
<profile-requests <profile-requests
v-if="stationSupportsRequests" v-if="stationSupportsRequests"
v-bind="$props" v-bind="pickProps(props, requestsPanelProps)"
/> />
<profile-streamers <profile-streamers
v-if="stationSupportsStreamers" v-if="stationSupportsStreamers"
v-bind="$props" v-bind="pickProps(props, streamersPanelProps)"
/> />
<template v-if="hasActiveFrontend"> <template v-if="hasActiveFrontend">
<profile-frontend <profile-frontend
v-bind="$props" v-bind="pickProps(props, frontendPanelProps)"
:np="np" :np="np"
/> />
</template> </template>
<template v-if="hasActiveBackend"> <template v-if="hasActiveBackend">
<profile-backend <profile-backend
v-bind="$props" v-bind="pickProps(props, backendPanelProps)"
:np="np" :np="np"
/> />
</template> </template>
@ -58,12 +59,6 @@
</div> </div>
</template> </template>
<script>
export default {
inheritAttrs: false
};
</script>
<script setup> <script setup>
import ProfileStreams from './Profile/StreamsPanel'; import ProfileStreams from './Profile/StreamsPanel';
import ProfileHeader from './Profile/HeaderPanel'; import ProfileHeader from './Profile/HeaderPanel';
@ -87,6 +82,7 @@ import nowPlayingPanelProps from "./Profile/nowPlayingPanelProps";
import publicPagesPanelProps from "./Profile/publicPagesPanelProps"; import publicPagesPanelProps from "./Profile/publicPagesPanelProps";
import requestsPanelProps from "./Profile/requestsPanelProps"; import requestsPanelProps from "./Profile/requestsPanelProps";
import streamersPanelProps from "./Profile/streamersPanelProps"; import streamersPanelProps from "./Profile/streamersPanelProps";
import {pickProps} from "~/functions/pickProps";
const props = defineProps({ const props = defineProps({
...backendPanelProps, ...backendPanelProps,

View File

@ -62,12 +62,6 @@
</section> </section>
</template> </template>
<script>
export default {
inheritAttrs: false,
}
</script>
<script setup> <script setup>
import {BACKEND_LIQUIDSOAP} from '~/components/Entity/RadioAdapters'; import {BACKEND_LIQUIDSOAP} from '~/components/Entity/RadioAdapters';
import Icon from '~/components/Common/Icon'; import Icon from '~/components/Common/Icon';

View File

@ -123,12 +123,6 @@
</section> </section>
</template> </template>
<script>
export default {
inheritAttrs: false
};
</script>
<script setup> <script setup>
import {FRONTEND_ICECAST, FRONTEND_SHOUTCAST} from '~/components/Entity/RadioAdapters'; import {FRONTEND_ICECAST, FRONTEND_SHOUTCAST} from '~/components/Entity/RadioAdapters';
import CopyToClipboardButton from '~/components/Common/CopyToClipboardButton'; import CopyToClipboardButton from '~/components/Common/CopyToClipboardButton';

View File

@ -37,12 +37,6 @@
</div> </div>
</template> </template>
<script>
export default {
inheritAttrs: false
};
</script>
<script setup> <script setup>
import Icon from '~/components/Common/Icon'; import Icon from '~/components/Common/Icon';
import PlayButton from "~/components/Common/PlayButton.vue"; import PlayButton from "~/components/Common/PlayButton.vue";

View File

@ -195,12 +195,6 @@
</section> </section>
</template> </template>
<script>
export default {
inheritAttrs: false
};
</script>
<script setup> <script setup>
import {BACKEND_LIQUIDSOAP} from '~/components/Entity/RadioAdapters'; import {BACKEND_LIQUIDSOAP} from '~/components/Entity/RadioAdapters';
import Icon from '~/components/Common/Icon'; import Icon from '~/components/Common/Icon';

View File

@ -103,12 +103,6 @@
</section> </section>
</template> </template>
<script>
export default {
inheritAttrs: false
};
</script>
<script setup> <script setup>
import Icon from '~/components/Common/Icon'; import Icon from '~/components/Common/Icon';
import EnabledBadge from "~/components/Common/Badges/EnabledBadge.vue"; import EnabledBadge from "~/components/Common/Badges/EnabledBadge.vue";

View File

@ -57,12 +57,6 @@
</section> </section>
</template> </template>
<script>
export default {
inheritAttrs: false
};
</script>
<script setup> <script setup>
import Icon from '~/components/Common/Icon'; import Icon from '~/components/Common/Icon';
import requestsPanelProps from "~/components/Stations/Profile/requestsPanelProps"; import requestsPanelProps from "~/components/Stations/Profile/requestsPanelProps";

View File

@ -57,12 +57,6 @@
</section> </section>
</template> </template>
<script>
export default {
inheritAttrs: false
};
</script>
<script setup> <script setup>
import Icon from "~/components/Common/Icon.vue"; import Icon from "~/components/Common/Icon.vue";
import EnabledBadge from "~/components/Common/Badges/EnabledBadge.vue"; import EnabledBadge from "~/components/Common/Badges/EnabledBadge.vue";

View File

@ -0,0 +1,9 @@
import {reactivePick} from "@vueuse/core";
import {keys} from "lodash";
export function pickProps(props, subset) {
return reactivePick(
props,
...keys(subset)
)
}