feature: implement section render temlate

This commit is contained in:
Sagi 2022-09-29 23:29:13 +08:00
parent 5643983f87
commit 047b78cfff
1 changed files with 87 additions and 11 deletions

View File

@ -1,16 +1,92 @@
import { defineComponent, SetupContext } from "vue";
import { SectionProps, sectionProps } from "./section.props";
import { computed, defineComponent, ref, SetupContext } from 'vue';
import { ButtonConfig, SectionProps, sectionProps } from './section.props';
export default defineComponent({
name:'FSection',
props:sectionProps,
emits:[],
setup(props:SectionProps, context:SetupContext) {
return ()=>{
return (
name: 'FSection',
props: sectionProps,
emits: [],
setup(props: SectionProps, context: SetupContext) {
const shouldShowHeader = computed(() => {
return true;
});
)
const shouldShowToolbarInHeader = computed(() => {
return false;
});
const shouldShowToolbarInContent = computed(() => {
return false;
});
const shouldShowToolbarTemplateInContent = computed(() => {
return false;
});
const shouldShowExtendArea = computed(() => {
return false;
});
const toolbarButtons = ref([]);
const headerClass = computed(() => ({}));
const extendAreaClass = computed(() => ({}));
const contentClass = computed(() => ({
'f-section-content': true,
}));
function getToolbarState() {
return true;
}
return () => {
return (
<>
{shouldShowHeader.value && (
<div class="f-section-header" class={headerClass.value}>
{shouldShowToolbarInHeader.value && (
<div class="f-section-header--btn-placeholder">
{toolbarButtons.value
.filter((toolButton: ButtonConfig) => getToolbarState(toolButton.id, btnVisible, true))
.forEach((toolButton: ButtonConfig) => {
return <button class={toolButton.appearance.class}>{toolButton.title}</button>;
})}
</div>
)}
</div>
)}
{shouldShowToolbarInContent.value && (
<div class="f-section-header--btn-placeholder">
{toolbarButtons.value
.filter((toolButton: ButtonConfig) => getToolbarState(toolButton.id, btnVisible, true))
.forEach((toolButton: ButtonConfig) => {
return <button class={toolButton.appearance.class}>{toolButton.title}</button>;
})}
</div>
)}
{shouldShowExtendArea.value && (
<div class="f-section-extend" class={extendAreaClass.value}>
{context.slots.extend && context.slots.extend()}
</div>
)}
<div class={contentClass.value}>
{shouldShowToolbarTemplateInContent.value && (
<div class="f-section-toolbar f-section-content--toolbar">
{context.slots.toolbarButtons &&
context.slots.toolbarButtons({
datas: toolbarBtns,
dpHidden: toolbarDpHidden,
dpDatas: inMoreButtonContents,
})}
</div>
)}
{context.slots.default && context.slots.default()}
</div>
</>
);
};
},
})
});