@indielayer/ui 1.18.1 → 2.1.0

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

@@ -0,0 +1,425 @@
+import { useColors as e } from "../../composables/useColors.js";
+import { useTheme as t } from "../../composables/useTheme.js";
+import { optionalBooleanProp as n } from "../../common/props.js";
+import { useCommon as r } from "../../composables/useCommon.js";
+import i from "../icon/Icon.js";
+import "../../common/icons.js";
+import ee from "../scroll/Scroll.js";
+import { Fragment as a, Transition as o, computed as s, createBlock as c, createCommentVNode as l, createElementBlock as u, createElementVNode as d, createTextVNode as f, createVNode as p, defineComponent as m, mergeProps as h, normalizeClass as g, normalizeProps as _, normalizeStyle as te, openBlock as v, ref as y, renderList as b, renderSlot as x, resolveDynamicComponent as ne, toDisplayString as S, unref as C, useSlots as re, watch as w, withCtx as T } from "vue";
+//#region src/components/stepper/Stepper.vue?vue&type=script&setup=true&lang.ts
+var ie = [
+	"aria-current",
+	"aria-disabled",
+	"onClick"
+], ae = { class: "min-w-0 flex-1" }, oe = { class: "text-sm font-medium leading-tight" }, E = /* @__PURE__ */ m({
+	name: "XStepper",
+	validators: {
+		...r.validators(),
+		variant: ["line", "dot"],
+		orientation: ["horizontal", "vertical"],
+		labelPlacement: ["end", "bottom"]
+	},
+	docs: {
+		slots: {
+			"content-prefix": "Content rendered above the active step panel.",
+			"[stepValue]": "Panel content for a step; slot name matches `step.value`.",
+			"summary-[stepValue]": "Sidebar summary for a completed step (vertical orientation)."
+		},
+		emits: {
+			"update:modelValue": "Active step value (`v-model`).",
+			change: "Emitted when the active step changes; payload is `(value, index)`.",
+			"step-complete": "Emitted when a step is marked complete via `next()`; payload is `(value, index)`."
+		},
+		methods: {
+			next: "Advance to the next step after validation.",
+			prev: "Go to the previous step.",
+			goTo: "Navigate to a step by value or index when allowed.",
+			reset: "Clear completion state and return to the first step."
+		}
+	},
+	props: {
+		...r.props(),
+		...e.props("primary"),
+		modelValue: {
+			type: [String, Number],
+			description: "Active step value (`v-model`)."
+		},
+		steps: {
+			type: Array,
+			default: () => [],
+			description: "Step definitions (value, title, optional, completed, error, etc.)."
+		},
+		validate: {
+			type: Function,
+			description: "Runs before leaving the current step; return false to block navigation."
+		},
+		beforeChange: {
+			type: Function,
+			description: "Async guard before changing steps; return false to cancel."
+		},
+		variant: {
+			type: String,
+			default: "line",
+			description: "Indicator style: line or dot."
+		},
+		orientation: {
+			type: String,
+			default: "vertical",
+			description: "Layout direction: vertical (sidebar) or horizontal."
+		},
+		labelPlacement: {
+			type: String,
+			default: "end",
+			description: "Where labels sit relative to indicators in horizontal mode."
+		},
+		linear: {
+			type: Boolean,
+			default: !0,
+			description: "Require prior steps to be completed before navigating ahead."
+		},
+		interactive: {
+			type: Boolean,
+			default: !0,
+			description: "Allow clicking step indicators to navigate."
+		},
+		editable: n("Allow revisiting completed steps (shows edit icon)."),
+		disabled: {
+			type: Boolean,
+			description: "Disables all step navigation."
+		},
+		loading: {
+			type: Boolean,
+			description: "Blocks navigation while an async step action runs."
+		},
+		iconComplete: {
+			type: String,
+			description: "Icon for completed steps."
+		},
+		iconError: {
+			type: String,
+			description: "Icon for steps in an error state."
+		},
+		iconEdit: {
+			type: String,
+			description: "Icon for editable completed steps."
+		}
+	},
+	emits: [
+		"update:modelValue",
+		"change",
+		"step-complete"
+	],
+	setup(e, { expose: n, emit: r }) {
+		let m = e, E = re(), D = r, O = y([]), k = y(0), A = y(0), j = y(0);
+		w(() => m.steps, (e) => {
+			O.value = e.map((e) => ({
+				...e,
+				completed: e.completed ?? !1
+			})), se();
+		}, {
+			immediate: !0,
+			deep: !0
+		});
+		function se() {
+			if (O.value.length) {
+				if (m.modelValue !== void 0 && m.modelValue !== null) {
+					let e = O.value.findIndex((e) => e.value === m.modelValue);
+					if (e >= 0) {
+						k.value = e, j.value = Math.max(j.value, e);
+						return;
+					}
+				}
+				if (m.modelValue === void 0 || m.modelValue === null) {
+					let e = O.value[0]?.value;
+					e !== void 0 && pe(e);
+				}
+			}
+		}
+		w(() => m.modelValue, () => {
+			if (!O.value.length) return;
+			let e = O.value.findIndex((e) => e.value === m.modelValue);
+			e >= 0 && e !== k.value && (k.value = e);
+		}), w(k, (e) => {
+			let t = O.value[e];
+			t && (D("update:modelValue", t.value), j.value = Math.max(j.value, e));
+		});
+		let M = s(() => k.value <= 0), N = s(() => O.value.length === 0 || k.value >= O.value.length - 1), ce = s(() => O.value[k.value]?.value), P = s(() => O.value[k.value]), le = s(() => O.value.length === 1);
+		function F(e, t) {
+			return e.error ? "error" : t === k.value ? "active" : I(e, t) ? "complete" : "upcoming";
+		}
+		function I(e, t) {
+			return e.completed || t < k.value;
+		}
+		function ue(e, t) {
+			return (e.editable ?? m.editable) && I(e, t) && t !== k.value;
+		}
+		function L(e) {
+			let t = O.value[e];
+			return !t || t.disabled || m.loading || m.disabled ? !1 : m.linear ? e === 0 ? !0 : O.value.slice(0, e).every((e) => e.completed) : e <= j.value;
+		}
+		async function R() {
+			return m.validate ? m.validate() : !0;
+		}
+		async function z(e) {
+			if (!e.beforeNext) return !0;
+			try {
+				return await e.beforeNext(), !0;
+			} catch {
+				return !1;
+			}
+		}
+		async function B() {
+			let e = O.value[k.value];
+			return e ? !(I(e, k.value) && (!await R() || !await z(e))) : !0;
+		}
+		async function de(e, t) {
+			return m.beforeChange ? await m.beforeChange(e, t) !== !1 : !0;
+		}
+		async function V(e) {
+			if (e === k.value || e < 0 || e >= O.value.length) return;
+			let t = O.value[e]?.value, n = O.value[k.value]?.value;
+			t === void 0 || n === void 0 || await de(t, n) && (e !== k.value && !await B() || (A.value = k.value, k.value = e, D("change", t, e)));
+		}
+		async function H() {
+			if (m.loading || m.disabled || N.value || !await R()) return;
+			let e = O.value[k.value];
+			e && await z(e) && (e.completed = !0, D("step-complete", e.value, k.value), N.value || await V(k.value + 1));
+		}
+		async function U() {
+			m.loading || m.disabled || M.value || await B() && await V(k.value - 1);
+		}
+		async function W(e) {
+			let t = typeof e == "number" && e >= 0 && e < O.value.length && O.value[e] ? e : O.value.findIndex((t) => t.value === e);
+			t < 0 || m.interactive && L(t) && await V(t);
+		}
+		function G(e) {
+			W(e);
+		}
+		function fe() {
+			O.value.forEach((e) => {
+				e.completed = !1;
+			}), j.value = 0, A.value = 0, k.value = 0;
+			let e = O.value[0]?.value;
+			e !== void 0 && (D("update:modelValue", e), D("change", e, 0));
+		}
+		function pe(e) {
+			D("update:modelValue", e);
+		}
+		function K(e) {
+			return `summary-${e}`;
+		}
+		function q(e, t) {
+			return {
+				step: e,
+				index: t,
+				isActive: t === k.value,
+				next: H,
+				prev: U,
+				goTo: W
+			};
+		}
+		function me(e) {
+			let t = O.value[e];
+			return t && I(t, e) ? "border-primary-300 dark:border-primary-700" : "border-secondary-200 dark:border-secondary-700";
+		}
+		function J(e) {
+			let t = O.value[e];
+			return t && I(t, e) ? "bg-primary-500 dark:bg-primary-600" : "bg-secondary-200 dark:bg-secondary-700";
+		}
+		function he(e) {
+			let t = O.value.length - 1;
+			return e <= 0 ? "justify-start" : e >= t ? "justify-end" : "justify-center";
+		}
+		function Y(e) {
+			let t = O.value.length - 1;
+			return e <= 0 ? "items-start text-left" : e >= t ? "items-end text-right" : "items-center text-center";
+		}
+		function X(e, t) {
+			let n = F(e, t);
+			return n === "error" ? "bg-error-100 dark:bg-error-900 text-error-700 dark:text-error-300" : n === "complete" ? "bg-primary-100 dark:bg-primary-900 text-primary-800 dark:text-primary-200" : n === "active" ? "bg-primary-200 dark:bg-primary-800 text-primary-900 dark:text-primary-100" : "bg-secondary-200 dark:bg-secondary-700 text-secondary-600 dark:text-secondary-400";
+		}
+		function ge(e, t) {
+			return t === k.value ? "font-semibold text-primary-800 dark:text-primary-200" : "";
+		}
+		function _e(e, t) {
+			let n = F(e, t);
+			return n === "active" ? "text-primary-700 dark:text-primary-300" : n === "complete" ? "text-primary-600 dark:text-primary-400" : n === "error" ? "text-error-600 dark:text-error-400" : "text-secondary-600 dark:text-secondary-400";
+		}
+		function Z(e) {
+			return String(e);
+		}
+		function Q(e, t) {
+			let n = F(e, t);
+			return n === "error" ? {
+				type: "icon",
+				icon: m.iconError || "<path d=\"M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z\" />"
+			} : n === "complete" ? ue(e, t) ? {
+				type: "icon",
+				icon: m.iconEdit || "<path d=\"M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z\" />"
+			} : {
+				type: "icon",
+				icon: m.iconComplete || "<path d=\"M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z\" />"
+			} : m.variant === "dot" && m.orientation === "horizontal" ? { type: "dot" } : {
+				type: "number",
+				number: t + 1
+			};
+		}
+		let { styles: ve, classes: $, className: ye } = t("Stepper", {}, m);
+		return n({
+			next: H,
+			prev: U,
+			goTo: W,
+			reset: fe,
+			isFirst: M,
+			isLast: N,
+			activeIndex: k,
+			activeValue: ce
+		}), (e, t) => (v(), u("div", {
+			style: te(C(ve)),
+			class: g([C(ye), C($).wrapper])
+		}, [le.value && O.value[0] ? (v(), u(a, { key: 0 }, [C(E)[Z(O.value[0].value)] ? x(e.$slots, Z(O.value[0].value), _(h({ key: 0 }, q(O.value[0], 0)))) : l("", !0)], 64)) : e.orientation === "vertical" && O.value.length ? (v(), u("div", {
+			key: 1,
+			class: g(C($).layout)
+		}, [d("nav", {
+			class: g(C($).sidebar),
+			"aria-label": "Progress"
+		}, [d("ol", { class: g(C($).nav) }, [(v(!0), u(a, null, b(O.value, (t, n) => (v(), u("li", {
+			key: t.value,
+			class: g([
+				C($).navItem,
+				me(n),
+				{
+					"cursor-pointer": e.interactive && L(n) && !e.loading,
+					"cursor-not-allowed": !L(n) || e.loading,
+					"cursor-progress": e.loading
+				}
+			]),
+			"aria-current": n === k.value ? "step" : void 0,
+			"aria-disabled": !L(n) || t.disabled ? "true" : void 0,
+			onClick: (e) => G(n)
+		}, [d("span", { class: g([C($).indicator, X(t, n)]) }, [Q(t, n).type === "icon" ? (v(), c(i, {
+			key: 0,
+			icon: Q(t, n).icon,
+			size: "sm"
+		}, null, 8, ["icon"])) : (v(), u(a, { key: 1 }, [f(S(Q(t, n).number), 1)], 64))], 2), d("div", ae, [
+			d("div", { class: g([C($).title, ge(t, n)]) }, [f(S(t.title) + " ", 1), t.optional ? (v(), u("span", {
+				key: 0,
+				class: g(C($).optional)
+			}, "(optional)", 2)) : l("", !0)], 2),
+			t.subtitle ? (v(), u("div", {
+				key: 0,
+				class: g(C($).subtitle)
+			}, S(t.subtitle), 3)) : l("", !0),
+			t.description ? (v(), u("div", {
+				key: 1,
+				class: g(C($).description)
+			}, S(t.description), 3)) : l("", !0),
+			C(E)[K(t.value)] && I(t, n) && n !== k.value ? (v(), u("div", {
+				key: 2,
+				class: g(C($).summary)
+			}, [x(e.$slots, K(t.value), {
+				step: t,
+				index: n
+			})], 2)) : l("", !0)
+		])], 10, ie))), 128))], 2)], 2), d("div", {
+			class: g(C($).content),
+			"aria-live": "polite"
+		}, [x(e.$slots, "content-prefix"), p(o, {
+			"enter-active-class": "transition-opacity duration-200",
+			"enter-from-class": "opacity-0",
+			"leave-active-class": "transition-opacity duration-150",
+			"leave-to-class": "opacity-0",
+			mode: "out-in"
+		}, {
+			default: T(() => [P.value ? (v(), u("div", {
+				key: P.value.value,
+				class: g(C($).panel),
+				"data-stepper-panel": ""
+			}, [C(E)[Z(P.value.value)] ? x(e.$slots, Z(P.value.value), _(h({ key: 0 }, q(P.value, k.value)))) : l("", !0)], 2)) : l("", !0)]),
+			_: 3
+		})], 2)], 2)) : O.value.length ? (v(), u("div", {
+			key: 2,
+			class: g(C($).layout)
+		}, [p(ee, {
+			scrollbar: !1,
+			horizontal: "",
+			mousewheel: "",
+			class: g(C($).scroller)
+		}, {
+			default: T(() => [d("nav", {
+				class: g(C($).list),
+				"aria-label": "Progress"
+			}, [(v(!0), u(a, null, b(O.value, (t, n) => (v(), c(ne(e.interactive ? "button" : "div"), {
+				key: t.value,
+				type: e.interactive ? "button" : void 0,
+				class: g([
+					C($).step,
+					_e(t, n),
+					Y(n),
+					{
+						"cursor-pointer": e.interactive && L(n) && !e.loading,
+						"cursor-not-allowed": !L(n) || e.loading
+					}
+				]),
+				disabled: !e.interactive || !L(n) || t.disabled || e.loading,
+				"aria-current": n === k.value ? "step" : void 0,
+				onClick: (e) => G(n)
+			}, {
+				default: T(() => [d("div", { class: g([C($).stepTrack, he(n)]) }, [
+					n > 0 ? (v(), u("div", {
+						key: 0,
+						class: g([C($).stepConnector, J(n - 1)])
+					}, null, 2)) : l("", !0),
+					d("span", { class: g([C($).indicatorHorizontal, X(t, n)]) }, [t.icon ? (v(), c(i, {
+						key: 0,
+						icon: t.icon,
+						size: "sm"
+					}, null, 8, ["icon"])) : Q(t, n).type === "icon" ? (v(), c(i, {
+						key: 1,
+						icon: Q(t, n).icon,
+						size: "sm"
+					}, null, 8, ["icon"])) : (v(), u(a, { key: 2 }, [f(S(Q(t, n).number), 1)], 64))], 2),
+					n < O.value.length - 1 ? (v(), u("div", {
+						key: 1,
+						class: g([C($).stepConnector, J(n)])
+					}, null, 2)) : l("", !0)
+				], 2), d("div", { class: g([C($).label, Y(n)]) }, [
+					d("span", oe, S(t.title), 1),
+					t.optional ? (v(), u("span", {
+						key: 0,
+						class: g(C($).optional)
+					}, "(optional)", 2)) : l("", !0),
+					t.subtitle && e.labelPlacement === "end" ? (v(), u("span", {
+						key: 1,
+						class: g(C($).subtitle)
+					}, S(t.subtitle), 3)) : l("", !0)
+				], 2)]),
+				_: 2
+			}, 1032, [
+				"type",
+				"class",
+				"disabled",
+				"aria-current",
+				"onClick"
+			]))), 128))], 2)]),
+			_: 1
+		}, 8, ["class"]), d("div", {
+			class: g(C($).content),
+			"aria-live": "polite"
+		}, [x(e.$slots, "content-prefix"), p(o, {
+			"enter-active-class": "transition-opacity duration-200",
+			"enter-from-class": "opacity-0",
+			"leave-active-class": "transition-opacity duration-150",
+			"leave-to-class": "opacity-0",
+			mode: "out-in"
+		}, {
+			default: T(() => [P.value ? (v(), u("div", {
+				key: P.value.value,
+				class: g(C($).panel)
+			}, [C(E)[Z(P.value.value)] ? x(e.$slots, Z(P.value.value), _(h({ key: 0 }, q(P.value, k.value)))) : l("", !0)], 2)) : l("", !0)]),
+			_: 3
+		})], 2)], 2)) : l("", !0)], 6));
+	}
+});
+//#endregion
+export { E as default };

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

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

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

@@ -1,20 +1,33 @@
-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
-};
+//#region src/components/stepper/theme/Stepper.base.theme.ts
+var e = { classes: {
+	wrapper: "w-full",
+	layout: ({ props: e }) => e.orientation === "vertical" ? "flex h-full min-h-0" : "flex flex-col",
+	sidebar: "w-full shrink-0 hidden md:block bg-secondary-100 dark:bg-secondary-900 h-full py-4 px-6 overflow-y-auto max-w-[260px]",
+	nav: "relative ml-4 pr-2 list-none m-0 p-0",
+	navItem: "pb-8 pl-6 group relative border-l list-none",
+	indicator: ({ props: e }) => {
+		let t = ["absolute flex items-center justify-center w-8 h-8 rounded-full -start-4 ring-4 ring-secondary-100 dark:ring-secondary-900 font-semibold text-sm shrink-0"];
+		return e.size === "sm" && t.push("w-6 h-6 text-xs -start-3"), t;
+	},
+	indicatorHorizontal: ({ props: e }) => {
+		let t = ["relative z-[1] flex items-center justify-center w-8 h-8 rounded-full font-semibold text-sm shrink-0"];
+		return e.size === "sm" && t.push("w-6 h-6 text-xs"), t;
+	},
+	stepTrack: "flex w-full items-center min-h-8",
+	stepConnector: "h-0.5 flex-1 min-w-[0.5rem] rounded-full",
+	connector: "",
+	title: "text-sm min-h-8 flex flex-col justify-center",
+	subtitle: "text-xs text-secondary-500 dark:text-secondary-400",
+	description: "text-xs text-secondary-500 dark:text-secondary-400",
+	optional: "text-xs font-normal text-secondary-400 dark:text-secondary-500",
+	summary: "text-xs text-secondary-500 dark:text-secondary-400 mt-1",
+	content: ({ props: e }) => e.orientation === "vertical" ? "grow py-4 px-6 md:px-10 overflow-y-auto relative min-h-[8rem]" : "mt-6 px-1 relative min-h-[5rem]",
+	panel: "w-full",
+	scroller: "w-full",
+	list: "flex min-w-full w-full items-start gap-0",
+	step: "flex flex-1 flex-col min-w-[5.5rem] max-w-[12rem] py-2 px-2 border-0 bg-transparent",
+	label: "flex flex-col gap-0.5 mt-2 min-w-0 w-full",
+	icon: "shrink-0"
+} };
+//#endregion
+export { e as default };

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

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

package/lib/components/tab/Tab.js

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