@affino/datagrid-vue-app 0.1.18 → 0.1.20

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

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