@affino/datagrid-vue-app 0.1.18 → 0.1.20

package/README.md

@@ -640,6 +640,7 @@ Affino DataGrid works well for:
 - `aggregations`
 - `row-hover`
 - `striped-rows`
+- `grid-lines`
 - `row-height-mode`
 - `base-row-height`
 
@@ -773,6 +774,45 @@ Full override:
 />
 ```
 
+### Grid lines
+
+`DataGrid` uses full spreadsheet-style grid lines by default.
+
+Preset form:
+
+```vue
+<DataGrid
+  :rows="rows"
+  :columns="columns"
+  grid-lines="rows"
+/>
+```
+
+Supported presets:
+
+- `all`
+- `rows`
+- `columns`
+- `none`
+
+Object form:
+
+```vue
+<DataGrid
+  :rows="rows"
+  :columns="columns"
+  :grid-lines="{
+    body: 'rows',
+    header: 'columns',
+    pinnedSeparators: true,
+  }"
+/>
+```
+
+`body` controls body row and column dividers, `header` controls header vertical dividers, and `pinnedSeparators` controls the stronger seam between left / center / right panes.
+
+In this monorepo, `/vue/shell/base-grid` exposes the same options as live checkboxes so you can compare the visual modes before wiring them into a product surface.
+
 ### Grouping and aggregation
 
 Simple `group-by` sugar:

package/dist/DataGrid.d.ts

@@ -5,6 +5,8 @@ import { type DataGridAppClientRowModelOptions, type DataGridAppColumnInput } fr
 import { type DataGridThemeProp } from "./theme/dataGridTheme";
 import { type DataGridGroupByProp, type DataGridPaginationProp } from "./config/dataGridPublicProps";
 import { type DataGridAdvancedFilterProp } from "./config/dataGridAdvancedFilter";
+import { type DataGridFindReplaceProp } from "./config/dataGridFindReplace";
+import { type DataGridGridLinesProp } from "./config/dataGridGridLines";
 import { type DataGridLayoutMode } from "./config/dataGridLayout";
 import { type DataGridColumnLayoutProp } from "./config/dataGridColumnLayout";
 import { type DataGridAggregationsProp } from "./config/dataGridAggregations";
@@ -89,6 +91,14 @@ declare const _default: import("vue").DefineComponent<{
         type: PropType<DataGridAdvancedFilterProp | undefined>;
         default: undefined;
     };
+    findReplace: {
+        type: PropType<DataGridFindReplaceProp | undefined>;
+        default: undefined;
+    };
+    gridLines: {
+        type: PropType<DataGridGridLinesProp | undefined>;
+        default: undefined;
+    };
     showRowIndex: {
         type: BooleanConstructor;
         default: boolean;
@@ -312,6 +322,14 @@ declare const _default: import("vue").DefineComponent<{
         type: PropType<DataGridAdvancedFilterProp | undefined>;
         default: undefined;
     };
+    findReplace: {
+        type: PropType<DataGridFindReplaceProp | undefined>;
+        default: undefined;
+    };
+    gridLines: {
+        type: PropType<DataGridGridLinesProp | undefined>;
+        default: undefined;
+    };
     showRowIndex: {
         type: BooleanConstructor;
         default: boolean;
@@ -490,6 +508,8 @@ declare const _default: import("vue").DefineComponent<{
     rowIndexMenu: DataGridRowIndexMenuProp | undefined;
     columnLayout: DataGridColumnLayoutProp | undefined;
     advancedFilter: DataGridAdvancedFilterProp | undefined;
+    findReplace: DataGridFindReplaceProp | undefined;
+    gridLines: DataGridGridLinesProp | undefined;
     minRows: number | undefined;
     maxRows: number | undefined;
     fillHandle: boolean;

package/dist/DataGridTableStage.vue.d.ts

@@ -13,6 +13,10 @@ declare const __VLS_export: import("vue").DefineComponent<{
         type: import("vue").PropType<import("./dataGridTableStage.types.js").DataGridTableStageProps<Record<string, unknown>>["layoutMode"]>;
         required: true;
     };
+    chromeSignature: {
+        type: import("vue").PropType<import("./dataGridTableStage.types.js").DataGridTableStageProps<Record<string, unknown>>["chromeSignature"]>;
+        default: string;
+    };
     layout: {
         type: import("vue").PropType<import("./dataGridTableStage.types.js").DataGridTableStageProps<Record<string, unknown>>["layout"]>;
         required: true;
@@ -74,6 +78,10 @@ declare const __VLS_export: import("vue").DefineComponent<{
         type: import("vue").PropType<import("./dataGridTableStage.types.js").DataGridTableStageProps<Record<string, unknown>>["layoutMode"]>;
         required: true;
     };
+    chromeSignature: {
+        type: import("vue").PropType<import("./dataGridTableStage.types.js").DataGridTableStageProps<Record<string, unknown>>["chromeSignature"]>;
+        default: string;
+    };
     layout: {
         type: import("vue").PropType<import("./dataGridTableStage.types.js").DataGridTableStageProps<Record<string, unknown>>["layout"]>;
         required: true;
@@ -115,6 +123,7 @@ declare const __VLS_export: import("vue").DefineComponent<{
         default: undefined;
     };
 }>>, {
+    chromeSignature: string | undefined;
     onViewportContextMenu: (event: MouseEvent) => void;
     stageContext: import("./dataGridTableStageContext.js").DataGridTableStageContext<Record<string, unknown>>;
 }, {}>;

package/dist/advanced-filter.js

@@ -1,4 +1,4 @@
-import { _ as e } from "./chunks/DataGridAdvancedFilterPopover.vue_vue_type_script_setup_true_lang-x-cfVm5j.js";
+import { _ as e } from "./chunks/DataGridAdvancedFilterPopover.vue_vue_type_script_setup_true_lang-DhdOikY0.js";
 export {
   e as DataGridAdvancedFilterPopover
 };

package/dist/advancedFilterDraftClauses.d.ts

@@ -0,0 +1,6 @@
+import { type DataGridFilterSnapshot } from "@affino/datagrid-vue";
+import type { DataGridAppAdvancedFilterClauseDraft } from "@affino/datagrid-vue/app";
+type DataGridAdvancedExpressionEntry = NonNullable<DataGridFilterSnapshot["advancedExpression"]>;
+export declare function resolveAdvancedFilterDraftClausesFromExpression(expression: DataGridAdvancedExpressionEntry | null | undefined): DataGridAppAdvancedFilterClauseDraft[];
+export declare function resolveAdvancedFilterDraftClausesFromFilterModel(filterModel: DataGridFilterSnapshot | null | undefined): DataGridAppAdvancedFilterClauseDraft[];
+export {};

package/dist/chunks/{DataGridAdvancedFilterPopover-CabJ-Ztk.js → DataGridAdvancedFilterPopover-CRd9hbEZ.js}

@@ -1,4 +1,4 @@
-import { _ as f } from "./DataGridAdvancedFilterPopover.vue_vue_type_script_setup_true_lang-x-cfVm5j.js";
+import { _ as f } from "./DataGridAdvancedFilterPopover.vue_vue_type_script_setup_true_lang-DhdOikY0.js";
 export {
   f as default
 };

package/dist/chunks/{DataGridAdvancedFilterPopover.vue_vue_type_script_setup_true_lang-x-cfVm5j.js → DataGridAdvancedFilterPopover.vue_vue_type_script_setup_true_lang-DhdOikY0.js}

@@ -1,6 +1,7 @@
-import { defineComponent as q, inject as D, ref as k, computed as c, watch as m, nextTick as w, openBlock as d, createElementBlock as i, Fragment as b, createElementVNode as e, mergeProps as A, unref as _, createCommentVNode as P, createTextVNode as L, toDisplayString as y, createBlock as z, Teleport as G, renderList as I, createVNode as h } from "vue";
+import { defineComponent as q, inject as D, ref as k, computed as c, watch as m, nextTick as w, openBlock as d, createElementBlock as i, Fragment as b, createElementVNode as e, mergeProps as A, unref as _, createCommentVNode as I, createTextVNode as L, toDisplayString as y, createBlock as z, Teleport as G, renderList as P, createVNode as h } from "vue";
 import { usePopoverController as J, useFloatingPopover as K } from "@affino/popover-vue";
-import { d as M, r as Z, _ as C } from "./DataGridFilterableCombobox.vue_vue_type_script_setup_true_lang-_1TDQseN.js";
+import { _ as C } from "./DataGridFilterableCombobox.vue_vue_type_script_setup_true_lang-BPU8WkWd.js";
+import { d as M, r as Z } from "./dataGridOverlayThemeVars-vzY74EIz.js";
 const H = ["data-datagrid-advanced-filter-active"], Q = {
   key: 0,
   class: "datagrid-app-toolbar__button-icon datagrid-app-toolbar__button-icon--advanced-filter",
@@ -28,7 +29,7 @@ const H = ["data-datagrid-advanced-filter-active"], Q = {
 }, oe = {
   key: 1,
   class: "datagrid-advanced-filter__applied-empty"
-}, de = { class: "datagrid-advanced-filter__rows" }, ne = { class: "datagrid-advanced-filter__field datagrid-advanced-filter__field--join" }, ie = /* @__PURE__ */ e("span", { class: "datagrid-advanced-filter__label" }, "Join", -1), re = { class: "datagrid-advanced-filter__field" }, se = /* @__PURE__ */ e("span", { class: "datagrid-advanced-filter__label" }, "Column", -1), ce = { class: "datagrid-advanced-filter__field" }, ue = /* @__PURE__ */ e("span", { class: "datagrid-advanced-filter__label" }, "Operator", -1), pe = { class: "datagrid-advanced-filter__field datagrid-advanced-filter__field--value" }, ve = /* @__PURE__ */ e("span", { class: "datagrid-advanced-filter__label" }, "Value", -1), _e = ["value", "onInput"], fe = { class: "datagrid-advanced-filter__row-actions" }, ge = ["onClick"], me = { class: "datagrid-advanced-filter__footer" }, be = { class: "datagrid-advanced-filter__footer-actions" }, Oe = /* @__PURE__ */ q({
+}, de = { class: "datagrid-advanced-filter__rows" }, ne = { class: "datagrid-advanced-filter__field datagrid-advanced-filter__field--join" }, ie = /* @__PURE__ */ e("span", { class: "datagrid-advanced-filter__label" }, "Join", -1), re = { class: "datagrid-advanced-filter__field" }, se = /* @__PURE__ */ e("span", { class: "datagrid-advanced-filter__label" }, "Column", -1), ce = { class: "datagrid-advanced-filter__field" }, ue = /* @__PURE__ */ e("span", { class: "datagrid-advanced-filter__label" }, "Operator", -1), pe = { class: "datagrid-advanced-filter__field datagrid-advanced-filter__field--value" }, ve = /* @__PURE__ */ e("span", { class: "datagrid-advanced-filter__label" }, "Value", -1), _e = ["value", "onInput"], fe = { class: "datagrid-advanced-filter__row-actions" }, ge = ["onClick"], me = { class: "datagrid-advanced-filter__footer" }, be = { class: "datagrid-advanced-filter__footer-actions" }, ke = /* @__PURE__ */ q({
   __name: "DataGridAdvancedFilterPopover",
   props: {
     isOpen: { type: Boolean },
@@ -47,6 +48,7 @@ const H = ["data-datagrid-advanced-filter-active"], Q = {
       { value: "or", label: "OR" }
     ]), N = Object.freeze([
       { value: "contains", label: "Contains" },
+      { value: "in", label: "In" },
       { value: "equals", label: "Equals" },
       { value: "not-equals", label: "Not equals" },
       { value: "starts-with", label: "Starts with" },
@@ -115,7 +117,7 @@ const H = ["data-datagrid-advanced-filter-active"], Q = {
         "data-datagrid-advanced-filter-active": t.showActiveIcon ? "true" : "false",
         style: f.value
       }, R.value), [
-        t.showActiveIcon ? (d(), i("span", Q, W)) : P("", !0),
+        t.showActiveIcon ? (d(), i("span", Q, W)) : I("", !0),
         L(" " + y(t.buttonLabel), 1)
       ], 16, H),
       (d(), z(G, { to: $.value }, [
@@ -146,14 +148,14 @@ const H = ["data-datagrid-advanced-filter-active"], Q = {
               }, " Reset all filters ", 8, te)
             ]),
             t.appliedFilterSummaryItems.length > 0 ? (d(), i("div", le, [
-              (d(!0), i(b, null, I(t.appliedFilterSummaryItems, (a, v) => (d(), i("span", {
+              (d(!0), i(b, null, P(t.appliedFilterSummaryItems, (a, v) => (d(), i("span", {
                 key: `applied-filter-${v}`,
                 class: "datagrid-advanced-filter__applied-chip"
               }, y(a), 1))), 128))
             ])) : (d(), i("div", oe, " No filters applied "))
           ]),
           e("div", de, [
-            (d(!0), i(b, null, I(t.clauses, (a, v) => (d(), i("div", {
+            (d(!0), i(b, null, P(t.clauses, (a, v) => (d(), i("div", {
               key: a.id,
               class: "datagrid-advanced-filter__row"
             }, [
@@ -236,11 +238,11 @@ const H = ["data-datagrid-advanced-filter-active"], Q = {
               }, " Apply ")
             ])
           ])
-        ], 16)) : P("", !0)
+        ], 16)) : I("", !0)
       ], 8, ["to"]))
     ], 64));
   }
 });
 export {
-  Oe as _
+  ke as _
 };

package/dist/chunks/{DataGridAggregationsPopover-DfQ3-UV4.js → DataGridAggregationsPopover-Bu7nZX7u.js}

@@ -1,6 +1,7 @@
 import { defineComponent as V, inject as E, ref as b, computed as d, watch as _, nextTick as m, openBlock as l, createElementBlock as i, Fragment as y, createElementVNode as e, mergeProps as h, unref as f, toDisplayString as k, createBlock as G, Teleport as D, createVNode as C, renderList as I, createCommentVNode as L } from "vue";
 import { usePopoverController as j, useFloatingPopover as z } from "@affino/popover-vue";
-import { d as q, r as K, _ as O } from "./DataGridFilterableCombobox.vue_vue_type_script_setup_true_lang-_1TDQseN.js";
+import { _ as O } from "./DataGridFilterableCombobox.vue_vue_type_script_setup_true_lang-BPU8WkWd.js";
+import { d as q, r as K } from "./dataGridOverlayThemeVars-vzY74EIz.js";
 const U = ["disabled", "title"], H = { class: "datagrid-aggregations__header" }, J = /* @__PURE__ */ e("div", null, [
   /* @__PURE__ */ e("div", { class: "datagrid-aggregations__eyebrow" }, "Aggregations"),
   /* @__PURE__ */ e("h3", { class: "datagrid-aggregations__title" }, "Group aggregate model")
@@ -10,7 +11,7 @@ const U = ["disabled", "title"], H = { class: "datagrid-aggregations__header" },
 }, X = { class: "datagrid-aggregations__toggle" }, Y = ["checked", "onChange"], Z = { class: "datagrid-aggregations__row-label" }, x = {
   key: 1,
   class: "datagrid-aggregations__empty"
-}, ee = { class: "datagrid-aggregations__footer" }, te = { class: "datagrid-aggregations__footer-actions" }, ne = /* @__PURE__ */ V({
+}, ee = { class: "datagrid-aggregations__footer" }, te = { class: "datagrid-aggregations__footer-actions" }, re = /* @__PURE__ */ V({
   __name: "DataGridAggregationsPopover",
   props: {
     isOpen: { type: Boolean },
@@ -84,7 +85,8 @@ const U = ["disabled", "title"], H = { class: "datagrid-aggregations__header" },
       e("button", h({
         ref: f(r).triggerRef,
         type: "button",
-        class: ["datagrid-app-toolbar__button", { "datagrid-app-toolbar__button--active": t.active }]
+        class: ["datagrid-app-toolbar__button", { "datagrid-app-toolbar__button--active": t.active }],
+        "data-datagrid-toolbar-action": "aggregations"
       }, A.value, {
         style: c.value,
         disabled: t.disabled,
@@ -169,5 +171,5 @@ const U = ["disabled", "title"], H = { class: "datagrid-aggregations__header" },
   }
 });
 export {
-  ne as default
+  re as default
 };

package/dist/chunks/DataGridFilterableCombobox.vue_vue_type_script_setup_true_lang-BPU8WkWd.js

@@ -0,0 +1,373 @@
+import { defineComponent as ge, inject as we, ref as c, useAttrs as Ee, computed as d, watch as S, nextTick as p, onMounted as Ie, onBeforeUnmount as Oe, openBlock as m, createElementBlock as h, createElementVNode as ne, mergeProps as Ce, withModifiers as M, createBlock as ke, Teleport as Le, normalizeStyle as Ae, normalizeClass as oe, Fragment as le, renderList as Re, toDisplayString as Fe, createCommentVNode as K } from "vue";
+import { d as Se, r as Me } from "./dataGridOverlayThemeVars-vzY74EIz.js";
+function Be(n = {}) {
+  return {
+    open: n.open ?? !1,
+    filter: n.filter ?? "",
+    activeIndex: n.activeIndex ?? -1
+  };
+}
+function O(n, o) {
+  return n.open === o ? n : {
+    ...n,
+    open: o
+  };
+}
+function U(n, o) {
+  return n.filter === o ? n : {
+    ...n,
+    filter: o
+  };
+}
+function C(n, o, t) {
+  const r = De(o, t);
+  return r === n.activeIndex ? n : {
+    ...n,
+    activeIndex: r
+  };
+}
+function ae(n, o, t, r = !0) {
+  if (t <= 0 || o === 0)
+    return n;
+  if (n.activeIndex < 0)
+    return C(n, o > 0 ? 0 : t - 1, t);
+  const u = n.activeIndex + Math.trunc(o);
+  return r ? C(n, Te(u, t), t) : C(n, u, t);
+}
+function De(n, o) {
+  if (o <= 0)
+    return -1;
+  if (!Number.isFinite(n))
+    return 0;
+  const t = Math.trunc(n);
+  return t < 0 ? 0 : t >= o ? o - 1 : t;
+}
+function Te(n, o) {
+  return (n % o + o) % o;
+}
+const Ve = 0, Pe = 1, Ne = 2, $e = 3, Ge = 4, He = 5, We = 6, Ke = 7, re = 100;
+function Ue(n, o) {
+  const t = X(o);
+  if (t.length === 0)
+    return [...n];
+  const r = n.map((u, v) => ({
+    option: u,
+    score: Xe(u, t),
+    originalIndex: v
+  })).filter((u) => u.score < re);
+  return r.sort((u, v) => {
+    if (u.score !== v.score)
+      return u.score - v.score;
+    const w = u.option.label.length, s = v.option.label.length;
+    return w !== s ? w - s : u.originalIndex - v.originalIndex;
+  }), r.map((u) => u.option);
+}
+function Xe(n, o) {
+  const t = X(n.label), r = X(n.value);
+  return t === o ? Ve : r === o ? Pe : t.startsWith(o) ? Ne : r.startsWith(o) ? $e : ie(t, o) ? Ge : ie(r, o) ? He : t.includes(o) ? We : r.includes(o) ? Ke : re;
+}
+function ie(n, o) {
+  return n.length === 0 || o.length === 0 ? !1 : n.split(/[^a-z0-9]+/i).some((t) => t.length > 0 && t.startsWith(o));
+}
+function X(n) {
+  return n.trim().toLocaleLowerCase();
+}
+const ze = ["value", "placeholder", "disabled", "aria-expanded", "aria-activedescendant"], qe = ["data-affino-popover-sticky"], je = {
+  key: 0,
+  class: "datagrid-cell-combobox__empty"
+}, Je = ["id", "aria-selected", "data-option-index", "onMousemove", "onClick"], Ye = { class: "datagrid-cell-combobox__option-label" }, Ze = {
+  key: 0,
+  class: "datagrid-cell-combobox__option-state",
+  "aria-hidden": "true"
+}, Qe = {
+  key: 0,
+  class: "datagrid-cell-combobox__empty"
+}, et = {
+  inheritAttrs: !1
+}, rt = /* @__PURE__ */ ge({
+  ...et,
+  __name: "DataGridFilterableCombobox",
+  props: {
+    value: {},
+    options: { default: () => [] },
+    loadOptions: {},
+    placeholder: { default: "Type to filter" },
+    disabled: { type: Boolean, default: !1 },
+    openOnMount: { type: Boolean, default: !0 },
+    initialFilter: { default: "" },
+    openOnFocus: { type: Boolean, default: !0 },
+    inlinePanel: { type: Boolean, default: !1 },
+    stickyPopoverId: {}
+  },
+  emits: ["commit", "cancel", "optionsResolved"],
+  setup(n, { emit: o }) {
+    const t = n, r = o, u = we(Se, c(null)), v = Ee(), w = c(null), s = c(null), E = c(null), z = c({}), B = c({}), k = c("below"), L = c(""), D = c(!1), T = c([]), l = c(Be({ open: !1 })), V = `datagrid-filterable-combobox-${Math.random().toString(36).slice(2, 10)}`;
+    let A = 0;
+    const ue = d(() => {
+      const {
+        class: e,
+        style: a,
+        type: i,
+        value: f,
+        placeholder: y,
+        disabled: ee,
+        onInput: te,
+        onFocus: tt,
+        onBlur: nt,
+        onKeydown: ot,
+        onClick: lt,
+        ...ye
+      } = v;
+      return ye;
+    }), se = d(() => [
+      "cell-editor-control",
+      "datagrid-cell-combobox__input",
+      v.class
+    ]), ce = d(() => v.style), de = d(() => {
+      if (!t.inlinePanel)
+        return "body";
+    }), P = d(() => q.value.find((e) => e.value === t.value) ?? null), q = d(() => t.loadOptions && T.value.length > 0 ? T.value : t.options), b = d(() => Ue(q.value, l.value.filter)), _ = d(() => l.value.activeIndex), j = d(() => _.value >= 0 ? b.value[_.value] ?? null : null), ve = d(() => _.value >= 0 ? J(_.value) : void 0), N = d(() => l.value.open);
+    function J(e) {
+      return `${V}-option-${e}`;
+    }
+    function fe() {
+      z.value = Me(u.value);
+    }
+    function $() {
+      L.value = P.value?.label ?? t.value;
+    }
+    function Y() {
+      L.value = t.initialFilter;
+    }
+    function I(e) {
+      const a = b.value;
+      if (a.length === 0) {
+        l.value = {
+          ...l.value,
+          activeIndex: -1
+        };
+        return;
+      }
+      let i = 0;
+      if (e && P.value) {
+        const f = a.findIndex((y) => y.value === P.value?.value);
+        f >= 0 && (i = f);
+      }
+      l.value = C(l.value, i, a.length);
+    }
+    async function G(e) {
+      if (!t.loadOptions)
+        return;
+      const a = A + 1;
+      A = a, D.value = !0;
+      try {
+        const i = await t.loadOptions(e);
+        if (a !== A)
+          return;
+        T.value = i, r("optionsResolved", i), I(!0), p(() => {
+          g(), x();
+        });
+      } finally {
+        a === A && (D.value = !1);
+      }
+    }
+    function g() {
+      if (t.inlinePanel) {
+        k.value = "below", B.value = {
+          position: "absolute",
+          top: "calc(100% - 1px)",
+          left: "0px",
+          width: "100%",
+          maxHeight: "260px",
+          zIndex: "4"
+        };
+        return;
+      }
+      if (typeof window > "u" || !s.value)
+        return;
+      const e = s.value.getBoundingClientRect(), a = Math.max(e.width, 160), i = Math.min(E.value?.offsetHeight ?? 220, 260), y = window.innerHeight - e.bottom - 8 < Math.min(180, i) && e.top > i + 12;
+      k.value = y ? "above" : "below";
+      const ee = y ? Math.max(8, e.top - i + 1) : Math.min(window.innerHeight - i - 8, e.bottom - 1), te = Math.min(
+        Math.max(8, e.left),
+        Math.max(8, window.innerWidth - a - 8)
+      );
+      B.value = {
+        position: "fixed",
+        top: `${ee}px`,
+        left: `${te}px`,
+        width: `${a}px`,
+        maxHeight: "260px",
+        zIndex: "240"
+      };
+    }
+    function x() {
+      if (!E.value || _.value < 0)
+        return;
+      E.value.querySelector(`[data-option-index="${_.value}"]`)?.scrollIntoView({ block: "nearest" });
+    }
+    function H() {
+      t.disabled || (l.value = O(l.value, !0), I(!0), p(() => {
+        if (g(), x(), s.value?.focus({ preventScroll: !0 }), !!s.value) {
+          if (l.value.filter.length > 0) {
+            const e = s.value.value.length;
+            s.value.setSelectionRange(e, e);
+            return;
+          }
+          s.value.select();
+        }
+      }), t.loadOptions && G(l.value.filter));
+    }
+    function R() {
+      l.value = O(l.value, !1);
+    }
+    function pe(e) {
+      return e instanceof Node && (w.value?.contains(e) === !0 || E.value?.contains(e) === !0);
+    }
+    function Z(e = "stay") {
+      R(), r("commit", t.value, e);
+    }
+    function Q(e, a = "stay") {
+      R(), r("commit", e, a);
+    }
+    function W(e) {
+      l.value = C(l.value, e, b.value.length), p(x);
+    }
+    function me() {
+      t.openOnFocus && H();
+    }
+    function be() {
+      H();
+    }
+    function he(e) {
+      if (t.disabled)
+        return;
+      const a = e.target.value;
+      L.value = a, l.value = U(l.value, a), l.value = O(l.value, !0), I(!1), p(() => {
+        g(), x();
+      }), t.loadOptions && G(a);
+    }
+    function _e() {
+      p(() => {
+        pe(document.activeElement) || Z("stay");
+      });
+    }
+    function xe(e) {
+      if (!t.disabled) {
+        if (e.key === "ArrowDown") {
+          e.preventDefault(), l.value = O(l.value, !0), l.value = ae(l.value, 1, b.value.length, !0), p(x);
+          return;
+        }
+        if (e.key === "ArrowUp") {
+          e.preventDefault(), l.value = O(l.value, !0), l.value = ae(l.value, -1, b.value.length, !0), p(x);
+          return;
+        }
+        if (e.key === "Home") {
+          e.preventDefault(), W(0);
+          return;
+        }
+        if (e.key === "End") {
+          e.preventDefault(), W(Math.max(0, b.value.length - 1));
+          return;
+        }
+        if (e.key === "Enter" || e.key === "Tab") {
+          if (e.preventDefault(), j.value) {
+            Q(j.value.value, e.shiftKey ? "previous" : "next");
+            return;
+          }
+          Z(e.shiftKey ? "previous" : "next");
+          return;
+        }
+        e.key === "Escape" && (e.preventDefault(), R(), r("cancel"));
+      }
+    }
+    function F() {
+      N.value && g();
+    }
+    return S(() => t.options, () => {
+      t.loadOptions || (I(!0), p(g));
+    }, { immediate: !0 }), S(() => t.value, () => {
+      $();
+    }), S(() => t.initialFilter, (e) => {
+      document.activeElement !== s.value && (l.value = U(l.value, e), e.length > 0 ? (Y(), G(e)) : $(), I(!0), p(() => {
+        g(), x();
+      }));
+    }), S(() => t.disabled, (e) => {
+      e && R();
+    }), Ie(() => {
+      fe(), t.initialFilter.length > 0 ? (l.value = U(l.value, t.initialFilter), Y()) : $(), t.openOnMount && H(), typeof window < "u" && (window.addEventListener("resize", F), window.addEventListener("scroll", F, !0));
+    }), Oe(() => {
+      typeof window < "u" && (window.removeEventListener("resize", F), window.removeEventListener("scroll", F, !0));
+    }), (e, a) => (m(), h("div", {
+      ref_key: "rootEl",
+      ref: w,
+      class: "datagrid-cell-combobox"
+    }, [
+      ne("input", Ce({
+        ref_key: "inputEl",
+        ref: s
+      }, ue.value, {
+        class: se.value,
+        style: ce.value,
+        type: "text",
+        role: "combobox",
+        value: L.value,
+        placeholder: e.placeholder,
+        disabled: e.disabled,
+        "aria-expanded": N.value ? "true" : "false",
+        "aria-controls": V,
+        "aria-autocomplete": "list",
+        "aria-activedescendant": ve.value,
+        onFocus: me,
+        onClick: M(be, ["stop"]),
+        onInput: he,
+        onKeydown: M(xe, ["stop"]),
+        onBlur: _e
+      }), null, 16, ze),
+      (m(), ke(Le, {
+        to: de.value,
+        disabled: e.inlinePanel
+      }, [
+        N.value ? (m(), h("div", {
+          key: 0,
+          id: V,
+          ref_key: "panelEl",
+          ref: E,
+          class: oe(["datagrid-cell-combobox__panel", {
+            "datagrid-cell-combobox__panel--inline": e.inlinePanel,
+            "datagrid-cell-combobox__panel--attached-below": k.value === "below",
+            "datagrid-cell-combobox__panel--attached-above": k.value === "above"
+          }]),
+          "data-affino-popover-sticky": e.stickyPopoverId || void 0,
+          style: Ae([z.value, B.value]),
+          role: "listbox",
+          onMousedown: a[0] || (a[0] = M(() => {
+          }, ["prevent"]))
+        }, [
+          D.value ? (m(), h("div", je, "Loading options...")) : (m(), h(le, { key: 1 }, [
+            (m(!0), h(le, null, Re(b.value, (i, f) => (m(), h("button", {
+              id: J(f),
+              key: `${i.value}-${f}`,
+              type: "button",
+              class: oe(["datagrid-cell-combobox__option", {
+                "datagrid-cell-combobox__option--active": f === _.value,
+                "datagrid-cell-combobox__option--selected": i.value === e.value
+              }]),
+              role: "option",
+              "aria-selected": i.value === e.value ? "true" : "false",
+              "data-option-index": f,
+              onMousemove: (y) => W(f),
+              onClick: M((y) => Q(i.value), ["stop"])
+            }, [
+              ne("span", Ye, Fe(i.label), 1),
+              i.value === e.value ? (m(), h("span", Ze)) : K("", !0)
+            ], 42, Je))), 128)),
+            b.value.length === 0 ? (m(), h("div", Qe, " No matching options ")) : K("", !0)
+          ], 64))
+        ], 46, qe)) : K("", !0)
+      ], 8, ["to", "disabled"]))
+    ], 512));
+  }
+});
+export {
+  rt as _
+};

package/dist/chunks/DataGridFindReplacePopover-DCuFy-bD.js

@@ -0,0 +1,4 @@
+import { _ as f } from "./DataGridFindReplacePopover.vue_vue_type_script_setup_true_lang-DfHFHhUf.js";
+export {
+  f as default
+};