@stachelock/ui 0.6.5 → 0.6.6

package/dist/SelectInput.vue_vue_type_script_setup_true_lang-COZuuSFS.js

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

package/dist/{TabGroup.vue_vue_type_script_setup_true_lang-BsbiEA4E.js → TabGroup.vue_vue_type_script_setup_true_lang-pEKm-uUq.js}

@@ -1,7 +1,7 @@
 import { defineComponent as P, computed as v, createElementBlock as a, openBlock as o, createCommentVNode as d, createVNode as u, unref as s, withCtx as c, createElementVNode as m, Fragment as j, renderList as z, createBlock as p, normalizeClass as _, createTextVNode as A, toDisplayString as k, renderSlot as y, KeepAlive as F, resolveDynamicComponent as K, mergeProps as U, toHandlers as q } from "vue";
 import { TabGroup as J, TabList as Q, Tab as R } from "@headlessui/vue";
 import { useTabs as W } from "./composables/useTabs.js";
-import { _ as X } from "./SelectInput.vue_vue_type_script_setup_true_lang-D4GNv0MY.js";
+import { _ as X } from "./SelectInput.vue_vue_type_script_setup_true_lang-COZuuSFS.js";
 const Y = { class: "sl-w-full" }, Z = {
   key: 0,
   class: "sl-block sm:sl-hidden sl-mb-4"

package/dist/{TabGroupUnderline.vue_vue_type_script_setup_true_lang-CPcp1-Za.js → TabGroupUnderline.vue_vue_type_script_setup_true_lang--IKyRPkX.js}

@@ -1,7 +1,7 @@
 import { defineComponent as P, computed as x, createElementBlock as n, openBlock as t, createCommentVNode as r, createVNode as v, toDisplayString as m, unref as l, withCtx as F, createElementVNode as c, Fragment as L, renderList as U, normalizeClass as f, createTextVNode as z, renderSlot as g, createBlock as y, KeepAlive as A, resolveDynamicComponent as K, mergeProps as j, toHandlers as q } from "vue";
 import { TabGroup as J } from "@headlessui/vue";
 import { useTabs as Q } from "./composables/useTabs.js";
-import { _ as R } from "./SelectInput.vue_vue_type_script_setup_true_lang-D4GNv0MY.js";
+import { _ as R } from "./SelectInput.vue_vue_type_script_setup_true_lang-COZuuSFS.js";
 const W = { class: "sl-w-full" }, X = {
   key: 0,
   class: "sl-text-lg sl-font-semibold sl-text-gray-900 dark:sl-text-white sl-mb-4"

package/dist/{TabsInPills.vue_vue_type_script_setup_true_lang-U5CdRL7s.js → TabsInPills.vue_vue_type_script_setup_true_lang-EG0nj4F6.js}

@@ -1,5 +1,5 @@
 import { defineComponent as I, createElementBlock as l, openBlock as t, createElementVNode as o, renderSlot as m, createVNode as V, unref as s, Fragment as r, renderList as i, normalizeClass as u, withModifiers as w, createTextVNode as N, createCommentVNode as h, toDisplayString as p } from "vue";
-import { _ as S } from "./SelectInput.vue_vue_type_script_setup_true_lang-D4GNv0MY.js";
+import { _ as S } from "./SelectInput.vue_vue_type_script_setup_true_lang-COZuuSFS.js";
 import { u as $ } from "./useSimpleTabs-CSgkChEU.js";
 const B = { class: "sl-w-full" }, E = { class: "sm:sl-hidden" }, U = { class: "sl-hidden sm:sl-block sl-overflow-x-auto" }, z = {
   class: "sl-flex sl-flex-nowrap sl-space-x-4",

package/dist/calendars/CalendarDashboard.js

@@ -1,5 +1,5 @@
 import { defineComponent as _, ref as w, computed as d, createElementBlock as y, openBlock as D, createElementVNode as r, createVNode as s, withCtx as b, createTextVNode as x } from "vue";
-import { _ as C } from "../CalendarHeader.vue_vue_type_script_setup_true_lang-hGa2MLyo.js";
+import { _ as C } from "../CalendarHeader.vue_vue_type_script_setup_true_lang-CA_C4dmn.js";
 import { _ as S } from "../MonthCalendar.vue_vue_type_style_index_0_lang-lnKkvJ9u.js";
 import { _ as E } from "../EventsList.vue_vue_type_script_setup_true_lang-BTIoGr_e.js";
 import V from "../components/Button.js";

package/dist/calendars/CalendarHeader.js

@@ -1,4 +1,4 @@
-import { _ as f } from "../CalendarHeader.vue_vue_type_script_setup_true_lang-hGa2MLyo.js";
+import { _ as f } from "../CalendarHeader.vue_vue_type_script_setup_true_lang-CA_C4dmn.js";
 export {
   f as default
 };