iryx-ui 0.24.1 → 0.25.0

package/dist/components/AvatarGroup.vue.d.ts

@@ -11,21 +11,27 @@ export interface AvatarGroupProps {
     max?: number;
     size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
     shape?: 'circle' | 'square';
+    /**
+     * Show each person's `name` in a tooltip, and lift the avatar under the
+     * pointer or focus out of the stack.
+     */
+    tooltip?: boolean;
     /** Skip built-in classes; you take over styling entirely. */
     unstyled?: boolean;
     class?: ClassValue;
     /** Override classes per element, e.g. `{ overflow: 'bg-primary' }`. */
     ui?: {
         root?: string;
+        trigger?: string;
         item?: string;
         overflow?: string;
     };
 }
-declare var __VLS_1: {
+declare var __VLS_8: {
     count: number;
 };
 type __VLS_Slots = {} & {
-    overflow?: (props: typeof __VLS_1) => any;
+    overflow?: (props: typeof __VLS_8) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<AvatarGroupProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<AvatarGroupProps> & Readonly<{}>, {
     unstyled: boolean;

package/dist/components/AvatarGroup.vue_vue_type_script_setup_true_lang.js

@@ -1,15 +1,17 @@
 import { useIryxUiConfig as e } from "../config.js";
 import { avatarGroupTheme as t } from "../theme/avatar.js";
 import n from "./Avatar.js";
-import { Fragment as r, computed as i, createBlock as a, createCommentVNode as o, createElementBlock as s, createTextVNode as c, defineComponent as l, mergeProps as u, normalizeClass as d, openBlock as f, renderList as p, renderSlot as m, toDisplayString as h } from "vue";
+import r from "./Tooltip.js";
+import { Fragment as i, computed as a, createBlock as o, createCommentVNode as s, createElementBlock as c, createElementVNode as l, createTextVNode as u, createVNode as d, defineComponent as f, mergeProps as p, normalizeClass as m, openBlock as h, renderList as g, renderSlot as _, toDisplayString as v, withCtx as y } from "vue";
 //#region src/components/AvatarGroup.vue?vue&type=script&setup=true&lang.ts
-var g = /*@__PURE__*/ l({
+var b = ["tabindex"], x = ["tabindex"], S = /*@__PURE__*/ f({
 	__name: "AvatarGroup",
 	props: {
 		items: {},
 		max: {},
 		size: {},
 		shape: {},
+		tooltip: { type: Boolean },
 		unstyled: {
 			type: Boolean,
 			default: void 0
@@ -22,29 +24,61 @@ var g = /*@__PURE__*/ l({
 		] },
 		ui: {}
 	},
-	setup(l) {
-		let g = l, _ = i(() => g.items ?? []), v = i(() => {
-			let e = g.max;
-			return [...e !== void 0 && _.value.length > e ? _.value.slice(0, e) : _.value].reverse();
-		}), y = i(() => {
-			let e = g.max;
-			return e === void 0 || _.value.length <= e ? 0 : _.value.length - e;
-		}), b = e(), x = i(() => g.unstyled ?? b.unstyled), S = i(() => t({ size: g.size })), C = i(() => x.value ? [g.ui?.root, g.class] : S.value.root({ class: [g.ui?.root, g.class] })), w = i(() => x.value ? g.ui?.item : S.value.item({ class: g.ui?.item })), T = i(() => x.value ? g.ui?.overflow : S.value.overflow({ class: g.ui?.overflow }));
-		return (e, t) => (f(), s("div", { class: d(C.value) }, [y.value ? (f(), s("span", {
+	setup(f) {
+		let S = f, C = a(() => S.items ?? []), w = a(() => {
+			let e = S.max;
+			return [...e !== void 0 && C.value.length > e ? C.value.slice(0, e) : C.value].reverse();
+		}), T = a(() => {
+			let e = S.max;
+			return e === void 0 || C.value.length <= e ? 0 : C.value.length - e;
+		}), E = a(() => C.value.slice(C.value.length - T.value).map((e) => e.name).filter(Boolean).join(", ")), D = e(), O = a(() => S.unstyled ?? D.unstyled), k = a(() => t({
+			size: S.size,
+			tooltip: S.tooltip
+		})), A = a(() => O.value ? [S.ui?.root, S.class] : k.value.root({ class: [S.ui?.root, S.class] })), j = a(() => O.value ? S.ui?.trigger : k.value.trigger({ class: S.ui?.trigger })), M = a(() => O.value ? S.ui?.item : k.value.item({ class: S.ui?.item })), N = a(() => O.value ? S.ui?.overflow : k.value.overflow({ class: S.ui?.overflow }));
+		return (e, t) => (h(), c("div", { class: m(A.value) }, [T.value ? (h(), o(r, {
 			key: 0,
-			class: d(T.value)
-		}, [m(e.$slots, "overflow", { count: y.value }, () => [c("+" + h(y.value), 1)])], 2)) : o("", !0), (f(!0), s(r, null, p(v.value, (e, t) => (f(), a(n, u({ key: t }, { ref_for: !0 }, e, {
-			size: g.size,
-			shape: g.shape,
-			unstyled: x.value,
-			class: w.value
-		}), null, 16, [
-			"size",
-			"shape",
-			"unstyled",
-			"class"
+			text: E.value,
+			disabled: !S.tooltip || !E.value,
+			"side-offset": 10,
+			unstyled: O.value
+		}, {
+			trigger: y(() => [l("span", {
+				class: m(N.value),
+				tabindex: S.tooltip && E.value ? 0 : void 0
+			}, [_(e.$slots, "overflow", { count: T.value }, () => [u("+" + v(T.value), 1)])], 10, b)]),
+			_: 3
+		}, 8, [
+			"text",
+			"disabled",
+			"unstyled"
+		])) : s("", !0), (h(!0), c(i, null, g(w.value, (e, t) => (h(), o(r, {
+			key: t,
+			text: e.name,
+			disabled: !S.tooltip || !e.name,
+			"side-offset": 10,
+			unstyled: O.value
+		}, {
+			trigger: y(() => [l("span", {
+				class: m(j.value),
+				tabindex: S.tooltip && e.name ? 0 : void 0
+			}, [d(n, p({ ref_for: !0 }, e, {
+				size: S.size,
+				shape: S.shape,
+				unstyled: O.value,
+				class: M.value
+			}), null, 16, [
+				"size",
+				"shape",
+				"unstyled",
+				"class"
+			])], 10, x)]),
+			_: 2
+		}, 1032, [
+			"text",
+			"disabled",
+			"unstyled"
 		]))), 128))], 2));
 	}
 });
 //#endregion
-export { g as default };
+export { S as default };

package/dist/components/Breadcrumb.vue.d.ts

@@ -15,6 +15,13 @@ export interface BreadcrumbProps {
      * apps.
      */
     label?: string;
+    /**
+     * Show at most this many crumbs: the first, then a "…" menu holding the
+     * middle, then the last `max - 1`. Below 2 it is treated as 2.
+     */
+    max?: number;
+    /** Accessible name for the "…" button — override for non-English apps. */
+    moreLabel?: string;
     /** Skip built-in classes; you take over styling entirely. */
     unstyled?: boolean;
     class?: ClassValue;
@@ -28,13 +35,14 @@ export interface BreadcrumbProps {
         separator?: string;
     };
 }
-declare var __VLS_26: {};
+declare var __VLS_38: {};
 type __VLS_Slots = {} & {
-    separator?: (props: typeof __VLS_26) => any;
+    separator?: (props: typeof __VLS_38) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<BreadcrumbProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<BreadcrumbProps> & Readonly<{}>, {
     label: string;
     unstyled: boolean;
+    moreLabel: string;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;

package/dist/components/Breadcrumb.vue_vue_type_script_setup_true_lang.js

@@ -1,15 +1,18 @@
 import { useIryxUiConfig as e } from "../config.js";
 import t from "./Icon.js";
 import { breadcrumbTheme as n } from "../theme/breadcrumb.js";
-import { Fragment as r, computed as i, createBlock as a, createCommentVNode as o, createElementBlock as s, createElementVNode as c, createTextVNode as l, createVNode as u, defineComponent as d, normalizeClass as f, openBlock as p, renderList as m, renderSlot as h, resolveDynamicComponent as g, toDisplayString as _, unref as v, withCtx as y } from "vue";
-import { ArrowRight01Icon as b } from "@hugeicons/core-free-icons";
-import { Primitive as x } from "reka-ui";
+import r from "./DropdownMenu.js";
+import { Fragment as i, computed as a, createBlock as o, createCommentVNode as s, createElementBlock as c, createElementVNode as l, createTextVNode as u, createVNode as d, defineComponent as f, normalizeClass as p, openBlock as m, renderList as h, renderSlot as g, resolveDynamicComponent as _, toDisplayString as v, unref as y, withCtx as b } from "vue";
+import { ArrowRight01Icon as x, MoreHorizontalIcon as S } from "@hugeicons/core-free-icons";
+import { Primitive as C } from "reka-ui";
 //#region src/components/Breadcrumb.vue?vue&type=script&setup=true&lang.ts
-var S = /*@__PURE__*/ d({
+var w = ["aria-label"], T = /*@__PURE__*/ f({
 	__name: "Breadcrumb",
 	props: {
 		items: {},
 		label: { default: "Breadcrumb" },
+		max: {},
+		moreLabel: { default: "Show hidden pages" },
 		unstyled: {
 			type: Boolean,
 			default: void 0
@@ -22,52 +25,81 @@ var S = /*@__PURE__*/ d({
 		] },
 		ui: {}
 	},
-	setup(d) {
-		let S = d, C = e(), w = i(() => S.unstyled ?? C.unstyled), T = i(() => S.items ?? []), E = i(() => T.value.length - 1), D = i(() => n());
-		function O(e) {
-			let t = S.ui?.[e];
-			return w.value ? t : D.value[e]({ class: t });
+	setup(f) {
+		let T = f, E = e(), D = a(() => T.unstyled ?? E.unstyled), O = a(() => T.items ?? []), k = a(() => O.value.length - 1), A = a(() => {
+			if (T.max === void 0) return 0;
+			let e = Math.max(T.max, 2);
+			return O.value.length > e ? O.value.length - e : 0;
+		}), j = a(() => {
+			let e = O.value.map((e, t) => ({
+				item: e,
+				index: t
+			}));
+			return A.value ? [
+				e[0],
+				null,
+				...e.slice(1 + A.value)
+			] : e;
+		}), M = a(() => O.value.slice(1, 1 + A.value).map((e) => ({
+			label: e.label,
+			icon: e.icon,
+			onSelect: e.onSelect ?? (e.href ? () => window.location.assign(e.href) : void 0)
+		}))), N = a(() => n());
+		function P(e) {
+			let t = T.ui?.[e];
+			return D.value ? t : N.value[e]({ class: t });
 		}
-		return (e, n) => (p(), a(v(x), {
+		return (e, n) => (m(), o(y(C), {
 			as: "nav",
-			"aria-label": S.label,
-			class: f(w.value ? [S.ui?.root, S.class] : D.value.root({ class: [S.ui?.root, S.class] }))
+			"aria-label": T.label,
+			class: p(D.value ? [T.ui?.root, T.class] : N.value.root({ class: [T.ui?.root, T.class] }))
 		}, {
-			default: y(() => [c("ol", { class: f(O("list")) }, [(p(!0), s(r, null, m(T.value, (n, r) => (p(), s("li", {
-				key: r,
-				class: f(O("item"))
-			}, [r === E.value ? (p(), s("span", {
-				key: 0,
+			default: b(() => [l("ol", { class: p(P("list")) }, [(m(!0), c(i, null, h(j.value, (n) => (m(), c("li", {
+				key: n?.index ?? "more",
+				class: p(P("item"))
+			}, [n ? n.index === k.value ? (m(), c("span", {
+				key: 1,
 				"aria-current": "page",
-				class: f(O("current"))
-			}, [n.icon ? (p(), a(t, {
+				class: p(P("current"))
+			}, [n.item.icon ? (m(), o(t, {
 				key: 0,
-				icon: n.icon
-			}, null, 8, ["icon"])) : o("", !0), l(" " + _(n.label), 1)], 2)) : (p(), a(g(n.href ? "a" : "button"), {
-				key: 1,
-				href: n.href,
-				type: n.href ? void 0 : "button",
-				class: f(O("link")),
-				onClick: (e) => n.onSelect?.()
+				icon: n.item.icon
+			}, null, 8, ["icon"])) : s("", !0), u(" " + v(n.item.label), 1)], 2)) : (m(), o(_(n.item.href ? "a" : "button"), {
+				key: 2,
+				href: n.item.href,
+				type: n.item.href ? void 0 : "button",
+				class: p(P("link")),
+				onClick: (e) => n.item.onSelect?.()
 			}, {
-				default: y(() => [n.icon ? (p(), a(t, {
+				default: b(() => [n.item.icon ? (m(), o(t, {
 					key: 0,
-					icon: n.icon
-				}, null, 8, ["icon"])) : o("", !0), l(" " + _(n.label), 1)]),
+					icon: n.item.icon
+				}, null, 8, ["icon"])) : s("", !0), u(" " + v(n.item.label), 1)]),
 				_: 2
 			}, 1032, [
 				"href",
 				"type",
 				"class",
 				"onClick"
-			])), r === E.value ? o("", !0) : (p(), s("span", {
-				key: 2,
+			])) : (m(), o(r, {
+				key: 0,
+				items: M.value,
+				unstyled: D.value
+			}, {
+				trigger: b(() => [l("button", {
+					type: "button",
+					"aria-label": T.moreLabel,
+					class: p(P("link"))
+				}, [d(t, { icon: y(S) }, null, 8, ["icon"])], 10, w)]),
+				_: 1
+			}, 8, ["items", "unstyled"])), n?.index === k.value ? s("", !0) : (m(), c("span", {
+				key: 3,
 				"aria-hidden": "true",
-				class: f(O("separator"))
-			}, [h(e.$slots, "separator", {}, () => [u(t, { icon: v(b) }, null, 8, ["icon"])])], 2))], 2))), 128))], 2)]),
+				class: p(P("separator"))
+			}, [g(e.$slots, "separator", {}, () => [d(t, { icon: y(x) }, null, 8, ["icon"])])], 2))], 2))), 128))], 2)]),
 			_: 3
 		}, 8, ["aria-label", "class"]));
 	}
 });
 //#endregion
-export { S as default };
+export { T as default };

package/dist/components/ConfirmPopover.vue.d.ts

@@ -48,10 +48,10 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {
 }>, {
     unstyled: boolean;
     side: "top" | "right" | "bottom" | "left";
+    arrow: boolean;
     sideOffset: number;
     confirmLabel: string;
     cancelLabel: string;
-    arrow: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;

package/dist/components/FileUpload.vue.d.ts

@@ -4,6 +4,13 @@ export interface FileRejection {
     file: File;
     reason: 'type' | 'size' | 'count';
 }
+export interface FileUploadStatus {
+    state: 'uploading' | 'done' | 'error';
+    /** 0–100. Leave it out while uploading for an indeterminate bar. */
+    progress?: number;
+    /** Shown on the row when `state` is `'error'`. Falls back to `failedText`. */
+    error?: string;
+}
 export interface FileUploadProps {
     /** Accept more than one file. The model is an array either way. */
     multiple?: boolean;
@@ -23,8 +30,18 @@ export interface FileUploadProps {
     hint?: string;
     /** Text on the browse button. */
     browseLabel?: string;
+    /**
+     * Upload state for a held file — a bar while uploading, "Uploaded" when done,
+     * the error and a retry button when it failed. Read reactively, so point it
+     * at your own reactive store.
+     */
+    statusFor?: (file: File) => FileUploadStatus | undefined;
     /** Labels and messages — override for non-English apps. */
     removeLabel?: string;
+    retryLabel?: string;
+    /** Added to the size once a file's status is `'done'`. */
+    doneText?: string;
+    failedText?: string;
     tooLargeText?: string;
     wrongTypeText?: string;
     tooManyText?: string;
@@ -33,7 +50,7 @@ export interface FileUploadProps {
     /** Applied to the outer wrapper, which stacks the zone above the list. */
     class?: ClassValue;
     /** Override classes per element, e.g. `{ dropzone: 'py-10' }`. */
-    ui?: Partial<Record<'root' | 'dropzone' | 'input' | 'icon' | 'label' | 'browse' | 'hint' | 'list' | 'item' | 'thumbnail' | 'placeholder' | 'details' | 'name' | 'meta' | 'remove' | 'error', string>>;
+    ui?: Partial<Record<'root' | 'dropzone' | 'input' | 'icon' | 'label' | 'browse' | 'hint' | 'list' | 'item' | 'thumbnail' | 'placeholder' | 'details' | 'name' | 'meta' | 'remove' | 'error' | 'progress' | 'actions' | 'retry', string>>;
 }
 type __VLS_Props = FileUploadProps;
 type __VLS_ModelProps = {
@@ -47,9 +64,11 @@ type __VLS_ModelProps = {
 type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
 declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:modelValue": (value: File[]) => any;
+    retry: (file: File) => any;
     reject: (rejections: FileRejection[]) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
     "onUpdate:modelValue"?: ((value: File[]) => any) | undefined;
+    onRetry?: ((file: File) => any) | undefined;
     onReject?: ((rejections: FileRejection[]) => any) | undefined;
 }>, {
     label: string;
@@ -57,6 +76,9 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {},
     invalid: boolean;
     removeLabel: string;
     browseLabel: string;
+    retryLabel: string;
+    doneText: string;
+    failedText: string;
     tooLargeText: string;
     wrongTypeText: string;
     tooManyText: string;