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

frontend/vue/components/Stations/Profile.vue

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

frontend/vue/components/Stations/Profile/BackendPanel.vue

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

frontend/vue/components/Stations/Profile/FrontendPanel.vue

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

frontend/vue/components/Stations/Profile/HeaderPanel.vue

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

frontend/vue/components/Stations/Profile/NowPlayingPanel.vue

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

frontend/vue/components/Stations/Profile/PublicPagesPanel.vue

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

frontend/vue/components/Stations/Profile/RequestsPanel.vue

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

frontend/vue/components/Stations/Profile/StreamersPanel.vue

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

frontend/vue/functions/pickProps.js

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