0
0
Fork 0
mirror of https://github.com/VueTubeApp/VueTube synced 2024-11-08 04:25:07 +00:00
VueTube/NUXT/components/SectionRenderers/shelfRenderer.vue
2022-05-05 19:09:28 -04:00

49 lines
1.3 KiB
Vue

<template>
<div class="fill-width">
<h4 v-if="render.headerRenderer" class="font-weight-bold shelf-header">
{{
render.headerRenderer.elementRenderer.newElement.type.componentType
.model.shelfHeaderModel.shelfHeaderData.title
}}
</h4>
<v-list-item class="pa-0 min-height-0">
<component
v-if="render.content && getComponents()[Object.keys(render.content)[0]]"
:is="Object.keys(render.content)[0]"
:render="render.content[Object.keys(render.content)[0]]"
></component
></v-list-item>
<!-- <div
v-if="render.separator && render.separator.hasBottomSeparator"
class="separator-bottom background"
:class="$vuetify.theme.dark ? 'lighten-1' : 'darken-1'"
:style="{ height: render.separator.height + 'px' }"
></div> -->
</div>
</template>
<style scoped>
.shelf-header {
width: 100%; /* Prevent Loading Weirdness */
padding: 10px;
}
</style>
<script>
import verticalListRenderer from "~/components/ListRenderers/verticalListRenderer.vue";
import horizontalListRenderer from "~/components/ListRenderers/horizontalListRenderer.vue";
export default {
components: {
horizontalListRenderer,
verticalListRenderer,
},
props: ["render"],
methods: {
getComponents() {
return this.$options.components;
},
},
};
</script>