Reconstruct layer components

Author: sheepzh

src/app/components/common/content-container.ts

@@ -5,28 +5,30 @@
  * https://opensource.org/licenses/MIT
  */
 
-import { defineComponent, h, VNode } from "vue"
-
-/**
- * @returns the render function of content container 
- */
-export function renderContentContainer(childNodes: () => VNode[] | VNode): () => VNode {
-    return () => h('div', { class: 'content-container' }, childNodes())
-}
-
-export const contentContainerCardStyle = { class: 'container-card' }
+import { ElCard } from "element-plus"
+import { defineComponent, h, useSlots, VNode } from "vue"
 
 const _default = defineComponent({
     name: "ContentContainer",
-    setup(_, ctx) {
+    setup() {
+        const slots = useSlots()
+        const children = []
+        const hasDefault = !!slots.default
+        if (hasDefault) {
+            // Only one content
+            children.push(h(slots.default))
+        } else {
+            // Else filter and content
+            const hasFilter = !!slots.filter
+            if (hasFilter) {
+                children.push(h(ElCard, { class: "filter-container" }, () => h(slots.filter)))
+            }
+            slots.content && children.push(h(ElCard, { class: 'container-card' }, () => h(slots.content)))
+        }
+
         return () => h("div",
             { class: "content-container" },
-            () => {
-                const child = []
-                ctx.slots.filter && child.push(h(ctx.slots.filter))
-                child.push(h(ctx.slots.content))
-                return child
-            }
+            children
         )
     }
 })

src/app/components/common/date-range-filter-item.ts

@@ -15,7 +15,11 @@ const _default = defineComponent({
         disabledDate: Function,
         startPlaceholder: String,
         endPlaceholder: String,
-        shortcuts: Array as PropType<Array<ElementDatePickerShortcut>>
+        shortcuts: Array as PropType<Array<ElementDatePickerShortcut>>,
+        clearable: {
+            type: Boolean,
+            default: true
+        }
     },
     emits: ["change"],
     setup(props, ctx) {
@@ -30,7 +34,8 @@ const _default = defineComponent({
                 shortcuts: props.shortcuts,
                 'onUpdate:modelValue': (newVal: Array<Date>) => ctx.emit("change", dateRange.value = newVal),
                 startPlaceholder: props.startPlaceholder,
-                endPlaceholder: props.endPlaceholder
+                endPlaceholder: props.endPlaceholder,
+                clearable: props.clearable
             }
         ))
     }

src/app/components/common/filter.ts

@@ -9,7 +9,7 @@ import { ElRow, ElCol } from "element-plus"
 import { defineComponent, h, ref, Ref } from "vue"
 import { getUsedStorage } from "@db/memory-detector"
 import './style'
-import { renderContentContainer } from "../common/content-container"
+import ContentContainer from "../common/content-container"
 import migration from "./migration"
 import memoryInfo from "./memory-info"
 import clearPanel from "./clear"
@@ -34,4 +34,6 @@ const firstRow = () => h(ElRow, { gutter: 20 },
     ]
 )
 
-export default defineComponent(() => renderContentContainer(firstRow))
+export default defineComponent(() => {
+    return () => h(ContentContainer, {}, { default: () => firstRow() })
+})

src/app/components/data-manage/index.ts

@@ -5,17 +5,12 @@
  * https://opensource.org/licenses/MIT
  */
 
-import { ElCard } from "element-plus"
 import { h, Ref } from "vue"
-import { contentContainerCardStyle } from "@app/components/common/content-container"
 
 export type ChartProps = {
     chartRef: Ref<HTMLDivElement>
 }
 
-const _default = (props: ChartProps) => h(ElCard,
-    contentContainerCardStyle,
-    () => h('div', { class: 'chart-container', ref: props.chartRef })
-)
+const _default = (props: ChartProps) => h('div', { class: 'chart-container', ref: props.chartRef })
 
 export default _default

src/app/components/habit/chart/index.ts

@@ -11,7 +11,6 @@ import { daysAgo } from "@util/time"
 import { t } from "@app/locale"
 import { HabitMessage } from "@app/locale/components/habit"
 import SwitchFilterItem from "@app/components/common/switch-filter-item"
-import { renderFilterContainer } from "../common/filter"
 import { ElementDatePickerShortcut } from "@app/element-ui/date"
 import DateRangeFilterItem from "@app/components/common/date-range-filter-item"
 
@@ -76,6 +75,7 @@ const childNodes = ({
         h(DateRangeFilterItem, {
             startPlaceholder: dateRangeStartPlaceholder,
             endPlaceholder: dateRangeEndPlaceholder,
+            clearable: false,
             disabledDate: (date: Date) => date.getTime() > new Date().getTime(),
             shortcuts,
             onChange: (newVal: Date[]) => dateRangeRef.value = newVal
@@ -88,4 +88,4 @@ const childNodes = ({
         })
     ]
 
-export default renderFilterContainer(childNodes)
+export default (props: _Props) => childNodes(props)

src/app/components/habit/filter.ts

@@ -6,11 +6,11 @@
  */
 
 import { ECharts, init } from "echarts"
-import { computed, ComputedRef, defineComponent, onMounted, ref, Ref, watch } from "vue"
+import { computed, ComputedRef, defineComponent, h, onMounted, ref, Ref, watch } from "vue"
 import { MAX_PERIOD_ORDER, PeriodKey } from "@entity/dto/period-info"
 import periodService, { PeriodQueryParam } from "@service/period-service"
 import { daysAgo, isSameDay } from "@util/time"
-import { renderContentContainer } from "../common/content-container"
+import ContentContainer from "@app/components/common/content-container"
 import chart, { ChartProps } from "./chart"
 import generateOptions from "./chart/option"
 import filter from "./filter"
@@ -72,10 +72,17 @@ const handleMounted = () => {
     queryAndRenderChart()
 }
 
-const _default = defineComponent(() => {
-    // Must use closure, not function variable
-    onMounted(() => handleMounted())
-    return renderContentContainer(() => [filter(filterProps), chart(chartProps)])
+const _default = defineComponent({
+    name: "Habit",
+    setup() {
+        onMounted(() => handleMounted())
+        return () => h(ContentContainer, {},
+            {
+                filter: () => filter(filterProps),
+                content: () => chart(chartProps)
+            }
+        )
+    }
 })
 
 export default _default

src/app/components/habit/index.ts

@@ -10,7 +10,6 @@ import { Ref, h } from "vue"
 import InputFilterItem from "@app/components/common/input-filter-item"
 import SwitchFilterItem from "@app/components/common/switch-filter-item"
 import ButtonFilterItem from "@app/components/common/button-filter-item"
-import { renderFilterContainer } from "../common/filter"
 import { t } from "@app/locale"
 
 type _Props = {
@@ -46,4 +45,4 @@ const filterItems = (props: _Props) => [
     // buttonFilterItem({ type: 'primary', label: msg => msg.limit.button.test, onClick: props.handleTest, icon: 'search' })
 ]
 
-export default renderFilterContainer(filterItems)
+export default (props: _Props) => filterItems(props)

src/app/components/limit/filter.ts

@@ -6,14 +6,13 @@
  */
 
 import { defineComponent, h, ref, Ref, watch } from "vue"
-import { renderContentContainer, contentContainerCardStyle } from "../common/content-container"
+import ContentContainer from "../common/content-container"
 import filter, { FilterProps } from "./filter"
 import table from "./table"
 import AddDialog from "./add-dialog"
 import TimeLimitItem from "@entity/dto/time-limit-item"
 import limitService from "@service/limit-service"
 import { useRoute, useRouter } from "vue-router"
-import { ElCard } from "element-plus"
 
 const urlRef: Ref<string> = ref('')
 const onlyEnabledRef: Ref<boolean> = ref(false)
@@ -38,25 +37,22 @@ const filterProps: FilterProps = {
     handleTest: () => { }
 }
 
-const card = (listRef: Ref<TimeLimitItem[]>, addDialogRef: Ref) => h(ElCard,
-    contentContainerCardStyle,
-    () => [
-        table({ list: listRef, queryData }),
-        h(AddDialog, { ref: addDialogRef, onSaved: queryData })
-    ]
-)
-
-const childNodes = () => [
-    filter(filterProps),
-    card(listRef, addDialogRef)
+const content = (listRef: Ref<TimeLimitItem[]>, addDialogRef: Ref) => [
+    table({ list: listRef, queryData }),
+    h(AddDialog, { ref: addDialogRef, onSaved: queryData })
 ]
 
-const _default = defineComponent(() => {
-    const url = useRoute().query['url'] as string
-    // Remove all the query params
-    useRouter().replace({ query: {} })
-    url && (urlRef.value = decodeURIComponent(url))
-    return renderContentContainer(childNodes)
+const _default = defineComponent({
+    name: "Limit",
+    setup() {
+        const url = useRoute().query['url'] as string
+        useRouter().replace({ query: {} })
+        url && (urlRef.value = decodeURIComponent(url))
+        return () => h(ContentContainer, {}, {
+            filter: () => filter(filterProps),
+            content: () => content(listRef, addDialogRef)
+        })
+    }
 })
 
 export default _default