@indielayer/ui 1.18.1 → 2.1.0

package/lib/composables/useFocusTrap.js

@@ -1,54 +1,51 @@
-import { ref as b, onUnmounted as F, unref as w, nextTick as x } from "vue";
-const h = 'button:not([tabindex="-1"]), [href], input, select, textarea, li, a, [tabindex]:not([tabindex="-1"])';
-function T() {
-  const l = b([]);
-  let u = null, i = null, f = null, a = null, o = null;
-  function m(e) {
-    return e ? e.$el ? e.$el : e : null;
-  }
-  function v(e) {
-    const t = m(e);
-    if (!t)
-      return;
-    const c = t.querySelectorAll(h);
-    l.value = Array.from(c), i = l.value[0] || null, f = l.value[l.value.length - 1] || null;
-  }
-  const s = (e) => {
-    if (e.key === "Tab" && l.value.length === 0) {
-      e.preventDefault();
-      return;
-    }
-    if (e.key !== "Tab")
-      return;
-    const t = e.shiftKey, c = document.activeElement, n = i, r = f;
-    if (!c) {
-      e.preventDefault(), n == null || n.focus();
-      return;
-    }
-    !t && c === r ? (e.preventDefault(), n == null || n.focus()) : t && c === n && (e.preventDefault(), r == null || r.focus());
-  };
-  async function y(e, t) {
-    var r;
-    if (typeof window > "u" || (d(), a = document.activeElement, o = w(e), !o))
-      return;
-    await x(), v(o);
-    const c = (t == null ? void 0 : t.initialFocusIndex) ?? 0;
-    (r = l.value[c]) == null || r.focus(), document.removeEventListener("keydown", s), u == null || u.disconnect(), document.addEventListener("keydown", s);
-    const n = m(o);
-    n && (u = new MutationObserver(() => v(o)), u.observe(n, { childList: !0, subtree: !0 }));
-  }
-  function d(e) {
-    document.removeEventListener("keydown", s), u == null || u.disconnect(), u = null, e != null && e.returnFocus && a && a.focus(), o = null, l.value = [], i = null, f = null, a = null;
-  }
-  return F(() => {
-    d({ returnFocus: !0 });
-  }), {
-    initFocusTrap: y,
-    clearFocusTrap: d,
-    focusable: l
-    // expose for advanced use
-  };
+import { nextTick as e, onUnmounted as t, ref as n, unref as r } from "vue";
+//#region src/composables/useFocusTrap.ts
+var i = "button:not([tabindex=\"-1\"]), [href], input, select, textarea, li, a, [tabindex]:not([tabindex=\"-1\"])";
+function a() {
+	let a = n([]), o = null, s = null, c = null, l = null, u = null;
+	function d(e) {
+		return e ? e.$el ? e.$el : e : null;
+	}
+	function f(e) {
+		let t = d(e);
+		if (!t) return;
+		let n = t.querySelectorAll(i);
+		a.value = Array.from(n), s = a.value[0] || null, c = a.value[a.value.length - 1] || null;
+	}
+	let p = (e) => {
+		if (e.key === "Tab" && a.value.length === 0) {
+			e.preventDefault();
+			return;
+		}
+		if (e.key !== "Tab") return;
+		let t = e.shiftKey, n = document.activeElement, r = s, i = c;
+		if (!n) {
+			e.preventDefault(), r?.focus();
+			return;
+		}
+		!t && n === i ? (e.preventDefault(), r?.focus()) : t && n === r && (e.preventDefault(), i?.focus());
+	};
+	async function m(t, n) {
+		if (typeof window > "u" || (h(), l = document.activeElement, u = r(t), !u)) return;
+		await e(), f(u);
+		let i = n?.initialFocusIndex ?? 0;
+		a.value[i]?.focus(), document.removeEventListener("keydown", p), o?.disconnect(), document.addEventListener("keydown", p);
+		let s = d(u);
+		s && (o = new MutationObserver(() => f(u)), o.observe(s, {
+			childList: !0,
+			subtree: !0
+		}));
+	}
+	function h(e) {
+		typeof document < "u" && document.removeEventListener("keydown", p), o?.disconnect(), o = null, e?.returnFocus && l && l.focus(), u = null, a.value = [], s = null, c = null, l = null;
+	}
+	return t(() => {
+		h({ returnFocus: !0 });
+	}), {
+		initFocusTrap: m,
+		clearFocusTrap: h,
+		focusable: a
+	};
 }
-export {
-  T as useFocusTrap
-};
+//#endregion
+export { a as useFocusTrap };

package/lib/composables/useInputtable.d.ts

@@ -1,21 +1,29 @@
 import type { PropType } from 'vue';
 export interface XFormInputMethods {
     focus: () => void;
-    validate: (val: any) => boolean;
+    validate: (val?: any) => boolean;
     setError: (val: string) => void;
+    getError: () => string;
+    getValue: () => unknown;
 }
 export declare const useInputtable: {
-    (props: any, { focus, emit, withListeners }: {
+    (props: any, { focus, emit, withListeners, formValidate, formGroupJoined }: {
         focus: () => void;
         emit: any;
         withListeners?: boolean | undefined;
+        formValidate?: (() => boolean) | undefined;
+        formGroupJoined?: boolean | undefined;
     }): {
         isFirstValidation: import("vue").Ref<boolean, boolean>;
         errorInternal: import("vue").Ref<any, any>;
         hideFooterInternal: import("vue").Ref<any, any>;
+        hideLabelInternal: import("vue").Ref<boolean, boolean>;
         isFocused: import("vue").Ref<boolean, boolean>;
         isInsideForm: boolean;
         isInsideFormGroup: boolean;
+        isInsideInputGroup: boolean;
+        inputGroupPosition: import("vue").ComputedRef<import("..").InputGroupPosition | undefined>;
+        nameInternal: import("vue").Ref<any, any>;
         inputListeners: {
             focus: (event: Event) => void;
             blur: (event: Event) => void;
@@ -43,33 +51,70 @@ export declare const useInputtable: {
             change: (event: Event) => void;
         }>;
         formGroup: import("..").FormGroupInjection;
+        inputGroup: import("..").InputGroupInjection;
         reset: () => void;
         validate: (val?: any) => boolean;
         setError: (val: string) => void;
+        getError: () => any;
     };
     emits(withListeners?: boolean): string[];
+    emitDocs(withListeners?: boolean): Record<string, string>;
+    methodDocs(): Record<string, string>;
     props(): {
         readonly modelValue: {
             readonly type: PropType<string | number | boolean | object | any[] | undefined>;
             readonly default: undefined;
+            readonly description: "Bound value (v-model).";
+        };
+        readonly id: {
+            readonly type: StringConstructor;
+            readonly description: "Native id attribute for the input element.";
+        };
+        readonly name: {
+            readonly type: StringConstructor;
+            readonly description: "Native name attribute for form submission.";
+        };
+        readonly readonly: {
+            readonly type: BooleanConstructor;
+            readonly description: "Makes the field read-only without disabling it.";
+        };
+        readonly required: {
+            readonly type: BooleanConstructor;
+            readonly description: "Marks the field as required for validation.";
         };
-        readonly id: StringConstructor;
-        readonly name: StringConstructor;
-        readonly readonly: BooleanConstructor;
-        readonly required: BooleanConstructor;
         readonly validateOnInput: {
             readonly type: BooleanConstructor;
             readonly default: true;
+            readonly description: "Runs validation on each input event when true.";
+        };
+        readonly label: {
+            readonly type: StringConstructor;
+            readonly description: "Visible label text for the field.";
+        };
+        readonly helper: {
+            readonly type: StringConstructor;
+            readonly description: "Helper text shown below the field.";
+        };
+        readonly error: {
+            readonly type: StringConstructor;
+            readonly description: "External error message; overrides rule errors when set.";
+        };
+        readonly hideFooter: {
+            readonly type: BooleanConstructor;
+            readonly description: "Hides the footer area (helper / error).";
         };
-        readonly label: StringConstructor;
-        readonly helper: StringConstructor;
-        readonly error: StringConstructor;
-        readonly hideFooter: BooleanConstructor;
         readonly rules: {
             readonly type: ArrayConstructor;
             readonly default: () => never[];
+            readonly description: "Validation rule functions or rule descriptors.";
+        };
+        readonly tooltip: {
+            readonly type: StringConstructor;
+            readonly description: "Optional tooltip text next to the label.";
+        };
+        readonly skipFormRegistry: {
+            readonly type: BooleanConstructor;
+            readonly description: "Skips registering this field with a parent x-form.";
         };
-        readonly tooltip: StringConstructor;
-        readonly skipFormRegistry: BooleanConstructor;
     };
 };

package/lib/composables/useInputtable.js

@@ -1,115 +1,179 @@
-import { ref as a, watch as y, inject as h, computed as j, onMounted as k, onUnmounted as A } from "vue";
-import { injectFormGroupKey as R, injectFormKey as O } from "./keys.js";
-const G = (r, { focus: I, emit: n, withListeners: b = !0 }) => {
-  const s = a(!0), o = a(r.error), F = a(r.hideFooter), V = r.name ? r.name : (Math.random() + 1).toString(36).substring(7), i = a(V);
-  y(() => r.error, (e) => {
-    o.value = e;
-  }), y(() => r.name, (e) => {
-    e && (i.value = e);
-  });
-  const t = h(R, {
-    registerInputGroup: () => {
-    },
-    unregisterInputGroup: () => {
-    },
-    setValue: () => {
-    },
-    isInsideFormGroup: !1,
-    value: void 0
-  });
-  t.isInsideFormGroup && (F.value = !0);
-  const m = h(O, {
-    registerInput: () => {
-    },
-    unregisterInput: () => {
-    },
-    isInsideForm: !1
-  }), S = () => {
-    o.value = "", s.value = !0, n("update:modelValue", "");
-  }, v = (e) => {
-    o.value = e;
-  }, c = (e) => {
-    e = e || r.modelValue, s.value = !1;
-    for (let g = 0; g < r.rules.length; g++) {
-      const u = r.rules[g];
-      let l = !0;
-      if (typeof u == "function")
-        l = u(e);
-      else if (Array.isArray(u) && u.length === 2) {
-        const { 0: d, 1: p } = u;
-        l = d(e, p);
-      } else {
-        const d = u.fn, { options: p } = u;
-        l = d(e, p);
-      }
-      if (l !== !0)
-        return o.value = l, !1;
-    }
-    return o.value = "", !0;
-  }, f = a(!1), B = b ? j(() => ({
-    focus: (e) => {
-      f.value = !0, n("focus", e);
-    },
-    blur: (e) => {
-      f.value = !1, n("blur", e);
-    },
-    input: (e) => {
-      r.validateOnInput && !s.value && c(e.target.value), n("update:modelValue", e.target.value), n("input", e);
-    },
-    change: (e) => n("change", e)
-  })) : {
-    focus: () => {
-    },
-    blur: () => {
-    },
-    input: () => {
-    },
-    change: () => {
-    }
-  };
-  return k(() => {
-    t.isInsideFormGroup ? t.registerInputGroup(i.value, I) : r.skipFormRegistry || m.registerInput(i.value, I, c, v);
-  }), A(() => {
-    t.isInsideFormGroup ? t.unregisterInputGroup(i.value) : r.skipFormRegistry || m.unregisterInput(i.value);
-  }), {
-    isFirstValidation: s,
-    errorInternal: o,
-    hideFooterInternal: F,
-    isFocused: f,
-    isInsideForm: r.skipFormRegistry ? !1 : m.isInsideForm,
-    isInsideFormGroup: t.isInsideFormGroup,
-    inputListeners: B,
-    formGroup: t,
-    reset: S,
-    validate: c,
-    setError: v
-  };
+import { injectFormGroupKey as e, injectFormKey as t, injectInputGroupKey as n } from "./keys.js";
+import { computed as r, inject as i, onMounted as a, onUnmounted as o, ref as s, watch as c } from "vue";
+//#region src/composables/useInputtable.ts
+var l = (l, { focus: u, emit: d, withListeners: f = !0, formValidate: p, formGroupJoined: m }) => {
+	let h = s(!0), g = s(l.error), _ = s(l.hideFooter), v = s(!1), y = s(l.name ? l.name : (Math.random() + 1).toString(36).substring(7));
+	c(() => l.error, (e) => {
+		g.value = e;
+	}), c(() => l.name, (e) => {
+		e && (y.value = e);
+	});
+	let b = i(e, {
+		registerInputGroup: () => {},
+		unregisterInputGroup: () => {},
+		setValue: () => {},
+		isInsideFormGroup: !1,
+		value: void 0
+	}), x = i(n, {
+		registerChild: () => {},
+		unregisterChild: () => {},
+		registerInput: () => {},
+		unregisterInput: () => {},
+		getPosition: () => "only",
+		childOrder: r(() => []),
+		isInsideInputGroup: !1,
+		groupProps: {}
+	}), S = r(() => {
+		if (x.isInsideInputGroup) return x.childOrder.value, x.getPosition(y.value);
+	});
+	(b.isInsideFormGroup || x.isInsideInputGroup) && (_.value = !0), x.isInsideInputGroup && (v.value = !0);
+	let C = i(t, {
+		registerInput: () => {},
+		unregisterInput: () => {},
+		isInsideForm: !1
+	}), w = () => {
+		g.value = "", h.value = !0, d("update:modelValue", "");
+	}, T = (e) => {
+		g.value = e;
+	}, E = (e) => {
+		e = e === void 0 ? l.modelValue : e, h.value = !1;
+		for (let t = 0; t < l.rules.length; t++) {
+			let n = l.rules[t], r = !0;
+			if (typeof n == "function") r = n(e);
+			else if (Array.isArray(n) && n.length === 2) {
+				let { 0: t, 1: i } = n;
+				r = t(e, i);
+			} else {
+				let t = n.fn, { options: i } = n;
+				r = t(e, i);
+			}
+			if (r !== !0) return g.value = r, !1;
+		}
+		return g.value = "", !0;
+	}, D = s(!1), O = f ? r(() => ({
+		focus: (e) => {
+			D.value = !0, d("focus", e);
+		},
+		blur: (e) => {
+			D.value = !1, d("blur", e);
+		},
+		input: (e) => {
+			l.validateOnInput && !h.value && E(e.target.value), d("update:modelValue", e.target.value), d("input", e);
+		},
+		change: (e) => d("change", e)
+	})) : {
+		focus: () => {},
+		blur: () => {},
+		input: () => {},
+		change: () => {}
+	};
+	return a(() => {
+		b.isInsideFormGroup ? b.registerInputGroup(y.value, u, m ? { joined: !0 } : void 0) : (x.isInsideInputGroup && x.registerInput(y.value, {
+			focus: u,
+			validate: E,
+			setError: T,
+			getError: () => g.value,
+			getValue: () => l.modelValue
+		}), !l.skipFormRegistry && !x.isInsideInputGroup && C.registerInput(y.value, u, p ?? E, T));
+	}), o(() => {
+		b.isInsideFormGroup ? b.unregisterInputGroup(y.value) : (x.isInsideInputGroup && x.unregisterInput(y.value), !l.skipFormRegistry && !x.isInsideInputGroup && C.unregisterInput(y.value));
+	}), {
+		isFirstValidation: h,
+		errorInternal: g,
+		hideFooterInternal: _,
+		hideLabelInternal: v,
+		isFocused: D,
+		isInsideForm: l.skipFormRegistry ? !1 : C.isInsideForm,
+		isInsideFormGroup: b.isInsideFormGroup,
+		isInsideInputGroup: x.isInsideInputGroup,
+		inputGroupPosition: S,
+		nameInternal: y,
+		inputListeners: O,
+		formGroup: b,
+		inputGroup: x,
+		reset: w,
+		validate: E,
+		setError: T,
+		getError: () => g.value
+	};
 };
-G.emits = (r = !0) => r ? ["update:modelValue", "blur", "focus", "input", "change"] : ["update:modelValue"];
-G.props = () => ({
-  modelValue: {
-    type: [String, Number, Boolean, Object, Array],
-    default: void 0
-  },
-  id: String,
-  name: String,
-  readonly: Boolean,
-  required: Boolean,
-  validateOnInput: {
-    type: Boolean,
-    default: !0
-  },
-  label: String,
-  helper: String,
-  error: String,
-  hideFooter: Boolean,
-  rules: {
-    type: Array,
-    default: () => []
-  },
-  tooltip: String,
-  skipFormRegistry: Boolean
+l.emits = (e = !0) => e ? [
+	"update:modelValue",
+	"blur",
+	"focus",
+	"input",
+	"change"
+] : ["update:modelValue"], l.emitDocs = (e = !0) => {
+	let t = { "update:modelValue": "Emitted when the bound value changes (v-model)." };
+	return e && (t.blur = "Emitted when the field loses focus.", t.focus = "Emitted when the field receives focus.", t.input = "Emitted on native input events.", t.change = "Emitted when the value is committed (change)."), t;
+}, l.methodDocs = () => ({
+	focus: "Focus the underlying control.",
+	blur: "Remove focus from the underlying control.",
+	reset: "Reset the field value and validation state.",
+	validate: "Run validation rules and return whether the field is valid.",
+	setError: "Set an external error message on the field."
+}), l.props = () => ({
+	modelValue: {
+		type: [
+			String,
+			Number,
+			Boolean,
+			Object,
+			Array
+		],
+		default: void 0,
+		description: "Bound value (v-model)."
+	},
+	id: {
+		type: String,
+		description: "Native id attribute for the input element."
+	},
+	name: {
+		type: String,
+		description: "Native name attribute for form submission."
+	},
+	readonly: {
+		type: Boolean,
+		description: "Makes the field read-only without disabling it."
+	},
+	required: {
+		type: Boolean,
+		description: "Marks the field as required for validation."
+	},
+	validateOnInput: {
+		type: Boolean,
+		default: !0,
+		description: "Runs validation on each input event when true."
+	},
+	label: {
+		type: String,
+		description: "Visible label text for the field."
+	},
+	helper: {
+		type: String,
+		description: "Helper text shown below the field."
+	},
+	error: {
+		type: String,
+		description: "External error message; overrides rule errors when set."
+	},
+	hideFooter: {
+		type: Boolean,
+		description: "Hides the footer area (helper / error)."
+	},
+	rules: {
+		type: Array,
+		default: () => [],
+		description: "Validation rule functions or rule descriptors."
+	},
+	tooltip: {
+		type: String,
+		description: "Optional tooltip text next to the label."
+	},
+	skipFormRegistry: {
+		type: Boolean,
+		description: "Skips registering this field with a parent x-form."
+	}
 });
-export {
-  G as useInputtable
-};
+//#endregion
+export { l as useInputtable };

package/lib/composables/useInteractive.d.ts

@@ -12,12 +12,22 @@ export declare const useInteractive: {
         blur: () => void | undefined;
     };
     props(): {
-        readonly disabled: BooleanConstructor;
-        readonly loading: BooleanConstructor;
-        readonly loadingLabel: StringConstructor;
+        readonly disabled: {
+            readonly type: BooleanConstructor;
+            readonly description: "Disables interaction and applies disabled styling.";
+        };
+        readonly loading: {
+            readonly type: BooleanConstructor;
+            readonly description: "Shows a loading indicator and blocks interaction.";
+        };
+        readonly loadingLabel: {
+            readonly type: StringConstructor;
+            readonly description: "Accessible label announced while loading.";
+        };
         readonly loadingStatus: {
             readonly type: PropType<LoaderStatus>;
             readonly default: "active";
+            readonly description: "Loader visual status (for example active or indeterminate).";
         };
     };
 };

package/lib/composables/useInteractive.js

@@ -1,22 +1,26 @@
-const t = (o) => ({
-  focus: () => {
-    var a, e;
-    return (e = (a = o.value) == null ? void 0 : a.focus) == null ? void 0 : e.call(a);
-  },
-  blur: () => {
-    var a, e;
-    return (e = (a = o.value) == null ? void 0 : a.blur) == null ? void 0 : e.call(a);
-  }
+//#region src/composables/useInteractive.ts
+var e = (e) => ({
+	focus: () => e.value?.focus?.(),
+	blur: () => e.value?.blur?.()
 });
-t.props = () => ({
-  disabled: Boolean,
-  loading: Boolean,
-  loadingLabel: String,
-  loadingStatus: {
-    type: String,
-    default: "active"
-  }
+e.props = () => ({
+	disabled: {
+		type: Boolean,
+		description: "Disables interaction and applies disabled styling."
+	},
+	loading: {
+		type: Boolean,
+		description: "Shows a loading indicator and blocks interaction."
+	},
+	loadingLabel: {
+		type: String,
+		description: "Accessible label announced while loading."
+	},
+	loadingStatus: {
+		type: String,
+		default: "active",
+		description: "Loader visual status (for example active or indeterminate)."
+	}
 });
-export {
-  t as useInteractive
-};
+//#endregion
+export { e as useInteractive };

package/lib/composables/useNotifications.js

@@ -1,9 +1,9 @@
-import { inject as o } from "vue";
-import { injectNotificationKey as n } from "./keys.js";
-const a = (i) => {
-  const t = o(i || n);
-  return t || console.warn("useNotifications must have a parent wrapped with Notifications component"), t;
-};
-export {
-  a as useNotifications
+import { injectNotificationKey as e } from "./keys.js";
+import { inject as t } from "vue";
+//#region src/composables/useNotifications.ts
+var n = (n) => {
+	let r = t(n || e);
+	return r || console.warn("useNotifications must have a parent wrapped with Notifications component"), r;
 };
+//#endregion
+export { n as useNotifications };