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

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

@@ -0,0 +1,205 @@
+import { defineComponent, ref, computed, watch, nextTick, openBlock, createElementBlock, unref, normalizeStyle, createElementVNode, toDisplayString, createCommentVNode, Fragment, renderList, renderSlot, createVNode } from "vue";
+import { ElEmpty } from "element-plus";
+import { useVirtualizer } from "@tanstack/vue-virtual";
+import { usePullRefresh } from "./use-pull-refresh.mjs";
+import { useActivated } from "../../hooks/activated.mjs";
+const _hoisted_1 = ["data-index"];
+const _hoisted_2 = { class: "infinite-list-view__json" };
+const _hoisted_3 = { class: "infinite-list-view__footer" };
+const _hoisted_4 = { class: "infinite-list-view__tip" };
+const _hoisted_5 = {
+  key: 2,
+  class: "infinite-list-view__empty"
+};
+const _hoisted_6 = {
+  key: 3,
+  class: "infinite-list-view__empty"
+};
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "InfiniteListView",
+  props: {
+    data: {},
+    itemKey: {},
+    loading: { type: Boolean, default: false },
+    loadingMore: { type: Boolean, default: false },
+    error: { default: null },
+    finished: { type: Boolean, default: false },
+    loadMoreDistance: { default: 100 },
+    endText: { default: "我是有底线的" },
+    errorText: { default: "加载失败，点击重试" },
+    estimateSize: { default: 200 },
+    overscan: { default: 5 },
+    maxHeight: { default: void 0 },
+    pullRefresh: { type: Boolean, default: false }
+  },
+  emits: ["loadMore", "retry", "refresh"],
+  setup(__props, { expose: __expose, emit: __emit }) {
+    const props = __props;
+    const emits = __emit;
+    const scrollContainer = ref();
+    const sentinel = ref();
+    const containerStyle = computed(
+      () => props.maxHeight ? {
+        maxHeight: typeof props.maxHeight === "number" ? `${props.maxHeight}px` : props.maxHeight,
+        overflowY: "auto"
+      } : void 0
+    );
+    const virtualizer = useVirtualizer(
+      computed(() => ({
+        count: props.data.length,
+        getScrollElement: () => scrollContainer.value ?? null,
+        estimateSize: () => props.estimateSize,
+        overscan: props.overscan
+      }))
+    );
+    const virtualItems = computed(() => virtualizer.value.getVirtualItems());
+    const totalSize = computed(() => virtualizer.value.getTotalSize());
+    const measureElementRef = (el) => {
+      var _a;
+      if (el) (_a = virtualizer.value) == null ? void 0 : _a.measureElement(el);
+    };
+    const { pullDistance, pullThreshold, onTouchStart, onTouchMove, onTouchEnd } = usePullRefresh({
+      enabled: () => props.pullRefresh,
+      getScrollContainer: () => scrollContainer.value ?? null,
+      onRefresh: () => emits("refresh")
+    });
+    const emitRetry = () => emits("retry");
+    const tryEmitLoadMore = () => {
+      if (props.loading || props.loadingMore || props.error || props.finished) {
+        return;
+      }
+      emits("loadMore");
+    };
+    const isSentinelVisible = () => {
+      const container = scrollContainer.value;
+      const s = sentinel.value;
+      if (!container || !s) return false;
+      const c = container.getBoundingClientRect();
+      const r = s.getBoundingClientRect();
+      return r.top <= c.bottom + props.loadMoreDistance;
+    };
+    let observer;
+    const observeSentinel = () => {
+      observer == null ? void 0 : observer.disconnect();
+      const container = scrollContainer.value;
+      const s = sentinel.value;
+      if (!container || !s) return;
+      observer = new IntersectionObserver(
+        (entries) => {
+          if (entries.some((e) => e.isIntersecting)) tryEmitLoadMore();
+        },
+        { root: container, rootMargin: `0px 0px ${props.loadMoreDistance}px 0px` }
+      );
+      observer.observe(s);
+    };
+    useActivated((info) => {
+      if (info.isActivated) {
+        observeSentinel();
+      } else {
+        observer == null ? void 0 : observer.disconnect();
+      }
+    });
+    watch(
+      () => props.data.length,
+      () => {
+        nextTick(observeSentinel);
+      }
+    );
+    watch(
+      () => [props.loading, props.loadingMore, props.error, props.finished],
+      () => {
+        if (isSentinelVisible()) tryEmitLoadMore();
+      }
+    );
+    __expose({
+      scrollTo: (index) => {
+        var _a;
+        return (_a = virtualizer.value) == null ? void 0 : _a.scrollToIndex(index);
+      },
+      reset: () => {
+        var _a;
+        return (_a = virtualizer.value) == null ? void 0 : _a.scrollToIndex(0, { align: "start" });
+      }
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", {
+        ref_key: "scrollContainer",
+        ref: scrollContainer,
+        class: "dc-infinite-list-view infinite-list-view",
+        style: normalizeStyle(containerStyle.value),
+        onTouchstartPassive: _cache[0] || (_cache[0] = //@ts-ignore
+        (...args) => unref(onTouchStart) && unref(onTouchStart)(...args)),
+        onTouchmovePassive: _cache[1] || (_cache[1] = //@ts-ignore
+        (...args) => unref(onTouchMove) && unref(onTouchMove)(...args)),
+        onTouchend: _cache[2] || (_cache[2] = //@ts-ignore
+        (...args) => unref(onTouchEnd) && unref(onTouchEnd)(...args))
+      }, [
+        unref(pullDistance) > 0 ? (openBlock(), createElementBlock("div", {
+          key: 0,
+          class: "infinite-list-view__pull-indicator",
+          style: normalizeStyle({ height: `${unref(pullDistance)}px` })
+        }, [
+          createElementVNode("span", null, toDisplayString(unref(pullDistance) >= unref(pullThreshold) ? "释放刷新" : "下拉刷新"), 1)
+        ], 4)) : createCommentVNode("", true),
+        __props.data.length ? (openBlock(), createElementBlock(Fragment, { key: 1 }, [
+          createElementVNode("div", {
+            class: "infinite-list-view__viewport",
+            style: normalizeStyle({ height: `${totalSize.value}px`, position: "relative" })
+          }, [
+            (openBlock(true), createElementBlock(Fragment, null, renderList(virtualItems.value, (item) => {
+              return openBlock(), createElementBlock("div", {
+                key: String(item.key),
+                ref_for: true,
+                ref: measureElementRef,
+                class: "infinite-list-view__row",
+                "data-index": item.index,
+                style: normalizeStyle({
+                  position: "absolute",
+                  top: 0,
+                  left: 0,
+                  width: "100%",
+                  transform: `translateY(${item.start}px)`
+                })
+              }, [
+                renderSlot(_ctx.$slots, "item", {
+                  item: __props.data[item.index],
+                  index: item.index
+                }, () => [
+                  createElementVNode("pre", _hoisted_2, toDisplayString(JSON.stringify(__props.data[item.index], null, 2)), 1)
+                ], true)
+              ], 12, _hoisted_1);
+            }), 128))
+          ], 4),
+          createElementVNode("div", {
+            ref_key: "sentinel",
+            ref: sentinel,
+            class: "infinite-list-view__sentinel"
+          }, null, 512),
+          createElementVNode("div", _hoisted_3, [
+            __props.loadingMore ? renderSlot(_ctx.$slots, "loading-more", { key: 0 }, () => [
+              _cache[3] || (_cache[3] = createElementVNode("span", { class: "infinite-list-view__tip" }, "加载中…", -1))
+            ], true) : __props.error ? renderSlot(_ctx.$slots, "error", {
+              key: 1,
+              error: __props.error,
+              retry: emitRetry
+            }, () => [
+              createElementVNode("button", {
+                class: "infinite-list-view__retry",
+                onClick: emitRetry
+              }, toDisplayString(__props.errorText), 1)
+            ], true) : __props.finished ? renderSlot(_ctx.$slots, "end", { key: 2 }, () => [
+              createElementVNode("span", _hoisted_4, toDisplayString(__props.endText), 1)
+            ], true) : createCommentVNode("", true)
+          ])
+        ], 64)) : __props.loading ? (openBlock(), createElementBlock("div", _hoisted_5, "加载中…")) : (openBlock(), createElementBlock("div", _hoisted_6, [
+          renderSlot(_ctx.$slots, "empty", {}, () => [
+            createVNode(unref(ElEmpty))
+          ], true)
+        ]))
+      ], 36);
+    };
+  }
+});
+export {
+  _sfc_main as default
+};

package/es/components/data-view/use-data-view-field-map.mjs

@@ -0,0 +1,70 @@
+import { computed, markRaw, defineComponent, h } from "vue";
+function makeFieldComp(column, getRenderCtxParams) {
+  return 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({
+              ...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));
+        };
+      }
+    })
+  );
+}
+function useDataViewFieldMap(options) {
+  const fieldComponentMap = computed(() => {
+    const map = {};
+    for (const column of options.columns()) {
+      if (column.type === "expand") continue;
+      const key = column.type === "index" ? "$type_index" : column.type === "selection" ? "$type_selection" : column.prop;
+      if (!key) {
+        console.warn(
+          "[DataViewFieldMap] 列缺少 prop 且非 index/selection，跳过",
+          column
+        );
+        continue;
+      }
+      if (map[key]) {
+        console.warn(`[DataViewFieldMap] 列 key 重复 "${key}"，后者覆盖前者`);
+      }
+      map[key] = makeFieldComp(column, options.getRenderCtxParams);
+    }
+    return map;
+  });
+  return { fieldComponentMap };
+}
+export {
+  useDataViewFieldMap
+};

package/es/components/data-view/use-pull-refresh.mjs

@@ -0,0 +1,38 @@
+import { ref } from "vue";
+const PULL_MAX = 80;
+const PULL_THRESHOLD = 60;
+function usePullRefresh(options) {
+  const pullDistance = ref(0);
+  const startY = ref(0);
+  const pulling = ref(false);
+  const onTouchStart = (e) => {
+    if (!options.enabled()) return;
+    const container = options.getScrollContainer();
+    if (!container || container.scrollTop > 0) return;
+    startY.value = e.touches[0].clientY;
+    pulling.value = true;
+  };
+  const onTouchMove = (e) => {
+    if (!pulling.value) return;
+    const delta = e.touches[0].clientY - startY.value;
+    pullDistance.value = Math.min(Math.max(delta, 0), PULL_MAX);
+  };
+  const onTouchEnd = () => {
+    if (!pulling.value) return;
+    if (pullDistance.value >= PULL_THRESHOLD) {
+      options.onRefresh();
+    }
+    pullDistance.value = 0;
+    pulling.value = false;
+  };
+  return {
+    pullDistance,
+    pullThreshold: PULL_THRESHOLD,
+    onTouchStart,
+    onTouchMove,
+    onTouchEnd
+  };
+}
+export {
+  usePullRefresh
+};

package/es/components/data-view/utils.mjs

@@ -1,3 +1,22 @@
+const BREAKPOINTS_DESC = ["xl", "lg", "md", "sm", "xs"];
+const spanToColumns = (span) => Math.min(24, Math.max(1, Math.round(24 / span)));
+const resolveGridColumnsByBreakpoint = (gridColumns, breakpoint) => {
+  if (typeof gridColumns === "number") {
+    return Math.max(1, Math.round(gridColumns));
+  }
+  if (!gridColumns || typeof gridColumns !== "object") return 1;
+  const bpIndex = BREAKPOINTS_DESC.indexOf(breakpoint);
+  let span = 24;
+  for (let i = bpIndex; i < BREAKPOINTS_DESC.length; i += 1) {
+    const v = gridColumns[BREAKPOINTS_DESC[i]];
+    if (typeof v === "number") {
+      span = v;
+      break;
+    }
+  }
+  if (!Number.isFinite(span) || span <= 0) return 1;
+  return spanToColumns(span);
+};
 const createDataListViewInstance = (mainMethods) => {
   return {
     toggleRowExpansion: () => {
@@ -34,5 +53,6 @@ const createDataListViewInstance = (mainMethods) => {
   };
 };
 export {
-  createDataListViewInstance
+  createDataListViewInstance,
+  resolveGridColumnsByBreakpoint
 };

package/es/components/list-layout/ListLayout.vue.mjs

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

package/es/components/list-layout/ListLayout.vue2.mjs

@@ -1,4 +1,4 @@
-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 { defineComponent, useCssVars, unref, useSlots, computed, useModel, ref, shallowRef, watch, withDirectives, openBlock, createBlock, normalizeClass, withCtx, mergeProps, createSlots, renderSlot, normalizeProps, guardReactiveProps, renderList, createCommentVNode, createVNode, mergeModels } from "vue";
 import { vLoading } from "element-plus";
 import FormActiveFilter from "../form/FormActiveFilter.vue.mjs";
 import FormSearch from "../form/FormSearch.vue.mjs";
@@ -8,10 +8,13 @@ import { useListLayoutSticky } from "./use-list-layout-sticky.mjs";
 import { useActiveFilter } from "./use-active-filter.mjs";
 import _sfc_main$1 from "../display/WatchSize.vue.mjs";
 import TableMain from "../table/TableMain.vue.mjs";
+import DataGridView from "../data-view/DataGridView.vue.mjs";
+import { resolveGridColumnsByBreakpoint } from "../data-view/utils.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";
+import { useBreakpoint } from "../../hooks/use-breakpoint.mjs";
 import { SlotRegion } from "../../config/slot-region.mjs";
 const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "ListLayout",
@@ -42,7 +45,11 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     allowClear: { type: Boolean, default: false },
     pagerSticky: { type: Boolean, default: false },
     headerObserveResize: { type: Boolean, default: false },
-    operationObserveResize: { type: Boolean, default: false }
+    operationObserveResize: { type: Boolean, default: false },
+    viewMode: { default: "table" },
+    gridColumns: { default: 4 },
+    infiniteListProps: {},
+    gridProps: {}
   }, {
     "isAutoRefresh": { type: Boolean },
     "isAutoRefreshModifiers": {},
@@ -54,10 +61,10 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
   emits: /* @__PURE__ */ mergeModels(["dataChange", "pageInfoChange"], ["update:isAutoRefresh", "update:refreshInterval", "update:customView"]),
   setup(__props, { expose: __expose, emit: __emit }) {
     useCssVars((_ctx) => ({
-      "bbc8b4b6": minHeight.value,
-      "v2ce52870": unref(searchStickyTop),
-      "ca6d5736": unref(toolbarStickyTop),
-      "v0af15863": unref(pagerStickyBottom)
+      "v37fdcdf2": minHeight.value,
+      "v5bcb0a52": unref(searchStickyTop),
+      "v489faec3": unref(toolbarStickyTop),
+      "v17e649c5": unref(pagerStickyBottom)
     }));
     const props = __props;
     const listLayoutEmits = __emit;
@@ -91,6 +98,10 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         ...props.staticQuery
       };
     });
+    const { activeBreakpoint } = useBreakpoint();
+    const gridColumnsFinal = computed(
+      () => resolveGridColumnsByBreakpoint(props.gridColumns, activeBreakpoint.value)
+    );
     const showSearch = ref(false);
     const searchHeightAdjust = computed(() => {
       if (!showSearch.value) {
@@ -362,7 +373,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
           }, 8, ["observe-resize"])) : createCommentVNode("", true)
         ]),
         default: withCtx(() => [
-          createVNode(unref(TableMain), mergeProps({
+          __props.viewMode === "table" ? (openBlock(), createBlock(unref(TableMain), mergeProps({
+            key: 0,
             ref_key: "tableMain",
             ref: tableMain,
             "is-auto-refresh": isAutoRefresh.value,
@@ -413,7 +425,35 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                 })
               };
             })
-          ]), 1040, ["is-auto-refresh", "refresh-interval", "custom-view", "api", "columns", "query", "maxHeight", "rowKey", "toolbar", "showSwitchView", "initial-search", "injectInfo"])
+          ]), 1040, ["is-auto-refresh", "refresh-interval", "custom-view", "api", "columns", "query", "maxHeight", "rowKey", "toolbar", "showSwitchView", "initial-search", "injectInfo"])) : (openBlock(), createBlock(unref(DataGridView), mergeProps({
+            key: 1,
+            ref_key: "tableMain",
+            ref: tableMain,
+            "is-auto-refresh": isAutoRefresh.value,
+            "onUpdate:isAutoRefresh": _cache[3] || (_cache[3] = ($event) => isAutoRefresh.value = $event),
+            "refresh-interval": refreshInterval.value,
+            "onUpdate:refreshInterval": _cache[4] || (_cache[4] = ($event) => refreshInterval.value = $event),
+            api: __props.api,
+            columns: __props.columns,
+            query: queryMerge.value,
+            maxHeight: tableMaxHeight.value,
+            rowKey: assertRowKey.value,
+            toolbar: __props.toolbar,
+            "initial-search": __props.initialSearch
+          }, __props.gridProps, {
+            refine: false,
+            injectInfo: injectInfoAdjust.value,
+            gridColumns: gridColumnsFinal.value,
+            "infinite-list-props": __props.infiniteListProps,
+            onLoadingChange,
+            onDataChange,
+            onPageInfoChange
+          }), {
+            "custom-view-item": withCtx((scope) => [
+              renderSlot(_ctx.$slots, "custom-view-item", normalizeProps(guardReactiveProps(assertDataViewItemScope(scope))), void 0, true)
+            ]),
+            _: 3
+          }, 16, ["is-auto-refresh", "refresh-interval", "api", "columns", "query", "maxHeight", "rowKey", "toolbar", "initial-search", "injectInfo", "gridColumns", "infinite-list-props"]))
         ]),
         _: 3
       }, 8, ["class", "separate", "type", "gap", "aside-width", "aside-max-height"])), [