@indielayer/ui 1.18.1 → 2.0.0

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

@@ -0,0 +1,30 @@
+import { useTheme as e } from "../../composables/useTheme.js";
+import { createBlock as t, createTextVNode as n, defineComponent as r, normalizeClass as i, normalizeStyle as a, openBlock as o, resolveDynamicComponent as s, unref as c, withCtx as l } from "vue";
+//#region src/components/skeleton/Skeleton.vue?vue&type=script&setup=true&lang.ts
+var u = { shape: ["line", "circle"] }, d = /* @__PURE__ */ r({
+	name: "XSkeleton",
+	validators: u,
+	props: {
+		tag: {
+			type: String,
+			default: "div"
+		},
+		shape: {
+			type: String,
+			default: "line",
+			validator: (e) => u.shape.includes(e)
+		}
+	},
+	setup(r) {
+		let { styles: u, classes: d, className: f } = e("Skeleton", {}, r);
+		return (e, r) => (o(), t(s(e.tag), {
+			style: a(c(u)),
+			class: i([c(f), c(d).wrapper])
+		}, {
+			default: l(() => [...r[0] ||= [n(" ​ ", -1)]]),
+			_: 1
+		}, 8, ["style", "class"]));
+	}
+});
+//#endregion
+export { d as default };

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

@@ -1,11 +1,7 @@
-const a = {
-  classes: {
-    wrapper: ({ props: s }) => {
-      const e = ["animate-pulse bg-secondary-300 dark:bg-secondary-600"];
-      return s.shape === "circle" ? e.push("w-8 h-8 rounded-full") : e.push("rounded-md"), e;
-    }
-  }
-}, r = a;
-export {
-  r as default
-};
+//#region src/components/skeleton/theme/Skeleton.base.theme.ts
+var e = { classes: { wrapper: ({ props: e }) => {
+	let t = ["animate-pulse bg-secondary-300 dark:bg-secondary-600"];
+	return e.shape === "circle" ? t.push("w-8 h-8 rounded-full") : t.push("rounded-md"), t;
+} } };
+//#endregion
+export { e as default };

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

@@ -1,5 +1,5 @@
 import e from "./Skeleton.base.theme.js";
-const t = e, o = t;
-export {
-  o as default
-};
+//#region src/components/skeleton/theme/Skeleton.carbon.theme.ts
+var t = e;
+//#endregion
+export { t as default };

package/lib/components/slider/Slider.js

@@ -0,0 +1,7 @@
+import e from "../../_virtual/_plugin-vue_export-helper.js";
+import t from "./Slider.vue_vue_type_script_setup_true_lang.js";
+/* empty css                                                       */
+//#region src/components/slider/Slider.vue
+var n = /* @__PURE__ */ e(t, [["__scopeId", "data-v-15beb8d9"]]);
+//#endregion
+export { n as default };

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

@@ -0,0 +1,106 @@
+import { useColors as e } from "../../composables/useColors.js";
+import { useTheme as t } from "../../composables/useTheme.js";
+import { useCommon as n } from "../../composables/useCommon.js";
+import { useInteractive as r } from "../../composables/useInteractive.js";
+import { useInputtable as i } from "../../composables/useInputtable.js";
+import a from "../inputFooter/InputFooter.js";
+import o from "../label/Label.js";
+import { computed as s, createBlock as c, createCommentVNode as l, createElementVNode as u, defineComponent as d, mergeProps as f, normalizeClass as p, normalizeStyle as m, openBlock as h, ref as g, renderSlot as _, toHandlers as v, unref as y, watch as b, withCtx as x } from "vue";
+//#region src/components/slider/Slider.vue?vue&type=script&setup=true&lang.ts
+var S = { class: "flex items-center relative w-full gap-2 min-h-[1.25rem]" }, C = { class: "relative flex items-center flex-1" }, w = [
+	"id",
+	"disabled",
+	"name",
+	"max",
+	"min",
+	"step",
+	"readonly",
+	"value"
+], T = {
+	...e.props("primary"),
+	...r.props(),
+	...i.props(),
+	min: {
+		type: [Number, String],
+		default: 0
+	},
+	max: {
+		type: [Number, String],
+		default: 100
+	},
+	step: {
+		type: [Number, String],
+		default: 1
+	}
+}, E = /* @__PURE__ */ d({
+	name: "XSlider",
+	validators: { ...n.validators() },
+	props: T,
+	emits: i.emits(),
+	setup(e, { expose: n, emit: d }) {
+		let T = e, E = d, D = g(null), O = g(Number(T.modelValue ?? 0)), { focus: k, blur: A } = r(D);
+		b(() => T.modelValue, (e) => {
+			O.value = Number(e ?? 0);
+		}), b(O, (e) => {
+			E("update:modelValue", e);
+		});
+		let j = s(() => (O.value - Number(T.min)) / (Number(T.max) - Number(T.min)) * 100), { errorInternal: M, hideFooterInternal: N, isInsideForm: P, isInsideInputGroup: F, inputListeners: I, reset: L, validate: R, setError: z } = i(T, {
+			focus: k,
+			emit: E
+		}), { styles: B, classes: V, className: H } = t("Slider", {}, T);
+		return n({
+			focus: k,
+			blur: A,
+			reset: L,
+			validate: R,
+			setError: z
+		}), (e, t) => (h(), c(o, {
+			style: m(y(B)),
+			disabled: e.disabled,
+			required: e.required,
+			"is-inside-form": y(P),
+			"is-inside-input-group": y(F),
+			label: e.label,
+			class: p([y(H), y(V).wrapper]),
+			tooltip: e.tooltip
+		}, {
+			default: x(() => [u("div", S, [
+				_(e.$slots, "prefix", { value: O.value }, void 0, !0),
+				u("div", C, [u("input", f({
+					id: e.id,
+					ref_key: "elRef",
+					ref: D,
+					type: "range",
+					class: [y(V).input, "absolute z-10 appearance-none bg-transparent focus:outline-hidden focus-visible:outline-hidden"],
+					disabled: e.disabled,
+					name: e.name,
+					max: e.max,
+					min: e.min,
+					step: e.step,
+					readonly: e.readonly,
+					value: O.value
+				}, v(y(I), !0)), null, 16, w), u("div", { class: p(["absolute w-full", y(V).track]) }, [u("div", {
+					class: p(y(V).progress),
+					style: m({ width: j.value + "%" })
+				}, null, 6)], 2)]),
+				_(e.$slots, "suffix", { value: O.value }, void 0, !0)
+			]), y(N) ? l("", !0) : (h(), c(a, {
+				key: 0,
+				error: y(M),
+				helper: e.helper
+			}, null, 8, ["error", "helper"]))]),
+			_: 3
+		}, 8, [
+			"style",
+			"disabled",
+			"required",
+			"is-inside-form",
+			"is-inside-input-group",
+			"label",
+			"class",
+			"tooltip"
+		]));
+	}
+});
+//#endregion
+export { E as default };

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

@@ -1,20 +1,18 @@
-const l = {
-  classes: {
-    wrapper: ({ props: r }) => {
-      const e = [];
-      return r.disabled && e.push("cursor-not-allowed"), e;
-    },
-    input: "w-[calc(100%+0.65rem)] -ml-1 disabled:cursor-not-allowed",
-    track: "h-1.5 bg-secondary-200 dark:bg-secondary-700 rounded-md overflow-hidden",
-    progress: "h-full bg-[color:var(--x-slider-bg)]"
-  },
-  styles: ({ props: r, colors: e, css: s }) => {
-    const o = e.getPalette(r.color);
-    return s.variables({
-      bg: o[400]
-    });
-  }
-}, a = l;
-export {
-  a as default
+//#region src/components/slider/theme/Slider.base.theme.ts
+var e = {
+	classes: {
+		wrapper: ({ props: e }) => {
+			let t = [];
+			return e.disabled && t.push("cursor-not-allowed"), t;
+		},
+		input: "w-[calc(100%+0.65rem)] -ml-1 disabled:cursor-not-allowed",
+		track: "h-1.5 bg-secondary-200 dark:bg-secondary-700 rounded-md overflow-hidden",
+		progress: "h-full bg-[color:var(--x-slider-bg)]"
+	},
+	styles: ({ props: e, colors: t, css: n }) => {
+		let r = t.getPalette(e.color);
+		return n.variables({ bg: r[400] });
+	}
 };
+//#endregion
+export { e as default };

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

@@ -1,5 +1,5 @@
 import e from "./Slider.base.theme.js";
-const t = e, o = t;
-export {
-  o as default
-};
+//#region src/components/slider/theme/Slider.carbon.theme.ts
+var t = e;
+//#endregion
+export { t as default };

package/lib/components/spacer/Spacer.js

@@ -1,12 +1,10 @@
-import { defineComponent as e, createVNode as r } from "vue";
-const t = /* @__PURE__ */ e({
-  name: "XSpacer",
-  setup() {
-    return () => r("div", {
-      class: "flex-grow"
-    }, null);
-  }
+import { createVNode as e, defineComponent as t } from "vue";
+//#region src/components/spacer/Spacer.tsx
+var n = /* @__PURE__ */ t({
+	name: "XSpacer",
+	setup() {
+		return () => e("div", { class: "grow" }, null);
+	}
 });
-export {
-  t as default
-};
+//#endregion
+export { n as default };

package/lib/components/spinner/Spinner.js

@@ -0,0 +1,5 @@
+import e from "./Spinner.vue_vue_type_script_setup_true_lang.js";
+//#region src/components/spinner/Spinner.vue
+var t = e;
+//#endregion
+export { t as default };

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

@@ -0,0 +1,23 @@
+import { useCommon as e } from "../../composables/useCommon.js";
+import t from "../icon/Icon.js";
+import { createBlock as n, defineComponent as r, openBlock as i } from "vue";
+//#region src/components/spinner/Spinner.vue?vue&type=script&setup=true&lang.ts
+var a = {
+	...e.props(),
+	icon: {
+		type: String,
+		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>"
+	}
+}, o = /* @__PURE__ */ r({
+	name: "XSpinner",
+	validators: { ...e.validators() },
+	props: a,
+	setup(e) {
+		return (e, r) => (i(), n(t, {
+			icon: e.icon,
+			size: e.size
+		}, null, 8, ["icon", "size"]));
+	}
+});
+//#endregion
+export { o as default };

package/lib/components/stepper/Stepper.js

@@ -0,0 +1,5 @@
+import e from "./Stepper.vue_vue_type_script_setup_true_lang.js";
+//#region src/components/stepper/Stepper.vue
+var t = e;
+//#endregion
+export { t as default };

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

@@ -1,7 +1,9 @@
 import { type PropType, type ExtractPublicPropTypes } from 'vue';
 import { type ThemeComponent } from '../../composables/useTheme';
 declare const validators: {
-    variant: readonly ["line"];
+    variant: readonly ["line", "dot"];
+    orientation: readonly ["horizontal", "vertical"];
+    labelPlacement: readonly ["end", "bottom"];
     size: string[];
 };
 declare const stepperProps: {
@@ -10,12 +12,21 @@ declare const stepperProps: {
         type: PropType<StepperStep[]>;
         default: () => never[];
     };
+    validate: PropType<() => boolean>;
+    beforeChange: PropType<(to: string | number, from: string | number) => boolean | Promise<boolean>>;
     variant: {
-        type: PropType<"line">;
+        type: PropType<"dot" | "line">;
         default: string;
     };
-    grow: BooleanConstructor;
-    fullWidth: {
+    orientation: {
+        type: PropType<"vertical" | "horizontal">;
+        default: string;
+    };
+    labelPlacement: {
+        type: PropType<"bottom" | "end">;
+        default: string;
+    };
+    linear: {
         type: BooleanConstructor;
         default: boolean;
     };
@@ -23,11 +34,12 @@ declare const stepperProps: {
         type: BooleanConstructor;
         default: boolean;
     };
-    iconPristine: StringConstructor;
+    editable: import("vue").Prop<boolean | undefined>;
+    disabled: BooleanConstructor;
+    loading: BooleanConstructor;
     iconComplete: StringConstructor;
-    iconIncomplete: StringConstructor;
-    iconCurrent: StringConstructor;
     iconError: StringConstructor;
+    iconEdit: StringConstructor;
     color: {
         readonly type: StringConstructor;
         readonly default: string | undefined;
@@ -38,17 +50,36 @@ declare const stepperProps: {
         readonly validator: (value: string) => boolean;
     };
 };
-export type StepperStepStatus = 'pristine' | 'complete' | 'incomplete' | 'error';
+export type StepperStepStatus = 'upcoming' | 'active' | 'complete' | 'error';
 export type StepperStep = {
-    status: StepperStepStatus;
-    label: string;
-    description: string;
+    value: string | number;
+    title: string;
+    subtitle?: string;
+    description?: string;
+    optional?: boolean;
     disabled?: boolean;
+    editable?: boolean;
+    completed?: boolean;
+    error?: boolean;
+    icon?: string;
+    beforeNext?: () => Promise<void>;
 };
 export type StepperVariant = typeof validators.variant[number];
+export type StepperOrientation = typeof validators.orientation[number];
+export type StepperLabelPlacement = typeof validators.labelPlacement[number];
 export type StepperProps = ExtractPublicPropTypes<typeof stepperProps>;
-type InternalClasses = 'wrapper' | 'list' | 'scroller' | 'content' | 'step' | 'label' | 'icon';
-export interface StepperTheme extends ThemeComponent<StepperProps, InternalClasses> {
+type InternalStep = StepperStep & {
+    completed: boolean;
+};
+type InternalClasses = 'wrapper' | 'layout' | 'sidebar' | 'nav' | 'navItem' | 'indicator' | 'connector' | 'title' | 'subtitle' | 'description' | 'optional' | 'summary' | 'content' | 'panel' | 'scroller' | 'list' | 'step' | 'stepTrack' | 'stepConnector' | 'indicatorHorizontal' | 'label' | 'icon';
+type InternalExtraData = {
+    status: StepperStepStatus;
+    index: number;
+    active: boolean;
+    completed: boolean;
+    clickable: boolean;
+};
+export interface StepperTheme extends ThemeComponent<StepperProps, InternalClasses, InternalExtraData> {
 }
 declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<import("vue").ExtractPropTypes<{
     modelValue: (StringConstructor | NumberConstructor)[];
@@ -56,12 +87,21 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<im
         type: PropType<StepperStep[]>;
         default: () => never[];
     };
+    validate: PropType<() => boolean>;
+    beforeChange: PropType<(to: string | number, from: string | number) => boolean | Promise<boolean>>;
     variant: {
-        type: PropType<"line">;
+        type: PropType<"dot" | "line">;
         default: string;
     };
-    grow: BooleanConstructor;
-    fullWidth: {
+    orientation: {
+        type: PropType<"vertical" | "horizontal">;
+        default: string;
+    };
+    labelPlacement: {
+        type: PropType<"bottom" | "end">;
+        default: string;
+    };
+    linear: {
         type: BooleanConstructor;
         default: boolean;
     };
@@ -69,11 +109,12 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<im
         type: BooleanConstructor;
         default: boolean;
     };
-    iconPristine: StringConstructor;
+    editable: import("vue").Prop<boolean | undefined>;
+    disabled: BooleanConstructor;
+    loading: BooleanConstructor;
     iconComplete: StringConstructor;
-    iconIncomplete: StringConstructor;
-    iconCurrent: StringConstructor;
     iconError: StringConstructor;
+    iconEdit: StringConstructor;
     color: {
         readonly type: StringConstructor;
         readonly default: string | undefined;
@@ -83,18 +124,40 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<im
         readonly default: "md";
         readonly validator: (value: string) => boolean;
     };
-}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "update:modelValue"[], "update:modelValue", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+}>, {
+    next: () => Promise<void>;
+    prev: () => Promise<void>;
+    goTo: (target: string | number) => Promise<void>;
+    reset: () => void;
+    isFirst: import("vue").ComputedRef<boolean>;
+    isLast: import("vue").ComputedRef<boolean>;
+    activeIndex: import("vue").Ref<number, number>;
+    activeValue: import("vue").ComputedRef<string | number>;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    'update:modelValue': (value: string | number) => void;
+    change: (value: string | number, index: number) => void;
+    'step-complete': (value: string | number, index: number) => void;
+}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     modelValue: (StringConstructor | NumberConstructor)[];
     steps: {
         type: PropType<StepperStep[]>;
         default: () => never[];
     };
+    validate: PropType<() => boolean>;
+    beforeChange: PropType<(to: string | number, from: string | number) => boolean | Promise<boolean>>;
     variant: {
-        type: PropType<"line">;
+        type: PropType<"dot" | "line">;
+        default: string;
+    };
+    orientation: {
+        type: PropType<"vertical" | "horizontal">;
+        default: string;
+    };
+    labelPlacement: {
+        type: PropType<"bottom" | "end">;
         default: string;
     };
-    grow: BooleanConstructor;
-    fullWidth: {
+    linear: {
         type: BooleanConstructor;
         default: boolean;
     };
@@ -102,11 +165,12 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<im
         type: BooleanConstructor;
         default: boolean;
     };
-    iconPristine: StringConstructor;
+    editable: import("vue").Prop<boolean | undefined>;
+    disabled: BooleanConstructor;
+    loading: BooleanConstructor;
     iconComplete: StringConstructor;
-    iconIncomplete: StringConstructor;
-    iconCurrent: StringConstructor;
     iconError: StringConstructor;
+    iconEdit: StringConstructor;
     color: {
         readonly type: StringConstructor;
         readonly default: string | undefined;
@@ -117,17 +181,58 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<im
         readonly validator: (value: string) => boolean;
     };
 }>> & Readonly<{
-    "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
+    onChange?: ((value: string | number, index: number) => any) | undefined;
+    "onUpdate:modelValue"?: ((value: string | number) => any) | undefined;
+    "onStep-complete"?: ((value: string | number, index: number) => any) | undefined;
 }>, {
+    disabled: boolean;
     color: string;
     size: import("../../composables/useCommon").Size;
-    variant: "line";
+    loading: boolean;
+    variant: "dot" | "line";
     steps: StepperStep[];
-    grow: boolean;
-    fullWidth: boolean;
+    orientation: "vertical" | "horizontal";
+    labelPlacement: "bottom" | "end";
+    linear: boolean;
     interactive: boolean;
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>, {
-    default?(_: {}): any;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>, Partial<Record<string, (_: {
+    step: InternalStep;
+    index: number;
+    isActive: boolean;
+    next: () => Promise<void>;
+    prev: () => Promise<void>;
+    goTo: (target: string | number) => Promise<void>;
+}) => any>> & Partial<Record<string, (_: {
+    step: {
+        value: string | number;
+        title: string;
+        subtitle?: string | undefined;
+        description?: string | undefined;
+        optional?: boolean | undefined;
+        disabled?: boolean | undefined;
+        editable?: boolean | undefined;
+        completed: boolean;
+        error?: boolean | undefined;
+        icon?: string | undefined;
+        beforeNext?: (() => Promise<void>) | undefined;
+    };
+    index: number;
+}) => any>> & Partial<Record<string, (_: {
+    step: InternalStep;
+    index: number;
+    isActive: boolean;
+    next: () => Promise<void>;
+    prev: () => Promise<void>;
+    goTo: (target: string | number) => Promise<void>;
+}) => any>> & Partial<Record<string, (_: {
+    step: InternalStep;
+    index: number;
+    isActive: boolean;
+    next: () => Promise<void>;
+    prev: () => Promise<void>;
+    goTo: (target: string | number) => Promise<void>;
+}) => any>> & {
+    "content-prefix"?(_: {}): any;
 }>;
 export default _default;
 type __VLS_WithTemplateSlots<T, S> = T & {