refactor(section): refector section render function
This commit is contained in:
Sagi
parent
8a2439cdfa
commit
e7288043a4
|
|
@ -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 contentClass = computed(() => ({
|
||||
'f-section-content': true,
|
||||
const extendAreaClass = computed(() => ({
|
||||
'f-section-extend': 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 (
|
||||
<>
|
||||
{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>
|
||||
</>
|
||||
<div class="f-section">
|
||||
{renderSectionHeader()}
|
||||
{renderSectionContent()}
|
||||
</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>
|
||||
// </>
|
||||
// );
|
||||
// };
|
||||
}
|
||||
});
|
||||
|
|
|
|||
|
|
@ -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>;
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
Loading…
Reference in New Issue