@indielayer/ui 1.1.0 → 1.3.0

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

@@ -1,20 +1,19 @@
-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 r, openBlock as c, createBlock as p, resolveDynamicComponent as m, normalizeStyle as i, unref as e, normalizeClass as f, withCtx as u, createTextVNode as _ } from "vue";
+import { useTheme as d } from "../../composables/useTheme.js";
+const y = {
   tag: {
     type: String,
     default: "div"
   }
-}, h = { name: "XSkeleton" }, v = /* @__PURE__ */ l({
-  ...h,
-  props: k,
+}, k = { name: "XSkeleton" }, h = /* @__PURE__ */ r({
+  ...k,
+  props: y,
   setup(t) {
-    const s = t, { styles: o, classes: n, className: r } = d("skeleton", y, s);
-    return (a, C) => (c(), m(p(a.tag), {
+    const s = t, { styles: o, classes: n, className: a } = d("Skeleton", {}, s);
+    return (l, C) => (c(), p(m(l.tag), {
       style: i(e(o)),
       class: f([
-        e(r),
+        e(a),
         e(n).wrapper
       ])
     }, {
@@ -26,5 +25,5 @@ const k = {
   }
 });
 export {
-  v as default
+  h 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.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,4 +1,5 @@
 import { type ExtractPublicPropTypes } from 'vue';
+import { type ThemeComponent } from '../../composables/useTheme';
 declare const sliderProps: {
     label: StringConstructor;
     min: NumberConstructor;
@@ -17,23 +18,32 @@ declare const sliderProps: {
         readonly default: true;
     };
     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;
@@ -52,18 +62,24 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
         readonly default: true;
     };
     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;
     };
@@ -91,34 +107,42 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
         readonly default: true;
     };
     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;
     };
 }>> & {
     [x: `on${Capitalize<string>}`]: ((...args: any[]) => any) | undefined;
 }, {
-    disabled: boolean;
-    color: string;
-    size: import("../../composables/common").Size;
+    size: import("../../composables/useCommon").Size;
     required: boolean;
-    step: number;
+    color: string;
+    disabled: boolean;
     loading: boolean;
+    loadingStatus: import("../loader/Loader.vue").LoaderStatus;
     readonly: boolean;
     validateOnInput: boolean;
+    hideFooter: boolean;
     rules: unknown[];
     gradient: boolean;
+    step: number;
 }, {}>, {
     prefix?(_: {
         value: number;

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

@@ -1,17 +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(),
+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(),
   label: String,
   min: Number,
   max: Number,
@@ -20,62 +20,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: S }) {
+    const d = R, x = S, v = u(null), o = u(null), n = u(null), t = u(Number(d.modelValue ?? 0)), { focus: p, blur: L } = 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 +85,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: L, 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"
+  },
+  styles: ({ props: t, colors: e, css: r }) => {
+    const a = e.getPalette("primary"), l = e.getPalette(t.color);
+    return r.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;
+    size: import("../../composables/useCommon").Size;
     icon: string;
 }, {}>;
 export default _default;

package/lib/components/spinner/Spinner.vue.js

@@ -1,11 +1,11 @@
 import { defineComponent as t, openBlock as r, createBlock as n } from "vue";
-import { useCommon as o } from "../../composables/common.js";
+import { useCommon as o } from "../../composables/useCommon.js";
 import i from "../icon/Icon.vue.js";
 const a = {
   ...o.props(),
   icon: {
     type: String,
-    default: '<g fill="none" fill-rule="evenodd"><g transform="translate(1 1)" stroke-width="2"><circle stroke-opacity=".5" cx="18" cy="18" r="18"/><path d="M36 18c0-9.94-8.06-18-18-18"><animateTransform attributeName="transform" type="rotate" from="0 18 18" to="360 18 18" dur="0.5s" repeatCount="indefinite"/></path></g></g>'
+    default: '<g fill="none" fill-rule="evenodd"><g transform="translate(1 1)" stroke-width="2"><circle stroke-opacity=".8" cx="18" cy="18" r="18"/><path d="M36 18c0-9.94-8.06-18-18-18"><animateTransform attributeName="transform" type="rotate" from="0 18 18" to="360 18 18" dur="0.5s" repeatCount="indefinite"/></path></g></g>'
   }
 }, s = {
   name: "XSpinner",

package/lib/components/tab/Tab.vue.d.ts

@@ -1,5 +1,7 @@
 import { type ExtractPublicPropTypes } from 'vue';
-import { type Size } from '../../composables/common';
+import { type Size } from '../../composables/useCommon';
+import { type ThemeComponent } from '../../composables/useTheme';
+import type { TabGroupInjection } from './TabGroup.vue';
 declare const tabProps: {
     value: {
         type: (StringConstructor | NumberConstructor)[];
@@ -20,6 +22,12 @@ declare const tabProps: {
     };
 };
 export type TabProps = ExtractPublicPropTypes<typeof tabProps>;
+type InternalClasses = 'wrapper' | 'content' | 'label' | 'icon';
+type InternalExtraData = {
+    selected: boolean;
+} & Pick<TabGroupInjection, 'state'>['state'];
+export interface TabTheme extends ThemeComponent<TabProps, InternalClasses, InternalExtraData> {
+}
 declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
     value: {
         type: (StringConstructor | NumberConstructor)[];
@@ -57,10 +65,10 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
         readonly validator: (value: string) => boolean;
     };
 }>>, {
-    disabled: boolean;
     size: Size;
-    exact: boolean;
     tag: string;
+    disabled: boolean;
+    exact: boolean;
 }, {}>, {
     tab?(_: {
         label: string | undefined;