@indielayer/ui 1.18.1 → 2.1.0

package/lib/components/input/Input.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,276 @@
+import { injectInputGroupKey as e } from "../../composables/keys.js";
+import { useResolvedComponentProps as t } from "../../composables/resolveComponentDefaults.js";
+import { useColors as n } from "../../composables/useColors.js";
+import { useTheme as ee } from "../../composables/useTheme.js";
+import { optionalBooleanProp as r } from "../../common/props.js";
+import { useCommon as i } from "../../composables/useCommon.js";
+import a from "../icon/Icon.js";
+import { closeIcon as te, eyeIcon as o, eyeVisibleIcon as s } from "../../common/icons.js";
+import { useInteractive as c } from "../../composables/useInteractive.js";
+import { useInputtable as l } from "../../composables/useInputtable.js";
+import ne from "../inputFooter/InputFooter.js";
+import u from "../label/Label.js";
+import { computed as d, createBlock as f, createCommentVNode as p, createElementBlock as m, createElementVNode as h, defineComponent as g, inject as _, mergeProps as re, normalizeClass as v, normalizeStyle as ie, openBlock as y, ref as b, renderSlot as x, toHandlers as ae, unref as S, useAttrs as C, useSlots as w, watch as T, withCtx as E } from "vue";
+//#region src/components/input/Input.vue?vue&type=script&setup=true&lang.ts
+var D = { class: "relative" }, O = [
+	"id",
+	"disabled",
+	"min",
+	"max",
+	"minlength",
+	"maxlength",
+	"step",
+	"dir",
+	"name",
+	"placeholder",
+	"readonly",
+	"type",
+	"value"
+], k = {
+	...i.props(),
+	...n.props("primary"),
+	...c.props(),
+	...l.props(),
+	showPasswordToggle: {
+		type: Boolean,
+		default: !0,
+		description: "Shows a visibility toggle when `type` is `password`."
+	},
+	dir: {
+		type: String,
+		default: "ltr",
+		description: "Text direction for the native input (`ltr` or `rtl`)."
+	},
+	icon: {
+		type: String,
+		description: "Shortcut for `iconLeft`."
+	},
+	iconLeft: {
+		type: String,
+		description: "Icon name shown before the input value."
+	},
+	iconRight: {
+		type: String,
+		description: "Icon name shown after the input value."
+	},
+	max: {
+		type: [Number, String],
+		description: "Native `max` attribute (typically for number inputs)."
+	},
+	maxlength: {
+		type: [Number, String],
+		description: "Maximum character length for the input value."
+	},
+	min: {
+		type: [Number, String],
+		description: "Native `min` attribute (typically for number inputs)."
+	},
+	minlength: {
+		type: [Number, String],
+		description: "Minimum character length for the input value."
+	},
+	placeholder: {
+		type: String,
+		description: "Placeholder text shown when the value is empty."
+	},
+	type: {
+		type: String,
+		default: "text",
+		description: "Native input type (text, password, email, number, etc.)."
+	},
+	step: {
+		type: [Number, String],
+		description: "Native `step` attribute for numeric inputs."
+	},
+	block: r("Stretches to the full width of the parent."),
+	showCounter: r("Shows a character counter in the footer."),
+	clearable: r("Shows a clear button when the value is not empty.")
+}, A = /* @__PURE__ */ g({
+	name: "XInput",
+	validators: { ...i.validators() },
+	docs: {
+		slots: {
+			prefix: "Content before the input (left adornment).",
+			suffix: "Content after the input (right adornment)."
+		},
+		emits: { ...l.emitDocs() },
+		methods: { ...l.methodDocs() }
+	},
+	props: k,
+	emits: l.emits(),
+	setup(n, { expose: r, emit: i }) {
+		let g = n, k = t("Input", g), A = _(e, {
+			registerChild: () => {},
+			unregisterChild: () => {},
+			registerInput: () => {},
+			unregisterInput: () => {},
+			getPosition: () => "only",
+			childOrder: d(() => []),
+			isInsideInputGroup: !1,
+			groupProps: {}
+		}), oe = i, j = C(), se = d(() => Object.keys(j).reduce((e, t) => (t.startsWith("data-") && (e[t] = j[t]), e), {})), M = b(null), N = b(g.type);
+		T(() => g.type, (e) => {
+			N.value = e;
+		});
+		function P(e) {
+			if (!e.target) return;
+			let t = e.target;
+			if (g.type === "number") {
+				let e = Number(t.value);
+				g.min !== void 0 && e < Number(g.min) && (t.value = g.min.toString()), g.max !== void 0 && e > Number(g.max) && (t.value = g.max.toString());
+			}
+		}
+		function F() {
+			N.value = N.value === "password" ? "text" : "password";
+		}
+		let I = d(() => k.value.clearable && g.modelValue !== ""), L = w(), R = d(() => !!L.prefix), z = d(() => !!L.suffix), B = d(() => !!(g.iconLeft || g.icon)), V = d(() => g.type === "password" && k.value.showPasswordToggle && !g.iconRight), H = d(() => {
+			let e = 0;
+			return I.value && e++, (g.iconRight || V.value) && e++, e;
+		}), U = d(() => B.value || R.value), W = d(() => z.value || H.value > 0), G = d(() => {
+			let e = +!!B.value + +!!R.value;
+			return e >= 2 ? "!pl-16" : e === 1 ? "!pl-10" : "";
+		}), K = d(() => {
+			let e = H.value + +!!z.value;
+			return e >= 3 ? "!pr-24" : e === 2 ? "!pr-16" : e === 1 ? "!pr-10" : "";
+		}), { focus: q, blur: ce } = c(M), { errorInternal: J, hideFooterInternal: le, hideLabelInternal: ue, isInsideForm: de, isInsideInputGroup: Y, inputGroupPosition: fe, inputListeners: pe, reset: X, validate: me, setError: he } = l(g, {
+			focus: q,
+			emit: oe
+		}), Z = d(() => A.groupProps?.size ?? k.value.size), Q = d(() => g.disabled || !!A.groupProps?.disabled), ge = d(() => ue.value ? void 0 : g.label), _e = d(() => ({
+			...k.value,
+			size: Z.value,
+			disabled: Q.value
+		})), ve = d(() => {
+			let e = g.modelValue;
+			return e ? String(e).length : 0;
+		}), { styles: ye, classes: $, className: be } = ee("Input", {}, _e, {
+			errorInternal: J,
+			isInsideInputGroup: Y,
+			inputGroupPosition: fe
+		});
+		return r({
+			focus: q,
+			blur: ce,
+			reset: X,
+			validate: me,
+			setError: he
+		}), (e, t) => (y(), f(u, {
+			style: ie(S(ye)),
+			block: S(k).block,
+			disabled: Q.value,
+			required: e.required,
+			"is-inside-form": S(de),
+			"is-inside-input-group": S(Y),
+			label: ge.value,
+			class: v([S(be), S($).wrapper]),
+			tooltip: e.tooltip
+		}, {
+			default: E(() => [h("div", D, [
+				U.value ? (y(), m("div", {
+					key: 0,
+					class: v([S($).adornment, S($).adornmentStart])
+				}, [B.value ? (y(), f(a, {
+					key: 0,
+					size: Z.value,
+					icon: e.iconLeft || e.icon,
+					class: v(S($).adornmentIcon)
+				}, null, 8, [
+					"size",
+					"icon",
+					"class"
+				])) : p("", !0), R.value ? (y(), m("div", {
+					key: 1,
+					class: v(S($).adornmentSlot)
+				}, [x(e.$slots, "prefix")], 2)) : p("", !0)], 2)) : p("", !0),
+				h("input", re({
+					id: e.id,
+					ref_key: "elRef",
+					ref: M,
+					class: [
+						S($).input,
+						S(J) ? "border-error-500 dark:border-error-400 focus:outline-error-500" : "focus:outline-[color:var(--x-input-border)]",
+						G.value,
+						K.value
+					],
+					disabled: Q.value,
+					min: e.min,
+					max: e.max,
+					minlength: e.minlength,
+					maxlength: e.maxlength,
+					step: e.step,
+					dir: e.dir,
+					name: e.name,
+					placeholder: e.placeholder,
+					readonly: e.readonly,
+					type: N.value,
+					value: e.modelValue === void 0 ? "" : e.modelValue
+				}, se.value, ae(S(pe), !0), { onChange: P }), null, 16, O),
+				W.value ? (y(), m("div", {
+					key: 1,
+					class: v([S($).adornment, S($).adornmentEnd])
+				}, [
+					z.value ? (y(), m("div", {
+						key: 0,
+						class: v(S($).adornmentSlot)
+					}, [x(e.$slots, "suffix")], 2)) : p("", !0),
+					I.value ? (y(), f(a, {
+						key: 1,
+						size: Z.value,
+						icon: S(te),
+						class: v([S($).adornmentIcon, "cursor-pointer"]),
+						onClick: t[0] ||= (e) => S(X)()
+					}, null, 8, [
+						"size",
+						"icon",
+						"class"
+					])) : p("", !0),
+					e.iconRight ? (y(), f(a, {
+						key: 2,
+						size: Z.value,
+						icon: e.iconRight,
+						class: v(S($).adornmentIcon)
+					}, null, 8, [
+						"size",
+						"icon",
+						"class"
+					])) : V.value ? (y(), f(a, {
+						key: 3,
+						size: Z.value,
+						icon: N.value === "password" ? S(o) : S(s),
+						class: v([S($).adornmentIcon, "cursor-pointer"]),
+						onClick: t[1] ||= (e) => F()
+					}, null, 8, [
+						"size",
+						"icon",
+						"class"
+					])) : p("", !0)
+				], 2)) : p("", !0)
+			]), S(le) ? p("", !0) : (y(), f(ne, {
+				key: 0,
+				error: S(J),
+				helper: e.helper,
+				"character-count": ve.value,
+				"max-characters": e.maxlength,
+				"show-counter": S(k).showCounter
+			}, null, 8, [
+				"error",
+				"helper",
+				"character-count",
+				"max-characters",
+				"show-counter"
+			]))]),
+			_: 3
+		}, 8, [
+			"style",
+			"block",
+			"disabled",
+			"required",
+			"is-inside-form",
+			"is-inside-input-group",
+			"label",
+			"class",
+			"tooltip"
+		]));
+	}
+});
+//#endregion
+export { A as default };

package/lib/components/input/theme/Input.base.theme.js

@@ -1,17 +1,23 @@
-const o = {
-  classes: {
-    wrapper: "",
-    input: ({ props: r, data: s }) => {
-      const e = ["appearance-none block w-full placeholder-secondary-400 dark:placeholder-secondary-500 outline-transparent outline outline-2 outline-offset-[-1px] transition-all duration-150 ease-in-out border-secondary-300 dark:border-secondary-700 border shadow-sm rounded-md"];
-      return !s.errorInternal && !r.disabled && e.push("hover:border-secondary-400 dark:hover:border-secondary-500"), r.size === "xs" ? e.push("px-2 py-1 text-xs") : r.size === "sm" ? e.push("px-2 py-1.5 text-sm") : r.size === "lg" ? e.push("px-4 py-3 text-lg") : r.size === "xl" ? e.push("px-5 py-4 text-xl") : e.push("px-3 py-2"), e.push(r.disabled ? "bg-secondary-100 dark:bg-secondary-700 text-secondary-400 dark:text-secondary-600 cursor-not-allowed" : "bg-white dark:bg-secondary-800 text-secondary-700 dark:text-secondary-200"), e;
-    },
-    icon: "text-secondary-600 dark:text-secondary-300 absolute my-auto inset-y-0"
-  },
-  styles: ({ colors: r, props: s, css: e }) => {
-    const t = r.getPalette(s.color);
-    return e.get("border", t[400]);
-  }
-}, a = o;
-export {
-  a as default
+import { inputGroupRadiusClasses as e } from "../../../common/inputGroupRadius.js";
+//#region src/components/input/theme/Input.base.theme.ts
+var t = {
+	classes: {
+		wrapper: "",
+		input: ({ props: t, data: n }) => {
+			let r = ["appearance-none block w-full placeholder-secondary-400 dark:placeholder-secondary-500 outline-transparent outline outline-2 outline-offset-[-1px] transition-all duration-150 ease-in-out border-secondary-300 dark:border-secondary-700 border shadow-xs"];
+			return n.isInsideInputGroup ? r.push(...e(n.inputGroupPosition)) : r.push("rounded-md"), !n.errorInternal && !t.disabled && r.push("hover:border-secondary-400 dark:hover:border-secondary-500"), t.size === "xs" ? r.push("px-2 py-1 text-xs") : t.size === "sm" ? r.push("px-2 py-1.5 text-sm") : t.size === "lg" ? r.push("px-4 py-3 text-lg") : t.size === "xl" ? r.push("px-5 py-4 text-xl") : r.push("px-3 py-2"), r.push(t.disabled ? "bg-secondary-100 dark:bg-secondary-700 text-secondary-400 dark:text-secondary-600 cursor-not-allowed" : "bg-white dark:bg-secondary-800 text-secondary-700 dark:text-secondary-200"), r;
+		},
+		icon: "text-secondary-600 dark:text-secondary-300 absolute my-auto inset-y-0",
+		adornment: "absolute inset-y-0 z-10 flex items-center gap-1.5 pointer-events-none",
+		adornmentStart: "left-0 pl-2",
+		adornmentEnd: "right-0 pr-2",
+		adornmentIcon: "shrink-0 text-secondary-600 dark:text-secondary-300 pointer-events-auto",
+		adornmentSlot: "shrink-0 pointer-events-auto text-secondary-600 dark:text-secondary-300 text-sm"
+	},
+	styles: ({ colors: e, props: t, css: n }) => {
+		let r = e.getPalette(t.color);
+		return n.get("border", r[400]);
+	}
 };
+//#endregion
+export { t as default };

package/lib/components/input/theme/Input.carbon.theme.js

@@ -1,17 +1,22 @@
-const o = {
-  classes: {
-    wrapper: "",
-    input: ({ props: r, data: s }) => {
-      const e = ["appearance-none block w-full placeholder-secondary-400 dark:placeholder-secondary-500 outline-transparent outline outline-2 outline-offset-[-1px] transition-all duration-150 ease-in-out border-secondary-300 dark:border-secondary-700 border-b text-sm px-4"];
-      return !s.errorInternal && !r.disabled && e.push("hover:border-secondary-400 dark:hover:border-secondary-500"), r.size === "xs" || r.size === "sm" ? e.push("py-1.5") : r.size === "lg" || r.size === "xl" ? e.push("py-3.5") : e.push("py-2.5"), r.disabled ? e.push("bg-secondary-100 dark:bg-secondary-900 text-secondary-300 cursor-not-allowed") : r.readonly ? e.push("bg-white dark:bg-secondary-900 text-secondary-700") : e.push("bg-secondary-50 dark:bg-secondary-800 text-secondary-700 dark:text-secondary-200"), e;
-    },
-    icon: "text-secondary-600 dark:text-secondary-300 absolute my-auto inset-y-0"
-  },
-  styles: ({ colors: r, props: s, css: e }) => {
-    const a = r.getPalette(s.color);
-    return e.get("border", a[400]);
-  }
-}, t = o;
-export {
-  t as default
+//#region src/components/input/theme/Input.carbon.theme.ts
+var e = {
+	classes: {
+		wrapper: "",
+		input: ({ props: e, data: t }) => {
+			let n = ["appearance-none block w-full placeholder-secondary-400 dark:placeholder-secondary-500 outline-transparent outline outline-2 outline-offset-[-1px] transition-all duration-150 ease-in-out border-secondary-300 dark:border-secondary-700 border-b text-sm px-4"];
+			return !t.errorInternal && !e.disabled && n.push("hover:border-secondary-400 dark:hover:border-secondary-500"), e.size === "xs" || e.size === "sm" ? n.push("py-1.5") : e.size === "lg" || e.size === "xl" ? n.push("py-3.5") : n.push("py-2.5"), e.disabled ? n.push("bg-secondary-100 dark:bg-secondary-900 text-secondary-300 cursor-not-allowed") : e.readonly ? n.push("bg-white dark:bg-secondary-900 text-secondary-700") : n.push("bg-secondary-50 dark:bg-secondary-800 text-secondary-700 dark:text-secondary-200"), n;
+		},
+		icon: "text-secondary-600 dark:text-secondary-300 absolute my-auto inset-y-0",
+		adornment: "absolute inset-y-0 z-10 flex items-center gap-1.5 pointer-events-none",
+		adornmentStart: "left-0 pl-2",
+		adornmentEnd: "right-0 pr-2",
+		adornmentIcon: "shrink-0 text-secondary-600 dark:text-secondary-300 pointer-events-auto",
+		adornmentSlot: "shrink-0 pointer-events-auto text-secondary-600 dark:text-secondary-300 text-sm"
+	},
+	styles: ({ colors: e, props: t, css: n }) => {
+		let r = e.getPalette(t.color);
+		return n.get("border", r[400]);
+	}
 };
+//#endregion
+export { e as default };

package/lib/components/inputFooter/InputFooter.js

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

package/lib/components/inputFooter/InputFooter.vue.d.ts

@@ -1,29 +1,63 @@
 import type { ExtractPublicPropTypes } from 'vue';
 import { type ThemeComponent } from '../../composables/useTheme';
 declare const inputFooterProps: {
-    helper: StringConstructor;
-    error: StringConstructor;
-    characterCount: NumberConstructor;
-    maxCharacters: (StringConstructor | NumberConstructor)[];
-    showCounter: BooleanConstructor;
+    helper: {
+        type: StringConstructor;
+        description: string;
+    };
+    error: {
+        type: StringConstructor;
+        description: string;
+    };
+    characterCount: {
+        type: NumberConstructor;
+        description: string;
+    };
+    maxCharacters: {
+        type: (StringConstructor | NumberConstructor)[];
+        description: string;
+    };
+    showCounter: import("vue").Prop<boolean | undefined>;
 };
 export type InputFooterProps = ExtractPublicPropTypes<typeof inputFooterProps>;
 type InternalClasses = 'wrapper' | 'helperText' | 'errorText' | 'container' | 'counter';
 export interface InputFooterTheme extends ThemeComponent<InputFooterProps, InternalClasses> {
 }
 declare const _default: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
-    helper: StringConstructor;
-    error: StringConstructor;
-    characterCount: NumberConstructor;
-    maxCharacters: (StringConstructor | NumberConstructor)[];
-    showCounter: BooleanConstructor;
+    helper: {
+        type: StringConstructor;
+        description: string;
+    };
+    error: {
+        type: StringConstructor;
+        description: string;
+    };
+    characterCount: {
+        type: NumberConstructor;
+        description: string;
+    };
+    maxCharacters: {
+        type: (StringConstructor | NumberConstructor)[];
+        description: string;
+    };
+    showCounter: import("vue").Prop<boolean | undefined>;
 }>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
-    helper: StringConstructor;
-    error: StringConstructor;
-    characterCount: NumberConstructor;
-    maxCharacters: (StringConstructor | NumberConstructor)[];
-    showCounter: BooleanConstructor;
-}>> & Readonly<{}>, {
-    showCounter: boolean;
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+    helper: {
+        type: StringConstructor;
+        description: string;
+    };
+    error: {
+        type: StringConstructor;
+        description: string;
+    };
+    characterCount: {
+        type: NumberConstructor;
+        description: string;
+    };
+    maxCharacters: {
+        type: (StringConstructor | NumberConstructor)[];
+        description: string;
+    };
+    showCounter: import("vue").Prop<boolean | undefined>;
+}>> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 export default _default;

package/lib/components/inputFooter/InputFooter.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,50 @@
+import { useTheme as e } from "../../composables/useTheme.js";
+import { optionalBooleanProp as t } from "../../common/props.js";
+import { computed as n, createCommentVNode as r, createElementBlock as i, createElementVNode as a, defineComponent as o, normalizeClass as s, normalizeStyle as c, openBlock as l, toDisplayString as u, unref as d } from "vue";
+//#region src/components/inputFooter/InputFooter.vue?vue&type=script&setup=true&lang.ts
+var f = /* @__PURE__ */ o({
+	name: "XInputFooter",
+	docs: {},
+	props: {
+		helper: {
+			type: String,
+			description: "Helper text shown when there is no error."
+		},
+		error: {
+			type: String,
+			description: "Error message; takes priority over helper text."
+		},
+		characterCount: {
+			type: Number,
+			description: "Current character count for the counter."
+		},
+		maxCharacters: {
+			type: [Number, String],
+			description: "Maximum characters shown as `count/max` in the counter."
+		},
+		showCounter: t("Shows the character counter.")
+	},
+	setup(t) {
+		let o = t, { styles: f, classes: p, className: m } = e("InputFooter", {}, o), h = n(() => o.maxCharacters ? Number(o.maxCharacters) : void 0), g = n(() => o.characterCount === void 0 ? "" : h.value ? `${o.characterCount}/${h.value}` : `${o.characterCount}`), _ = n(() => o.error || o.helper);
+		return (e, t) => (l(), i("div", {
+			class: s([d(m), d(p).wrapper]),
+			style: c(d(f))
+		}, [_.value || e.showCounter ? (l(), i("div", {
+			key: 0,
+			class: s(d(p).container)
+		}, [a("div", null, [e.error ? (l(), i("p", {
+			key: 0,
+			class: s(d(p).errorText)
+		}, u(e.error), 3)) : e.helper ? (l(), i("p", {
+			key: 1,
+			class: s(d(p).helperText)
+		}, u(e.helper), 3)) : r("", !0)]), e.showCounter ? (l(), i("p", {
+			key: 0,
+			class: s(d(p).counter),
+			role: "status",
+			"aria-live": "polite"
+		}, u(g.value), 3)) : r("", !0)], 2)) : r("", !0)], 6));
+	}
+});
+//#endregion
+export { f as default };

package/lib/components/inputFooter/theme/InputFooter.base.theme.js

@@ -1,12 +1,10 @@
-const e = {
-  classes: {
-    wrapper: "text-xs mt-1",
-    container: "flex justify-between items-start gap-2",
-    helperText: "text-secondary-500 dark:text-secondary-400",
-    errorText: "text-error-500 dark:text-error-400",
-    counter: "text-secondary-500 dark:text-secondary-400 whitespace-nowrap"
-  }
-}, t = e;
-export {
-  t as default
-};
+//#region src/components/inputFooter/theme/InputFooter.base.theme.ts
+var e = { classes: {
+	wrapper: "text-xs mt-1",
+	container: "flex justify-between items-start gap-2",
+	helperText: "text-secondary-500 dark:text-secondary-400",
+	errorText: "text-error-500 dark:text-error-400",
+	counter: "text-secondary-500 dark:text-secondary-400 whitespace-nowrap"
+} };
+//#endregion
+export { e as default };

package/lib/components/inputFooter/theme/InputFooter.carbon.theme.js

@@ -1,12 +1,10 @@
-const e = {
-  classes: {
-    wrapper: "text-xs mt-1",
-    container: "flex justify-between items-start gap-2",
-    helperText: "text-secondary-500 dark:text-secondary-400",
-    errorText: "text-error-500 dark:text-error-400",
-    counter: "text-secondary-500 dark:text-secondary-400 whitespace-nowrap"
-  }
-}, t = e;
-export {
-  t as default
-};
+//#region src/components/inputFooter/theme/InputFooter.carbon.theme.ts
+var e = { classes: {
+	wrapper: "text-xs mt-1",
+	container: "flex justify-between items-start gap-2",
+	helperText: "text-secondary-500 dark:text-secondary-400",
+	errorText: "text-error-500 dark:text-error-400",
+	counter: "text-secondary-500 dark:text-secondary-400 whitespace-nowrap"
+} };
+//#endregion
+export { e as default };

package/lib/components/inputGroup/InputGroup.js

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