@done-coding/admin-core 0.22.2 → 0.22.3-alpha.0

package/es/components/data-view/DataGridView.vue.mjs

@@ -0,0 +1,7 @@
+import _sfc_main from "./DataGridView.vue2.mjs";
+/* empty css                   */
+import _export_sfc from "../../_virtual/_plugin-vue_export-helper.mjs";
+const DataGridView = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-d9e5439d"]]);
+export {
+  DataGridView as default
+};

package/es/components/data-view/DataGridView.vue2.mjs

@@ -0,0 +1,448 @@
+import { defineComponent, useModel, shallowRef, ref, computed, onMounted, onActivated, watch, openBlock, createElementBlock, createBlock, unref, withCtx, createVNode, mergeProps, createCommentVNode, createElementVNode, toDisplayString, createTextVNode, normalizeStyle, Fragment, renderList, renderSlot, resolveDynamicComponent, mergeModels } from "vue";
+import { ElButton } from "element-plus";
+import TableToolbar from "../table/TableToolbar.vue.mjs";
+import _sfc_main$2 from "../table/TableEmpty.vue.mjs";
+import TableSkeleton from "../table/TableSkeleton.vue.mjs";
+import _sfc_main$1 from "../display/WatchSize.vue.mjs";
+import _cloneDeep from "lodash/cloneDeep";
+import _set from "lodash/set";
+import _get from "lodash/get";
+import InfiniteListView from "./InfiniteListView.vue.mjs";
+import { useDataViewFieldMap } from "./use-data-view-field-map.mjs";
+import { resolveGridColumnsByBreakpoint, createDataListViewInstance } from "./utils.mjs";
+import { useBreakpoint } from "../../hooks/use-breakpoint.mjs";
+import { pickExportColumns } from "../../utils/export.mjs";
+import { useChannelViewportHeight } from "../../hooks/use-channel-viewport-height.mjs";
+import { APP_API_LIST_MODEL_KEY_CONFIG } from "../../config/list-model.mjs";
+const _hoisted_1 = { class: "dc-data-grid-view data-grid-view" };
+const _hoisted_2 = { class: "data-grid-view__card" };
+const _hoisted_3 = { class: "data-grid-view__field-label" };
+const _hoisted_4 = { class: "data-grid-view__field-value" };
+const _hoisted_5 = {
+  key: 0,
+  class: "data-grid-view__empty-error"
+};
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "DataGridView",
+  props: /* @__PURE__ */ mergeModels({
+    api: {},
+    columns: {},
+    rowKey: {},
+    query: {},
+    pageSizeInit: { default: 20 },
+    gridColumns: { default: 4 },
+    maxHeight: { default: "100vh" },
+    refine: { type: Boolean, default: true },
+    refineReduceHeight: { default: 0 },
+    viewportHeight: {},
+    parentChannel: {},
+    fillHeight: { type: Boolean },
+    dataViewMaxHeightMinValue: { default: 500 },
+    injectInfo: {},
+    skeleton: { type: Boolean, default: true },
+    skeletonRows: { default: 4 },
+    initialSearch: { type: Boolean, default: true },
+    showToolbar: { type: Boolean, default: true },
+    toolbar: {},
+    infiniteListProps: {}
+  }, {
+    "isAutoRefresh": { type: Boolean },
+    "isAutoRefreshModifiers": {},
+    "refreshInterval": {},
+    "refreshIntervalModifiers": {}
+  }),
+  emits: /* @__PURE__ */ mergeModels(["pageChange", "pageSizeChange", "dataChange", "selectionChange", "loadingChange", "pageInfoChange"], ["update:isAutoRefresh", "update:refreshInterval"]),
+  setup(__props, { expose: __expose, emit: __emit }) {
+    const props = __props;
+    const emits = __emit;
+    const isAutoRefresh = useModel(__props, "isAutoRefresh");
+    const refreshInterval = useModel(__props, "refreshInterval");
+    const store = shallowRef([]);
+    const total = ref(0);
+    const pageSize = ref(0);
+    const currentPage = ref(0);
+    const loading = ref(false);
+    const publicLoading = ref(false);
+    const loadingMore = ref(false);
+    const error = ref(null);
+    const hasRequested = ref(false);
+    const noMoreFromServer = ref(false);
+    const hasData = computed(() => store.value.length > 0);
+    const finished = computed(
+      () => hasData.value && (noMoreFromServer.value || store.value.length >= total.value)
+    );
+    const infiniteList = ref();
+    const infiniteListPropsFinal = computed(() => {
+      const p = props.infiniteListProps || {};
+      const picked = {};
+      [
+        "loadMoreDistance",
+        "endText",
+        "errorText",
+        "estimateSize",
+        "overscan",
+        "pullRefresh"
+      ].forEach((k) => {
+        if (p[k] !== void 0) picked[k] = p[k];
+      });
+      return picked;
+    });
+    const errorText = computed(
+      () => {
+        var _a;
+        return ((_a = props.infiniteListProps) == null ? void 0 : _a.errorText) ?? "加载失败";
+      }
+    );
+    const buildParams = (page) => {
+      const merged = _cloneDeep(props.query || {});
+      _set(merged, APP_API_LIST_MODEL_KEY_CONFIG.PAGE_SIZE_KEY, pageSize.value);
+      _set(merged, APP_API_LIST_MODEL_KEY_CONFIG.CURRENT_PAGE_KEY, page);
+      return merged;
+    };
+    const canGoOnByParams = (p, tip = true) => {
+      const page = _get(
+        p,
+        APP_API_LIST_MODEL_KEY_CONFIG.CURRENT_PAGE_KEY
+      );
+      const res = JSON.stringify(p) === JSON.stringify(buildParams(page));
+      if (!res && tip) {
+        console.warn(`并发请求参数冰花，丢弃结果 ${JSON.stringify(p)}`);
+      }
+      return res;
+    };
+    const getList = (silent = false) => {
+      if (!pageSize.value) return;
+      hasRequested.value = true;
+      if (loading.value) {
+        console.warn(`请求并发`);
+        return;
+      }
+      loading.value = true;
+      if (!silent) publicLoading.value = true;
+      const p = buildParams(1);
+      return props.api(p).then((res) => {
+        if (!canGoOnByParams(p)) return;
+        const items = _get(res, APP_API_LIST_MODEL_KEY_CONFIG.LIST_KEY);
+        store.value = items;
+        total.value = _get(
+          res,
+          APP_API_LIST_MODEL_KEY_CONFIG.TOTAL_KEY
+        );
+        currentPage.value = 1;
+        error.value = null;
+        noMoreFromServer.value = false;
+        emits("pageInfoChange", {
+          pageSize: pageSize.value,
+          currentPage: 1,
+          total: total.value
+        });
+      }).catch((e) => {
+        if (!canGoOnByParams(p)) return;
+        error.value = (e == null ? void 0 : e.message) || String(e);
+      }).finally(() => {
+        if (!canGoOnByParams(p)) return;
+        loading.value = false;
+        publicLoading.value = false;
+      });
+    };
+    const fetchNextPage = () => {
+      if (loading.value || loadingMore.value || error.value || finished.value) {
+        return;
+      }
+      if (!hasData.value) return;
+      const nextPage = currentPage.value + 1;
+      loadingMore.value = true;
+      const p = buildParams(nextPage);
+      return props.api(p).then((res) => {
+        if (!canGoOnByParams(p)) return;
+        const items = _get(res, APP_API_LIST_MODEL_KEY_CONFIG.LIST_KEY);
+        if (!items.length) noMoreFromServer.value = true;
+        store.value = [...store.value, ...items];
+        total.value = _get(
+          res,
+          APP_API_LIST_MODEL_KEY_CONFIG.TOTAL_KEY
+        );
+        currentPage.value = nextPage;
+        error.value = null;
+        emits("pageChange", nextPage);
+        emits("pageInfoChange", {
+          pageSize: pageSize.value,
+          currentPage: nextPage,
+          total: total.value
+        });
+      }).catch((e) => {
+        if (!canGoOnByParams(p)) return;
+        error.value = (e == null ? void 0 : e.message) || String(e);
+      }).finally(() => {
+        if (!canGoOnByParams(p)) return;
+        loadingMore.value = false;
+      });
+    };
+    const onRetry = () => {
+      error.value = null;
+      if (hasData.value) fetchNextPage();
+      else getList();
+    };
+    const refresh = async (silent = false) => {
+      var _a;
+      return (_a = getList(silent)) == null ? void 0 : _a.catch(() => {
+      });
+    };
+    const reload = async (silent = false) => {
+      var _a;
+      return (_a = getList(silent)) == null ? void 0 : _a.catch(() => {
+      });
+    };
+    const { activeBreakpoint } = useBreakpoint();
+    const gridColumnsFinal = computed(
+      () => resolveGridColumnsByBreakpoint(props.gridColumns, activeBreakpoint.value)
+    );
+    const gridRows = computed(() => {
+      const rows = [];
+      const cols = gridColumnsFinal.value;
+      for (let i = 0; i < store.value.length; i += cols) {
+        rows.push(store.value.slice(i, i + cols));
+      }
+      return rows;
+    });
+    const keyOf = (row) => {
+      const rk = props.rowKey;
+      return typeof rk === "function" ? rk(row) : String(row[rk]);
+    };
+    const rowKeyOfRow = (row) => row.length ? keyOf(row[0]) : "empty-row";
+    const getRenderCtxParams = () => ({
+      injectInfo: props.injectInfo || {},
+      exposeInfo: expose
+    });
+    const { fieldComponentMap } = useDataViewFieldMap({
+      columns: () => props.columns,
+      getRenderCtxParams
+    });
+    const fieldKeyOf = (column) => column.type === "index" ? "$type_index" : column.type === "selection" ? "$type_selection" : column.prop ?? "";
+    const selectedKeys = ref(/* @__PURE__ */ new Set());
+    const hasSelectionColumn = computed(
+      () => props.columns.some((c) => c.type === "selection")
+    );
+    const selectedList = computed(
+      () => store.value.filter((r) => selectedKeys.value.has(keyOf(r)))
+    );
+    const isSelected = (row) => selectedKeys.value.has(keyOf(row));
+    const emitSelectionChange = () => {
+      emits("selectionChange", selectedList.value);
+    };
+    const clearSelection = () => {
+      selectedKeys.value = /* @__PURE__ */ new Set();
+      emitSelectionChange();
+    };
+    const toggleSelect = (row, selected) => {
+      const k = keyOf(row);
+      const next = new Set(selectedKeys.value);
+      const shouldSelect = selected ?? !next.has(k);
+      if (shouldSelect) next.add(k);
+      else next.delete(k);
+      selectedKeys.value = next;
+      emitSelectionChange();
+    };
+    const toggleAllSelection = () => {
+      if (!hasSelectionColumn.value) return;
+      const allSelected = selectedKeys.value.size === store.value.length && store.value.length > 0;
+      selectedKeys.value = allSelected ? /* @__PURE__ */ new Set() : new Set(store.value.map(keyOf));
+      emitSelectionChange();
+    };
+    const getSelectionRows = () => selectedList.value;
+    const gridInstance = createDataListViewInstance({
+      clearSelection,
+      getSelectionRows,
+      toggleRowSelection: toggleSelect,
+      toggleAllSelection,
+      columns: props.columns
+    });
+    const assertItemScope = (row, index) => ({
+      fieldComponentMap: fieldComponentMap.value,
+      row,
+      index,
+      selected: isSelected(row),
+      toggleSelect: () => toggleSelect(row)
+    });
+    const expose = {
+      refresh,
+      reload,
+      getTableInstance: () => gridInstance
+    };
+    __expose(expose);
+    const exportContext = computed(
+      () => ({
+        columns: pickExportColumns(props.columns),
+        selectedList: selectedList.value,
+        currentPageList: store.value,
+        api: props.api,
+        query: props.query,
+        total: total.value,
+        hasSelection: hasSelectionColumn.value
+      })
+    );
+    const toolbarHeight = ref(0);
+    const onToolbarHeightChange = (h) => {
+      toolbarHeight.value = h;
+    };
+    const { viewportHeightFinal } = useChannelViewportHeight(props);
+    const toolbarHeightAdjust = computed(
+      () => props.showToolbar ? toolbarHeight.value : 0
+    );
+    const rawAvailableHeight = computed(() => {
+      if (typeof props.maxHeight === "number") {
+        return props.maxHeight - toolbarHeightAdjust.value;
+      }
+      if (props.refine) {
+        return viewportHeightFinal.value - toolbarHeightAdjust.value - props.refineReduceHeight;
+      }
+      return props.maxHeight;
+    });
+    const tableMaxHeight = computed(() => {
+      const raw = rawAvailableHeight.value;
+      if (raw === void 0) return void 0;
+      return typeof raw === "number" ? Math.max(raw, props.dataViewMaxHeightMinValue) : raw;
+    });
+    const skeletonMaxHeight = computed(
+      () => typeof tableMaxHeight.value === "number" ? tableMaxHeight.value : void 0
+    );
+    const showSkeleton = computed(
+      () => props.skeleton && loading.value && !hasData.value
+    );
+    const skeletonRowsFinal = computed(() => props.skeletonRows);
+    let suppressAutoParams = !props.initialSearch;
+    onMounted(() => {
+      pageSize.value = props.pageSizeInit;
+      onActivated(() => {
+        if (hasRequested.value) {
+          expose.refresh();
+        }
+      });
+    });
+    watch(
+      () => props.query,
+      (n, o) => {
+        if (JSON.stringify(n) === JSON.stringify(o)) return;
+        suppressAutoParams = false;
+        reload();
+      }
+    );
+    watch(
+      pageSize,
+      () => {
+        if (suppressAutoParams) return;
+        getList();
+      },
+      { immediate: true }
+    );
+    watch(store, (n) => {
+      emits("dataChange", n);
+    });
+    watch(publicLoading, (n) => {
+      emits("loadingChange", n);
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", _hoisted_1, [
+        __props.showToolbar ? (openBlock(), createBlock(unref(_sfc_main$1), {
+          key: 0,
+          class: "dc-data-grid-view__toolbar",
+          onHeightChange: onToolbarHeightChange
+        }, {
+          default: withCtx(() => [
+            createVNode(unref(TableToolbar), mergeProps({
+              "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),
+              tableExpose: expose,
+              loading: loading.value,
+              exportContext: exportContext.value,
+              showSwitchView: false,
+              currentPage: currentPage.value,
+              pageSize: pageSize.value
+            }, __props.toolbar), null, 16, ["is-auto-refresh", "refresh-interval", "loading", "exportContext", "currentPage", "pageSize"])
+          ]),
+          _: 1
+        })) : createCommentVNode("", true),
+        showSkeleton.value ? (openBlock(), createBlock(unref(TableSkeleton), {
+          key: 1,
+          class: "data-grid-view-table",
+          mode: "grid",
+          rows: skeletonRowsFinal.value,
+          maxHeight: skeletonMaxHeight.value
+        }, null, 8, ["rows", "maxHeight"])) : (openBlock(), createBlock(InfiniteListView, mergeProps({
+          key: 2,
+          ref_key: "infiniteList",
+          ref: infiniteList,
+          data: gridRows.value,
+          "item-key": rowKeyOfRow,
+          loading: loading.value && !store.value.length,
+          "loading-more": loadingMore.value,
+          error: error.value && store.value.length ? error.value : null,
+          finished: finished.value,
+          "max-height": tableMaxHeight.value
+        }, infiniteListPropsFinal.value, {
+          onLoadMore: fetchNextPage,
+          onRetry
+        }), {
+          item: withCtx(({ item, index }) => [
+            createElementVNode("div", {
+              class: "data-grid-view__grid",
+              style: normalizeStyle({ gridTemplateColumns: `repeat(${gridColumnsFinal.value}, 1fr)` })
+            }, [
+              (openBlock(true), createElementBlock(Fragment, null, renderList(item, (row, colIndex) => {
+                return openBlock(), createElementBlock("div", {
+                  key: keyOf(row),
+                  class: "data-grid-view__cell"
+                }, [
+                  renderSlot(_ctx.$slots, "custom-view-item", mergeProps({ ref_for: true }, assertItemScope(row, index * gridColumnsFinal.value + colIndex)), () => [
+                    createElementVNode("div", _hoisted_2, [
+                      (openBlock(true), createElementBlock(Fragment, null, renderList(__props.columns, (column) => {
+                        return openBlock(), createElementBlock("div", {
+                          key: column.prop ?? column.type,
+                          class: "data-grid-view__field"
+                        }, [
+                          createElementVNode("span", _hoisted_3, toDisplayString(column.label ?? column.prop) + ":", 1),
+                          createElementVNode("span", _hoisted_4, [
+                            (openBlock(), createBlock(resolveDynamicComponent(unref(fieldComponentMap)[fieldKeyOf(column)]), {
+                              row,
+                              index: index * gridColumnsFinal.value + colIndex,
+                              selected: isSelected(row),
+                              "toggle-select": () => toggleSelect(row)
+                            }, null, 8, ["row", "index", "selected", "toggle-select"]))
+                          ])
+                        ]);
+                      }), 128))
+                    ])
+                  ], true)
+                ]);
+              }), 128))
+            ], 4)
+          ]),
+          empty: withCtx(() => [
+            error.value && !store.value.length ? (openBlock(), createElementBlock("div", _hoisted_5, [
+              createElementVNode("span", null, toDisplayString(errorText.value), 1),
+              createVNode(unref(ElButton), {
+                size: "small",
+                onClick: onRetry
+              }, {
+                default: withCtx(() => [..._cache[2] || (_cache[2] = [
+                  createTextVNode("重试", -1)
+                ])]),
+                _: 1
+              })
+            ])) : (openBlock(), createBlock(unref(_sfc_main$2), {
+              key: 1,
+              loading: loading.value,
+              "has-requested": hasRequested.value
+            }, null, 8, ["loading", "has-requested"]))
+          ]),
+          _: 3
+        }, 16, ["data", "loading", "loading-more", "error", "finished", "max-height"]))
+      ]);
+    };
+  }
+});
+export {
+  _sfc_main as default
+};

package/es/components/data-view/DataListView.vue.mjs

@@ -1,7 +1,7 @@
 import _sfc_main from "./DataListView.vue2.mjs";
 /* empty css                   */
 import _export_sfc from "../../_virtual/_plugin-vue_export-helper.mjs";
-const DataListView = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-da082546"]]);
+const DataListView = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-ce0bb05b"]]);
 export {
   DataListView as default
 };

package/es/components/data-view/DataListView.vue2.mjs

@@ -1,7 +1,8 @@
-import { defineComponent, computed, ref, watch, openBlock, createElementBlock, normalizeStyle, Fragment, renderList, createBlock, withCtx, renderSlot, createVNode, unref, markRaw, h } from "vue";
+import { defineComponent, computed, ref, watch, openBlock, createElementBlock, normalizeStyle, Fragment, renderList, createBlock, withCtx, renderSlot, unref, createVNode } from "vue";
 import { ElEmpty } from "element-plus";
 import DataListViewItem from "./DataListViewItem.vue.mjs";
 import { createDataListViewInstance } from "./utils.mjs";
+import { useDataViewFieldMap } from "./use-data-view-field-map.mjs";
 const _hoisted_1 = {
   key: 1,
   class: "data-list-view-empty"
@@ -61,66 +62,9 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       selectedKeys.value = next;
       emitChange();
     };
-    const makeFieldComp = (column) => markRaw(
-      defineComponent({
-        name: "DataViewField",
-        props: {
-          row: { type: Object, required: true },
-          index: { type: Number, required: true },
-          selected: { type: Boolean, default: false },
-          toggleSelect: { type: Function, default: void 0 }
-        },
-        setup(p) {
-          return () => {
-            const { type, render, prop } = column;
-            if (type === "index") {
-              return h("span", String(p.index + 1));
-            }
-            if (type === "selection") {
-              return h("input", {
-                type: "checkbox",
-                checked: p.selected,
-                onChange: () => {
-                  var _a;
-                  return (_a = p.toggleSelect) == null ? void 0 : _a.call(p);
-                }
-              });
-            }
-            if (typeof render === "function") {
-              return render({
-                ...props.getRenderCtxParams(),
-                row: p.row,
-                column,
-                _index: p.index
-              });
-            }
-            if (render) {
-              return h(render);
-            }
-            const v = prop ? p.row[prop] : void 0;
-            return h("span", v === void 0 || v === null ? "" : String(v));
-          };
-        }
-      })
-    );
-    const fieldComponentMap = computed(() => {
-      const map = {};
-      for (const column of props.columns) {
-        if (column.type === "expand") continue;
-        const key = column.type === "index" ? "$type_index" : column.type === "selection" ? "$type_selection" : column.prop;
-        if (!key) {
-          console.warn(
-            "[DataListView] 列缺少 prop 且非 index/selection，跳过",
-            column
-          );
-          continue;
-        }
-        if (map[key]) {
-          console.warn(`[DataListView] 列 key 重复 "${key}"，后者覆盖前者`);
-        }
-        map[key] = makeFieldComp(column);
-      }
-      return map;
+    const { fieldComponentMap } = useDataViewFieldMap({
+      columns: () => props.columns,
+      getRenderCtxParams: () => props.getRenderCtxParams()
     });
     const expose = createDataListViewInstance({
       clearSelection,
@@ -148,7 +92,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
           }, {
             default: withCtx(() => [
               renderSlot(_ctx.$slots, "item", {
-                fieldComponentMap: fieldComponentMap.value,
+                fieldComponentMap: unref(fieldComponentMap),
                 row,
                 index,
                 selected: isSelected(row),

package/es/components/data-view/InfiniteListView.vue.mjs

@@ -0,0 +1,7 @@
+import _sfc_main from "./InfiniteListView.vue2.mjs";
+/* empty css                       */
+import _export_sfc from "../../_virtual/_plugin-vue_export-helper.mjs";
+const InfiniteListView = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-e597453f"]]);
+export {
+  InfiniteListView as default
+};