@chelone/vue 0.6.0 → 0.9.0

package/dist/components/admin/fields/currency-field.vue.d.ts

@@ -1,9 +1,9 @@
-import type { LooseRecord, SourceProp } from "@chelone/core";
+import type { LooseRecord, ResourceRecord, SourceProp, SourceValue } from "@chelone/core";
 /** Props for {@link CurrencyField}. */
-export interface CurrencyFieldProps {
-    source: SourceProp;
-    record?: LooseRecord;
-    defaultValue?: unknown;
+export interface CurrencyFieldProps<RecordType extends ResourceRecord = LooseRecord> {
+    source: SourceProp<RecordType>;
+    record?: RecordType;
+    defaultValue?: SourceValue<RecordType, SourceProp<RecordType>>;
     empty?: string;
     /** ISO-4217 currency code (e.g. 'USD'). Required when value is a plain number. */
     currency?: string;
@@ -15,5 +15,21 @@ export interface CurrencyFieldProps {
     options?: Intl.NumberFormatOptions;
     class?: string;
 }
-declare const _default: import("vue").DefineComponent<CurrencyFieldProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<CurrencyFieldProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
 export default _default;
+declare const __VLS_export: <RecordType extends ResourceRecord = LooseRecord>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
+    props: import("vue").PublicProps & __VLS_PrettifyLocal<CurrencyFieldProps<RecordType>> & (typeof globalThis extends {
+        __VLS_PROPS_FALLBACK: infer P;
+    } ? P : {});
+    expose: (exposed: {}) => void;
+    attrs: any;
+    slots: {};
+    emit: {};
+}>) => import("vue").VNode & {
+    __ctx?: NonNullable<Awaited<typeof __VLS_setup>>;
+};
+type __VLS_PrettifyLocal<T> = (T extends any ? {
+    [K in keyof T]: T[K];
+} : {
+    [K in keyof T as K]: T[K];
+}) & {};

package/dist/components/admin/fields/currency-field.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,77 @@
+import { useFieldValue } from "../../../record/use-field-value.js";
+import { useLocale } from "../../../i18n/use-locale.js";
+import { useTranslate } from "../../../i18n/use-translate.js";
+import { computed, createCommentVNode, createElementBlock, defineComponent, normalizeClass, openBlock, toDisplayString } from "vue";
+// src/components/admin/fields/currency-field.vue?vue&type=script&setup=true&lang.ts
+var currency_field_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	__name: "currency-field",
+	props: {
+		source: {},
+		record: {},
+		defaultValue: {},
+		empty: {},
+		currency: {},
+		displayLocale: {},
+		storeAsMinorUnits: { type: Boolean },
+		options: {},
+		class: {}
+	},
+	setup(__props) {
+		/**
+		* `<CurrencyField>` — displays a monetary value via `Intl.NumberFormat`, the Vue
+		* analog of `@chelone/react`'s `fields/currency-field.tsx`. Accepts either a
+		* plain `number` (with the `currency` prop) or a composite
+		* `{ amount, currency }` object. `storeAsMinorUnits` divides by 100 (cents →
+		* dollars) before formatting. A nullish value renders the `empty` fallback (or
+		* nothing).
+		*
+		* Idiom translation from the twin: the React field resolves the app locale via
+		* `useLocale()`; here `useLocale()` is a ref, so the field formats with
+		* `displayLocale ?? appLocale` and re-formats on `i18n.setLocale`.
+		*/
+		const props = __props;
+		const value = useFieldValue({
+			source: props.source,
+			record: props.record,
+			defaultValue: props.defaultValue
+		});
+		const translate = useTranslate();
+		const appLocale = useLocale();
+		const emptyText = computed(() => props.empty ? translate(props.empty, { _: props.empty }) : null);
+		/** Normalize a number-or-`{amount,currency}` value to `{ amount, code }`. */
+		function normalize(v) {
+			if (typeof v === "object" && v !== null && "amount" in v && (typeof v.amount === "number" || typeof v.amount === "string") && "currency" in v && typeof v.currency === "string") return {
+				amount: Number(v.amount),
+				code: v.currency
+			};
+			if (!props.currency) throw new Error("<CurrencyField>: numeric value requires a `currency` prop");
+			return {
+				amount: Number(v),
+				code: props.currency
+			};
+		}
+		const formatted = computed(() => {
+			const raw = value.value;
+			if (raw == null) return null;
+			const { amount, code } = normalize(raw);
+			const major = props.storeAsMinorUnits ? amount / 100 : amount;
+			return new Intl.NumberFormat(props.displayLocale ?? appLocale.value, {
+				style: "currency",
+				currency: code,
+				...props.options
+			}).format(major);
+		});
+		return (_ctx, _cache) => {
+			return formatted.value != null ? (openBlock(), createElementBlock("span", {
+				key: 0,
+				"data-slot": "currency-field",
+				class: normalizeClass(props.class)
+			}, toDisplayString(formatted.value), 3)) : emptyText.value != null ? (openBlock(), createElementBlock("span", {
+				key: 1,
+				"data-slot": "currency-field",
+				class: normalizeClass(props.class)
+			}, toDisplayString(emptyText.value), 3)) : createCommentVNode("", true);
+		};
+	}
+});
+export { currency_field_vue_vue_type_script_setup_true_lang_default as default };

package/dist/components/admin/fields/date-field.js

@@ -0,0 +1,4 @@
+import date_field_vue_vue_type_script_setup_true_lang_default from "./date-field.vue_vue_type_script_setup_true_lang.js";
+// src/components/admin/fields/date-field.vue
+var date_field_default = date_field_vue_vue_type_script_setup_true_lang_default;
+export { date_field_default as default };

package/dist/components/admin/fields/date-field.vue.d.ts

@@ -1,9 +1,9 @@
-import type { LooseRecord, SourceProp } from "@chelone/core";
+import type { LooseRecord, ResourceRecord, SourceProp, SourceValue } from "@chelone/core";
 /** Props for {@link DateField}. */
-export interface DateFieldProps {
-    source: SourceProp;
-    record?: LooseRecord;
-    defaultValue?: unknown;
+export interface DateFieldProps<RecordType extends ResourceRecord = LooseRecord> {
+    source: SourceProp<RecordType>;
+    record?: RecordType;
+    defaultValue?: SourceValue<RecordType, SourceProp<RecordType>>;
     empty?: string;
     /** BCP 47 locale(s) for `Intl.DateTimeFormat` (via `toLocale*String`). */
     locales?: Intl.LocalesArgument;
@@ -13,11 +13,24 @@ export interface DateFieldProps {
     /** Include the date portion. Default true. */
     showDate?: boolean;
     /** Value → `Date` transform; the default parses strings/numbers via `new Date`. */
-    transform?: (value: unknown) => Date | undefined;
+    transform?: (value: SourceValue<RecordType, SourceProp<RecordType>>) => Date | undefined;
     class?: string;
 }
-declare const _default: import("vue").DefineComponent<DateFieldProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<DateFieldProps> & Readonly<{}>, {
-    showTime: boolean;
-    showDate: boolean;
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
 export default _default;
+declare const __VLS_export: <RecordType extends ResourceRecord = LooseRecord>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
+    props: import("vue").PublicProps & __VLS_PrettifyLocal<DateFieldProps<RecordType>> & (typeof globalThis extends {
+        __VLS_PROPS_FALLBACK: infer P;
+    } ? P : {});
+    expose: (exposed: {}) => void;
+    attrs: any;
+    slots: {};
+    emit: {};
+}>) => import("vue").VNode & {
+    __ctx?: NonNullable<Awaited<typeof __VLS_setup>>;
+};
+type __VLS_PrettifyLocal<T> = (T extends any ? {
+    [K in keyof T]: T[K];
+} : {
+    [K in keyof T as K]: T[K];
+}) & {};

package/dist/components/admin/fields/date-field.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,74 @@
+import { useFieldValue } from "../../../record/use-field-value.js";
+import { useTranslate } from "../../../i18n/use-translate.js";
+import { computed, createCommentVNode, createElementBlock, defineComponent, normalizeClass, openBlock, toDisplayString } from "vue";
+// src/components/admin/fields/date-field.vue?vue&type=script&setup=true&lang.ts
+var date_field_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	__name: "date-field",
+	props: {
+		source: {},
+		record: {},
+		defaultValue: {},
+		empty: {},
+		locales: {},
+		options: {},
+		showTime: {
+			type: Boolean,
+			default: false
+		},
+		showDate: {
+			type: Boolean,
+			default: true
+		},
+		transform: {},
+		class: {}
+	},
+	setup(__props) {
+		/**
+		* `<DateField>` — displays a date value with locale-specific formatting, the
+		* Vue analog of `@chelone/react`'s `fields/date-field.tsx`. Reads the value at
+		* `source` off the ambient record, coerces it to a `Date`, and formats it via
+		* `toLocaleString` / `toLocaleDateString` / `toLocaleTimeString` per the
+		* `showDate` / `showTime` flags. A date-only string (`YYYY-MM-DD`, len ≤ 10) is
+		* rendered in UTC to avoid the negative-timezone off-by-one (parity with the
+		* twin). A nullish/empty value renders the `empty` fallback (or nothing).
+		*/
+		const props = __props;
+		const value = useFieldValue({
+			source: props.source,
+			record: props.record,
+			defaultValue: props.defaultValue
+		});
+		const translate = useTranslate();
+		/** Coerce to a `Date` (mirrors the twin's `defaultTransform`). */
+		function defaultTransform(v) {
+			if (v instanceof Date) return v;
+			if (typeof v === "string" || typeof v === "number") return new Date(v);
+		}
+		const emptyText = computed(() => props.empty ? translate(props.empty, { _: props.empty }) : null);
+		const dateString = computed(() => {
+			if (!props.showTime && !props.showDate) throw new Error("<DateField> cannot have showTime and showDate false at the same time");
+			const raw = value.value;
+			if (raw == null || raw === "") return null;
+			const date = (props.transform ?? defaultTransform)(raw);
+			if (!date) return "";
+			if (props.showTime && props.showDate) return date.toLocaleString(props.locales, props.options);
+			if (props.showDate) {
+				const dateOptions = props.options ?? (typeof raw === "string" && raw.length <= 10 ? { timeZone: "UTC" } : void 0);
+				return date.toLocaleDateString(props.locales, dateOptions);
+			}
+			return date.toLocaleTimeString(props.locales, props.options);
+		});
+		return (_ctx, _cache) => {
+			return dateString.value != null ? (openBlock(), createElementBlock("span", {
+				key: 0,
+				"data-slot": "date-field",
+				class: normalizeClass(props.class)
+			}, toDisplayString(dateString.value), 3)) : emptyText.value != null ? (openBlock(), createElementBlock("span", {
+				key: 1,
+				"data-slot": "date-field",
+				class: normalizeClass(props.class)
+			}, toDisplayString(emptyText.value), 3)) : createCommentVNode("", true);
+		};
+	}
+});
+export { date_field_vue_vue_type_script_setup_true_lang_default as default };

package/dist/components/admin/fields/diff-viewer.js

@@ -0,0 +1,4 @@
+import diff_viewer_vue_vue_type_script_setup_true_lang_default from "./diff-viewer.vue_vue_type_script_setup_true_lang.js";
+// src/components/admin/fields/diff-viewer.vue
+var diff_viewer_default = diff_viewer_vue_vue_type_script_setup_true_lang_default;
+export { diff_viewer_default as default };

package/dist/components/admin/fields/diff-viewer.vue.d.ts

@@ -0,0 +1,45 @@
+import { type VNode } from "vue";
+import type { LooseRecord, ResourceRecord, SourceProp } from "@chelone/core";
+/** Table (`side-by-side`, the default) or list (`inline`). */
+export type DiffViewerMode = "side-by-side" | "inline";
+/** Props for {@link DiffViewer}. */
+export interface DiffViewerProps<RecordType extends ResourceRecord = LooseRecord> {
+    /** The earlier version. */
+    before: RecordType;
+    /** The later version. */
+    after: RecordType;
+    /** Fields to show, in this order. Without it: every top-level key. */
+    sources?: readonly SourceProp<RecordType>[];
+    /** A label per source, replacing the translated field label. */
+    labels?: Partial<Record<string, string>>;
+    /** Table (`side-by-side`, the default) or list (`inline`). */
+    mode?: DiffViewerMode;
+    /** Resource whose field labels apply. Defaults to the ambient resource. */
+    resource?: string;
+    class?: string;
+}
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: <RecordType extends ResourceRecord = LooseRecord>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
+    props: import("vue").PublicProps & __VLS_PrettifyLocal<DiffViewerProps<RecordType>> & (typeof globalThis extends {
+        __VLS_PROPS_FALLBACK: infer P;
+    } ? P : {});
+    expose: (exposed: {}) => void;
+    attrs: any;
+    slots: {
+        /** Replaces the default value text of a cell. */
+        value?(scope: {
+            source: string;
+            value: unknown;
+            side: "before" | "after";
+        }): VNode[];
+    };
+    emit: {};
+}>) => import("vue").VNode & {
+    __ctx?: NonNullable<Awaited<typeof __VLS_setup>>;
+};
+type __VLS_PrettifyLocal<T> = (T extends any ? {
+    [K in keyof T]: T[K];
+} : {
+    [K in keyof T as K]: T[K];
+}) & {};

package/dist/components/admin/fields/diff-viewer.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,151 @@
+import { useTranslate } from "../../../i18n/use-translate.js";
+import { useTranslateLabel } from "../../../label/use-translate-label.js";
+import { cn } from "../../../lib/utils.js";
+import { ArrowRightIcon } from "../list/list-icons.js";
+import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, defineComponent, normalizeClass, openBlock, renderList, renderSlot, resolveDynamicComponent, toDisplayString, unref, withCtx } from "vue";
+import { diffRecords, formatDiffValue } from "@chelone/core";
+// src/components/admin/fields/diff-viewer.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = ["data-mode"];
+var _hoisted_2 = ["data-source", "data-status"];
+var _hoisted_3 = { class: "font-medium" };
+var _hoisted_4 = { class: "sr-only" };
+var _hoisted_5 = { key: 0 };
+var _hoisted_6 = { key: 1 };
+var _hoisted_7 = { key: 3 };
+var _hoisted_8 = ["data-mode"];
+var _hoisted_9 = { class: "text-left" };
+var _hoisted_10 = {
+	scope: "col",
+	class: "p-2 font-medium"
+};
+var _hoisted_11 = {
+	scope: "col",
+	class: "p-2 font-medium"
+};
+var _hoisted_12 = {
+	scope: "col",
+	class: "p-2 font-medium"
+};
+var _hoisted_13 = ["data-source", "data-status"];
+var _hoisted_14 = {
+	scope: "row",
+	class: "p-2 text-left font-medium"
+};
+var _hoisted_15 = { class: "sr-only" };
+var _hoisted_16 = { class: "p-2" };
+var _hoisted_17 = { class: "p-2" };
+var diff_viewer_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	__name: "diff-viewer",
+	props: {
+		before: {},
+		after: {},
+		sources: {},
+		labels: {},
+		mode: { default: "side-by-side" },
+		resource: {},
+		class: {}
+	},
+	setup(__props) {
+		/**
+		* `<DiffViewer>` shows what changed between two versions of a record, one row
+		* per field. The Vue analog of `@chelone/react`'s `fields/diff-viewer.tsx`.
+		* Side by side is a table with the field, its before value and its after
+		* value; inline is a list that shows the removed and added value in one line.
+		* Each row has a `data-status` and a visually hidden status word, and every
+		* value renders as text unless the `#value` slot says otherwise.
+		*/
+		const props = __props;
+		const translate = useTranslate();
+		const translateLabel = useTranslateLabel();
+		const rows = computed(() => diffRecords(props.before, props.after, props.sources));
+		const empty = computed(() => translate("chelone.diff_viewer.empty", { _: "(empty)" }));
+		/** The default text of a value; a missing one reads as the empty text. */
+		function text(value) {
+			return formatDiffValue(value) || empty.value;
+		}
+		function labelOf(source) {
+			return props.labels?.[source] ?? translateLabel({
+				source,
+				resource: props.resource
+			});
+		}
+		function statusWord(status) {
+			return translate(`chelone.diff_viewer.status.${status}`, { _: status });
+		}
+		const removes = (row) => row.status === "removed" || row.status === "changed";
+		const adds = (row) => row.status === "added" || row.status === "changed";
+		return (_ctx, _cache) => {
+			return props.mode === "inline" ? (openBlock(), createElementBlock("ul", {
+				key: 0,
+				"data-slot": "diff-viewer",
+				"data-mode": props.mode,
+				class: normalizeClass(unref(cn)("flex flex-col gap-2 text-sm", props.class))
+			}, [(openBlock(true), createElementBlock(Fragment, null, renderList(rows.value, (row) => {
+				return openBlock(), createElementBlock("li", {
+					key: row.source,
+					"data-source": row.source,
+					"data-status": row.status,
+					class: "flex flex-wrap items-baseline gap-x-2"
+				}, [
+					createElementVNode("span", _hoisted_3, toDisplayString(labelOf(row.source)), 1),
+					createElementVNode("span", _hoisted_4, toDisplayString(statusWord(row.status)), 1),
+					row.status === "unchanged" ? (openBlock(), createElementBlock("span", _hoisted_5, [renderSlot(_ctx.$slots, "value", {
+						source: row.source,
+						value: row.after,
+						side: "after"
+					}, () => [createTextVNode(toDisplayString(text(row.after)), 1)])])) : createCommentVNode("", true),
+					removes(row) ? (openBlock(), createElementBlock("del", _hoisted_6, [renderSlot(_ctx.$slots, "value", {
+						source: row.source,
+						value: row.before,
+						side: "before"
+					}, () => [createTextVNode(toDisplayString(text(row.before)), 1)])])) : createCommentVNode("", true),
+					row.status === "changed" ? (openBlock(), createBlock(unref(ArrowRightIcon), {
+						key: 2,
+						"aria-hidden": "true",
+						class: "size-3.5"
+					})) : createCommentVNode("", true),
+					adds(row) ? (openBlock(), createElementBlock("ins", _hoisted_7, [renderSlot(_ctx.$slots, "value", {
+						source: row.source,
+						value: row.after,
+						side: "after"
+					}, () => [createTextVNode(toDisplayString(text(row.after)), 1)])])) : createCommentVNode("", true)
+				], 8, _hoisted_2);
+			}), 128))], 10, _hoisted_1)) : (openBlock(), createElementBlock("table", {
+				key: 1,
+				"data-slot": "diff-viewer",
+				"data-mode": props.mode,
+				class: normalizeClass(unref(cn)("w-full border-collapse text-sm", props.class))
+			}, [createElementVNode("thead", null, [createElementVNode("tr", _hoisted_9, [
+				createElementVNode("th", _hoisted_10, toDisplayString(unref(translate)("chelone.diff_viewer.field", { _: "Field" })), 1),
+				createElementVNode("th", _hoisted_11, toDisplayString(unref(translate)("chelone.diff_viewer.before", { _: "Before" })), 1),
+				createElementVNode("th", _hoisted_12, toDisplayString(unref(translate)("chelone.diff_viewer.after", { _: "After" })), 1)
+			])]), createElementVNode("tbody", null, [(openBlock(true), createElementBlock(Fragment, null, renderList(rows.value, (row) => {
+				return openBlock(), createElementBlock("tr", {
+					key: row.source,
+					"data-source": row.source,
+					"data-status": row.status,
+					class: "border-t align-top"
+				}, [
+					createElementVNode("th", _hoisted_14, [createTextVNode(toDisplayString(labelOf(row.source)) + " ", 1), createElementVNode("span", _hoisted_15, toDisplayString(statusWord(row.status)), 1)]),
+					createElementVNode("td", _hoisted_16, [(openBlock(), createBlock(resolveDynamicComponent(removes(row) ? "del" : "span"), { class: normalizeClass(removes(row) ? "bg-destructive/10 text-destructive" : void 0) }, {
+						default: withCtx(() => [renderSlot(_ctx.$slots, "value", {
+							source: row.source,
+							value: row.before,
+							side: "before"
+						}, () => [createTextVNode(toDisplayString(text(row.before)), 1)])]),
+						_: 2
+					}, 1032, ["class"]))]),
+					createElementVNode("td", _hoisted_17, [(openBlock(), createBlock(resolveDynamicComponent(adds(row) ? "ins" : "span"), { class: normalizeClass(adds(row) ? "bg-primary/10 no-underline" : void 0) }, {
+						default: withCtx(() => [renderSlot(_ctx.$slots, "value", {
+							source: row.source,
+							value: row.after,
+							side: "after"
+						}, () => [createTextVNode(toDisplayString(text(row.after)), 1)])]),
+						_: 2
+					}, 1032, ["class"]))])
+				], 8, _hoisted_13);
+			}), 128))])], 10, _hoisted_8));
+		};
+	}
+});
+export { diff_viewer_vue_vue_type_script_setup_true_lang_default as default };

package/dist/components/admin/fields/duration-field.js

@@ -0,0 +1,4 @@
+import duration_field_vue_vue_type_script_setup_true_lang_default from "./duration-field.vue_vue_type_script_setup_true_lang.js";
+// src/components/admin/fields/duration-field.vue
+var duration_field_default = duration_field_vue_vue_type_script_setup_true_lang_default;
+export { duration_field_default as default };

package/dist/components/admin/fields/duration-field.vue.d.ts

@@ -1,13 +1,29 @@
-import type { LooseRecord, SourceProp } from "@chelone/core";
+import type { LooseRecord, ResourceRecord, SourceProp, SourceValue } from "@chelone/core";
 /** Props for {@link DurationField}. */
-export interface DurationFieldProps {
-    source: SourceProp;
-    record?: LooseRecord;
-    defaultValue?: unknown;
+export interface DurationFieldProps<RecordType extends ResourceRecord = LooseRecord> {
+    source: SourceProp<RecordType>;
+    record?: RecordType;
+    defaultValue?: SourceValue<RecordType, SourceProp<RecordType>>;
     empty?: string;
     /** 'compact' renders `2h 30m`; 'relative' renders `2 hours 30 minutes`. */
     displayFormat?: "compact" | "relative";
     class?: string;
 }
-declare const _default: import("vue").DefineComponent<DurationFieldProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<DurationFieldProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
 export default _default;
+declare const __VLS_export: <RecordType extends ResourceRecord = LooseRecord>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
+    props: import("vue").PublicProps & __VLS_PrettifyLocal<DurationFieldProps<RecordType>> & (typeof globalThis extends {
+        __VLS_PROPS_FALLBACK: infer P;
+    } ? P : {});
+    expose: (exposed: {}) => void;
+    attrs: any;
+    slots: {};
+    emit: {};
+}>) => import("vue").VNode & {
+    __ctx?: NonNullable<Awaited<typeof __VLS_setup>>;
+};
+type __VLS_PrettifyLocal<T> = (T extends any ? {
+    [K in keyof T]: T[K];
+} : {
+    [K in keyof T as K]: T[K];
+}) & {};

package/dist/components/admin/fields/duration-field.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,52 @@
+import { useFieldValue } from "../../../record/use-field-value.js";
+import { useTranslate } from "../../../i18n/use-translate.js";
+import { compactDuration, parseIsoDuration, relativeDuration } from "../inputs/duration-utils.js";
+import { computed, createCommentVNode, createElementBlock, defineComponent, normalizeClass, openBlock, toDisplayString } from "vue";
+// src/components/admin/fields/duration-field.vue?vue&type=script&setup=true&lang.ts
+var duration_field_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	__name: "duration-field",
+	props: {
+		source: {},
+		record: {},
+		defaultValue: {},
+		empty: {},
+		displayFormat: {},
+		class: {}
+	},
+	setup(__props) {
+		/**
+		* `<DurationField>` — displays an ISO-8601 duration string as a compact
+		* ("2h 30m") or relative ("2 hours 30 minutes") human-readable value. The Vue
+		* analog of `@chelone/react`'s `fields/duration-field.tsx`, reusing the shared
+		* `duration-utils` parse/format helpers. A nullish/empty value renders the
+		* `empty` fallback (or nothing); an unparseable string renders nothing.
+		*/
+		const props = __props;
+		const value = useFieldValue({
+			source: props.source,
+			record: props.record,
+			defaultValue: props.defaultValue
+		});
+		const translate = useTranslate();
+		const isEmptyValue = computed(() => value.value == null || value.value === "");
+		const emptyText = computed(() => props.empty ? translate(props.empty, { _: props.empty }) : null);
+		const text = computed(() => {
+			if (isEmptyValue.value) return null;
+			const parsed = parseIsoDuration(String(value.value));
+			if (!parsed) return null;
+			return props.displayFormat === "relative" ? relativeDuration(parsed) : compactDuration(parsed);
+		});
+		return (_ctx, _cache) => {
+			return text.value != null ? (openBlock(), createElementBlock("span", {
+				key: 0,
+				"data-slot": "duration-field",
+				class: normalizeClass(props.class)
+			}, toDisplayString(text.value), 3)) : isEmptyValue.value && emptyText.value != null ? (openBlock(), createElementBlock("span", {
+				key: 1,
+				"data-slot": "duration-field",
+				class: normalizeClass(props.class)
+			}, toDisplayString(emptyText.value), 3)) : createCommentVNode("", true);
+		};
+	}
+});
+export { duration_field_vue_vue_type_script_setup_true_lang_default as default };

package/dist/components/admin/fields/email-field.js

@@ -0,0 +1,4 @@
+import email_field_vue_vue_type_script_setup_true_lang_default from "./email-field.vue_vue_type_script_setup_true_lang.js";
+// src/components/admin/fields/email-field.vue
+var email_field_default = email_field_vue_vue_type_script_setup_true_lang_default;
+export { email_field_default as default };

package/dist/components/admin/fields/email-field.vue.d.ts

@@ -1,11 +1,27 @@
-import type { LooseRecord, SourceProp } from "@chelone/core";
+import type { LooseRecord, ResourceRecord, SourceProp, SourceValue } from "@chelone/core";
 /** Props for {@link EmailField}. */
-export interface EmailFieldProps {
-    source: SourceProp;
-    record?: LooseRecord;
-    defaultValue?: unknown;
+export interface EmailFieldProps<RecordType extends ResourceRecord = LooseRecord> {
+    source: SourceProp<RecordType>;
+    record?: RecordType;
+    defaultValue?: SourceValue<RecordType, SourceProp<RecordType>>;
     empty?: string;
     class?: string;
 }
-declare const _default: import("vue").DefineComponent<EmailFieldProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<EmailFieldProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
 export default _default;
+declare const __VLS_export: <RecordType extends ResourceRecord = LooseRecord>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
+    props: import("vue").PublicProps & __VLS_PrettifyLocal<EmailFieldProps<RecordType>> & (typeof globalThis extends {
+        __VLS_PROPS_FALLBACK: infer P;
+    } ? P : {});
+    expose: (exposed: {}) => void;
+    attrs: any;
+    slots: {};
+    emit: {};
+}>) => import("vue").VNode & {
+    __ctx?: NonNullable<Awaited<typeof __VLS_setup>>;
+};
+type __VLS_PrettifyLocal<T> = (T extends any ? {
+    [K in keyof T]: T[K];
+} : {
+    [K in keyof T as K]: T[K];
+}) & {};

package/dist/components/admin/fields/email-field.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,49 @@
+import { cn } from "../../../lib/utils.js";
+import { useFieldValue } from "../../../record/use-field-value.js";
+import { useTranslate } from "../../../i18n/use-translate.js";
+import { computed, createCommentVNode, createElementBlock, defineComponent, normalizeClass, openBlock, toDisplayString, withModifiers } from "vue";
+// src/components/admin/fields/email-field.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = ["href"];
+var email_field_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	__name: "email-field",
+	props: {
+		source: {},
+		record: {},
+		defaultValue: {},
+		empty: {},
+		class: {}
+	},
+	setup(__props) {
+		/**
+		* `<EmailField>` — displays an email address as a clickable `mailto:` link, the
+		* Vue analog of `@chelone/react`'s `fields/email-field.tsx`. Reads the value at
+		* `source` off the ambient record. The click is `.stop`-ped so the field is
+		* safe inside a `DataTable` row with `rowClick`. A nullish value renders the
+		* `empty` fallback (or nothing).
+		*/
+		const props = __props;
+		const value = useFieldValue({
+			source: props.source,
+			record: props.record,
+			defaultValue: props.defaultValue
+		});
+		const translate = useTranslate();
+		const email = computed(() => value.value == null ? null : String(value.value));
+		const emptyText = computed(() => props.empty ? translate(props.empty, { _: props.empty }) : null);
+		const linkClass = computed(() => cn("underline hover:no-underline", props.class));
+		return (_ctx, _cache) => {
+			return email.value != null ? (openBlock(), createElementBlock("a", {
+				key: 0,
+				"data-slot": "email-field",
+				class: normalizeClass(linkClass.value),
+				href: `mailto:${email.value}`,
+				onClick: _cache[0] || (_cache[0] = withModifiers(() => {}, ["stop"]))
+			}, toDisplayString(email.value), 11, _hoisted_1)) : emptyText.value != null ? (openBlock(), createElementBlock("span", {
+				key: 1,
+				"data-slot": "email-field",
+				class: normalizeClass(props.class)
+			}, toDisplayString(emptyText.value), 3)) : createCommentVNode("", true);
+		};
+	}
+});
+export { email_field_vue_vue_type_script_setup_true_lang_default as default };

package/dist/components/admin/fields/field-props.d.ts

@@ -0,0 +1,21 @@
+/**
+ * `FieldProps` — the props every display field that reads one field off the
+ * record carries: the `source` path, the record to read it from, the
+ * `defaultValue` that stands in for a missing value, the `empty` fallback text
+ * and a root `class`. The Vue twin of `@chelone/react`'s `FieldProps` in
+ * `lib/field-types.ts`, narrowed to the keys the Vue fields actually carry
+ * (no `resource`, no DataTable column keys, `class` where React has `className`).
+ */
+import type { LooseRecord, ResourceRecord, SourceProp, SourceValue } from "@chelone/core";
+export interface FieldProps<RecordType extends ResourceRecord = LooseRecord> {
+    /** Name of the property to display (dot/bracket path). */
+    source: SourceProp<RecordType>;
+    /** The record to render. Defaults to the ambient `RecordContext` value. */
+    record?: RecordType;
+    /** Replaces ONLY a resolved `undefined`, never a present `null` / `0` / `""`. */
+    defaultValue?: SourceValue<RecordType, SourceProp<RecordType>>;
+    /** Fallback text for a nullish value, translated through the catalog. */
+    empty?: string;
+    /** Class applied to the field's root element. */
+    class?: string;
+}