@done-coding/admin-core 0.18.0 → 0.19.0

package/es/components/list-page/ListPage.vue2.mjs

@@ -1,22 +1,22 @@
-import { defineComponent as Re, useCssVars as Ve, unref as i, useSlots as Ie, computed as s, useModel as C, ref as u, shallowRef as q, watch as Ae, withDirectives as Me, openBlock as k, createBlock as H, normalizeClass as Be, withCtx as n, createVNode as N, mergeProps as R, createSlots as E, renderSlot as f, normalizeProps as V, guardReactiveProps as I, renderList as A, createCommentVNode as U, mergeModels as J } from "vue";
-import { vLoading as $e } from "element-plus";
-import Fe from "../form/FormSearch.vue.mjs";
-import { generateFormData as Pe, stringifyFormData as je } from "../form/utils.mjs";
-import { useListPageSticky as ze } from "./use-sticky.mjs";
-import Q from "../display/WatchSize.vue.mjs";
-import De from "../table/TableMain.vue.mjs";
-import Oe from "../slot-layout/SlotLayoutFlowAside.vue.mjs";
-import xe from "lodash/pick";
-import Le from "lodash/cloneDeep";
-import { useChannelViewportHeight as Te } from "../../hooks/use-channel-viewport-height.mjs";
-const Ze = /* @__PURE__ */ Re({
+import { defineComponent, useCssVars, unref, useSlots, computed, useModel, ref, shallowRef, watch, withDirectives, openBlock, createBlock, normalizeClass, withCtx, createVNode, mergeProps, createSlots, renderSlot, normalizeProps, guardReactiveProps, renderList, createCommentVNode, mergeModels } from "vue";
+import { vLoading } from "element-plus";
+import FormSearch from "../form/FormSearch.vue.mjs";
+import { generateFormData, stringifyFormData } from "../form/utils.mjs";
+import { useListPageSticky } from "./use-sticky.mjs";
+import _sfc_main$1 from "../display/WatchSize.vue.mjs";
+import TableMain from "../table/TableMain.vue.mjs";
+import SlotLayoutFlowAside from "../slot-layout/SlotLayoutFlowAside.vue.mjs";
+import _pick from "lodash/pick";
+import _cloneDeep from "lodash/cloneDeep";
+import { useChannelViewportHeight } from "../../hooks/use-channel-viewport-height.mjs";
+const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "ListPage",
-  props: /* @__PURE__ */ J({
+  props: /* @__PURE__ */ mergeModels({
     staticQuery: { default: () => ({}) },
     formSearchProps: {},
     columns: {},
     rowKey: {},
-    refine: { type: Boolean, default: !0 },
+    refine: { type: Boolean, default: true },
     refineReduceHeight: { default: 0 },
     viewportHeight: {},
     parentChannel: {},
@@ -29,258 +29,364 @@ const Ze = /* @__PURE__ */ Re({
     injectInfo: {},
     beforeSearch: {},
     clearTableFilterOnReset: { type: Boolean },
-    separateSearch: { type: Boolean, default: !1 },
+    separateSearch: { type: Boolean, default: false },
     separateSearchConfig: {},
-    searchSticky: { type: Boolean, default: !1 },
-    toolbarSticky: { type: Boolean, default: !1 },
-    pagerSticky: { type: Boolean, default: !1 },
-    headerObserveResize: { type: Boolean, default: !1 },
-    operationObserveResize: { type: Boolean, default: !1 }
+    searchSticky: { type: Boolean, default: false },
+    toolbarSticky: { type: Boolean, default: false },
+    pagerSticky: { type: Boolean, default: false },
+    headerObserveResize: { type: Boolean, default: false },
+    operationObserveResize: { type: Boolean, default: false }
   }, {
-    isAutoRefresh: { type: Boolean },
-    isAutoRefreshModifiers: {},
-    refreshInterval: {},
-    refreshIntervalModifiers: {},
-    customView: { type: Boolean, default: !1 },
-    customViewModifiers: {}
+    "isAutoRefresh": { type: Boolean },
+    "isAutoRefreshModifiers": {},
+    "refreshInterval": {},
+    "refreshIntervalModifiers": {},
+    "customView": { type: Boolean, ...{ default: false } },
+    "customViewModifiers": {}
   }),
-  emits: /* @__PURE__ */ J(["dataChange", "pageInfoChange"], ["update:isAutoRefresh", "update:refreshInterval", "update:customView"]),
-  setup(a, { expose: W, emit: G }) {
-    Ve((e) => ({
-      v9b019db8: ue.value,
-      v676bd8af: i(oe),
-      v9dcea7f4: i(se),
-      v82e6163c: i(ie)
+  emits: /* @__PURE__ */ mergeModels(["dataChange", "pageInfoChange"], ["update:isAutoRefresh", "update:refreshInterval", "update:customView"]),
+  setup(__props, { expose: __expose, emit: __emit }) {
+    useCssVars((_ctx) => ({
+      "v9b019db8": minHeight.value,
+      "v676bd8af": unref(searchStickyTop),
+      "v9dcea7f4": unref(toolbarStickyTop),
+      "v82e6163c": unref(pagerStickyBottom)
     }));
-    const o = a, M = G, B = Ie(), $ = s(() => !!B.header), F = s(() => !!B.operation), m = C(a, "isAutoRefresh"), P = C(a, "refreshInterval"), j = C(a, "customView"), y = u({}), S = u(
+    const props = __props;
+    const listPageEmits = __emit;
+    const slots = useSlots();
+    const hasHeader = computed(() => !!slots.header);
+    const hasOperation = computed(() => !!slots.operation);
+    const isAutoRefresh = useModel(__props, "isAutoRefresh");
+    const refreshInterval = useModel(__props, "refreshInterval");
+    const customView = useModel(__props, "customView");
+    const data = ref({});
+    const query = ref(
       {}
-    ), z = u(!1), X = s(() => !m.value && z.value), l = q(), c = q(), { viewportHeightFinal: Y } = Te(o), w = u(0), D = u(0), O = u(0), Z = s(() => ({
-      ...S.value,
-      ...o.staticQuery
-    })), b = u(!1), _ = s(() => b.value ? w.value + 10 : 0), {
-      layoutRoot: ee,
-      searchStickyActive: te,
-      toolbarStickyActive: ae,
-      pagerStickyActive: re,
-      searchStickyTop: oe,
-      toolbarStickyTop: se,
-      pagerStickyBottom: ie
-    } = ze({
-      searchSticky: () => o.searchSticky,
-      toolbarSticky: () => o.toolbarSticky,
-      pagerSticky: () => o.pagerSticky,
-      separateSearch: () => o.separateSearch,
-      searchHeight: () => w.value,
-      showSearch: () => b.value
-    }), le = s(() => F.value ? D.value + 10 : 0), ne = s(() => $.value ? O.value + 10 : 0), p = s(() => Y.value - o.refineReduceHeight), ue = s(() => o.refine ? `${p.value}px` : "auto"), ce = s(() => {
-      if (o.refine)
-        return o.separateSearch ? p.value : p.value - _.value - le.value - ne.value;
-    }), he = s(
-      () => o.refine ? `${p.value}px` : "100vh"
-    ), x = (e, t = "search") => {
-      var v, g, r;
-      let h = e;
-      if (o.beforeSearch && (h = o.beforeSearch(
-        Le(e),
-        t
-      )), t === "reset" && o.clearTableFilterOnReset && ((g = (v = c.value) == null ? void 0 : v.getTableInstance()) == null || g.clearFilter()), JSON.stringify(h) === JSON.stringify(S.value))
-        return ["reset", "search"].includes(t) ? (r = c.value) == null ? void 0 : r.reload() : void 0;
-      S.value = {
-        ...h
+    );
+    const loading = ref(false);
+    const showLoadingMask = computed(() => !isAutoRefresh.value && loading.value);
+    const formSearch = shallowRef();
+    const tableMain = shallowRef();
+    const { viewportHeightFinal } = useChannelViewportHeight(props);
+    const searchHeight = ref(0);
+    const operationHeight = ref(0);
+    const headerHeight = ref(0);
+    const queryMerge = computed(() => {
+      return {
+        ...query.value,
+        ...props.staticQuery
       };
-    }, fe = (e) => {
-      M("dataChange", e);
-    }, ve = (e) => {
-      M("pageInfoChange", e);
-    }, ge = (e) => {
-      z.value = e;
-    }, de = (e) => {
-      w.value = e;
-    }, pe = (e) => {
-      D.value = e;
-    }, me = (e) => {
-      O.value = e;
-    }, ye = s(() => o.list), Se = s(() => o.rowKey), L = s(() => y.value), T = {
-      refresh: async (e = !1) => {
-        var t;
-        return (t = c.value) == null ? void 0 : t.refresh(e);
+    });
+    const showSearch = ref(false);
+    const searchHeightAdjust = computed(() => {
+      if (!showSearch.value) {
+        return 0;
+      } else {
+        return searchHeight.value + 10;
+      }
+    });
+    const {
+      layoutRoot,
+      searchStickyActive,
+      toolbarStickyActive,
+      pagerStickyActive,
+      searchStickyTop,
+      toolbarStickyTop,
+      pagerStickyBottom
+    } = useListPageSticky({
+      searchSticky: () => props.searchSticky,
+      toolbarSticky: () => props.toolbarSticky,
+      pagerSticky: () => props.pagerSticky,
+      separateSearch: () => props.separateSearch,
+      searchHeight: () => searchHeight.value,
+      showSearch: () => showSearch.value
+    });
+    const operationHeightAdjust = computed(() => {
+      if (!hasOperation.value) {
+        return 0;
+      } else {
+        return operationHeight.value + 10;
+      }
+    });
+    const headerHeightAdjust = computed(() => {
+      if (!hasHeader.value) {
+        return 0;
+      } else {
+        return headerHeight.value + 10;
+      }
+    });
+    const listPageMinHeight = computed(() => {
+      return viewportHeightFinal.value - props.refineReduceHeight;
+    });
+    const minHeight = computed(() => {
+      return props.refine ? `${listPageMinHeight.value}px` : "auto";
+    });
+    const tableMaxHeight = computed(() => {
+      if (!props.refine) {
+        return void 0;
+      }
+      if (props.separateSearch) {
+        return listPageMinHeight.value;
+      }
+      return listPageMinHeight.value - searchHeightAdjust.value - operationHeightAdjust.value - headerHeightAdjust.value;
+    });
+    const searchAsideMaxHeight = computed(
+      () => props.refine ? `${listPageMinHeight.value}px` : "100vh"
+    );
+    const onSearch = (dataInit, type = "search") => {
+      var _a, _b, _c;
+      let data2 = dataInit;
+      if (props.beforeSearch) {
+        data2 = props.beforeSearch(
+          _cloneDeep(dataInit),
+          type
+        );
+      }
+      if (type === "reset" && props.clearTableFilterOnReset) {
+        (_b = (_a = tableMain.value) == null ? void 0 : _a.getTableInstance()) == null ? void 0 : _b.clearFilter();
+      }
+      if (JSON.stringify(data2) === JSON.stringify(query.value)) {
+        if (["reset", "search"].includes(type)) {
+          return (_c = tableMain.value) == null ? void 0 : _c.reload();
+        } else {
+          return;
+        }
+      }
+      query.value = {
+        ...data2
+      };
+    };
+    const onDataChange = (d) => {
+      listPageEmits("dataChange", d);
+    };
+    const onPageInfoChange = (info) => {
+      listPageEmits("pageInfoChange", info);
+    };
+    const onLoadingChange = (value) => {
+      loading.value = value;
+    };
+    const onFormSearchHeightChange = (height) => {
+      searchHeight.value = height;
+    };
+    const onOperateHeightChange = (height) => {
+      operationHeight.value = height;
+    };
+    const onHeaderHeightChange = (height) => {
+      headerHeight.value = height;
+    };
+    const assertList = computed(() => {
+      return props.list;
+    });
+    const assertRowKey = computed(() => {
+      return props.rowKey;
+    });
+    const assertData = computed(() => {
+      return data.value;
+    });
+    const expose = {
+      refresh: async (silent = false) => {
+        var _a;
+        return (_a = tableMain.value) == null ? void 0 : _a.refresh(silent);
       },
-      reload: async (e = !1) => {
-        var t;
-        return (t = c.value) == null ? void 0 : t.reload(e);
+      reload: async (silent = false) => {
+        var _a;
+        return (_a = tableMain.value) == null ? void 0 : _a.reload(silent);
       },
       getTableInstance: () => {
-        var e;
-        return (e = c.value) == null ? void 0 : e.getTableInstance();
+        var _a;
+        return (_a = tableMain.value) == null ? void 0 : _a.getTableInstance();
       },
       validate: () => {
-        if (l.value)
-          return l.value.validate();
-        throw new Error("实例化未完成");
+        if (formSearch.value) {
+          return formSearch.value.validate();
+        } else {
+          throw new Error("实例化未完成");
+        }
       },
       resetFields: () => {
-        var e;
-        return (e = l.value) == null ? void 0 : e.resetFields();
+        var _a;
+        return (_a = formSearch.value) == null ? void 0 : _a.resetFields();
       },
-      clearValidate: (e) => {
-        var t;
-        return (t = l.value) == null ? void 0 : t.clearValidate(e);
+      clearValidate: (key) => {
+        var _a;
+        return (_a = formSearch.value) == null ? void 0 : _a.clearValidate(key);
       },
       triggerReset: () => {
-        var e;
-        return (e = l.value) == null ? void 0 : e.triggerReset();
+        var _a;
+        return (_a = formSearch.value) == null ? void 0 : _a.triggerReset();
       },
       triggerSearch: () => {
-        var e;
-        return (e = l.value) == null ? void 0 : e.triggerSearch();
+        var _a;
+        return (_a = formSearch.value) == null ? void 0 : _a.triggerSearch();
       },
-      toggleCollapse: (e) => {
-        var t;
-        return (t = l.value) == null ? void 0 : t.toggleCollapse(e);
+      toggleCollapse: (nextValue) => {
+        var _a;
+        return (_a = formSearch.value) == null ? void 0 : _a.toggleCollapse(nextValue);
       },
-      isCollapsed: s(() => {
-        var e;
-        return ((e = l.value) == null ? void 0 : e.isCollapsed.value) ?? !1;
+      isCollapsed: computed(() => {
+        var _a;
+        return ((_a = formSearch.value) == null ? void 0 : _a.isCollapsed.value) ?? false;
       }),
-      update: (e, t) => {
-        y.value[e] = t;
+      update: (key, value) => {
+        data.value[key] = value;
       }
-    }, we = s(() => {
-      const e = xe(T, [
+    };
+    const injectInfoAdjust = computed(() => {
+      const injectExtra = _pick(expose, [
         "triggerReset",
         "triggerSearch",
         "update"
       ]);
       return {
-        ...o.injectInfo || {},
-        ...e
+        ...props.injectInfo || {},
+        ...injectExtra
       };
-    }), be = (e) => e, Ce = (e) => e, ke = (e) => e, He = (e) => {
-      b.value = e;
+    });
+    const assertColumnDefaultScope = (scope) => {
+      return scope;
+    };
+    const assertColumnHeaderScope = (scope) => {
+      return scope;
+    };
+    const assertDataViewItemScope = (scope) => {
+      return scope;
+    };
+    const onVisibleChange = (status) => {
+      showSearch.value = status;
     };
-    return W(T), Ae(
-      () => o.list,
-      (e) => {
-        const t = Pe(e);
-        y.value = t, x(je(t, e));
+    __expose(expose);
+    watch(
+      () => props.list,
+      (n) => {
+        const fData = generateFormData(n);
+        data.value = fData;
+        onSearch(stringifyFormData(fData, n));
       },
       {
-        immediate: !0
+        immediate: true
       }
-    ), (e, t) => {
-      var h, v, g;
-      return Me((k(), H(i(Oe), {
+    );
+    return (_ctx, _cache) => {
+      var _a, _b, _c;
+      return withDirectives((openBlock(), createBlock(unref(SlotLayoutFlowAside), {
         ref_key: "layoutRoot",
-        ref: ee,
-        class: Be(["dc-list-page list-page", {
-          "list-page_search-sticky": i(te),
-          "list-page_toolbar-sticky": i(ae),
-          "list-page_pager-sticky": i(re)
+        ref: layoutRoot,
+        class: normalizeClass(["dc-list-page list-page", {
+          "list-page_search-sticky": unref(searchStickyActive),
+          "list-page_toolbar-sticky": unref(toolbarStickyActive),
+          "list-page_pager-sticky": unref(pagerStickyActive)
         }]),
-        separate: a.separateSearch,
-        type: (h = a.separateSearchConfig) == null ? void 0 : h.type,
-        gap: (v = a.separateSearchConfig) == null ? void 0 : v.gap,
-        "aside-width": (g = a.separateSearchConfig) == null ? void 0 : g.asideWidth,
-        "aside-max-height": he.value
+        separate: __props.separateSearch,
+        type: (_a = __props.separateSearchConfig) == null ? void 0 : _a.type,
+        gap: (_b = __props.separateSearchConfig) == null ? void 0 : _b.gap,
+        "aside-width": (_c = __props.separateSearchConfig) == null ? void 0 : _c.asideWidth,
+        "aside-max-height": searchAsideMaxHeight.value
       }, {
-        aside: n(() => [
-          $.value ? (k(), H(i(Q), {
+        aside: withCtx(() => [
+          hasHeader.value ? (openBlock(), createBlock(unref(_sfc_main$1), {
             key: 0,
             class: "list-page-header",
-            "observe-resize": a.headerObserveResize,
-            onHeightChange: me
+            "observe-resize": __props.headerObserveResize,
+            onHeightChange: onHeaderHeightChange
           }, {
-            default: n(() => [
-              f(e.$slots, "header", {}, void 0, !0)
+            default: withCtx(() => [
+              renderSlot(_ctx.$slots, "header", {}, void 0, true)
             ]),
             _: 3
-          }, 8, ["observe-resize"])) : U("", !0),
-          N(i(Fe), R({
+          }, 8, ["observe-resize"])) : createCommentVNode("", true),
+          createVNode(unref(FormSearch), mergeProps({
             ref_key: "formSearch",
-            ref: l,
-            list: ye.value,
-            data: L.value
-          }, a.formSearchProps, {
-            compact: a.separateSearch,
-            onSearch: x,
-            onHeightChange: de,
-            onVisibleChange: He
-          }), E({ _: 2 }, [
-            A(a.list, (r) => ({
-              name: r.key,
-              fn: n((d) => [
-                f(e.$slots, `form-${r.key}`, V(I(d)), void 0, !0)
-              ])
-            }))
+            ref: formSearch,
+            list: assertList.value,
+            data: assertData.value
+          }, __props.formSearchProps, {
+            compact: __props.separateSearch,
+            onSearch,
+            onHeightChange: onFormSearchHeightChange,
+            onVisibleChange
+          }), createSlots({ _: 2 }, [
+            renderList(__props.list, (config) => {
+              return {
+                name: config.key,
+                fn: withCtx((scope) => [
+                  renderSlot(_ctx.$slots, `form-${config.key}`, normalizeProps(guardReactiveProps(scope)), void 0, true)
+                ])
+              };
+            })
           ]), 1040, ["list", "data", "compact"]),
-          F.value ? (k(), H(i(Q), {
+          hasOperation.value ? (openBlock(), createBlock(unref(_sfc_main$1), {
             key: 1,
             class: "list-page-operation",
-            "observe-resize": a.operationObserveResize,
-            onHeightChange: pe
+            "observe-resize": __props.operationObserveResize,
+            onHeightChange: onOperateHeightChange
           }, {
-            default: n(() => [
-              f(e.$slots, "operation", {}, void 0, !0)
+            default: withCtx(() => [
+              renderSlot(_ctx.$slots, "operation", {}, void 0, true)
             ]),
             _: 3
-          }, 8, ["observe-resize"])) : U("", !0)
+          }, 8, ["observe-resize"])) : createCommentVNode("", true)
         ]),
-        default: n(() => [
-          N(i(De), R({
+        default: withCtx(() => [
+          createVNode(unref(TableMain), mergeProps({
             ref_key: "tableMain",
-            ref: c,
-            "is-auto-refresh": m.value,
-            "onUpdate:isAutoRefresh": t[0] || (t[0] = (r) => m.value = r),
-            "refresh-interval": P.value,
-            "onUpdate:refreshInterval": t[1] || (t[1] = (r) => P.value = r),
-            "custom-view": j.value,
-            "onUpdate:customView": t[2] || (t[2] = (r) => j.value = r),
-            api: a.api,
-            columns: a.columns,
-            query: Z.value,
-            maxHeight: ce.value,
-            rowKey: Se.value,
-            toolbar: a.toolbar,
-            showSwitchView: a.showSwitchView
-          }, a.tableMainProps, {
-            refine: !1,
-            injectInfo: we.value,
-            onLoadingChange: ge,
-            onDataChange: fe,
-            onPageInfoChange: ve
-          }), E({
-            "custom-view-item": n((r) => [
-              f(e.$slots, "custom-view-item", V(I(ke(r))), void 0, !0)
+            ref: tableMain,
+            "is-auto-refresh": isAutoRefresh.value,
+            "onUpdate:isAutoRefresh": _cache[0] || (_cache[0] = ($event) => isAutoRefresh.value = $event),
+            "refresh-interval": refreshInterval.value,
+            "onUpdate:refreshInterval": _cache[1] || (_cache[1] = ($event) => refreshInterval.value = $event),
+            "custom-view": customView.value,
+            "onUpdate:customView": _cache[2] || (_cache[2] = ($event) => customView.value = $event),
+            api: __props.api,
+            columns: __props.columns,
+            query: queryMerge.value,
+            maxHeight: tableMaxHeight.value,
+            rowKey: assertRowKey.value,
+            toolbar: __props.toolbar,
+            showSwitchView: __props.showSwitchView
+          }, __props.tableMainProps, {
+            refine: false,
+            injectInfo: injectInfoAdjust.value,
+            onLoadingChange,
+            onDataChange,
+            onPageInfoChange
+          }), createSlots({
+            "custom-view-item": withCtx((scope) => [
+              renderSlot(_ctx.$slots, "custom-view-item", normalizeProps(guardReactiveProps(assertDataViewItemScope(scope))), void 0, true)
             ]),
             _: 2
           }, [
-            A(a.columns, (r) => ({
-              name: r.prop,
-              fn: n((d) => [
-                f(e.$slots, `table-${r.prop}`, V(I(be(d))), void 0, !0)
-              ])
-            })),
-            A(a.columns, (r) => ({
-              name: `header-${r.prop}`,
-              fn: n((d) => {
-                var K;
-                return [
-                  f(e.$slots, `table-header-${r.columnKey || r.prop}`, R(Ce(d), {
-                    searchFormData: L.value,
-                    triggerSearch: (K = l.value) == null ? void 0 : K.triggerSearch
-                  }), void 0, !0)
-                ];
-              })
-            }))
+            renderList(__props.columns, (column) => {
+              return {
+                name: column.prop,
+                fn: withCtx((scope) => [
+                  renderSlot(_ctx.$slots, `table-${column.prop}`, normalizeProps(guardReactiveProps(assertColumnDefaultScope(scope))), void 0, true)
+                ])
+              };
+            }),
+            renderList(__props.columns, (column) => {
+              return {
+                name: `header-${column.prop}`,
+                fn: withCtx((scope) => {
+                  var _a2;
+                  return [
+                    renderSlot(_ctx.$slots, `table-header-${column.columnKey || column.prop}`, mergeProps(assertColumnHeaderScope(scope), {
+                      searchFormData: assertData.value,
+                      triggerSearch: (_a2 = formSearch.value) == null ? void 0 : _a2.triggerSearch
+                    }), void 0, true)
+                  ];
+                })
+              };
+            })
           ]), 1040, ["is-auto-refresh", "refresh-interval", "custom-view", "api", "columns", "query", "maxHeight", "rowKey", "toolbar", "showSwitchView", "injectInfo"])
         ]),
         _: 3
       }, 8, ["class", "separate", "type", "gap", "aside-width", "aside-max-height"])), [
-        [i($e), X.value]
+        [unref(vLoading), showLoadingMask.value]
       ]);
     };
   }
 });
 export {
-  Ze as default
+  _sfc_main as default
 };