@vmscloud/moz-ui-grid-vue 0.2.8 → 0.2.9

package/dist/index.js

@@ -2,7 +2,7 @@ var __defProp = Object.defineProperty;
 var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
 var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
 import { onBeforeUnmount, inject, ref, watch, nextTick, shallowRef, defineComponent, createElementBlock, openBlock, computed, provide, reactive, createApp, h, getCurrentInstance, mergeModels, useModel, useSlots, onMounted, toRef, Fragment, createElementVNode, renderSlot, createBlock, createCommentVNode, normalizeStyle, mergeProps, toHandlers, unref, createSlots, withCtx, normalizeProps, guardReactiveProps } from "vue";
-import { Popup, radio, select, button, GridChrome, WRAPPER_EXTRA_KEYS } from "@vmscloud/moz-ui-grid-wrapper";
+import { stampPresetVersion, migrateGridPreset, applyPresetCoreConfig, Popup, radio, select, button, GridChrome, WRAPPER_EXTRA_KEYS } from "@vmscloud/moz-ui-grid-wrapper";
 import { u as useGridNotificationStore } from "./chunks/notification.contract-BTOch6ed.js";
 import { G, p } from "./chunks/notification.contract-BTOch6ed.js";
 import { html, nothing } from "lit-html";
@@ -98,41 +98,55 @@ const useUserLayoutModule = () => inject(USER_LAYOUT_PROVIDER_KEY, {
   currentPreset: ref(null)
 });
 function useGridPreset(options) {
+  if (options.usePreset === false) return;
   const { register } = useUserLayoutModule();
   const exportDef = () => {
     var _a, _b;
     const grid = options.gridInstance.value;
     if (!grid) return null;
-    return {
-      ...grid.getConfig(),
+    const def = {
+      ...stampPresetVersion(grid.getConfig()),
       customCellConfig: ((_a = options.getCustomCellState) == null ? void 0 : _a.call(options)) ?? null,
       columnFormatConfig: ((_b = options.getColumnFormatState) == null ? void 0 : _b.call(options)) ?? null
     };
+    if (options.getViewOptionsState) def.viewOptionsConfig = options.getViewOptionsState() ?? null;
+    return def;
+  };
+  const applyExtra = (set, value) => {
+    if (value !== void 0) set == null ? void 0 : set(value);
   };
-  const importDef = async (preset) => {
-    var _a, _b, _c, _d;
+  const applyPreset = async (preset) => {
     const grid = options.gridInstance.value;
     if (!grid) return;
-    if (!preset) {
-      const defaultDef = layoutInstance.default;
-      if (defaultDef) {
-        await grid.applyConfig(defaultDef);
-        if (defaultDef.customCellConfig) {
-          (_a = options.setCustomCellState) == null ? void 0 : _a.call(options, defaultDef.customCellConfig);
-        }
-        if (defaultDef.columnFormatConfig) {
-          (_b = options.setColumnFormatState) == null ? void 0 : _b.call(options, defaultDef.columnFormatConfig);
-        }
-      }
-      return;
-    }
-    await grid.applyConfig(preset);
-    if (preset.customCellConfig) {
-      (_c = options.setCustomCellState) == null ? void 0 : _c.call(options, preset.customCellConfig);
-    }
-    if (preset.columnFormatConfig) {
-      (_d = options.setColumnFormatState) == null ? void 0 : _d.call(options, preset.columnFormatConfig);
+    const baseline = layoutInstance.default ?? null;
+    const migrated = migrateGridPreset(preset ?? baseline, {
+      grid,
+      getSourceFields: options.getSourceFields,
+      baseline
+    });
+    if (migrated.diagnostics.length) {
+      if (options.onImportDiagnostics) options.onImportDiagnostics(migrated.diagnostics);
+      else console.warn("[Grid preset compatibility]", migrated.diagnostics);
     }
+    if (migrated.config) await applyPresetCoreConfig(grid, migrated.config, migrated.missing);
+    applyExtra(options.setColumnFormatState, migrated.columnFormatConfig);
+    applyExtra(options.setCustomCellState, migrated.customCellConfig);
+    applyExtra(options.setViewOptionsState, migrated.viewOptionsConfig);
+  };
+  let latestRequest = 0;
+  let queue = Promise.resolve();
+  const importDef = (preset) => {
+    const token = ++latestRequest;
+    const run = queue.then(async () => {
+      if (token !== latestRequest) return;
+      try {
+        await applyPreset(preset);
+      } catch (error) {
+        console.error("[Grid preset] import failed", error);
+      }
+    });
+    queue = run;
+    return run;
   };
   const layoutInstance = new UserLayoutInstance({
     id: options.name.value,
@@ -213,6 +227,8 @@ async function runClientExport(grid, config, notificationStore) {
       suggestedName: fileName,
       fallbackToDownload: true,
       sheetSplit: "auto",
+      // 화면에 보이는 그대로 — 고정 행을 화면 순서로 포함(core 기본값 false). clientExportOptions 로 끌 수 있음.
+      includePinnedRows: true,
       onProgress: (p2) => {
         if (!notificationStore) return;
         const target = notificationStore.eventMessages.find(
@@ -992,6 +1008,7 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
     useMultipleChart: { type: Boolean },
     chartIncludeGrandTotal: { type: Boolean },
     chartMap: {},
+    chartConfig: {},
     useRowGroupSettings: { type: Boolean, default: true },
     useFieldSettings: { type: Boolean, default: true },
     useFormatSettings: { type: Boolean, default: true },
@@ -1009,7 +1026,9 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
     useChart: { type: Boolean },
     loading: { type: Boolean },
     useBuiltinTooltip: { type: Boolean, default: true },
-    name: {}
+    toolbarConfig: {},
+    name: {},
+    usePreset: { type: Boolean, default: true }
   }, {
     "coreConfig": { default: () => ({}) },
     "coreConfigModifiers": {}
@@ -1144,12 +1163,13 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
       return { height: typeof h2 === "number" ? `${h2}px` : h2, width: "100%" };
     });
     function slotRenderer(name) {
-      return (container) => {
+      return (container, ctx) => {
         const slotComponent = {
           // tool-items 는 toolItemsProps(ref)를 스코프 슬롯 props 로 — render 에서 .value 읽어 반응형 갱신.
+          // option-menu-items 는 크롬이 넘긴 { close, mode }(WrapperOptionMenuItemsProps)를 스코프 슬롯 props 로.
           render: () => {
-            var _a, _b;
-            return (name === "tool-items" ? (_a = slots[name]) == null ? void 0 : _a.call(slots, toolItemsProps.value) : (_b = slots[name]) == null ? void 0 : _b.call(slots)) ?? null;
+            var _a, _b, _c;
+            return (name === "tool-items" ? (_a = slots[name]) == null ? void 0 : _a.call(slots, toolItemsProps.value) : name === "option-menu-items" ? (_b = slots[name]) == null ? void 0 : _b.call(slots, ctx.props) : (_c = slots[name]) == null ? void 0 : _c.call(slots)) ?? null;
           }
         };
         const key = `slot:${name}`;
@@ -1175,7 +1195,7 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
       return core;
     }
     function buildChromeOptions() {
-      const CHROME_SLOTS = ["tool-left", "tool-items", "option-popup", "tool-bottom", "notification", "footer", "empty-state"];
+      const CHROME_SLOTS = ["tool-left", "tool-items", "option-popup", "tool-bottom", "notification", "footer", "empty-state", "option-menu-items"];
       const slotMap = {};
       for (const name of CHROME_SLOTS) {
         if (slots[name]) slotMap[name] = slotRenderer(name);
@@ -1197,9 +1217,11 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
         useFormatSettings: props.useFormatSettings,
         useLayoutSettings: props.useLayoutSettings,
         useAggregateSettings: props.useAggregateSettings,
+        toolbarConfig: props.toolbarConfig,
         useMultipleChart: props.useMultipleChart,
         chartIncludeGrandTotal: props.chartIncludeGrandTotal,
         chartMap: props.chartMap,
+        chartConfig: props.chartConfig,
         loading: props.loading,
         locale: resolvedLocale.value,
         sourceFields: props.sourceFields,
@@ -1332,23 +1354,33 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
         { deep: true }
       );
       watch(
-        () => ({
-          useToolBox: props.useToolBox,
-          useToolBoxSetting: props.useToolBoxSetting,
-          useExtendFooter: props.useExtendFooter,
-          useSummaryFooter: props.useSummaryFooter,
-          useSort: props.useSort,
-          useCustomCell: props.useCustomCell,
-          useContextMenu: props.useContextMenu,
-          useBuiltinTooltip: props.useBuiltinTooltip,
-          usePivot: props.usePivot,
-          usePivotBar: props.usePivotBar,
-          useRowGroupSettings: props.useRowGroupSettings,
-          useFieldSettings: props.useFieldSettings,
-          useFormatSettings: props.useFormatSettings,
-          useLayoutSettings: props.useLayoutSettings,
-          useAggregateSettings: props.useAggregateSettings
-        }),
+        () => {
+          var _a, _b, _c, _d;
+          return {
+            useToolBox: props.useToolBox,
+            useToolBoxSetting: props.useToolBoxSetting,
+            useExtendFooter: props.useExtendFooter,
+            useSummaryFooter: props.useSummaryFooter,
+            useSort: props.useSort,
+            useCustomCell: props.useCustomCell,
+            useContextMenu: props.useContextMenu,
+            useBuiltinTooltip: props.useBuiltinTooltip,
+            usePivot: props.usePivot,
+            usePivotBar: props.usePivotBar,
+            useRowGroupSettings: props.useRowGroupSettings,
+            useFieldSettings: props.useFieldSettings,
+            useFormatSettings: props.useFormatSettings,
+            useLayoutSettings: props.useLayoutSettings,
+            useAggregateSettings: props.useAggregateSettings,
+            // 툴바 필터 버튼 — 중첩 값을 직접 읽어 reactive 객체의 필드 변경도 추적(크롬이 값으로 비교).
+            toolbarConfig: {
+              filter: {
+                disabled: (_b = (_a = props.toolbarConfig) == null ? void 0 : _a.filter) == null ? void 0 : _b.disabled,
+                hidden: (_d = (_c = props.toolbarConfig) == null ? void 0 : _c.filter) == null ? void 0 : _d.hidden
+              }
+            }
+          };
+        },
         (next) => chrome == null ? void 0 : chrome.setUIOptions(next)
       );
       watch(
@@ -1366,6 +1398,14 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
         (cfg) => chrome == null ? void 0 : chrome.setContextMenuConfig(cfg),
         { deep: true }
       );
+      watch(
+        () => props.chartConfig,
+        (cfg) => {
+          var _a;
+          return (_a = chrome == null ? void 0 : chrome.setChartConfig) == null ? void 0 : _a.call(chrome, cfg);
+        },
+        { deep: true }
+      );
     });
     onBeforeUnmount(() => {
       clearChromeUnsubs();
@@ -1375,17 +1415,35 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
       vueRenderer.unmountAll();
     });
     useGridPreset({
+      usePreset: props.usePreset,
       name: toRef(props, "name"),
       type: coreConfig.value.mode === "pivot" ? "mozPivotGrid" : "mozFlatGrid",
       gridInstance,
+      // 피벗 카탈로그(AvailableField)에는 컬럼 id 가 없다 — 선언 fields 의 field→id 로 실제 id 를 되찾는다.
+      // (id 를 f.field 로 채우면 id≠field 그리드에서 Wijmo flat 변환·customCell 대상이 없는 id 로 해석된다.)
+      getSourceFields: () => {
+        const declared = coreConfig.value.fields ?? [];
+        const idByField = new Map(declared.map((d2) => [d2.field ?? d2.id, d2.id]));
+        return ((chrome == null ? void 0 : chrome.pivot.sourceFields) ?? []).map((f) => ({ id: idByField.get(f.field) ?? f.field, field: f.field, header: f.header, dataType: f.dataType }));
+      },
       getCustomCellState: () => (chrome == null ? void 0 : chrome.customCell.getCustomCell()) ?? null,
+      // null = 빈 상태로 초기화(프리셋 null 저장본·기본 보기 — F03). 컨트롤러 setter 가 null 을 빈 상태로 받는다.
       setCustomCellState: (s) => {
-        if (s && chrome) chrome.customCell.setCustomCell(s);
+        chrome == null ? void 0 : chrome.customCell.setCustomCell(s ?? null);
       },
       // 컬럼 옵션 시각 서식(ColumnFormatController) — core getConfig 에 없는 wrapper 전용 상태라 별도 직렬화.
       getColumnFormatState: () => (chrome == null ? void 0 : chrome.columnFormat.getConfig()) ?? null,
       setColumnFormatState: (s) => {
-        if (s && chrome) chrome.columnFormat.setConfig(s);
+        chrome == null ? void 0 : chrome.columnFormat.setConfig(s ?? null);
+      },
+      // 보기 설정 토글(툴바 펼침/푸터/그룹 패널) + 피벗 옵션 바 표시 — wrapper 소유 보기 상태.
+      getViewOptionsState: () => {
+        var _a;
+        return ((_a = chrome == null ? void 0 : chrome.getPresetViewState) == null ? void 0 : _a.call(chrome)) ?? null;
+      },
+      setViewOptionsState: (s) => {
+        var _a;
+        (_a = chrome == null ? void 0 : chrome.setPresetViewState) == null ? void 0 : _a.call(chrome, s);
       }
     });
     const exposed = new Proxy({}, {
@@ -1422,7 +1480,7 @@ const _export_sfc = (sfc, props) => {
   }
   return target;
 };
-const MozGrid = /* @__PURE__ */ _export_sfc(_sfc_main$2, [["__scopeId", "data-v-a719186c"]]);
+const MozGrid = /* @__PURE__ */ _export_sfc(_sfc_main$2, [["__scopeId", "data-v-ecaeb65f"]]);
 const CellTemplate = defineComponent({
   name: "CellTemplate",
   props: {
@@ -1566,6 +1624,8 @@ const DetailTemplate = defineComponent({
     return () => null;
   }
 });
+const GROUP_TEMPLATE_DISPOSE_EVENT = "ps-group-template-dispose";
+const GROUP_TEMPLATE_HOST_CLASS = "ps-group-template-host";
 const GroupTemplate = defineComponent({
   name: "GroupTemplate",
   setup() {
@@ -1576,16 +1636,21 @@ const GroupTemplate = defineComponent({
       console.warn("[MozGridVue] GroupTemplate은 MozGridVue 내부에서 사용해야 합니다.");
       return () => null;
     }
-    onMounted(() => {
-      const grid = gridRef.value;
-      if (!grid || !slots.default) return;
+    const instances = /* @__PURE__ */ new Map();
+    const dispose = (container) => {
+      const instance2 = instances.get(container);
+      if (!instance2) return;
+      instances.delete(container);
+      instance2.destroy();
+    };
+    const register = (grid) => {
+      if (!slots.default) return;
       const slot = slots.default;
       grid.formatRow.addHandler("_groupTemplate", (info) => {
         if (info.type !== "group-row") return;
         const ctx = info.ctx;
         const container = ctx.element;
         if (!container) return;
-        const key = `group:${ctx.viewIndex}`;
         const slotProps = {
           groupKey: ctx.column,
           groupValue: ctx.value,
@@ -1593,17 +1658,35 @@ const GroupTemplate = defineComponent({
           count: ctx.itemCount,
           isExpanded: !ctx.collapsed
         };
-        renderer.mount(key, container, {
-          render() {
-            return slot(slotProps);
-          }
-        }, slotProps);
+        const existing = instances.get(container);
+        if (existing && container.classList.contains(GROUP_TEMPLATE_HOST_CLASS)) {
+          existing.update(slotProps);
+          return;
+        }
+        if (existing) dispose(container);
+        const instance2 = renderer.mountInstance(
+          container,
+          (props) => slot(props),
+          slotProps
+        );
+        instances.set(container, instance2);
+        container.addEventListener(GROUP_TEMPLATE_DISPOSE_EVENT, () => dispose(container), { once: true });
       });
-    });
+    };
+    const unregister = (grid) => {
+      grid == null ? void 0 : grid.formatRow.removeHandler("_groupTemplate");
+      for (const container of [...instances.keys()]) dispose(container);
+    };
+    let registeredGrid = null;
+    watch(gridRef, (grid) => {
+      if (grid === registeredGrid) return;
+      unregister(registeredGrid);
+      registeredGrid = grid ?? null;
+      if (grid) register(grid);
+    }, { immediate: true });
     onBeforeUnmount(() => {
-      var _a;
-      renderer == null ? void 0 : renderer.unmountByPrefix("group:");
-      (_a = gridRef.value) == null ? void 0 : _a.formatRow.removeHandler("_groupTemplate");
+      unregister(registeredGrid);
+      registeredGrid = null;
     });
     return () => null;
   }