iryx-ui 0.15.0 → 0.17.0

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

@@ -0,0 +1,38 @@
+export interface DateFieldProps {
+    /** ISO `YYYY-MM-DD`, never a `Date`. See `composables/date.ts` for why. */
+    modelValue?: string | null;
+    /** Earliest and latest allowed, in the same ISO form. */
+    minValue?: string;
+    maxValue?: string;
+    /** Orders the segments and names the months — `en-GB` gives day first. */
+    locale?: string;
+    /** Refuse a date. Given an ISO `YYYY-MM-DD` string. */
+    isUnavailable?: (date: string) => boolean;
+    size?: 'sm' | 'md' | 'lg';
+    disabled?: boolean;
+    readonly?: boolean;
+    invalid?: boolean;
+    id?: string;
+    /** Submitted with a surrounding native form. */
+    name?: string;
+    required?: boolean;
+    /** Skip built-in classes; you take over styling entirely. */
+    unstyled?: boolean;
+    class?: string;
+    /** Override classes per slot, e.g. `{ segment: 'px-1' }`. */
+    ui?: {
+        root?: string;
+        segment?: string;
+        literal?: string;
+    };
+}
+declare const __VLS_export: import("vue").DefineComponent<DateFieldProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: string | null) => any;
+}, string, import("vue").PublicProps, Readonly<DateFieldProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: string | null) => any) | undefined;
+}>, {
+    unstyled: boolean;
+    invalid: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/components/DateField.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,94 @@
+import { useIryxUiConfig as e } from "../config.js";
+import { toCalendarDate as t, toIsoDate as n } from "../composables/date.js";
+import { useFormField as r } from "../composables/form.js";
+import { dateFieldTheme as i } from "../theme/date-field.js";
+import { Fragment as a, computed as o, createBlock as s, createElementBlock as c, createTextVNode as l, defineComponent as u, normalizeClass as d, openBlock as f, renderList as p, toDisplayString as m, unref as h, withCtx as g } from "vue";
+import { DateFieldInput as _, DateFieldRoot as v } from "reka-ui";
+//#region src/components/DateField.vue?vue&type=script&setup=true&lang.ts
+var y = /*@__PURE__*/ u({
+	__name: "DateField",
+	props: {
+		modelValue: {},
+		minValue: {},
+		maxValue: {},
+		locale: {},
+		isUnavailable: {},
+		size: {},
+		disabled: { type: Boolean },
+		readonly: { type: Boolean },
+		invalid: {
+			type: Boolean,
+			default: void 0
+		},
+		id: {},
+		name: {},
+		required: { type: Boolean },
+		unstyled: {
+			type: Boolean,
+			default: void 0
+		},
+		class: {},
+		ui: {}
+	},
+	emits: ["update:modelValue"],
+	setup(u, { emit: y }) {
+		let b = u, x = y, S = r(), C = o(() => b.id ?? S?.id.value), w = o(() => {
+			let e = b.modelValue;
+			return !e || !t(e) ? !1 : b.minValue && e < b.minValue || b.maxValue && e > b.maxValue ? !0 : b.isUnavailable?.(e) ?? !1;
+		}), T = o(() => (b.invalid ?? S?.invalid.value ?? !1) || w.value), E = e(), D = o(() => b.unstyled ?? E.unstyled), O = o(() => {
+			let e = b.isUnavailable;
+			if (e) return (t) => {
+				let r = n(t);
+				return r ? e(r) : !1;
+			};
+		}), k = o(() => i({
+			size: b.size,
+			invalid: T.value
+		})), A = o(() => D.value ? [b.ui?.root, b.class] : k.value.root({ class: [b.ui?.root, b.class] })), j = o(() => D.value ? b.ui?.segment : k.value.segment({ class: b.ui?.segment })), M = o(() => D.value ? b.ui?.literal : k.value.literal({ class: b.ui?.literal }));
+		return (e, r) => (f(), s(h(v), {
+			id: C.value,
+			"model-value": h(t)(b.modelValue),
+			"min-value": h(t)(b.minValue),
+			"max-value": h(t)(b.maxValue),
+			locale: b.locale,
+			"is-date-unavailable": O.value,
+			disabled: b.disabled,
+			readonly: b.readonly,
+			name: b.name,
+			required: b.required,
+			"aria-invalid": T.value || void 0,
+			"aria-describedby": h(S)?.describedBy.value,
+			class: d(A.value),
+			"onUpdate:modelValue": r[0] ||= (e) => x("update:modelValue", h(n)(e))
+		}, {
+			default: g(({ segments: e }) => [(f(!0), c(a, null, p(e, (e) => (f(), c(a, { key: e.part }, [e.part === "literal" ? (f(), c("span", {
+				key: 0,
+				class: d(M.value)
+			}, m(e.value), 3)) : (f(), s(h(_), {
+				key: 1,
+				part: e.part,
+				class: d(j.value)
+			}, {
+				default: g(() => [l(m(e.value), 1)]),
+				_: 2
+			}, 1032, ["part", "class"]))], 64))), 128))]),
+			_: 1
+		}, 8, [
+			"id",
+			"model-value",
+			"min-value",
+			"max-value",
+			"locale",
+			"is-date-unavailable",
+			"disabled",
+			"readonly",
+			"name",
+			"required",
+			"aria-invalid",
+			"aria-describedby",
+			"class"
+		]));
+	}
+});
+//#endregion
+export { y as default };

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

@@ -15,6 +15,11 @@ export interface DatePickerProps {
     format?: Intl.DateTimeFormatOptions;
     /** 0 is Sunday. Defaults to the locale's own convention. */
     weekStartsOn?: 0 | 1 | 2 | 3 | 4 | 5 | 6;
+    /**
+     * Refuse a date — a taken slot, a closed day. Given an ISO `YYYY-MM-DD`
+     * string. Unavailable days are struck through rather than hidden.
+     */
+    isUnavailable?: (date: string) => boolean;
     /** Offer a "clear" action in the footer. */
     clearable?: boolean;
     /** Footer and navigation labels — override for non-English apps. */
@@ -42,11 +47,11 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {},
 }>, {
     unstyled: boolean;
     placeholder: string;
+    previousLabel: string;
+    nextLabel: string;
     invalid: boolean;
     clearLabel: string;
     todayLabel: string;
-    previousLabel: string;
-    nextLabel: string;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/components/DatePicker.vue_vue_type_script_setup_true_lang.js

@@ -1,20 +1,21 @@
 import { useIryxUiConfig as e } from "../config.js";
 import t from "./Icon.js";
-import { useFormField as n } from "../composables/form.js";
-import { formatIsoDate as r, isoToday as i, toCalendarDate as a, toIsoDate as o } from "../composables/date.js";
-import { datePickerTheme as s } from "../theme/date-picker.js";
-import { Fragment as c, computed as l, createBlock as u, createCommentVNode as ee, createElementBlock as d, createElementVNode as f, createTextVNode as p, createVNode as m, defineComponent as h, mergeModels as g, normalizeClass as _, openBlock as v, ref as y, renderList as b, toDisplayString as x, unref as S, useModel as C, withCtx as w } from "vue";
-import { ArrowLeft01Icon as T, ArrowRight01Icon as te, Calendar03Icon as E } from "@hugeicons/core-free-icons";
-import { CalendarCell as D, CalendarCellTrigger as O, CalendarGrid as k, CalendarGridBody as A, CalendarGridHead as j, CalendarGridRow as M, CalendarHeadCell as N, CalendarHeader as P, CalendarHeading as F, CalendarNext as I, CalendarPrev as L, CalendarRoot as R, PopoverContent as z, PopoverPortal as B, PopoverRoot as ne, PopoverTrigger as V } from "reka-ui";
+import { formatIsoDate as n, isoToday as r } from "../composables/date.js";
+import i from "./Calendar.js";
+import { useFormField as a } from "../composables/form.js";
+import { datePickerTheme as o } from "../theme/date-picker.js";
+import { computed as s, createBlock as c, createCommentVNode as l, createElementBlock as u, createElementVNode as d, createVNode as f, defineComponent as p, mergeModels as m, normalizeClass as h, openBlock as g, ref as _, toDisplayString as v, unref as y, useModel as b, withCtx as x } from "vue";
+import { Calendar03Icon as S } from "@hugeicons/core-free-icons";
+import { PopoverContent as C, PopoverPortal as w, PopoverRoot as T, PopoverTrigger as E } from "reka-ui";
 //#region src/components/DatePicker.vue?vue&type=script&setup=true&lang.ts
-var H = [
+var D = [
 	"id",
 	"disabled",
 	"aria-invalid",
 	"aria-describedby"
-], U = { key: 0 }, W = /*@__PURE__*/ h({
+], O = { key: 0 }, k = /*@__PURE__*/ p({
 	__name: "DatePicker",
-	props: /*@__PURE__*/ g({
+	props: /*@__PURE__*/ m({
 		size: {},
 		placeholder: { default: "Pick a date" },
 		disabled: { type: Boolean },
@@ -28,6 +29,7 @@ var H = [
 		locale: {},
 		format: {},
 		weekStartsOn: {},
+		isUnavailable: {},
 		clearable: { type: Boolean },
 		todayLabel: { default: "Today" },
 		clearLabel: { default: "Clear" },
@@ -44,136 +46,83 @@ var H = [
 		modelModifiers: {}
 	}),
 	emits: ["update:modelValue"],
-	setup(h) {
-		let g = h, W = C(h, "modelValue"), G = y(!1), K = n(), q = l(() => g.id ?? K?.id.value), J = l(() => g.invalid ?? K?.invalid.value ?? !1), Y = e(), X = l(() => g.unstyled ?? Y.unstyled), Z = l({
-			get: () => a(W.value),
-			set: (e) => {
-				W.value = o(e);
-			}
-		}), re = l(() => a(g.min)), ie = l(() => a(g.max)), Q = l(() => r(W.value, g.locale, g.format));
-		function ae() {
-			W.value = i(), G.value = !1;
+	setup(p) {
+		let m = p, k = b(p, "modelValue"), A = _(!1), j = a(), M = s(() => m.id ?? j?.id.value), N = s(() => m.invalid ?? j?.invalid.value ?? !1), P = e(), F = s(() => m.unstyled ?? P.unstyled), I = s(() => n(k.value, m.locale, m.format));
+		function L() {
+			k.value = r(), A.value = !1;
 		}
-		function oe() {
-			W.value = null, G.value = !1;
+		function R() {
+			k.value = null, A.value = !1;
 		}
-		let se = l(() => s({
-			size: g.size,
-			invalid: J.value
+		let z = s(() => o({
+			size: m.size,
+			invalid: N.value
 		}));
-		function $(e, t) {
-			let n = g.ui?.[e];
-			return X.value ? [n, t] : se.value[e]({ class: [n, t] });
+		function B(e, t) {
+			let n = m.ui?.[e];
+			return F.value ? [n, t] : z.value[e]({ class: [n, t] });
 		}
-		return (e, n) => (v(), u(S(ne), {
-			open: G.value,
-			"onUpdate:open": n[2] ||= (e) => G.value = e
+		let V = s(() => {
+			let { trigger: e, placeholder: t, content: n, footer: r, action: i, ...a } = m.ui ?? {};
+			return a;
+		});
+		return (e, n) => (g(), c(y(T), {
+			open: A.value,
+			"onUpdate:open": n[2] ||= (e) => A.value = e
 		}, {
-			default: w(() => [m(S(V), { "as-child": "" }, {
-				default: w(() => [f("button", {
-					id: q.value,
+			default: x(() => [f(y(E), { "as-child": "" }, {
+				default: x(() => [d("button", {
+					id: M.value,
 					type: "button",
-					disabled: g.disabled,
-					"aria-invalid": J.value || void 0,
-					"aria-describedby": S(K)?.describedBy.value,
-					class: _($("trigger", g.class))
-				}, [Q.value ? (v(), d("span", U, x(Q.value), 1)) : (v(), d("span", {
+					disabled: m.disabled,
+					"aria-invalid": N.value || void 0,
+					"aria-describedby": y(j)?.describedBy.value,
+					class: h(B("trigger", m.class))
+				}, [I.value ? (g(), u("span", O, v(I.value), 1)) : (g(), u("span", {
 					key: 1,
-					class: _($("placeholder"))
-				}, x(g.placeholder), 3)), m(t, { icon: S(E) }, null, 8, ["icon"])], 10, H)]),
+					class: h(B("placeholder"))
+				}, v(m.placeholder), 3)), f(t, { icon: y(S) }, null, 8, ["icon"])], 10, D)]),
 				_: 1
-			}), m(S(B), null, {
-				default: w(() => [m(S(z), {
-					class: _($("content")),
+			}), f(y(w), null, {
+				default: x(() => [f(y(C), {
+					class: h(B("content")),
 					"side-offset": 4,
 					align: "start"
 				}, {
-					default: w(() => [m(S(R), {
-						modelValue: Z.value,
-						"onUpdate:modelValue": [n[0] ||= (e) => Z.value = e, n[1] ||= (e) => G.value = !1],
-						"min-value": re.value,
-						"max-value": ie.value,
-						locale: g.locale,
-						"week-starts-on": g.weekStartsOn,
-						"fixed-weeks": "",
-						"initial-focus": ""
-					}, {
-						default: w(({ grid: e, weekDays: n }) => [m(S(P), { class: _($("header")) }, {
-							default: w(() => [
-								m(S(L), {
-									"aria-label": g.previousLabel,
-									class: _($("nav"))
-								}, {
-									default: w(() => [m(t, { icon: S(T) }, null, 8, ["icon"])]),
-									_: 1
-								}, 8, ["aria-label", "class"]),
-								m(S(F), { class: _($("heading")) }, null, 8, ["class"]),
-								m(S(I), {
-									"aria-label": g.nextLabel,
-									class: _($("nav"))
-								}, {
-									default: w(() => [m(t, { icon: S(te) }, null, 8, ["icon"])]),
-									_: 1
-								}, 8, ["aria-label", "class"])
-							]),
-							_: 1
-						}, 8, ["class"]), f("div", { class: _($("months")) }, [(v(!0), d(c, null, b(e, (e) => (v(), u(S(k), {
-							key: e.value.toString(),
-							class: _($("grid"))
-						}, {
-							default: w(() => [m(S(j), null, {
-								default: w(() => [m(S(M), null, {
-									default: w(() => [(v(!0), d(c, null, b(n, (e) => (v(), u(S(N), {
-										key: e,
-										class: _($("headCell"))
-									}, {
-										default: w(() => [p(x(e), 1)]),
-										_: 2
-									}, 1032, ["class"]))), 128))]),
-									_: 2
-								}, 1024)]),
-								_: 2
-							}, 1024), m(S(A), null, {
-								default: w(() => [(v(!0), d(c, null, b(e.rows, (t, n) => (v(), u(S(M), { key: `week-${n}` }, {
-									default: w(() => [(v(!0), d(c, null, b(t, (t) => (v(), u(S(D), {
-										key: t.toString(),
-										date: t,
-										class: _($("cell"))
-									}, {
-										default: w(() => [m(S(O), {
-											day: t,
-											month: e.value,
-											class: _($("cellTrigger"))
-										}, null, 8, [
-											"day",
-											"month",
-											"class"
-										])]),
-										_: 2
-									}, 1032, ["date", "class"]))), 128))]),
-									_: 2
-								}, 1024))), 128))]),
-								_: 2
-							}, 1024)]),
-							_: 2
-						}, 1032, ["class"]))), 128))], 2)]),
-						_: 1
-					}, 8, [
+					default: x(() => [f(i, {
+						modelValue: k.value,
+						"onUpdate:modelValue": [n[0] ||= (e) => k.value = e, n[1] ||= (e) => A.value = !1],
+						min: m.min,
+						max: m.max,
+						locale: m.locale,
+						"week-starts-on": m.weekStartsOn,
+						"is-unavailable": m.isUnavailable,
+						"previous-label": m.previousLabel,
+						"next-label": m.nextLabel,
+						"initial-focus": "",
+						unstyled: m.unstyled,
+						ui: V.value
+					}, null, 8, [
 						"modelValue",
-						"min-value",
-						"max-value",
+						"min",
+						"max",
 						"locale",
-						"week-starts-on"
-					]), f("div", { class: _($("footer")) }, [f("button", {
+						"week-starts-on",
+						"is-unavailable",
+						"previous-label",
+						"next-label",
+						"unstyled",
+						"ui"
+					]), d("div", { class: h(B("footer")) }, [d("button", {
 						type: "button",
-						class: _($("action")),
-						onClick: ae
-					}, x(g.todayLabel), 3), g.clearable ? (v(), d("button", {
+						class: h(B("action")),
+						onClick: L
+					}, v(m.todayLabel), 3), m.clearable ? (g(), u("button", {
 						key: 0,
 						type: "button",
-						class: _($("action")),
-						onClick: oe
-					}, x(g.clearLabel), 3)) : ee("", !0)], 2)]),
+						class: h(B("action")),
+						onClick: R
+					}, v(m.clearLabel), 3)) : l("", !0)], 2)]),
 					_: 1
 				}, 8, ["class"])]),
 				_: 1
@@ -183,4 +132,4 @@ var H = [
 	}
 });
 //#endregion
-export { W as default };
+export { k as default };

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

@@ -50,11 +50,11 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {},
     unstyled: boolean;
     placeholder: string;
     separator: string;
-    invalid: boolean;
-    clearLabel: string;
     months: number;
     previousLabel: string;
     nextLabel: string;
+    invalid: boolean;
+    clearLabel: string;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;