@affino/datagrid-vue-app 0.1.62 → 0.1.64

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

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