@affino/datagrid-vue-app 0.1.63 → 0.4.0

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

@@ -1,405 +0,0 @@
-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 _
-};