@indielayer/ui 1.18.1 → 2.1.0

package/lib/components/inputGroup/InputGroup.vue.d.ts

@@ -0,0 +1,296 @@
+import { type ExtractPublicPropTypes, type ComputedRef } from 'vue';
+import { type ThemeComponent } from '../../composables/useTheme';
+import { type Size } from '../../composables/useCommon';
+import type { XFormInputMethods } from '../../composables/useInputtable';
+declare const inputGroupProps: {
+    block: import("vue").Prop<boolean | undefined>;
+    modelValue: {
+        readonly type: import("vue").PropType<string | number | boolean | object | any[] | undefined>;
+        readonly default: undefined;
+        readonly description: "Bound value (v-model).";
+    };
+    id: {
+        readonly type: StringConstructor;
+        readonly description: "Native id attribute for the input element.";
+    };
+    name: {
+        readonly type: StringConstructor;
+        readonly description: "Native name attribute for form submission.";
+    };
+    readonly: {
+        readonly type: BooleanConstructor;
+        readonly description: "Makes the field read-only without disabling it.";
+    };
+    required: {
+        readonly type: BooleanConstructor;
+        readonly description: "Marks the field as required for validation.";
+    };
+    validateOnInput: {
+        readonly type: BooleanConstructor;
+        readonly default: true;
+        readonly description: "Runs validation on each input event when true.";
+    };
+    label: {
+        readonly type: StringConstructor;
+        readonly description: "Visible label text for the field.";
+    };
+    helper: {
+        readonly type: StringConstructor;
+        readonly description: "Helper text shown below the field.";
+    };
+    error: {
+        readonly type: StringConstructor;
+        readonly description: "External error message; overrides rule errors when set.";
+    };
+    hideFooter: {
+        readonly type: BooleanConstructor;
+        readonly description: "Hides the footer area (helper / error).";
+    };
+    rules: {
+        readonly type: ArrayConstructor;
+        readonly default: () => never[];
+        readonly description: "Validation rule functions or rule descriptors.";
+    };
+    tooltip: {
+        readonly type: StringConstructor;
+        readonly description: "Optional tooltip text next to the label.";
+    };
+    skipFormRegistry: {
+        readonly type: BooleanConstructor;
+        readonly description: "Skips registering this field with a parent x-form.";
+    };
+    disabled: {
+        readonly type: BooleanConstructor;
+        readonly description: "Disables interaction and applies disabled styling.";
+    };
+    loading: {
+        readonly type: BooleanConstructor;
+        readonly description: "Shows a loading indicator and blocks interaction.";
+    };
+    loadingLabel: {
+        readonly type: StringConstructor;
+        readonly description: "Accessible label announced while loading.";
+    };
+    loadingStatus: {
+        readonly type: import("vue").PropType<import("../loader/Loader.vue").LoaderStatus>;
+        readonly default: "active";
+        readonly description: "Loader visual status (for example active or indeterminate).";
+    };
+    size: {
+        readonly type: import("vue").PropType<Size>;
+        readonly default: "md";
+        readonly validator: (value: string) => boolean;
+        readonly description: "Control size. One of xs, sm, md, lg, xl.";
+    };
+};
+export type InputGroupProps = ExtractPublicPropTypes<typeof inputGroupProps>;
+export type InputGroupPosition = 'only' | 'first' | 'middle' | 'last';
+export type InputGroupInjection = {
+    registerChild: (id: string) => void;
+    unregisterChild: (id: string) => void;
+    registerInput: (name: string, methods: XFormInputMethods) => void;
+    unregisterInput: (name: string) => void;
+    getPosition: (id: string) => InputGroupPosition;
+    childOrder: ComputedRef<string[]>;
+    isInsideInputGroup: boolean;
+    groupProps: {
+        size?: Size;
+        disabled?: boolean;
+    };
+};
+export type InputGroupInput = {
+    name: string;
+    methods: XFormInputMethods;
+};
+type InternalClasses = 'wrapper';
+export interface InputGroupTheme extends ThemeComponent<InputGroupProps, InternalClasses> {
+}
+declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    block: import("vue").Prop<boolean | undefined>;
+    modelValue: {
+        readonly type: import("vue").PropType<string | number | boolean | object | any[] | undefined>;
+        readonly default: undefined;
+        readonly description: "Bound value (v-model).";
+    };
+    id: {
+        readonly type: StringConstructor;
+        readonly description: "Native id attribute for the input element.";
+    };
+    name: {
+        readonly type: StringConstructor;
+        readonly description: "Native name attribute for form submission.";
+    };
+    readonly: {
+        readonly type: BooleanConstructor;
+        readonly description: "Makes the field read-only without disabling it.";
+    };
+    required: {
+        readonly type: BooleanConstructor;
+        readonly description: "Marks the field as required for validation.";
+    };
+    validateOnInput: {
+        readonly type: BooleanConstructor;
+        readonly default: true;
+        readonly description: "Runs validation on each input event when true.";
+    };
+    label: {
+        readonly type: StringConstructor;
+        readonly description: "Visible label text for the field.";
+    };
+    helper: {
+        readonly type: StringConstructor;
+        readonly description: "Helper text shown below the field.";
+    };
+    error: {
+        readonly type: StringConstructor;
+        readonly description: "External error message; overrides rule errors when set.";
+    };
+    hideFooter: {
+        readonly type: BooleanConstructor;
+        readonly description: "Hides the footer area (helper / error).";
+    };
+    rules: {
+        readonly type: ArrayConstructor;
+        readonly default: () => never[];
+        readonly description: "Validation rule functions or rule descriptors.";
+    };
+    tooltip: {
+        readonly type: StringConstructor;
+        readonly description: "Optional tooltip text next to the label.";
+    };
+    skipFormRegistry: {
+        readonly type: BooleanConstructor;
+        readonly description: "Skips registering this field with a parent x-form.";
+    };
+    disabled: {
+        readonly type: BooleanConstructor;
+        readonly description: "Disables interaction and applies disabled styling.";
+    };
+    loading: {
+        readonly type: BooleanConstructor;
+        readonly description: "Shows a loading indicator and blocks interaction.";
+    };
+    loadingLabel: {
+        readonly type: StringConstructor;
+        readonly description: "Accessible label announced while loading.";
+    };
+    loadingStatus: {
+        readonly type: import("vue").PropType<import("../loader/Loader.vue").LoaderStatus>;
+        readonly default: "active";
+        readonly description: "Loader visual status (for example active or indeterminate).";
+    };
+    size: {
+        readonly type: import("vue").PropType<Size>;
+        readonly default: "md";
+        readonly validator: (value: string) => boolean;
+        readonly description: "Control size. One of xs, sm, md, lg, xl.";
+    };
+}>, {
+    focus: () => void;
+    blur: () => void;
+    reset: () => void;
+    validate: () => boolean;
+    setError: (val: string) => void;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, string[], string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    block: import("vue").Prop<boolean | undefined>;
+    modelValue: {
+        readonly type: import("vue").PropType<string | number | boolean | object | any[] | undefined>;
+        readonly default: undefined;
+        readonly description: "Bound value (v-model).";
+    };
+    id: {
+        readonly type: StringConstructor;
+        readonly description: "Native id attribute for the input element.";
+    };
+    name: {
+        readonly type: StringConstructor;
+        readonly description: "Native name attribute for form submission.";
+    };
+    readonly: {
+        readonly type: BooleanConstructor;
+        readonly description: "Makes the field read-only without disabling it.";
+    };
+    required: {
+        readonly type: BooleanConstructor;
+        readonly description: "Marks the field as required for validation.";
+    };
+    validateOnInput: {
+        readonly type: BooleanConstructor;
+        readonly default: true;
+        readonly description: "Runs validation on each input event when true.";
+    };
+    label: {
+        readonly type: StringConstructor;
+        readonly description: "Visible label text for the field.";
+    };
+    helper: {
+        readonly type: StringConstructor;
+        readonly description: "Helper text shown below the field.";
+    };
+    error: {
+        readonly type: StringConstructor;
+        readonly description: "External error message; overrides rule errors when set.";
+    };
+    hideFooter: {
+        readonly type: BooleanConstructor;
+        readonly description: "Hides the footer area (helper / error).";
+    };
+    rules: {
+        readonly type: ArrayConstructor;
+        readonly default: () => never[];
+        readonly description: "Validation rule functions or rule descriptors.";
+    };
+    tooltip: {
+        readonly type: StringConstructor;
+        readonly description: "Optional tooltip text next to the label.";
+    };
+    skipFormRegistry: {
+        readonly type: BooleanConstructor;
+        readonly description: "Skips registering this field with a parent x-form.";
+    };
+    disabled: {
+        readonly type: BooleanConstructor;
+        readonly description: "Disables interaction and applies disabled styling.";
+    };
+    loading: {
+        readonly type: BooleanConstructor;
+        readonly description: "Shows a loading indicator and blocks interaction.";
+    };
+    loadingLabel: {
+        readonly type: StringConstructor;
+        readonly description: "Accessible label announced while loading.";
+    };
+    loadingStatus: {
+        readonly type: import("vue").PropType<import("../loader/Loader.vue").LoaderStatus>;
+        readonly default: "active";
+        readonly description: "Loader visual status (for example active or indeterminate).";
+    };
+    size: {
+        readonly type: import("vue").PropType<Size>;
+        readonly default: "md";
+        readonly validator: (value: string) => boolean;
+        readonly description: "Control size. One of xs, sm, md, lg, xl.";
+    };
+}>> & Readonly<{
+    [x: `on${Capitalize<string>}`]: ((...args: any[]) => any) | undefined;
+}>, {
+    disabled: boolean;
+    size: Size;
+    loading: boolean;
+    loadingStatus: import("../loader/Loader.vue").LoaderStatus;
+    modelValue: string | number | boolean | object | any[] | undefined;
+    readonly: boolean;
+    required: boolean;
+    validateOnInput: boolean;
+    hideFooter: boolean;
+    rules: unknown[];
+    skipFormRegistry: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>, {
+    default?(_: {}): any;
+}>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/lib/components/inputGroup/InputGroup.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,125 @@
+import { injectInputGroupKey as e } from "../../composables/keys.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 { useInteractive as i } from "../../composables/useInteractive.js";
+import { useInputtable as a } from "../../composables/useInputtable.js";
+import o from "../inputFooter/InputFooter.js";
+import s from "../label/Label.js";
+import { computed as c, createBlock as l, createCommentVNode as u, createElementVNode as d, defineComponent as f, mergeProps as p, normalizeClass as m, openBlock as h, provide as g, ref as _, renderSlot as v, toHandlers as y, unref as b, withCtx as x, withKeys as S } from "vue";
+//#region src/components/inputGroup/InputGroup.vue?vue&type=script&setup=true&lang.ts
+var C = {
+	...r.props(),
+	...i.props(),
+	...a.props(),
+	block: n("Stretches the group to the full width of the parent.")
+}, w = /* @__PURE__ */ f({
+	name: "XInputGroup",
+	validators: { ...r.validators() },
+	docs: {
+		slots: { default: "Grouped controls (inputs, buttons, or other adornments)." },
+		emits: { ...a.emitDocs() },
+		methods: { ...a.methodDocs() }
+	},
+	props: C,
+	emits: a.emits(),
+	setup(n, { expose: r, emit: i }) {
+		let f = n, C = [], w = _([]), T = c(() => w.value);
+		function E(e) {
+			let t = T.value, n = t.indexOf(e);
+			return n === -1 || t.length === 0 || t.length === 1 ? "only" : n === 0 ? "first" : n === t.length - 1 ? "last" : "middle";
+		}
+		function D(e) {
+			w.value.includes(e) || (w.value = [...w.value, e]);
+		}
+		function O(e) {
+			w.value = w.value.filter((t) => t !== e);
+		}
+		g(e, {
+			registerChild: D,
+			unregisterChild: O,
+			registerInput: (e, t) => {
+				C.push({
+					name: e,
+					methods: t
+				}), D(e);
+			},
+			unregisterInput: (e) => {
+				let t = C.findIndex((t) => t.name === e);
+				C.splice(t, 1), O(e);
+			},
+			getPosition: E,
+			childOrder: T,
+			isInsideInputGroup: !0,
+			groupProps: {
+				get size() {
+					return f.size;
+				},
+				get disabled() {
+					return f.disabled;
+				}
+			}
+		});
+		function k() {
+			C[0]?.methods.focus();
+		}
+		function A() {}
+		function j() {
+			return f.modelValue === void 0 ? C.map((e) => e.methods.getValue()) : f.modelValue;
+		}
+		function M() {
+			for (let e of C) if (!e.methods.validate()) {
+				let t = e.methods.getError();
+				return t && R(t), !1;
+			}
+			return f.rules.length ? L(j()) : (N.value = "", !0);
+		}
+		let { errorInternal: N, isInsideForm: P, isFirstValidation: F, reset: I, validate: L, setError: R } = a(f, {
+			focus: k,
+			emit: i,
+			formValidate: M
+		}), z = M, B = { change: () => {
+			f.validateOnInput && !F.value && z();
+		} };
+		function V() {
+			f.validateOnInput && !F.value && z();
+		}
+		let { styles: H, classes: U, className: W } = t("InputGroup", {}, f, { errorInternal: N });
+		return r({
+			focus: k,
+			blur: A,
+			reset: I,
+			validate: z,
+			setError: R
+		}), (e, t) => (h(), l(s, p({
+			tag: "fieldset",
+			style: b(H),
+			block: e.block,
+			disabled: e.disabled,
+			required: e.required,
+			"is-inside-form": b(P),
+			"is-inside-input-group": !1,
+			label: e.label,
+			class: [b(W)],
+			tooltip: e.tooltip
+		}, y(B), { onKeyup: S(V, ["space"]) }), {
+			default: x(() => [d("div", { class: m(b(U).wrapper) }, [v(e.$slots, "default")], 2), e.hideFooter ? u("", !0) : (h(), l(o, {
+				key: 0,
+				error: b(N),
+				helper: e.helper
+			}, null, 8, ["error", "helper"]))]),
+			_: 3
+		}, 16, [
+			"style",
+			"block",
+			"disabled",
+			"required",
+			"is-inside-form",
+			"label",
+			"class",
+			"tooltip"
+		]));
+	}
+});
+//#endregion
+export { w as default };

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

@@ -0,0 +1,2 @@
+export { default as XInputGroup } from './InputGroup.vue';
+export type { InputGroupProps, InputGroupTheme, InputGroupInjection, InputGroupPosition } from './InputGroup.vue';

package/lib/components/inputGroup/theme/InputGroup.base.theme.d.ts

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

package/lib/components/inputGroup/theme/InputGroup.base.theme.js

@@ -0,0 +1,4 @@
+//#region src/components/inputGroup/theme/InputGroup.base.theme.ts
+var e = { classes: { wrapper: "inline-flex w-full items-stretch -space-x-px [&>*]:relative [&>*:focus-within]:z-10 [&>*:focus]:z-10 [&>.x-datepicker]:flex-1 [&>.x-datepicker]:min-w-0" } };
+//#endregion
+export { e as default };

package/lib/components/inputGroup/theme/InputGroup.carbon.theme.d.ts

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

package/lib/components/inputGroup/theme/InputGroup.carbon.theme.js

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

package/lib/components/label/Label.js

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

package/lib/components/label/Label.vue.d.ts

@@ -1,20 +1,41 @@
-import type { ExtractPublicPropTypes } from 'vue';
+import { type ExtractPublicPropTypes } from 'vue';
 import { type ThemeComponent } from '../../composables/useTheme';
 declare const labelProps: {
-    label: StringConstructor;
-    disabled: BooleanConstructor;
-    required: BooleanConstructor;
-    block: BooleanConstructor;
-    isInsideForm: BooleanConstructor;
+    label: {
+        type: StringConstructor;
+        description: string;
+    };
+    disabled: {
+        type: BooleanConstructor;
+        description: string;
+    };
+    required: {
+        type: BooleanConstructor;
+        description: string;
+    };
+    block: import("vue").Prop<boolean | undefined>;
+    isInsideForm: {
+        type: BooleanConstructor;
+        description: string;
+    };
+    isInsideInputGroup: {
+        type: BooleanConstructor;
+        description: string;
+    };
     tag: {
         type: StringConstructor;
         default: string;
+        description: string;
+    };
+    tooltip: {
+        type: StringConstructor;
+        description: string;
     };
-    tooltip: StringConstructor;
     size: {
         readonly type: import("vue").PropType<import("../../composables/useCommon").Size>;
         readonly default: "md";
         readonly validator: (value: string) => boolean;
+        readonly description: "Control size. One of xs, sm, md, lg, xl.";
     };
 };
 export type LabelProps = ExtractPublicPropTypes<typeof labelProps>;
@@ -22,44 +43,86 @@ type InternalClasses = 'wrapper' | 'label';
 export interface LabelTheme extends ThemeComponent<LabelProps, InternalClasses> {
 }
 declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<import("vue").ExtractPropTypes<{
-    label: StringConstructor;
-    disabled: BooleanConstructor;
-    required: BooleanConstructor;
-    block: BooleanConstructor;
-    isInsideForm: BooleanConstructor;
+    label: {
+        type: StringConstructor;
+        description: string;
+    };
+    disabled: {
+        type: BooleanConstructor;
+        description: string;
+    };
+    required: {
+        type: BooleanConstructor;
+        description: string;
+    };
+    block: import("vue").Prop<boolean | undefined>;
+    isInsideForm: {
+        type: BooleanConstructor;
+        description: string;
+    };
+    isInsideInputGroup: {
+        type: BooleanConstructor;
+        description: string;
+    };
     tag: {
         type: StringConstructor;
         default: string;
+        description: string;
+    };
+    tooltip: {
+        type: StringConstructor;
+        description: string;
     };
-    tooltip: StringConstructor;
     size: {
         readonly type: import("vue").PropType<import("../../composables/useCommon").Size>;
         readonly default: "md";
         readonly validator: (value: string) => boolean;
+        readonly description: "Control size. One of xs, sm, md, lg, xl.";
     };
 }>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
-    label: StringConstructor;
-    disabled: BooleanConstructor;
-    required: BooleanConstructor;
-    block: BooleanConstructor;
-    isInsideForm: BooleanConstructor;
+    label: {
+        type: StringConstructor;
+        description: string;
+    };
+    disabled: {
+        type: BooleanConstructor;
+        description: string;
+    };
+    required: {
+        type: BooleanConstructor;
+        description: string;
+    };
+    block: import("vue").Prop<boolean | undefined>;
+    isInsideForm: {
+        type: BooleanConstructor;
+        description: string;
+    };
+    isInsideInputGroup: {
+        type: BooleanConstructor;
+        description: string;
+    };
     tag: {
         type: StringConstructor;
         default: string;
+        description: string;
+    };
+    tooltip: {
+        type: StringConstructor;
+        description: string;
     };
-    tooltip: StringConstructor;
     size: {
         readonly type: import("vue").PropType<import("../../composables/useCommon").Size>;
         readonly default: "md";
         readonly validator: (value: string) => boolean;
+        readonly description: "Control size. One of xs, sm, md, lg, xl.";
     };
 }>> & Readonly<{}>, {
     disabled: boolean;
     tag: string;
     size: import("../../composables/useCommon").Size;
-    block: boolean;
     required: boolean;
     isInsideForm: boolean;
+    isInsideInputGroup: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>, {
     default?(_: {}): any;
 }>;

package/lib/components/label/Label.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,79 @@
+import { injectInputGroupKey as e } from "../../composables/keys.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 "../tooltip/ToggleTip.js";
+import { computed as a, createBlock as o, createCommentVNode as s, createElementVNode as c, defineComponent as l, inject as u, normalizeClass as d, normalizeStyle as f, openBlock as p, renderSlot as m, resolveDynamicComponent as h, toDisplayString as g, unref as _, withCtx as v } from "vue";
+//#region src/components/label/Label.vue?vue&type=script&setup=true&lang.ts
+var y = {
+	...r.props(),
+	label: {
+		type: String,
+		description: "Visible label text."
+	},
+	disabled: {
+		type: Boolean,
+		description: "Applies disabled styling to the label."
+	},
+	required: {
+		type: Boolean,
+		description: "Marks the label as required for form fields."
+	},
+	block: n("Stretches to the full width of the parent."),
+	isInsideForm: {
+		type: Boolean,
+		description: "Indicates the label is rendered inside a form layout."
+	},
+	isInsideInputGroup: {
+		type: Boolean,
+		description: "Indicates the label is rendered inside an input group."
+	},
+	tag: {
+		type: String,
+		default: "label",
+		description: "Root element tag. Use `fieldset` for grouped controls."
+	},
+	tooltip: {
+		type: String,
+		description: "Tooltip text shown next to the label via a toggle tip."
+	}
+}, b = /* @__PURE__ */ l({
+	name: "XLabel",
+	validators: { ...r.validators() },
+	docs: { slots: { default: "Labeled control or content." } },
+	props: y,
+	setup(n) {
+		let r = n, l = u(e, {
+			registerChild: () => {},
+			unregisterChild: () => {},
+			registerInput: () => {},
+			unregisterInput: () => {},
+			getPosition: () => "only",
+			childOrder: a(() => []),
+			isInsideInputGroup: !1,
+			groupProps: {}
+		}), { styles: y, classes: b, className: x } = t("Label", {}, a(() => ({
+			...r,
+			isInsideInputGroup: r.isInsideInputGroup ?? l.isInsideInputGroup
+		})));
+		return (e, t) => (p(), o(h(e.tag), {
+			style: f(_(y)),
+			class: d([_(x), _(b).wrapper])
+		}, {
+			default: v(() => [e.label ? (p(), o(h(e.tag === "fieldset" ? "legend" : "p"), {
+				key: 0,
+				title: e.label,
+				class: d(_(b).label)
+			}, {
+				default: v(() => [c("span", null, g(e.label), 1), e.tooltip ? (p(), o(i, {
+					key: 0,
+					content: e.tooltip
+				}, null, 8, ["content"])) : s("", !0)]),
+				_: 1
+			}, 8, ["title", "class"])) : s("", !0), m(e.$slots, "default")]),
+			_: 3
+		}, 8, ["style", "class"]));
+	}
+});
+//#endregion
+export { b as default };