Bilibili-Evolved/registry/lib/components/style/home-redesign/fresh/FreshLayoutItem.vue
timongh 4bb70030b8 Mark more specific types for Object, Array and Function in the props option
Signed-off-by: timongh <46739861+timongh@users.noreply.github.com>
2023-02-03 13:11:26 +08:00

48 lines
930 B
Vue

<template>
<fragment>
<div
class="fresh-home-content-layout-item"
:class="{
grow: item.grow,
}"
>
<component :is="item.component" />
</div>
<div v-if="options.linebreak" class="fresh-home-content-layout-item linebreak"></div>
</fragment>
</template>
<script lang="ts">
import { PropType } from 'vue'
import { freshHomeOptions } from './types'
import type { FreshLayoutItem } from './layouts/fresh-layout-item'
export default Vue.extend({
props: {
item: {
required: true,
type: Object as PropType<FreshLayoutItem>,
},
},
data() {
return {
options: freshHomeOptions.layoutOptions[this.item.name] ?? {},
}
},
})
</script>
<style lang="scss">
.fresh-home {
&-content-layout-item {
flex: 0 0 auto;
padding: 12px;
&.linebreak {
padding: 0;
flex: 1 0 100%;
}
&.grow {
flex: 1 0 0;
}
}
}
</style>