iryx-ui 0.24.1 → 0.26.0

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

@@ -1,4 +1,5 @@
 import type { ClassValue } from '../class-value';
+import type { DateRangePreset } from '../composables/date';
 /** Both ends are ISO `YYYY-MM-DD` strings, and either may be absent. */
 export interface DateRange {
     start: string | null;
@@ -21,8 +22,18 @@ export interface DateRangePickerProps {
     format?: Intl.DateTimeFormatOptions;
     /** 0 is Sunday. Defaults to the locale's own convention. */
     weekStartsOn?: 0 | 1 | 2 | 3 | 4 | 5 | 6;
-    /** Months shown side by side. Two makes picking a span across a boundary sane. */
+    /**
+     * Months shown side by side. Two makes picking a span across a boundary
+     * sane. Narrow screens always get one.
+     */
     months?: number;
+    /**
+     * Shortcuts beside the calendar — "Last 7 days", "This month". Picking one
+     * fills the range and closes. `commonDateRangePresets()` builds the usual set.
+     */
+    presets?: DateRangePreset[];
+    /** Accessible name for the preset list — override for non-English apps. */
+    presetsLabel?: string;
     /** Offer a "clear" action in the footer. */
     clearable?: boolean;
     /** Separator between the two dates on the trigger. */
@@ -36,7 +47,7 @@ export interface DateRangePickerProps {
     /** Applied to the trigger, which is the element carrying the field chrome. */
     class?: ClassValue;
     /** Override classes per element, e.g. `{ content: 'p-4' }`. */
-    ui?: Partial<Record<'trigger' | 'placeholder' | 'content' | 'header' | 'heading' | 'nav' | 'months' | 'grid' | 'headCell' | 'cell' | 'cellTrigger' | 'footer' | 'action', string>>;
+    ui?: Partial<Record<'trigger' | 'placeholder' | 'content' | 'panel' | 'presets' | 'preset' | 'header' | 'heading' | 'nav' | 'months' | 'grid' | 'headCell' | 'cell' | 'cellTrigger' | 'footer' | 'action', string>>;
 }
 type __VLS_Props = DateRangePickerProps;
 type __VLS_ModelProps = {
@@ -56,6 +67,7 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {},
     nextLabel: string;
     invalid: boolean;
     clearLabel: string;
+    presetsLabel: string;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/components/DateRangePicker.vue_vue_type_script_setup_true_lang.js

@@ -2,18 +2,22 @@ import { useIryxUiConfig as e } from "../config.js";
 import t from "./Icon.js";
 import { formatIsoDate as n, toCalendarDate as r, toIsoDate as i } from "../composables/date.js";
 import { calendarTheme as ee } from "../theme/calendar.js";
-import { useFormField as te } from "../composables/form.js";
-import { datePickerTheme as a } from "../theme/date-picker.js";
-import { Fragment as o, computed as s, createBlock as c, createCommentVNode as l, createElementBlock as u, createElementVNode as d, createTextVNode as f, createVNode as p, defineComponent as m, mergeModels as h, normalizeClass as g, openBlock as _, ref as v, renderList as y, shallowRef as b, toDisplayString as x, unref as S, useModel as C, watch as w, withCtx as T } from "vue";
-import { ArrowLeft01Icon as E, ArrowRight01Icon as ne, Calendar03Icon as re } from "@hugeicons/core-free-icons";
-import { PopoverContent as D, PopoverPortal as O, PopoverRoot as k, PopoverTrigger as A, RangeCalendarCell as j, RangeCalendarCellTrigger as M, RangeCalendarGrid as N, RangeCalendarGridBody as P, RangeCalendarGridHead as F, RangeCalendarGridRow as I, RangeCalendarHeadCell as L, RangeCalendarHeader as R, RangeCalendarHeading as z, RangeCalendarNext as B, RangeCalendarPrev as V, RangeCalendarRoot as ie } from "reka-ui";
+import { useFormField as a } from "../composables/form.js";
+import { datePickerTheme as o } from "../theme/date-picker.js";
+import { Fragment as s, computed as c, createBlock as l, createCommentVNode as u, createElementBlock as d, createElementVNode as f, createTextVNode as te, createVNode as p, defineComponent as m, mergeModels as h, normalizeClass as g, onBeforeUnmount as ne, onMounted as re, openBlock as _, ref as v, renderList as y, shallowRef as b, toDisplayString as x, unref as S, useModel as ie, watch as C, withCtx as w } from "vue";
+import { ArrowLeft01Icon as ae, ArrowRight01Icon as oe, Calendar03Icon as se } from "@hugeicons/core-free-icons";
+import { PopoverContent as ce, PopoverPortal as le, PopoverRoot as ue, PopoverTrigger as de, RangeCalendarCell as T, RangeCalendarCellTrigger as E, RangeCalendarGrid as D, RangeCalendarGridBody as O, RangeCalendarGridHead as k, RangeCalendarGridRow as A, RangeCalendarHeadCell as j, RangeCalendarHeader as M, RangeCalendarHeading as N, RangeCalendarNext as P, RangeCalendarPrev as F, RangeCalendarRoot as I } from "reka-ui";
 //#region src/components/DateRangePicker.vue?vue&type=script&setup=true&lang.ts
-var H = [
+var L = [
 	"id",
 	"disabled",
 	"aria-invalid",
 	"aria-describedby"
-], U = { key: 0 }, W = /*@__PURE__*/ m({
+], R = { key: 0 }, z = ["aria-label"], B = [
+	"disabled",
+	"aria-pressed",
+	"onClick"
+], V = /*@__PURE__*/ m({
 	__name: "DateRangePicker",
 	props: /*@__PURE__*/ h({
 		size: {},
@@ -30,6 +34,8 @@ var H = [
 		format: {},
 		weekStartsOn: {},
 		months: { default: 2 },
+		presets: {},
+		presetsLabel: { default: "Presets" },
 		clearable: { type: Boolean },
 		separator: { default: " – " },
 		clearLabel: { default: "Clear" },
@@ -55,127 +61,162 @@ var H = [
 	}),
 	emits: ["update:modelValue"],
 	setup(m) {
-		let h = m, W = C(m, "modelValue"), G = v(!1), K = te(), q = s(() => h.id ?? K?.id.value);
-		K && h.id && (K.id.value = h.id);
-		let J = s(() => h.invalid ?? K?.invalid.value ?? !1), Y = e(), ae = s(() => h.unstyled ?? Y.unstyled), X = b({
-			start: r(W.value?.start),
-			end: r(W.value?.end)
+		let h = m, V = ie(m, "modelValue"), H = v(!1), U = a(), fe = c(() => h.id ?? U?.id.value);
+		U && h.id && (U.id.value = h.id);
+		let W = c(() => h.invalid ?? U?.invalid.value ?? !1), pe = e(), me = c(() => h.unstyled ?? pe.unstyled), G = b({
+			start: r(V.value?.start),
+			end: r(V.value?.end)
 		});
-		function Z(e) {
-			return i(e.start) === (W.value?.start ?? null) && i(e.end) === (W.value?.end ?? null);
+		function K(e) {
+			return i(e.start) === (V.value?.start ?? null) && i(e.end) === (V.value?.end ?? null);
 		}
-		w(W, () => {
-			Z(X.value) || (X.value = {
-				start: r(W.value?.start),
-				end: r(W.value?.end)
+		C(V, () => {
+			K(G.value) || (G.value = {
+				start: r(V.value?.start),
+				end: r(V.value?.end)
 			});
-		}, { deep: !0 }), w(X, (e) => {
-			Z(e) || (W.value = {
+		}, { deep: !0 }), C(G, (e) => {
+			K(e) || (V.value = {
 				start: i(e.start),
 				end: i(e.end)
 			});
 		});
-		let oe = s(() => r(h.min)), se = s(() => r(h.max)), Q = s(() => {
-			let e = n(W.value?.start, h.locale, h.format), t = n(W.value?.end, h.locale, h.format);
+		let q = v(!1), J;
+		function Y(e) {
+			q.value = e.matches;
+		}
+		re(() => {
+			typeof window.matchMedia == "function" && (J = window.matchMedia("(max-width: 39.99rem)"), q.value = J.matches, J.addEventListener("change", Y));
+		}), ne(() => J?.removeEventListener("change", Y));
+		let he = c(() => q.value ? 1 : h.months), ge = c(() => r(h.min)), _e = c(() => r(h.max)), X = c(() => {
+			let e = n(V.value?.start, h.locale, h.format), t = n(V.value?.end, h.locale, h.format);
 			return !e && !t ? "" : t ? `${e}${h.separator}${t}` : e;
 		});
-		w(W, (e) => {
-			G.value && e?.start && e?.end && (G.value = !1);
+		C(V, (e) => {
+			H.value && e?.start && e?.end && (H.value = !1);
 		}, { deep: !0 });
-		function ce() {
-			W.value = {
+		let Z = c(() => (H.value, (h.presets ?? []).map((e) => ({
+			label: e.label,
+			range: typeof e.range == "function" ? e.range() : e.range
+		}))));
+		function Q(e) {
+			return (!h.min || !e.start || e.start >= h.min) && (!h.max || !e.end || e.end <= h.max);
+		}
+		function ve(e) {
+			return V.value?.start === e.start && V.value?.end === e.end;
+		}
+		function ye(e) {
+			V.value = {
+				start: e.start,
+				end: e.end
+			}, H.value = !1;
+		}
+		function be() {
+			V.value = {
 				start: null,
 				end: null
-			}, G.value = !1;
+			}, H.value = !1;
 		}
-		let le = s(() => ({
-			...a({
+		let xe = c(() => ({
+			...o({
 				size: h.size,
-				invalid: J.value
+				invalid: W.value
 			}),
 			...ee({ range: !0 })
 		}));
 		function $(e, t) {
 			let n = h.ui?.[e];
-			return ae.value ? [n, t] : le.value[e]({ class: [n, t] });
+			return me.value ? [n, t] : xe.value[e]({ class: [n, t] });
 		}
-		return (e, n) => (_(), c(S(k), {
-			open: G.value,
-			"onUpdate:open": n[1] ||= (e) => G.value = e
+		return (e, n) => (_(), l(S(ue), {
+			open: H.value,
+			"onUpdate:open": n[1] ||= (e) => H.value = e
 		}, {
-			default: T(() => [p(S(A), { "as-child": "" }, {
-				default: T(() => [d("button", {
-					id: q.value,
+			default: w(() => [p(S(de), { "as-child": "" }, {
+				default: w(() => [f("button", {
+					id: fe.value,
 					type: "button",
 					disabled: h.disabled,
-					"aria-invalid": J.value || void 0,
-					"aria-describedby": S(K)?.describedBy.value,
+					"aria-invalid": W.value || void 0,
+					"aria-describedby": S(U)?.describedBy.value,
 					class: g($("trigger", h.class))
-				}, [Q.value ? (_(), u("span", U, x(Q.value), 1)) : (_(), u("span", {
+				}, [X.value ? (_(), d("span", R, x(X.value), 1)) : (_(), d("span", {
 					key: 1,
 					class: g($("placeholder"))
-				}, x(h.placeholder), 3)), p(t, { icon: S(re) }, null, 8, ["icon"])], 10, H)]),
+				}, x(h.placeholder), 3)), p(t, { icon: S(se) }, null, 8, ["icon"])], 10, L)]),
 				_: 1
-			}), p(S(O), null, {
-				default: T(() => [p(S(D), {
+			}), p(S(le), null, {
+				default: w(() => [p(S(ce), {
 					class: g($("content")),
 					"side-offset": 4,
 					align: "start"
 				}, {
-					default: T(() => [p(S(ie), {
-						modelValue: X.value,
-						"onUpdate:modelValue": n[0] ||= (e) => X.value = e,
-						"min-value": oe.value,
-						"max-value": se.value,
+					default: w(() => [f("div", { class: g($("panel")) }, [Z.value.length ? (_(), d("div", {
+						key: 0,
+						role: "group",
+						"aria-label": h.presetsLabel,
+						class: g($("presets"))
+					}, [(_(!0), d(s, null, y(Z.value, (e) => (_(), d("button", {
+						key: e.label,
+						type: "button",
+						disabled: !Q(e.range),
+						"aria-pressed": ve(e.range),
+						class: g($("preset")),
+						onClick: (t) => ye(e.range)
+					}, x(e.label), 11, B))), 128))], 10, z)) : u("", !0), p(S(I), {
+						modelValue: G.value,
+						"onUpdate:modelValue": n[0] ||= (e) => G.value = e,
+						"min-value": ge.value,
+						"max-value": _e.value,
 						locale: h.locale,
 						"week-starts-on": h.weekStartsOn,
-						"number-of-months": h.months,
+						"number-of-months": he.value,
 						"fixed-weeks": "",
 						"initial-focus": ""
 					}, {
-						default: T(({ grid: e, weekDays: n }) => [p(S(R), { class: g($("header")) }, {
-							default: T(() => [
-								p(S(V), {
+						default: w(({ grid: e, weekDays: n }) => [p(S(M), { class: g($("header")) }, {
+							default: w(() => [
+								p(S(F), {
 									"aria-label": h.previousLabel,
 									class: g($("nav"))
 								}, {
-									default: T(() => [p(t, { icon: S(E) }, null, 8, ["icon"])]),
+									default: w(() => [p(t, { icon: S(ae) }, null, 8, ["icon"])]),
 									_: 1
 								}, 8, ["aria-label", "class"]),
-								p(S(z), { class: g($("heading")) }, null, 8, ["class"]),
-								p(S(B), {
+								p(S(N), { class: g($("heading")) }, null, 8, ["class"]),
+								p(S(P), {
 									"aria-label": h.nextLabel,
 									class: g($("nav"))
 								}, {
-									default: T(() => [p(t, { icon: S(ne) }, null, 8, ["icon"])]),
+									default: w(() => [p(t, { icon: S(oe) }, null, 8, ["icon"])]),
 									_: 1
 								}, 8, ["aria-label", "class"])
 							]),
 							_: 1
-						}, 8, ["class"]), d("div", { class: g($("months")) }, [(_(!0), u(o, null, y(e, (e) => (_(), c(S(N), {
+						}, 8, ["class"]), f("div", { class: g($("months")) }, [(_(!0), d(s, null, y(e, (e) => (_(), l(S(D), {
 							key: e.value.toString(),
 							class: g($("grid"))
 						}, {
-							default: T(() => [p(S(F), null, {
-								default: T(() => [p(S(I), null, {
-									default: T(() => [(_(!0), u(o, null, y(n, (e) => (_(), c(S(L), {
+							default: w(() => [p(S(k), null, {
+								default: w(() => [p(S(A), null, {
+									default: w(() => [(_(!0), d(s, null, y(n, (e) => (_(), l(S(j), {
 										key: e,
 										class: g($("headCell"))
 									}, {
-										default: T(() => [f(x(e), 1)]),
+										default: w(() => [te(x(e), 1)]),
 										_: 2
 									}, 1032, ["class"]))), 128))]),
 									_: 2
 								}, 1024)]),
 								_: 2
-							}, 1024), p(S(P), null, {
-								default: T(() => [(_(!0), u(o, null, y(e.rows, (t, n) => (_(), c(S(I), { key: `week-${n}` }, {
-									default: T(() => [(_(!0), u(o, null, y(t, (t) => (_(), c(S(j), {
+							}, 1024), p(S(O), null, {
+								default: w(() => [(_(!0), d(s, null, y(e.rows, (t, n) => (_(), l(S(A), { key: `week-${n}` }, {
+									default: w(() => [(_(!0), d(s, null, y(t, (t) => (_(), l(S(T), {
 										key: t.toString(),
 										date: t,
 										class: g($("cell"))
 									}, {
-										default: T(() => [p(S(M), {
+										default: w(() => [p(S(E), {
 											day: t,
 											month: e.value,
 											class: g($("cellTrigger"))
@@ -200,14 +241,14 @@ var H = [
 						"locale",
 						"week-starts-on",
 						"number-of-months"
-					]), h.clearable ? (_(), u("div", {
+					])], 2), h.clearable ? (_(), d("div", {
 						key: 0,
 						class: g($("footer"))
-					}, [d("button", {
+					}, [f("button", {
 						type: "button",
 						class: g($("action")),
-						onClick: ce
-					}, x(h.clearLabel), 3)], 2)) : l("", !0)]),
+						onClick: be
+					}, x(h.clearLabel), 3)], 2)) : u("", !0)]),
 					_: 1
 				}, 8, ["class"])]),
 				_: 1
@@ -217,4 +258,4 @@ var H = [
 	}
 });
 //#endregion
-export { W as default };
+export { V as default };

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;