@indielayer/ui 1.18.1 → 2.1.0

package/lib/common/utils.js

@@ -1,25 +1,18 @@
-import { isRef as o, unref as f } from "vue";
-const s = (n) => n !== null && typeof n == "object", p = (n) => Array.isArray(n), h = (n) => typeof n == "function", b = (n) => {
-  const e = o(n) ? f(n) : n;
-  return s(e) ? p(e) ? j(e) : m(e) : e;
-}, i = (n) => n !== null && !o(n) && typeof n == "object" ? b(n) : f(n), j = (n) => n.map(i), m = (n) => {
-  const e = {};
-  return Object.keys(n).forEach((t) => {
-    e[t] = i(n[t]);
-  }), e;
-}, d = (n = {}, e = {}) => {
-  const t = Object.keys(n), u = Object.keys(e), c = { ...n };
-  return u.forEach((r) => {
-    t.includes(r) && s(n[r]) && s(e[r]) ? c[r] = d(n[r], e[r]) : c[r] = e[r];
-  }), c;
-};
-export {
-  b as deepUnref,
-  p as isArray,
-  h as isFunction,
-  s as isObject,
-  d as mergeRightDeep,
-  i as smartUnref,
-  j as unrefArray,
-  m as unrefObject
+import { isRef as e, unref as t } from "vue";
+//#region src/common/utils.ts
+var n = (e) => typeof e == "object" && !!e, r = (e) => Array.isArray(e), i = (e) => typeof e == "function", a = (i) => {
+	let a = e(i) ? t(i) : i;
+	return n(a) ? r(a) ? s(a) : c(a) : a;
+}, o = (n) => n !== null && !e(n) && typeof n == "object" ? a(n) : t(n), s = (e) => e.map(o), c = (e) => {
+	let t = {};
+	return Object.keys(e).forEach((n) => {
+		t[n] = o(e[n]);
+	}), t;
+}, l = (e = {}, t = {}) => {
+	let r = Object.keys(e), i = Object.keys(t), a = { ...e };
+	return i.forEach((i) => {
+		r.includes(i) && n(e[i]) && n(t[i]) ? a[i] = l(e[i], t[i]) : a[i] = t[i];
+	}), a;
 };
+//#endregion
+export { i as isFunction, n as isObject, l as mergeRightDeep, o as smartUnref };

package/lib/componentDefaults.d.ts

@@ -0,0 +1,18 @@
+/** Variant booleans use `optionalBooleanProp()` from `./common/props` so app `defaults` apply when omitted. */
+import type { ComponentThemes } from './theme';
+import type { AlertProps } from './components/alert/Alert.vue';
+import type { ButtonProps } from './components/button/Button.vue';
+import type { CardProps } from './components/card/Card.vue';
+import type { InputProps } from './components/input/Input.vue';
+type ComponentDefaultsMap = {
+    Alert: AlertProps;
+    Button: ButtonProps;
+    Card: CardProps;
+    Input: InputProps;
+};
+export type ComponentDefaults = {
+    [K in keyof ComponentDefaultsMap]?: Partial<ComponentDefaultsMap[K]>;
+} & {
+    [K in Exclude<keyof ComponentThemes, keyof ComponentDefaultsMap>]?: Record<string, unknown>;
+};
+export {};

package/lib/components/accordion/Accordion.js

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

package/lib/components/accordion/Accordion.vue.d.ts

@@ -4,15 +4,26 @@ declare const accordionProps: {
     tag: {
         type: StringConstructor;
         default: string;
+        description: string;
     };
-    disabled: BooleanConstructor;
-    expanded: BooleanConstructor;
+    disabled: {
+        type: BooleanConstructor;
+        description: string;
+    };
+    expanded: import("vue").Prop<boolean | undefined>;
     showIcon: {
         type: BooleanConstructor;
         default: boolean;
+        description: string;
+    };
+    icon: {
+        type: StringConstructor;
+        description: string;
+    };
+    iconAlign: {
+        type: PropType<"left" | "right">;
+        description: string;
     };
-    icon: StringConstructor;
-    iconAlign: PropType<"left" | "right">;
 };
 export type AccordionProps = ExtractPublicPropTypes<typeof accordionProps>;
 export type AccordionInjection = AccordionProps & {
@@ -25,32 +36,53 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<im
     tag: {
         type: StringConstructor;
         default: string;
+        description: string;
+    };
+    disabled: {
+        type: BooleanConstructor;
+        description: string;
     };
-    disabled: BooleanConstructor;
-    expanded: BooleanConstructor;
+    expanded: import("vue").Prop<boolean | undefined>;
     showIcon: {
         type: BooleanConstructor;
         default: boolean;
+        description: string;
+    };
+    icon: {
+        type: StringConstructor;
+        description: string;
+    };
+    iconAlign: {
+        type: PropType<"left" | "right">;
+        description: string;
     };
-    icon: StringConstructor;
-    iconAlign: PropType<"left" | "right">;
 }>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     tag: {
         type: StringConstructor;
         default: string;
+        description: string;
+    };
+    disabled: {
+        type: BooleanConstructor;
+        description: string;
     };
-    disabled: BooleanConstructor;
-    expanded: BooleanConstructor;
+    expanded: import("vue").Prop<boolean | undefined>;
     showIcon: {
         type: BooleanConstructor;
         default: boolean;
+        description: string;
+    };
+    icon: {
+        type: StringConstructor;
+        description: string;
+    };
+    iconAlign: {
+        type: PropType<"left" | "right">;
+        description: string;
     };
-    icon: StringConstructor;
-    iconAlign: PropType<"left" | "right">;
 }>> & Readonly<{}>, {
     disabled: boolean;
     tag: string;
-    expanded: boolean;
     showIcon: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>, {
     default?(_: {}): any;

package/lib/components/accordion/Accordion.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,49 @@
+import { injectAccordionKey as e } from "../../composables/keys.js";
+import { useTheme as t } from "../../composables/useTheme.js";
+import { optionalBooleanProp as n } from "../../common/props.js";
+import { createElementBlock as r, defineComponent as i, normalizeClass as a, normalizeStyle as o, openBlock as s, provide as c, renderSlot as l, unref as u } from "vue";
+//#region src/components/accordion/Accordion.vue?vue&type=script&setup=true&lang.ts
+var d = /* @__PURE__ */ i({
+	name: "XAccordion",
+	validators: {},
+	docs: { slots: { default: "Accordion items (typically x-accordion-item children)." } },
+	props: {
+		tag: {
+			type: String,
+			default: "div",
+			description: "Root element tag."
+		},
+		disabled: {
+			type: Boolean,
+			description: "Disables all accordion items when set."
+		},
+		expanded: n("Default expanded state passed to child items."),
+		showIcon: {
+			type: Boolean,
+			default: !0,
+			description: "Shows the expand/collapse icon on child items."
+		},
+		icon: {
+			type: String,
+			description: "Default expand/collapse icon name for child items."
+		},
+		iconAlign: {
+			type: String,
+			description: "Default icon alignment for child items (left or right)."
+		}
+	},
+	setup(n) {
+		let i = n;
+		c(e, {
+			...i,
+			isInsideAccordion: !0
+		});
+		let { styles: d, classes: f, className: p } = t("Accordion", {}, i);
+		return (e, t) => (s(), r("div", {
+			style: o(u(d)),
+			class: a([u(p), u(f).wrapper])
+		}, [l(e.$slots, "default")], 6));
+	}
+});
+//#endregion
+export { d as default };

package/lib/components/accordion/AccordionItem.js

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

package/lib/components/accordion/AccordionItem.vue.d.ts

@@ -5,17 +5,26 @@ declare const accordionItemProps: {
     tag: {
         type: StringConstructor;
         default: string;
+        description: string;
     };
-    disabled: BooleanConstructor;
-    expanded: BooleanConstructor;
+    disabled: {
+        type: BooleanConstructor;
+        description: string;
+    };
+    expanded: import("vue").Prop<boolean | undefined>;
     showIcon: {
         type: BooleanConstructor;
         default: boolean;
+        description: string;
+    };
+    icon: {
+        type: StringConstructor;
+        description: string;
     };
-    icon: StringConstructor;
     iconAlign: {
         type: PropType<"left" | "right">;
         default: string;
+        description: string;
     };
 };
 export type AccordionItemAlign = typeof accordionItemAlign[number];
@@ -31,17 +40,26 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<im
     tag: {
         type: StringConstructor;
         default: string;
+        description: string;
+    };
+    disabled: {
+        type: BooleanConstructor;
+        description: string;
     };
-    disabled: BooleanConstructor;
-    expanded: BooleanConstructor;
+    expanded: import("vue").Prop<boolean | undefined>;
     showIcon: {
         type: BooleanConstructor;
         default: boolean;
+        description: string;
+    };
+    icon: {
+        type: StringConstructor;
+        description: string;
     };
-    icon: StringConstructor;
     iconAlign: {
         type: PropType<"left" | "right">;
         default: string;
+        description: string;
     };
 }>, {
     toggle: () => void;
@@ -51,17 +69,26 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<im
     tag: {
         type: StringConstructor;
         default: string;
+        description: string;
+    };
+    disabled: {
+        type: BooleanConstructor;
+        description: string;
     };
-    disabled: BooleanConstructor;
-    expanded: BooleanConstructor;
+    expanded: import("vue").Prop<boolean | undefined>;
     showIcon: {
         type: BooleanConstructor;
         default: boolean;
+        description: string;
+    };
+    icon: {
+        type: StringConstructor;
+        description: string;
     };
-    icon: StringConstructor;
     iconAlign: {
         type: PropType<"left" | "right">;
         default: string;
+        description: string;
     };
 }>> & Readonly<{
     onChange?: ((...args: any[]) => any) | undefined;
@@ -69,7 +96,6 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<im
 }>, {
     disabled: boolean;
     tag: string;
-    expanded: boolean;
     showIcon: boolean;
     iconAlign: "left" | "right";
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>, {

package/lib/components/accordion/AccordionItem.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,163 @@
+import { injectAccordionKey as e } from "../../composables/keys.js";
+import { useTheme as t } from "../../composables/useTheme.js";
+import { optionalBooleanProp as n } from "../../common/props.js";
+import r from "../icon/Icon.js";
+import { Transition as i, computed as a, createBlock as o, createCommentVNode as s, createElementBlock as c, createElementVNode as l, createVNode as u, defineComponent as d, inject as f, normalizeClass as p, normalizeStyle as m, openBlock as h, reactive as g, ref as _, renderSlot as v, resolveDynamicComponent as y, unref as b, vShow as x, watch as S, withCtx as C, withDirectives as w } from "vue";
+//#region src/components/accordion/AccordionItem.vue?vue&type=script&setup=true&lang.ts
+var T = { class: "flex-1 overflow-hidden" }, E = {
+	key: 1,
+	viewBox: "0 0 24 24",
+	stroke: "currentColor",
+	fill: "none",
+	role: "presentation",
+	class: "stroke-2 w-4 h-4"
+}, D = ["left", "right"], O = {
+	tag: {
+		type: String,
+		default: "div",
+		description: "Root element tag."
+	},
+	disabled: {
+		type: Boolean,
+		description: "Prevents expanding and collapsing."
+	},
+	expanded: n("Whether the item content starts expanded."),
+	showIcon: {
+		type: Boolean,
+		default: !0,
+		description: "Shows the expand/collapse icon."
+	},
+	icon: {
+		type: String,
+		description: "Custom expand/collapse icon name. Falls back to a chevron."
+	},
+	iconAlign: {
+		type: String,
+		default: "right",
+		description: "Icon placement relative to the header (left or right)."
+	}
+}, k = /* @__PURE__ */ d({
+	name: "XAccordionItem",
+	validators: { iconAlign: D },
+	docs: {
+		slots: {
+			default: "Header label. Slot props: expand, collapsed.",
+			summary: "Optional summary below the header. Slot props: expand, collapsed.",
+			content: "Collapsible body. Slot props: expand, collapsed."
+		},
+		emits: {
+			expand: "Emitted when expand() is called from a slot.",
+			change: "Emitted when expanded state changes. Payload is the new expanded boolean."
+		},
+		methods: {
+			toggle: "Toggle expanded state when not disabled.",
+			open: "Expand the item. Pass false to skip animation.",
+			close: "Collapse the item. Pass false to skip animation."
+		}
+	},
+	props: O,
+	emits: ["expand", "change"],
+	setup(n, { expose: d, emit: D }) {
+		let O = n, k = D, A = f(e, { isInsideAccordion: !1 }), j = g({ iconAlign: a(() => A.iconAlign || O.iconAlign) }), M = _(!O.expanded), N = _(!0);
+		S(() => O.expanded, () => {
+			M.value = !O.expanded;
+		}), S(M, (e, t) => {
+			k("change", !e);
+		});
+		function P(e) {
+			N.value && (e.style.height = "0px");
+		}
+		function F(e, t) {
+			N.value ? (e.addEventListener("transitionend", t), setTimeout(() => {
+				e.style.height = `${e.scrollHeight}px`;
+			}, 1)) : t();
+		}
+		function I(e) {
+			N.value ? e.style.removeProperty("height") : N.value = !0;
+		}
+		function L(e) {
+			N.value && (e.style.height = `${e.scrollHeight}px`);
+		}
+		function R(e, t) {
+			N.value ? (e.addEventListener("transitionend", t), setTimeout(() => {
+				e.style.height = "0px";
+			}, 1)) : t();
+		}
+		function z(e) {
+			N.value ? e.style.removeProperty("height") : N.value = !0;
+		}
+		function B(e = !0) {
+			N.value = e, M.value = !1;
+		}
+		function V(e = !0) {
+			N.value = e, M.value = !0;
+		}
+		function H() {
+			O.disabled || (M.value = !M.value);
+		}
+		function U(e = !0) {
+			B(e), k("expand");
+		}
+		let { styles: W, classes: G, className: K } = t("AccordionItem", {}, {
+			...O,
+			...j
+		}, {
+			collapsed: M,
+			isInsideAccordion: A.isInsideAccordion
+		});
+		return d({
+			toggle: H,
+			open: B,
+			close: V
+		}), (e, t) => (h(), o(y(e.tag), {
+			style: m(b(W)),
+			class: p(b(K)),
+			"aria-disabled": e.disabled,
+			"aria-expanded": M.value ? "false" : "true"
+		}, {
+			default: C(() => [
+				l("button", {
+					type: "button",
+					class: p(b(G).wrapper),
+					onClick: H
+				}, [l("div", T, [v(e.$slots, "default", {
+					expand: U,
+					collapsed: M.value
+				})]), e.showIcon ? (h(), c("div", {
+					key: 0,
+					class: p(b(G).icon)
+				}, [e.icon ? (h(), o(r, {
+					key: 0,
+					icon: e.icon
+				}, null, 8, ["icon"])) : (h(), c("svg", E, [...t[0] ||= [l("path", { d: "M19 9l-7 7-7-7" }, null, -1)]]))], 2)) : s("", !0)], 2),
+				e.$slots.summary ? v(e.$slots, "summary", {
+					key: 0,
+					expand: U,
+					collapsed: M.value
+				}) : s("", !0),
+				u(i, {
+					onBeforeEnter: P,
+					onEnter: F,
+					onAfterEnter: I,
+					onBeforeLeave: L,
+					onLeave: R,
+					onAfterLeave: z
+				}, {
+					default: C(() => [w(l("div", { class: p(b(G).content) }, [v(e.$slots, "content", {
+						expand: U,
+						collapsed: M.value
+					})], 2), [[x, !M.value]])]),
+					_: 3
+				})
+			]),
+			_: 3
+		}, 8, [
+			"style",
+			"class",
+			"aria-disabled",
+			"aria-expanded"
+		]));
+	}
+});
+//#endregion
+export { k as default };

package/lib/components/accordion/theme/Accordion.base.theme.js

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

package/lib/components/accordion/theme/Accordion.carbon.theme.js

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

package/lib/components/accordion/theme/AccordionItem.base.theme.js

@@ -1,16 +1,14 @@
-const i = {
-  classes: {
-    wrapper: ({ props: t, slots: r, data: e }) => {
-      const s = ["relative flex items-center w-full text-left rounded"];
-      return e.isInsideAccordion && (r.default && (t.iconAlign === "left" ? s.push("pl-8 pr-3") : s.push("pr-8 pl-3"), s.push("py-2"), t.disabled || s.push("hover:bg-secondary-100 dark:hover:bg-secondary-600")), t.disabled || s.push("cursor-pointer")), s;
-    },
-    icon: ({ props: t, data: r }) => {
-      const e = ["absolute flex transform transition-transform duration-150"];
-      return r.collapsed || e.push("rotate-180"), t.disabled && e.push("text-secondary-300"), t.iconAlign === "left" ? e.push("left-2") : e.push("right-2"), e;
-    },
-    content: "transition-[height] duration-150 overflow-y-hidden"
-  }
-}, n = i;
-export {
-  n as default
-};
+//#region src/components/accordion/theme/AccordionItem.base.theme.ts
+var e = { classes: {
+	wrapper: ({ props: e, slots: t, data: n }) => {
+		let r = ["relative flex items-center w-full text-left rounded"];
+		return n.isInsideAccordion ? (t.default && (e.iconAlign === "left" ? r.push("pl-8 pr-3") : r.push("pr-8 pl-3"), r.push("py-2"), e.disabled || r.push("hover:bg-secondary-100 dark:hover:bg-secondary-600")), e.disabled || r.push("cursor-pointer"), r) : r;
+	},
+	icon: ({ props: e, data: t }) => {
+		let n = ["absolute flex transform transition-transform duration-150"];
+		return t.collapsed || n.push("rotate-180"), e.disabled && n.push("text-secondary-300"), e.iconAlign === "left" ? n.push("left-2") : n.push("right-2"), n;
+	},
+	content: "transition-[height] duration-150 overflow-y-hidden"
+} };
+//#endregion
+export { e as default };

package/lib/components/accordion/theme/AccordionItem.carbon.theme.js

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

package/lib/components/alert/Alert.js

@@ -0,0 +1,6 @@
+import e from "./Alert.vue_vue_type_script_setup_true_lang.js";
+import t from "./Alert.vue_vue_type_style_index_0_lang.module.js";
+import n from "../../_virtual/_plugin-vue_export-helper.js";
+var r = /* @__PURE__ */ n(e, [["__cssModules", { $style: t }]]);
+//#endregion
+export { r as default };

package/lib/components/alert/Alert.vue.d.ts

@@ -2,15 +2,22 @@ import { type ExtractPublicPropTypes, type PropType } from 'vue';
 import { type ThemeComponent } from '../../composables/useTheme';
 declare const alertType: readonly ["info", "success", "error", "warning"];
 declare const alertProps: {
-    type: PropType<"error" | "info" | "success" | "warning">;
-    glow: BooleanConstructor;
-    light: BooleanConstructor;
-    outlined: BooleanConstructor;
-    removable: BooleanConstructor;
-    closeLabel: StringConstructor;
+    type: {
+        type: PropType<"error" | "info" | "success" | "warning">;
+        description: string;
+    };
+    glow: import("vue").Prop<boolean | undefined>;
+    light: import("vue").Prop<boolean | undefined>;
+    outlined: import("vue").Prop<boolean | undefined>;
+    removable: import("vue").Prop<boolean | undefined>;
+    closeLabel: {
+        type: StringConstructor;
+        description: string;
+    };
     color: {
         readonly type: StringConstructor;
         readonly default: string | undefined;
+        readonly description: "Theme or CSS color used for the control accents.";
     };
 };
 export type AlertType = typeof alertType[number];
@@ -19,34 +26,44 @@ type InternalClasses = 'wrapper';
 export interface AlertTheme extends ThemeComponent<AlertProps, InternalClasses> {
 }
 declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<import("vue").ExtractPropTypes<{
-    type: PropType<"error" | "info" | "success" | "warning">;
-    glow: BooleanConstructor;
-    light: BooleanConstructor;
-    outlined: BooleanConstructor;
-    removable: BooleanConstructor;
-    closeLabel: StringConstructor;
+    type: {
+        type: PropType<"error" | "info" | "success" | "warning">;
+        description: string;
+    };
+    glow: import("vue").Prop<boolean | undefined>;
+    light: import("vue").Prop<boolean | undefined>;
+    outlined: import("vue").Prop<boolean | undefined>;
+    removable: import("vue").Prop<boolean | undefined>;
+    closeLabel: {
+        type: StringConstructor;
+        description: string;
+    };
     color: {
         readonly type: StringConstructor;
         readonly default: string | undefined;
+        readonly description: "Theme or CSS color used for the control accents.";
     };
 }>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "remove"[], "remove", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
-    type: PropType<"error" | "info" | "success" | "warning">;
-    glow: BooleanConstructor;
-    light: BooleanConstructor;
-    outlined: BooleanConstructor;
-    removable: BooleanConstructor;
-    closeLabel: StringConstructor;
+    type: {
+        type: PropType<"error" | "info" | "success" | "warning">;
+        description: string;
+    };
+    glow: import("vue").Prop<boolean | undefined>;
+    light: import("vue").Prop<boolean | undefined>;
+    outlined: import("vue").Prop<boolean | undefined>;
+    removable: import("vue").Prop<boolean | undefined>;
+    closeLabel: {
+        type: StringConstructor;
+        description: string;
+    };
     color: {
         readonly type: StringConstructor;
         readonly default: string | undefined;
+        readonly description: "Theme or CSS color used for the control accents.";
     };
 }>> & Readonly<{
     onRemove?: ((...args: any[]) => any) | undefined;
 }>, {
-    glow: boolean;
-    light: boolean;
-    outlined: boolean;
-    removable: boolean;
     color: string;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>, {
     icon?(_: {}): any;