@indielayer/ui 1.18.1 → 2.1.0

package/lib/components/tag/Tag.vue.d.ts

@@ -4,21 +4,30 @@ declare const tagProps: {
     tag: {
         type: StringConstructor;
         default: string;
+        description: string;
+    };
+    rounded: import("vue").Prop<boolean | undefined>;
+    removable: import("vue").Prop<boolean | undefined>;
+    outlined: import("vue").Prop<boolean | undefined>;
+    filled: import("vue").Prop<boolean | undefined>;
+    disabled: {
+        type: BooleanConstructor;
+        description: string;
+    };
+    to: {
+        type: (ObjectConstructor | StringConstructor)[];
+        description: string;
     };
-    rounded: BooleanConstructor;
-    removable: BooleanConstructor;
-    outlined: BooleanConstructor;
-    filled: BooleanConstructor;
-    disabled: BooleanConstructor;
-    to: (ObjectConstructor | StringConstructor)[];
     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 TagProps = ExtractPublicPropTypes<typeof tagProps>;
@@ -29,53 +38,67 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<im
     tag: {
         type: StringConstructor;
         default: string;
+        description: string;
+    };
+    rounded: import("vue").Prop<boolean | undefined>;
+    removable: import("vue").Prop<boolean | undefined>;
+    outlined: import("vue").Prop<boolean | undefined>;
+    filled: import("vue").Prop<boolean | undefined>;
+    disabled: {
+        type: BooleanConstructor;
+        description: string;
+    };
+    to: {
+        type: (ObjectConstructor | StringConstructor)[];
+        description: string;
     };
-    rounded: BooleanConstructor;
-    removable: BooleanConstructor;
-    outlined: BooleanConstructor;
-    filled: BooleanConstructor;
-    disabled: BooleanConstructor;
-    to: (ObjectConstructor | StringConstructor)[];
     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, "remove"[], "remove", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     tag: {
         type: StringConstructor;
         default: string;
+        description: string;
+    };
+    rounded: import("vue").Prop<boolean | undefined>;
+    removable: import("vue").Prop<boolean | undefined>;
+    outlined: import("vue").Prop<boolean | undefined>;
+    filled: import("vue").Prop<boolean | undefined>;
+    disabled: {
+        type: BooleanConstructor;
+        description: string;
+    };
+    to: {
+        type: (ObjectConstructor | StringConstructor)[];
+        description: string;
     };
-    rounded: BooleanConstructor;
-    removable: BooleanConstructor;
-    outlined: BooleanConstructor;
-    filled: BooleanConstructor;
-    disabled: BooleanConstructor;
-    to: (ObjectConstructor | StringConstructor)[];
     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<{
     onRemove?: ((...args: any[]) => any) | undefined;
 }>, {
     disabled: boolean;
     tag: string;
-    outlined: boolean;
-    removable: boolean;
     color: string;
-    rounded: boolean;
     size: import("../../composables/useCommon").Size;
-    filled: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>, {
     prefix?(_: {}): any;
     default?(_: {}): any;

package/lib/components/tag/Tag.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,76 @@
+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 { useCommon as i } from "../../composables/useCommon.js";
+import a from "../icon/Icon.js";
+import { closeIcon as o } from "../../common/icons.js";
+import { computed as s, createBlock as c, createCommentVNode as l, createElementBlock as u, createElementVNode as d, createVNode as f, defineComponent as p, normalizeClass as m, normalizeStyle as h, openBlock as g, renderSlot as _, resolveDynamicComponent as v, unref as y, useAttrs as b, withCtx as x, withModifiers as S } from "vue";
+//#region src/components/tag/Tag.vue?vue&type=script&setup=true&lang.ts
+var C = { class: "flex items-center gap-2" }, w = { class: "truncate" }, T = {
+	key: 0,
+	class: "absolute right-1.5 top-0 h-full flex items-center"
+}, E = {
+	...i.props(),
+	...t.props("secondary"),
+	tag: {
+		type: String,
+		default: "span",
+		description: "Root element tag. Becomes an anchor or router-link when `href` or `to` is set."
+	},
+	rounded: r("Fully rounded corners (pill shape)."),
+	removable: r("Shows a remove control that emits `remove`."),
+	outlined: r("Outline style with a transparent fill."),
+	filled: r("Filled style using the theme color."),
+	disabled: {
+		type: Boolean,
+		description: "Disables the remove control and applies disabled styling."
+	},
+	to: {
+		type: [String, Object],
+		description: "Vue Router location; renders as a link when set."
+	}
+}, D = /* @__PURE__ */ p({
+	name: "XTag",
+	validators: { ...i.validators() },
+	docs: {
+		slots: {
+			default: "Tag label and content.",
+			prefix: "Content shown before the label."
+		},
+		emits: { remove: "Emitted when the remove icon is clicked." }
+	},
+	props: E,
+	emits: ["remove"],
+	setup(t) {
+		let r = t, i = e("Tag", r), p = s(() => r.size === "xs" ? "xs" : r.size === "sm" ? "sm" : r.size === "lg" ? "md" : r.size === "xl" ? "lg" : "sm"), E = b(), D = s(() => E.href ? "a" : r.to ? "router-link" : r.tag), { styles: O, classes: k, className: A } = n("Tag", {}, r);
+		return (e, t) => (g(), c(v(D.value), {
+			to: e.to,
+			class: m(["text-[color:var(--x-tag-text)] dark:text-[color:var(--x-tag-dark-text)] border relative", [
+				y(A),
+				y(k).wrapper,
+				y(i).outlined ? "border-[color:var(--x-tag-border)] dark:border-[color:var(--x-tag-dark-border)]" : "!border-transparent bg-[color:var(--x-tag-bg)] dark:bg-[color:var(--x-tag-dark-bg)]",
+				y(i).rounded ? "rounded-full" : "rounded"
+			]]),
+			style: h(y(O))
+		}, {
+			default: x(() => [d("span", { class: m(["max-w-full", { "pr-4": y(i).removable }]) }, [d("div", C, [_(e.$slots, "prefix"), d("div", w, [_(e.$slots, "default")])]), y(i).removable ? (g(), u("div", T, [f(a, {
+				size: p.value,
+				icon: y(o),
+				class: m(["cursor-pointer transition-colors duration-150", [e.disabled ? "text-secondary-400" : "hover:text-secondary-500"]]),
+				onClick: t[0] ||= S((t) => !e.disabled && e.$emit("remove", t), ["prevent"])
+			}, null, 8, [
+				"size",
+				"icon",
+				"class"
+			])])) : l("", !0)], 2)]),
+			_: 3
+		}, 8, [
+			"to",
+			"style",
+			"class"
+		]));
+	}
+});
+//#endregion
+export { D as default };

package/lib/components/tag/theme/Tag.base.theme.js

@@ -1,24 +1,22 @@
-const s = {
-  classes: {
-    wrapper: ({ props: t }) => {
-      const e = ["inline-flex leading-tight max-w-full"];
-      return t.size === "xs" ? e.push("px-2 py-0.5 text-xs") : t.size === "sm" ? e.push(" px-2 py-0.5 text-sm") : t.size === "lg" ? e.push(" px-4 py-2 text-lg") : t.size === "xl" ? e.push(" px-5 py-3 text-xl") : e.push(" px-3 py-1.5"), t.outlined && e.push("border-[color:var(--x-tag-border)] dark:border-[color:var(--x-tag-dark-border)]"), (t.filled || !t.outlined) && t.filled && e.push("bg-[color:var(--x-tag-bg)] dark:bg-[color:var(--x-tag-dark-bg)]"), t.rounded ? e.push("rounded-full") : e.push("rounded-md"), e;
-    }
-  },
-  styles: ({ colors: t, props: e, css: r }) => {
-    const l = t.getPalette(e.color);
-    return r.variables({
-      bg: l[100],
-      text: l[800],
-      border: l[700],
-      dark: {
-        bg: l[600],
-        border: l[500],
-        text: l[100]
-      }
-    });
-  }
-}, d = s;
-export {
-  d as default
+//#region src/components/tag/theme/Tag.base.theme.ts
+var e = {
+	classes: { wrapper: ({ props: e }) => {
+		let t = ["inline-flex leading-tight max-w-full"];
+		return e.size === "xs" ? t.push("px-2 py-0.5 text-xs") : e.size === "sm" ? t.push(" px-2 py-0.5 text-sm") : e.size === "lg" ? t.push(" px-4 py-2 text-lg") : e.size === "xl" ? t.push(" px-5 py-3 text-xl") : t.push(" px-3 py-1.5"), e.outlined && t.push("border-[color:var(--x-tag-border)] dark:border-[color:var(--x-tag-dark-border)]"), (e.filled || !e.outlined) && e.filled && t.push("bg-[color:var(--x-tag-bg)] dark:bg-[color:var(--x-tag-dark-bg)]"), e.rounded ? t.push("rounded-full") : t.push("rounded-md"), t;
+	} },
+	styles: ({ colors: e, props: t, css: n }) => {
+		let r = e.getPalette(t.color);
+		return n.variables({
+			bg: r[100],
+			text: r[800],
+			border: r[700],
+			dark: {
+				bg: r[600],
+				border: r[500],
+				text: r[100]
+			}
+		});
+	}
 };
+//#endregion
+export { e as default };

package/lib/components/tag/theme/Tag.carbon.theme.js

@@ -1,24 +1,22 @@
-const x = {
-  classes: {
-    wrapper: ({ props: l }) => {
-      let e = "inline-flex leading-tight max-w-full ";
-      return l.size === "xs" || l.size === "sm" ? e += " px-2 py-0.5 text-xs" : l.size === "lg" ? e += " px-4 py-3" : l.size === "xl" ? e += " px-5 py-5 text-lg" : e += " px-3 py-1 text-sm", e;
-    }
-  },
-  styles: ({ colors: l, props: e, css: s }) => {
-    const t = l.getPalette(e.color);
-    return s.variables({
-      bg: t[200],
-      text: t[800],
-      border: t[800],
-      dark: {
-        bg: t[800],
-        border: t[400],
-        text: e.outlined ? t[200] : t[100]
-      }
-    });
-  }
-}, i = x;
-export {
-  i as default
+//#region src/components/tag/theme/Tag.carbon.theme.ts
+var e = {
+	classes: { wrapper: ({ props: e }) => {
+		let t = "inline-flex leading-tight max-w-full ";
+		return e.size === "xs" || e.size === "sm" ? t += " px-2 py-0.5 text-xs" : e.size === "lg" ? t += " px-4 py-3" : e.size === "xl" ? t += " px-5 py-5 text-lg" : t += " px-3 py-1 text-sm", t;
+	} },
+	styles: ({ colors: e, props: t, css: n }) => {
+		let r = e.getPalette(t.color);
+		return n.variables({
+			bg: r[200],
+			text: r[800],
+			border: r[800],
+			dark: {
+				bg: r[800],
+				border: r[400],
+				text: t.outlined ? r[200] : r[100]
+			}
+		});
+	}
 };
+//#endregion
+export { e as default };

package/lib/components/textarea/Textarea.js

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