@indielayer/ui 1.5.1 → 1.6.0

package/lib/components/button/Button.vue2.js

@@ -1,5 +1,5 @@
-import { defineComponent as D, ref as I, inject as T, computed as l, useAttrs as V, unref as t, openBlock as a, createBlock as r, resolveDynamicComponent as A, normalizeClass as u, normalizeStyle as E, withCtx as F, createCommentVNode as d, createElementVNode as m, renderSlot as K } from "vue";
-import { useTheme as O } from "../../composables/useTheme.js";
+import { defineComponent as D, ref as I, inject as O, computed as l, useAttrs as T, unref as t, openBlock as a, createBlock as r, resolveDynamicComponent as V, normalizeClass as u, normalizeStyle as A, withCtx as E, createCommentVNode as d, createElementVNode as m, renderSlot as F } from "vue";
+import { useTheme as K } from "../../composables/useTheme.js";
 import { useColors as X } from "../../composables/useColors.js";
 import { useCommon as b } from "../../composables/useCommon.js";
 import { useInteractive as h } from "../../composables/useInteractive.js";
@@ -21,7 +21,7 @@ const J = {
   icon: String,
   iconLeft: String,
   iconRight: String,
-  to: String,
+  to: [String, Object],
   outlined: Boolean,
   rounded: Boolean,
   glow: Boolean,
@@ -38,10 +38,10 @@ const J = {
   ...M,
   props: J,
   setup(y, { expose: v }) {
-    const e = y, g = I(null), s = T(q, {
+    const e = y, g = I(null), s = O(q, {
       isButtonGroup: !1,
       groupProps: {}
-    }), { isButtonGroup: B } = s, n = l(() => s.groupProps.size || e.size), z = l(() => s.groupProps.flat || e.flat), k = l(() => e.color || s.groupProps.color), P = l(() => e.ghost || s.groupProps.ghost), S = l(() => e.light || s.groupProps.light), w = l(() => e.outlined || s.groupProps.outlined), i = l(() => e.disabled || s.groupProps.disabled), p = l(() => e.icon || e.iconLeft), C = V(), R = l(() => C.href ? "a" : e.to ? "router-link" : e.tag), L = l(() => ({
+    }), { isButtonGroup: B } = s, n = l(() => s.groupProps.size || e.size), z = l(() => s.groupProps.flat || e.flat), k = l(() => e.color || s.groupProps.color), P = l(() => e.ghost || s.groupProps.ghost), S = l(() => e.light || s.groupProps.light), w = l(() => e.outlined || s.groupProps.outlined), i = l(() => e.disabled || s.groupProps.disabled), p = l(() => e.icon || e.iconLeft), C = T(), R = l(() => C.href ? "a" : e.to ? "router-link" : e.tag), L = l(() => ({
       size: t(n),
       flat: t(z),
       color: t(k),
@@ -55,10 +55,10 @@ const J = {
       iconLeft: t(p),
       iconRight: e.iconRight,
       rounded: e.rounded
-    })), { className: G, classes: c, styles: $ } = O("Button", {}, L, {
+    })), { className: G, classes: c, styles: $ } = K("Button", {}, L, {
       isButtonGroup: B
     }), { focus: j, blur: N } = h(g);
-    return v({ focus: j, blur: N }), (o, Q) => (a(), r(A(R.value), {
+    return v({ focus: j, blur: N }), (o, Q) => (a(), r(V(R.value), {
       ref_key: "elRef",
       ref: g,
       to: o.to,
@@ -69,13 +69,13 @@ const J = {
         t(c).wrapper,
         { "w-full": o.block }
       ]),
-      style: E(t($)),
+      style: A(t($)),
       "aria-busy": o.loading ? "true" : null,
       "aria-disabled": o.tag !== "button" && i.value ? "true" : null,
       disabled: i.value || o.loading,
       type: o.tag === "button" ? o.type : null
     }, {
-      default: F(() => [
+      default: E(() => [
         o.loading ? (a(), r(H, {
           key: 0,
           class: "absolute",
@@ -95,7 +95,7 @@ const J = {
             ])
           }, null, 8, ["size", "icon", "class"])) : d("", !0),
           m("span", null, [
-            K(o.$slots, "default", {}, void 0, !0)
+            F(o.$slots, "default", {}, void 0, !0)
           ])
         ], 2),
         o.iconRight ? (a(), r(f, {

package/lib/components/carousel/Carousel.vue.d.ts

@@ -45,7 +45,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
     to: (index: number) => void;
     next: () => void;
     prev: () => void;
-}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "update"[], "update", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     autoplay: BooleanConstructor;
     delay: {
         type: NumberConstructor;
@@ -60,7 +60,9 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
         default: string;
     };
     classDots: (ArrayConstructor | StringConstructor)[];
-}>>, {
+}>> & {
+    onUpdate?: ((...args: any[]) => any) | undefined;
+}, {
     autoplay: boolean;
     delay: number;
     showDots: boolean;
@@ -70,11 +72,15 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
         to: (index: number) => void;
         next: () => void;
         prev: () => void;
+        current: number;
+        total: number;
     }): any;
     dots?(_: {
         to: (index: number) => void;
         next: () => void;
         prev: () => void;
+        current: number;
+        total: number;
     }): any;
 }>;
 export default _default;

package/lib/components/carousel/Carousel.vue.js

@@ -1,6 +1,6 @@
-import { defineComponent as D, ref as h, computed as I, onMounted as N, watch as $, openBlock as p, createElementBlock as m, normalizeStyle as z, unref as l, normalizeClass as d, createElementVNode as g, renderSlot as k, normalizeProps as C, guardReactiveProps as A, mergeProps as R, Fragment as E, renderList as V, createCommentVNode as X } from "vue";
-import { useTheme as b } from "../../composables/useTheme.js";
-const F = ["onClick"], L = {
+import { defineComponent as N, ref as h, computed as $, onMounted as z, watch as A, openBlock as p, createElementBlock as m, normalizeStyle as R, unref as l, normalizeClass as d, createElementVNode as g, renderSlot as k, normalizeProps as C, guardReactiveProps as E, mergeProps as V, Fragment as X, renderList as b, createCommentVNode as F } from "vue";
+import { useTheme as L } from "../../composables/useTheme.js";
+const M = ["onClick"], T = {
   autoplay: Boolean,
   delay: {
     type: Number,
@@ -15,80 +15,83 @@ const F = ["onClick"], L = {
     default: "slide"
   },
   classDots: [Array, String]
-}, M = {
+}, j = {
   name: "XCarousel",
   validators: {}
-}, x = /* @__PURE__ */ D({
-  ...M,
-  props: L,
-  setup(_, { expose: P }) {
-    const f = _, r = h(null), t = h(0), u = I(() => {
-      var e;
-      return ((e = r.value) == null ? void 0 : e.children.length) || 0;
+}, H = /* @__PURE__ */ N({
+  ...j,
+  props: T,
+  emits: ["update"],
+  setup(_, { expose: P, emit: S }) {
+    const v = _, u = h(null), e = h(0), a = $(() => {
+      var t;
+      return ((t = u.value) == null ? void 0 : t.children.length) || 0;
     });
     let s = null;
-    N(() => {
-      y(), S();
+    z(() => {
+      y(), w();
     });
-    function S() {
-      f.autoplay && (s && clearInterval(s), s = setInterval(() => {
+    function w() {
+      v.autoplay && (s && clearInterval(s), s = setInterval(() => {
         i();
-      }, f.delay));
+      }, v.delay));
     }
-    $(t, y);
+    A(e, () => {
+      y(), I("update", e.value);
+    });
     function y() {
-      if (r.value) {
-        const e = r.value.children;
-        for (let o = 0; o < e.length; o++) {
-          const n = e[o];
-          n.style.transform = `translateX(${(o - t.value) * 100}%)`;
+      if (u.value) {
+        const t = u.value.children;
+        for (let n = 0; n < t.length; n++) {
+          const r = t[n];
+          r.style.transform = `translateX(${(n - e.value) * 100}%)`;
         }
       }
     }
-    function c(e) {
-      t.value = e, s && clearInterval(s);
+    function c(t) {
+      e.value = t, s && clearInterval(s);
     }
     function i() {
-      t.value < u.value - 1 ? t.value += 1 : t.value = 0;
+      e.value < a.value - 1 ? e.value += 1 : e.value = 0;
     }
-    function v() {
-      t.value > 0 ? t.value -= 1 : t.value = u.value - 1;
+    function f() {
+      e.value > 0 ? e.value -= 1 : e.value = a.value - 1;
     }
-    const { styles: w, classes: a, className: B } = b("Carousel", {}, f, {
-      current: t,
-      total: u
-    });
-    return P({ to: c, next: i, prev: v }), (e, o) => (p(), m("div", {
-      style: z(l(w)),
+    const { styles: B, classes: o, className: D } = L("Carousel", {}, v, {
+      current: e,
+      total: a
+    }), I = S;
+    return P({ to: c, next: i, prev: f }), (t, n) => (p(), m("div", {
+      style: R(l(B)),
       class: d([
-        l(B),
-        l(a).wrapper
+        l(D),
+        l(o).wrapper
       ])
     }, [
       g("div", {
         ref_key: "slidesRef",
-        ref: r,
-        class: d(l(a).slides)
+        ref: u,
+        class: d(l(o).slides)
       }, [
-        k(e.$slots, "default", C(A({ to: c, next: i, prev: v })))
+        k(t.$slots, "default", C(E({ to: c, next: i, prev: f, current: e.value, total: a.value })))
       ], 2),
-      e.showDots ? k(e.$slots, "dots", C(R({ key: 0 }, { to: c, next: i, prev: v })), () => [
+      t.showDots ? k(t.$slots, "dots", C(V({ key: 0 }, { to: c, next: i, prev: f, current: e.value, total: a.value })), () => [
         g("div", {
-          class: d([l(a).dots, e.classDots])
+          class: d([l(o).dots, t.classDots])
         }, [
-          (p(!0), m(E, null, V(u.value, (n) => (p(), m("span", {
-            key: n,
+          (p(!0), m(X, null, b(a.value, (r) => (p(), m("span", {
+            key: r,
             class: d([
-              l(a).dot,
-              n - 1 === t.value ? l(a).dotActive : ""
+              l(o).dot,
+              r - 1 === e.value ? l(o).dotActive : ""
             ]),
-            onClick: (T) => c(n - 1)
-          }, null, 10, F))), 128))
+            onClick: (q) => c(r - 1)
+          }, null, 10, M))), 128))
         ], 2)
-      ]) : X("", !0)
+      ]) : F("", !0)
     ], 6));
   }
 });
 export {
-  x as default
+  H as default
 };

package/lib/components/checkbox/theme/Checkbox.base.theme.js

@@ -1,59 +1,59 @@
-const o = {
+const i = {
   classes: {
-    wrapper: ({ data: r }) => {
-      const e = ["inline-block relative cursor-pointer align-middle"];
-      return r.isInsideForm && !r.isInsideFormGroup && e.push("mb-3"), e;
+    wrapper: ({ data: e }) => {
+      const r = ["inline-block relative cursor-pointer align-middle"];
+      return e.isInsideForm && !e.isInsideFormGroup && r.push("mb-5"), r;
     },
-    box: ({ props: r }) => {
-      const e = ["rounded flex justify-center items-center shrink-0 border border-[color:var(--x-checkbox-border)] bg-[color:var(--x-checkbox-bg)] dark:border-[color:var(--x-checkbox-dark-border)] dark:bg-[color:var(--x-checkbox-dark-bg)]"];
-      return r.size === "lg" ? e.push("h-5 w-5") : r.size === "xl" ? e.push("h-6 w-6") : e.push("h-4 w-4"), e;
+    box: ({ props: e }) => {
+      const r = ["rounded flex justify-center items-center shrink-0 border border-[color:var(--x-checkbox-border)] bg-[color:var(--x-checkbox-bg)] dark:border-[color:var(--x-checkbox-dark-border)] dark:bg-[color:var(--x-checkbox-dark-bg)]"];
+      return e.size === "lg" ? r.push("h-5 w-5") : e.size === "xl" ? r.push("h-6 w-6") : r.push("h-4 w-4"), r;
     },
-    content: ({ props: r }) => {
-      const e = ["flex items-baseline"];
-      return r.disabled && e.push("cursor-not-allowed"), e;
+    content: ({ props: e }) => {
+      const r = ["flex items-center"];
+      return e.disabled && r.push("cursor-not-allowed"), r;
     },
-    icon: ({ props: r }) => {
-      const e = ["fill-current text-white"];
-      return r.size === "lg" ? e.push("h-3 w-3") : r.size === "xl" ? e.push("h-4 w-4") : e.push("h-2.5 w-2.5"), e;
+    icon: ({ props: e }) => {
+      const r = ["fill-current text-white"];
+      return e.size === "lg" ? r.push("h-3 w-3") : e.size === "xl" ? r.push("h-4 w-4") : r.push("h-2.5 w-2.5"), r;
     },
-    label: ({ props: r }) => {
-      const e = ["inline-block font-medium text-secondary-800 dark:text-secondary-200 pl-2"];
-      return r.size === "xs" ? e.push("text-xs") : r.size === "sm" ? e.push("text-sm") : r.size === "lg" ? e.push("text-lg") : r.size === "xl" && e.push("text-xl"), e;
+    label: ({ props: e, data: r }) => {
+      const s = ["inline-block text-secondary-800 dark:text-secondary-200 pl-2"];
+      return s.push(r.isInsideFormGroup ? "font-normal" : "font-medium"), e.size === "xs" ? s.push("text-xs") : e.size === "sm" ? s.push("text-sm") : e.size === "lg" ? s.push("text-lg") : e.size === "xl" && s.push("text-xl"), s;
     }
   },
-  styles({ props: r, colors: e, css: l, data: i }) {
-    const s = e.getPalette("gray"), t = e.getPalette(r.color), a = [];
-    return r.loading ? l.variables({
+  styles({ props: e, colors: r, css: s, data: a }) {
+    const t = r.getPalette("gray"), l = r.getPalette(e.color), o = [];
+    return e.loading ? s.variables({
       bg: "transparent",
       border: "transparent",
       dark: {
         bg: "transparent",
         border: "transparent"
       }
-    }) : (r.disabled ? a.push(l.variables({
-      bg: s[100],
-      border: s[200],
+    }) : (e.disabled ? o.push(s.variables({
+      bg: t[100],
+      border: t[200],
       dark: {
-        bg: s[800],
-        border: s[700]
+        bg: t[800],
+        border: t[700]
       }
-    })) : (i.checked ? a.push(l.variables({
-      bg: t[500],
-      border: t[500],
+    })) : (a.checked ? o.push(s.variables({
+      bg: l[500],
+      border: l[500],
       dark: {
-        bg: t[500],
-        border: t[500]
+        bg: l[500],
+        border: l[500]
       }
-    })) : a.push(l.variables({
+    })) : o.push(s.variables({
       bg: "#fff",
-      border: r.glow ? t[300] : s[300],
+      border: e.glow ? l[300] : t[300],
       dark: {
-        bg: s[900],
-        border: r.glow ? t[300] : s[400]
+        bg: t[900],
+        border: e.glow ? l[300] : t[400]
       }
-    })), r.glow && a.push(l.get("glow", e.getColorOpacity(t[500], 0.5)))), a);
+    })), e.glow && o.push(s.get("glow", r.getColorOpacity(l[500], 0.5)))), o);
   }
-}, n = o;
+}, n = i;
 export {
   n as default
 };