iryx-ui 0.16.0 → 0.17.0

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

@@ -0,0 +1,81 @@
+export interface EditableProps {
+    modelValue?: string;
+    placeholder?: string;
+    /**
+     * What puts it into edit mode. `focus` is the default and the kindest — a
+     * double click is invisible to anyone who does not already know it is there,
+     * and impossible to discover with a keyboard.
+     */
+    activationMode?: 'focus' | 'dblclick' | 'none';
+    /**
+     * What commits the value. `blur` commits when focus leaves, `enter` on the
+     * key, `both` on either, `none` only through the controls.
+     */
+    submitMode?: 'blur' | 'enter' | 'both' | 'none';
+    /** Show edit, save and cancel buttons beside the value. */
+    controls?: boolean;
+    /** Select the existing text when editing starts, so typing replaces it. */
+    selectOnFocus?: boolean;
+    /** Start in edit mode — for a row that was just added and has no value yet. */
+    startWithEditMode?: boolean;
+    maxLength?: number;
+    /**
+     * Size the field to its text. On by default: an input left at its own
+     * intrinsic width is about twenty characters wide whatever it holds, so the
+     * line jumps as soon as an edit starts.
+     */
+    autoResize?: boolean;
+    size?: 'sm' | 'md' | 'lg';
+    disabled?: boolean;
+    readonly?: boolean;
+    invalid?: boolean;
+    id?: string;
+    /** Submitted with a surrounding native form. */
+    name?: string;
+    required?: boolean;
+    /** Control labels — override for non-English apps. */
+    editLabel?: string;
+    submitLabel?: string;
+    cancelLabel?: string;
+    /** Skip built-in classes; you take over styling entirely. */
+    unstyled?: boolean;
+    class?: string;
+    ui?: {
+        root?: string;
+        area?: string;
+        preview?: string;
+        placeholder?: string;
+        input?: string;
+        control?: string;
+    };
+}
+type __VLS_Slots = {
+    /** Replaces the rendered value. Given the value and whether it is empty. */
+    preview?: (props: {
+        value: string;
+        isEmpty: boolean;
+    }) => unknown;
+};
+declare const __VLS_base: import("vue").DefineComponent<EditableProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: string) => any;
+    submit: (value: string) => any;
+}, string, import("vue").PublicProps, Readonly<EditableProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: string) => any) | undefined;
+    onSubmit?: ((value: string) => any) | undefined;
+}>, {
+    unstyled: boolean;
+    invalid: boolean;
+    cancelLabel: string;
+    submitMode: "blur" | "enter" | "both" | "none";
+    autoResize: boolean;
+    editLabel: string;
+    submitLabel: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/Editable.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,140 @@
+import { useIryxUiConfig as e } from "../config.js";
+import t from "./Icon.js";
+import { useFormField as n } from "../composables/form.js";
+import { editableTheme as r } from "../theme/editable.js";
+import { Fragment as i, computed as a, createBlock as o, createCommentVNode as s, createElementBlock as c, createVNode as l, defineComponent as u, normalizeClass as d, openBlock as f, renderSlot as p, unref as m, withCtx as h } from "vue";
+import { Cancel01Icon as g, Edit02Icon as _, Tick02Icon as v } from "@hugeicons/core-free-icons";
+import { EditableArea as y, EditableCancelTrigger as b, EditableEditTrigger as x, EditableInput as S, EditablePreview as C, EditableRoot as w, EditableSubmitTrigger as T } from "reka-ui";
+//#region src/components/Editable.vue?vue&type=script&setup=true&lang.ts
+var E = /*@__PURE__*/ u({
+	__name: "Editable",
+	props: {
+		modelValue: {},
+		placeholder: {},
+		activationMode: {},
+		submitMode: { default: "both" },
+		controls: { type: Boolean },
+		selectOnFocus: { type: Boolean },
+		startWithEditMode: { type: Boolean },
+		maxLength: {},
+		autoResize: {
+			type: Boolean,
+			default: !0
+		},
+		size: {},
+		disabled: { type: Boolean },
+		readonly: { type: Boolean },
+		invalid: {
+			type: Boolean,
+			default: void 0
+		},
+		id: {},
+		name: {},
+		required: { type: Boolean },
+		editLabel: { default: "Edit" },
+		submitLabel: { default: "Save" },
+		cancelLabel: { default: "Cancel" },
+		unstyled: {
+			type: Boolean,
+			default: void 0
+		},
+		class: {},
+		ui: {}
+	},
+	emits: ["update:modelValue", "submit"],
+	setup(u, { emit: E }) {
+		let D = u, O = E, k = n(), A = a(() => D.id ?? k?.id.value), j = a(() => D.invalid ?? k?.invalid.value ?? !1), M = e(), N = a(() => D.unstyled ?? M.unstyled), P = a(() => r({
+			size: D.size,
+			invalid: j.value
+		}));
+		function F(e, t) {
+			let n = D.ui?.[e];
+			return N.value ? [n, t] : P.value[e]({ class: [n, t] });
+		}
+		return (e, n) => (f(), o(m(w), {
+			id: A.value,
+			"model-value": D.modelValue,
+			placeholder: D.placeholder,
+			"activation-mode": D.activationMode,
+			"submit-mode": D.submitMode,
+			"select-on-focus": D.selectOnFocus,
+			"start-with-edit-mode": D.startWithEditMode,
+			"max-length": D.maxLength,
+			"auto-resize": D.autoResize,
+			disabled: D.disabled,
+			readonly: D.readonly,
+			name: D.name,
+			required: D.required,
+			"aria-invalid": j.value || void 0,
+			"aria-describedby": m(k)?.describedBy.value,
+			class: d(F("root", D.class)),
+			"onUpdate:modelValue": n[0] ||= (e) => O("update:modelValue", e ?? ""),
+			onSubmit: n[1] ||= () => O("submit", D.modelValue ?? "")
+		}, {
+			default: h(({ isEditing: n, isEmpty: r, modelValue: a, edit: u, submit: w, cancel: E }) => [l(m(y), { class: d(F("area")) }, {
+				default: h(() => [l(m(C), { class: d(F("preview", r ? P.value.placeholder() : void 0)) }, {
+					default: h(() => [p(e.$slots, "preview", {
+						value: a ?? "",
+						isEmpty: r
+					})]),
+					_: 2
+				}, 1032, ["class"]), l(m(S), { class: d(F("input")) }, null, 8, ["class"])]),
+				_: 2
+			}, 1032, ["class"]), D.controls ? (f(), c(i, { key: 0 }, [n ? (f(), c(i, { key: 1 }, [l(m(T), {
+				"aria-label": D.submitLabel,
+				class: d(F("control")),
+				onClick: w
+			}, {
+				default: h(() => [l(t, { icon: m(v) }, null, 8, ["icon"])]),
+				_: 1
+			}, 8, [
+				"aria-label",
+				"class",
+				"onClick"
+			]), l(m(b), {
+				"aria-label": D.cancelLabel,
+				class: d(F("control")),
+				onClick: E
+			}, {
+				default: h(() => [l(t, { icon: m(g) }, null, 8, ["icon"])]),
+				_: 1
+			}, 8, [
+				"aria-label",
+				"class",
+				"onClick"
+			])], 64)) : (f(), o(m(x), {
+				key: 0,
+				"aria-label": D.editLabel,
+				class: d(F("control")),
+				onClick: u
+			}, {
+				default: h(() => [l(t, { icon: m(_) }, null, 8, ["icon"])]),
+				_: 1
+			}, 8, [
+				"aria-label",
+				"class",
+				"onClick"
+			]))], 64)) : s("", !0)]),
+			_: 3
+		}, 8, [
+			"id",
+			"model-value",
+			"placeholder",
+			"activation-mode",
+			"submit-mode",
+			"select-on-focus",
+			"start-with-edit-mode",
+			"max-length",
+			"auto-resize",
+			"disabled",
+			"readonly",
+			"name",
+			"required",
+			"aria-invalid",
+			"aria-describedby",
+			"class"
+		]));
+	}
+});
+//#endregion
+export { E as default };

package/dist/components/HoverCard.js

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

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

@@ -0,0 +1,68 @@
+export interface HoverCardProps {
+    side?: 'top' | 'right' | 'bottom' | 'left';
+    align?: 'start' | 'center' | 'end';
+    sideOffset?: number;
+    /** Render the little pointer against the trigger. */
+    arrow?: boolean;
+    /** How long the pointer must rest on the trigger before the card opens, in ms. */
+    openDelay?: number;
+    /**
+     * Grace period after the pointer leaves, in ms. It is what lets the pointer
+     * travel from the trigger to the card without the card vanishing on the way.
+     */
+    closeDelay?: number;
+    /**
+     * Open on touch as well. Off by default, and worth leaving off: a tap has no
+     * hover to precede it, so the card competes with whatever the trigger does
+     * when tapped. Put the same content somewhere reachable instead.
+     */
+    enableTouch?: boolean;
+    padding?: 'none' | 'sm' | 'md' | 'lg';
+    /** `none` lets the content size itself. */
+    width?: 'none' | 'sm' | 'md' | 'lg';
+    /** Skip built-in classes; you take over styling entirely. */
+    unstyled?: boolean;
+    class?: string;
+    ui?: {
+        content?: string;
+        arrow?: string;
+    };
+}
+/**
+ * A preview of what a link points at, shown when the pointer rests on it.
+ *
+ * It is for **supplementary** content — a profile, a definition, a summary of
+ * the page behind a link. Nothing inside may be the only way to reach an
+ * action: the card is hover- and focus-summoned, so a touch user never sees
+ * it. `ITooltip` is the one for a short label, and `IPopover` the one for
+ * content a reader has to be able to click into.
+ */
+type __VLS_Props = HoverCardProps;
+type __VLS_ModelProps = {
+    'open'?: boolean;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare var __VLS_14: {}, __VLS_28: {};
+type __VLS_Slots = {} & {
+    trigger?: (props: typeof __VLS_14) => any;
+} & {
+    default?: (props: typeof __VLS_28) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:open": (value: boolean) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:open"?: ((value: boolean) => any) | undefined;
+}>, {
+    unstyled: boolean;
+    side: "top" | "right" | "bottom" | "left";
+    align: "start" | "center" | "end";
+    sideOffset: number;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/HoverCard.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,79 @@
+import { useIryxUiConfig as e } from "../config.js";
+import { hoverCardTheme as t } from "../theme/hover-card.js";
+import { computed as n, createBlock as r, createCommentVNode as i, createVNode as a, defineComponent as o, mergeModels as s, normalizeClass as c, openBlock as l, renderSlot as u, unref as d, useModel as f, withCtx as p } from "vue";
+import { HoverCardArrow as m, HoverCardContent as h, HoverCardPortal as g, HoverCardRoot as _, HoverCardTrigger as v } from "reka-ui";
+//#region src/components/HoverCard.vue?vue&type=script&setup=true&lang.ts
+var y = /*@__PURE__*/ o({
+	__name: "HoverCard",
+	props: /*@__PURE__*/ s({
+		side: { default: "bottom" },
+		align: { default: "center" },
+		sideOffset: { default: 6 },
+		arrow: { type: Boolean },
+		openDelay: {},
+		closeDelay: {},
+		enableTouch: { type: Boolean },
+		padding: {},
+		width: {},
+		unstyled: {
+			type: Boolean,
+			default: void 0
+		},
+		class: {},
+		ui: {}
+	}, {
+		open: {
+			type: Boolean,
+			default: void 0
+		},
+		openModifiers: {}
+	}),
+	emits: ["update:open"],
+	setup(o) {
+		let s = o, y = f(o, "open"), b = e(), x = n(() => s.unstyled ?? b.unstyled), S = n(() => t({
+			padding: s.padding,
+			width: s.width
+		})), C = n(() => x.value ? [s.ui?.content, s.class] : S.value.content({ class: [s.ui?.content, s.class] })), w = n(() => x.value ? s.ui?.arrow : S.value.arrow({ class: s.ui?.arrow }));
+		return (e, t) => (l(), r(d(_), {
+			open: y.value,
+			"onUpdate:open": t[0] ||= (e) => y.value = e,
+			"open-delay": s.openDelay,
+			"close-delay": s.closeDelay,
+			"enable-touch": s.enableTouch
+		}, {
+			default: p(() => [a(d(v), { "as-child": "" }, {
+				default: p(() => [u(e.$slots, "trigger")]),
+				_: 3
+			}), a(d(g), null, {
+				default: p(() => [a(d(h), {
+					side: s.side,
+					align: s.align,
+					"side-offset": s.sideOffset,
+					class: c(C.value)
+				}, {
+					default: p(() => [u(e.$slots, "default"), s.arrow ? (l(), r(d(m), {
+						key: 0,
+						class: c(w.value),
+						width: 10,
+						height: 5
+					}, null, 8, ["class"])) : i("", !0)]),
+					_: 3
+				}, 8, [
+					"side",
+					"align",
+					"side-offset",
+					"class"
+				])]),
+				_: 3
+			})]),
+			_: 3
+		}, 8, [
+			"open",
+			"open-delay",
+			"close-delay",
+			"enable-touch"
+		]));
+	}
+});
+//#endregion
+export { y as default };

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

@@ -48,14 +48,14 @@ type __VLS_Slots = {} & {
 };
 declare const __VLS_base: import("vue").DefineComponent<TagsInputProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:modelValue": (value: string[]) => any;
-    invalidTag: (value: string) => any;
     addTag: (value: string) => any;
     removeTag: (value: string) => any;
+    invalidTag: (value: string) => any;
 }, string, import("vue").PublicProps, Readonly<TagsInputProps> & Readonly<{
     "onUpdate:modelValue"?: ((value: string[]) => any) | undefined;
-    onInvalidTag?: ((value: string) => any) | undefined;
     onAddTag?: ((value: string) => any) | undefined;
     onRemoveTag?: ((value: string) => any) | undefined;
+    onInvalidTag?: ((value: string) => any) | undefined;
 }>, {
     unstyled: boolean;
     invalid: boolean;

package/dist/components/TimeField.vue_vue_type_script_setup_true_lang.js

@@ -1,6 +1,6 @@
 import { useIryxUiConfig as e } from "../config.js";
-import { useFormField as t } from "../composables/form.js";
-import { toIsoTime as n, toTime as r } from "../composables/date.js";
+import { toIsoTime as t, toTime as n } from "../composables/date.js";
+import { useFormField as r } from "../composables/form.js";
 import { timeFieldTheme as i } from "../theme/time-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 { TimeFieldInput as _, TimeFieldRoot as v } from "reka-ui";
@@ -32,33 +32,36 @@ var y = /*@__PURE__*/ u({
 	},
 	emits: ["update:modelValue"],
 	setup(u, { emit: y }) {
-		let b = u, x = y, S = t(), C = o(() => b.id ?? S?.id.value), w = o(() => b.invalid ?? S?.invalid.value ?? !1), T = e(), E = o(() => b.unstyled ?? T.unstyled), D = o(() => i({
+		let b = u, x = y, S = r(), C = o(() => b.id ?? S?.id.value), w = o(() => {
+			let e = b.modelValue;
+			return !e || !n(e) ? !1 : !!(b.minValue && e < b.minValue || b.maxValue && e > b.maxValue);
+		}), T = o(() => (b.invalid ?? S?.invalid.value ?? !1) || w.value), E = e(), D = o(() => b.unstyled ?? E.unstyled), O = o(() => i({
 			size: b.size,
-			invalid: w.value
-		})), O = o(() => E.value ? [b.ui?.root, b.class] : D.value.root({ class: [b.ui?.root, b.class] })), k = o(() => E.value ? b.ui?.segment : D.value.segment({ class: b.ui?.segment })), A = o(() => E.value ? b.ui?.literal : D.value.literal({ class: b.ui?.literal }));
-		return (e, t) => (f(), s(h(v), {
+			invalid: T.value
+		})), k = o(() => D.value ? [b.ui?.root, b.class] : O.value.root({ class: [b.ui?.root, b.class] })), A = o(() => D.value ? b.ui?.segment : O.value.segment({ class: b.ui?.segment })), j = o(() => D.value ? b.ui?.literal : O.value.literal({ class: b.ui?.literal }));
+		return (e, r) => (f(), s(h(v), {
 			id: C.value,
-			"model-value": h(r)(b.modelValue),
+			"model-value": h(n)(b.modelValue),
 			granularity: b.granularity,
 			"hour-cycle": b.hourCycle,
 			locale: b.locale,
 			step: b.step,
-			"min-value": h(r)(b.minValue),
-			"max-value": h(r)(b.maxValue),
+			"min-value": h(n)(b.minValue),
+			"max-value": h(n)(b.maxValue),
 			disabled: b.disabled,
 			readonly: b.readonly,
-			"aria-invalid": w.value || void 0,
+			"aria-invalid": T.value || void 0,
 			"aria-describedby": h(S)?.describedBy.value,
-			class: d(O.value),
-			"onUpdate:modelValue": t[0] ||= (e) => x("update:modelValue", h(n)(e))
+			class: d(k.value),
+			"onUpdate:modelValue": r[0] ||= (e) => x("update:modelValue", h(t)(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(A.value)
+				class: d(j.value)
 			}, m(e.value), 3)) : (f(), s(h(_), {
 				key: 1,
 				part: e.part,
-				class: d(k.value)
+				class: d(A.value)
 			}, {
 				default: g(() => [l(m(e.value), 1)]),
 				_: 2

package/dist/components/index.d.ts

@@ -11,6 +11,7 @@ export { default as BarChart } from './BarChart.vue';
 export { default as Breadcrumb } from './Breadcrumb.vue';
 export { default as Button } from './Button.vue';
 export { default as ButtonGroup } from './ButtonGroup.vue';
+export { default as Calendar } from './Calendar.vue';
 export { default as Card } from './Card.vue';
 export { default as ChartLegend } from './ChartLegend.vue';
 export { default as Checkbox } from './Checkbox.vue';
@@ -21,16 +22,19 @@ export { default as CommandPalette } from './CommandPalette.vue';
 export { default as ConfirmDialog } from './ConfirmDialog.vue';
 export { default as Container } from './Container.vue';
 export { default as ContextMenu } from './ContextMenu.vue';
+export { default as DateField } from './DateField.vue';
 export { default as DatePicker } from './DatePicker.vue';
 export { default as DateRangePicker } from './DateRangePicker.vue';
 export { default as Dialog } from './Dialog.vue';
 export { default as DonutChart } from './DonutChart.vue';
 export { default as Drawer } from './Drawer.vue';
 export { default as DropdownMenu } from './DropdownMenu.vue';
+export { default as Editable } from './Editable.vue';
 export { default as EmptyState } from './EmptyState.vue';
 export { default as FileUpload } from './FileUpload.vue';
 export { default as Form } from './Form.vue';
 export { default as FormField } from './FormField.vue';
+export { default as HoverCard } from './HoverCard.vue';
 export { default as Icon } from './Icon.vue';
 export { default as Input } from './Input.vue';
 export { default as Kbd } from './Kbd.vue';