@indielayer/ui 1.18.0 → 2.0.0

package/lib/composables/resolveComponentDefaults.js

@@ -0,0 +1,15 @@
+import { injectOptionsKey as e } from "./keys.js";
+import { computed as t, inject as n, unref as r } from "vue";
+//#region src/composables/resolveComponentDefaults.ts
+function i(e, t) {
+	if (!t) return e;
+	let n = { ...e }, r = e;
+	for (let e of Object.keys(t)) r[e] === void 0 && (n[e] = t[e]);
+	return n;
+}
+function a(a, o) {
+	let s = n(e, {});
+	return t(() => i(r(o), s.defaults?.[a]));
+}
+//#endregion
+export { i as resolvePropsWithDefaults, a as useResolvedComponentProps };

package/lib/composables/useCSS.js

@@ -1,26 +1,30 @@
-const u = ["dark"], a = ["hover", "active", "focus", "visited"], f = (n) => u.includes(n), v = (n) => a.includes(n), d = (n) => {
-  const $ = (i, e, t, s) => `${r(i, t, s)}: ${e}`, r = (i, e, t) => `--x${n ? `-${n}` : ""}${e ? `-${e}` : ""}-${i}${t ? `-${t}` : ""}`, l = (i, e, t) => {
-    let s = {};
-    for (const o in i) {
-      const c = i[o];
-      if (!c)
-        break;
-      f(o) ? s = {
-        ...s,
-        ...l(c, o, t)
-      } : v(o) ? s = {
-        ...s,
-        ...l(c, e, o)
-      } : s[r(o, e, t)] = c;
-    }
-    return s;
-  };
-  return {
-    get: $,
-    variable: r,
-    variables: l
-  };
-};
-export {
-  d as useCSS
+//#region src/composables/useCSS.ts
+var e = ["dark"], t = [
+	"hover",
+	"active",
+	"focus",
+	"visited"
+], n = (t) => e.includes(t), r = (e) => t.includes(e), i = (e) => {
+	let t = (e, t, n, r) => `${i(e, n, r)}: ${t}`, i = (t, n, r) => `--x${e ? `-${e}` : ""}${n ? `-${n}` : ""}-${t}${r ? `-${r}` : ""}`, a = (e, t, o) => {
+		let s = {};
+		for (let c in e) {
+			let l = e[c];
+			if (!l) break;
+			n(c) ? s = {
+				...s,
+				...a(l, c, o)
+			} : r(c) ? s = {
+				...s,
+				...a(l, t, c)
+			} : s[i(c, t, o)] = l;
+		}
+		return s;
+	};
+	return {
+		get: t,
+		variable: i,
+		variables: a
+	};
 };
+//#endregion
+export { i as useCSS };

package/lib/composables/useColors.js

@@ -1,52 +1,45 @@
-import { inject as m, computed as p, unref as f } from "vue";
-import { injectThemeKey as g } from "./keys.js";
-import { tailwindColors as n, setOpacity as l, isValidColor as d, colorShade as t } from "../common/colors.js";
-import { mergeRightDeep as y } from "../common/utils.js";
-const a = {}, C = {
-  primary: n.emerald,
-  secondary: n.slate,
-  success: n.green,
-  warning: n.yellow,
-  error: n.red
-}, i = (r) => n[r], c = (r, s) => l(r, s), w = () => {
-  const r = m(g, {}), s = p(() => y(C, f(r).colors || {}));
-  return {
-    getPalette: (e) => {
-      if (!e)
-        return i("gray");
-      const o = i(e);
-      if (o)
-        return o;
-      if (a[e])
-        return a[e];
-      if (s.value[e])
-        return s.value[e];
-      if (!d(e))
-        return console.warn(`Invalid color: ${e}`), i("gray");
-      const u = {
-        50: t(e, 0.9),
-        100: t(e, 0.8),
-        200: t(e, 0.6),
-        300: t(e, 0.4),
-        400: t(e, 0.1),
-        500: e,
-        600: t(e, -0.1),
-        700: t(e, -0.25),
-        800: t(e, -0.58),
-        900: t(e, -0.7),
-        950: t(e, -0.8)
-      };
-      return a[e] = u, u;
-    },
-    getColorOpacity: c
-  };
-};
-w.props = (r) => ({
-  color: {
-    type: String,
-    default: r
-  }
-});
-export {
-  w as useColors
+import { colorShade as e, isValidColor as t, setOpacity as n, tailwindColors as r } from "../common/colors.js";
+import { injectThemeKey as i } from "./keys.js";
+import { mergeRightDeep as a } from "../common/utils.js";
+import { computed as o, inject as s, unref as c } from "vue";
+//#region src/composables/useColors.ts
+var l = {}, u = {
+	primary: r.emerald,
+	secondary: r.slate,
+	success: r.green,
+	warning: r.yellow,
+	error: r.red
+}, d = (e) => r[e], f = (e, t) => n(e, t), p = () => {
+	let n = s(i, {}), r = o(() => a(u, c(n).colors || {}));
+	return {
+		getPalette: (n) => {
+			if (!n) return d("gray");
+			let i = d(n);
+			if (i) return i;
+			if (l[n]) return l[n];
+			if (r.value[n]) return r.value[n];
+			if (!t(n)) return console.warn(`Invalid color: ${n}`), d("gray");
+			let a = {
+				50: e(n, .9),
+				100: e(n, .8),
+				200: e(n, .6),
+				300: e(n, .4),
+				400: e(n, .1),
+				500: n,
+				600: e(n, -.1),
+				700: e(n, -.25),
+				800: e(n, -.58),
+				900: e(n, -.7),
+				950: e(n, -.8)
+			};
+			return l[n] = a, a;
+		},
+		getColorOpacity: f
+	};
 };
+p.props = (e) => ({ color: {
+	type: String,
+	default: e
+} });
+//#endregion
+export { p as useColors };

package/lib/composables/useCommon.js

@@ -1,17 +1,15 @@
-const e = () => {
-}, s = Object.freeze({
-  size: ["xs", "sm", "md", "lg", "xl"]
-});
-e.props = () => ({
-  size: {
-    type: String,
-    default: "md",
-    validator: (t) => s.size.includes(t)
-  }
-});
-e.validators = () => ({
-  ...s
-});
-export {
-  e as useCommon
-};
+//#region src/composables/useCommon.ts
+var e = () => {}, t = Object.freeze({ size: [
+	"xs",
+	"sm",
+	"md",
+	"lg",
+	"xl"
+] });
+e.props = () => ({ size: {
+	type: String,
+	default: "md",
+	validator: (e) => t.size.includes(e)
+} }), e.validators = () => ({ ...t });
+//#endregion
+export { e as useCommon };

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) {
+		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,9 +51,11 @@ 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[];
     props(): {

package/lib/composables/useInputtable.js

@@ -1,115 +1,137 @@
-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.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
 });
-export {
-  G as useInputtable
-};
+//#endregion
+export { l as useInputtable };

package/lib/composables/useInteractive.js

@@ -1,22 +1,16 @@
-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: Boolean,
+	loading: Boolean,
+	loadingLabel: String,
+	loadingStatus: {
+		type: String,
+		default: "active"
+	}
 });
-export {
-  t as useInteractive
-};
+//#endregion
+export { e as useInteractive };