@done-coding/admin-core 0.28.1-alpha.0 → 0.29.1-alpha.0

package/es/bridge/layout.mjs

@@ -1,5 +1,12 @@
-import { ref, readonly } from "vue";
+import { ref, readonly, nextTick } from "vue";
 const DEFAULT_LAYOUT_STORAGE_KEY = "dc-core-layout";
+const MENU_OPEN_RETRY_AT = [0, 60, 160, 320, 500, 700, 900];
+const scheduleOpenRetry = (run) => {
+  nextTick(run);
+  MENU_OPEN_RETRY_AT.forEach((delay) => {
+    setTimeout(run, delay);
+  });
+};
 function createBridgeLayoutHook(init) {
   const storageKey = init.storageKey ?? DEFAULT_LAYOUT_STORAGE_KEY;
   const sidebarCollapsed = ref(init.defaultSidebarCollapsed ?? false);
@@ -48,6 +55,26 @@ function createBridgeLayoutHook(init) {
   const toggleAside = () => {
     setAsideCollapse(!asideCollapsed.value);
   };
+  let menuController = null;
+  const registerMenuController = (controller) => {
+    menuController = controller;
+  };
+  const openMenuTo = (path) => {
+    if (!menuController) return false;
+    const ancestors = menuController.resolveAncestors(path);
+    if (!ancestors) return false;
+    if (menuController.isGroupMode()) return true;
+    const openAll = () => {
+      ancestors.forEach((ancestorPath) => menuController == null ? void 0 : menuController.open(ancestorPath));
+    };
+    if (sidebarCollapsed.value) {
+      setSidebarCollapse(false);
+      scheduleOpenRetry(openAll);
+      return true;
+    }
+    openAll();
+    return true;
+  };
   return {
     layout: {
       sidebarCollapsed: readonly(sidebarCollapsed),
@@ -55,7 +82,9 @@ function createBridgeLayoutHook(init) {
       setSidebarCollapse,
       toggleSidebar,
       setAsideCollapse,
-      toggleAside
+      toggleAside,
+      openMenuTo,
+      registerMenuController
     }
   };
 }

package/es/components/app-layout/AppAside.vue.mjs

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

package/es/components/app-layout/AppCollapseToggle.vue.mjs

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

package/es/components/app-layout/AppFooter.vue.mjs

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

package/es/components/app-layout/AppHeader.vue.mjs

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

package/es/components/app-layout/AppHeader.vue2.mjs

@@ -18,7 +18,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
   },
   setup(__props) {
     useCssVars((_ctx) => ({
-      "v5a41bfe6": themeColors.value.primaryColor
+      "v1c549aee": themeColors.value.primaryColor
     }));
     const props = __props;
     const appStore = inject(APP_LAYOUT_APP_STORE_KEY);

package/es/components/app-layout/AppSidebar.vue.mjs

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

package/es/components/app-layout/AppSidebar.vue2.mjs

@@ -1,9 +1,11 @@
-import { defineComponent, useCssVars, inject, computed, ref, openBlock, createElementBlock, normalizeStyle, createVNode, unref, withCtx, renderSlot, createElementVNode } from "vue";
+import { defineComponent, useCssVars, inject, computed, ref, shallowRef, openBlock, createElementBlock, normalizeStyle, createElementVNode, createVNode, unref, withCtx, renderSlot } from "vue";
 import _sfc_main$2 from "../menu/MenuTree.vue.mjs";
 import _sfc_main$1 from "../display/WatchSize.vue.mjs";
 import AppCollapseToggle from "./AppCollapseToggle.vue.mjs";
 import { APP_LAYOUT_APP_STORE_KEY, APP_LAYOUT_BRIDGE_KEY } from "../../inject/key.mjs";
-const _hoisted_1 = { class: "app-sidebar-shim" };
+import { useActivated } from "../../hooks/activated.mjs";
+const _hoisted_1 = { class: "app-sidebar-clip" };
+const _hoisted_2 = { class: "app-sidebar-shim" };
 const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "AppSidebar",
   props: {
@@ -14,9 +16,9 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
   },
   setup(__props) {
     useCssVars((_ctx) => ({
-      "a540a4d0": sidebarZIndex.value,
-      "v4433cc00": shimTop.value,
-      "v7d77fda0": shimBottom.value
+      "v2dcbfdd5": sidebarZIndex.value,
+      "v78ee9bfd": shimTop.value,
+      "v3ef242fa": shimBottom.value
     }));
     const props = __props;
     const appStore = inject(APP_LAYOUT_APP_STORE_KEY);
@@ -41,42 +43,66 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     const menuGroupMode = computed(
       () => bridge.APP_LAYOUT_SIDEBAR_CONFIG.menuGroupMode ?? false
     );
+    const menuTreeRef = shallowRef();
+    useActivated((info) => {
+      if (!info.isActivated) {
+        bridge.layout.registerMenuController(null);
+        return;
+      }
+      bridge.layout.registerMenuController({
+        open: (index) => {
+          var _a;
+          return (_a = menuTreeRef.value) == null ? void 0 : _a.open(index);
+        },
+        // 目标不在扁平菜单里 → undefined（与「在菜单里但本就是一级项」的空数组区分开）
+        resolveAncestors: (path) => {
+          const hit = props.menuFlatList.find((item) => item.path === path);
+          if (!hit) return void 0;
+          return [...hit.parentPathList ?? []];
+        },
+        isGroupMode: () => menuGroupMode.value
+      });
+    });
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", {
         class: "app-sidebar",
         style: normalizeStyle(sidebarStyle.value)
       }, [
-        createVNode(unref(_sfc_main$1), {
-          class: "app-sidebar-top",
-          onHeightChange: _cache[0] || (_cache[0] = ($event) => topSlotHeight.value = $event)
-        }, {
-          default: withCtx(() => [
-            renderSlot(_ctx.$slots, "top", {}, void 0, true)
-          ]),
-          _: 3
-        }),
         createElementVNode("div", _hoisted_1, [
-          createVNode(unref(_sfc_main$2), {
-            collapse: collapse.value,
-            menus: __props.menus,
-            style: { "height": "100%" },
-            "background-color": themeColors.value.bodyColor,
-            "text-color": themeColors.value.baseColor,
-            "active-text-color": themeColors.value.primaryColor,
-            menuFlatList: __props.menuFlatList,
-            groupMode: menuGroupMode.value,
-            routerMode: ""
-          }, null, 8, ["collapse", "menus", "background-color", "text-color", "active-text-color", "menuFlatList", "groupMode"])
-        ]),
-        createVNode(unref(_sfc_main$1), {
-          class: "app-sidebar-bottom",
-          onHeightChange: _cache[1] || (_cache[1] = ($event) => bottomSlotHeight.value = $event)
-        }, {
-          default: withCtx(() => [
-            renderSlot(_ctx.$slots, "bottom", {}, void 0, true)
+          createVNode(unref(_sfc_main$1), {
+            class: "app-sidebar-top",
+            onHeightChange: _cache[0] || (_cache[0] = ($event) => topSlotHeight.value = $event)
+          }, {
+            default: withCtx(() => [
+              renderSlot(_ctx.$slots, "top", {}, void 0, true)
+            ]),
+            _: 3
+          }),
+          createElementVNode("div", _hoisted_2, [
+            createVNode(unref(_sfc_main$2), {
+              ref_key: "menuTreeRef",
+              ref: menuTreeRef,
+              collapse: collapse.value,
+              menus: __props.menus,
+              style: { "height": "100%" },
+              "background-color": themeColors.value.bodyColor,
+              "text-color": themeColors.value.baseColor,
+              "active-text-color": themeColors.value.primaryColor,
+              menuFlatList: __props.menuFlatList,
+              groupMode: menuGroupMode.value,
+              routerMode: ""
+            }, null, 8, ["collapse", "menus", "background-color", "text-color", "active-text-color", "menuFlatList", "groupMode"])
           ]),
-          _: 3
-        }),
+          createVNode(unref(_sfc_main$1), {
+            class: "app-sidebar-bottom",
+            onHeightChange: _cache[1] || (_cache[1] = ($event) => bottomSlotHeight.value = $event)
+          }, {
+            default: withCtx(() => [
+              renderSlot(_ctx.$slots, "bottom", {}, void 0, true)
+            ]),
+            _: 3
+          })
+        ]),
         createVNode(AppCollapseToggle, {
           side: "sidebar",
           show: __props.show && !menuGroupMode.value,

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

@@ -1,7 +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-90c0ccf6"]]);
+const DataGridView = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-136078cd"]]);
 export {
   DataGridView as default
 };

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

@@ -3,6 +3,7 @@ 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 { useDataViewGridLayout } from "./use-grid-layout.mjs";
 import { useSurface } from "../../hooks/use-surface.mjs";
 import _sfc_main$1 from "../display/WatchSize.vue.mjs";
 import _cloneDeep from "lodash/cloneDeep";
@@ -33,7 +34,10 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     query: {},
     pageSizeInit: { default: 20 },
     gridColumns: { default: 4 },
+    gap: {},
+    card: { type: Boolean, default: true },
     surface: { type: Boolean, default: void 0 },
+    itemCard: { type: Boolean, default: void 0 },
     maxHeight: { default: "100vh" },
     refine: { type: Boolean, default: true },
     refineReduceHeight: { default: 0 },
@@ -61,7 +65,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
   emits: /* @__PURE__ */ mergeModels(["pageChange", "pageSizeChange", "dataChange", "selectionChange", "loadingChange", "pageInfoChange"], ["update:isAutoRefresh", "update:refreshInterval", "update:activeId", "update:activeData"]),
   setup(__props, { expose: __expose, emit: __emit }) {
     useCssVars((_ctx) => ({
-      "c829655a": unref(surfacePadCss)
+      "e2a8f6ae": unref(surfacePadCss)
     }));
     const props = __props;
     const emits = __emit;
@@ -95,6 +99,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       ].forEach((k) => {
         if (p[k] !== void 0) picked[k] = p[k];
       });
+      picked.itemCard = itemCardFinal.value;
       return picked;
     });
     const errorText = computed(
@@ -204,6 +209,20 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       });
     };
     const { activeBreakpoint } = useBreakpoint();
+    const { gridGap, gridTemplateColumns, cardPad } = useDataViewGridLayout({
+      gridColumns: () => props.gridColumns,
+      gap: () => props.gap
+    });
+    const gridContainerStyle = computed(() => ({
+      gridTemplateColumns: gridTemplateColumns.value,
+      gap: `${gridGap.value}px`,
+      // 纵向行间距：每行 grid 只有一行卡片，row-gap 无处作用 →
+      // 用 padding-bottom 提供行与行间距（measureElement 按 borderBox 测量含 padding，行高正确）
+      paddingBottom: `${gridGap.value}px`
+    }));
+    const cellStyle = computed(
+      () => props.card ? { padding: `${cardPad.value}px` } : void 0
+    );
     const gridColumnsFinal = computed(
       () => resolveGridColumnsByBreakpoint(props.gridColumns, activeBreakpoint.value)
     );
@@ -309,7 +328,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       toolbarHeight.value = h;
     };
     const { viewportHeightFinal } = useChannelViewportHeight(props);
-    const { surfaceActive, surfacePad, surfacePadCss } = useSurface(() => props);
+    const itemCardFinal = computed(() => props.itemCard ?? props.card);
+    const { surfaceActive, surfaceBgActive, surfacePad, surfacePadCss } = useSurface(() => ({ ...props, itemCard: itemCardFinal.value }));
     const toolbarHeightAdjust = computed(
       () => props.showToolbar ? toolbarHeight.value : 0
     );
@@ -372,7 +392,10 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     });
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", {
-        class: normalizeClass(["dc-data-grid-view data-grid-view", { "data-grid-view_surface": unref(surfaceActive) }])
+        class: normalizeClass(["dc-data-grid-view data-grid-view", {
+          "data-grid-view_surface": unref(surfaceActive),
+          "data-grid-view_surface-bg": unref(surfaceBgActive)
+        }])
       }, [
         __props.showToolbar ? (openBlock(), createBlock(unref(_sfc_main$1), {
           key: 0,
@@ -419,12 +442,13 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
           item: withCtx(({ item, index }) => [
             createElementVNode("div", {
               class: "data-grid-view__grid",
-              style: normalizeStyle({ gridTemplateColumns: `repeat(${gridColumnsFinal.value}, 1fr)` })
+              style: normalizeStyle(gridContainerStyle.value)
             }, [
               (openBlock(true), createElementBlock(Fragment, null, renderList(item, (row, colIndex) => {
                 return openBlock(), createElementBlock("div", {
                   key: keyOf(row),
-                  class: normalizeClass(["data-grid-view__cell", { "is-active": unref(isActive)(row) }]),
+                  class: normalizeClass(["data-grid-view__cell", { "is-active": unref(isActive)(row), "is-card": __props.card }]),
+                  style: normalizeStyle(cellStyle.value),
                   onClick: ($event) => unref(setActive)(row)
                 }, [
                   renderSlot(_ctx.$slots, "custom-view-item", mergeProps({ ref_for: true }, assertItemScope(row, index * gridColumnsFinal.value + colIndex)), () => [
@@ -447,7 +471,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                       }), 128))
                     ])
                   ], true)
-                ], 10, _hoisted_1);
+                ], 14, _hoisted_1);
               }), 128))
             ], 4)
           ]),

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-0d316a42"]]);
+const DataListView = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-f900ae4e"]]);
 export {
   DataListView as default
 };

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

@@ -1,13 +1,16 @@
-import { defineComponent, computed, useModel, ref, watch, openBlock, createElementBlock, normalizeStyle, Fragment, renderList, createBlock, unref, withCtx, renderSlot, createVNode, mergeModels } from "vue";
+import { defineComponent, useModel, ref, computed, watch, openBlock, createElementBlock, normalizeStyle, Fragment, renderList, createBlock, unref, withCtx, renderSlot, createVNode, mergeModels } 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";
 import { useActiveRecord, activeRecordValueOf } from "../../hooks/use-active-record.mjs";
 import { useActiveScroll } from "./use-active-scroll.mjs";
+import { useDataViewGridLayout } from "./use-grid-layout.mjs";
+import { useDataViewMasonry } from "./use-masonry.mjs";
 const _hoisted_1 = {
   key: 1,
-  class: "data-list-view-empty"
+  class: "data-list-view-empty",
+  "data-masonry-skip": ""
 };
 const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "DataListView",
@@ -18,6 +21,10 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     columns: {},
     maxHeight: {},
     minHeight: {},
+    gridColumns: {},
+    gap: {},
+    card: { type: Boolean, default: true },
+    masonry: { type: Boolean, default: false },
     selectable: { type: Boolean, default: false },
     getRenderCtxParams: {}
   }, {
@@ -34,17 +41,6 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       const rk = props.rowKey;
       return typeof rk === "function" ? rk(row) : String(row[rk]);
     };
-    const containerStyle = computed(() => {
-      const style = {};
-      if (props.maxHeight) {
-        style.maxHeight = `${props.maxHeight}px`;
-        style.overflowY = "auto";
-      }
-      if (props.minHeight) {
-        style.minHeight = `${props.minHeight}px`;
-      }
-      return Object.keys(style).length ? style : void 0;
-    });
     const activeId = useModel(__props, "activeId");
     const activeData = useModel(__props, "activeData");
     const listRoot = ref();
@@ -56,6 +52,30 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       activeData,
       name: "DataListView"
     });
+    const { gridGap, gridStyle, cardPad } = useDataViewGridLayout({
+      gridColumns: () => props.gridColumns,
+      gap: () => props.gap
+    });
+    const { masonrySpans, masonryContainerStyle } = useDataViewMasonry({
+      enabled: () => props.masonry,
+      container: () => listRoot.value,
+      gap: () => gridGap.value,
+      data: () => props.data
+    });
+    const containerStyle = computed(() => {
+      const style = {
+        ...gridStyle.value,
+        ...masonryContainerStyle.value
+      };
+      if (props.maxHeight) {
+        style.maxHeight = `${props.maxHeight}px`;
+        style.overflowY = "auto";
+      }
+      if (props.minHeight) {
+        style.minHeight = `${props.minHeight}px`;
+      }
+      return Object.keys(style).length ? style : void 0;
+    });
     useActiveScroll({
       enabled: () => props.activeScroll,
       activeId,
@@ -116,6 +136,10 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
             key: keyOf(row),
             selected: isSelected(row),
             active: unref(isActive)(row),
+            card: __props.card,
+            cardPad: unref(cardPad),
+            masonry: __props.masonry,
+            spanRows: unref(masonrySpans)[index],
             onClick: ($event) => unref(setActive)(row)
           }, {
             default: withCtx(() => [
@@ -130,7 +154,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
               }, void 0, true)
             ]),
             _: 2
-          }, 1032, ["selected", "active", "onClick"]);
+          }, 1032, ["selected", "active", "card", "cardPad", "masonry", "spanRows", "onClick"]);
         }), 128)) : (openBlock(), createElementBlock("div", _hoisted_1, [
           renderSlot(_ctx.$slots, "empty", {}, () => [
             createVNode(unref(ElEmpty))

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

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

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

@@ -1,17 +1,36 @@
-import { defineComponent, openBlock, createElementBlock, normalizeClass, renderSlot } from "vue";
+import { defineComponent, computed, openBlock, createElementBlock, normalizeStyle, normalizeClass, renderSlot } from "vue";
 const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "DataListViewItem",
   props: {
     selected: { type: Boolean },
-    active: { type: Boolean }
+    active: { type: Boolean },
+    card: { type: Boolean },
+    cardPad: {},
+    masonry: { type: Boolean },
+    spanRows: {}
   },
   setup(__props) {
+    const props = __props;
+    const itemStyle = computed(() => {
+      const style = {};
+      if (props.spanRows !== void 0) style.gridRowEnd = `span ${props.spanRows}`;
+      if (props.card && props.cardPad !== void 0) {
+        style.padding = `${props.cardPad}px`;
+      }
+      return Object.keys(style).length ? style : void 0;
+    });
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", {
-        class: normalizeClass(["data-list-view-item", { "is-selected": __props.selected, "is-active": __props.active }])
+        class: normalizeClass(["data-list-view-item", {
+          "is-selected": __props.selected,
+          "is-active": __props.active,
+          "is-card": __props.card,
+          "is-masonry": __props.spanRows !== void 0 || __props.masonry
+        }]),
+        style: normalizeStyle(itemStyle.value)
       }, [
         renderSlot(_ctx.$slots, "default", {}, void 0, true)
-      ], 2);
+      ], 6);
     };
   }
 });

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

@@ -1,7 +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-6539caa4"]]);
+const InfiniteListView = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-a62d17f9"]]);
 export {
   InfiniteListView as default
 };

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

@@ -31,19 +31,22 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     estimateSize: { default: 200 },
     overscan: { default: 5 },
     surface: { type: Boolean, default: void 0 },
+    itemCard: { type: Boolean },
     maxHeight: { default: void 0 },
     pullRefresh: { type: Boolean, default: false }
   },
   emits: ["loadMore", "retry", "refresh"],
   setup(__props, { expose: __expose, emit: __emit }) {
     useCssVars((_ctx) => ({
-      "v0d4fd951": unref(surfacePadCss)
+      "v9e087332": unref(surfacePadCss)
     }));
     const props = __props;
     const emits = __emit;
     const scrollContainer = ref();
     const sentinel = ref();
-    const { surfaceActive, surfacePadCss } = useSurface(() => props);
+    const { surfaceActive, surfaceBgActive, surfacePadCss } = useSurface(
+      () => props
+    );
     const containerStyle = computed(
       () => props.maxHeight ? {
         maxHeight: typeof props.maxHeight === "number" ? `${props.maxHeight}px` : props.maxHeight,
@@ -131,7 +134,10 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       return openBlock(), createElementBlock("div", {
         ref_key: "scrollContainer",
         ref: scrollContainer,
-        class: normalizeClass(["dc-infinite-list-view infinite-list-view", { "infinite-list-view_surface": unref(surfaceActive) }]),
+        class: normalizeClass(["dc-infinite-list-view infinite-list-view", {
+          "infinite-list-view_surface": unref(surfaceActive),
+          "infinite-list-view_surface-bg": unref(surfaceBgActive)
+        }]),
         style: normalizeStyle(containerStyle.value),
         onTouchstartPassive: _cache[0] || (_cache[0] = //@ts-ignore
         (...args) => unref(onTouchStart) && unref(onTouchStart)(...args)),

package/es/components/data-view/use-grid-layout.mjs

@@ -0,0 +1,46 @@
+import { inject, computed } from "vue";
+import { resolveGridColumnsByBreakpoint } from "./utils.mjs";
+import { APP_LAYOUT_BRIDGE_KEY } from "../../inject/key.mjs";
+import { useBreakpoint } from "../../hooks/use-breakpoint.mjs";
+import { gapScaleValue } from "../../utils/gap-scale.mjs";
+const DEFAULT_GAP_BASE = 8;
+const useDataViewGridLayout = (options) => {
+  const layoutBridge = inject(APP_LAYOUT_BRIDGE_KEY, void 0);
+  const { activeBreakpoint } = useBreakpoint();
+  const gridGap = computed(
+    () => options.gap() ?? gapScaleValue(
+      (layoutBridge == null ? void 0 : layoutBridge.APP_LAYOUT_GAP_CONFIG.size) ?? DEFAULT_GAP_BASE,
+      "module",
+      layoutBridge == null ? void 0 : layoutBridge.themeDensity.value
+    )
+  );
+  const cardPad = computed(
+    () => gapScaleValue(
+      (layoutBridge == null ? void 0 : layoutBridge.APP_LAYOUT_GAP_CONFIG.size) ?? DEFAULT_GAP_BASE,
+      "breath",
+      layoutBridge == null ? void 0 : layoutBridge.themeDensity.value
+    )
+  );
+  const gridTemplateColumns = computed(() => {
+    const cfg = options.gridColumns();
+    if (cfg === void 0) return void 0;
+    if (typeof cfg === "object" && "min" in cfg) {
+      return `repeat(auto-fill, minmax(${cfg.min}px, 1fr))`;
+    }
+    return `repeat(${resolveGridColumnsByBreakpoint(
+      cfg,
+      activeBreakpoint.value
+    )}, 1fr)`;
+  });
+  const gridStyle = computed(
+    () => gridTemplateColumns.value ? {
+      display: "grid",
+      gridTemplateColumns: gridTemplateColumns.value,
+      gap: `${gridGap.value}px`
+    } : void 0
+  );
+  return { gridGap, gridTemplateColumns, gridStyle, cardPad };
+};
+export {
+  useDataViewGridLayout
+};