vue-composable-ui 0.0.1 → 1.0.2

package/LICENSE

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2023 dzapletin
+Copyright (c) 2023-present, dzapletin
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

package/README.md

@@ -1,3 +1,7 @@
 # Vue Composable UI (WIP)
 
-Docs - https://dzapletin.github.io/vue-composable-ui/
+Headless or not, there is just no way to create a one-size-fits-all UI framework. With any framework you always end up one component short, always have to reinvent the wheel at some point and always have to compromise.
+
+The idea of Vue Composable UI is to abstract functionality, not components. This way you do not have to adopt any kind of opinionated UI paradigm and do not have to recreate basic UI functionaly for application-specific components that are not present in frameworks.
+
+[Docs](https://dzapletin.github.io/vue-composable-ui/)

package/dist/combobox.vue_vue_type_script_setup_true_lang-BhVMcx67.js

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

@@ -0,0 +1,42 @@
+import { defineComponent as f, useId as p, useTemplateRef as b, inject as v, createElementBlock as _, openBlock as x, unref as e, renderSlot as E } 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(c) {
+    const t = c, r = t.id ?? p(), i = b("itemEl"), { isSelected: s, isActive: n, activate: d, select: m } = k(
+      i,
+      t.value,
+      t.disabled
+    ), o = v(C);
+    if (!o)
+      throw new Error("Combobox injectable context is not provided");
+    function u() {
+      m(), o.isMultiselectable.value ? o.focus() : o.close({ focus: !0 });
+    }
+    return (a, l) => (x(), _("div", {
+      ref_key: "itemEl",
+      ref: i,
+      id: e(r),
+      onClick: u,
+      onMouseenter: l[0] || (l[0] = (B) => e(d)({ focus: !1 })),
+      "data-active": e(n),
+      "aria-selected": e(s),
+      "aria-disabled": a.disabled || void 0,
+      role: "option"
+    }, [
+      E(a.$slots, "default", {
+        isSelected: e(s),
+        isActive: e(n)
+      })
+    ], 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 _
+};

package/dist/composable-ui.js

@@ -0,0 +1,49 @@
+import { usePopover as e } from "./composable-ui21.js";
+import { useList as p } from "./composable-ui22.js";
+import { useListOption as s } from "./composable-ui17.js";
+import { useFormControl as a } from "./composable-ui2.js";
+import { useHTMLElement as n } from "./composable-ui23.js";
+import { injectCombobox as i, injectMenu as _, injectPopover as u, injectTabs as C } from "./composable-ui24.js";
+import { _ as L } from "./listbox.vue_vue_type_script_setup_true_lang-Bj1ZXiBX.js";
+import { _ as M } from "./listboxOption.vue_vue_type_script_setup_true_lang-B_yRptJm.js";
+import { _ as c } from "./tabContainer.vue_vue_type_script_setup_true_lang-fPpLno2Z.js";
+import { _ as v } from "./tabList.vue_vue_type_script_setup_true_lang-CZyqGCuj.js";
+import { _ as I } from "./tab.vue_vue_type_script_setup_true_lang-Y5OFGqMB.js";
+import { _ as D } from "./tabPanel.vue_vue_type_script_setup_true_lang-CGhP6SHR.js";
+import { _ as F } from "./popover.vue_vue_type_script_setup_true_lang-DhKF7_nY.js";
+import { _ as d } from "./popoverDialog.vue_vue_type_script_setup_true_lang-CDXUO7wZ.js";
+import { _ as k } from "./tooltip.vue_vue_type_script_setup_true_lang-DVKYJyfL.js";
+import { _ as w } from "./menu.vue_vue_type_script_setup_true_lang-Ci7q2rOg.js";
+import { _ as z } from "./menuItems.vue_vue_type_script_setup_true_lang-p9vftREy.js";
+import { _ as B } from "./menuItem.vue_vue_type_script_setup_true_lang-mXtMa4gO.js";
+import { _ as J } from "./combobox.vue_vue_type_script_setup_true_lang-BhVMcx67.js";
+import { _ as N } from "./comboboxInput.vue_vue_type_script_setup_true_lang-DzRfJ5ke.js";
+import { _ as R } from "./comboboxOptions.vue_vue_type_script_setup_true_lang-Doy6MfEQ.js";
+import { _ as U } from "./comboboxOption.vue_vue_type_script_setup_true_lang-OyJxB4Jk.js";
+export {
+  J as Combobox,
+  N as ComboboxInput,
+  U as ComboboxOption,
+  R as ComboboxOptions,
+  L as Listbox,
+  M as ListboxOption,
+  w as Menu,
+  B as MenuItem,
+  z as MenuItems,
+  F as Popover,
+  d as PopoverDialog,
+  I as Tab,
+  c as TabContainer,
+  v as TabList,
+  D as TabPanel,
+  k as Tooltip,
+  i as injectCombobox,
+  _ as injectMenu,
+  u as injectPopover,
+  C as injectTabs,
+  a as useFormControl,
+  n as useHTMLElement,
+  p as useList,
+  s as useListOption,
+  e as usePopover
+};

package/dist/composable-ui10.js

@@ -0,0 +1,4 @@
+import { _ as f } from "./menuItems.vue_vue_type_script_setup_true_lang-p9vftREy.js";
+export {
+  f as default
+};

package/dist/composable-ui11.js

@@ -0,0 +1,4 @@
+import { _ as f } from "./menuItem.vue_vue_type_script_setup_true_lang-mXtMa4gO.js";
+export {
+  f as default
+};

package/dist/composable-ui12.js

@@ -0,0 +1,4 @@
+import { _ as f } from "./menu.vue_vue_type_script_setup_true_lang-Ci7q2rOg.js";
+export {
+  f as default
+};

package/dist/composable-ui13.js

@@ -0,0 +1,4 @@
+import { _ as f } from "./listboxOption.vue_vue_type_script_setup_true_lang-B_yRptJm.js";
+export {
+  f as default
+};

package/dist/composable-ui14.js

@@ -0,0 +1,4 @@
+import { _ as f } from "./listbox.vue_vue_type_script_setup_true_lang-Bj1ZXiBX.js";
+export {
+  f as default
+};

package/dist/composable-ui15.js

@@ -0,0 +1,4 @@
+import { _ as f } from "./comboboxOptions.vue_vue_type_script_setup_true_lang-Doy6MfEQ.js";
+export {
+  f as default
+};

package/dist/composable-ui16.js

@@ -0,0 +1,4 @@
+import { _ as f } from "./comboboxOption.vue_vue_type_script_setup_true_lang-OyJxB4Jk.js";
+export {
+  f as default
+};

package/dist/composable-ui17.js

@@ -0,0 +1,31 @@
+import { inject as l, ref as d, computed as n, onMounted as f, onUnmounted as p, unref as I } from "vue";
+import { injectList as j } from "./composable-ui22.js";
+function S(c, o, i) {
+  const e = l(j);
+  if (!e)
+    throw new Error("List injectable context is not provided");
+  const t = d(-1), r = n(() => e.isSelected(t.value)), u = n(() => e.isActive(t.value));
+  function s() {
+    e.selectItem(t.value);
+  }
+  function a({ focus: m = !0 } = {}) {
+    I(i) || e.activateItem(t.value, { focus: m });
+  }
+  function v() {
+    e.deactivateItem();
+  }
+  return f(() => {
+    t.value = e.addItem(c, o, i);
+  }), p(() => {
+    e.removeItem(t.value);
+  }), {
+    isSelected: r,
+    isActive: u,
+    select: s,
+    activate: a,
+    deactivate: v
+  };
+}
+export {
+  S as useListOption
+};

package/dist/composable-ui18.js

@@ -0,0 +1,4 @@
+import { _ as f } from "./comboboxInput.vue_vue_type_script_setup_true_lang-DzRfJ5ke.js";
+export {
+  f as default
+};

package/dist/composable-ui19.js

@@ -0,0 +1,4 @@
+import { _ as f } from "./comboboxHiddenInput.vue_vue_type_script_setup_true_lang-Ba-UPd-M.js";
+export {
+  f as default
+};

package/dist/composable-ui2.js

@@ -0,0 +1,55 @@
+import { ref as t, onMounted as V, onBeforeUnmount as M, readonly as m, unref as g } from "vue";
+import { useHTMLElement as b } from "./composable-ui23.js";
+function k(y, h = [], w = !0) {
+  const a = t(!1), n = t(!0), l = t(), r = t("");
+  let e, u;
+  function s() {
+    e?.focus();
+  }
+  function d() {
+    n.value = e.validity.valid, l.value = e.validity, r.value = e.validationMessage;
+  }
+  function f() {
+    if (!e) throw new Error("Form element is undefined");
+    const o = e.value;
+    for (const p of g(h)) {
+      const c = p(o);
+      if (c !== !0) {
+        e.setCustomValidity(c);
+        break;
+      }
+    }
+  }
+  function v() {
+    if (!e) throw new Error("Form element is undefined");
+    return e.setCustomValidity(""), e.validity.valid && f(), d(), n.value;
+  }
+  function C(o) {
+    d(), g(w) || o.preventDefault();
+  }
+  function E() {
+    v(), a.value = u !== e.value;
+  }
+  let i = new AbortController();
+  return V(() => {
+    if (e = b(y).value, !e) throw new Error("Form element is undefined");
+    f(), u = e.value, e.addEventListener("change", E, {
+      signal: i.signal,
+      passive: !0
+    }), e.addEventListener("invalid", C, {
+      signal: i.signal
+    }), e?.autofocus && s();
+  }), M(() => {
+    i.abort();
+  }), {
+    focus: s,
+    validate: v,
+    isValid: n,
+    validity: m(l),
+    validationMessage: m(r),
+    isChanged: a
+  };
+}
+export {
+  k as useFormControl
+};

package/dist/composable-ui20.js

@@ -0,0 +1,4 @@
+import { _ as f } from "./combobox.vue_vue_type_script_setup_true_lang-BhVMcx67.js";
+export {
+  f as default
+};

package/dist/composable-ui21.js

@@ -0,0 +1,100 @@
+import { ref as _, watch as M, nextTick as k, onMounted as F, onBeforeUnmount as U } from "vue";
+import { useHTMLElement as y } from "./composable-ui23.js";
+function D(z, A, {
+  direction: c = "down",
+  align: p = "left",
+  position: W = "fixed",
+  closeOnOutsideClick: B = !0,
+  closeOnInsideClick: O = !1
+} = {}) {
+  const s = _(!1);
+  function v() {
+    const t = y(z);
+    if (!t.value) throw new Error("Activator element is undefined");
+    return t.value;
+  }
+  function $() {
+    const t = y(A);
+    if (!t.value) throw new Error("Popover element is undefined");
+    return t.value;
+  }
+  function L({ focus: t = !0 } = {}) {
+    s.value = !0, t && k(() => {
+      $().focus();
+    });
+  }
+  function E({ focus: t = !0 } = {}) {
+    s.value = !1, t && v().focus();
+  }
+  function R(t) {
+    s.value ? E(t) : L(t);
+  }
+  function h() {
+    if (!s.value) return;
+    const t = v(), r = $();
+    r.style.position = W;
+    const {
+      top: f,
+      right: l,
+      bottom: w,
+      left: u,
+      width: m,
+      height: H
+    } = t.getBoundingClientRect(), a = r.offsetHeight, d = r.offsetWidth, x = document.documentElement.clientHeight, b = document.documentElement.clientWidth;
+    let i = c;
+    c == "up" ? f - a < 0 && (i = "down") : c == "down" ? w + a > x && (i = "up") : c == "right" ? l + d > b && (i = "left") : c == "left" && u - d < 0 && (i = "right");
+    let o = p;
+    p == "left" ? u + d > b && (o = "right") : p == "right" ? l - d < 0 && (o = "left") : p == "top" ? f + a > x && (o = "bottom") : p == "bottom" && w - a < 0 && (o = "top");
+    const e = {
+      top: "auto",
+      bottom: "auto",
+      left: "auto",
+      right: "auto",
+      width: "auto"
+    }, n = W === "fixed";
+    i == "up" ? e.bottom = `${H + (n ? x - w : 0)}px` : i == "down" ? e.top = `${H + (n ? f : 0)}px` : i == "right" ? e.left = `${m + (n ? u : 0)}px` : i == "left" && (e.right = `${m + (n ? b - l : 0)}px`), ["up", "down"].includes(i) ? o == "right" ? e.right = `${n ? b - l : 0}px` : o == "left" || o == "stretch" ? e.left = `${n ? u : 0}px` : o == "center" && (e.left = `${(n ? u : 0) - (d - m) / 2}px`) : o == "bottom" ? e.bottom = `${n ? x - w : 0}px` : o == "top" ? e.top = `${n ? f : 0}px` : o == "center" && (e.top = `${(n ? f : 0) - (a - H) / 2}px`), ["up", "down"].includes(i) && o === "stretch" && (e.width = m + "px");
+    for (const P in e)
+      r.style[P] = e[P];
+  }
+  M(
+    s,
+    (t) => {
+      t && k(() => {
+        h();
+      });
+    },
+    { flush: "pre" }
+  );
+  function T(t) {
+    const r = t.target;
+    if (!v().contains(r))
+      try {
+        $().contains(r) ? O && E() : B && (s.value = !1);
+      } catch {
+      }
+  }
+  const C = new ResizeObserver(h), g = new AbortController();
+  return F(() => {
+    window.addEventListener("resize", h, {
+      passive: !0,
+      signal: g.signal
+    }), window.addEventListener("scroll", h, {
+      passive: !0,
+      //capture: true,
+      signal: g.signal
+    }), window.addEventListener("click", T, {
+      passive: !0,
+      signal: g.signal
+    }), C.observe(v());
+  }), U(() => {
+    g.abort(), C.disconnect();
+  }), {
+    isOpen: s,
+    open: L,
+    close: E,
+    toggle: R
+  };
+}
+export {
+  D as usePopover
+};