iryx-ui 0.5.0 → 0.7.0

package/dist/packages/iryx-ui/src/components/DatePicker.vue_vue_type_script_setup_true_lang.js

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

package/dist/packages/iryx-ui/src/components/DateRangePicker.js

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

package/dist/packages/iryx-ui/src/components/DateRangePicker.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,210 @@
+import { ArrowLeft01Icon as e, ArrowRight01Icon as t, Calendar03Icon as n } from "../../../../node_modules/.pnpm/@hugeicons_core-free-icons@4.2.3/node_modules/@hugeicons/core-free-icons/dist/esm/index.js";
+import { useIryxUiConfig as r } from "../config.js";
+import i from "./Icon.js";
+import { useFormField as a } from "../composables/form.js";
+import { formatIsoDate as o, toCalendarDate as s, toIsoDate as c } from "../composables/date.js";
+import { datePickerTheme as ee } from "../theme/date-picker.js";
+import { Fragment as l, computed as u, createBlock as d, createCommentVNode as te, createElementBlock as f, createElementVNode as p, createTextVNode as m, createVNode as h, defineComponent as g, mergeModels as _, normalizeClass as v, openBlock as y, ref as b, renderList as x, shallowRef as S, toDisplayString as C, unref as w, useModel as ne, watch as T, withCtx as E } from "vue";
+import { PopoverContent as D, PopoverPortal as O, PopoverRoot as k, PopoverTrigger as A, RangeCalendarCell as re, RangeCalendarCellTrigger as j, RangeCalendarGrid as M, RangeCalendarGridBody as N, RangeCalendarGridHead as P, RangeCalendarGridRow as F, RangeCalendarHeadCell as I, RangeCalendarHeader as L, RangeCalendarHeading as R, RangeCalendarNext as z, RangeCalendarPrev as B, RangeCalendarRoot as V } from "reka-ui";
+//#region src/components/DateRangePicker.vue?vue&type=script&setup=true&lang.ts
+var H = [
+	"id",
+	"disabled",
+	"aria-invalid",
+	"aria-describedby"
+], U = { key: 0 }, W = /*@__PURE__*/ g({
+	__name: "DateRangePicker",
+	props: /*@__PURE__*/ _({
+		size: {},
+		placeholder: { default: "Pick a date range" },
+		disabled: { type: Boolean },
+		invalid: {
+			type: Boolean,
+			default: void 0
+		},
+		id: {},
+		min: {},
+		max: {},
+		locale: {},
+		format: {},
+		weekStartsOn: {},
+		months: { default: 2 },
+		clearable: { type: Boolean },
+		separator: { default: " – " },
+		clearLabel: { default: "Clear" },
+		previousLabel: { default: "Previous month" },
+		nextLabel: { default: "Next month" },
+		unstyled: {
+			type: Boolean,
+			default: void 0
+		},
+		class: {},
+		ui: {}
+	}, {
+		modelValue: { default: () => ({
+			start: null,
+			end: null
+		}) },
+		modelModifiers: {}
+	}),
+	emits: ["update:modelValue"],
+	setup(g) {
+		let _ = g, W = ne(g, "modelValue"), G = b(!1), K = a(), q = u(() => _.id ?? K?.id.value), J = u(() => _.invalid ?? K?.invalid.value ?? !1), Y = r(), ie = u(() => _.unstyled ?? Y.unstyled), X = S({
+			start: s(W.value?.start),
+			end: s(W.value?.end)
+		});
+		function Z(e) {
+			return c(e.start) === (W.value?.start ?? null) && c(e.end) === (W.value?.end ?? null);
+		}
+		T(W, () => {
+			Z(X.value) || (X.value = {
+				start: s(W.value?.start),
+				end: s(W.value?.end)
+			});
+		}, { deep: !0 }), T(X, (e) => {
+			Z(e) || (W.value = {
+				start: c(e.start),
+				end: c(e.end)
+			});
+		});
+		let ae = u(() => s(_.min)), oe = u(() => s(_.max)), Q = u(() => {
+			let e = o(W.value?.start, _.locale, _.format), t = o(W.value?.end, _.locale, _.format);
+			return !e && !t ? "" : t ? `${e}${_.separator}${t}` : e;
+		});
+		T(W, (e) => {
+			G.value && e?.start && e?.end && (G.value = !1);
+		}, { deep: !0 });
+		function se() {
+			W.value = {
+				start: null,
+				end: null
+			}, G.value = !1;
+		}
+		let ce = u(() => ee({
+			size: _.size,
+			invalid: J.value,
+			range: !0
+		}));
+		function $(e, t) {
+			let n = _.ui?.[e];
+			return ie.value ? [n, t] : ce.value[e]({ class: [n, t] });
+		}
+		return (r, a) => (y(), d(w(k), {
+			open: G.value,
+			"onUpdate:open": a[1] ||= (e) => G.value = e
+		}, {
+			default: E(() => [h(w(A), { "as-child": "" }, {
+				default: E(() => [p("button", {
+					id: q.value,
+					type: "button",
+					disabled: _.disabled,
+					"aria-invalid": J.value || void 0,
+					"aria-describedby": w(K)?.describedBy.value,
+					class: v($("trigger", _.class))
+				}, [Q.value ? (y(), f("span", U, C(Q.value), 1)) : (y(), f("span", {
+					key: 1,
+					class: v($("placeholder"))
+				}, C(_.placeholder), 3)), h(i, { icon: w(n) }, null, 8, ["icon"])], 10, H)]),
+				_: 1
+			}), h(w(O), null, {
+				default: E(() => [h(w(D), {
+					class: v($("content")),
+					"side-offset": 4,
+					align: "start"
+				}, {
+					default: E(() => [h(w(V), {
+						modelValue: X.value,
+						"onUpdate:modelValue": a[0] ||= (e) => X.value = e,
+						"min-value": ae.value,
+						"max-value": oe.value,
+						locale: _.locale,
+						"week-starts-on": _.weekStartsOn,
+						"number-of-months": _.months,
+						"fixed-weeks": "",
+						"initial-focus": ""
+					}, {
+						default: E(({ grid: n, weekDays: r }) => [h(w(L), { class: v($("header")) }, {
+							default: E(() => [
+								h(w(B), {
+									"aria-label": _.previousLabel,
+									class: v($("nav"))
+								}, {
+									default: E(() => [h(i, { icon: w(e) }, null, 8, ["icon"])]),
+									_: 1
+								}, 8, ["aria-label", "class"]),
+								h(w(R), { class: v($("heading")) }, null, 8, ["class"]),
+								h(w(z), {
+									"aria-label": _.nextLabel,
+									class: v($("nav"))
+								}, {
+									default: E(() => [h(i, { icon: w(t) }, null, 8, ["icon"])]),
+									_: 1
+								}, 8, ["aria-label", "class"])
+							]),
+							_: 1
+						}, 8, ["class"]), p("div", { class: v($("months")) }, [(y(!0), f(l, null, x(n, (e) => (y(), d(w(M), {
+							key: e.value.toString(),
+							class: v($("grid"))
+						}, {
+							default: E(() => [h(w(P), null, {
+								default: E(() => [h(w(F), null, {
+									default: E(() => [(y(!0), f(l, null, x(r, (e) => (y(), d(w(I), {
+										key: e,
+										class: v($("headCell"))
+									}, {
+										default: E(() => [m(C(e), 1)]),
+										_: 2
+									}, 1032, ["class"]))), 128))]),
+									_: 2
+								}, 1024)]),
+								_: 2
+							}, 1024), h(w(N), null, {
+								default: E(() => [(y(!0), f(l, null, x(e.rows, (t, n) => (y(), d(w(F), { key: `week-${n}` }, {
+									default: E(() => [(y(!0), f(l, null, x(t, (t) => (y(), d(w(re), {
+										key: t.toString(),
+										date: t,
+										class: v($("cell"))
+									}, {
+										default: E(() => [h(w(j), {
+											day: t,
+											month: e.value,
+											class: v($("cellTrigger"))
+										}, null, 8, [
+											"day",
+											"month",
+											"class"
+										])]),
+										_: 2
+									}, 1032, ["date", "class"]))), 128))]),
+									_: 2
+								}, 1024))), 128))]),
+								_: 2
+							}, 1024)]),
+							_: 2
+						}, 1032, ["class"]))), 128))], 2)]),
+						_: 1
+					}, 8, [
+						"modelValue",
+						"min-value",
+						"max-value",
+						"locale",
+						"week-starts-on",
+						"number-of-months"
+					]), _.clearable ? (y(), f("div", {
+						key: 0,
+						class: v($("footer"))
+					}, [p("button", {
+						type: "button",
+						class: v($("action")),
+						onClick: se
+					}, C(_.clearLabel), 3)], 2)) : te("", !0)]),
+					_: 1
+				}, 8, ["class"])]),
+				_: 1
+			})]),
+			_: 1
+		}, 8, ["open"]));
+	}
+});
+//#endregion
+export { W as default };

package/dist/packages/iryx-ui/src/components/Input.vue_vue_type_script_setup_true_lang.js

@@ -1,19 +1,23 @@
-import { useIryxUiConfig as e } from "../config.js";
-import { useFormField as t } from "../composables/form.js";
-import { inputTheme as n } from "../theme/input.js";
-import { computed as r, createElementBlock as i, defineComponent as a, mergeModels as o, normalizeClass as s, openBlock as c, unref as l, useModel as u, vModelDynamic as d, withDirectives as f } from "vue";
+import { Cancel01Icon as e, Loading03Icon as t } from "../../../../node_modules/.pnpm/@hugeicons_core-free-icons@4.2.3/node_modules/@hugeicons/core-free-icons/dist/esm/index.js";
+import { useIryxUiConfig as n } from "../config.js";
+import r from "./Icon.js";
+import { useFormField as i } from "../composables/form.js";
+import { inputTheme as a } from "../theme/input.js";
+import { computed as o, createBlock as s, createCommentVNode as c, createElementBlock as l, createElementVNode as u, createVNode as d, defineComponent as f, mergeModels as p, mergeProps as m, normalizeClass as h, onBeforeUnmount as g, openBlock as _, ref as v, renderSlot as y, unref as b, useModel as x, useSlots as S, watch as C, withKeys as w } from "vue";
 //#region src/components/Input.vue?vue&type=script&setup=true&lang.ts
-var p = [
+var T = [
 	"id",
+	"value",
 	"type",
 	"placeholder",
 	"disabled",
 	"required",
 	"aria-invalid",
 	"aria-describedby"
-], m = /*@__PURE__*/ a({
+], E = ["aria-label"], D = /*@__PURE__*/ f({
+	inheritAttrs: !1,
 	__name: "Input",
-	props: /*@__PURE__*/ o({
+	props: /*@__PURE__*/ p({
 		type: { default: "text" },
 		size: {},
 		placeholder: {},
@@ -24,34 +28,99 @@ var p = [
 			default: void 0
 		},
 		id: {},
+		clearable: { type: Boolean },
+		loading: { type: Boolean },
+		debounce: { default: 0 },
+		clearLabel: { default: "Clear" },
 		unstyled: {
 			type: Boolean,
 			default: void 0
 		},
-		class: {}
+		class: {},
+		ui: {}
 	}, {
 		modelValue: {},
 		modelModifiers: {}
 	}),
 	emits: ["update:modelValue"],
-	setup(a) {
-		let o = a, m = u(a, "modelValue"), h = t(), g = r(() => o.id ?? h?.id.value), _ = r(() => o.invalid ?? h?.invalid.value ?? !1), v = e(), y = r(() => o.unstyled ?? v.unstyled), b = r(() => y.value ? o.class : n({
-			size: o.size,
-			invalid: _.value,
-			class: o.class
+	setup(f, { expose: p }) {
+		let D = f, O = x(f, "modelValue"), k = S(), A = i(), j = o(() => D.id ?? A?.id.value), M = o(() => D.invalid ?? A?.invalid.value ?? !1), N = n(), P = o(() => D.unstyled ?? N.unstyled), F = v(O.value), I;
+		function L() {
+			I !== void 0 && (clearTimeout(I), I = void 0);
+		}
+		C(O, (e) => {
+			L(), F.value = e;
+		});
+		function R(e) {
+			let t = e.target.value;
+			if (F.value = t, L(), !D.debounce) {
+				O.value = t;
+				return;
+			}
+			I = setTimeout(() => {
+				I = void 0, O.value = t;
+			}, D.debounce);
+		}
+		function z() {
+			I !== void 0 && (L(), O.value = F.value);
+		}
+		g(L);
+		let B = v();
+		function V() {
+			L(), F.value = "", O.value = "", B.value?.focus();
+		}
+		p({ input: B });
+		let H = o(() => F.value !== "" && F.value != null), U = o(() => D.clearable && H.value && !D.disabled), W = o(() => D.loading || U.value || !!k.trailing), G = o(() => a({
+			size: D.size,
+			invalid: M.value
 		}));
-		return (e, t) => f((c(), i("input", {
-			id: g.value,
-			"onUpdate:modelValue": t[0] ||= (e) => m.value = e,
-			type: o.type,
-			placeholder: o.placeholder,
-			disabled: o.disabled,
-			required: o.required,
-			"aria-invalid": _.value || void 0,
-			"aria-describedby": l(h)?.describedBy.value,
-			class: s(b.value)
-		}, null, 10, p)), [[d, m.value]]);
+		function K(e, t) {
+			let n = D.ui?.[e];
+			return P.value ? [n, t] : G.value[e]({ class: [n, t] });
+		}
+		return (n, i) => (_(), l("div", { class: h(K("root", D.class)) }, [
+			b(k).leading ? (_(), l("span", {
+				key: 0,
+				class: h(K("leading"))
+			}, [y(n.$slots, "leading")], 2)) : c("", !0),
+			u("input", m({
+				id: j.value,
+				ref_key: "inputEl",
+				ref: B,
+				value: F.value,
+				type: D.type,
+				placeholder: D.placeholder,
+				disabled: D.disabled,
+				required: D.required,
+				"aria-invalid": M.value || void 0,
+				"aria-describedby": b(A)?.describedBy.value,
+				class: K("input")
+			}, n.$attrs, {
+				onInput: R,
+				onBlur: z,
+				onKeydown: w(z, ["enter"])
+			}), null, 16, T),
+			W.value ? (_(), l("span", {
+				key: 1,
+				class: h(K("trailing"))
+			}, [
+				y(n.$slots, "trailing"),
+				U.value ? (_(), l("button", {
+					key: 0,
+					type: "button",
+					tabindex: "-1",
+					"aria-label": D.clearLabel,
+					class: h(K("clear")),
+					onClick: V
+				}, [d(r, { icon: b(e) }, null, 8, ["icon"])], 10, E)) : c("", !0),
+				D.loading ? (_(), s(r, {
+					key: 1,
+					icon: b(t),
+					class: "animate-spin"
+				}, null, 8, ["icon"])) : c("", !0)
+			], 2)) : c("", !0)
+		], 2));
 	}
 });
 //#endregion
-export { m as default };
+export { D as default };

package/dist/packages/iryx-ui/src/components/Pagination.vue_vue_type_script_setup_true_lang.js

@@ -16,6 +16,7 @@ var D = /*@__PURE__*/ d({
 			default: !0
 		},
 		size: {},
+		align: {},
 		prevLabel: { default: "Previous page" },
 		nextLabel: { default: "Next page" },
 		label: { default: "Pagination" },
@@ -31,7 +32,10 @@ var D = /*@__PURE__*/ d({
 	}),
 	emits: ["update:page"],
 	setup(d) {
-		let f = d, D = y(d, "page"), O = n(), k = o(() => f.unstyled ?? O.unstyled), A = o(() => i({ size: f.size })), j = o(() => k.value ? [f.ui?.root, f.class] : A.value.root({ class: [f.ui?.root, f.class] })), M = o(() => k.value ? f.ui?.list : A.value.list({ class: f.ui?.list })), N = o(() => k.value ? f.ui?.ellipsis : A.value.ellipsis({ class: f.ui?.ellipsis }));
+		let f = d, D = y(d, "page"), O = n(), k = o(() => f.unstyled ?? O.unstyled), A = o(() => i({
+			size: f.size,
+			align: f.align
+		})), j = o(() => k.value ? [f.ui?.root, f.class] : A.value.root({ class: [f.ui?.root, f.class] })), M = o(() => k.value ? f.ui?.list : A.value.list({ class: f.ui?.list })), N = o(() => k.value ? f.ui?.ellipsis : A.value.ellipsis({ class: f.ui?.ellipsis }));
 		function P(e) {
 			return k.value ? f.ui?.item : [A.value.item({ class: f.ui?.item }), e ? A.value.active() : A.value.inactive()];
 		}

package/dist/packages/iryx-ui/src/components/PasswordInput.js

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