Use pickProps for prop-drilling in other components.

This commit is contained in:
Buster Neece 2023-01-04 11:54:37 -06:00
parent c34c1fb16f
commit 1fa0ab618b
No known key found for this signature in database
GPG Key ID: F1D2E64A0005E80E
4 changed files with 45 additions and 13 deletions

View File

@ -8,7 +8,7 @@
<div class="stations nowplaying">
<radio-player
v-bind="$props"
v-bind="pickProps(props, playerProps)"
@np_updated="onNowPlayingUpdate"
/>
</div>
@ -59,6 +59,7 @@ import Icon from '~/components/Common/Icon';
import RadioPlayer from './Player.vue';
import {ref} from "vue";
import playerProps from "~/components/Public/playerProps";
import {pickProps} from "~/functions/pickProps";
const props = defineProps({
...playerProps,

View File

@ -1,13 +1,13 @@
<template>
<episodes-view
v-if="activePodcast"
v-bind="$props"
v-bind="pickProps(props, episodesViewProps)"
:podcast="activePodcast"
@clear-podcast="onClearPodcast"
/>
<list-view
v-else
v-bind="$props"
v-bind="pickProps(props, listViewProps)"
@select-podcast="onSelectPodcast"
/>
</template>
@ -18,6 +18,7 @@ import ListView from './Podcasts/ListView';
import {ref} from "vue";
import episodesViewProps from "./Podcasts/episodesViewProps";
import listViewProps from "./Podcasts/listViewProps";
import {pickProps} from "~/functions/pickProps";
const props = defineProps({
...episodesViewProps,

View File

@ -1,5 +1,14 @@
export default {
locale: String,
stationTimeZone: String,
quotaUrl: String
locale: {
type: String,
required: true
},
stationTimeZone: {
type: String,
required: true
},
quotaUrl: {
type: String,
required: true
}
}

View File

@ -1,9 +1,30 @@
export default {
listUrl: String,
newArtUrl: String,
quotaUrl: String,
locale: String,
stationTimeZone: String,
languageOptions: Object,
categoriesOptions: Object
listUrl: {
type: String,
required: true
},
newArtUrl: {
type: String,
required: true
},
quotaUrl: {
type: String,
required: true
},
locale: {
type: String,
required: true
},
stationTimeZone: {
type: String,
required: true
},
languageOptions: {
type: Object,
required: true
},
categoriesOptions: {
type: Object,
required: true
}
}