@indielayer/ui 1.2.0 → 1.4.0

package/lib/components/skeleton/Skeleton.vue.d.ts

@@ -1,22 +1,44 @@
-import type { ExtractPublicPropTypes } from 'vue';
+import type { ExtractPublicPropTypes, PropType } from 'vue';
+import { type ThemeComponent } from '../../composables/useTheme';
+declare const shapes: readonly ["line", "circle"];
+export type SkeletonShape = typeof shapes[number];
 declare const skeletonProps: {
     tag: {
         type: StringConstructor;
         default: string;
     };
+    shape: {
+        type: PropType<"line" | "circle">;
+        default: string;
+        validator: (val: SkeletonShape) => boolean;
+    };
 };
 export type SkeletonProps = ExtractPublicPropTypes<typeof skeletonProps>;
+type InternalClasses = 'wrapper';
+export interface SkeletonTheme extends ThemeComponent<SkeletonProps, InternalClasses> {
+}
 declare const _default: import("vue").DefineComponent<{
     tag: {
         type: StringConstructor;
         default: string;
     };
+    shape: {
+        type: PropType<"line" | "circle">;
+        default: string;
+        validator: (val: "line" | "circle") => boolean;
+    };
 }, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     tag: {
         type: StringConstructor;
         default: string;
     };
+    shape: {
+        type: PropType<"line" | "circle">;
+        default: string;
+        validator: (val: "line" | "circle") => boolean;
+    };
 }>>, {
     tag: string;
+    shape: "line" | "circle";
 }, {}>;
 export default _default;

package/lib/components/skeleton/Skeleton.vue.js

@@ -1,24 +1,33 @@
-import { defineComponent as l, openBlock as c, createBlock as m, resolveDynamicComponent as p, normalizeStyle as i, unref as e, normalizeClass as f, withCtx as u, createTextVNode as _ } from "vue";
-import { useTheme as d } from "../../composables/theme.js";
-import y from "./Skeleton.theme.js";
-const k = {
+import { defineComponent as c, openBlock as p, createBlock as i, resolveDynamicComponent as m, normalizeStyle as d, unref as t, normalizeClass as u, withCtx as f, createTextVNode as _ } from "vue";
+import { useTheme as h } from "../../composables/useTheme.js";
+const y = ["line", "circle"], s = {
+  shape: y
+}, k = {
   tag: {
     type: String,
     default: "div"
+  },
+  shape: {
+    type: String,
+    default: "line",
+    validator: (e) => s.shape.includes(e)
   }
-}, h = { name: "XSkeleton" }, v = /* @__PURE__ */ l({
-  ...h,
+}, S = {
+  name: "XSkeleton",
+  validators: s
+}, x = /* @__PURE__ */ c({
+  ...S,
   props: k,
-  setup(t) {
-    const s = t, { styles: o, classes: n, className: r } = d("skeleton", y, s);
-    return (a, C) => (c(), m(p(a.tag), {
-      style: i(e(o)),
-      class: f([
-        e(r),
-        e(n).wrapper
+  setup(e) {
+    const a = e, { styles: o, classes: n, className: l } = h("Skeleton", {}, a);
+    return (r, g) => (p(), i(m(r.tag), {
+      style: d(t(o)),
+      class: u([
+        t(l),
+        t(n).wrapper
       ])
     }, {
-      default: u(() => [
+      default: f(() => [
         _(" ​ ")
       ]),
       _: 1
@@ -26,5 +35,5 @@ const k = {
   }
 });
 export {
-  v as default
+  x as default
 };

package/lib/components/skeleton/index.d.ts

@@ -1,3 +1,2 @@
 export { default as XSkeleton } from './Skeleton.vue';
-export type { SkeletonProps } from './Skeleton.vue';
-export type { SkeletonTheme } from './Skeleton.theme';
+export type { SkeletonProps, SkeletonTheme } from './Skeleton.vue';

package/lib/components/skeleton/theme/Skeleton.base.theme.d.ts

@@ -0,0 +1,3 @@
+import type { SkeletonTheme } from '../Skeleton.vue';
+declare const theme: SkeletonTheme;
+export default theme;

package/lib/components/skeleton/theme/Skeleton.base.theme.js

@@ -0,0 +1,11 @@
+const a = {
+  classes: {
+    wrapper: ({ props: s }) => {
+      const e = ["animate-pulse bg-gray-300 dark:bg-gray-600"];
+      return s.shape === "circle" ? e.push("w-8 h-8 rounded-full") : e.push("rounded-md"), e;
+    }
+  }
+}, r = a;
+export {
+  r as default
+};

package/lib/components/skeleton/theme/Skeleton.carbon.theme.d.ts

@@ -0,0 +1,3 @@
+import type { SkeletonTheme } from '../Skeleton.vue';
+declare const theme: SkeletonTheme;
+export default theme;

package/lib/components/skeleton/theme/Skeleton.carbon.theme.js

@@ -0,0 +1,5 @@
+import e from "./Skeleton.base.theme.js";
+const t = e, o = t;
+export {
+  o as default
+};

package/lib/components/slider/Slider.vue.d.ts

@@ -1,6 +1,6 @@
 import { type ExtractPublicPropTypes } from 'vue';
+import { type ThemeComponent } from '../../composables/useTheme';
 declare const sliderProps: {
-    label: StringConstructor;
     min: NumberConstructor;
     max: NumberConstructor;
     step: {
@@ -9,6 +9,7 @@ declare const sliderProps: {
     };
     gradient: BooleanConstructor;
     modelValue: import("vue").PropType<string | number | boolean | object | any[] | undefined>;
+    id: StringConstructor;
     name: StringConstructor;
     readonly: BooleanConstructor;
     required: BooleanConstructor;
@@ -16,26 +17,36 @@ declare const sliderProps: {
         readonly type: BooleanConstructor;
         readonly default: true;
     };
+    label: StringConstructor;
+    helper: StringConstructor;
     error: StringConstructor;
+    hideFooter: BooleanConstructor;
     rules: {
         readonly type: ArrayConstructor;
         readonly default: () => never[];
     };
     disabled: BooleanConstructor;
     loading: BooleanConstructor;
+    loadingLabel: StringConstructor;
+    loadingStatus: {
+        readonly type: import("vue").PropType<import("../loader/Loader.vue").LoaderStatus>;
+        readonly default: "active";
+    };
     color: {
         readonly type: StringConstructor;
         readonly default: string | undefined;
     };
     size: {
-        readonly type: import("vue").PropType<import("../../composables/common").Size>;
+        readonly type: import("vue").PropType<import("../../composables/useCommon").Size>;
         readonly default: "md";
         readonly validator: (value: string) => boolean;
     };
 };
 export type SliderProps = ExtractPublicPropTypes<typeof sliderProps>;
+type InternalClasses = 'wrapper' | 'drag';
+export interface SliderTheme extends ThemeComponent<SliderProps, InternalClasses> {
+}
 declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
-    label: StringConstructor;
     min: NumberConstructor;
     max: NumberConstructor;
     step: {
@@ -44,6 +55,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
     };
     gradient: BooleanConstructor;
     modelValue: import("vue").PropType<string | number | boolean | object | any[] | undefined>;
+    id: StringConstructor;
     name: StringConstructor;
     readonly: BooleanConstructor;
     required: BooleanConstructor;
@@ -51,19 +63,27 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
         readonly type: BooleanConstructor;
         readonly default: true;
     };
+    label: StringConstructor;
+    helper: StringConstructor;
     error: StringConstructor;
+    hideFooter: BooleanConstructor;
     rules: {
         readonly type: ArrayConstructor;
         readonly default: () => never[];
     };
     disabled: BooleanConstructor;
     loading: BooleanConstructor;
+    loadingLabel: StringConstructor;
+    loadingStatus: {
+        readonly type: import("vue").PropType<import("../loader/Loader.vue").LoaderStatus>;
+        readonly default: "active";
+    };
     color: {
         readonly type: StringConstructor;
         readonly default: string | undefined;
     };
     size: {
-        readonly type: import("vue").PropType<import("../../composables/common").Size>;
+        readonly type: import("vue").PropType<import("../../composables/useCommon").Size>;
         readonly default: "md";
         readonly validator: (value: string) => boolean;
     };
@@ -74,7 +94,6 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
     validate: (val?: any) => boolean;
     setError: (val: string) => void;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, string[], string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
-    label: StringConstructor;
     min: NumberConstructor;
     max: NumberConstructor;
     step: {
@@ -83,6 +102,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
     };
     gradient: BooleanConstructor;
     modelValue: import("vue").PropType<string | number | boolean | object | any[] | undefined>;
+    id: StringConstructor;
     name: StringConstructor;
     readonly: BooleanConstructor;
     required: BooleanConstructor;
@@ -90,19 +110,27 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
         readonly type: BooleanConstructor;
         readonly default: true;
     };
+    label: StringConstructor;
+    helper: StringConstructor;
     error: StringConstructor;
+    hideFooter: BooleanConstructor;
     rules: {
         readonly type: ArrayConstructor;
         readonly default: () => never[];
     };
     disabled: BooleanConstructor;
     loading: BooleanConstructor;
+    loadingLabel: StringConstructor;
+    loadingStatus: {
+        readonly type: import("vue").PropType<import("../loader/Loader.vue").LoaderStatus>;
+        readonly default: "active";
+    };
     color: {
         readonly type: StringConstructor;
         readonly default: string | undefined;
     };
     size: {
-        readonly type: import("vue").PropType<import("../../composables/common").Size>;
+        readonly type: import("vue").PropType<import("../../composables/useCommon").Size>;
         readonly default: "md";
         readonly validator: (value: string) => boolean;
     };
@@ -111,14 +139,16 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
 }, {
     disabled: boolean;
     color: string;
-    size: import("../../composables/common").Size;
-    required: boolean;
-    step: number;
+    size: import("../../composables/useCommon").Size;
     loading: boolean;
+    loadingStatus: import("../loader/Loader.vue").LoaderStatus;
     readonly: boolean;
+    required: boolean;
     validateOnInput: boolean;
+    hideFooter: boolean;
     rules: unknown[];
     gradient: boolean;
+    step: number;
 }, {}>, {
     prefix?(_: {
         value: number;

package/lib/components/slider/Slider.vue.js

@@ -1,18 +1,17 @@
-import { defineComponent as H, ref as i, watch as C, computed as J, openBlock as x, createElementBlock as y, normalizeClass as d, unref as o, normalizeStyle as N, toDisplayString as V, createCommentVNode as P, createElementVNode as v, renderSlot as R, createVNode as O } from "vue";
-import { useEventListener as f } from "../../node_modules/.pnpm/@vueuse_core@10.2.0_vue@3.3.4/node_modules/@vueuse/core/index.js";
-import { useCommon as X } from "../../composables/common.js";
-import { useColors as Q } from "../../composables/colors.js";
-import { useInteractive as L } from "../../composables/interactive.js";
-import { useInputtable as h } from "../../composables/inputtable.js";
-import { useTheme as U } from "../../composables/theme.js";
-import Y from "../progress/Progress.vue.js";
-import Z from "./Slider.theme.js";
-const ee = ["textContent"], te = { class: "flex items-center relative w-full" }, re = { class: "-mx-2" }, oe = ["textContent"], ae = {
-  ...X.props(),
-  ...Q.props("primary"),
-  ...L.props(),
-  ...h.props(),
-  label: String,
+import { defineComponent as j, ref as u, watch as D, computed as G, openBlock as k, createBlock as H, normalizeClass as g, unref as l, normalizeStyle as N, withCtx as J, createElementVNode as c, renderSlot as C, createVNode as O, createElementBlock as Q, toDisplayString as U, createCommentVNode as Y } from "vue";
+import { useEventListener as f } from "../../node_modules/.pnpm/@vueuse_core@10.2.0_vue@3.3.9/node_modules/@vueuse/core/index.js";
+import { useCommon as V } from "../../composables/useCommon.js";
+import { useColors as Z } from "../../composables/useColors.js";
+import { useInteractive as P } from "../../composables/useInteractive.js";
+import { useInputtable as b } from "../../composables/useInputtable.js";
+import { useTheme as ee } from "../../composables/useTheme.js";
+import te from "../label/Label.vue.js";
+import re from "../progress/Progress.vue.js";
+const oe = { class: "flex items-center relative w-full" }, ae = { class: "-mx-2" }, se = ["textContent"], le = {
+  ...V.props(),
+  ...Z.props("primary"),
+  ...P.props(),
+  ...b.props(),
   min: Number,
   max: Number,
   step: {
@@ -20,62 +19,62 @@ const ee = ["textContent"], te = { class: "flex items-center relative w-full" },
     default: 1
   },
   gradient: Boolean
-}, le = {
+}, ne = {
   name: "XSlider",
   validators: {
-    ...X.validators()
+    ...V.validators()
   }
-}, ve = /* @__PURE__ */ H({
-  ...le,
-  props: ae,
-  emits: h.emits(!1),
-  setup(S, { expose: W, emit: w }) {
-    const p = S, g = i(null), a = i(null), n = i(null), t = i(Number(p.modelValue ?? 0)), { focus: c, blur: E } = L(g);
-    C(() => p.modelValue, (e) => {
+}, be = /* @__PURE__ */ j({
+  ...ne,
+  props: le,
+  emits: b.emits(!1),
+  setup(R, { expose: X, emit: L }) {
+    const d = R, x = L, v = u(null), o = u(null), n = u(null), t = u(Number(d.modelValue ?? 0)), { focus: p, blur: S } = P(v);
+    D(() => d.modelValue, (e) => {
       t.value = Number(e ?? 0);
-    }), C(t, (e) => {
-      w("update:modelValue", e);
+    }), D(t, (e) => {
+      x("update:modelValue", e);
     });
-    const l = i(), _ = J(() => !!l.value);
-    function I(e) {
-      if (e.stopPropagation(), !a.value || !n.value)
+    const a = u(), w = G(() => !!a.value);
+    function W(e) {
+      if (e.stopPropagation(), !o.value || !n.value)
         return;
-      c();
+      p();
       const r = n.value.offsetWidth;
       let s = Math.floor(e.offsetX * 100 / r);
       s < 0 && (s = 0), s > 100 && (s = 100), t.value = s, setTimeout(() => {
         var m;
-        l.value = {
+        a.value = {
           x: e.x,
           y: e.y,
           maxWidth: r,
-          offsetX: (m = a.value) == null ? void 0 : m.offsetLeft
+          offsetX: (m = o.value) == null ? void 0 : m.offsetLeft
         };
       }), e.preventDefault(), e.stopPropagation();
     }
     function $(e) {
-      !a.value || !n.value || (c(), l.value = {
+      !o.value || !n.value || (p(), a.value = {
         x: e.x,
         y: e.y,
         maxWidth: n.value.offsetWidth,
-        offsetX: a.value.offsetLeft
+        offsetX: o.value.offsetLeft
       }, e.preventDefault(), e.stopPropagation());
     }
     function B(e) {
-      if (!l.value || !a.value)
+      if (!a.value || !o.value)
         return;
-      const { x: r, maxWidth: s, offsetX: m } = l.value, k = e.x - r;
-      if (k === 0)
+      const { x: r, maxWidth: s, offsetX: m } = a.value, _ = e.x - r;
+      if (_ === 0)
         return;
-      const G = m + k;
-      let u = Math.floor(G * 100 / s);
-      u < 0 && (u = 0), u > 100 && (u = 100), t.value = u, e.preventDefault(), e.stopPropagation();
+      const K = m + _;
+      let i = Math.floor(K * 100 / s);
+      i < 0 && (i = 0), i > 100 && (i = 100), t.value = i, e.preventDefault(), e.stopPropagation();
     }
-    function M(e) {
-      l.value && (l.value = void 0, e.preventDefault(), e.stopPropagation());
+    function E(e) {
+      a.value && (a.value = void 0, e.preventDefault(), e.stopPropagation());
     }
-    typeof window < "u" && (f(n, "pointerdown", I, !1), f(a, "pointerdown", $, !1), f(window, "pointermove", B, !0), f(window, "pointerup", M, !0)), f(g, "keydown", z);
-    function z(e) {
+    typeof window < "u" && (f(n, "pointerdown", W, !1), f(o, "pointerdown", $, !1), f(window, "pointermove", B, !0), f(window, "pointerup", E, !0)), f(v, "keydown", I);
+    function I(e) {
       if (e.code === "ArrowLeft") {
         const r = t.value - 1;
         r >= 0 && (t.value = r), e.preventDefault();
@@ -85,64 +84,65 @@ const ee = ["textContent"], te = { class: "flex items-center relative w-full" },
       }
     }
     const {
-      errorInternal: D,
-      reset: A,
-      validate: T,
-      setError: F,
-      isInsideForm: K
-    } = h(p, { focus: c, emit: w, withListeners: !1 }), { styles: j, classes: b, className: q } = U("slider", Z, p);
-    return W({ focus: c, blur: E, reset: A, validate: T, setError: F }), (e, r) => (x(), y("label", {
+      errorInternal: y,
+      reset: q,
+      validate: M,
+      setError: z,
+      isInsideForm: A
+    } = b(d, { focus: p, emit: x, withListeners: !1 }), { styles: T, classes: h, className: F } = ee("Slider", {}, d);
+    return X({ focus: p, blur: S, reset: q, validate: M, setError: z }), (e, r) => (k(), H(te, {
       ref_key: "elRef",
-      ref: g,
+      ref: v,
       tabindex: "0",
-      class: d(["group relative", [
-        o(q),
-        o(b).wrapper,
-        { "mb-3": o(K) }
+      class: g(["group", [
+        l(F),
+        l(h).wrapper
       ]]),
-      style: N(o(j))
-    }, [
-      e.label ? (x(), y("p", {
-        key: 0,
-        class: d(o(b).label),
-        textContent: V(e.label)
-      }, null, 10, ee)) : P("", !0),
-      v("div", te, [
-        R(e.$slots, "prefix", { value: t.value }),
-        v("div", {
-          ref_key: "progressRef",
-          ref: n,
-          class: d([[_.value ? "cursor-grabbing" : "cursor-grab"], "relative w-full py-2 mx-2"])
-        }, [
-          v("div", re, [
-            O(Y, {
-              percentage: t.value,
-              animate: !1,
-              thick: "",
-              class: "w-full",
-              gradient: e.gradient
-            }, null, 8, ["percentage", "gradient"])
-          ]),
-          v("div", {
-            ref_key: "dragRef",
-            ref: a,
-            class: d(["absolute group-focus:border-[color:var(--x-slider-border)]", [
-              o(b).drag,
-              _.value ? "cursor-grabbing" : "cursor-grab"
-            ]]),
-            style: N(`left: ${t.value}%;`)
-          }, null, 6)
-        ], 2),
-        R(e.$slots, "suffix", { value: t.value })
+      style: N(l(T)),
+      disabled: e.disabled,
+      required: e.required,
+      "is-inside-form": l(A),
+      label: e.label
+    }, {
+      default: J(() => [
+        c("div", oe, [
+          C(e.$slots, "prefix", { value: t.value }),
+          c("div", {
+            ref_key: "progressRef",
+            ref: n,
+            class: g([[w.value ? "cursor-grabbing" : "cursor-grab"], "relative w-full py-2 mx-2"])
+          }, [
+            c("div", ae, [
+              O(re, {
+                percentage: t.value,
+                animate: !1,
+                thick: "",
+                class: "w-full",
+                gradient: e.gradient
+              }, null, 8, ["percentage", "gradient"])
+            ]),
+            c("div", {
+              ref_key: "dragRef",
+              ref: o,
+              class: g(["absolute group-focus:border-[color:var(--x-slider-border)]", [
+                l(h).drag,
+                w.value ? "cursor-grabbing" : "cursor-grab"
+              ]]),
+              style: N(`left: ${t.value}%;`)
+            }, null, 6)
+          ], 2),
+          C(e.$slots, "suffix", { value: t.value })
+        ]),
+        l(y) ? (k(), Q("p", {
+          key: 0,
+          class: "text-sm text-red-500 mt-1",
+          textContent: U(l(y))
+        }, null, 8, se)) : Y("", !0)
       ]),
-      o(D) ? (x(), y("p", {
-        key: 1,
-        class: "text-sm text-red-500 mt-1",
-        textContent: V(o(D))
-      }, null, 8, oe)) : P("", !0)
-    ], 6));
+      _: 3
+    }, 8, ["style", "disabled", "required", "is-inside-form", "label", "class"]));
   }
 });
 export {
-  ve as default
+  be as default
 };

package/lib/components/slider/index.d.ts

@@ -1,2 +1,2 @@
 export { default as XSlider } from './Slider.vue';
-export type { SliderProps } from './Slider.vue';
+export type { SliderProps, SliderTheme } from './Slider.vue';

package/lib/components/slider/theme/Slider.base.theme.d.ts

@@ -0,0 +1,3 @@
+import type { SliderTheme } from '../Slider.vue';
+declare const theme: SliderTheme;
+export default theme;

package/lib/components/slider/theme/Slider.base.theme.js

@@ -0,0 +1,16 @@
+const o = {
+  classes: {
+    wrapper: "",
+    drag: "w-[20px] h-[20px] -mt-[13px] -ml-[10px] rounded-full bg-white border shadow-sm"
+  },
+  styles: ({ props: t, colors: e, css: r }) => {
+    const a = e.getPalette("primary"), s = e.getPalette(t.color);
+    return r.variables({
+      bg: s[500],
+      border: a[500]
+    });
+  }
+}, l = o;
+export {
+  l as default
+};

package/lib/components/slider/theme/Slider.carbon.theme.d.ts

@@ -0,0 +1,3 @@
+import type { SliderTheme } from '../Slider.vue';
+declare const theme: SliderTheme;
+export default theme;

package/lib/components/slider/theme/Slider.carbon.theme.js

@@ -0,0 +1,16 @@
+const s = {
+  classes: {
+    wrapper: "",
+    drag: "w-[16px] h-[16px] -mt-[11px] -ml-[8px] rounded-full bg-gray-900 dark:bg-gray-100"
+  },
+  styles: ({ props: r, colors: e, css: t }) => {
+    const a = e.getPalette("primary"), l = e.getPalette(r.color);
+    return t.variables({
+      bg: l[500],
+      border: a[500]
+    });
+  }
+}, o = s;
+export {
+  o as default
+};

package/lib/components/spinner/Spinner.vue.d.ts

@@ -5,7 +5,7 @@ declare const spinnerProps: {
         default: string;
     };
     size: {
-        readonly type: import("vue").PropType<import("../../composables/common").Size>;
+        readonly type: import("vue").PropType<import("../../composables/useCommon").Size>;
         readonly default: "md";
         readonly validator: (value: string) => boolean;
     };
@@ -17,7 +17,7 @@ declare const _default: import("vue").DefineComponent<{
         default: string;
     };
     size: {
-        readonly type: import("vue").PropType<import("../../composables/common").Size>;
+        readonly type: import("vue").PropType<import("../../composables/useCommon").Size>;
         readonly default: "md";
         readonly validator: (value: string) => boolean;
     };
@@ -27,12 +27,12 @@ declare const _default: import("vue").DefineComponent<{
         default: string;
     };
     size: {
-        readonly type: import("vue").PropType<import("../../composables/common").Size>;
+        readonly type: import("vue").PropType<import("../../composables/useCommon").Size>;
         readonly default: "md";
         readonly validator: (value: string) => boolean;
     };
 }>>, {
-    size: import("../../composables/common").Size;
     icon: string;
+    size: import("../../composables/useCommon").Size;
 }, {}>;
 export default _default;