@indielayer/ui 1.3.0 → 1.4.0

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

@@ -1,7 +1,6 @@
 import { type ExtractPublicPropTypes } from 'vue';
 import { type ThemeComponent } from '../../composables/useTheme';
 declare const sliderProps: {
-    label: StringConstructor;
     min: NumberConstructor;
     max: NumberConstructor;
     step: {
@@ -10,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;
@@ -17,6 +17,8 @@ declare const sliderProps: {
         readonly type: BooleanConstructor;
         readonly default: true;
     };
+    label: StringConstructor;
+    helper: StringConstructor;
     error: StringConstructor;
     hideFooter: BooleanConstructor;
     rules: {
@@ -45,7 +47,6 @@ 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: {
@@ -54,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;
@@ -61,6 +63,8 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
         readonly type: BooleanConstructor;
         readonly default: true;
     };
+    label: StringConstructor;
+    helper: StringConstructor;
     error: StringConstructor;
     hideFooter: BooleanConstructor;
     rules: {
@@ -90,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: {
@@ -99,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;
@@ -106,6 +110,8 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
         readonly type: BooleanConstructor;
         readonly default: true;
     };
+    label: StringConstructor;
+    helper: StringConstructor;
     error: StringConstructor;
     hideFooter: BooleanConstructor;
     rules: {
@@ -131,13 +137,13 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
 }>> & {
     [x: `on${Capitalize<string>}`]: ((...args: any[]) => any) | undefined;
 }, {
-    size: import("../../composables/useCommon").Size;
-    required: boolean;
-    color: string;
     disabled: boolean;
+    color: string;
+    size: import("../../composables/useCommon").Size;
     loading: boolean;
     loadingStatus: import("../loader/Loader.vue").LoaderStatus;
     readonly: boolean;
+    required: boolean;
     validateOnInput: boolean;
     hideFooter: boolean;
     rules: unknown[];

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

@@ -12,7 +12,6 @@ const oe = { class: "flex items-center relative w-full" }, ae = { class: "-mx-2"
   ...Z.props("primary"),
   ...P.props(),
   ...b.props(),
-  label: String,
   min: Number,
   max: Number,
   step: {
@@ -29,8 +28,8 @@ const oe = { class: "flex items-center relative w-full" }, ae = { class: "-mx-2"
   ...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);
+  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);
     }), D(t, (e) => {
@@ -91,7 +90,7 @@ const oe = { class: "flex items-center relative w-full" }, ae = { class: "-mx-2"
       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, {
+    return X({ focus: p, blur: S, reset: q, validate: M, setError: z }), (e, r) => (k(), H(te, {
       ref_key: "elRef",
       ref: v,
       tabindex: "0",

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

@@ -1,11 +1,11 @@
 const s = {
   classes: {
     wrapper: "",
-    drag: "w-[16px] h-[16px] -mt-[11px] -ml-[8px] rounded-full bg-gray-900"
+    drag: "w-[16px] h-[16px] -mt-[11px] -ml-[8px] rounded-full bg-gray-900 dark:bg-gray-100"
   },
-  styles: ({ props: t, colors: e, css: r }) => {
-    const a = e.getPalette("primary"), l = e.getPalette(t.color);
-    return r.variables({
+  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]
     });

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

@@ -32,7 +32,7 @@ declare const _default: import("vue").DefineComponent<{
         readonly validator: (value: string) => boolean;
     };
 }>>, {
-    size: import("../../composables/useCommon").Size;
     icon: string;
+    size: import("../../composables/useCommon").Size;
 }, {}>;
 export default _default;

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

@@ -1,28 +1,27 @@
-import { defineComponent as t, openBlock as r, createBlock as n } from "vue";
-import { useCommon as o } from "../../composables/useCommon.js";
-import i from "../icon/Icon.vue.js";
-const a = {
-  ...o.props(),
+import { defineComponent as r, openBlock as e, createBlock as n } from "vue";
+import { useCommon as t } from "../../composables/useCommon.js";
+import a from "../icon/Icon.vue.js";
+const i = {
+  ...t.props(),
   icon: {
     type: String,
-    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>'
+    default: '<g stroke-width="0"><path fill="currentColor" d="M12,1A11,11,0,1,0,23,12,11,11,0,0,0,12,1Zm0,19a8,8,0,1,1,8-8A8,8,0,0,1,12,20Z" opacity=".25"/><path fill="currentColor" d="M10.72,19.9a8,8,0,0,1-6.5-9.79A7.77,7.77,0,0,1,10.4,4.16a8,8,0,0,1,9.49,6.52A1.54,1.54,0,0,0,21.38,12h.13a1.37,1.37,0,0,0,1.38-1.54,11,11,0,1,0-12.7,12.39A1.54,1.54,0,0,0,12,21.34h0A1.47,1.47,0,0,0,10.72,19.9Z"><animateTransform attributeName="transform" dur="0.65s" repeatCount="indefinite" type="rotate" values="0 12 12;360 12 12"/></path></g>'
   }
-}, s = {
+}, p = {
   name: "XSpinner",
   validators: {
-    ...o.validators()
+    ...t.validators()
   }
-}, d = /* @__PURE__ */ t({
-  ...s,
-  props: a,
-  setup(p) {
-    return (e, c) => (r(), n(i, {
-      icon: e.icon,
-      size: e.size,
-      "view-box": "0 0 38 38"
+}, u = /* @__PURE__ */ r({
+  ...p,
+  props: i,
+  setup(s) {
+    return (o, m) => (e(), n(a, {
+      icon: o.icon,
+      size: o.size
     }, null, 8, ["icon", "size"]));
   }
 });
 export {
-  d as default
+  u as default
 };

package/lib/components/stepper/Stepper.vue.d.ts

@@ -0,0 +1,137 @@
+import { type PropType, type ExtractPublicPropTypes } from 'vue';
+import { type ThemeComponent } from '../../composables/useTheme';
+declare const validators: {
+    variant: readonly ["line"];
+    size: string[];
+};
+declare const stepperProps: {
+    modelValue: (StringConstructor | NumberConstructor)[];
+    steps: {
+        type: PropType<StepperStep[]>;
+        default: () => never[];
+    };
+    variant: {
+        type: PropType<"line">;
+        default: string;
+    };
+    grow: BooleanConstructor;
+    fullWidth: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    interactive: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    iconPristine: StringConstructor;
+    iconComplete: StringConstructor;
+    iconIncomplete: StringConstructor;
+    iconCurrent: StringConstructor;
+    iconError: StringConstructor;
+    color: {
+        readonly type: StringConstructor;
+        readonly default: string | undefined;
+    };
+    size: {
+        readonly type: PropType<import("../../composables/useCommon").Size>;
+        readonly default: "md";
+        readonly validator: (value: string) => boolean;
+    };
+};
+export type StepperStepStatus = 'pristine' | 'complete' | 'incomplete' | 'error';
+export type StepperStep = {
+    status: StepperStepStatus;
+    label: string;
+    description: string;
+    disabled?: boolean;
+};
+export type StepperVariant = typeof validators.variant[number];
+export type StepperProps = ExtractPublicPropTypes<typeof stepperProps>;
+type InternalClasses = 'wrapper' | 'list' | 'scroller' | 'content' | 'step' | 'label' | 'icon';
+export interface StepperTheme extends ThemeComponent<StepperProps, InternalClasses> {
+}
+declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
+    modelValue: (StringConstructor | NumberConstructor)[];
+    steps: {
+        type: PropType<StepperStep[]>;
+        default: () => never[];
+    };
+    variant: {
+        type: PropType<"line">;
+        default: string;
+    };
+    grow: BooleanConstructor;
+    fullWidth: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    interactive: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    iconPristine: StringConstructor;
+    iconComplete: StringConstructor;
+    iconIncomplete: StringConstructor;
+    iconCurrent: StringConstructor;
+    iconError: StringConstructor;
+    color: {
+        readonly type: StringConstructor;
+        readonly default: string | undefined;
+    };
+    size: {
+        readonly type: PropType<import("../../composables/useCommon").Size>;
+        readonly default: "md";
+        readonly validator: (value: string) => boolean;
+    };
+}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "update:modelValue"[], "update:modelValue", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    modelValue: (StringConstructor | NumberConstructor)[];
+    steps: {
+        type: PropType<StepperStep[]>;
+        default: () => never[];
+    };
+    variant: {
+        type: PropType<"line">;
+        default: string;
+    };
+    grow: BooleanConstructor;
+    fullWidth: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    interactive: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    iconPristine: StringConstructor;
+    iconComplete: StringConstructor;
+    iconIncomplete: StringConstructor;
+    iconCurrent: StringConstructor;
+    iconError: StringConstructor;
+    color: {
+        readonly type: StringConstructor;
+        readonly default: string | undefined;
+    };
+    size: {
+        readonly type: PropType<import("../../composables/useCommon").Size>;
+        readonly default: "md";
+        readonly validator: (value: string) => boolean;
+    };
+}>> & {
+    "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
+}, {
+    color: string;
+    size: import("../../composables/useCommon").Size;
+    variant: "line";
+    steps: StepperStep[];
+    grow: boolean;
+    fullWidth: boolean;
+    interactive: boolean;
+}, {}>, {
+    default?(_: {}): any;
+}>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/lib/components/stepper/Stepper.vue.js

@@ -0,0 +1,128 @@
+import { defineComponent as I, ref as c, openBlock as i, createElementBlock as d, createElementVNode as r, normalizeClass as s, unref as o, normalizeStyle as B, createVNode as u, withCtx as p, Fragment as R, renderList as V, createBlock as N, resolveDynamicComponent as z, toDisplayString as f, createCommentVNode as E, renderSlot as P } from "vue";
+import { useCommon as v } from "../../composables/useCommon.js";
+import { useColors as $ } from "../../composables/useColors.js";
+import { useTheme as D } from "../../composables/useTheme.js";
+import X from "../scroll/Scroll.vue.js";
+import A from "../icon/Icon.vue.js";
+import { stepperIncompleteIcon as F, errorIcon as L, successIcon as T, stepperPristineIcon as W } from "../../common/icons.js";
+const j = { class: "overflow-hidden" }, q = { class: "flex items-start pr-4" }, G = { class: "grid text-left" }, H = { class: "text-sm truncate" }, J = {
+  key: 0,
+  class: "text-xs text-gray-500"
+}, K = {
+  ...v.validators(),
+  variant: ["line"]
+}, M = {
+  ...v.props(),
+  ...$.props("primary"),
+  modelValue: [String, Number],
+  steps: {
+    type: Array,
+    default: () => []
+  },
+  variant: {
+    type: String,
+    default: "line"
+  },
+  grow: Boolean,
+  fullWidth: {
+    type: Boolean,
+    default: !0
+  },
+  interactive: {
+    type: Boolean,
+    default: !0
+  },
+  iconPristine: String,
+  iconComplete: String,
+  iconIncomplete: String,
+  iconCurrent: String,
+  iconError: String
+}, O = {
+  name: "XStepper",
+  validators: K
+}, se = /* @__PURE__ */ I({
+  ...O,
+  props: M,
+  emits: ["update:modelValue"],
+  setup(y, { emit: g }) {
+    const l = y, _ = g, b = c(null), S = c(null), h = c(null);
+    function k(t, a) {
+      t.disabled || !l.interactive || _("update:modelValue", a);
+    }
+    function C(t, a) {
+      return t.status === "incomplete" ? l.iconIncomplete || F : t.status === "error" ? l.iconError || L : t.status === "complete" ? l.iconComplete || T : l.iconPristine || W;
+    }
+    const { styles: w, classes: n, className: x } = D("Stepper", {}, l);
+    return (t, a) => (i(), d("div", null, [
+      r("div", {
+        ref_key: "wrapperRef",
+        ref: S,
+        class: s(["relative", [
+          o(x),
+          o(n).wrapper
+        ]]),
+        style: B(o(w))
+      }, [
+        u(X, {
+          ref_key: "scrollRef",
+          ref: b,
+          scrollbar: !1,
+          horizontal: "",
+          mousewheel: "",
+          class: s(o(n).scroller)
+        }, {
+          default: p(() => [
+            r("div", {
+              ref_key: "stepperRef",
+              ref: h,
+              class: s(["relative", o(n).list])
+            }, [
+              (i(!0), d(R, null, V(t.steps, (e, m) => (i(), N(z(t.interactive ? "button" : "div"), {
+                key: m,
+                class: s([o(n).step, {
+                  "cursor-pointer": t.interactive && !e.disabled,
+                  "text-gray-400 dark:text-gray-600": e.disabled,
+                  "flex-1": t.grow
+                }]),
+                disabled: e.disabled || !t.interactive,
+                onClick: (Q) => k(e, m)
+              }, {
+                default: p(() => [
+                  r("div", j, [
+                    r("div", {
+                      class: s(["h-0.5 w-full mb-2", [e.status === "complete" || e.status === "incomplete" ? "bg-primary-500" : "bg-gray-200 dark:bg-gray-700"]])
+                    }, null, 2),
+                    r("div", q, [
+                      u(A, {
+                        icon: C(e),
+                        size: "sm",
+                        class: s([o(n).icon, {
+                          "text-primary-500": e.status === "complete" || e.status === "incomplete",
+                          "text-error-500": e.status === "error"
+                        }])
+                      }, null, 8, ["icon", "class"]),
+                      r("div", G, [
+                        r("div", H, f(e.label), 1),
+                        e.description ? (i(), d("div", J, f(e.description), 1)) : E("", !0)
+                      ])
+                    ])
+                  ])
+                ]),
+                _: 2
+              }, 1032, ["class", "disabled", "onClick"]))), 128))
+            ], 2)
+          ]),
+          _: 1
+        }, 8, ["class"])
+      ], 6),
+      r("div", {
+        class: s(o(n).content)
+      }, [
+        P(t.$slots, "default")
+      ], 2)
+    ]));
+  }
+});
+export {
+  se as default
+};

package/lib/components/stepper/Stepper.vue2.js

@@ -0,0 +1,4 @@
+import f from "./Stepper.vue.js";
+export {
+  f as default
+};

package/lib/components/stepper/__tests__/Stepper.spec.d.ts

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,2 @@
+export { default as XStepper } from './Stepper.vue';
+export type { StepperProps, StepperVariant, StepperTheme, } from './Stepper.vue';

package/lib/components/stepper/theme/Stepper.base.theme.d.ts

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

package/lib/components/stepper/theme/Stepper.base.theme.js

@@ -0,0 +1,20 @@
+const r = {
+  classes: {
+    wrapper: "",
+    scroller: ({ props: s }) => {
+      const t = [""];
+      return s.fullWidth || t.push("!w-fit"), t;
+    },
+    list: ({ props: s }) => ["flex min-w-full w-fit items-start"],
+    step: ({ props: s, data: t }) => {
+      const e = [""];
+      return s.grow || e.push("w-[8rem]"), e;
+    },
+    label: ({ props: s, data: t }) => [""],
+    icon: ({ props: s, data: t }) => ["mr-2 mt-0.5"],
+    content: "mt-2 mb-4"
+  }
+}, c = r;
+export {
+  c as default
+};

package/lib/components/stepper/theme/Stepper.carbon.theme.d.ts

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

package/lib/components/{collapse/theme/Collapse.carbon.theme.js → stepper/theme/Stepper.carbon.theme.js}

@@ -1,4 +1,4 @@
-import e from "./Collapse.base.theme.js";
+import e from "./Stepper.base.theme.js";
 const t = e, o = t;
 export {
   o as default

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

@@ -15,6 +15,7 @@ declare const tabProps: {
     icon: StringConstructor;
     disabled: BooleanConstructor;
     exact: BooleanConstructor;
+    removable: BooleanConstructor;
     size: {
         readonly type: import("vue").PropType<Size>;
         readonly default: "md";
@@ -22,7 +23,7 @@ declare const tabProps: {
     };
 };
 export type TabProps = ExtractPublicPropTypes<typeof tabProps>;
-type InternalClasses = 'wrapper' | 'content' | 'label' | 'icon';
+type InternalClasses = 'wrapper' | 'content' | 'label' | 'icon' | 'tabpanel';
 type InternalExtraData = {
     selected: boolean;
 } & Pick<TabGroupInjection, 'state'>['state'];
@@ -41,12 +42,13 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
     icon: StringConstructor;
     disabled: BooleanConstructor;
     exact: BooleanConstructor;
+    removable: BooleanConstructor;
     size: {
         readonly type: import("vue").PropType<Size>;
         readonly default: "md";
         readonly validator: (value: string) => boolean;
     };
-}, {}, 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, "remove"[], "remove", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     value: {
         type: (StringConstructor | NumberConstructor)[];
     };
@@ -59,15 +61,19 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
     icon: StringConstructor;
     disabled: BooleanConstructor;
     exact: BooleanConstructor;
+    removable: BooleanConstructor;
     size: {
         readonly type: import("vue").PropType<Size>;
         readonly default: "md";
         readonly validator: (value: string) => boolean;
     };
-}>>, {
-    size: Size;
-    tag: string;
+}>> & {
+    onRemove?: ((...args: any[]) => any) | undefined;
+}, {
     disabled: boolean;
+    tag: string;
+    removable: boolean;
+    size: Size;
     exact: boolean;
 }, {}>, {
     tab?(_: {