@indielayer/ui 1.18.0 → 2.0.0

package/lib/components/form/Form.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,97 @@
+import { injectFormKey as e } from "../../composables/keys.js";
+import { useTheme as t } from "../../composables/useTheme.js";
+import { createCommentVNode as n, createElementBlock as r, createElementVNode as i, defineComponent as a, nextTick as o, normalizeClass as s, normalizeStyle as c, onMounted as l, openBlock as u, provide as d, renderSlot as f, toDisplayString as p, unref as m, watch as h } from "vue";
+//#region src/components/form/Form.vue?vue&type=script&setup=true&lang.ts
+var g = {
+	key: 0,
+	class: "mb-6"
+}, _ = ["disabled"], v = /* @__PURE__ */ a({
+	name: "XForm",
+	props: {
+		autoValidate: {
+			type: Boolean,
+			default: !0
+		},
+		autoFocus: {
+			type: Boolean,
+			default: !0
+		},
+		disabled: Boolean,
+		errors: {
+			type: [Array, Object],
+			default: () => []
+		},
+		title: String,
+		description: String,
+		hasFooter: {
+			type: Boolean,
+			default: !0
+		}
+	},
+	emits: ["submit"],
+	setup(a, { expose: v, emit: y }) {
+		let b = a, x = y, S = [];
+		d(e, {
+			registerInput: (e, t, n, r) => {
+				let i = S.find((t) => t.name === e);
+				i ? (i.focus = t, i.validate = n, i.setError = r) : S.push({
+					name: e,
+					focus: t,
+					validate: n,
+					setError: r
+				});
+			},
+			unregisterInput: (e) => {
+				let t = S.findIndex((t) => t.name === e);
+				S.splice(t, 1);
+			},
+			isInsideForm: !0
+		}), l(async () => {
+			b.autoFocus && S && S.length > 0 && setTimeout(S[0].focus, 50);
+		}), h(() => b.errors, (e) => {
+			e && o(() => {
+				if (Array.isArray(e)) e.forEach((e, t) => {
+					let n = S.find((t) => t.name === e.field);
+					n && (n.setError(e.msg), t === 0 && n.focus && n.focus());
+				});
+				else {
+					let t = S.find((t) => t.name === e.field);
+					t && (t.setError(e.msg), t.focus && t.focus());
+				}
+			});
+		});
+		let C = () => {
+			let e = !0;
+			return S.forEach((t) => {
+				!t.validate() && e && (e = !1, t.focus && t.focus());
+			}), e;
+		}, w = (e) => {
+			e.preventDefault(), e.stopPropagation(), x("submit", b.autoValidate ? C() : !0);
+		};
+		v({
+			validate: C,
+			submit: w
+		});
+		let { styles: T, classes: E, className: D } = t("Form", {}, b);
+		return (e, t) => (u(), r("form", {
+			style: c(m(T)),
+			class: s([m(D), m(E).wrapper]),
+			onSubmit: w
+		}, [
+			f(e.$slots, "header", {}, () => [e.title || e.description ? (u(), r("div", g, [e.title ? (u(), r("p", {
+				key: 0,
+				class: s(m(E).title)
+			}, p(e.title), 3)) : n("", !0), e.description ? (u(), r("p", {
+				key: 1,
+				class: s(m(E).description)
+			}, p(e.description), 3)) : n("", !0)])) : n("", !0)]),
+			i("fieldset", {
+				disabled: e.disabled,
+				class: s([m(E).content, "contents"])
+			}, [f(e.$slots, "default")], 10, _),
+			e.hasFooter ? f(e.$slots, "footer", { key: 0 }, () => [i("div", { class: s(m(E).footer) }, [f(e.$slots, "primary-action"), f(e.$slots, "secondary-action")], 2)]) : n("", !0)
+		], 38));
+	}
+});
+//#endregion
+export { v as default };

package/lib/components/form/theme/Form.base.theme.js

@@ -1,12 +1,10 @@
-const e = {
-  classes: {
-    wrapper: "relative",
-    content: "",
-    title: "text-xl mb-1",
-    description: "text-secondary-500",
-    footer: "space-x-4 mt-4"
-  }
-}, t = e;
-export {
-  t as default
-};
+//#region src/components/form/theme/Form.base.theme.ts
+var e = { classes: {
+	wrapper: "relative",
+	content: "",
+	title: "text-xl mb-1",
+	description: "text-secondary-500",
+	footer: "space-x-4 mt-4"
+} };
+//#endregion
+export { e as default };

package/lib/components/form/theme/Form.carbon.theme.js

@@ -1,12 +1,10 @@
-const e = {
-  classes: {
-    wrapper: "relative",
-    content: "grid",
-    title: "text-xl mb-1",
-    description: "text-secondary-500",
-    footer: "grid grid-cols-2 gap-4 lg:flex mt-8"
-  }
-}, t = e;
-export {
-  t as default
-};
+//#region src/components/form/theme/Form.carbon.theme.ts
+var e = { classes: {
+	wrapper: "relative",
+	content: "grid",
+	title: "text-xl mb-1",
+	description: "text-secondary-500",
+	footer: "grid grid-cols-2 gap-4 lg:flex mt-8"
+} };
+//#endregion
+export { e as default };

package/lib/components/formGroup/FormGroup.js

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

package/lib/components/formGroup/FormGroup.vue.d.ts

@@ -36,8 +36,11 @@ declare const formGroupProps: {
     };
 };
 export type FormGroupProps = ExtractPublicPropTypes<typeof formGroupProps>;
+export type FormGroupRegisterOptions = {
+    joined?: boolean;
+};
 export type FormGroupInjection = {
-    registerInputGroup: (name: string, focus: () => void) => void;
+    registerInputGroup: (name: string, focus: () => void, options?: FormGroupRegisterOptions) => void;
     unregisterInputGroup: (name: string) => void;
     setValue: (val: string | number | string[] | number[]) => void;
     value: MaybeRef<string | number | string[] | number[] | null | undefined>;
@@ -46,9 +49,13 @@ export type FormGroupInjection = {
 export type FormGroupInput = {
     name: string;
     focus: () => void;
+    joined?: boolean;
 };
 type InternalClasses = 'wrapper';
-export interface FormGroupTheme extends ThemeComponent<FormGroupProps, InternalClasses> {
+type InternalExtraData = {
+    hasJoinedLayout: boolean;
+};
+export interface FormGroupTheme extends ThemeComponent<FormGroupProps, InternalClasses, InternalExtraData> {
 }
 declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<import("vue").ExtractPropTypes<{
     vertical: {

package/lib/components/formGroup/FormGroup.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,91 @@
+import { injectFormGroupKey as e } from "../../composables/keys.js";
+import { useTheme as t } from "../../composables/useTheme.js";
+import { useInteractive as n } from "../../composables/useInteractive.js";
+import { useInputtable as r } from "../../composables/useInputtable.js";
+import i from "../inputFooter/InputFooter.js";
+import a from "../label/Label.js";
+import { computed as o, createBlock as s, createCommentVNode as c, createElementVNode as l, defineComponent as u, mergeProps as d, normalizeClass as f, openBlock as p, provide as m, ref as h, renderSlot as g, toHandlers as _, unref as v, withCtx as y, withKeys as b } from "vue";
+//#region src/components/formGroup/FormGroup.vue?vue&type=script&setup=true&lang.ts
+var x = /* @__PURE__ */ u({
+	name: "XFormGroup",
+	props: {
+		...n.props(),
+		...r.props(),
+		vertical: {
+			type: Boolean,
+			default: !1
+		}
+	},
+	emits: r.emits(),
+	setup(n, { expose: u, emit: x }) {
+		let S = n, C = [], w = h(0), T = o(() => w.value > 0);
+		m(e, {
+			registerInputGroup: (e, t, n) => {
+				C.push({
+					name: e,
+					focus: t,
+					joined: n?.joined
+				}), n?.joined && w.value++;
+			},
+			unregisterInputGroup: (e) => {
+				let t = C.findIndex((t) => t.name === e);
+				t !== -1 && (C[t]?.joined && w.value--, C.splice(t, 1));
+			},
+			setValue: (e) => {
+				O("update:modelValue", e);
+			},
+			isInsideFormGroup: !0,
+			value: o(() => typeof S.modelValue == "string" || typeof S.modelValue == "number" || Array.isArray(S.modelValue) ? S.modelValue : "")
+		});
+		function E() {
+			C[0]?.focus();
+		}
+		function D() {}
+		let O = x, { errorInternal: k, isInsideForm: A, isFirstValidation: j, reset: M, validate: N, setError: P } = r(S, {
+			focus: E,
+			emit: O
+		}), F = { change: (e) => {
+			S.validateOnInput && !j.value && N(S.modelValue);
+		} };
+		function I() {
+			S.validateOnInput && !j.value && N(S.modelValue);
+		}
+		let { styles: L, classes: R, className: z } = t("FormGroup", {}, S, {
+			errorInternal: k,
+			hasJoinedLayout: T
+		});
+		return u({
+			focus: E,
+			blur: D,
+			reset: M,
+			validate: N,
+			setError: P
+		}), (e, t) => (p(), s(a, d({
+			tag: "fieldset",
+			style: v(L),
+			disabled: e.disabled,
+			required: e.required,
+			"is-inside-form": v(A),
+			label: e.label,
+			class: [v(z)],
+			tooltip: e.tooltip
+		}, _(F), { onKeyup: b(I, ["space"]) }), {
+			default: y(() => [l("div", { class: f(v(R).wrapper) }, [g(e.$slots, "default")], 2), e.hideFooter ? c("", !0) : (p(), s(i, {
+				key: 0,
+				error: v(k),
+				helper: e.helper
+			}, null, 8, ["error", "helper"]))]),
+			_: 3
+		}, 16, [
+			"style",
+			"disabled",
+			"required",
+			"is-inside-form",
+			"label",
+			"class",
+			"tooltip"
+		]));
+	}
+});
+//#endregion
+export { x as default };

package/lib/components/formGroup/theme/FormGroup.base.theme.js

@@ -1,11 +1,7 @@
-const t = {
-  classes: {
-    wrapper: ({ props: s }) => {
-      const e = [""];
-      return s.vertical ? e.push("grid gap-1") : e.push("flex gap-4"), e;
-    }
-  }
-}, a = t;
-export {
-  a as default
-};
+//#region src/components/formGroup/theme/FormGroup.base.theme.ts
+var e = { classes: { wrapper: ({ props: e, data: t }) => {
+	let n = [""];
+	return e.vertical ? n.push("grid gap-1") : t.hasJoinedLayout ? n.push("inline-flex align-middle relative -space-x-[1px]") : n.push("flex gap-4"), n;
+} } };
+//#endregion
+export { e as default };

package/lib/components/formGroup/theme/FormGroup.carbon.theme.js

@@ -1,11 +1,7 @@
-const t = {
-  classes: {
-    wrapper: ({ props: s }) => {
-      const e = [""];
-      return s.vertical ? e.push("grid gap-3") : e.push("flex gap-4"), e;
-    }
-  }
-}, a = t;
-export {
-  a as default
-};
+//#region src/components/formGroup/theme/FormGroup.carbon.theme.ts
+var e = { classes: { wrapper: ({ props: e, data: t }) => {
+	let n = [""];
+	return e.vertical ? n.push("grid gap-3") : t.hasJoinedLayout ? n.push("inline-flex align-middle relative -space-x-[1px]") : n.push("flex gap-4"), n;
+} } };
+//#endregion
+export { e as default };

package/lib/components/icon/Icon.js

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

package/lib/components/icon/Icon.vue.d.ts

@@ -5,7 +5,7 @@ declare const iconProps: {
         type: StringConstructor;
         required: boolean;
     };
-    filled: BooleanConstructor;
+    filled: import("vue").Prop<boolean | undefined>;
     viewBox: {
         type: StringConstructor;
         default: string;
@@ -31,7 +31,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         type: StringConstructor;
         required: boolean;
     };
-    filled: BooleanConstructor;
+    filled: import("vue").Prop<boolean | undefined>;
     viewBox: {
         type: StringConstructor;
         default: string;
@@ -46,7 +46,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         type: StringConstructor;
         required: boolean;
     };
-    filled: BooleanConstructor;
+    filled: import("vue").Prop<boolean | undefined>;
     viewBox: {
         type: StringConstructor;
         default: string;
@@ -58,7 +58,6 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     };
 }>> & Readonly<{}>, {
     size: import("../../composables/useCommon").Size;
-    filled: boolean;
     viewBox: string;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 export default _default;

package/lib/components/icon/Icon.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,85 @@
+import { injectIconsKey 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 { computed as i, createElementBlock as a, defineComponent as o, inject as s, mergeProps as c, normalizeClass as l, normalizeStyle as u, openBlock as d, ref as f, unref as p, watchEffect as m } from "vue";
+//#region src/components/icon/Icon.vue?vue&type=script&setup=true&lang.ts
+var h = ["innerHTML"], g = [
+	"stroke-linejoin",
+	"stroke-linecap",
+	"stroke",
+	"fill",
+	"viewBox",
+	"innerHTML"
+], _ = {
+	...r.props(),
+	icon: {
+		type: String,
+		required: !0
+	},
+	filled: n(),
+	viewBox: {
+		type: String,
+		default: "0 0 24 24"
+	}
+}, v = /* @__PURE__ */ o({
+	name: "XIcon",
+	validators: { ...r.validators() },
+	props: _,
+	setup(n) {
+		let r = n, o = s(e, {}), _ = f(!1), v = f(""), y = f(r.filled), b = f(r.viewBox), x = f({});
+		m(() => {
+			let e = o && r.icon && o[r.icon];
+			if (_.value = !1, v.value = e, e) if (typeof e == "string") if (e.startsWith("<svg")) {
+				_.value = !0;
+				let { content: t, attributes: n } = S(e);
+				x.value = n, v.value = t;
+			} else _.value = !1, v.value = e;
+			else typeof e == "object" && (v.value = e.icon, y.value = e.filled || r.filled, b.value = e.viewBox || r.viewBox);
+			else v.value = r.icon || "";
+		});
+		function S(e) {
+			e = e.trim();
+			let t = e.substring(e.indexOf(">") + 1, e.lastIndexOf("</svg>")), n = e.substring(e.indexOf("<svg") + 4, e.indexOf(">")).trim().match(/[\w-]+="[^"]*"/g), r = {};
+			return n?.forEach((e) => {
+				let [t, n] = e.split("=");
+				[
+					"height",
+					"width",
+					"class"
+				].includes(t) || (r[t] = n.replace(/(^"|"$)/g, ""));
+			}), {
+				attributes: r,
+				content: t
+			};
+		}
+		let { styles: C, classes: w, className: T } = t("Icon", {}, r), E = i(() => u(p(C)));
+		return (e, t) => _.value ? (d(), a("svg", c({
+			key: 0,
+			style: E.value,
+			class: [
+				"shrink-0",
+				p(T),
+				p(w).wrapper
+			]
+		}, x.value, { innerHTML: v.value }), null, 16, h)) : (d(), a("svg", {
+			key: 1,
+			style: u(E.value),
+			xmlns: "http://www.w3.org/2000/svg",
+			class: l([
+				"shrink-0",
+				p(T),
+				p(w).wrapper,
+				{ "stroke-2": !y.value }
+			]),
+			"stroke-linejoin": y.value ? void 0 : "round",
+			"stroke-linecap": y.value ? void 0 : "round",
+			stroke: y.value ? void 0 : "currentColor",
+			fill: y.value ? "currentColor" : "none",
+			viewBox: b.value,
+			innerHTML: v.value
+		}, null, 14, g));
+	}
+});
+//#endregion
+export { v as default };

package/lib/components/icon/theme/Icon.base.theme.js

@@ -1,11 +1,4 @@
-const t = {
-  classes: {
-    wrapper: ({ props: s }) => {
-      const e = "inline shrink-0";
-      return s.size === "xs" ? e + " h-3 w-3" : s.size === "sm" ? e + " h-4 w-4" : s.size === "lg" ? e + " h-6 w-6" : s.size === "xl" ? e + " h-7 w-7" : e + " h-4 w-4";
-    }
-  }
-}, i = t;
-export {
-  i as default
-};
+//#region src/components/icon/theme/Icon.base.theme.ts
+var e = { classes: { wrapper: ({ props: e }) => e.size === "xs" ? "inline shrink-0 h-3 w-3" : e.size === "sm" ? "inline shrink-0 h-4 w-4" : e.size === "lg" ? "inline shrink-0 h-6 w-6" : e.size === "xl" ? "inline shrink-0 h-7 w-7" : "inline shrink-0 h-4 w-4" } };
+//#endregion
+export { e as default };

package/lib/components/icon/theme/Icon.carbon.theme.js

@@ -1,11 +1,4 @@
-const t = {
-  classes: {
-    wrapper: ({ props: s }) => {
-      const e = "inline shrink-0";
-      return s.size === "xs" ? e + " h-3 w-3" : s.size === "lg" ? e + " h-5 w-5" : s.size === "xl" ? e + " h-8 w-8" : e + " h-4 w-4";
-    }
-  }
-}, n = t;
-export {
-  n as default
-};
+//#region src/components/icon/theme/Icon.carbon.theme.ts
+var e = { classes: { wrapper: ({ props: e }) => e.size === "xs" ? "inline shrink-0 h-3 w-3" : e.size === "lg" ? "inline shrink-0 h-5 w-5" : e.size === "xl" ? "inline shrink-0 h-8 w-8" : "inline shrink-0 h-4 w-4" } };
+//#endregion
+export { e as default };

package/lib/components/image/Image.js

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

package/lib/components/image/Image.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,25 @@
+import { useTheme as e } from "../../composables/useTheme.js";
+import { createElementBlock as t, defineComponent as n, normalizeClass as r, normalizeStyle as i, openBlock as a, ref as o, unref as s, watch as c } from "vue";
+//#region src/components/image/Image.vue?vue&type=script&setup=true&lang.ts
+var l = ["src"], u = /* @__PURE__ */ n({
+	name: "XImage",
+	props: { src: String },
+	setup(n) {
+		let u = n, d = o("data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=");
+		typeof window < "u" && Image && c(() => u.src, (e) => {
+			if (!e) return;
+			let t = new Image();
+			t.onload = () => {
+				d.value = u.src;
+			}, t.onerror = () => {}, t.src = e;
+		}, { immediate: !0 });
+		let { styles: f, classes: p, className: m } = e("Image", {}, u);
+		return (e, n) => (a(), t("img", {
+			class: r([s(m), s(p).wrapper]),
+			style: i(s(f)),
+			src: d.value
+		}, null, 14, l));
+	}
+});
+//#endregion
+export { u as default };

package/lib/components/image/theme/Image.base.theme.js

@@ -1,8 +1,4 @@
-const e = {
-  classes: {
-    wrapper: ""
-  }
-}, s = e;
-export {
-  s as default
-};
+//#region src/components/image/theme/Image.base.theme.ts
+var e = { classes: { wrapper: "" } };
+//#endregion
+export { e as default };

package/lib/components/image/theme/Image.carbon.theme.js

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

package/lib/components/index.d.ts

@@ -11,12 +11,14 @@ export * from './container';
 export * from './datepicker';
 export * from './divider';
 export * from './drawer';
+export * from './empty';
 export * from './form';
 export * from './formGroup';
 export * from './icon';
 export * from './image';
 export * from './input';
 export * from './inputFooter';
+export * from './inputGroup';
 export * from './label';
 export * from './link';
 export * from './loader';
@@ -28,6 +30,7 @@ export * from './popover';
 export * from './progress';
 export * from './qrCode';
 export * from './radio';
+export * from './radioButton';
 export * from './scroll';
 export * from './select';
 export * from './skeleton';