@indielayer/ui 1.9.3 → 1.10.1

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

@@ -1,25 +1,25 @@
-import { defineComponent as I, ref as f, provide as O, watch as $, openBlock as a, createElementBlock as m, Fragment as K, renderSlot as q, createBlock as k, Teleport as J, createElementVNode as x, normalizeStyle as A, unref as l, normalizeClass as b, createVNode as D, TransitionGroup as Q, withCtx as U, renderList as W, createCommentVNode as g, toDisplayString as C } from "vue";
-import { injectNotificationKey as Y } from "../../composables/keys.js";
-import { useColors as H } from "../../composables/useColors.js";
-import { useCSS as Z } from "../../composables/useCSS.js";
-import { useTheme as ee } from "../../composables/useTheme.js";
+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 E from "../icon/Icon.vue.js";
-import te from "../spacer/Spacer.js";
-const se = { class: "flex items-center flex-wrap" }, re = {
+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 = {
   key: 0,
   class: "font-medium mr-2"
-}, ae = ["onClick"], le = {
-  ...H.props("primary"),
+}, ne = ["onClick"], ie = {
+  ...A.props("primary"),
   align: {
     type: String,
     default: "right",
-    validator: (n) => _.align.includes(n)
+    validator: (c) => M.align.includes(c)
   },
   position: {
     type: String,
     default: "bottom",
-    validator: (n) => _.position.includes(n)
+    validator: (c) => M.position.includes(c)
   },
   timeout: {
     type: Number,
@@ -29,150 +29,170 @@ const se = { class: "flex items-center flex-wrap" }, re = {
     type: Boolean,
     default: !0
   },
+  pauseOnHover: {
+    type: Boolean,
+    default: !0
+  },
   injectKey: {
     type: [Symbol, String],
-    default: Y
+    default: Z
   }
-}, _ = {
+}, M = {
   align: ["left", "right"],
   position: ["bottom", "top"]
-}, ne = {
+}, ce = {
   name: "XNotifications",
-  validators: _
-}, ge = /* @__PURE__ */ I({
-  ...ne,
-  props: le,
-  setup(n, { expose: L }) {
-    const s = n, i = f(s.align), r = f(s.position), p = f([]), z = f(null), R = Z("notification"), M = H();
-    O(s.injectKey, {
+  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: S,
-      warn: d,
-      error: P,
-      warning: d,
-      success: N
-    }), $(() => s.align, (o) => {
-      i.value = o;
-    }), $(() => s.position, (o) => {
-      r.value = o;
+      info: N,
+      warn: v,
+      error: B,
+      warning: v,
+      success: T
+    }), j(() => r.align, (e) => {
+      u.value = e;
+    }), j(() => r.position, (e) => {
+      s.value = e;
     });
-    function w(o) {
-      const t = typeof o == "string", e = {
-        message: t ? o : void 0
+    function w(e) {
+      const o = typeof e == "string", t = {
+        message: o ? e : void 0
       };
-      c(t ? e : {
-        ...e,
-        ...o
+      m(o ? t : {
+        ...t,
+        ...e
       });
     }
-    function S(o) {
-      const t = typeof o == "string", e = {
+    function N(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",
-        message: t ? o : void 0
+        message: o ? e : void 0
       };
-      c(t ? e : {
-        ...e,
-        ...o
+      m(o ? t : {
+        ...t,
+        ...e
       });
     }
-    function N(o) {
-      const t = typeof o == "string", e = {
+    function T(e) {
+      const o = typeof e == "string", t = {
         icon: '<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />',
         iconColor: "success",
-        message: t ? o : void 0
+        message: o ? e : void 0
       };
-      c(t ? e : {
-        ...e,
-        ...o
+      m(o ? t : {
+        ...t,
+        ...e
       });
     }
-    function d(o) {
-      const t = typeof o == "string", e = {
+    function v(e) {
+      const o = typeof e == "string", t = {
         icon: '<path fill-rule="evenodd" d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z" clip-rule="evenodd" />',
         iconColor: "warning",
-        message: t ? o : void 0
+        message: o ? e : void 0
       };
-      c(t ? e : {
-        ...e,
-        ...o
+      m(o ? t : {
+        ...t,
+        ...e
       });
     }
-    function P(o) {
-      const t = typeof o == "string", e = {
+    function B(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 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1 0 00-1-1z" clip-rule="evenodd" />',
         iconColor: "error",
-        message: t ? o : void 0
+        message: o ? e : void 0
       };
-      c(t ? e : {
-        ...e,
-        ...o
+      m(o ? t : {
+        ...t,
+        ...e
       });
     }
-    function c(o) {
-      var V, j;
-      const e = {
+    function m(e) {
+      var $;
+      const t = {
         ...{
           id: Date.now(),
-          iconColor: s.color,
-          timeout: s.timeout,
-          align: i.value,
-          position: r.value,
-          removable: s.removable
+          iconColor: r.color,
+          timeout: r.timeout,
+          align: u.value,
+          position: s.value,
+          removable: r.removable
         },
-        ...o
+        ...e
       };
-      i.value = e.align, r.value = e.position;
-      const u = M.getPalette(e.iconColor), v = M.getPalette(((V = e.action) == null ? void 0 : V.color) || "primary"), T = R.variables({
-        icon: u[400],
-        action: v[400],
+      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({
+        icon: l[400],
+        action: f[400],
         hover: {
-          action: v[500]
+          action: f[500]
         },
         dark: {
-          icon: u[500],
-          action: v[500],
+          icon: l[500],
+          action: f[500],
           hover: {
-            action: v[600]
+            action: f[600]
           }
         }
       });
-      e.style = Object.keys(T).map((B) => `${B}: ${T[B]}`).join(";"), p.value.push(e), (j = z.value) == null || j.scrollTo({ top: 0, behavior: "smooth" }), e.timeout && X(e, e.timeout);
+      if (t.style = Object.keys(V).map((n) => `${n}: ${V[n]}`).join(";"), t.timeout) {
+        const n = P(t, t.timeout);
+        t.timer = n, t.timerStart = Date.now();
+      }
+      d.value.push(t), setTimeout(() => {
+        var n;
+        (n = z.value) == null || n.scrollTo({ top: 0, behavior: "smooth" });
+      }, 0);
+    }
+    function h(e) {
+      d.value = d.value.filter((o) => o.id !== e.id);
+    }
+    function P(e, o) {
+      return setTimeout(() => {
+        h(e);
+      }, o);
     }
-    function y(o) {
-      p.value = p.value.filter((t) => t.id !== o.id);
+    function R(e) {
+      r.pauseOnHover && e.timer && (clearTimeout(e.timer), e.timer = void 0);
     }
-    function X(o, t) {
-      setTimeout(() => {
-        y(o);
-      }, t);
+    function X(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: h, className: G } = ee("Notifications", {}, s);
-    return L({ log: w, info: S, success: N, warn: d, warning: d, error: P }), (o, t) => (a(), m(K, null, [
-      q(o.$slots, "default"),
-      (a(), k(J, { to: "body" }, [
-        x("div", {
+    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", {
           ref_key: "listRef",
           ref: z,
-          style: A(l(F)),
-          class: b([
-            l(G),
-            l(h).wrapper,
+          style: D(i(F)),
+          class: _([
+            i(G),
+            i(k).wrapper,
             {
               // align
-              "left-0": i.value === "left",
-              "right-0": i.value === "right",
+              "left-0": u.value === "left",
+              "right-0": u.value === "right",
               // position
-              "top-0": r.value === "top",
-              "bottom-0": r.value === "bottom"
+              "top-0": s.value === "top",
+              "bottom-0": s.value === "bottom"
             }
           ])
         }, [
-          D(Q, {
+          O(U, {
             tag: "ul",
-            class: b([
-              l(h).list,
-              { "flex-col-reverse": r.value }
+            class: _([
+              i(k).list,
+              { "flex-col-reverse": s.value }
             ]),
             "enter-active-class": "transition ease-out duration-200",
             "leave-active-class": "transition ease-out duration-100",
@@ -182,48 +202,50 @@ const se = { class: "flex items-center flex-wrap" }, re = {
             "leave-to-class": "transform translate-y-2 opacity-0",
             "move-class": "ease-in-out duration-200"
           }, {
-            default: U(() => [
-              (a(!0), m(K, null, W(p.value, (e) => (a(), m("li", {
-                key: e.id,
-                class: b([
-                  l(h).item,
+            default: W(() => [
+              (a(!0), p(H, null, Y(d.value, (t) => (a(), p("li", {
+                key: t.id,
+                class: _([
+                  i(k).item,
                   {
-                    "mb-2": r.value === "bottom",
-                    "mt-2": r.value === "top"
+                    "mb-2": s.value === "bottom",
+                    "mt-2": s.value === "top"
                   }
                 ]),
-                style: A(e.style)
+                style: D(t.style),
+                onMouseenter: (l) => R(t),
+                onMouseleave: (l) => X(t)
               }, [
-                e.icon ? (a(), k(E, {
+                t.icon ? (a(), x(K, {
                   key: 0,
                   filled: "",
-                  icon: e.icon,
+                  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"])) : g("", !0),
-                x("div", se, [
-                  e.title ? (a(), m("span", re, C(e.title), 1)) : g("", !0),
-                  x("span", null, C(e.message), 1)
+                }, 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)
                 ]),
-                D(l(te)),
-                e.action ? (a(), m("button", {
+                O(i(re)),
+                t.action ? (a(), p("button", {
                   key: 1,
                   type: "button",
                   class: "ml-3 font-medium cursor-pointer text-[color:var(--x-notification-action)] hover:text-[color:var(--x-notification-action-hover)] dark:text-[color:var(--x-notification-dark-action)] dark:hover:text-[color:var(--x-notification-dark-action-hover)]",
                   onClick: () => {
-                    var u;
-                    (u = e.action) == null || u.onClick(), y(e);
+                    var l;
+                    (l = t.action) == null || l.onClick(), h(t);
                   }
-                }, C(e.action.label), 9, ae)) : g("", !0),
-                e.removable ? (a(), k(E, {
+                }, C(t.action.label), 9, ne)) : y("", !0),
+                t.removable ? (a(), x(K, {
                   key: 2,
-                  icon: l(oe),
+                  icon: i(oe),
                   class: "text-secondary-400 hover:text-secondary-500 ml-3 cursor-pointer",
                   onClick: () => {
-                    y(e);
+                    h(t);
                   }
-                }, null, 8, ["icon", "onClick"])) : g("", !0)
-              ], 6))), 128))
+                }, null, 8, ["icon", "onClick"])) : y("", !0)
+              ], 46, se))), 128))
             ]),
             _: 1
           }, 8, ["class"])
@@ -233,5 +255,5 @@ const se = { class: "flex items-center flex-wrap" }, re = {
   }
 });
 export {
-  ge as default
+  he as default
 };

package/lib/components/progress/Progress.vue.d.ts

@@ -2,7 +2,7 @@ import type { ExtractPublicPropTypes } from 'vue';
 import { type ThemeComponent } from '../../composables/useTheme';
 declare const progressProps: {
     percentage: {
-        type: NumberConstructor;
+        type: (StringConstructor | NumberConstructor)[];
         default: number;
         validator: (value: number) => boolean;
     };
@@ -23,7 +23,7 @@ export interface ProgressTheme extends ThemeComponent<ProgressProps, InternalCla
 }
 declare const _default: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
     percentage: {
-        type: NumberConstructor;
+        type: (StringConstructor | NumberConstructor)[];
         default: number;
         validator: (value: number) => boolean;
     };
@@ -39,7 +39,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     };
 }>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     percentage: {
-        type: NumberConstructor;
+        type: (StringConstructor | NumberConstructor)[];
         default: number;
         validator: (value: number) => boolean;
     };
@@ -55,7 +55,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     };
 }>> & Readonly<{}>, {
     color: string;
-    percentage: number;
+    percentage: string | number;
     gradient: boolean;
     animate: boolean;
     thick: boolean;

package/lib/components/progress/Progress.vue.js

@@ -1,10 +1,10 @@
-import { defineComponent as m, openBlock as s, createElementBlock as n, normalizeStyle as t, unref as o, normalizeClass as a, createElementVNode as c, createCommentVNode as u } from "vue";
+import { defineComponent as m, openBlock as s, createElementBlock as n, normalizeStyle as t, unref as o, normalizeClass as a, createElementVNode as u, createCommentVNode as c } from "vue";
 import { useColors as g } from "../../composables/useColors.js";
 import { useTheme as f } from "../../composables/useTheme.js";
 const y = {
   ...g.props("primary"),
   percentage: {
-    type: Number,
+    type: [Number, String],
     default: 0,
     validator: (r) => r >= 0 && r <= 100
   },
@@ -14,7 +14,7 @@ const y = {
     default: !0
   },
   thick: Boolean
-}, h = { name: "XProgress" }, v = /* @__PURE__ */ m({
+}, h = { name: "XProgress" }, N = /* @__PURE__ */ m({
   ...h,
   props: y,
   setup(r) {
@@ -26,7 +26,7 @@ const y = {
         o(d).wrapper
       ])
     }, [
-      c("div", {
+      u("div", {
         class: a(["h-full", [
           e.gradient ? "bg-gradient-to-r" : "bg-[color:var(--x-progress-bg)]",
           {
@@ -39,12 +39,12 @@ const y = {
         key: 0,
         class: a(["absolute h-full bg-secondary-100 dark:bg-secondary-700 right-0 top-0", { "duration-150 transition-[width]": e.animate }]),
         style: t({
-          width: `${100 - e.percentage}%`
+          width: `${100 - Number(e.percentage)}%`
         })
-      }, null, 6)) : u("", !0)
+      }, null, 6)) : c("", !0)
     ], 6));
   }
 });
 export {
-  v as default
+  N as default
 };

package/lib/components/scroll/Scroll.vue2.js

@@ -1,5 +1,5 @@
 import { defineComponent as v, ref as w, toRefs as y, openBlock as $, createElementBlock as z, normalizeClass as r, unref as o, normalizeStyle as E, createElementVNode as S, renderSlot as B } from "vue";
-import { useScroll as b, useResizeObserver as g, useEventListener as k } from "../../node_modules/.pnpm/@vueuse_core@10.2.0_vue@3.5.10_typescript@5.2.2_/node_modules/@vueuse/core/index.js";
+import { useScroll as b, useResizeObserver as g, useEventListener as k } from "../../node_modules/.pnpm/@vueuse_core@11.1.0_vue@3.5.10_typescript@5.2.2_/node_modules/@vueuse/core/index.js";
 import { useTheme as C } from "../../composables/useTheme.js";
 const L = {
   shadow: Boolean,

package/lib/components/select/Select.vue.d.ts

@@ -4,6 +4,7 @@ declare const selectProps: {
     placeholder: StringConstructor;
     options: PropType<SelectOption[]>;
     multiple: BooleanConstructor;
+    truncate: BooleanConstructor;
     flat: BooleanConstructor;
     native: BooleanConstructor;
     filterable: BooleanConstructor;
@@ -64,10 +65,12 @@ declare const selectProps: {
 export type SelectOption = {
     value: number | string;
     label: string;
+    prefix?: string;
+    suffix?: string;
     disabled?: boolean;
 };
 export type SelectProps = ExtractPublicPropTypes<typeof selectProps>;
-type InternalClasses = 'wrapper' | 'box' | 'content' | 'search' | 'contentBody' | 'iconWrapper' | 'icon';
+type InternalClasses = 'wrapper' | 'box' | 'truncateCounter' | 'content' | 'search' | 'contentBody' | 'iconWrapper' | 'icon';
 type InternalExtraData = {
     errorInternal: Ref<boolean>;
 };
@@ -77,6 +80,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<im
     placeholder: StringConstructor;
     options: PropType<SelectOption[]>;
     multiple: BooleanConstructor;
+    truncate: BooleanConstructor;
     flat: BooleanConstructor;
     native: BooleanConstructor;
     filterable: BooleanConstructor;
@@ -143,6 +147,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<im
     placeholder: StringConstructor;
     options: PropType<SelectOption[]>;
     multiple: BooleanConstructor;
+    truncate: BooleanConstructor;
     flat: BooleanConstructor;
     native: BooleanConstructor;
     filterable: BooleanConstructor;
@@ -216,6 +221,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<im
     rules: unknown[];
     skipFormRegistry: boolean;
     multiple: boolean;
+    truncate: boolean;
     native: boolean;
     filterable: boolean;
     filterPlaceholder: string;
@@ -224,6 +230,42 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<im
     virtualListOverscan: number;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>, {
     "content-header"?(_: {}): any;
+    prefix?(_: {
+        item: {
+            value: string | number;
+            label: string;
+            active: boolean;
+            prefix: string | undefined;
+            suffix: string | undefined;
+            disabled: boolean | undefined;
+            iconRight: string | undefined;
+            onClick: () => void;
+        };
+    }): any;
+    label?(_: {
+        item: {
+            value: string | number;
+            label: string;
+            active: boolean;
+            prefix: string | undefined;
+            suffix: string | undefined;
+            disabled: boolean | undefined;
+            iconRight: string | undefined;
+            onClick: () => void;
+        };
+    }): any;
+    suffix?(_: {
+        item: {
+            value: string | number;
+            label: string;
+            active: boolean;
+            prefix: string | undefined;
+            suffix: string | undefined;
+            disabled: boolean | undefined;
+            iconRight: string | undefined;
+            onClick: () => void;
+        };
+    }): any;
     "content-footer"?(_: {}): any;
     icon?(_: {}): any;
 }>;