@indielayer/ui 1.18.1 → 2.1.0

package/lib/components/alert/Alert.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,68 @@
+import { useResolvedComponentProps as e } from "../../composables/resolveComponentDefaults.js";
+import { useColors as t } from "../../composables/useColors.js";
+import { useTheme as n } from "../../composables/useTheme.js";
+import { optionalBooleanProp as r } from "../../common/props.js";
+import i from "../icon/Icon.js";
+import { closeIcon as a, errorIcon as o, infoIcon as s, successIcon as c, warningIcon as l } from "../../common/icons.js";
+import { Fragment as u, computed as d, createBlock as f, createCommentVNode as p, createElementBlock as m, createElementVNode as h, createVNode as g, defineComponent as _, normalizeClass as v, normalizeStyle as y, openBlock as b, renderSlot as x, unref as S } from "vue";
+//#region src/components/alert/Alert.vue?vue&type=script&setup=true&lang.ts
+var C = ["aria-label"], w = [
+	"info",
+	"success",
+	"error",
+	"warning"
+], T = {
+	...t.props(),
+	type: {
+		type: String,
+		description: "Semantic alert type (info, success, error, warning). Controls the default icon."
+	},
+	glow: r("Soft colored glow behind the alert."),
+	light: r("Tinted background using the color at low opacity."),
+	outlined: r("Outline style with a transparent fill."),
+	removable: r("Shows a close control that emits `remove`."),
+	closeLabel: {
+		type: String,
+		description: "Accessible label for the remove button."
+	}
+}, E = /* @__PURE__ */ _({
+	name: "XAlert",
+	validators: { type: w },
+	docs: {
+		slots: {
+			default: "Alert message content.",
+			icon: "Custom icon; overrides the type-based icon.",
+			removeIcon: "Custom icon for the remove button."
+		},
+		emits: { remove: "Emitted when the remove button is clicked." }
+	},
+	props: T,
+	emits: ["remove"],
+	setup(t) {
+		let r = e("Alert", t), _ = d(() => r.value.type === "info" ? s : r.value.type === "success" ? c : r.value.type === "error" ? o : r.value.type === "warning" ? l : ""), { styles: w, classes: T, className: E } = n("Alert", {}, r);
+		return (e, t) => (b(), m("div", {
+			style: y(S(w)),
+			class: v([
+				S(E),
+				e.$style.alert,
+				S(r).glow ? e.$style["alert--glow"] : "",
+				S(T).wrapper
+			])
+		}, [
+			x(e.$slots, "icon", {}, () => [S(r).type ? (b(), f(i, {
+				key: 0,
+				icon: _.value,
+				class: "text-[color:var(--x-alert-icon)] dark:text-[color:var(--x-alert-dark-icon)]"
+			}, null, 8, ["icon"])) : p("", !0)]),
+			h("div", null, [x(e.$slots, "default")]),
+			S(r).removable ? (b(), m(u, { key: 0 }, [t[1] ||= h("div", { class: "grow" }, null, -1), h("button", {
+				type: "button",
+				class: "shrink-0",
+				"aria-label": S(r).closeLabel,
+				onClick: t[0] ||= (t) => e.$emit("remove", t)
+			}, [x(e.$slots, "removeIcon", {}, () => [g(i, { icon: S(a) }, null, 8, ["icon"])])], 8, C)], 64)) : p("", !0)
+		], 6));
+	}
+});
+//#endregion
+export { E as default };

package/lib/components/alert/Alert.vue_vue_type_style_index_0_lang.module.js

@@ -0,0 +1,6 @@
+var e = {
+	alert: "_alert_al11n_2",
+	"alert--glow": "_alert--glow_al11n_8"
+};
+//#endregion
+export { e as default };

package/lib/components/alert/theme/Alert.base.theme.js

@@ -1,41 +1,39 @@
-const l = {
-  classes: {
-    wrapper: "flex items-center rounded-md space-x-2 px-4 py-2 border"
-  },
-  styles: ({ props: t, colors: n, css: a }) => {
-    const e = n.getPalette(t.color), r = [];
-    return t.glow && r.push(a.get("glow", n.getColorOpacity(e[500], 0.5))), t.color ? (t.light ? r.push(a.variables({
-      bg: e[50],
-      text: e[600],
-      icon: e[600],
-      border: t.outlined ? e[600] : e[50],
-      dark: {
-        bg: e[200],
-        text: e[800],
-        icon: e[600],
-        border: t.outlined ? e[500] : e[200]
-      }
-    })) : r.push(a.variables({
-      bg: t.outlined ? "transparent" : e[600],
-      text: t.outlined ? e[600] : e[50],
-      icon: t.outlined ? e[600] : e[50],
-      border: e[600],
-      dark: {
-        border: e[400],
-        text: t.outlined ? e[400] : e[50]
-      }
-    })), r) : (r.push(a.variables({
-      bg: "transparent",
-      text: e[500],
-      border: e[300],
-      dark: {
-        bg: "transparent",
-        text: e[300],
-        border: e[500]
-      }
-    })), r);
-  }
-}, o = l;
-export {
-  o as default
+//#region src/components/alert/theme/Alert.base.theme.ts
+var e = {
+	classes: { wrapper: "flex items-center rounded-md space-x-2 px-4 py-2 border" },
+	styles: ({ props: e, colors: t, css: n }) => {
+		let r = t.getPalette(e.color), i = [];
+		return e.glow && i.push(n.get("glow", t.getColorOpacity(r[500], .5))), e.color ? (e.light ? i.push(n.variables({
+			bg: r[50],
+			text: r[600],
+			icon: r[600],
+			border: e.outlined ? r[600] : r[50],
+			dark: {
+				bg: r[200],
+				text: r[800],
+				icon: r[600],
+				border: e.outlined ? r[500] : r[200]
+			}
+		})) : i.push(n.variables({
+			bg: e.outlined ? "transparent" : r[600],
+			text: e.outlined ? r[600] : r[50],
+			icon: e.outlined ? r[600] : r[50],
+			border: r[600],
+			dark: {
+				border: r[400],
+				text: e.outlined ? r[400] : r[50]
+			}
+		})), i) : (i.push(n.variables({
+			bg: "transparent",
+			text: r[500],
+			border: r[300],
+			dark: {
+				bg: "transparent",
+				text: r[300],
+				border: r[500]
+			}
+		})), i);
+	}
 };
+//#endregion
+export { e as default };

package/lib/components/alert/theme/Alert.carbon.theme.js

@@ -1,41 +1,39 @@
-const o = {
-  classes: {
-    wrapper: "flex items-center space-x-2 px-4 py-3 border border-l-4 text-sm"
-  },
-  styles: ({ props: t, colors: n, css: a }) => {
-    const l = n.getPalette("gray"), e = n.getPalette(t.color), r = [];
-    return t.glow && r.push(a.get("glow", n.getColorOpacity(e[500], 0.5))), t.color ? (t.light ? r.push(a.variables({
-      bg: e[50],
-      text: l[900],
-      icon: e[600],
-      border: t.outlined ? e[600] : e[50],
-      dark: {
-        bg: l[800],
-        text: l[100],
-        icon: e[600],
-        border: t.outlined ? e[500] : e[200]
-      }
-    })) : r.push(a.variables({
-      bg: t.outlined ? "transparent" : e[600],
-      text: t.outlined ? e[600] : e[50],
-      icon: t.outlined ? e[600] : e[50],
-      border: e[600],
-      dark: {
-        border: e[400],
-        text: t.outlined ? e[400] : e[50]
-      }
-    })), r) : (r.push(a.variables({
-      bg: "transparent",
-      text: e[500],
-      border: e[300],
-      dark: {
-        bg: "transparent",
-        text: e[300],
-        border: e[500]
-      }
-    })), r);
-  }
-}, d = o;
-export {
-  d as default
+//#region src/components/alert/theme/Alert.carbon.theme.ts
+var e = {
+	classes: { wrapper: "flex items-center space-x-2 px-4 py-3 border border-l-4 text-sm" },
+	styles: ({ props: e, colors: t, css: n }) => {
+		let r = t.getPalette("gray"), i = t.getPalette(e.color), a = [];
+		return e.glow && a.push(n.get("glow", t.getColorOpacity(i[500], .5))), e.color ? (e.light ? a.push(n.variables({
+			bg: i[50],
+			text: r[900],
+			icon: i[600],
+			border: e.outlined ? i[600] : i[50],
+			dark: {
+				bg: r[800],
+				text: r[100],
+				icon: i[600],
+				border: e.outlined ? i[500] : i[200]
+			}
+		})) : a.push(n.variables({
+			bg: e.outlined ? "transparent" : i[600],
+			text: e.outlined ? i[600] : i[50],
+			icon: e.outlined ? i[600] : i[50],
+			border: i[600],
+			dark: {
+				border: i[400],
+				text: e.outlined ? i[400] : i[50]
+			}
+		})), a) : (a.push(n.variables({
+			bg: "transparent",
+			text: i[500],
+			border: i[300],
+			dark: {
+				bg: "transparent",
+				text: i[300],
+				border: i[500]
+			}
+		})), a);
+	}
 };
+//#endregion
+export { e as default };

package/lib/components/avatar/Avatar.js

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

package/lib/components/avatar/Avatar.vue.d.ts

@@ -4,20 +4,32 @@ declare const avatarProps: {
     tag: {
         type: StringConstructor;
         default: string;
+        description: string;
     };
-    name: StringConstructor;
-    alt: StringConstructor;
-    image: StringConstructor;
-    outlined: BooleanConstructor;
-    rounded: BooleanConstructor;
+    name: {
+        type: StringConstructor;
+        description: string;
+    };
+    alt: {
+        type: StringConstructor;
+        description: string;
+    };
+    image: {
+        type: StringConstructor;
+        description: string;
+    };
+    outlined: import("vue").Prop<boolean | undefined>;
+    rounded: import("vue").Prop<boolean | undefined>;
     color: {
         readonly type: StringConstructor;
         readonly default: string | undefined;
+        readonly description: "Theme or CSS color used for the control accents.";
     };
     size: {
         readonly type: import("vue").PropType<import("../../composables/useCommon").Size>;
         readonly default: "md";
         readonly validator: (value: string) => boolean;
+        readonly description: "Control size. One of xs, sm, md, lg, xl.";
     };
 };
 export type AvatarProps = ExtractPublicPropTypes<typeof avatarProps>;
@@ -31,45 +43,67 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<im
     tag: {
         type: StringConstructor;
         default: string;
+        description: string;
+    };
+    name: {
+        type: StringConstructor;
+        description: string;
+    };
+    alt: {
+        type: StringConstructor;
+        description: string;
+    };
+    image: {
+        type: StringConstructor;
+        description: string;
     };
-    name: StringConstructor;
-    alt: StringConstructor;
-    image: StringConstructor;
-    outlined: BooleanConstructor;
-    rounded: BooleanConstructor;
+    outlined: import("vue").Prop<boolean | undefined>;
+    rounded: import("vue").Prop<boolean | undefined>;
     color: {
         readonly type: StringConstructor;
         readonly default: string | undefined;
+        readonly description: "Theme or CSS color used for the control accents.";
     };
     size: {
         readonly type: import("vue").PropType<import("../../composables/useCommon").Size>;
         readonly default: "md";
         readonly validator: (value: string) => boolean;
+        readonly description: "Control size. One of xs, sm, md, lg, xl.";
     };
 }>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     tag: {
         type: StringConstructor;
         default: string;
+        description: string;
+    };
+    name: {
+        type: StringConstructor;
+        description: string;
+    };
+    alt: {
+        type: StringConstructor;
+        description: string;
+    };
+    image: {
+        type: StringConstructor;
+        description: string;
     };
-    name: StringConstructor;
-    alt: StringConstructor;
-    image: StringConstructor;
-    outlined: BooleanConstructor;
-    rounded: BooleanConstructor;
+    outlined: import("vue").Prop<boolean | undefined>;
+    rounded: import("vue").Prop<boolean | undefined>;
     color: {
         readonly type: StringConstructor;
         readonly default: string | undefined;
+        readonly description: "Theme or CSS color used for the control accents.";
     };
     size: {
         readonly type: import("vue").PropType<import("../../composables/useCommon").Size>;
         readonly default: "md";
         readonly validator: (value: string) => boolean;
+        readonly description: "Control size. One of xs, sm, md, lg, xl.";
     };
 }>> & Readonly<{}>, {
     tag: string;
-    outlined: boolean;
     color: string;
-    rounded: boolean;
     size: import("../../composables/useCommon").Size;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>, {
     avatarIcon?(_: {}): any;

package/lib/components/avatar/Avatar.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,77 @@
+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 i from "../icon/Icon.js";
+import { avatarIcon as a } from "../../common/icons.js";
+import { computed as o, createBlock as s, createCommentVNode as c, createElementBlock as l, createVNode as u, defineComponent as d, normalizeClass as f, normalizeStyle as p, openBlock as m, ref as h, renderSlot as g, resolveDynamicComponent as _, toDisplayString as v, unref as y, watch as b, withCtx as x } from "vue";
+//#region src/components/avatar/Avatar.vue?vue&type=script&setup=true&lang.ts
+var S = ["alt", "src"], C = {
+	key: 1,
+	class: "leading-none"
+}, w = {
+	...r.props(),
+	...e.props("primary"),
+	tag: {
+		type: String,
+		default: "div",
+		description: "Root element tag."
+	},
+	name: {
+		type: String,
+		description: "Display name used to derive initials when no image is loaded."
+	},
+	alt: {
+		type: String,
+		description: "Alt text for the image when `image` is set."
+	},
+	image: {
+		type: String,
+		description: "Image URL. Falls back to initials or the avatar icon if unloadable."
+	},
+	outlined: n("Outline style with a transparent fill."),
+	rounded: n("Fully rounded corners (circle).")
+}, T = /* @__PURE__ */ d({
+	name: "XAvatar",
+	validators: r.validators(),
+	docs: { slots: { avatarIcon: "Fallback icon when no name or image is available." } },
+	props: w,
+	setup(e) {
+		let n = e, r = h(), d = o(() => {
+			if (n.name) {
+				let e = n.name.match(/\b\w/g) || [];
+				return ((e.shift() || "") + (e.pop() || "")).toUpperCase();
+			}
+			return "";
+		});
+		typeof window < "u" && Image && b(() => n.image, (e) => {
+			if (r.value = void 0, !e) return;
+			let t = new Image();
+			t.onload = () => {
+				r.value = n.image;
+			}, t.onerror = () => {}, t.src = e;
+		}, { immediate: !0 });
+		let { styles: w, classes: T, className: E } = t("Avatar", {}, n, { source: r });
+		return (e, t) => (m(), s(_(e.tag), {
+			style: p(y(w)),
+			class: f([
+				y(E),
+				e.$style.avatar,
+				y(T).wrapper
+			])
+		}, {
+			default: x(() => [r.value ? (m(), l("img", {
+				key: 0,
+				alt: e.alt,
+				src: e.image,
+				class: "absolute top-0 left-0 h-full w-full"
+			}, null, 8, S)) : c("", !0), e.name ? (m(), l("span", C, v(d.value), 1)) : e.name ? c("", !0) : g(e.$slots, "avatarIcon", { key: 2 }, () => [u(i, {
+				size: e.size,
+				icon: y(a)
+			}, null, 8, ["size", "icon"])])]),
+			_: 3
+		}, 8, ["style", "class"]));
+	}
+});
+//#endregion
+export { T as default };

package/lib/components/avatar/Avatar.vue_vue_type_style_index_0_lang.module.js

@@ -0,0 +1,3 @@
+var e = { avatar: "_avatar_7u83c_2" };
+//#endregion
+export { e as default };

package/lib/components/avatar/theme/Avatar.base.theme.js

@@ -1,22 +1,18 @@
-const r = {
-  classes: {
-    wrapper({ props: t }) {
-      const e = ["relative inline-flex items-center justify-center overflow-hidden align-middle border box-content"];
-      return e.push(t.rounded ? "rounded-full" : "rounded-md"), t.size === "xs" ? e.push("h-6 w-6 text-xs") : t.size === "sm" ? e.push("h-9 w-9 text-sm") : t.size === "lg" ? e.push("h-12 w-12 text-lg") : t.size === "xl" ? e.push("h-[3.75rem] w-[3.75rem] text-xl") : e.push("h-10 w-10"), e;
-    }
-  },
-  styles({ props: t, colors: e, css: l, data: n }) {
-    const s = e.getPalette(t.color);
-    return l.variables({
-      bg: s[100],
-      text: s[500],
-      border: t.outlined ? s[500] : "transparent",
-      dark: {
-        bg: s[900]
-      }
-    });
-  }
-}, i = r;
-export {
-  i as default
+//#region src/components/avatar/theme/Avatar.base.theme.ts
+var e = {
+	classes: { wrapper({ props: e }) {
+		let t = ["relative inline-flex items-center justify-center overflow-hidden align-middle border box-content"];
+		return t.push(e.rounded ? "rounded-full" : "rounded-md"), e.size === "xs" ? t.push("h-6 w-6 text-xs") : e.size === "sm" ? t.push("h-9 w-9 text-sm") : e.size === "lg" ? t.push("h-12 w-12 text-lg") : e.size === "xl" ? t.push("h-[3.75rem] w-[3.75rem] text-xl") : t.push("h-10 w-10"), t;
+	} },
+	styles({ props: e, colors: t, css: n, data: r }) {
+		let i = t.getPalette(e.color);
+		return n.variables({
+			bg: i[100],
+			text: i[500],
+			border: e.outlined ? i[500] : "transparent",
+			dark: { bg: i[900] }
+		});
+	}
 };
+//#endregion
+export { e as default };

package/lib/components/avatar/theme/Avatar.carbon.theme.js

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

package/lib/components/badge/Badge.js

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