refactor(section): refector section render function

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

@@ -10,6 +10,14 @@ export default defineComponent({
             return true;
         });
 
+        const shouldShowHeaderTitle = computed(() => {
+            return true;
+        });
+
+        const shouldShowSubHeaderTitle = computed(() => {
+            return true;
+        });
+
         const shouldShowToolbarInHeader = computed(() => {
             return false;
         });
@@ -28,65 +36,109 @@ export default defineComponent({
 
         const toolbarButtons = ref([]);
 
-        const headerClass = computed(() => ({}));
+        const headerClass = computed(() => {
+            const customClassArray = props.headerClass.split(' ');
+            const headClassObject = {
+                'f-section-header': true
+            };
+            customClassArray.reduce<Record<string, unknown>>((classObject, classString) => {
+                classObject[classString] = true;
+                return classObject;
+            }, headClassObject);
+            return headClassObject;
+        });
 
-        const extendAreaClass = computed(() => ({}));
+        const extendAreaClass = computed(() => ({
-
+            'f-section-extend': true
-        const contentClass = computed(() => ({
-            'f-section-content': true,
         }));
 
-        function getToolbarState() {
+        const contentClass = computed(() => {
+            const customClassArray = props.contentClass.split(' ');
+            const contentClassObject = {
+                'f-section-content': true
+            };
+            customClassArray.reduce<any>((classObject, classString) => {
+                classObject[classString] = true;
+                return classObject;
+            }, contentClassObject);
+            return contentClassObject;
+        });
+
+        function getToolbarState(buttonId: string, visiableMap: any, defaultValue: boolean) {
             return true;
         }
 
+        const mainTitle = ref(props.mainTitle);
+
+        const subTitle = ref(props.subTitle);
+
+        function renderSectionHeader() {
+            return (
+                shouldShowHeader.value && (
+                    <div class={headerClass.value}>
+                        {shouldShowHeaderTitle.value && (
+                            <div class="f-title">
+                                <h4 class="f-title-text">{mainTitle.value}</h4>
+                                {shouldShowSubHeaderTitle.value && <span>{subTitle}</span>}
+                            </div>
+                        )}
+                    </div>
+                )
+            );
+        }
+
+        function renderSectionContent() {
+            return <div class={contentClass.value}>{context.slots.default && context.slots.default()}</div>;
+        }
+
         return () => {
             return (
-                <>
+                <div class="f-section">
-                    {shouldShowHeader.value && (
+                    {renderSectionHeader()}
-                        <div class="f-section-header" class={headerClass.value}>
+                    {renderSectionContent()}
-                            {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>
-                </>
             );
         };
-    },
+
+        // return () => {
+        //     return (
+        //         <>
+        //             {shouldShowHeader.value && (
+        //                 <div class={headerClass.value}>
+        //                     {shouldShowToolbarInHeader.value && (
+        //                         <div class="f-section-header--btn-placeholder">
+        //                             {toolbarButtons.value
+        //                                 .filter((toolButton: ButtonConfig) => getToolbarState(toolButton.id, {}, 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, {}, true))
+        //                         .forEach((toolButton: ButtonConfig) => {
+        //                             return <button class={toolButton.appearance.class}>{toolButton.title}</button>;
+        //                         })}
+        //                 </div>
+        //             )}
+        //             {shouldShowExtendArea.value && (
+        //                 <div 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({})}
+        //                     </div>
+        //                 )}
+        //                 {context.slots.default && context.slots.default()}
+        //             </div>
+        //         </>
+        //     );
+        // };
+    }
 });

packages/ui-vue/components/section/src/section.props.ts

@@ -1,11 +1,15 @@
 import { ExtractPropTypes, PropType } from 'vue';
 
+export interface ButtonAppearance {
+    class: string;
+}
+
 export interface ButtonConfig {
     id: string;
     disable: boolean;
     title: string;
     click: any;
-    appearance: object;
+    appearance: ButtonAppearance;
     visible?: boolean;
 }
 
@@ -32,5 +36,6 @@ export const sectionProps = {
     toolbar: { type: Object as PropType<ToolbarConfig>, default: {} },
     showToolbarMoreButton: { type: Boolean, default: true },
     clickThrottleTime: { type: Number, default: 350 },
+    headerClass: { type: String, default: '' }
 };
 export type SectionProps = ExtractPropTypes<typeof sectionProps>;

packages/ui-vue/src/App.vue

@@ -7,6 +7,7 @@ import Avatar from './components/avatar.vue';
 import ButtonEdit from './components/button-edit.vue';
 import FButton from '../components/button/src/button.component';
 import Switch from './components/switch.vue';
+import Section from './components/section.vue';
 
 const canEdit = ref(true);
 const disable = ref(false);
@@ -34,6 +35,7 @@ const canAutoComplete = ref(false);
     <label for="checkbox">disable:{{ disable }}</label>
     <FButton :disable="disable"></FButton>
     <Switch></Switch>
+    <Section></Section>
 </template>
 
 <style scoped>

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

@@ -0,0 +1,13 @@
+<script setup lang="ts">
+
+import Section from '../../components/section/src/section.component';
+
+</script>
+
+<template>
+    <Section show-header main-title="This is a section title">
+        <div>
+            <span>This is setion content.</span>
+        </div>
+    </Section>
+</template>