@indielayer/ui 1.14.2 → 1.14.4

package/lib/components/notifications/Notifications.vue.js

@@ -1,25 +1,25 @@
-import { defineComponent as I, ref as g, provide as q, watch as j, openBlock as a, createElementBlock as p, Fragment as H, renderSlot as J, createBlock as x, Teleport as Q, createElementVNode as b, normalizeStyle as D, unref as i, normalizeClass as _, createVNode as O, TransitionGroup as U, withCtx as W, renderList as Y, createCommentVNode as y, toDisplayString as C } from "vue";
-import { injectNotificationKey as Z } from "../../composables/keys.js";
-import { useColors as A } from "../../composables/useColors.js";
-import { useCSS as ee } from "../../composables/useCSS.js";
-import { useTheme as te } from "../../composables/useTheme.js";
-import { closeIcon as oe } from "../../common/icons.js";
-import K from "../icon/Icon.vue.js";
-import re from "../spacer/Spacer.js";
-const se = ["onMouseenter", "onMouseleave"], ae = { class: "flex items-center flex-wrap" }, le = {
+import { defineComponent as q, ref as g, provide as J, watch as D, computed as Q, openBlock as a, createElementBlock as p, Fragment as O, renderSlot as U, createBlock as x, Teleport as W, createElementVNode as k, normalizeStyle as _, unref as i, normalizeClass as C, createVNode as K, TransitionGroup as Y, withCtx as Z, renderList as ee, createCommentVNode as y, toDisplayString as M } from "vue";
+import { injectNotificationKey as te } from "../../composables/keys.js";
+import { useColors as E } from "../../composables/useColors.js";
+import { useCSS as oe } from "../../composables/useCSS.js";
+import { useTheme as re } from "../../composables/useTheme.js";
+import { closeIcon as se } from "../../common/icons.js";
+import A from "../icon/Icon.vue.js";
+import ae from "../spacer/Spacer.js";
+const le = ["onMouseenter", "onMouseleave"], ne = { class: "flex items-center flex-wrap" }, ie = {
   key: 0,
   class: "font-medium mr-2"
-}, ne = ["onClick"], ie = {
-  ...A.props("primary"),
+}, ce = ["onClick"], ue = {
+  ...E.props("primary"),
   align: {
     type: String,
     default: "right",
-    validator: (c) => M.align.includes(c)
+    validator: (c) => S.align.includes(c)
   },
   position: {
     type: String,
     default: "bottom",
-    validator: (c) => M.position.includes(c)
+    validator: (c) => S.position.includes(c)
   },
   timeout: {
     type: Number,
@@ -35,32 +35,36 @@ const se = ["onMouseenter", "onMouseleave"], ae = { class: "flex items-center fl
   },
   injectKey: {
     type: [Symbol, String],
-    default: Z
+    default: te
+  },
+  offset: {
+    type: [String, Number],
+    default: 0
   }
-}, M = {
+}, S = {
   align: ["left", "right"],
   position: ["bottom", "top"]
-}, ce = {
+}, me = {
   name: "XNotifications",
-  validators: M
-}, he = /* @__PURE__ */ I({
-  ...ce,
-  props: ie,
-  setup(c, { expose: E }) {
-    const r = c, u = g(r.align), s = g(r.position), d = g([]), z = g(null), L = ee("notification"), S = A();
-    q(r.injectKey, {
-      log: w,
-      info: N,
+  validators: S
+}, xe = /* @__PURE__ */ q({
+  ...me,
+  props: ue,
+  setup(c, { expose: L }) {
+    const r = c, u = g(r.align), s = g(r.position), d = g([]), z = g(null), R = oe("notification"), w = E();
+    J(r.injectKey, {
+      log: N,
+      info: $,
       warn: v,
       error: B,
       warning: v,
       success: T
-    }), j(() => r.align, (e) => {
+    }), D(() => r.align, (e) => {
       u.value = e;
-    }), j(() => r.position, (e) => {
+    }), D(() => r.position, (e) => {
       s.value = e;
     });
-    function w(e) {
+    function N(e) {
       const o = typeof e == "string", t = {
         message: o ? e : void 0
       };
@@ -69,7 +73,7 @@ const se = ["onMouseenter", "onMouseleave"], ae = { class: "flex items-center fl
         ...e
       });
     }
-    function N(e) {
+    function $(e) {
       const o = typeof e == "string", t = {
         icon: '<path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clip-rule="evenodd" />',
         iconColor: "sky",
@@ -114,7 +118,7 @@ const se = ["onMouseenter", "onMouseleave"], ae = { class: "flex items-center fl
       });
     }
     function m(e) {
-      var $;
+      var H;
       const t = {
         ...{
           id: Date.now(),
@@ -127,7 +131,7 @@ const se = ["onMouseenter", "onMouseleave"], ae = { class: "flex items-center fl
         ...e
       };
       u.value = t.align, s.value = t.position;
-      const l = S.getPalette(t.iconColor), f = S.getPalette((($ = t.action) == null ? void 0 : $.color) || "primary"), V = L.variables({
+      const l = w.getPalette(t.iconColor), f = w.getPalette(((H = t.action) == null ? void 0 : H.color) || "primary"), j = R.variables({
         icon: l[400],
         action: f[400],
         hover: {
@@ -141,7 +145,7 @@ const se = ["onMouseenter", "onMouseleave"], ae = { class: "flex items-center fl
           }
         }
       });
-      if (t.style = Object.keys(V).map((n) => `${n}: ${V[n]}`).join(";"), t.timeout) {
+      if (t.style = Object.keys(j).map((n) => `${n}: ${j[n]}`).join(";"), t.timeout) {
         const n = P(t, t.timeout);
         t.timer = n, t.timerStart = Date.now();
       }
@@ -158,26 +162,26 @@ const se = ["onMouseenter", "onMouseleave"], ae = { class: "flex items-center fl
         h(e);
       }, o);
     }
-    function R(e) {
+    function X(e) {
       r.pauseOnHover && e.timer && (clearTimeout(e.timer), e.timer = void 0);
     }
-    function X(e) {
+    function F(e) {
       if (r.pauseOnHover && e.timeout && e.timerStart) {
         const o = Math.max(e.timeout - (Date.now() - e.timerStart), 1e3);
         e.timer = P(e, o);
       }
     }
-    const { styles: F, classes: k, className: G } = te("Notifications", {}, r);
-    return E({ log: w, info: N, success: T, warn: v, warning: v, error: B }), (e, o) => (a(), p(H, null, [
-      J(e.$slots, "default"),
-      (a(), x(Q, { to: "body" }, [
-        b("div", {
+    const V = Q(() => `${r.offset}px`), { styles: G, classes: b, className: I } = re("Notifications", {}, r);
+    return L({ log: N, info: $, success: T, warn: v, warning: v, error: B }), (e, o) => (a(), p(O, null, [
+      U(e.$slots, "default"),
+      (a(), x(W, { to: "body" }, [
+        k("div", {
           ref_key: "listRef",
           ref: z,
-          style: D(i(F)),
-          class: _([
-            i(G),
-            i(k).wrapper,
+          style: _(i(G)),
+          class: C([
+            i(I),
+            i(b).wrapper,
             {
               // align
               "left-0": u.value === "left",
@@ -188,10 +192,13 @@ const se = ["onMouseenter", "onMouseleave"], ae = { class: "flex items-center fl
             }
           ])
         }, [
-          O(U, {
+          K(Y, {
             tag: "ul",
-            class: _([
-              i(k).list,
+            style: _([
+              s.value === "bottom" ? `padding-bottom: ${V.value};` : `padding-top: ${V.value};`
+            ]),
+            class: C([
+              i(b).list,
               { "flex-col-reverse": s.value }
             ]),
             "enter-active-class": "transition ease-out duration-200",
@@ -202,32 +209,32 @@ const se = ["onMouseenter", "onMouseleave"], ae = { class: "flex items-center fl
             "leave-to-class": "transform translate-y-2 opacity-0",
             "move-class": "ease-in-out duration-200"
           }, {
-            default: W(() => [
-              (a(!0), p(H, null, Y(d.value, (t) => (a(), p("li", {
+            default: Z(() => [
+              (a(!0), p(O, null, ee(d.value, (t) => (a(), p("li", {
                 key: t.id,
-                class: _([
-                  i(k).item,
+                class: C([
+                  i(b).item,
                   {
                     "mb-2": s.value === "bottom",
                     "mt-2": s.value === "top"
                   }
                 ]),
-                style: D(t.style),
-                onMouseenter: (l) => R(t),
-                onMouseleave: (l) => X(t)
+                style: _(t.style),
+                onMouseenter: (l) => X(t),
+                onMouseleave: (l) => F(t)
               }, [
-                t.icon ? (a(), x(K, {
+                t.icon ? (a(), x(A, {
                   key: 0,
                   filled: "",
                   icon: t.icon,
                   class: "mr-4 text-[color:var(--x-notification-icon)] dark:text-[color:var(--x-notification-dark-icon)]",
                   viewBox: "0 0 20 20"
                 }, null, 8, ["icon"])) : y("", !0),
-                b("div", ae, [
-                  t.title ? (a(), p("span", le, C(t.title), 1)) : y("", !0),
-                  b("span", null, C(t.message), 1)
+                k("div", ne, [
+                  t.title ? (a(), p("span", ie, M(t.title), 1)) : y("", !0),
+                  k("span", null, M(t.message), 1)
                 ]),
-                O(i(re)),
+                K(i(ae)),
                 t.action ? (a(), p("button", {
                   key: 1,
                   type: "button",
@@ -236,24 +243,24 @@ const se = ["onMouseenter", "onMouseleave"], ae = { class: "flex items-center fl
                     var l;
                     (l = t.action) == null || l.onClick(), h(t);
                   }
-                }, C(t.action.label), 9, ne)) : y("", !0),
-                t.removable ? (a(), x(K, {
+                }, M(t.action.label), 9, ce)) : y("", !0),
+                t.removable ? (a(), x(A, {
                   key: 2,
-                  icon: i(oe),
+                  icon: i(se),
                   class: "text-secondary-400 hover:text-secondary-500 ml-3 cursor-pointer",
                   onClick: () => {
                     h(t);
                   }
                 }, null, 8, ["icon", "onClick"])) : y("", !0)
-              ], 46, se))), 128))
+              ], 46, le))), 128))
             ]),
             _: 1
-          }, 8, ["class"])
+          }, 8, ["style", "class"])
         ], 6)
       ]))
     ], 64));
   }
 });
 export {
-  he as default
+  xe as default
 };

package/lib/components/select/Select.vue.js

@@ -1,4 +1,4 @@
-import { defineComponent as Me, mergeModels as ve, computed as A, ref as b, useModel as Pe, watch as M, nextTick as Z, unref as s, onUnmounted as Fe, openBlock as r, createBlock as L, mergeProps as U, toHandlers as ce, withCtx as m, createElementVNode as P, createElementBlock as u, normalizeClass as k, Fragment as w, createTextVNode as T, toDisplayString as g, createVNode as B, renderSlot as O, createCommentVNode as R, renderList as j, createSlots as Ee, normalizeStyle as He, withModifiers as We, withDirectives as qe, vModelSelect as Ue } from "vue";
+import { defineComponent as Me, mergeModels as ve, computed as A, ref as b, useModel as Pe, watch as M, nextTick as Z, unref as s, onUnmounted as Fe, openBlock as r, createBlock as L, mergeProps as U, toHandlers as ce, withCtx as m, createElementVNode as P, createElementBlock as u, normalizeClass as k, Fragment as w, createTextVNode as B, toDisplayString as g, createVNode as S, renderSlot as O, createCommentVNode as R, renderList as j, createSlots as Ee, normalizeStyle as He, withModifiers as We, withDirectives as qe, vModelSelect as Ue } from "vue";
 import { useEventListener as je, useResizeObserver as Xe } from "../../node_modules/.pnpm/@vueuse_core@11.1.0_vue@3.5.10_typescript@5.2.2_/node_modules/@vueuse/core/index.js";
 import { useColors as Ke } from "../../composables/useColors.js";
 import { useCommon as he } from "../../composables/useCommon.js";
@@ -70,12 +70,12 @@ const ol = { class: "relative" }, rl = {
   }),
   emits: /* @__PURE__ */ ve([..._.emits(), "close"], ["update:filter"]),
   setup(ee, { expose: ge, emit: Ce }) {
-    const i = ee, S = Ce, c = A(() => i.multiple || i.multipleCheckbox), X = b(null), K = b(null), F = b(null), C = b(null), G = b(null), d = b(), I = Pe(ee, "filter"), E = b(null), $ = A(() => i.disabled || i.loading || i.readonly), we = A(() => !i.loading && !i.readonly && !i.disabled && i.clearable && !J(o.value)), o = A({
+    const i = ee, z = Ce, c = A(() => i.multiple || i.multipleCheckbox), X = b(null), K = b(null), F = b(null), C = b(null), G = b(null), d = b(), I = Pe(ee, "filter"), E = b(null), $ = A(() => i.disabled || i.loading || i.readonly), we = A(() => !i.loading && !i.readonly && !i.disabled && i.clearable && !J(o.value)), o = A({
       get() {
         return c.value ? i.modelValue ? Array.isArray(i.modelValue) ? i.modelValue : [i.modelValue] : [] : i.modelValue;
       },
       set(e) {
-        S("update:modelValue", e);
+        z("update:modelValue", e);
       }
     }), h = A(() => !i.options || i.options.length === 0 ? [] : i.options.filter((e) => I.value === "" || e.label.toLowerCase().includes(I.value.toLowerCase())).map((e) => {
       let t = !1;
@@ -111,7 +111,7 @@ const ol = { class: "relative" }, rl = {
           var t;
           ae(d.value || 0), i.filterable && ((t = E.value) == null || t.focus());
         });
-      }, 50)) : (i.filterable && (I.value = ""), S("close"));
+      }, 50)) : (i.filterable && (I.value = ""), z("close"));
     });
     function Re() {
       if (c.value) {
@@ -170,7 +170,7 @@ const ol = { class: "relative" }, rl = {
               a !== -1 ? o.value.splice(a, 1) : o.value.push(e);
             } else
               o.value = [e];
-            S("update:modelValue", o.value), i.filterable && setTimeout(() => {
+            z("update:modelValue", o.value), i.filterable && setTimeout(() => {
               var a;
               (a = E.value) == null || a.focus();
             });
@@ -189,9 +189,9 @@ const ol = { class: "relative" }, rl = {
       if (e.stopPropagation(), $.value || !Array.isArray(o.value))
         return;
       const l = o.value.indexOf(t);
-      l !== -1 && (o.value.splice(l, 1), S("update:modelValue", o.value));
+      l !== -1 && (o.value.splice(l, 1), z("update:modelValue", o.value));
     }
-    function z(e) {
+    function T(e) {
       var l;
       const t = (l = i.options) == null ? void 0 : l.find((a) => a.value === e);
       return t ? t.label : "";
@@ -205,7 +205,7 @@ const ol = { class: "relative" }, rl = {
       setError: Ie,
       isFocused: Ve,
       isInsideForm: Te
-    } = _(i, { focus: re, emit: S, withListeners: !0 }), Be = A(() => {
+    } = _(i, { focus: re, emit: z, withListeners: !0 }), Be = A(() => {
       const { focus: e, blur: t } = s(ne);
       return {
         focus: e,
@@ -305,17 +305,17 @@ const ol = { class: "relative" }, rl = {
             J(o.value) ? (r(), u(w, { key: 1 }, [
               e.placeholder ? (r(), u("div", rl, g(e.placeholder), 1)) : (r(), u("div", sl, " "))
             ], 64)) : (r(), u(w, { key: 0 }, [
-              T(g(z(o.value)), 1)
+              B(g(T(o.value)), 1)
             ], 64))
           ], 2)) : (r(), u(w, { key: 1 }, [
-            B(ye, {
+            S(ye, {
               ref_key: "popoverRef",
               ref: C,
               disabled: $.value,
               placement: e.placement
             }, {
               content: m(() => [
-                B(be, {
+                S(be, {
                   class: k(s(y).content)
                 }, {
                   default: m(() => [
@@ -324,7 +324,7 @@ const ol = { class: "relative" }, rl = {
                         key: 0,
                         class: k(s(y).search)
                       }, [
-                        B(al, {
+                        S(al, {
                           ref_key: "filterRef",
                           ref: E,
                           modelValue: I.value,
@@ -370,7 +370,7 @@ const ol = { class: "relative" }, rl = {
                               O(e.$slots, "prefix", {
                                 item: l.data
                               }, () => [
-                                T(g(l.data.prefix), 1)
+                                B(g(l.data.prefix), 1)
                               ])
                             ]),
                             key: "0"
@@ -381,7 +381,7 @@ const ol = { class: "relative" }, rl = {
                               O(e.$slots, "suffix", {
                                 item: l.data
                               }, () => [
-                                T(g(l.data.suffix), 1)
+                                B(g(l.data.suffix), 1)
                               ])
                             ]),
                             key: "1"
@@ -400,7 +400,7 @@ const ol = { class: "relative" }, rl = {
                   popover: C.value,
                   selected: o.value,
                   disabled: $.value,
-                  label: z(o.value)
+                  label: T(o.value)
                 }, () => [
                   P("div", {
                     class: k([s(y).box])
@@ -436,7 +436,7 @@ const ol = { class: "relative" }, rl = {
                             ];
                           }),
                           default: m(() => [
-                            T(" " + g(z(l)), 1)
+                            B(" " + g(T(l)), 1)
                           ]),
                           _: 2
                         }, 1032, ["outlined", "disabled", "style", "onRemove"]);
@@ -451,8 +451,8 @@ const ol = { class: "relative" }, rl = {
                           return (a = de.value) == null ? void 0 : a.toggle();
                         }, ["stop"]))
                       }, "+" + g(q.value), 3)) : R("", !0)
-                    ], 2)) : !c.value && !J(o.value) ? (r(), u(w, { key: 1 }, [
-                      T(g(z(o.value)), 1)
+                    ], 2)) : !c.value && !J(o.value) && T(o.value) !== "" ? (r(), u(w, { key: 1 }, [
+                      B(g(T(o.value)), 1)
                     ], 64)) : (r(), u(w, { key: 2 }, [
                       e.placeholder ? (r(), u("div", nl, g(e.placeholder), 1)) : (r(), u("div", ul, " "))
                     ], 64))
@@ -471,7 +471,7 @@ const ol = { class: "relative" }, rl = {
               placement: "auto-start"
             }, {
               content: m(() => [
-                B(be, { class: "p-2 flex gap-2 flex-wrap" }, {
+                S(be, { class: "p-2 flex gap-2 flex-wrap" }, {
                   default: m(() => {
                     var l;
                     return [
@@ -496,7 +496,7 @@ const ol = { class: "relative" }, rl = {
                             ];
                           }),
                           default: m(() => [
-                            T(" " + g(z(a)), 1)
+                            B(" " + g(T(a)), 1)
                           ]),
                           _: 2
                         }, 1032, ["outlined", "disabled", "onRemove"]);
@@ -537,7 +537,7 @@ const ol = { class: "relative" }, rl = {
             onClick: t[4] || (t[4] = //@ts-ignore
             (...l) => s(Q) && s(Q)(...l))
           }, [
-            B(me, {
+            S(me, {
               icon: s(Ye),
               class: k([s(y).icon, "cursor-pointer"])
             }, null, 8, ["icon", "class"])
@@ -550,7 +550,7 @@ const ol = { class: "relative" }, rl = {
               key: 0,
               size: e.size
             }, null, 8, ["size"])) : O(e.$slots, "icon", { key: 1 }, () => [
-              B(me, {
+              S(me, {
                 icon: s(Ze),
                 class: k(s(y).icon)
               }, null, 8, ["icon", "class"])

package/lib/components/tab/theme/Tab.base.theme.js

@@ -2,7 +2,7 @@ const i = {
   classes: {
     wrapper: ({ props: t, data: s }) => {
       const e = ["transition-colors duration-150 ease-in-out whitespace-nowrap text-center"];
-      return s.variant === "line" && e.push("py-2"), s.variant === "block" && e.push("py-1.5 px-8"), t.size === "xs" ? e.push("text-xs") : t.size === "sm" ? e.push("text-sm") : t.size === "lg" ? e.push("text-lg") : t.size === "xl" && e.push("text-xl"), e;
+      return s.variant === "line" && e.push("py-2"), s.variant === "block" && e.push("py-1 px-8"), t.size === "xs" ? e.push("text-xs") : t.size === "sm" ? e.push("text-sm") : t.size === "lg" ? e.push("text-lg") : t.size === "xl" && e.push("text-xl"), e;
     },
     content: "flex items-center justify-center",
     label: "font-medium",

package/lib/composables/useFocusTrap.js

@@ -2,39 +2,43 @@ import { ref as b, onUnmounted as F, unref as w, nextTick as x } from "vue";
 const h = 'button:not([tabindex="-1"]), [href], input, select, textarea, li, a, [tabindex]:not([tabindex="-1"])';
 function T() {
   const l = b([]);
-  let t = null, a = null, s = null, i = null, o = null;
+  let u = null, i = null, f = null, a = null, o = null;
   function m(e) {
     return e ? e.$el ? e.$el : e : null;
   }
   function v(e) {
-    const u = m(e);
-    if (!u)
+    const t = m(e);
+    if (!t)
       return;
-    const c = u.querySelectorAll(h);
-    l.value = Array.from(c), a = l.value[0] || null, s = l.value[l.value.length - 1] || null;
+    const c = t.querySelectorAll(h);
+    l.value = Array.from(c), i = l.value[0] || null, f = l.value[l.value.length - 1] || null;
   }
-  const f = (e) => {
-    if (e.key !== "Tab" || l.value.length === 0)
+  const s = (e) => {
+    if (e.key === "Tab" && l.value.length === 0) {
+      e.preventDefault();
       return;
-    const u = e.shiftKey, c = document.activeElement, n = a, r = s;
+    }
+    if (e.key !== "Tab")
+      return;
+    const t = e.shiftKey, c = document.activeElement, n = i, r = f;
     if (!c) {
       e.preventDefault(), n == null || n.focus();
       return;
     }
-    !u && c === r ? (e.preventDefault(), n == null || n.focus()) : u && c === n && (e.preventDefault(), r == null || r.focus());
+    !t && c === r ? (e.preventDefault(), n == null || n.focus()) : t && c === n && (e.preventDefault(), r == null || r.focus());
   };
-  async function y(e, u) {
+  async function y(e, t) {
     var r;
-    if (typeof window > "u" || (d(), i = document.activeElement, o = w(e), !o))
+    if (typeof window > "u" || (d(), a = document.activeElement, o = w(e), !o))
       return;
     await x(), v(o);
-    const c = (u == null ? void 0 : u.initialFocusIndex) ?? 0;
-    (r = l.value[c]) == null || r.focus(), document.removeEventListener("keydown", f), t == null || t.disconnect(), document.addEventListener("keydown", f);
+    const c = (t == null ? void 0 : t.initialFocusIndex) ?? 0;
+    (r = l.value[c]) == null || r.focus(), document.removeEventListener("keydown", s), u == null || u.disconnect(), document.addEventListener("keydown", s);
     const n = m(o);
-    n && (t = new MutationObserver(() => v(o)), t.observe(n, { childList: !0, subtree: !0 }));
+    n && (u = new MutationObserver(() => v(o)), u.observe(n, { childList: !0, subtree: !0 }));
   }
   function d(e) {
-    document.removeEventListener("keydown", f), t == null || t.disconnect(), t = null, e != null && e.returnFocus && i && i.focus(), o = null, l.value = [], a = null, s = null, i = null;
+    document.removeEventListener("keydown", s), u == null || u.disconnect(), u = null, e != null && e.returnFocus && a && a.focus(), o = null, l.value = [], i = null, f = null, a = null;
   }
   return F(() => {
     d({ returnFocus: !0 });