iryx-ui 0.25.0 → 0.26.0

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

@@ -22,6 +22,7 @@ export interface TabsProps {
     /** Override classes per element, e.g. `{ list: 'w-full' }`. */
     ui?: {
         root?: string;
+        frame?: string;
         list?: string;
         indicator?: string;
         trigger?: string;
@@ -33,19 +34,19 @@ type __VLS_ModelProps = {
     modelValue?: string | undefined;
 };
 type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
-declare var __VLS_19: {}, __VLS_27: {
+declare var __VLS_21: {}, __VLS_29: {
     item: TabsItem;
-}, __VLS_34: {}, __VLS_43: string, __VLS_44: {
+}, __VLS_36: {}, __VLS_45: string, __VLS_46: {
     item: TabsItem;
 };
 type __VLS_Slots = {} & {
-    [K in NonNullable<typeof __VLS_43>]?: (props: typeof __VLS_44) => any;
+    [K in NonNullable<typeof __VLS_45>]?: (props: typeof __VLS_46) => any;
 } & {
-    list?: (props: typeof __VLS_19) => any;
+    list?: (props: typeof __VLS_21) => any;
 } & {
-    trigger?: (props: typeof __VLS_27) => any;
+    trigger?: (props: typeof __VLS_29) => any;
 } & {
-    default?: (props: typeof __VLS_34) => any;
+    default?: (props: typeof __VLS_36) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:modelValue": (value: string | undefined) => any;

package/dist/components/Tabs.vue_vue_type_script_setup_true_lang.js

@@ -1,12 +1,13 @@
 import { useIryxUiConfig as e } from "../config.js";
 import t from "./Icon.js";
-import { tabsTheme as n } from "../theme/tabs.js";
-import { Fragment as r, computed as i, createBlock as a, createCommentVNode as o, createElementBlock as s, createTextVNode as c, createVNode as l, defineComponent as u, mergeModels as d, normalizeClass as f, openBlock as p, renderList as m, renderSlot as h, toDisplayString as g, unref as _, useModel as v, withCtx as y } from "vue";
-import { TabsContent as b, TabsIndicator as x, TabsList as S, TabsRoot as C, TabsTrigger as w } from "reka-ui";
+import { scrollFadeMask as n, useScrollEdges as r } from "../composables/scroll-fade.js";
+import { tabsTheme as i } from "../theme/tabs.js";
+import { Fragment as a, computed as o, createBlock as s, createCommentVNode as c, createElementBlock as l, createElementVNode as u, createTextVNode as d, createVNode as f, defineComponent as p, mergeModels as m, nextTick as h, normalizeClass as g, normalizeStyle as _, onMounted as v, openBlock as y, ref as b, renderList as x, renderSlot as S, toDisplayString as C, unref as w, useModel as T, watch as E, withCtx as D } from "vue";
+import { TabsContent as O, TabsIndicator as k, TabsList as A, TabsRoot as j, TabsTrigger as M } from "reka-ui";
 //#region src/components/Tabs.vue?vue&type=script&setup=true&lang.ts
-var T = /*@__PURE__*/ u({
+var N = 24, P = /*@__PURE__*/ p({
 	__name: "Tabs",
-	props: /*@__PURE__*/ d({
+	props: /*@__PURE__*/ m({
 		items: {},
 		variant: {},
 		orientation: {},
@@ -27,29 +28,57 @@ var T = /*@__PURE__*/ u({
 		modelModifiers: {}
 	}),
 	emits: ["update:modelValue"],
-	setup(u) {
-		let d = u, T = i(() => (d.items ?? []).map((e) => typeof e == "string" ? { label: e } : e)), E = (e) => e.value ?? e.label, D = v(u, "modelValue"), O = e(), k = i(() => d.unstyled ?? O.unstyled), A = i(() => n({
-			variant: d.variant,
-			orientation: d.orientation
-		})), j = i(() => k.value ? [d.ui?.root, d.class] : A.value.root({ class: [d.ui?.root, d.class] })), M = i(() => k.value ? d.ui?.list : A.value.list({ class: d.ui?.list })), N = i(() => k.value ? d.ui?.indicator : A.value.indicator({ class: d.ui?.indicator })), P = i(() => k.value ? d.ui?.trigger : A.value.trigger({ class: d.ui?.trigger })), F = i(() => k.value ? d.ui?.content : A.value.content({ class: d.ui?.content }));
-		return (e, n) => (p(), a(_(C), {
-			modelValue: D.value,
-			"onUpdate:modelValue": n[0] ||= (e) => D.value = e,
-			"default-value": T.value[0] ? E(T.value[0]) : void 0,
-			orientation: d.orientation,
-			class: f(j.value)
+	setup(p) {
+		let m = p, P = o(() => (m.items ?? []).map((e) => typeof e == "string" ? { label: e } : e)), F = (e) => e.value ?? e.label, I = T(p, "modelValue"), L = b(), R = o(() => L.value?.$el), z = o(() => m.orientation === "vertical" ? "vertical" : "horizontal"), { atStart: B, atEnd: V, overflowing: H } = r(R, z), U = o(() => {
+			if (!H.value) return;
+			let e = n({
+				orientation: z.value,
+				size: `${N}px`,
+				fadeStart: !B.value,
+				fadeEnd: !V.value
+			});
+			return e ? {
+				maskImage: e,
+				WebkitMaskImage: e
+			} : void 0;
+		});
+		function W() {
+			let e = R.value, t = e?.querySelector("[role=\"tab\"][data-state=\"active\"]");
+			if (!e || !t) return;
+			let n = z.value === "vertical", r = n ? t.offsetTop : t.offsetLeft, i = r + (n ? t.offsetHeight : t.offsetWidth), a = n ? e.scrollTop : e.scrollLeft, o = n ? e.clientHeight : e.clientWidth, s = a;
+			r < a + N ? s = r - N : i > a + o - N && (s = i - o + N), s !== a && (n ? e.scrollTop = Math.max(0, s) : e.scrollLeft = Math.max(0, s));
+		}
+		v(() => void h(W)), E(I, () => void h(W));
+		let G = e(), K = o(() => m.unstyled ?? G.unstyled), q = o(() => i({
+			variant: m.variant,
+			orientation: m.orientation
+		})), J = o(() => K.value ? [m.ui?.root, m.class] : q.value.root({ class: [m.ui?.root, m.class] })), Y = o(() => K.value ? m.ui?.frame : q.value.frame({ class: m.ui?.frame })), X = o(() => K.value ? m.ui?.list : q.value.list({ class: m.ui?.list })), Z = o(() => K.value ? m.ui?.indicator : q.value.indicator({ class: m.ui?.indicator })), Q = o(() => K.value ? m.ui?.trigger : q.value.trigger({ class: m.ui?.trigger })), $ = o(() => K.value ? m.ui?.content : q.value.content({ class: m.ui?.content }));
+		return (e, n) => (y(), s(w(j), {
+			modelValue: I.value,
+			"onUpdate:modelValue": n[0] ||= (e) => I.value = e,
+			"default-value": P.value[0] ? F(P.value[0]) : void 0,
+			orientation: m.orientation,
+			class: g(J.value)
 		}, {
-			default: y(() => [l(_(S), { class: f(M.value) }, {
-				default: y(() => [l(_(x), { class: f(N.value) }, null, 8, ["class"]), h(e.$slots, "list", {}, () => [(p(!0), s(r, null, m(T.value, (n) => (p(), a(_(w), {
-					key: E(n),
-					value: E(n),
+			default: D(() => [u("div", { class: g(Y.value) }, [f(w(A), {
+				ref_key: "list",
+				ref: L,
+				class: g(X.value),
+				style: _(U.value),
+				"data-overflowing": w(H) ? "" : void 0,
+				"data-at-start": w(B) ? "" : void 0,
+				"data-at-end": w(V) ? "" : void 0
+			}, {
+				default: D(() => [f(w(k), { class: g(Z.value) }, null, 8, ["class"]), S(e.$slots, "list", {}, () => [(y(!0), l(a, null, x(P.value, (n) => (y(), s(w(M), {
+					key: F(n),
+					value: F(n),
 					disabled: n.disabled,
-					class: f(P.value)
+					class: g(Q.value)
 				}, {
-					default: y(() => [h(e.$slots, "trigger", { item: n }, () => [n.icon ? (p(), a(t, {
+					default: D(() => [S(e.$slots, "trigger", { item: n }, () => [n.icon ? (y(), s(t, {
 						key: 0,
 						icon: n.icon
-					}, null, 8, ["icon"])) : o("", !0), c(" " + g(n.label), 1)])]),
+					}, null, 8, ["icon"])) : c("", !0), d(" " + C(n.label), 1)])]),
 					_: 2
 				}, 1032, [
 					"value",
@@ -57,13 +86,19 @@ var T = /*@__PURE__*/ u({
 					"class"
 				]))), 128))])]),
 				_: 3
-			}, 8, ["class"]), h(e.$slots, "default", {}, () => [(p(!0), s(r, null, m(T.value, (t) => (p(), a(_(b), {
-				key: E(t),
-				value: E(t),
-				"force-mount": d.keepMounted || void 0,
-				class: f(F.value)
+			}, 8, [
+				"class",
+				"style",
+				"data-overflowing",
+				"data-at-start",
+				"data-at-end"
+			])], 2), S(e.$slots, "default", {}, () => [(y(!0), l(a, null, x(P.value, (t) => (y(), s(w(O), {
+				key: F(t),
+				value: F(t),
+				"force-mount": m.keepMounted || void 0,
+				class: g($.value)
 			}, {
-				default: y(() => [h(e.$slots, E(t), { item: t })]),
+				default: D(() => [S(e.$slots, F(t), { item: t })]),
 				_: 2
 			}, 1032, [
 				"value",
@@ -80,4 +115,4 @@ var T = /*@__PURE__*/ u({
 	}
 });
 //#endregion
-export { T as default };
+export { P as default };

package/dist/composables/command-palette.d.ts

@@ -2,6 +2,11 @@ import type { IconLike } from './icon';
 export interface CommandItem {
     /** What the reader searches for and reads. */
     label: string;
+    /**
+     * Stable identity for the recent list. Falls back to the group and label,
+     * so set it when a label can change (a translated app, a renamed page).
+     */
+    id?: string;
     icon?: IconLike;
     /**
      * Displayed at the trailing edge, split on spaces into separate keys.
@@ -27,6 +32,8 @@ export type CommandEntry = CommandItem | CommandGroup;
 export declare function isCommandGroup(entry: CommandEntry): entry is CommandGroup;
 /** Normalise to groups, so the template has a single path to render. */
 export declare function toCommandGroups(entries: CommandEntry[] | undefined): CommandGroup[];
+export declare function commandId(item: CommandItem, group: string): string;
+export declare function pushRecent(recent: string[], id: string, limit: number): string[];
 /**
  * Everything a query should match against: the label, the group it sits in,
  * and any keywords. Joined rather than tested separately so a query spanning

package/dist/composables/command-palette.js

@@ -18,15 +18,21 @@ function n(e) {
 	return n;
 }
 function r(e, t) {
+	return e.id ?? `${t}/${e.label}`;
+}
+function i(e, t, n) {
+	return [t, ...e.filter((e) => e !== t)].slice(0, Math.max(0, n));
+}
+function a(e, t) {
 	return [
 		e.label,
 		t,
 		...e.keywords ?? []
 	].join(" ");
 }
-function i(t, n) {
+function o(t, n) {
 	let r = n.toLowerCase().split("+").map((e) => e.trim()), i = r.at(-1) ?? "", a = r.includes("mod"), o = r.includes("ctrl") || r.includes("control"), s = r.includes("meta") || r.includes("cmd"), c = r.includes("shift"), l = r.includes("alt") || r.includes("option"), u = e() ? t.metaKey : t.ctrlKey;
 	return a && !u || o && !t.ctrlKey || s && !t.metaKey || c !== t.shiftKey || l !== t.altKey ? !1 : t.key.toLowerCase() === i;
 }
 //#endregion
-export { r as commandHaystack, t as isCommandGroup, i as matchesHotkey, n as toCommandGroups };
+export { a as commandHaystack, r as commandId, t as isCommandGroup, o as matchesHotkey, i as pushRecent, n as toCommandGroups };

package/dist/composables/date.d.ts

@@ -12,6 +12,31 @@ export declare function toCalendarDate(iso: string | null | undefined): Calendar
 export declare function toIsoDate(date: DateValue | null | undefined): string | null;
 /** Today in the viewer's own zone, as an ISO date string. */
 export declare function isoToday(): string;
+/** One shortcut in `IDateRangePicker`'s preset list. */
+export interface DateRangePreset {
+    label: string;
+    /** A function is re-run each time the picker opens, so "Today" stays today. */
+    range: {
+        start: string | null;
+        end: string | null;
+    } | (() => {
+        start: string | null;
+        end: string | null;
+    });
+}
+export interface CommonDateRangePresetLabels {
+    today: string;
+    yesterday: string;
+    last7Days: string;
+    last30Days: string;
+    thisMonth: string;
+    lastMonth: string;
+}
+/**
+ * The usual dashboard shortcuts, relative to today in the viewer's zone.
+ * Pass `labels` to translate them.
+ */
+export declare function commonDateRangePresets(labels?: Partial<CommonDateRangePresetLabels>): DateRangePreset[];
 /**
  * Render an ISO date for display. Returns `''` for absent or malformed input
  * so a caller can fall back to a placeholder.

package/dist/composables/date.js

@@ -1,33 +1,76 @@
-import { CalendarDate as e, DateFormatter as t, Time as n, getLocalTimeZone as r, parseDate as i, today as a } from "@internationalized/date";
+import { CalendarDate as e, DateFormatter as t, Time as n, endOfMonth as r, getLocalTimeZone as i, parseDate as a, startOfMonth as o, today as s } from "@internationalized/date";
 //#region src/composables/date.ts
-var o = /^\d{4}-\d{2}-\d{2}$/;
-function s(e) {
-	if (!(!e || !o.test(e))) try {
-		return i(e);
+var c = /^\d{4}-\d{2}-\d{2}$/;
+function l(e) {
+	if (!(!e || !c.test(e))) try {
+		return a(e);
 	} catch {
 		return;
 	}
 }
-function c(e) {
+function u(e) {
 	return e ? `${e.year.toString().padStart(4, "0")}-${e.month.toString().padStart(2, "0")}-${e.day.toString().padStart(2, "0")}` : null;
 }
-function l() {
-	return c(a(r()));
+function d() {
+	return u(s(i()));
 }
-function u(e, n, i = { dateStyle: "medium" }) {
-	let a = s(e);
-	return a ? new t(n ?? "en-US", i).format(a.toDate(r())) : "";
+function f(e = {}) {
+	let t = {
+		today: "Today",
+		yesterday: "Yesterday",
+		last7Days: "Last 7 days",
+		last30Days: "Last 30 days",
+		thisMonth: "This month",
+		lastMonth: "Last month",
+		...e
+	}, n = () => s(i()), a = (e, t) => ({
+		start: u(e),
+		end: u(t)
+	});
+	return [
+		{
+			label: t.today,
+			range: () => a(n(), n())
+		},
+		{
+			label: t.yesterday,
+			range: () => a(n().subtract({ days: 1 }), n().subtract({ days: 1 }))
+		},
+		{
+			label: t.last7Days,
+			range: () => a(n().subtract({ days: 6 }), n())
+		},
+		{
+			label: t.last30Days,
+			range: () => a(n().subtract({ days: 29 }), n())
+		},
+		{
+			label: t.thisMonth,
+			range: () => a(o(n()), r(n()))
+		},
+		{
+			label: t.lastMonth,
+			range: () => {
+				let e = o(n()).subtract({ months: 1 });
+				return a(e, r(e));
+			}
+		}
+	];
 }
-var d = /^(?:[01]\d|2[0-3]):[0-5]\d(?::[0-5]\d)?$/;
-function f(e) {
-	if (!e || !d.test(e)) return;
+function p(e, n, r = { dateStyle: "medium" }) {
+	let a = l(e);
+	return a ? new t(n ?? "en-US", r).format(a.toDate(i())) : "";
+}
+var m = /^(?:[01]\d|2[0-3]):[0-5]\d(?::[0-5]\d)?$/;
+function h(e) {
+	if (!e || !m.test(e)) return;
 	let [t, r, i] = e.split(":").map(Number);
 	return new n(t, r, i ?? 0);
 }
-function p(e) {
+function g(e) {
 	if (!e) return null;
 	let t = (e) => String(e).padStart(2, "0"), n = `${t(e.hour)}:${t(e.minute)}`;
 	return e.second ? `${n}:${t(e.second)}` : n;
 }
 //#endregion
-export { e as CalendarDate, n as Time, u as formatIsoDate, l as isoToday, s as toCalendarDate, c as toIsoDate, p as toIsoTime, f as toTime };
+export { e as CalendarDate, n as Time, f as commonDateRangePresets, p as formatIsoDate, d as isoToday, l as toCalendarDate, u as toIsoDate, g as toIsoTime, h as toTime };

package/dist/composables/scroll-fade.d.ts

@@ -15,7 +15,7 @@ export interface ScrollEdges {
  * panel that fits on a desktop overflows on a phone. A fade painted on a
  * container that does not actually scroll is a lie about what is there.
  */
-export declare function useScrollEdges(target: Ref<HTMLElement | undefined>, axis: Ref<'vertical' | 'horizontal'>): ScrollEdges;
+export declare function useScrollEdges(target: Readonly<Ref<HTMLElement | undefined>>, axis: Readonly<Ref<'vertical' | 'horizontal'>>): ScrollEdges;
 /**
  * The mask that fades the edges with something past them.
  *