@indielayer/ui 1.18.0 → 2.0.0

package/lib/components/checkbox/Checkbox.vue.d.ts

@@ -3,7 +3,7 @@ import { type ThemeComponent } from '../../composables/useTheme';
 declare const checkboxProps: {
     value: (StringConstructor | NumberConstructor)[];
     indeterminate: BooleanConstructor;
-    glow: BooleanConstructor;
+    glow: import("vue").Prop<boolean | undefined>;
     modelValue: {
         readonly type: import("vue").PropType<string | number | boolean | object | any[] | undefined>;
         readonly default: undefined;
@@ -55,7 +55,7 @@ export interface CheckboxTheme extends ThemeComponent<CheckboxProps, InternalCla
 declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<import("vue").ExtractPropTypes<{
     value: (StringConstructor | NumberConstructor)[];
     indeterminate: BooleanConstructor;
-    glow: BooleanConstructor;
+    glow: import("vue").Prop<boolean | undefined>;
     modelValue: {
         readonly type: import("vue").PropType<string | number | boolean | object | any[] | undefined>;
         readonly default: undefined;
@@ -104,7 +104,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<im
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, string[], string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     value: (StringConstructor | NumberConstructor)[];
     indeterminate: BooleanConstructor;
-    glow: BooleanConstructor;
+    glow: import("vue").Prop<boolean | undefined>;
     modelValue: {
         readonly type: import("vue").PropType<string | number | boolean | object | any[] | undefined>;
         readonly default: undefined;
@@ -147,7 +147,6 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<im
     [x: `on${Capitalize<string>}`]: ((...args: any[]) => any) | undefined;
 }>, {
     disabled: boolean;
-    glow: boolean;
     color: string;
     size: import("../../composables/useCommon").Size;
     loading: boolean;

package/lib/components/checkbox/Checkbox.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,129 @@
+import { useColors as e } from "../../composables/useColors.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 a from "../spinner/Spinner.js";
+import { useInputtable as o } from "../../composables/useInputtable.js";
+import s from "../inputFooter/InputFooter.js";
+import { createBlock as c, createCommentVNode as l, createElementBlock as u, createElementVNode as d, defineComponent as f, mergeProps as p, normalizeClass as m, normalizeStyle as h, openBlock as g, ref as _, renderSlot as v, toDisplayString as y, toHandlers as b, unref as x, vModelCheckbox as S, watch as C, withDirectives as w, withKeys as T, withModifiers as E } from "vue";
+//#region src/components/checkbox/Checkbox.vue?vue&type=script&setup=true&lang.ts
+var D = ["onKeypress"], O = [
+	"id",
+	"name",
+	"aria-checked",
+	"aria-disabled",
+	"disabled",
+	"required"
+], k = ["textContent"], A = {
+	...r.props(),
+	...e.props("primary"),
+	...i.props(),
+	...o.props(),
+	value: [String, Number],
+	indeterminate: Boolean,
+	glow: n()
+}, j = /* @__PURE__ */ f({
+	name: "XCheckbox",
+	validators: { ...r.validators() },
+	props: A,
+	emits: o.emits(!1),
+	setup(e, { expose: n, emit: r }) {
+		let f = e, A = r, j = _(null), M = _(!1);
+		function N() {
+			f.disabled || f.loading || f.readonly || (M.value = !M.value);
+		}
+		let { focus: P, blur: F } = i(j), { errorInternal: I, hideFooterInternal: L, isInsideForm: R, isInsideFormGroup: z, isFirstValidation: B, formGroup: V, reset: H, validate: U, setError: W } = o(f, {
+			focus: P,
+			emit: A,
+			withListeners: !1
+		});
+		z ? (C(() => V.value, () => {
+			let e = x(V.value);
+			e && Array.isArray(e) && e.includes(f.value) ? M.value = !0 : M.value = !1;
+		}, {
+			immediate: !0,
+			deep: !0
+		}), C(() => M.value, (e) => {
+			if (!f.value) return;
+			let t = x(V.value);
+			if (e) if (t && Array.isArray(t)) {
+				if (!t.includes(f.value)) {
+					let e = [...t, f.value];
+					V.setValue(e);
+				}
+			} else V.setValue([f.value]);
+			else if (t && Array.isArray(t) && t.includes(f.value)) {
+				let e = t.findIndex((e) => e === f.value), n = [...t];
+				n.splice(e, 1), V.setValue(n);
+			}
+		})) : (C(() => f.modelValue, (e) => {
+			M.value = !!e;
+		}, { immediate: !0 }), C(() => M.value, (e) => {
+			A("update:modelValue", e);
+		}));
+		let G = { input: () => {
+			z || setTimeout(() => {
+				f.validateOnInput && !B.value && U(f.modelValue);
+			}, 0);
+		} }, { styles: K, classes: q, className: J } = t("Checkbox", {}, f, {
+			checked: M,
+			isInsideForm: R,
+			isInsideFormGroup: z
+		});
+		return n({
+			focus: P,
+			blur: F,
+			toggle: N,
+			reset: H,
+			validate: U,
+			setError: W
+		}), (e, t) => (g(), u("label", {
+			style: h(x(K)),
+			class: m([x(J), x(q).wrapper])
+		}, [d("div", {
+			ref_key: "elRef",
+			ref: j,
+			class: m(x(q).content),
+			tabindex: "0",
+			onKeypress: T(E(N, ["prevent", "stop"]), ["space"])
+		}, [
+			w(d("input", p({
+				id: e.id,
+				"onUpdate:modelValue": t[0] ||= (e) => M.value = e,
+				name: e.name,
+				"aria-checked": e.indeterminate ? "mixed" : M.value ? "true" : "false",
+				"aria-disabled": e.disabled ? "true" : void 0,
+				type: "checkbox",
+				class: "invisible absolute",
+				disabled: e.disabled || e.loading || e.readonly,
+				required: e.required
+			}, b(G, !0)), null, 16, O), [[S, M.value]]),
+			d("div", { class: m([x(q).box, [e.glow && !e.disabled && !e.loading ? e.$style["checkbox--glow"] : ""]]) }, [e.loading ? (g(), c(a, {
+				key: 0,
+				size: e.size,
+				class: "absolute"
+			}, null, 8, ["size"])) : e.indeterminate ? (g(), u("span", {
+				key: 1,
+				name: "check-icon",
+				class: m(["w-2/3 h-[1.5px]", [e.disabled ? "bg-secondary-400 dark:bg-secondary-500" : "bg-white"]])
+			}, null, 2)) : v(e.$slots, "icon", { key: 2 }, () => [(g(), u("svg", {
+				viewBox: "0 0 20 20",
+				class: m([x(q).icon, { "opacity-0": !M.value }])
+			}, [...t[1] ||= [d("path", { d: "M0 11l2-2 5 5L18 3l2 2L7 18z" }, null, -1)]], 2))])], 2),
+			e.label || e.$slots.default ? (g(), u("div", {
+				key: 0,
+				class: m(x(q).label)
+			}, [e.label ? (g(), u("span", {
+				key: 0,
+				textContent: y(e.label)
+			}, null, 8, k)) : v(e.$slots, "default", { key: 1 })], 2)) : l("", !0)
+		], 42, D), x(L) ? l("", !0) : (g(), c(s, {
+			key: 0,
+			error: x(I),
+			helper: e.helper
+		}, null, 8, ["error", "helper"]))], 6));
+	}
+});
+//#endregion
+export { j as default };

package/lib/components/checkbox/Checkbox.vue_vue_type_style_index_0_lang.module.js

@@ -0,0 +1,4 @@
+//#region src/components/checkbox/Checkbox.vue?vue&type=style&index=0&lang.module.css
+var e = { "checkbox--glow": "_checkbox--glow_141dd_2" };
+//#endregion
+export { e as default };

package/lib/components/checkbox/theme/Checkbox.base.theme.js

@@ -1,59 +1,59 @@
-const i = {
-  classes: {
-    wrapper: ({ data: e }) => {
-      const r = ["inline-block relative cursor-pointer align-middle"];
-      return e.isInsideForm && !e.isInsideFormGroup && r.push("mb-5"), r;
-    },
-    box: ({ props: e }) => {
-      const r = ["rounded flex justify-center items-center shrink-0 border border-[color:var(--x-checkbox-border)] bg-[color:var(--x-checkbox-bg)] dark:border-[color:var(--x-checkbox-dark-border)] dark:bg-[color:var(--x-checkbox-dark-bg)]"];
-      return e.size === "lg" ? r.push("h-5 w-5") : e.size === "xl" ? r.push("h-6 w-6") : r.push("h-4 w-4"), r;
-    },
-    content: ({ props: e }) => {
-      const r = ["flex items-center"];
-      return e.disabled && r.push("cursor-not-allowed"), r;
-    },
-    icon: ({ props: e }) => {
-      const r = ["fill-current"];
-      return e.disabled ? r.push("text-secondary-400 dark:text-secondary-500") : r.push("text-white"), e.size === "lg" ? r.push("h-3 w-3") : e.size === "xl" ? r.push("h-4 w-4") : r.push("h-2.5 w-2.5"), r;
-    },
-    label: ({ props: e, data: r }) => {
-      const s = ["inline-block text-secondary-800 dark:text-secondary-200 pl-2"];
-      return s.push(r.isInsideFormGroup ? "font-normal" : "font-medium"), e.size === "xs" ? s.push("text-xs") : e.size === "sm" ? s.push("text-sm") : e.size === "lg" ? s.push("text-lg") : e.size === "xl" && s.push("text-xl"), s;
-    }
-  },
-  styles({ props: e, colors: r, css: s, data: o }) {
-    const t = r.getPalette("gray"), l = r.getPalette(e.color), a = [];
-    return e.loading ? s.variables({
-      bg: "transparent",
-      border: "transparent",
-      dark: {
-        bg: "transparent",
-        border: "transparent"
-      }
-    }) : (e.disabled ? a.push(s.variables({
-      bg: t[100],
-      border: t[200],
-      dark: {
-        bg: t[800],
-        border: t[700]
-      }
-    })) : (o.checked ? a.push(s.variables({
-      bg: l[500],
-      border: l[500],
-      dark: {
-        bg: l[500],
-        border: l[500]
-      }
-    })) : a.push(s.variables({
-      bg: "#fff",
-      border: e.glow ? l[300] : t[300],
-      dark: {
-        bg: t[900],
-        border: e.glow ? l[300] : t[400]
-      }
-    })), e.glow && a.push(s.get("glow", r.getColorOpacity(l[500], 0.5)))), a);
-  }
-}, n = i;
-export {
-  n as default
+//#region src/components/checkbox/theme/Checkbox.base.theme.ts
+var e = {
+	classes: {
+		wrapper: ({ data: e }) => {
+			let t = ["inline-block relative cursor-pointer align-middle"];
+			return e.isInsideForm && !e.isInsideFormGroup && t.push("mb-5"), t;
+		},
+		box: ({ props: e }) => {
+			let t = ["rounded flex justify-center items-center shrink-0 border border-[color:var(--x-checkbox-border)] bg-[color:var(--x-checkbox-bg)] dark:border-[color:var(--x-checkbox-dark-border)] dark:bg-[color:var(--x-checkbox-dark-bg)]"];
+			return e.size === "lg" ? t.push("h-5 w-5") : e.size === "xl" ? t.push("h-6 w-6") : t.push("h-4 w-4"), t;
+		},
+		content: ({ props: e }) => {
+			let t = ["flex items-center"];
+			return e.disabled && t.push("cursor-not-allowed"), t;
+		},
+		icon: ({ props: e }) => {
+			let t = ["fill-current"];
+			return e.disabled ? t.push("text-secondary-400 dark:text-secondary-500") : t.push("text-white"), e.size === "lg" ? t.push("h-3 w-3") : e.size === "xl" ? t.push("h-4 w-4") : t.push("h-2.5 w-2.5"), t;
+		},
+		label: ({ props: e, data: t }) => {
+			let n = ["inline-block text-secondary-800 dark:text-secondary-200 pl-2"];
+			return n.push(t.isInsideFormGroup ? "font-normal" : "font-medium"), e.size === "xs" ? n.push("text-xs") : e.size === "sm" ? n.push("text-sm") : e.size === "lg" ? n.push("text-lg") : e.size === "xl" && n.push("text-xl"), n;
+		}
+	},
+	styles({ props: e, colors: t, css: n, data: r }) {
+		let i = t.getPalette("gray"), a = t.getPalette(e.color), o = [];
+		return e.loading ? n.variables({
+			bg: "transparent",
+			border: "transparent",
+			dark: {
+				bg: "transparent",
+				border: "transparent"
+			}
+		}) : (e.disabled ? o.push(n.variables({
+			bg: i[100],
+			border: i[200],
+			dark: {
+				bg: i[800],
+				border: i[700]
+			}
+		})) : (r.checked ? o.push(n.variables({
+			bg: a[500],
+			border: a[500],
+			dark: {
+				bg: a[500],
+				border: a[500]
+			}
+		})) : o.push(n.variables({
+			bg: "#fff",
+			border: e.glow ? a[300] : i[300],
+			dark: {
+				bg: i[900],
+				border: e.glow ? a[300] : i[400]
+			}
+		})), e.glow && o.push(n.get("glow", t.getColorOpacity(a[500], .5)))), o);
+	}
 };
+//#endregion
+export { e as default };

package/lib/components/checkbox/theme/Checkbox.carbon.theme.js

@@ -1,59 +1,59 @@
-const o = {
-  classes: {
-    wrapper: ({ data: r }) => {
-      const e = ["inline-block relative cursor-pointer align-middle"];
-      return r.isInsideForm && !r.isInsideFormGroup && e.push("mb-8"), e;
-    },
-    box: ({ props: r }) => {
-      const e = ["rounded-sm flex justify-center items-center shrink-0 border border-[color:var(--x-checkbox-border)] bg-[color:var(--x-checkbox-bg)] dark:border-[color:var(--x-checkbox-dark-border)] dark:bg-[color:var(--x-checkbox-dark-bg)] mt-0.5"];
-      return r.size === "xs" || r.size === "sm" ? e.push("h-3 w-3") : r.size === "xl" ? e.push("h-5 w-5") : e.push("h-4 w-4"), e;
-    },
-    content: ({ props: r }) => {
-      const e = ["flex"];
-      return r.disabled && e.push("cursor-not-allowed"), e;
-    },
-    icon: ({ props: r }) => {
-      const e = ["fill-current text-white dark:text-secondary-900"];
-      return r.size === "xs" || r.size === "sm" ? e.push("h-2 w-2") : r.size === "xl" ? e.push("h-3.5 w-3.5") : e.push("h-2.5 w-2.5"), e;
-    },
-    label: ({ props: r }) => {
-      const e = ["text-secondary-800 dark:text-secondary-200 pl-2 text-sm"];
-      return r.size === "xs" ? e.push("text-xs") : r.size === "sm" ? e.push("text-sm") : r.size === "lg" ? e.push("text-lg") : r.size === "xl" && e.push("text-xl"), e;
-    }
-  },
-  styles({ props: r, colors: e, css: l, data: i }) {
-    const s = e.getPalette("gray"), t = e.getPalette(r.color), a = [];
-    return r.loading ? l.variables({
-      bg: "transparent",
-      border: "transparent",
-      dark: {
-        bg: "transparent",
-        border: "transparent"
-      }
-    }) : (r.disabled ? a.push(l.variables({
-      bg: s[100],
-      border: s[200],
-      dark: {
-        bg: s[800],
-        border: s[700]
-      }
-    })) : (i.checked ? a.push(l.variables({
-      bg: t[500],
-      border: t[500],
-      dark: {
-        bg: t[500],
-        border: t[500]
-      }
-    })) : a.push(l.variables({
-      bg: "#fff",
-      border: r.glow ? t[300] : s[900],
-      dark: {
-        bg: s[900],
-        border: r.glow ? t[300] : s[300]
-      }
-    })), r.glow && a.push(l.get("glow", e.getColorOpacity(t[500], 0.5)))), a);
-  }
-}, n = o;
-export {
-  n as default
+//#region src/components/checkbox/theme/Checkbox.carbon.theme.ts
+var e = {
+	classes: {
+		wrapper: ({ data: e }) => {
+			let t = ["inline-block relative cursor-pointer align-middle"];
+			return e.isInsideForm && !e.isInsideFormGroup && t.push("mb-8"), t;
+		},
+		box: ({ props: e }) => {
+			let t = ["rounded-xs flex justify-center items-center shrink-0 border border-[color:var(--x-checkbox-border)] bg-[color:var(--x-checkbox-bg)] dark:border-[color:var(--x-checkbox-dark-border)] dark:bg-[color:var(--x-checkbox-dark-bg)] mt-0.5"];
+			return e.size === "xs" || e.size === "sm" ? t.push("h-3 w-3") : e.size === "xl" ? t.push("h-5 w-5") : t.push("h-4 w-4"), t;
+		},
+		content: ({ props: e }) => {
+			let t = ["flex"];
+			return e.disabled && t.push("cursor-not-allowed"), t;
+		},
+		icon: ({ props: e }) => {
+			let t = ["fill-current text-white dark:text-secondary-900"];
+			return e.size === "xs" || e.size === "sm" ? t.push("h-2 w-2") : e.size === "xl" ? t.push("h-3.5 w-3.5") : t.push("h-2.5 w-2.5"), t;
+		},
+		label: ({ props: e }) => {
+			let t = ["text-secondary-800 dark:text-secondary-200 pl-2 text-sm"];
+			return e.size === "xs" ? t.push("text-xs") : e.size === "sm" ? t.push("text-sm") : e.size === "lg" ? t.push("text-lg") : e.size === "xl" && t.push("text-xl"), t;
+		}
+	},
+	styles({ props: e, colors: t, css: n, data: r }) {
+		let i = t.getPalette("gray"), a = t.getPalette(e.color), o = [];
+		return e.loading ? n.variables({
+			bg: "transparent",
+			border: "transparent",
+			dark: {
+				bg: "transparent",
+				border: "transparent"
+			}
+		}) : (e.disabled ? o.push(n.variables({
+			bg: i[100],
+			border: i[200],
+			dark: {
+				bg: i[800],
+				border: i[700]
+			}
+		})) : (r.checked ? o.push(n.variables({
+			bg: a[500],
+			border: a[500],
+			dark: {
+				bg: a[500],
+				border: a[500]
+			}
+		})) : o.push(n.variables({
+			bg: "#fff",
+			border: e.glow ? a[300] : i[900],
+			dark: {
+				bg: i[900],
+				border: e.glow ? a[300] : i[300]
+			}
+		})), e.glow && o.push(n.get("glow", t.getColorOpacity(a[500], .5)))), o);
+	}
 };
+//#endregion
+export { e as default };

package/lib/components/container/Container.js

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

package/lib/components/container/Container.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,28 @@
+import { useTheme as e } from "../../composables/useTheme.js";
+import { createBlock as t, defineComponent as n, normalizeClass as r, normalizeStyle as i, openBlock as a, renderSlot as o, resolveDynamicComponent as s, unref as c, withCtx as l } from "vue";
+//#region src/components/container/Container.vue?vue&type=script&setup=true&lang.ts
+var u = /* @__PURE__ */ n({
+	name: "XContainer",
+	props: {
+		tag: {
+			type: String,
+			default: "div"
+		},
+		fluid: {
+			type: Boolean,
+			default: !1
+		}
+	},
+	setup(n) {
+		let { styles: u, classes: d, className: f } = e("Container", {}, n);
+		return (e, n) => (a(), t(s(e.tag), {
+			style: i(c(u)),
+			class: r([c(f), c(d).wrapper])
+		}, {
+			default: l(() => [o(e.$slots, "default")]),
+			_: 3
+		}, 8, ["style", "class"]));
+	}
+});
+//#endregion
+export { u as default };

package/lib/components/container/theme/Container.base.theme.js

@@ -1,11 +1,7 @@
-const a = {
-  classes: {
-    wrapper: ({ props: s }) => {
-      const e = ["px-4 md:px-6"];
-      return s.fluid || e.push("max-w-screen-xl mx-auto"), e;
-    }
-  }
-}, t = a;
-export {
-  t as default
-};
+//#region src/components/container/theme/Container.base.theme.ts
+var e = { classes: { wrapper: ({ props: e }) => {
+	let t = ["px-4 md:px-6"];
+	return e.fluid || t.push("max-w-screen-xl mx-auto"), t;
+} } };
+//#endregion
+export { e as default };

package/lib/components/container/theme/Container.carbon.theme.js

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

package/lib/components/datepicker/Datepicker.js

@@ -0,0 +1,6 @@
+import e from "./Datepicker.vue_vue_type_script_setup_true_lang.js";
+/* empty css                                           */
+//#region src/components/datepicker/Datepicker.vue
+var t = e;
+//#endregion
+export { t as default };

package/lib/components/datepicker/Datepicker.vue.d.ts

@@ -1,5 +1,6 @@
 import { type ExtractPublicPropTypes, type PropType } from 'vue';
 import { type ThemeComponent } from '../../composables/useTheme';
+import type { Size } from '../../composables/useCommon';
 import type { Locale } from 'date-fns';
 import { type ModelValue, type TimeModel } from '@vuepic/vue-datepicker';
 import '@vuepic/vue-datepicker/dist/main.css';
@@ -518,14 +519,17 @@ declare const datepickerProps: {
         readonly default: "active";
     };
     size: {
-        readonly type: PropType<import("../../composables/useCommon").Size>;
+        readonly type: PropType<Size>;
         readonly default: "md";
         readonly validator: (value: string) => boolean;
     };
 };
 export type DatepickerProps = ExtractPublicPropTypes<typeof datepickerProps>;
 type InternalClasses = 'wrapper';
-export interface DatepickerTheme extends ThemeComponent<DatepickerProps, InternalClasses> {
+type InternalExtraData = {
+    isInsideInputGroup: boolean;
+};
+export interface DatepickerTheme extends ThemeComponent<DatepickerProps, InternalClasses, InternalExtraData> {
 }
 declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<import("vue").ExtractPropTypes<{
     multiCalendars: {
@@ -1042,7 +1046,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<im
         readonly default: "active";
     };
     size: {
-        readonly type: PropType<import("../../composables/useCommon").Size>;
+        readonly type: PropType<Size>;
         readonly default: "md";
         readonly validator: (value: string) => boolean;
     };
@@ -1565,7 +1569,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<im
         readonly default: "active";
     };
     size: {
-        readonly type: PropType<import("../../composables/useCommon").Size>;
+        readonly type: PropType<Size>;
         readonly default: "md";
         readonly validator: (value: string) => boolean;
     };
@@ -1573,7 +1577,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<im
     [x: `on${Capitalize<string>}`]: ((...args: any[]) => any) | undefined;
 }>, {
     disabled: boolean;
-    size: import("../../composables/useCommon").Size;
+    size: Size;
     position: "left" | "right" | "center" | undefined;
     loading: boolean;
     loadingStatus: import("../loader/Loader.vue").LoaderStatus;