@affino/datagrid-vue-app 0.1.4 → 0.1.6

package/dist/index.js

@@ -1,29 +1,29 @@
-import { defineComponent as ae, ref as X, provide as ge, computed as g, watch as w, onBeforeUnmount as Z, h as Y, mergeProps as ve, toRef as te } from "vue";
-import { useDataGridRuntime as ye } from "@affino/datagrid-vue";
-import { useDataGridAppSelection as pe, useDataGridAppRowSelection as we } from "@affino/datagrid-vue/app";
-import { d as Se, e as he, f as be, r as Re, g as Me, u as Oe, D as Be } from "./chunks/useDataGridAppRowModel-CrcgRzkI.js";
-import { applyGridTheme as Ae, resolveGridThemeTokens as Ce, defaultStyleConfig as B, sugarTheme as ie, industrialNeutralTheme as oe } from "@affino/datagrid-theme";
-import { d as Pe } from "./chunks/DataGridFilterableCombobox.vue_vue_type_script_setup_true_lang-_1TDQseN.js";
-const Ge = {
-  default: B,
-  "industrial-neutral": oe,
-  industrialNeutral: oe,
-  sugar: ie
+import { defineComponent as ue, ref as Y, provide as ye, computed as f, watch as p, onBeforeUnmount as ee, h as Z, mergeProps as we, toRef as oe } from "vue";
+import { useDataGridRuntime as pe } from "@affino/datagrid-vue";
+import { useDataGridAppSelection as Se, useDataGridAppRowSelection as he } from "@affino/datagrid-vue/app";
+import { d as Re, e as be, f as Me, r as Oe, g as Be, u as Ae, D as Ce } from "./chunks/useDataGridAppRowModel-ut9FcmL0.js";
+import { applyGridTheme as xe, resolveGridThemeTokens as Pe, defaultStyleConfig as C, sugarTheme as se, industrialNeutralTheme as ne } from "@affino/datagrid-theme";
+import { d as Ge } from "./chunks/DataGridFilterableCombobox.vue_vue_type_script_setup_true_lang-_1TDQseN.js";
+const De = {
+  default: C,
+  "industrial-neutral": ne,
+  industrialNeutral: ne,
+  sugar: se
 };
-function De(e, t) {
+function Le(e, t) {
   if (!e && !t)
     return;
   const r = {
     ...e ?? {}
   };
-  for (const [n, f] of Object.entries(t ?? {}))
+  for (const [n, c] of Object.entries(t ?? {}))
     r[n] = {
       ...r[n] ?? {},
-      ...f
+      ...c
     };
   return r;
 }
-function _(e, t) {
+function J(e, t) {
   return {
     ...e,
     ...t,
@@ -34,34 +34,34 @@ function _(e, t) {
     summary: { ...e.summary ?? {}, ...t.summary ?? {} },
     state: { ...e.state ?? {}, ...t.state ?? {} },
     tokens: { ...e.tokens ?? {}, ...t.tokens ?? {} },
-    tokenVariants: De(e.tokenVariants, t.tokenVariants)
+    tokenVariants: Le(e.tokenVariants, t.tokenVariants)
   };
 }
-function xe(e) {
+function Ie(e) {
   return !e || typeof e != "object" ? !1 : "tokens" in e || "tokenVariants" in e || "activeTokenVariant" in e || "defaultTokenVariant" in e || "inheritThemeFromDocument" in e || "documentDarkClass" in e || "grid" in e || "header" in e || "body" in e || "group" in e || "summary" in e || "state" in e;
 }
-function Ie(e) {
-  return e == null ? B : typeof e == "string" ? e === "sugar" ? _(B, ie) : Ge[e] ?? B : xe(e) ? _(B, e) : _(B, {
+function je(e) {
+  return e == null ? C : typeof e == "string" ? e === "sugar" ? J(C, se) : De[e] ?? C : Ie(e) ? J(C, e) : J(C, {
     tokens: e
   });
 }
-function Le(e) {
-  const t = Ie(e);
-  return Ce(t ?? B, {
+function Ke(e) {
+  const t = je(e);
+  return Pe(t ?? C, {
     document: typeof document > "u" ? void 0 : document
   });
 }
-function ne(e, t) {
-  const r = Le(t);
-  return Ae(e, r), r;
-}
 function re(e, t) {
-  return Number.isFinite(e) ? Math.max(0, Math.trunc(e)) : t;
+  const r = Ke(t);
+  return xe(e, r), r;
 }
 function le(e, t) {
+  return Number.isFinite(e) ? Math.max(0, Math.trunc(e)) : t;
+}
+function ae(e, t) {
   return Number.isFinite(e) ? Math.max(1, Math.trunc(e)) : t;
 }
-function je(e) {
+function Fe(e) {
   if (e !== void 0) {
     if (e == null)
       return null;
@@ -76,79 +76,101 @@ function je(e) {
     return e;
   }
 }
-function Ke(e, t) {
+function Te(e, t) {
   return t === !0 || t && typeof t == "object" ? "pagination" : e ?? "virtualization";
 }
-function Fe(e, t, r, n) {
+function ze(e, t, r, n) {
   if (t !== "pagination")
     return null;
-  const f = 100, u = le(r, f), p = re(n, 0);
+  const c = 100, a = ae(r, c), y = le(n, 0);
   return e === !0 || e === !1 || e == null ? {
-    pageSize: u,
-    currentPage: p
+    pageSize: a,
+    currentPage: y
   } : {
-    pageSize: le(r ?? e.pageSize, f),
-    currentPage: re(n ?? e.currentPage, 0)
+    pageSize: ae(r ?? e.pageSize, c),
+    currentPage: le(n ?? e.currentPage, 0)
   };
 }
-const J = "Advanced filter";
-function Te(e) {
+const $ = "Advanced filter";
+function We(e) {
   return typeof e == "boolean" ? {
     enabled: e,
-    buttonLabel: J
+    buttonLabel: $
   } : e ? {
     enabled: e.enabled ?? !0,
-    buttonLabel: typeof e.buttonLabel == "string" && e.buttonLabel.trim().length > 0 ? e.buttonLabel.trim() : J
+    buttonLabel: typeof e.buttonLabel == "string" && e.buttonLabel.trim().length > 0 ? e.buttonLabel.trim() : $
   } : {
     enabled: !1,
-    buttonLabel: J
+    buttonLabel: $
   };
 }
-function We(e) {
+function ie(e) {
+  if (typeof e != "number" || !Number.isFinite(e))
+    return null;
+  const t = Math.max(0, Math.trunc(e));
+  return t > 0 ? t : null;
+}
+function Ve(e, t, r) {
+  const n = e === "auto-height" ? "auto-height" : "fill";
+  if (n !== "auto-height")
+    return {
+      layoutMode: n,
+      minRows: null,
+      maxRows: null
+    };
+  const c = ie(t);
+  let a = ie(r);
+  return c !== null && a !== null && a < c && (a = c), {
+    layoutMode: n,
+    minRows: c,
+    maxRows: a
+  };
+}
+function He(e) {
   return typeof e == "object" && e !== null;
 }
-function ue(e, t, r) {
-  const n = We(e) ? e : null, f = t(n && "state" in n ? n.state : e, r);
-  if (!f)
+function de(e, t, r) {
+  const n = He(e) ? e : null, c = t(n && "state" in n ? n.state : e, r);
+  if (!c)
     return null;
-  const u = n?.viewMode, p = u === "gantt" ? "gantt" : u === "table" ? "table" : void 0;
+  const a = n?.viewMode, y = a === "gantt" ? "gantt" : a === "table" ? "table" : void 0;
   return {
-    state: f,
-    ...p ? { viewMode: p } : {}
+    state: c,
+    ...y ? { viewMode: y } : {}
   };
 }
-function Ve(e) {
+function Ee(e) {
   return JSON.stringify(e);
 }
-function ze(e, t, r) {
+function ke(e, t, r) {
   if (typeof e != "string" || e.trim().length === 0)
     return null;
   try {
-    return ue(JSON.parse(e), t, r);
+    return de(JSON.parse(e), t, r);
   } catch {
     return null;
   }
 }
-function nt(e, t, r) {
+function at(e, t, r) {
   if (!e || typeof t != "string" || t.trim().length === 0)
     return !1;
   try {
-    return e.setItem(t, Ve(r)), !0;
+    return e.setItem(t, Ee(r)), !0;
   } catch {
     return !1;
   }
 }
-function rt(e, t, r, n) {
+function it(e, t, r, n) {
   if (!e || typeof t != "string" || t.trim().length === 0)
     return null;
   try {
-    const f = e.getItem(t);
-    return f ? ze(f, r, n) : null;
+    const c = e.getItem(t);
+    return c ? ke(c, r, n) : null;
   } catch {
     return null;
   }
 }
-function lt(e, t) {
+function ut(e, t) {
   if (!e || typeof t != "string" || t.trim().length === 0)
     return !1;
   try {
@@ -157,36 +179,36 @@ function lt(e, t) {
     return !1;
   }
 }
-const $ = "Columns";
-function He(e) {
+const q = "Columns";
+function Ne(e) {
   return typeof e == "boolean" ? {
     enabled: e,
-    buttonLabel: $
+    buttonLabel: q
   } : e ? {
     enabled: e.enabled ?? !0,
-    buttonLabel: typeof e.buttonLabel == "string" && e.buttonLabel.trim().length > 0 ? e.buttonLabel.trim() : $
+    buttonLabel: typeof e.buttonLabel == "string" && e.buttonLabel.trim().length > 0 ? e.buttonLabel.trim() : q
   } : {
     enabled: !1,
-    buttonLabel: $
+    buttonLabel: q
   };
 }
-const q = "Aggregations";
-function Ee(e) {
+const Q = "Aggregations";
+function Ue(e) {
   return typeof e == "boolean" ? {
     enabled: e,
-    buttonLabel: q
+    buttonLabel: Q
   } : e ? {
     enabled: e.enabled ?? !0,
-    buttonLabel: typeof e.buttonLabel == "string" && e.buttonLabel.trim().length > 0 ? e.buttonLabel.trim() : q
+    buttonLabel: typeof e.buttonLabel == "string" && e.buttonLabel.trim().length > 0 ? e.buttonLabel.trim() : Q
   } : {
     enabled: !1,
-    buttonLabel: q
+    buttonLabel: Q
   };
 }
 function T(e, t) {
   return Number.isFinite(e) ? Math.max(0, Math.trunc(e)) : t;
 }
-function ke(e, t) {
+function _e(e, t) {
   const r = {
     rows: !0,
     columns: !1,
@@ -204,7 +226,7 @@ function ke(e, t) {
   }
   return t === "pagination" && (r.rows = !1), r;
 }
-const Ne = ae({
+const Je = ue({
   name: "DataGridRuntimeHost",
   inheritAttrs: !1,
   props: {
@@ -224,6 +246,10 @@ const Ne = ae({
       type: [String, Object],
       default: void 0
     },
+    layoutMode: {
+      type: String,
+      default: "fill"
+    },
     plugins: {
       type: Array,
       default: () => []
@@ -250,303 +276,304 @@ const Ne = ae({
     }
   },
   emits: ["cell-change", "selection-change"],
-  setup(e, { attrs: t, slots: r, emit: n, expose: f }) {
-    const u = X(null);
-    ge(Pe, u);
-    let p = null;
-    const a = ye({
-      rows: g(() => e.rows),
+  setup(e, { attrs: t, slots: r, emit: n, expose: c }) {
+    const a = Y(null);
+    ye(Ge, a);
+    let y = null;
+    const i = pe({
+      rows: f(() => e.rows),
       rowModel: e.rowModel,
-      columns: g(() => e.columns),
+      columns: f(() => e.columns),
       plugins: e.plugins,
       services: e.services,
       startupOrder: e.startupOrder,
       autoStart: e.autoStart
-    }), h = a, b = {
-      api: a.api,
-      syncBodyRowsInRange: a.syncBodyRowsInRange,
-      rowPartition: a.rowPartition,
-      virtualWindow: a.virtualWindow,
-      columnSnapshot: a.columnSnapshot,
+    }), h = i, b = {
+      api: i.api,
+      syncBodyRowsInRange: i.syncBodyRowsInRange,
+      rowPartition: i.rowPartition,
+      virtualWindow: i.virtualWindow,
+      columnSnapshot: i.columnSnapshot,
       getBodyRowAtIndex: h.getBodyRowAtIndex,
       resolveBodyRowIndexById: h.resolveBodyRowIndexById
-    }, M = () => {
+    }, A = () => {
       if (e.renderMode === "pagination") {
-        const y = e.pagination ?? { pageSize: 100, currentPage: 0 };
-        a.api.rows.setPagination({
-          pageSize: Math.max(1, Math.trunc(y.pageSize)),
-          currentPage: Math.max(0, Math.trunc(y.currentPage))
+        const v = e.pagination ?? { pageSize: 100, currentPage: 0 };
+        i.api.rows.setPagination({
+          pageSize: Math.max(1, Math.trunc(v.pageSize)),
+          currentPage: Math.max(0, Math.trunc(v.currentPage))
         });
         return;
       }
-      a.api.rows.setPagination(null);
+      i.api.rows.setPagination(null);
     };
-    w(
+    p(
       () => e.renderMode,
       () => {
-        M();
+        A();
       },
       { immediate: !0 }
-    ), w(
+    ), p(
       () => e.pagination,
       () => {
-        M();
+        A();
       },
       { immediate: !0, deep: !0 }
-    ), typeof document < "u" && (p = new MutationObserver(() => {
-      const y = u.value;
-      y && ne(y, e.theme);
-    }), p.observe(document.documentElement, {
+    ), typeof document < "u" && (y = new MutationObserver(() => {
+      const v = a.value;
+      v && re(v, e.theme);
+    }), y.observe(document.documentElement, {
       attributes: !0,
       attributeFilter: ["class", "data-theme"]
-    })), w(
-      [() => e.theme, u],
+    })), p(
+      [() => e.theme, a],
       () => {
-        const y = u.value;
-        y && ne(y, e.theme);
+        const v = a.value;
+        v && re(v, e.theme);
       },
       { immediate: !0, deep: !0 }
     );
-    const A = a.api.events.on("rows:changed", (y) => {
-      n("cell-change", y);
-    }), C = a.api.events.on("selection:changed", (y) => {
-      n("selection-change", y);
+    const x = i.api.events.on("rows:changed", (v) => {
+      n("cell-change", v);
+    }), P = i.api.events.on("selection:changed", (v) => {
+      n("selection-change", v);
     });
-    Z(() => {
-      A(), C(), p?.disconnect(), p = null;
+    ee(() => {
+      x(), P(), y?.disconnect(), y = null;
     });
-    const v = g(() => {
-      const y = a.virtualWindow.value;
+    const g = f(() => {
+      const v = i.virtualWindow.value;
       return {
-        ...y ?? {},
-        rowTotal: y?.rowTotal ?? a.rowPartition.value.bodyRowCount,
-        colTotal: a.columnSnapshot.value.visibleColumns.length
+        ...v ?? {},
+        rowTotal: v?.rowTotal ?? i.rowPartition.value.bodyRowCount,
+        colTotal: i.columnSnapshot.value.visibleColumns.length
       };
     });
-    return f({
-      api: a.api,
-      core: a.core,
+    return c({
+      api: i.api,
+      core: i.core,
       runtime: b,
-      rowModel: a.rowModel,
-      columnModel: a.columnModel,
-      columnSnapshot: a.columnSnapshot,
-      rowPartition: a.rowPartition,
-      setRows: a.setRows,
-      syncBodyRowsInRange: a.syncBodyRowsInRange,
+      rowModel: i.rowModel,
+      columnModel: i.columnModel,
+      columnSnapshot: i.columnSnapshot,
+      rowPartition: i.rowPartition,
+      setRows: i.setRows,
+      syncBodyRowsInRange: i.syncBodyRowsInRange,
       getBodyRowAtIndex: h.getBodyRowAtIndex,
       resolveBodyRowIndexById: h.resolveBodyRowIndexById,
-      virtualWindow: a.virtualWindow,
-      start: a.start,
-      stop: a.stop
-    }), () => Y(
+      virtualWindow: i.virtualWindow,
+      start: i.start,
+      stop: i.stop
+    }), () => Z(
       "div",
-      ve(t, {
-        ref: u,
-        class: "affino-datagrid-app-root",
+      we(t, {
+        ref: a,
+        class: [
+          "affino-datagrid-app-root",
+          e.layoutMode === "auto-height" ? "affino-datagrid-app-root--auto-height" : "affino-datagrid-app-root--fill"
+        ],
         style: {
           display: "flex",
-          flex: "1 1 auto",
           width: "100%",
-          height: "100%",
           minHeight: "0",
           minWidth: "0"
         }
       }),
       r.default?.({
-        api: a.api,
-        core: a.core,
+        api: i.api,
+        core: i.core,
         runtime: b,
         grid: b,
-        rowModel: a.rowModel,
-        columnModel: a.columnModel,
-        columnSnapshot: a.columnSnapshot.value,
-        rowPartition: a.rowPartition.value,
-        setRows: a.setRows,
-        syncBodyRowsInRange: a.syncBodyRowsInRange,
+        rowModel: i.rowModel,
+        columnModel: i.columnModel,
+        columnSnapshot: i.columnSnapshot.value,
+        rowPartition: i.rowPartition.value,
+        setRows: i.setRows,
+        syncBodyRowsInRange: i.syncBodyRowsInRange,
         getBodyRowAtIndex: h.getBodyRowAtIndex,
         resolveBodyRowIndexById: h.resolveBodyRowIndexById,
-        virtualWindow: v.value
+        virtualWindow: g.value
       }) ?? []
     );
   }
 });
-function Q(e) {
+function X(e) {
   return Number.isFinite(e) ? Math.max(0, Math.trunc(e)) : null;
 }
-function R(e) {
+function B(e) {
   try {
     return JSON.stringify(e);
   } catch {
     return null;
   }
 }
-function Ue(e) {
+function $e(e) {
   return e ? {
     fields: [...e.fields],
     expandedByDefault: e.expandedByDefault
   } : null;
 }
-function _e(e) {
-  let t = null, r = null, n = !1, f = null, u = null, p = null, a = null, h = null, b = null, M = null;
-  const A = () => {
+function qe(e) {
+  let t = null, r = null, n = !1, c = null, a = null, y = null, i = null, h = null, b = null, A = null;
+  const x = () => {
     t?.(), r?.(), t = null, r = null;
-  }, C = () => {
+  }, P = () => {
     const o = e.gridRef.value?.api.columns;
     if (!o)
       return null;
-    const d = o.getSnapshot(), i = {}, s = {}, S = {};
-    for (const c of d.columns)
-      i[c.key] = c.visible, s[c.key] = c.width, S[c.key] = c.pin;
+    const d = o.getSnapshot(), u = {}, s = {}, R = {};
+    for (const S of d.columns)
+      u[S.key] = S.visible, s[S.key] = S.width, R[S.key] = S.pin;
     return {
       order: [...d.order],
-      visibility: i,
+      visibility: u,
       widths: s,
-      pins: S
+      pins: R
     };
-  }, v = () => {
+  }, g = () => {
     n || (n = !0, queueMicrotask(() => {
       n = !1;
-      const o = C(), d = e.gridRef.value?.api;
+      const o = P(), d = e.gridRef.value?.api;
       if (o) {
-        const i = R(o);
-        b = i, i !== p && (p = i, e.emit.columnState(o), e.emit.columnOrder(o.order), e.emit.hiddenColumnKeys(
+        const u = B(o);
+        b = u, u !== y && (y = u, e.emit.columnState(o), e.emit.columnOrder(o.order), e.emit.hiddenColumnKeys(
           Object.entries(o.visibility).filter(([, s]) => !s).map(([s]) => s)
         ), e.emit.columnWidths(o.widths), e.emit.columnPins(o.pins));
       }
       if (d) {
-        const i = Ue(d.rows.getSnapshot().groupBy), s = R(i);
-        s !== h && (h = s, e.emit.groupBy(i));
-        const S = d.state.get(), c = R(S);
-        M = c, c !== a && (a = c, e.emit.state(S));
+        const u = $e(d.rows.getSnapshot().groupBy), s = B(u);
+        s !== h && (h = s, e.emit.groupBy(u));
+        const R = d.state.get(), S = B(R);
+        A = S, S !== i && (i = S, e.emit.state(R));
       }
     }));
-  }, y = () => {
+  }, v = () => {
     const o = e.gridRef.value?.api;
     !o || e.props.sortModel === void 0 && e.props.filterModel === void 0 || o.rows.setSortAndFilterModel({
       sortModel: e.props.sortModel ?? [],
       filterModel: e.props.filterModel ?? null
     });
-  }, P = () => {
+  }, G = () => {
     const o = e.gridRef.value?.api;
     !o || e.props.groupBy === void 0 || o.rows.setGroupBy(e.props.groupBy ?? null);
-  }, x = () => {
+  }, D = () => {
     const o = e.gridRef.value?.api;
     !o || e.props.aggregationModel === void 0 || o.rows.setAggregationModel(e.props.aggregationModel ?? null);
-  }, O = () => {
+  }, M = () => {
     const o = e.gridRef.value?.api;
     !o || e.props.pivotModel === void 0 || o.pivot.setModel(e.props.pivotModel ?? null);
-  }, G = () => {
+  }, O = () => {
     const o = e.gridRef.value?.api;
     if (!o || e.props.columnState === void 0 && e.props.columnOrder === void 0 && e.props.hiddenColumnKeys === void 0 && e.props.columnWidths === void 0 && e.props.columnPins === void 0)
       return;
-    const d = R({
+    const d = B({
       columnState: e.props.columnState,
       columnOrder: e.props.columnOrder,
       hiddenColumnKeys: e.props.hiddenColumnKeys,
       columnWidths: e.props.columnWidths,
       columnPins: e.props.columnPins
     });
-    if (d !== f) {
-      if (e.props.columnState && !e.props.columnOrder && !e.props.hiddenColumnKeys && !e.props.columnWidths && !e.props.columnPins && R(e.props.columnState) === b) {
-        f = d;
+    if (d !== c) {
+      if (e.props.columnState && !e.props.columnOrder && !e.props.hiddenColumnKeys && !e.props.columnWidths && !e.props.columnPins && B(e.props.columnState) === b) {
+        c = d;
         return;
       }
       if (e.props.columnState) {
         o.columns.setOrder(e.props.columnState.order);
-        for (const [i, s] of Object.entries(e.props.columnState.visibility))
-          o.columns.setVisibility(i, s);
-        for (const [i, s] of Object.entries(e.props.columnState.widths))
-          o.columns.setWidth(i, Q(s));
-        for (const [i, s] of Object.entries(e.props.columnState.pins))
-          o.columns.setPin(i, s);
+        for (const [u, s] of Object.entries(e.props.columnState.visibility))
+          o.columns.setVisibility(u, s);
+        for (const [u, s] of Object.entries(e.props.columnState.widths))
+          o.columns.setWidth(u, X(s));
+        for (const [u, s] of Object.entries(e.props.columnState.pins))
+          o.columns.setPin(u, s);
       }
       if (e.props.columnOrder && o.columns.setOrder(e.props.columnOrder), e.props.hiddenColumnKeys) {
-        const i = new Set(e.props.hiddenColumnKeys), s = o.columns.getSnapshot();
-        for (const S of s.columns)
-          o.columns.setVisibility(S.key, !i.has(S.key));
+        const u = new Set(e.props.hiddenColumnKeys), s = o.columns.getSnapshot();
+        for (const R of s.columns)
+          o.columns.setVisibility(R.key, !u.has(R.key));
       }
       if (e.props.columnWidths)
-        for (const [i, s] of Object.entries(e.props.columnWidths))
-          o.columns.setWidth(i, Q(s));
+        for (const [u, s] of Object.entries(e.props.columnWidths))
+          o.columns.setWidth(u, X(s));
       if (e.props.columnPins)
-        for (const [i, s] of Object.entries(e.props.columnPins))
-          o.columns.setPin(i, s);
-      f = d;
+        for (const [u, s] of Object.entries(e.props.columnPins))
+          o.columns.setPin(u, s);
+      c = d;
     }
-  }, I = () => {
+  }, L = () => {
     const o = e.gridRef.value?.api;
     if (!o || e.props.state == null)
       return;
-    const d = R(e.props.state);
-    if (d === u)
+    const d = B(e.props.state);
+    if (d === a)
       return;
-    if (d === M) {
-      u = d;
+    if (d === A) {
+      a = d;
       return;
     }
-    const i = o.state.migrate(e.props.state, { strict: e.props.stateOptions?.strict });
-    i && (o.state.set(i, e.props.stateOptions ?? {}), u = d);
-  }, D = () => {
+    const u = o.state.migrate(e.props.state, { strict: e.props.stateOptions?.strict });
+    u && (o.state.set(u, e.props.stateOptions ?? {}), a = d);
+  }, I = () => {
     const o = e.gridRef.value?.api;
     o && (o.view.setRowHeightMode(e.props.rowHeightMode), o.view.setBaseRowHeight(Math.max(24, Math.trunc(e.props.baseRowHeight))));
-  }, L = () => {
+  }, j = () => {
     const o = e.gridRef.value;
-    o && (f = null, u = null, A(), t = o.rowModel.subscribe(() => {
-      v();
+    o && (c = null, a = null, x(), t = o.rowModel.subscribe(() => {
+      g();
     }), r = o.columnModel.subscribe(() => {
-      v();
-    }), I(), G(), y(), P(), x(), O(), D(), v(), e.emit.ready({ api: o.api }));
-  }, V = () => e.gridRef.value?.api.state.get() ?? null, z = (o, d) => e.gridRef.value?.api.state.migrate(o, d) ?? null, H = (o) => {
+      g();
+    }), L(), O(), v(), G(), D(), M(), I(), g(), e.emit.ready({ api: o.api }));
+  }, W = () => e.gridRef.value?.api.state.get() ?? null, V = (o, d) => e.gridRef.value?.api.state.migrate(o, d) ?? null, H = (o) => {
     const d = e.gridRef.value?.api;
     if (!d)
       return !1;
-    f = R({
+    c = B({
       columnState: o,
       columnOrder: null,
       hiddenColumnKeys: null,
       columnWidths: null,
       columnPins: null
     }), d.columns.setOrder(o.order);
-    for (const [i, s] of Object.entries(o.visibility))
-      d.columns.setVisibility(i, s);
-    for (const [i, s] of Object.entries(o.widths))
-      d.columns.setWidth(i, Q(s));
-    for (const [i, s] of Object.entries(o.pins))
-      d.columns.setPin(i, s);
-    return v(), !0;
+    for (const [u, s] of Object.entries(o.visibility))
+      d.columns.setVisibility(u, s);
+    for (const [u, s] of Object.entries(o.widths))
+      d.columns.setWidth(u, X(s));
+    for (const [u, s] of Object.entries(o.pins))
+      d.columns.setPin(u, s);
+    return g(), !0;
   }, E = (o, d) => {
-    const i = e.gridRef.value?.api;
-    if (!i)
+    const u = e.gridRef.value?.api;
+    if (!u)
       return !1;
-    const s = i.state.migrate(o, { strict: d?.strict });
-    return s ? (i.state.set(s, d), u = R(o), v(), !0) : !1;
+    const s = u.state.migrate(o, { strict: d?.strict });
+    return s ? (u.state.set(s, d), a = B(o), g(), !0) : !1;
   }, k = () => e.gridRef.value?.api.pivot.exportLayout() ?? null, N = () => e.gridRef.value?.api.pivot.exportInterop() ?? null, U = (o, d) => {
-    const i = e.gridRef.value?.api;
-    return i ? (i.pivot.importLayout(o, d), v(), !0) : !1;
-  }, j = () => {
-    e.gridRef.value?.api.rows.expandAllGroups(), v();
-  }, K = () => {
-    e.gridRef.value?.api.rows.collapseAllGroups(), v();
+    const u = e.gridRef.value?.api;
+    return u ? (u.pivot.importLayout(o, d), g(), !0) : !1;
+  }, _ = () => {
+    e.gridRef.value?.api.rows.expandAllGroups(), g();
+  }, F = () => {
+    e.gridRef.value?.api.rows.collapseAllGroups(), g();
   };
-  w(
+  p(
     () => e.gridRef.value,
     () => {
-      L();
+      j();
     },
     { immediate: !0 }
-  ), w(
+  ), p(
     () => e.props.columns,
     () => {
-      f = null, u = null, I(), G(), v();
+      c = null, a = null, L(), O(), g();
     },
     { deep: !0 }
-  ), w(
+  ), p(
     () => [e.props.state, e.props.stateOptions],
     () => {
-      I(), G(), y(), P(), x(), O(), D(), v();
+      L(), O(), v(), G(), D(), M(), I(), g();
     },
     { deep: !0 }
-  ), w(
+  ), p(
     () => [
       e.props.columnState,
       e.props.columnOrder,
@@ -555,61 +582,61 @@ function _e(e) {
       e.props.columnPins
     ],
     () => {
-      G(), v();
+      O(), g();
     },
     { deep: !0 }
-  ), w(
+  ), p(
     () => [e.props.sortModel, e.props.filterModel],
     () => {
-      y(), v();
+      v(), g();
     },
     { deep: !0 }
-  ), w(
+  ), p(
     () => e.props.groupBy,
     () => {
-      P(), v();
+      G(), g();
     },
     { deep: !0 }
-  ), w(
+  ), p(
     () => e.props.aggregationModel,
     () => {
-      x(), v();
+      D(), g();
     },
     { deep: !0 }
-  ), w(
+  ), p(
     () => e.props.pivotModel,
     () => {
-      O(), v();
+      M(), g();
     },
     { deep: !0 }
-  ), w(
+  ), p(
     () => [e.props.rowHeightMode, e.props.baseRowHeight],
     () => {
-      D(), v();
+      I(), g();
     }
   );
-  const F = () => {
-    A();
+  const K = () => {
+    x();
   };
-  return Z(() => {
-    F();
+  return ee(() => {
+    K();
   }), {
-    emitSnapshotUpdates: v,
-    handleGridReady: L,
-    dispose: F,
-    getColumnState: C,
-    getState: V,
-    migrateState: z,
+    emitSnapshotUpdates: g,
+    handleGridReady: j,
+    dispose: K,
+    getColumnState: P,
+    getState: W,
+    migrateState: V,
     applyColumnState: H,
     applyState: E,
     exportPivotLayout: k,
     exportPivotInterop: N,
     importPivotLayout: U,
-    expandAllGroups: j,
-    collapseAllGroups: K
+    expandAllGroups: _,
+    collapseAllGroups: F
   };
 }
-function Je() {
+function Qe() {
   return {
     name: "selection",
     getRowSelectionSnapshot: () => null,
@@ -632,15 +659,15 @@ function Je() {
     }
   };
 }
-function W(e, t) {
+function z(e, t) {
   const r = t.map((n) => n?.[e]).filter((n) => typeof n == "function");
   if (r.length !== 0)
     return async (n) => {
-      for (const f of r)
-        await f(n);
+      for (const c of r)
+        await c(n);
     };
 }
-function $e(e) {
+function Xe(e) {
   const {
     userSelectionService: t,
     cellSelectionService: r,
@@ -648,10 +675,10 @@ function $e(e) {
   } = e;
   return {
     name: "selection",
-    init: W("init", [t, r, n]),
-    start: W("start", [t, r, n]),
-    stop: W("stop", [t, r, n]),
-    dispose: W("dispose", [t, r, n]),
+    init: z("init", [t, r, n]),
+    start: z("start", [t, r, n]),
+    stop: z("stop", [t, r, n]),
+    dispose: z("dispose", [t, r, n]),
     getSelectionSnapshot: r.getSelectionSnapshot,
     setSelectionSnapshot: r.setSelectionSnapshot,
     clearSelection: r.clearSelection,
@@ -668,7 +695,7 @@ function $e(e) {
     clearSelectedRows: n.clearSelectedRows
   };
 }
-const qe = ae({
+const Ye = ue({
   name: "DataGrid",
   inheritAttrs: !1,
   props: {
@@ -828,6 +855,18 @@ const qe = ae({
       type: Number,
       default: 31
     },
+    layoutMode: {
+      type: String,
+      default: "fill"
+    },
+    minRows: {
+      type: Number,
+      default: void 0
+    },
+    maxRows: {
+      type: Number,
+      default: void 0
+    },
     rowHover: {
       type: Boolean,
       default: !1
@@ -863,19 +902,19 @@ const qe = ae({
     "update:state",
     "ready"
   ],
-  setup(e, { attrs: t, slots: r, emit: n, expose: f }) {
-    const u = X(null), p = X("table"), a = g(() => Ke(e.renderMode, e.pagination)), h = g(() => Fe(
+  setup(e, { attrs: t, slots: r, emit: n, expose: c }) {
+    const a = Y(null), y = Y("table"), i = f(() => Te(e.renderMode, e.pagination)), h = f(() => ze(
       e.pagination,
-      a.value,
+      i.value,
       e.pageSize,
       e.currentPage
-    )), b = g(() => Se(e.columnMenu)), M = g(() => he(e.cellMenu)), A = g(() => be(e.rowIndexMenu)), C = g(() => He(e.columnLayout)), v = g(() => Ee(e.aggregations)), y = g(() => Te(e.advancedFilter)), P = g(() => je(e.groupBy)), x = g(() => ke(e.virtualization, a.value)), O = g(() => Re({
+    )), b = f(() => Re(e.columnMenu)), A = f(() => be(e.cellMenu)), x = f(() => Me(e.rowIndexMenu)), P = f(() => Ne(e.columnLayout)), g = f(() => Ue(e.aggregations)), v = f(() => We(e.advancedFilter)), G = f(() => Fe(e.groupBy)), D = f(() => _e(e.virtualization, i.value)), M = f(() => Ve(e.layoutMode, e.minRows, e.maxRows)), O = f(() => Oe({
       columns: e.columns,
       clientRowModelOptions: e.clientRowModelOptions,
       computedFields: e.computedFields,
       formulas: e.formulas,
       formulaFunctions: e.formulaFunctions
-    })), G = g(() => Me(e.columns)), I = {
+    })), L = f(() => Be(e.columns)), I = {
       get state() {
         return e.state;
       },
@@ -904,7 +943,7 @@ const qe = ae({
         return e.filterModel;
       },
       get groupBy() {
-        return P.value;
+        return G.value;
       },
       get aggregationModel() {
         return e.aggregationModel;
@@ -921,44 +960,44 @@ const qe = ae({
       get columns() {
         return e.columns;
       }
-    }, D = g(() => e.pivotModel ? "pivot" : O.value && "initialTreeData" in O.value ? "tree" : "base"), L = g(() => u.value?.api.columns.getSnapshot().visibleColumns ?? []), V = g(() => u.value?.api.rows.getCount() ?? 0), z = {
-      mode: g(() => D.value),
-      resolveRuntime: () => u.value,
-      visibleColumns: L,
+    }, j = f(() => e.pivotModel ? "pivot" : O.value && "initialTreeData" in O.value ? "tree" : "base"), W = f(() => a.value?.api.columns.getSnapshot().visibleColumns ?? []), V = f(() => a.value?.api.rows.getCount() ?? 0), H = {
+      mode: f(() => j.value),
+      resolveRuntime: () => a.value,
+      visibleColumns: W,
       totalRows: V,
-      showRowSelection: g(() => e.rowSelection)
+      showRowSelection: f(() => e.rowSelection)
     }, {
-      selectionSnapshot: H,
-      selectionAnchor: E,
-      syncSelectionSnapshotFromRuntime: k,
-      selectionService: N,
-      selectionAggregatesLabel: U
-    } = pe(z), {
-      rowSelectionSnapshot: j,
+      selectionSnapshot: E,
+      selectionAnchor: k,
+      syncSelectionSnapshotFromRuntime: N,
+      selectionService: U,
+      selectionAggregatesLabel: _
+    } = Se(H), {
+      rowSelectionSnapshot: F,
       syncRowSelectionSnapshotFromRuntime: K,
-      reconcileRowSelectionFromRuntime: F,
-      selectionService: o
-    } = we({
-      resolveRuntime: () => u.value
-    }), d = g(() => e.rowSelection ? o : Je()), i = g(() => ({
+      reconcileRowSelectionFromRuntime: o,
+      selectionService: d
+    } = he({
+      resolveRuntime: () => a.value
+    }), u = f(() => e.rowSelection ? d : Qe()), s = f(() => ({
       ...e.services ?? {},
-      selection: $e({
+      selection: Xe({
         userSelectionService: e.services?.selection,
-        cellSelectionService: N,
-        rowSelectionService: d.value
+        cellSelectionService: U,
+        rowSelectionService: u.value
       })
     })), {
-      dataGridInstanceKey: s,
+      dataGridInstanceKey: R,
       resolvedRowModel: S
-    } = Oe({
-      rows: te(e, "rows"),
-      rowModel: te(e, "rowModel"),
+    } = Ae({
+      rows: oe(e, "rows"),
+      rowModel: oe(e, "rowModel"),
       clientRowModelOptions: O,
       onOwnedRowModelRecreated: () => {
-        c.dispose();
+        w.dispose();
       }
-    }), c = _e({
-      gridRef: u,
+    }), w = qe({
+      gridRef: a,
       props: I,
       emit: {
         columnState: (l) => n("update:columnState", l),
@@ -973,127 +1012,131 @@ const qe = ae({
           rowModel: S.value
         })
       }
-    }), se = (l) => {
-      F(), n("cell-change", l), c.emitSnapshotUpdates();
-    }, de = (l) => {
+    }), ce = (l) => {
+      o(), n("cell-change", l), w.emitSnapshotUpdates();
+    }, me = (l) => {
       n("selection-change", l);
     };
-    w(
-      j,
+    p(
+      F,
       (l) => {
         n("row-select", l);
       },
       { deep: !0 }
-    ), w(
+    ), p(
       () => e.rowSelection,
       (l) => {
         if (l) {
           K();
           return;
         }
-        o.clearRowSelection?.();
+        d.clearRowSelection?.();
       },
       { immediate: !0 }
-    ), w(
+    ), p(
       () => e.viewMode,
       (l) => {
-        p.value = l === "gantt" ? "gantt" : "table";
+        y.value = l === "gantt" ? "gantt" : "table";
       },
       { immediate: !0 }
     );
-    const ee = (l) => {
+    const te = (l) => {
       const m = l === "gantt" ? "gantt" : "table";
-      p.value = m, n("update:viewMode", m);
-    }, ce = () => {
-      const l = c.getState();
+      y.value = m, n("update:viewMode", m);
+    }, fe = () => {
+      const l = w.getState();
       return l ? {
         state: l,
-        viewMode: p.value
+        viewMode: y.value
       } : null;
-    }, me = (l, m) => ue(l, c.migrateState, m), fe = (l, m) => c.applyState(l.state, m) ? (l.viewMode && ee(l.viewMode), !0) : !1;
-    return Z(() => {
-      c.dispose();
-    }), f({
-      grid: u,
+    }, ge = (l, m) => de(l, w.migrateState, m), ve = (l, m) => w.applyState(l.state, m) ? (l.viewMode && te(l.viewMode), !0) : !1;
+    return ee(() => {
+      w.dispose();
+    }), c({
+      grid: a,
       rowModel: S,
-      getApi: () => u.value?.api ?? null,
-      getRuntime: () => u.value?.runtime ?? null,
-      getCore: () => u.value?.core ?? null,
-      getColumnState: () => c.getColumnState(),
-      getColumnSnapshot: () => u.value?.api.columns.getSnapshot() ?? null,
-      getSelectionAggregatesLabel: () => U.value,
-      getSelectionSummary: () => u.value?.api.selection.summarize() ?? null,
-      getView: () => p.value,
-      setView: ee,
-      getSavedView: ce,
-      migrateSavedView: me,
-      applySavedView: fe,
-      applyColumnState: c.applyColumnState,
-      getState: c.getState,
-      migrateState: c.migrateState,
-      applyState: c.applyState,
-      exportPivotLayout: c.exportPivotLayout,
-      exportPivotInterop: c.exportPivotInterop,
-      importPivotLayout: c.importPivotLayout,
-      expandAllGroups: c.expandAllGroups,
-      collapseAllGroups: c.collapseAllGroups,
-      insertRowsAt: (l, m) => u.value?.api.rows.insertDataAt(l, m) ?? !1,
-      insertRowBefore: (l, m) => u.value?.api.rows.insertDataBefore(l, m) ?? !1,
-      insertRowAfter: (l, m) => u.value?.api.rows.insertDataAfter(l, m) ?? !1,
-      insertColumnsAt: (l, m) => u.value?.api.columns.insertAt(l, m) ?? !1,
-      insertColumnBefore: (l, m) => u.value?.api.columns.insertBefore(l, m) ?? !1,
-      insertColumnAfter: (l, m) => u.value?.api.columns.insertAfter(l, m) ?? !1
+      getApi: () => a.value?.api ?? null,
+      getRuntime: () => a.value?.runtime ?? null,
+      getCore: () => a.value?.core ?? null,
+      getColumnState: () => w.getColumnState(),
+      getColumnSnapshot: () => a.value?.api.columns.getSnapshot() ?? null,
+      getSelectionAggregatesLabel: () => _.value,
+      getSelectionSummary: () => a.value?.api.selection.summarize() ?? null,
+      getView: () => y.value,
+      setView: te,
+      getSavedView: fe,
+      migrateSavedView: ge,
+      applySavedView: ve,
+      applyColumnState: w.applyColumnState,
+      getState: w.getState,
+      migrateState: w.migrateState,
+      applyState: w.applyState,
+      exportPivotLayout: w.exportPivotLayout,
+      exportPivotInterop: w.exportPivotInterop,
+      importPivotLayout: w.importPivotLayout,
+      expandAllGroups: w.expandAllGroups,
+      collapseAllGroups: w.collapseAllGroups,
+      insertRowsAt: (l, m) => a.value?.api.rows.insertDataAt(l, m) ?? !1,
+      insertRowBefore: (l, m) => a.value?.api.rows.insertDataBefore(l, m) ?? !1,
+      insertRowAfter: (l, m) => a.value?.api.rows.insertDataAfter(l, m) ?? !1,
+      insertColumnsAt: (l, m) => a.value?.api.columns.insertAt(l, m) ?? !1,
+      insertColumnBefore: (l, m) => a.value?.api.columns.insertBefore(l, m) ?? !1,
+      insertColumnAfter: (l, m) => a.value?.api.columns.insertAfter(l, m) ?? !1
     }), () => {
       const l = {
-        mode: D.value,
+        mode: j.value,
         rows: e.rows,
-        runtime: u.value?.runtime ?? null,
-        runtimeRowModel: u.value?.rowModel ?? null,
-        selectionSnapshot: H,
-        selectionAnchor: E,
-        rowSelectionSnapshot: j,
-        syncSelectionSnapshotFromRuntime: k,
+        runtime: a.value?.runtime ?? null,
+        runtimeRowModel: a.value?.rowModel ?? null,
+        selectionSnapshot: E,
+        selectionAnchor: k,
+        rowSelectionSnapshot: F,
+        syncSelectionSnapshotFromRuntime: N,
         syncRowSelectionSnapshotFromRuntime: K,
         sortModel: e.sortModel,
         filterModel: e.filterModel,
-        groupBy: P.value,
+        groupBy: G.value,
         pivotModel: e.pivotModel,
-        renderMode: a.value,
-        virtualization: x.value,
+        renderMode: i.value,
+        virtualization: D.value,
         columnMenu: b.value,
-        cellMenu: M.value,
-        rowIndexMenu: A.value,
-        columnLayout: C.value,
-        aggregations: v.value,
-        advancedFilter: y.value,
+        cellMenu: A.value,
+        rowIndexMenu: x.value,
+        columnLayout: P.value,
+        aggregations: g.value,
+        advancedFilter: v.value,
         rowHeightMode: e.rowHeightMode,
         baseRowHeight: e.baseRowHeight,
+        layoutMode: M.value.layoutMode,
+        minRows: M.value.minRows,
+        maxRows: M.value.maxRows,
         rowHover: e.rowHover,
         stripedRows: e.stripedRows,
         isCellEditable: e.isCellEditable,
         showRowIndex: e.showRowIndex,
         rowSelection: e.rowSelection,
-        viewMode: p.value,
+        viewMode: y.value,
         gantt: e.gantt
       };
-      return Y(
-        Ne,
+      return Z(
+        Je,
         {
           ...t,
-          ref: u,
-          key: s.value,
+          ref: a,
+          key: R.value,
           rows: e.rows,
           rowModel: S.value,
-          columns: G.value,
+          columns: L.value,
           theme: e.theme,
-          renderMode: a.value,
+          layoutMode: M.value.layoutMode,
+          renderMode: i.value,
           pagination: h.value,
           plugins: e.plugins,
-          services: i.value,
+          services: s.value,
           startupOrder: e.startupOrder,
           autoStart: e.autoStart,
-          onCellChange: se,
-          onSelectionChange: de
+          onCellChange: ce,
+          onSelectionChange: me
         },
         r.default ? {
           default: (m) => r.default?.({
@@ -1105,7 +1148,7 @@ const qe = ae({
             }
           })
         } : {
-          default: (m) => Y(Be, {
+          default: (m) => Z(Ce, {
             ...l,
             runtime: m.runtime,
             runtimeRowModel: m.rowModel
@@ -1114,14 +1157,14 @@ const qe = ae({
       );
     };
   }
-}), at = qe;
+}), st = Ye;
 export {
-  at as DataGrid,
-  lt as clearDataGridSavedViewInStorage,
-  qe as default,
-  ue as migrateDataGridSavedView,
-  ze as parseDataGridSavedView,
-  rt as readDataGridSavedViewFromStorage,
-  Ve as serializeDataGridSavedView,
-  nt as writeDataGridSavedViewToStorage
+  st as DataGrid,
+  ut as clearDataGridSavedViewInStorage,
+  Ye as default,
+  de as migrateDataGridSavedView,
+  ke as parseDataGridSavedView,
+  it as readDataGridSavedViewFromStorage,
+  Ee as serializeDataGridSavedView,
+  at as writeDataGridSavedViewToStorage
 };