@indielayer/ui 2.0.0 → 2.1.0

package/lib/components/popover/Popover.vue_vue_type_script_setup_true_lang.js

@@ -1,8 +1,10 @@
-import { useTheme as e } from "../../composables/useTheme.js";
-import { kt as t } from "../../node_modules/.pnpm/floating-vue@5.2.2_@nuxt_kit@4.4.6_magicast@0.5.3__vue@3.5.34_typescript@5.2.2_/node_modules/floating-vue/dist/floating-vue.js";
-import { createBlock as n, defineComponent as r, normalizeClass as i, normalizeStyle as a, openBlock as o, ref as s, renderSlot as c, unref as l, withCtx as u } from "vue";
+import { injectButtonGroupKey as e } from "../../composables/keys.js";
+import { useTheme as t } from "../../composables/useTheme.js";
+import { kt as n } from "../../node_modules/.pnpm/floating-vue@5.2.2_@nuxt_kit@4.4.6_magicast@0.5.3__vue@3.5.34_typescript@5.2.2_/node_modules/floating-vue/dist/floating-vue.js";
+import r from "./PopoverContentBoundary.js";
+import { computed as i, createBlock as a, createVNode as o, defineComponent as s, inject as c, normalizeClass as l, normalizeStyle as u, openBlock as d, ref as f, renderSlot as p, unref as m, withCtx as h } from "vue";
 //#region src/components/popover/Popover.vue?vue&type=script&setup=true&lang.ts
-var d = /* @__PURE__ */ r({
+var g = /* @__PURE__ */ s({
 	name: "XPopover",
 	validators: { placement: [
 		"top",
@@ -18,12 +20,41 @@ var d = /* @__PURE__ */ r({
 		"right-start",
 		"right-end"
 	] },
+	docs: {
+		slots: {
+			default: "Trigger element.",
+			content: "Popover panel content."
+		},
+		emits: {
+			show: "Emitted when the popover starts opening.",
+			hide: "Emitted when the popover starts closing.",
+			"update:shown": "Emitted when open state changes.",
+			"apply-show": "Emitted after the show transition is applied.",
+			"apply-hide": "Emitted after the hide transition is applied.",
+			"close-group": "Emitted when a popover group close is requested.",
+			"close-directive": "Emitted when closed via the close directive.",
+			"auto-hide": "Emitted when auto-hide closes the popover.",
+			resize: "Emitted when popover content is resized."
+		},
+		methods: {
+			show: "Show the popover.",
+			hide: "Hide the popover.",
+			toggle: "Toggle open state."
+		}
+	},
 	props: {
-		disabled: Boolean,
-		positioningDisabled: Boolean,
+		disabled: {
+			type: Boolean,
+			description: "Disables showing the popover."
+		},
+		positioningDisabled: {
+			type: Boolean,
+			description: "Keeps the popover in the DOM flow without floating positioning."
+		},
 		placement: {
 			type: String,
-			default: "bottom-start"
+			default: "bottom-start",
+			description: "Preferred placement relative to the trigger."
 		},
 		delay: {
 			type: [
@@ -31,53 +62,99 @@ var d = /* @__PURE__ */ r({
 				Number,
 				Object
 			],
-			default: 0
+			default: 0,
+			description: "Show/hide delay in ms, or `{ show, hide }`."
+		},
+		distance: {
+			type: [Number, String],
+			description: "Offset along the placement axis in pixels."
+		},
+		skidding: {
+			type: [Number, String],
+			description: "Offset along the trigger edge in pixels."
 		},
-		distance: [Number, String],
-		skidding: [Number, String],
 		triggers: {
 			type: Array,
-			default: () => ["click"]
+			default: () => ["click"],
+			description: "Events that toggle the popover (for example click, hover, focus)."
 		},
 		hideArrow: {
 			type: Boolean,
-			default: !0
+			default: !0,
+			description: "Hides the popover arrow."
+		},
+		showTriggers: {
+			type: [Array, Function],
+			description: "Events that show the popover, or a function deriving them from `triggers`."
+		},
+		hideTriggers: {
+			type: [Array, Function],
+			description: "Events that hide the popover, or a function deriving them from `triggers`."
+		},
+		popperTriggers: {
+			type: Array,
+			description: "Events on the popover content that keep it open."
+		},
+		popperShowTriggers: {
+			type: [Array, Function],
+			description: "Events on the content that show the popover."
+		},
+		popperHideTriggers: {
+			type: [Array, Function],
+			description: "Events on the content that hide the popover."
 		},
-		showTriggers: [Array, Function],
-		hideTriggers: [Array, Function],
-		popperTriggers: Array,
-		popperShowTriggers: [Array, Function],
-		popperHideTriggers: [Array, Function],
 		container: {
 			type: [
 				String,
 				Object,
 				Boolean
 			],
-			default: "body"
+			default: "body",
+			description: "Element that contains the floating popover DOM."
+		},
+		boundary: {
+			type: [String, Object],
+			description: "Overflow boundary used for flip/shift positioning."
 		},
-		boundary: [String, Object],
 		strategy: {
 			type: String,
-			default: "absolute"
+			default: "absolute",
+			description: "CSS position strategy for the floating element."
 		},
 		autoHide: {
 			type: [Boolean, Function],
-			default: !0
+			default: !0,
+			description: "Hides on outside click, or a predicate deciding whether to hide."
+		},
+		shown: {
+			type: Boolean,
+			description: "Controlled open state."
 		},
-		shown: Boolean,
 		handleResize: {
 			type: Boolean,
-			default: !0
-		},
-		instantMove: Boolean,
-		eagerMount: Boolean,
-		popperClass: [
-			String,
-			Array,
-			Object
-		],
-		computeTransformOrigin: Boolean
+			default: !0,
+			description: "Repositions when the popover content size changes."
+		},
+		instantMove: {
+			type: Boolean,
+			description: "Skips transition when the popover moves between placements."
+		},
+		eagerMount: {
+			type: Boolean,
+			description: "Mounts popover content immediately instead of on first open."
+		},
+		popperClass: {
+			type: [
+				String,
+				Array,
+				Object
+			],
+			description: "Extra class(es) on the floating popover element."
+		},
+		computeTransformOrigin: {
+			type: Boolean,
+			description: "Computes transform-origin for scale transitions."
+		}
 	},
 	emits: [
 		"show",
@@ -90,30 +167,41 @@ var d = /* @__PURE__ */ r({
 		"auto-hide",
 		"resize"
 	],
-	setup(r, { expose: d }) {
-		let f = r, p = s(null);
-		function m() {
-			p.value?.show();
+	setup(s, { expose: g }) {
+		let _ = {
+			isButtonGroup: !1,
+			groupProps: {},
+			registerChild: () => {},
+			unregisterChild: () => {},
+			getPosition: () => "only",
+			childOrder: i(() => [])
+		}, v = s, y = f(null);
+		function b() {
+			y.value?.show();
 		}
-		function h() {
-			p.value?.hide();
+		function x() {
+			y.value?.hide();
 		}
-		function g() {
-			_.value ? h() : m();
+		function S() {
+			C.value ? x() : b();
 		}
-		let _ = s(!1);
-		d({
-			show: m,
-			hide: h,
-			toggle: g,
-			isOpen: _
+		let C = f(!1);
+		g({
+			show: b,
+			hide: x,
+			toggle: S,
+			isOpen: C
 		});
-		let { styles: v, classes: y, className: b } = e("Popover", {}, f);
-		return (e, r) => (o(), n(l(t), {
+		let w = c(e, _), { styles: T, classes: E, className: D } = t("Popover", {}, v);
+		return (e, t) => (d(), a(m(n), {
 			ref_key: "elRef",
-			ref: p,
-			style: a(l(v)),
-			class: i([l(b), l(y).wrapper]),
+			ref: y,
+			style: u(m(T)),
+			class: l([
+				m(D),
+				m(E).wrapper,
+				{ "inline-flex self-stretch": m(w).isButtonGroup }
+			]),
 			"positioning-disabled": e.positioningDisabled,
 			placement: e.placement,
 			disabled: e.disabled,
@@ -135,27 +223,30 @@ var d = /* @__PURE__ */ r({
 			"instant-move": e.instantMove,
 			"eager-mount": e.eagerMount,
 			"popper-class": [
-				l(y).content,
+				m(E).content,
 				e.popperClass,
 				e.hideArrow ? "v-popper__popper--no-arrow" : ""
 			],
 			"compute-transform-origin": e.computeTransformOrigin,
-			onShow: r[0] ||= () => {
-				_.value = !0, e.$emit("show");
+			onShow: t[0] ||= () => {
+				C.value = !0, e.$emit("show");
 			},
-			onHide: r[1] ||= () => {
-				_.value = !1, e.$emit("hide");
+			onHide: t[1] ||= () => {
+				C.value = !1, e.$emit("hide");
 			},
-			"onUpdate:shown": r[2] ||= (t) => e.$emit("update:shown", t),
-			onApplyShow: r[3] ||= () => e.$emit("apply-show"),
-			onApplyHide: r[4] ||= () => e.$emit("apply-hide"),
-			onCloseGroup: r[5] ||= () => e.$emit("close-group"),
-			onCloseDirective: r[6] ||= () => e.$emit("close-directive"),
-			onAutoHide: r[7] ||= () => e.$emit("auto-hide"),
-			onResize: r[8] ||= () => e.$emit("resize")
+			"onUpdate:shown": t[2] ||= (t) => e.$emit("update:shown", t),
+			onApplyShow: t[3] ||= () => e.$emit("apply-show"),
+			onApplyHide: t[4] ||= () => e.$emit("apply-hide"),
+			onCloseGroup: t[5] ||= () => e.$emit("close-group"),
+			onCloseDirective: t[6] ||= () => e.$emit("close-directive"),
+			onAutoHide: t[7] ||= () => e.$emit("auto-hide"),
+			onResize: t[8] ||= () => e.$emit("resize")
 		}, {
-			popper: u(() => [c(e.$slots, "content")]),
-			default: u(() => [c(e.$slots, "default")]),
+			popper: h(() => [o(r, null, {
+				default: h(() => [p(e.$slots, "content")]),
+				_: 3
+			})]),
+			default: h(() => [p(e.$slots, "default")]),
 			_: 3
 		}, 8, [
 			"style",
@@ -186,4 +277,4 @@ var d = /* @__PURE__ */ r({
 	}
 });
 //#endregion
-export { d as default };
+export { g as default };

package/lib/components/popover/PopoverContainer.vue.d.ts

@@ -4,6 +4,7 @@ declare const popoverContainerProps: {
     tag: {
         default: string;
         type: StringConstructor;
+        description: string;
     };
 };
 export type PopoverContainerProps = ExtractPublicPropTypes<typeof popoverContainerProps>;
@@ -14,11 +15,13 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<im
     tag: {
         default: string;
         type: StringConstructor;
+        description: string;
     };
 }>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     tag: {
         default: string;
         type: StringConstructor;
+        description: string;
     };
 }>> & Readonly<{}>, {
     tag: string;

package/lib/components/popover/PopoverContainer.vue_vue_type_script_setup_true_lang.js

@@ -3,9 +3,11 @@ import { createBlock as t, defineComponent as n, normalizeClass as r, normalizeS
 //#region src/components/popover/PopoverContainer.vue?vue&type=script&setup=true&lang.ts
 var u = /* @__PURE__ */ n({
 	name: "XPopoverContainer",
+	docs: { slots: { default: "Styled container content for popover panels." } },
 	props: { tag: {
 		default: "div",
-		type: String
+		type: String,
+		description: "Root element tag."
 	} },
 	setup(n) {
 		let { styles: u, classes: d, className: f } = e("PopoverContainer", {}, n);

package/lib/components/popover/PopoverContentBoundary.js

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

package/lib/components/popover/PopoverContentBoundary.vue.d.ts

@@ -0,0 +1,9 @@
+declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>, {
+    default?(_: {}): any;
+}>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/lib/components/popover/PopoverContentBoundary.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,18 @@
+import { injectButtonGroupKey as e } from "../../composables/keys.js";
+import { computed as t, defineComponent as n, provide as r, renderSlot as i } from "vue";
+var a = /* @__PURE__ */ n({
+	name: "XPopoverContentBoundary",
+	docs: { slots: { default: "Popover content isolated from parent ButtonGroup provide/inject." } },
+	setup(n) {
+		return r(e, {
+			isButtonGroup: !1,
+			groupProps: {},
+			registerChild: () => {},
+			unregisterChild: () => {},
+			getPosition: () => "only",
+			childOrder: t(() => [])
+		}), (e, t) => i(e.$slots, "default");
+	}
+});
+//#endregion
+export { a as default };

package/lib/components/popover/theme/PopoverContainer.base.theme.js

@@ -1,4 +1,4 @@
 //#region src/components/popover/theme/PopoverContainer.base.theme.ts
-var e = { classes: { wrapper: "block w-full bg-white dark:bg-secondary-700 shadow-lg rounded-md border border-secondary-200 dark:border-secondary-800" } };
+var e = { classes: { wrapper: "block w-full bg-white dark:bg-secondary-800 shadow-lg rounded-md border border-secondary-200 dark:border-secondary-700" } };
 //#endregion
 export { e as default };

package/lib/components/progress/Progress.vue.d.ts

@@ -5,16 +5,19 @@ declare const progressProps: {
         type: (StringConstructor | NumberConstructor)[];
         default: number;
         validator: (value: number) => boolean;
+        description: string;
     };
     gradient: import("vue").Prop<boolean | undefined>;
     animate: {
         type: BooleanConstructor;
         default: boolean;
+        description: string;
     };
     thick: import("vue").Prop<boolean | undefined>;
     color: {
         readonly type: StringConstructor;
         readonly default: string | undefined;
+        readonly description: "Theme or CSS color used for the control accents.";
     };
 };
 export type ProgressProps = ExtractPublicPropTypes<typeof progressProps>;
@@ -26,32 +29,38 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         type: (StringConstructor | NumberConstructor)[];
         default: number;
         validator: (value: number) => boolean;
+        description: string;
     };
     gradient: import("vue").Prop<boolean | undefined>;
     animate: {
         type: BooleanConstructor;
         default: boolean;
+        description: string;
     };
     thick: import("vue").Prop<boolean | undefined>;
     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, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     percentage: {
         type: (StringConstructor | NumberConstructor)[];
         default: number;
         validator: (value: number) => boolean;
+        description: string;
     };
     gradient: import("vue").Prop<boolean | undefined>;
     animate: {
         type: BooleanConstructor;
         default: boolean;
+        description: string;
     };
     thick: import("vue").Prop<boolean | undefined>;
     color: {
         readonly type: StringConstructor;
         readonly default: string | undefined;
+        readonly description: "Theme or CSS color used for the control accents.";
     };
 }>> & Readonly<{}>, {
     color: string;

package/lib/components/progress/Progress.vue_vue_type_script_setup_true_lang.js

@@ -5,19 +5,22 @@ import { createCommentVNode as r, createElementBlock as i, createElementVNode as
 //#region src/components/progress/Progress.vue?vue&type=script&setup=true&lang.ts
 var d = /* @__PURE__ */ o({
 	name: "XProgress",
+	docs: {},
 	props: {
 		...e.props("primary"),
 		percentage: {
 			type: [Number, String],
 			default: 0,
-			validator: (e) => e >= 0 && e <= 100
+			validator: (e) => e >= 0 && e <= 100,
+			description: "Fill amount from 0 to 100."
 		},
-		gradient: n(),
+		gradient: n("Uses a gradient fill instead of a solid color."),
 		animate: {
 			type: Boolean,
-			default: !0
+			default: !0,
+			description: "Animates width changes when the percentage updates."
 		},
-		thick: n()
+		thick: n("Increases the bar thickness.")
 	},
 	setup(e) {
 		let { styles: n, classes: o, className: d } = t("Progress", {}, e);

package/lib/components/qrCode/QrCode.vue.d.ts

@@ -1,22 +1,29 @@
 import { type ExtractPublicPropTypes } from 'vue';
 import { type ThemeComponent } from '../../composables/useTheme';
 declare const qrCodeProps: {
-    value: StringConstructor;
+    value: {
+        type: StringConstructor;
+        description: string;
+    };
     color: {
         type: StringConstructor;
         default: string;
+        description: string;
     };
     backgroundColor: {
         type: StringConstructor;
         default: string;
+        description: string;
     };
     size: {
         type: (StringConstructor | NumberConstructor)[];
         default: number;
+        description: string;
     };
     errorCorrectionLevel: {
         type: StringConstructor;
         default: string;
+        description: string;
     };
 };
 export type QrCodeProps = ExtractPublicPropTypes<typeof qrCodeProps>;
@@ -24,40 +31,54 @@ type InternalClasses = 'wrapper';
 export interface QrCodeTheme extends ThemeComponent<QrCodeProps, InternalClasses> {
 }
 declare const _default: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
-    value: StringConstructor;
+    value: {
+        type: StringConstructor;
+        description: string;
+    };
     color: {
         type: StringConstructor;
         default: string;
+        description: string;
     };
     backgroundColor: {
         type: StringConstructor;
         default: string;
+        description: string;
     };
     size: {
         type: (StringConstructor | NumberConstructor)[];
         default: number;
+        description: string;
     };
     errorCorrectionLevel: {
         type: StringConstructor;
         default: string;
+        description: string;
     };
 }>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
-    value: StringConstructor;
+    value: {
+        type: StringConstructor;
+        description: string;
+    };
     color: {
         type: StringConstructor;
         default: string;
+        description: string;
     };
     backgroundColor: {
         type: StringConstructor;
         default: string;
+        description: string;
     };
     size: {
         type: (StringConstructor | NumberConstructor)[];
         default: number;
+        description: string;
     };
     errorCorrectionLevel: {
         type: StringConstructor;
         default: string;
+        description: string;
     };
 }>> & Readonly<{}>, {
     color: string;

package/lib/components/qrCode/QrCode.vue_vue_type_script_setup_true_lang.js

@@ -10,23 +10,31 @@ var p = /* @__PURE__ */ a({
 		"Q",
 		"H"
 	] },
+	docs: {},
 	props: {
-		value: String,
+		value: {
+			type: String,
+			description: "Text or URL encoded in the QR code."
+		},
 		color: {
 			type: String,
-			default: "#000"
+			default: "#000",
+			description: "Foreground module color."
 		},
 		backgroundColor: {
 			type: String,
-			default: "#fff"
+			default: "#fff",
+			description: "Background color behind the modules."
 		},
 		size: {
 			type: [String, Number],
-			default: 100
+			default: 100,
+			description: "Rendered size of the QR canvas in pixels."
 		},
 		errorCorrectionLevel: {
 			type: String,
-			default: "M"
+			default: "M",
+			description: "Error correction level (L, M, Q, or H)."
 		}
 	},
 	setup(a) {