@stachelock/ui 0.6.4 → 0.6.6

package/dist/tabs/TabsInPills.js

@@ -1,4 +1,4 @@
-import { _ as f } from "../TabsInPills.vue_vue_type_script_setup_true_lang-U5CdRL7s.js";
+import { _ as f } from "../TabsInPills.vue_vue_type_script_setup_true_lang-EG0nj4F6.js";
 export {
   f as default
 };

package/dist/tabs/index.js

@@ -1,7 +1,7 @@
-import { _ as a } from "../InlineTabs.vue_vue_type_script_setup_true_lang-B5w4yzcZ.js";
-import { _ as s } from "../TabGroup.vue_vue_type_script_setup_true_lang-BsbiEA4E.js";
-import { _ as n } from "../TabGroupUnderline.vue_vue_type_script_setup_true_lang-CPcp1-Za.js";
-import { _ as f } from "../TabsInPills.vue_vue_type_script_setup_true_lang-U5CdRL7s.js";
+import { _ as a } from "../InlineTabs.vue_vue_type_script_setup_true_lang-slNq2sot.js";
+import { _ as s } from "../TabGroup.vue_vue_type_script_setup_true_lang-pEKm-uUq.js";
+import { _ as n } from "../TabGroupUnderline.vue_vue_type_script_setup_true_lang--IKyRPkX.js";
+import { _ as f } from "../TabsInPills.vue_vue_type_script_setup_true_lang-EG0nj4F6.js";
 export {
   a as InlineTabs,
   s as TabGroup,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stachelock/ui",
-  "version": "0.6.4",
+  "version": "0.6.6",
   "description": "A comprehensive Vue 3 UI component library built with Tailwind CSS",
   "type": "module",
   "main": "./dist/index.js",

package/dist/SelectInput.vue_vue_type_script_setup_true_lang-D4GNv0MY.js

@@ -1,301 +0,0 @@
-import { defineComponent as H, watch as C, onBeforeUnmount as X, ref as S, computed as p, createElementBlock as d, openBlock as i, createVNode as u, unref as r, withCtx as c, createElementVNode as m, createBlock as y, normalizeClass as v, createCommentVNode as h, resolveDynamicComponent as N, toDisplayString as b, Teleport as _, Transition as J, normalizeStyle as Q, withModifiers as P, Fragment as Y, renderList as Z } from "vue";
-import { Listbox as ee, ListboxButton as le, ListboxOptions as se, ListboxOption as te } from "@headlessui/vue";
-import { ChevronUpDownIcon as ae, CheckIcon as oe } from "@heroicons/vue/20/solid";
-import { useField as re } from "vee-validate";
-import ne from "./forms/FormFieldWrapper.js";
-import { g as ie } from "./id-DafBB_QF.js";
-const ue = { class: "sl-w-full" }, de = { class: "sl-relative" }, ce = { class: "sl-flex sl-items-center sl-gap-2" }, me = {
-  key: 1,
-  class: "sl-block sl-truncate sl-text-left"
-}, fe = {
-  key: 2,
-  class: "sl-block sl-truncate sl-text-left sl-text-gray-500 dark:sl-text-slate-300"
-}, pe = { class: "sl-pointer-events-none sl-absolute sl-inset-y-0 sl-right-0 sl-flex sl-items-center sl-pr-2" }, ve = { class: "sl-block sl-truncate sl-font-medium" }, he = { class: "sl-flex sl-items-center sl-gap-2" }, be = {
-  key: 0,
-  class: "sl-absolute sl-inset-y-0 sl-right-0 sl-flex sl-items-center sl-pr-4"
-}, ge = { key: 0 }, V = 224, x = 4, Ce = /* @__PURE__ */ H({
-  __name: "SelectInput",
-  props: {
-    name: {},
-    items: {},
-    label: {},
-    placeholder: {},
-    disabled: { type: Boolean },
-    rules: {},
-    validateOnMount: { type: Boolean },
-    successMessage: {},
-    tertiaryLabel: {},
-    buttonClass: {},
-    multiple: { type: Boolean, default: !1 },
-    showAll: { type: Boolean, default: !1 },
-    itemKey: { default: "id" },
-    itemText: { default: "name" },
-    modelValue: { type: [String, Number, Boolean, null, Object, Array] },
-    boxShadow: { type: Boolean, default: !1 }
-  },
-  emits: ["update:modelValue"],
-  setup(a, { emit: R }) {
-    const K = H({
-      props: {
-        open: { type: Boolean, required: !0 },
-        updateFn: { type: Function, required: !0 }
-      },
-      setup(e) {
-        const l = () => {
-          e.open && e.updateFn();
-        };
-        return C(() => e.open, (o) => {
-          o ? (e.updateFn(), window.addEventListener("scroll", l, !0), window.addEventListener("resize", l)) : (window.removeEventListener("scroll", l, !0), window.removeEventListener("resize", l));
-        }, { immediate: !0 }), X(() => {
-          window.removeEventListener("scroll", l, !0), window.removeEventListener("resize", l);
-        }), () => null;
-      }
-    }), L = S(null), w = S({
-      top: "0px",
-      left: "0px",
-      width: "200px"
-    });
-    function M() {
-      const e = L.value?.$el;
-      if (!e) return;
-      const l = e.getBoundingClientRect(), o = window.innerHeight, n = o - l.bottom - x, f = l.top - x;
-      n < V && f > n ? w.value = {
-        bottom: `${o - l.top + x}px`,
-        left: `${l.left}px`,
-        width: `${l.width}px`,
-        maxHeight: `${Math.min(f, V)}px`
-      } : w.value = {
-        top: `${l.bottom + x}px`,
-        left: `${l.left}px`,
-        width: `${l.width}px`,
-        maxHeight: `${Math.min(n, V)}px`
-      };
-    }
-    const t = a, U = R, F = ie(t.name), { value: O, errorMessage: $, handleChange: D, meta: g, setTouched: W } = re(
-      () => t.name,
-      t.rules,
-      {
-        validateOnMount: t.validateOnMount,
-        initialValue: t.modelValue
-      }
-    ), s = S(
-      t.multiple ? Array.isArray(t.modelValue) ? t.modelValue : [] : t.modelValue
-    );
-    C(
-      () => t.modelValue,
-      (e) => {
-        if (t.multiple) {
-          const l = Array.isArray(e) ? e : [];
-          l !== s.value && (s.value = l, O.value = l);
-        } else
-          e !== s.value && (s.value = e, O.value = e);
-      },
-      { immediate: !0 }
-    ), C(
-      s,
-      (e) => {
-        U("update:modelValue", e);
-      }
-    );
-    const j = p(() => {
-      const e = [
-        "sl-relative",
-        "sl-w-full",
-        "sl-cursor-default",
-        "sl-rounded-md",
-        "sl-bg-white",
-        "dark:sl-bg-slate-900",
-        "sl-text-gray-900",
-        "dark:sl-text-slate-100",
-        "sl-py-2",
-        "sl-pl-3",
-        "sl-pr-10",
-        "sl-text-left",
-        "sl-border",
-        "sl-text-sm",
-        "focus:sl-outline-none",
-        "focus:sl-ring-2",
-        "focus:sl-ring-stachelock-500",
-        "focus:sl-border-stachelock-500",
-        "sl-transition-all",
-        "sl-duration-200"
-      ];
-      return t.disabled ? e.push(
-        "sl-bg-gray-50",
-        "dark:sl-bg-slate-800",
-        "sl-text-gray-500",
-        "dark:sl-text-slate-300",
-        "sl-cursor-not-allowed",
-        "sl-border-gray-200",
-        "dark:sl-border-slate-700"
-      ) : $.value ? e.push(
-        "sl-border-red-300",
-        "dark:sl-border-red-500",
-        "focus:sl-ring-red-500",
-        "focus:sl-border-red-500"
-      ) : g.valid && g.touched ? e.push(
-        "sl-border-green-300",
-        "dark:sl-border-green-500",
-        "focus:sl-ring-green-500",
-        "focus:sl-border-green-500"
-      ) : e.push(
-        "sl-border-gray-300",
-        "dark:sl-border-slate-600",
-        "hover:sl-border-gray-400",
-        "dark:hover:sl-border-slate-500"
-      ), e.join(" ");
-    }), k = (e) => e[t.itemKey], A = (e) => e[t.itemText] || e.toString(), E = p(() => s.value ? t.multiple && Array.isArray(s.value) ? s.value.length === 0 ? "" : s.value.length === 1 ? A(s.value[0]) : `${s.value.length} items selected` : A(s.value) : ""), I = p(() => s.value ? t.multiple && Array.isArray(s.value) ? s.value.length === 1 ? s.value[0].icon : null : s.value.icon : null), T = p(() => t.items.filter((e) => !e.disabled)), q = (e) => {
-      s.value = e, W(!0), D(e);
-    }, z = p(() => {
-      if (!t.multiple || !Array.isArray(s.value)) return !1;
-      const e = T.value;
-      if (e.length === 0) return !1;
-      const l = new Set(s.value.map((o) => k(o)));
-      return e.every((o) => l.has(k(o)));
-    }), G = () => {
-      t.multiple && (z.value ? s.value = [] : s.value = [...T.value], D(s.value));
-    };
-    return (e, l) => (i(), d("div", ue, [
-      u(ne, {
-        id: r(F),
-        name: a.name,
-        label: a.label,
-        disabled: a.disabled,
-        optional: !a.rules,
-        "tertiary-label": a.tertiaryLabel,
-        "box-shadow": a.boxShadow,
-        "error-message": r($),
-        "success-message": a.successMessage,
-        "is-valid": r(g).valid,
-        "is-touched": r(g).touched
-      }, {
-        "success-message": c(() => [
-          a.successMessage ? (i(), d("span", ge, b(a.successMessage), 1)) : h("", !0)
-        ]),
-        default: c(() => [
-          u(r(ee), {
-            modelValue: s.value,
-            "onUpdate:modelValue": [
-              l[1] || (l[1] = (o) => s.value = o),
-              q
-            ],
-            disabled: a.disabled,
-            multiple: a.multiple
-          }, {
-            default: c(({ open: o }) => [
-              m("div", de, [
-                u(r(K), {
-                  open: o,
-                  "update-fn": M
-                }, null, 8, ["open"]),
-                u(r(le), {
-                  ref_key: "listboxButtonRef",
-                  ref: L,
-                  id: r(F),
-                  class: v([
-                    j.value,
-                    a.buttonClass
-                  ]),
-                  onClick: M
-                }, {
-                  default: c(() => [
-                    m("span", ce, [
-                      I.value ? (i(), y(N(I.value), {
-                        key: 0,
-                        class: "sl-h-4 sl-w-4 sl-flex-shrink-0",
-                        "aria-hidden": "true"
-                      })) : h("", !0),
-                      E.value ? (i(), d("span", me, b(E.value), 1)) : (i(), d("span", fe, b(a.placeholder || "Select an option"), 1))
-                    ]),
-                    m("span", pe, [
-                      u(r(ae), {
-                        class: "sl-h-5 sl-w-5 sl-text-gray-400 dark:sl-text-slate-300",
-                        "aria-hidden": "true"
-                      })
-                    ])
-                  ]),
-                  _: 1
-                }, 8, ["id", "class"]),
-                (i(), y(_, { to: "body" }, [
-                  u(J, {
-                    "leave-active-class": "sl-transition sl-duration-100 sl-ease-in",
-                    "leave-from-class": "sl-opacity-100",
-                    "leave-to-class": "sl-opacity-0"
-                  }, {
-                    default: c(() => [
-                      u(r(se), {
-                        class: "sl-fixed sl-z-[9999] sl-overflow-auto sl-rounded-md sl-bg-white dark:sl-bg-slate-800 sl-py-1 sl-text-base sl-shadow-lg dark:sl-shadow-slate-900/50 sl-ring-1 sl-ring-black sl-ring-opacity-5 dark:sl-ring-slate-700 focus:sl-outline-none sm:sl-text-sm",
-                        style: Q(w.value)
-                      }, {
-                        default: c(() => [
-                          a.multiple && a.showAll ? (i(), d("li", {
-                            key: 0,
-                            role: "button",
-                            tabindex: "0",
-                            onMousedown: l[0] || (l[0] = P(() => {
-                            }, ["prevent"])),
-                            onClick: P(G, ["prevent", "stop"]),
-                            class: v([
-                              "sl-relative sl-cursor-pointer sl-select-none sl-py-2 sl-pl-3 sl-pr-9 sl-text-gray-900 dark:sl-text-slate-200",
-                              "hover:sl-bg-stachelock-600 hover:sl-text-white"
-                            ])
-                          }, [
-                            m("span", ve, b(z.value ? "Unselect All" : "Select All"), 1)
-                          ], 32)) : h("", !0),
-                          (i(!0), d(Y, null, Z(a.items, (n) => (i(), y(r(te), {
-                            key: k(n),
-                            value: n,
-                            as: "template",
-                            disabled: n.disabled
-                          }, {
-                            default: c(({ active: f, selected: B }) => [
-                              m("li", {
-                                class: v([
-                                  "sl-relative sl-cursor-default sl-select-none sl-py-2 sl-pl-3 sl-pr-9",
-                                  f ? "sl-bg-stachelock-600 sl-text-white" : "sl-text-gray-900 dark:sl-text-slate-200",
-                                  n.disabled ? "sl-opacity-50 sl-cursor-not-allowed" : ""
-                                ])
-                              }, [
-                                m("div", he, [
-                                  n.icon ? (i(), y(N(n.icon), {
-                                    key: 0,
-                                    class: v(["sl-h-4 sl-w-4 sl-flex-shrink-0", f ? "sl-text-white" : "sl-text-gray-400 dark:sl-text-slate-300"]),
-                                    "aria-hidden": "true"
-                                  }, null, 8, ["class"])) : h("", !0),
-                                  m("span", {
-                                    class: v([
-                                      "sl-block sl-truncate",
-                                      B ? "sl-font-medium" : "sl-font-normal"
-                                    ])
-                                  }, b(A(n)), 3)
-                                ]),
-                                B ? (i(), d("span", be, [
-                                  u(r(oe), {
-                                    class: "sl-h-5 sl-w-5",
-                                    "aria-hidden": "true"
-                                  })
-                                ])) : h("", !0)
-                              ], 2)
-                            ]),
-                            _: 2
-                          }, 1032, ["value", "disabled"]))), 128))
-                        ]),
-                        _: 1
-                      }, 8, ["style"])
-                    ]),
-                    _: 1
-                  })
-                ]))
-              ])
-            ]),
-            _: 1
-          }, 8, ["modelValue", "disabled", "multiple"])
-        ]),
-        _: 1
-      }, 8, ["id", "name", "label", "disabled", "optional", "tertiary-label", "box-shadow", "error-message", "success-message", "is-valid", "is-touched"])
-    ]));
-  }
-});
-export {
-  Ce as _
-};