feature: implement section render temlate

packages/ui-vue/components/section/src/section.component.tsx

@@ -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) {
+        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>
+                </>
+            );
+        };
     },
-})
+});