vue-composable-ui 1.0.1 → 1.0.3

package/dist/combobox.vue_vue_type_script_setup_true_lang-DpM6lN_3.js

@@ -0,0 +1,140 @@
+import { defineComponent as B, mergeModels as H, computed as p, useModel as T, useId as j, watch as N, provide as P, createElementBlock as v, openBlock as r, Fragment as b, createCommentVNode as U, renderSlot as K, createBlock as A, unref as k, renderList as _, nextTick as h } from "vue";
+import { useHTMLElement as q } from "./composable-ui23.js";
+import { usePopover as z } from "./composable-ui21.js";
+import { useList as G } from "./composable-ui22.js";
+import { _ as $ } from "./comboboxHiddenInput.vue_vue_type_script_setup_true_lang-Ba-UPd-M.js";
+import { injectCombobox as J } from "./composable-ui24.js";
+const ae = /* @__PURE__ */ B({
+  inheritAttrs: !1,
+  __name: "combobox",
+  props: /* @__PURE__ */ H({
+    displayValue: { type: Function, default: (e) => Array.isArray(e) ? e.map((t) => t.toString()).join(", ") : e.toString() },
+    id: {},
+    activatorId: {},
+    name: {},
+    formValue: { type: Function, default: (e) => e }
+  }, {
+    modelValue: {},
+    modelModifiers: {}
+  }),
+  emits: ["update:modelValue"],
+  setup(e) {
+    const t = e, I = p(() => u.value ? l.value.map((a) => t.formValue(a)) : t.formValue(l.value)), l = T(e, "modelValue"), i = t.id ?? j(), y = t.activatorId ?? i, n = `${i}-popover`, { isOpen: o, toggle: E, open: s, close: c } = z(
+      `#${y}`,
+      `#${n}`,
+      {
+        direction: "down",
+        align: "stretch",
+        position: "fixed",
+        closeOnOutsideClick: !0,
+        closeOnInsideClick: !1
+      }
+    ), {
+      items: w,
+      activeItem: f,
+      isMultiselectable: u,
+      selectActiveItem: m,
+      activateSelectedItem: S,
+      activateFirstItem: d,
+      activateLastItem: V,
+      activateNextItem: C,
+      activatePrevItem: M
+    } = G(l), g = p(() => t.displayValue(l.value));
+    N(w, () => {
+      !f.value && w.value.length && (S({ focus: !1 }), f.value || d({ focus: !1 }));
+    });
+    function O() {
+      q(`#${y}`).value?.focus();
+    }
+    function D(a) {
+      if (o.value)
+        switch (a.code) {
+          case "Space":
+            m(), u.value || c({ focus: !0 });
+            break;
+          case "Enter":
+            m(), c({ focus: !0 });
+            break;
+          case "Tab":
+            m(), c({ focus: !0 });
+            return;
+          case "ArrowUp":
+            M({ focus: !1, loop: !1 });
+            break;
+          case "ArrowDown":
+            C({ focus: !1, loop: !1 });
+            break;
+          case "Home":
+            d({ focus: !1 });
+            break;
+          case "End":
+            V({ focus: !1 });
+            break;
+          case "Escape":
+            c({ focus: !0 });
+            break;
+          default:
+            return;
+        }
+      else
+        switch (a.code) {
+          case "Space":
+          case "Enter":
+            s({ focus: !1 });
+            break;
+          case "End":
+          case "ArrowUp":
+            s({ focus: !1 }), h(() => V({ focus: !1 }));
+            break;
+          case "Home":
+          case "ArrowDown":
+            s({ focus: !1 }), h(() => d({ focus: !1 }));
+            break;
+          default:
+            return;
+        }
+      a.preventDefault();
+    }
+    const x = p(() => ({
+      onkeydown: D,
+      onclick: () => s({ focus: !1 }),
+      id: i,
+      "aria-controls": o.value ? n : void 0,
+      "aria-expanded": o.value,
+      "aria-activedescendant": f.value?.element.value?.id,
+      "aria-haspopup": "listbox",
+      role: "combobox"
+    }));
+    return P(J, {
+      displayValue: g,
+      popoverId: n,
+      isOpen: o,
+      open: s,
+      close: c,
+      focus: O,
+      isMultiselectable: u,
+      activatorAttrs: x
+    }), (a, Q) => (r(), v(b, null, [
+      e.name ? (r(), v(b, { key: 0 }, [
+        k(u) ? (r(!0), v(b, { key: 0 }, _(I.value, (F, L) => (r(), A($, {
+          name: `${e.name}[${L}]`,
+          value: F
+        }, null, 8, ["name", "value"]))), 256)) : (r(), A($, {
+          key: 1,
+          name: e.name,
+          value: I.value
+        }, null, 8, ["name", "value"]))
+      ], 64)) : U("", !0),
+      K(a.$slots, "default", {
+        popoverId: n,
+        isOpen: k(o),
+        toggle: () => k(E)(),
+        displayValue: g.value,
+        attrs: x.value
+      })
+    ], 64));
+  }
+});
+export {
+  ae as _
+};

package/dist/comboboxHiddenInput.vue_vue_type_script_setup_true_lang-Ba-UPd-M.js

@@ -0,0 +1,29 @@
+import { defineComponent as l, computed as p, createElementBlock as r, openBlock as u, Fragment as m, renderList as i } from "vue";
+const d = ["name", "value"], f = /* @__PURE__ */ l({
+  __name: "comboboxHiddenInput",
+  props: {
+    name: {},
+    value: {}
+  },
+  setup(a) {
+    const e = a, c = p(() => {
+      if (typeof e.value == "object") {
+        const n = {};
+        for (const [o, t] of Object.entries(e.value))
+          n[`${e.name}[${o}]`] = t;
+        return n;
+      } else
+        return {
+          [e.name]: e.value
+        };
+    });
+    return (n, o) => (u(!0), r(m, null, i(c.value, (t, s) => (u(), r("input", {
+      name: s,
+      value: t,
+      type: "hidden"
+    }, null, 8, d))), 256));
+  }
+});
+export {
+  f as _
+};

package/dist/comboboxInput.vue_vue_type_script_setup_true_lang-DzRfJ5ke.js

@@ -0,0 +1,33 @@
+import { defineComponent as i, inject as m, useModel as r, watch as c, computed as p, withDirectives as d, createElementBlock as s, openBlock as f, mergeProps as v, vModelDynamic as b } from "vue";
+import { injectCombobox as x } from "./composable-ui24.js";
+const h = /* @__PURE__ */ i({
+  __name: "comboboxInput",
+  props: {
+    modelValue: {},
+    modelModifiers: {}
+  },
+  emits: ["update:modelValue"],
+  setup(l) {
+    const e = m(x);
+    if (!e)
+      throw new Error("Combobox injectable context is not provided");
+    const o = r(l, "modelValue");
+    function t() {
+      o.value = e.displayValue.value;
+    }
+    c(e.displayValue, t, { immediate: !0 });
+    const u = p(() => ({
+      oninput: () => e.open({ focus: !0 }),
+      onchange: t,
+      ...e.activatorAttrs.value
+    }));
+    return (V, n) => d((f(), s("input", v({
+      "onUpdate:modelValue": n[0] || (n[0] = (a) => o.value = a)
+    }, u.value, { autocomplete: "off" }), null, 16)), [
+      [b, o.value]
+    ]);
+  }
+});
+export {
+  h as _
+};

package/dist/comboboxOption.vue_vue_type_script_setup_true_lang-DPEArk3M.js

@@ -0,0 +1,42 @@
+import { defineComponent as f, useId as b, useTemplateRef as p, inject as v, createElementBlock as x, openBlock as E, unref as e, renderSlot as _ } from "vue";
+import { useListOption as k } from "./composable-ui17.js";
+import { injectCombobox as C } from "./composable-ui24.js";
+const j = ["id", "data-active", "aria-selected", "aria-disabled"], A = /* @__PURE__ */ f({
+  __name: "comboboxOption",
+  props: {
+    id: {},
+    value: {},
+    disabled: { type: Boolean }
+  },
+  setup(i) {
+    const o = i, c = o.id ?? b(), s = p("itemEl"), { isSelected: n, isActive: a, activate: d, select: r } = k(
+      s,
+      o.value,
+      o.disabled
+    ), t = v(C);
+    if (!t)
+      throw new Error("Combobox injectable context is not provided");
+    function m() {
+      r(), t.isMultiselectable.value ? t.focus() : t.close({ focus: !0 });
+    }
+    return (u, l) => (E(), x("div", {
+      ref_key: "itemEl",
+      ref: s,
+      id: e(c),
+      onClick: m,
+      onMouseenter: l[0] || (l[0] = (B) => e(d)({ focus: !1 })),
+      "data-active": e(a),
+      "aria-selected": e(n),
+      "aria-disabled": i.disabled || void 0,
+      role: "option"
+    }, [
+      _(u.$slots, "default", {
+        isSelected: e(n),
+        isActive: e(a)
+      })
+    ], 40, j));
+  }
+});
+export {
+  A as _
+};

package/dist/comboboxOptions.vue_vue_type_script_setup_true_lang-Doy6MfEQ.js

@@ -0,0 +1,20 @@
+import { defineComponent as n, inject as r, createElementBlock as i, createCommentVNode as c, unref as e, openBlock as m, renderSlot as s } from "vue";
+import { injectCombobox as p } from "./composable-ui24.js";
+const d = ["id"], f = /* @__PURE__ */ n({
+  __name: "comboboxOptions",
+  setup(b) {
+    const o = r(p);
+    if (!o)
+      throw new Error("Combobox injectable context is not provided");
+    return (t, l) => e(o).isOpen.value ? (m(), i("div", {
+      key: 0,
+      id: e(o).popoverId,
+      role: "listbox"
+    }, [
+      s(t.$slots, "default")
+    ], 8, d)) : c("", !0);
+  }
+});
+export {
+  f as _
+};