@affino/datagrid-vue-app 0.1.61 → 0.1.63

package/dist/advanced-filter.js

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

package/dist/aggregations.js

@@ -1,4 +1,4 @@
-import { _ as a } from "./chunks/DataGridAggregationsPopover.vue_vue_type_script_setup_true_lang-t6v8MqIT.js";
+import { _ as a } from "./chunks/DataGridAggregationsPopover.vue_vue_type_script_setup_true_lang-VYIMuuIQ.js";
 export {
   a as DataGridAggregationsPopover
 };

package/dist/chunks/{DataGridAdvancedFilterPopover-C_MjEKFo.js → DataGridAdvancedFilterPopover-BmEL_QzN.js}

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

package/dist/chunks/{DataGridAdvancedFilterPopover.vue_vue_type_script_setup_true_lang-DxZakgyj.js → DataGridAdvancedFilterPopover.vue_vue_type_script_setup_true_lang-BkrpyjJb.js}

@@ -1,6 +1,6 @@
 import { defineComponent as N, inject as z, ref as A, computed as c, watch as w, nextTick as O, openBlock as i, createElementBlock as u, Fragment as C, createElementVNode as a, mergeProps as F, unref as _, createCommentVNode as P, createTextVNode as K, toDisplayString as l, createBlock as M, Teleport as U, renderList as T, createVNode as k } from "vue";
 import { usePopoverController as Z, useFloatingPopover as H } from "@affino/popover-vue";
-import { _ as L } from "./DataGridFilterableCombobox.vue_vue_type_script_setup_true_lang-xry4J3Lx.js";
+import { _ as L } from "./DataGridFilterableCombobox.vue_vue_type_script_setup_true_lang-Dt_KqrSU.js";
 import { d as J, r as Q } from "./dataGridOverlayThemeVars-vzY74EIz.js";
 import { D } from "./dataGridAdvancedFilter-xnME5bRa.js";
 import { u as W } from "./useDataGridDraggableOverlaySurface-BgkSR_nl.js";

package/dist/chunks/{DataGridAggregationsPopover-C8kdwv0O.js → DataGridAggregationsPopover-D-HP10PE.js}

@@ -1,4 +1,4 @@
-import { _ as f } from "./DataGridAggregationsPopover.vue_vue_type_script_setup_true_lang-t6v8MqIT.js";
+import { _ as f } from "./DataGridAggregationsPopover.vue_vue_type_script_setup_true_lang-VYIMuuIQ.js";
 export {
   f as default
 };

package/dist/chunks/{DataGridAggregationsPopover.vue_vue_type_script_setup_true_lang-t6v8MqIT.js → DataGridAggregationsPopover.vue_vue_type_script_setup_true_lang-VYIMuuIQ.js}

@@ -1,6 +1,6 @@
 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 k, unref as f, toDisplayString as h, 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 { _ as O } from "./DataGridFilterableCombobox.vue_vue_type_script_setup_true_lang-xry4J3Lx.js";
+import { _ as O } from "./DataGridFilterableCombobox.vue_vue_type_script_setup_true_lang-Dt_KqrSU.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"),

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

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