@affino/datagrid-vue-app 0.1.2 → 0.1.3

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

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