@chelone/vue 0.6.0 → 0.7.0

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

@@ -0,0 +1,78 @@
+import { useFieldValue } from "../../../record/use-field-value.js";
+import { useTranslate } from "../../../i18n/use-translate.js";
+import { Fragment, computed, createCommentVNode, createElementBlock, defineComponent, normalizeClass, openBlock, toDisplayString } from "vue";
+import { parsePhoneNumber } from "libphonenumber-js";
+// src/components/admin/fields/phone-field.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = ["href"];
+var phone_field_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	__name: "phone-field",
+	props: {
+		source: {},
+		record: {},
+		defaultValue: {},
+		empty: {},
+		displayFormat: {},
+		link: {
+			type: Boolean,
+			default: true
+		},
+		class: {}
+	},
+	setup(__props) {
+		/**
+		* `<PhoneField>` — displays an E.164 phone number as a formatted label,
+		* optionally wrapped in a `tel:` link, the Vue analog of `@chelone/react`'s
+		* `fields/phone-field.tsx`. National/international formatting + the `tel:` URI
+		* come from `libphonenumber-js` (the same dep the twin uses). An unparseable
+		* value falls back to the raw string. A nullish/empty value renders the `empty`
+		* fallback (or nothing).
+		*/
+		const props = __props;
+		const displayFormat = computed(() => props.displayFormat ?? "national");
+		const value = useFieldValue({
+			source: props.source,
+			record: props.record,
+			defaultValue: props.defaultValue
+		});
+		const translate = useTranslate();
+		const raw = computed(() => {
+			const v = value.value;
+			if (v == null || v === "") return null;
+			return String(v);
+		});
+		const emptyText = computed(() => props.empty ? translate(props.empty, { _: props.empty }) : null);
+		/** { formatted label, tel href } — falling back to the raw string when unparseable. */
+		const parsed = computed(() => {
+			const v = raw.value;
+			if (v == null) return null;
+			let formatted = v;
+			let href = `tel:${v}`;
+			try {
+				const p = parsePhoneNumber(v);
+				formatted = displayFormat.value === "international" ? p.formatInternational() : p.formatNational();
+				href = p.getURI();
+			} catch {}
+			return {
+				formatted,
+				href
+			};
+		});
+		return (_ctx, _cache) => {
+			return parsed.value != null ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [__props.link ? (openBlock(), createElementBlock("a", {
+				key: 0,
+				"data-slot": "phone-field",
+				href: parsed.value.href,
+				class: normalizeClass(props.class)
+			}, toDisplayString(parsed.value.formatted), 11, _hoisted_1)) : (openBlock(), createElementBlock("span", {
+				key: 1,
+				"data-slot": "phone-field",
+				class: normalizeClass(props.class)
+			}, toDisplayString(parsed.value.formatted), 3))], 64)) : emptyText.value != null ? (openBlock(), createElementBlock("span", {
+				key: 1,
+				"data-slot": "phone-field",
+				class: normalizeClass(props.class)
+			}, toDisplayString(emptyText.value), 3)) : createCommentVNode("", true);
+		};
+	}
+});
+export { phone_field_vue_vue_type_script_setup_true_lang_default as default };

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

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

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

@@ -1,10 +1,10 @@
-import type { LooseRecord, SourceKey, SourceProp } from "@chelone/core";
+import type { LooseRecord, SourceKey, SourceProp, SourceValue } from "@chelone/core";
 /** Props for {@link RatingField}. */
 export interface RatingFieldProps<RecordType extends LooseRecord = LooseRecord> {
-    source: SourceProp;
+    source: SourceProp<RecordType>;
     /** The record to render. Defaults to the ambient `RecordContext` value. */
     record?: RecordType;
-    defaultValue?: unknown;
+    defaultValue?: SourceValue<RecordType, SourceProp<RecordType>>;
     empty?: string;
     /** Total stars rendered (filled + outlined). Default 5. */
     max?: number;
@@ -17,16 +17,21 @@ export interface RatingFieldProps<RecordType extends LooseRecord = LooseRecord>
     countSource?: SourceKey<RecordType>;
     class?: string;
 }
-declare const _default: <RecordType extends LooseRecord = LooseRecord>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_expose?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
-    props: __VLS_PrettifyLocal<Pick<Partial<{}> & Omit<{} & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, never>, never> & RatingFieldProps<RecordType> & Partial<{}>> & import("vue").PublicProps;
-    expose(exposed: import("vue").ShallowUnwrapRef<{}>): void;
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: <RecordType extends LooseRecord = 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<RatingFieldProps<RecordType>> & (typeof globalThis extends {
+        __VLS_PROPS_FALLBACK: infer P;
+    } ? P : {});
+    expose: (exposed: {}) => void;
     attrs: any;
     slots: {};
     emit: {};
 }>) => import("vue").VNode & {
-    __ctx?: Awaited<typeof __VLS_setup>;
+    __ctx?: NonNullable<Awaited<typeof __VLS_setup>>;
 };
-export default _default;
-type __VLS_PrettifyLocal<T> = {
+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/rating-field.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,101 @@
+import { useFieldValue } from "../../../record/use-field-value.js";
+import { RecordContextKey } from "../../../record/record-context.js";
+import { useTranslate } from "../../../i18n/use-translate.js";
+import { Fragment, computed, createCommentVNode, createElementBlock, createElementVNode, defineComponent, inject, normalizeClass, openBlock, renderList, toDisplayString } from "vue";
+// src/components/admin/fields/rating-field.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = ["aria-label"];
+var _hoisted_2 = { class: "inline-flex" };
+var _hoisted_3 = ["fill", "data-rating-star"];
+var _hoisted_4 = {
+	key: 0,
+	class: "text-muted-foreground text-sm"
+};
+var rating_field_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	__name: "rating-field",
+	props: {
+		source: {},
+		record: {},
+		defaultValue: {},
+		empty: {},
+		max: {},
+		allowHalf: { type: Boolean },
+		countSource: {},
+		class: {}
+	},
+	setup(__props) {
+		/**
+		* `<RatingField>` — displays a numeric rating as a row of filled/half/outlined
+		* star icons, the Vue analog of `@chelone/react`'s `fields/rating-field.tsx`.
+		* Reads the value at `source` off the ambient record; supports half-star
+		* granularity, a configurable `max`, and an optional sibling `countSource`
+		* (rendered in parentheses). A nullish value renders the `empty` fallback (or
+		* nothing). The half star is filled via an SVG linear-gradient (parity with the
+		* twin).
+		*/
+		const props = __props;
+		const max = computed(() => props.max ?? 5);
+		const value = useFieldValue({
+			source: props.source,
+			record: props.record,
+			defaultValue: props.defaultValue
+		});
+		const injectedRecord = inject(RecordContextKey, null);
+		const ctxRecord = computed(() => props.record ?? injectedRecord?.value);
+		const translate = useTranslate();
+		const count = computed(() => {
+			const rec = ctxRecord.value;
+			if (!props.countSource || !rec) return void 0;
+			const c = rec[props.countSource];
+			return typeof c === "number" ? c : void 0;
+		});
+		const emptyText = computed(() => props.empty ? translate(props.empty, { _: props.empty }) : null);
+		const numericValue = computed(() => typeof value.value === "number" ? value.value : Number(value.value));
+		/** One entry per star: filled / half / empty (mirrors the twin's `renderStars`). */
+		const stars = computed(() => {
+			const out = [];
+			for (let i = 1; i <= max.value; i++) if (numericValue.value >= i) out.push("filled");
+			else if (props.allowHalf && numericValue.value >= i - .5) out.push("half");
+			else out.push("empty");
+			return out;
+		});
+		const hasValue = computed(() => value.value != null);
+		function starFill(kind) {
+			if (kind === "filled") return "currentColor";
+			if (kind === "half") return "url(#rating-half)";
+			return "none";
+		}
+		return (_ctx, _cache) => {
+			return hasValue.value ? (openBlock(), createElementBlock("span", {
+				key: 0,
+				"data-slot": "rating-field",
+				class: normalizeClass(["inline-flex items-center gap-1", props.class]),
+				role: "img",
+				"aria-label": `${numericValue.value} out of ${max.value}`
+			}, [createElementVNode("span", _hoisted_2, [(openBlock(true), createElementBlock(Fragment, null, renderList(stars.value, (kind, i) => {
+				return openBlock(), createElementBlock("svg", {
+					key: i,
+					width: "16",
+					height: "16",
+					viewBox: "0 0 24 24",
+					stroke: "currentColor",
+					"stroke-width": "1.5",
+					fill: starFill(kind),
+					"data-rating-star": kind,
+					class: "text-yellow-500",
+					"aria-hidden": "true"
+				}, [..._cache[0] || (_cache[0] = [createElementVNode("defs", null, [createElementVNode("linearGradient", { id: "rating-half" }, [createElementVNode("stop", {
+					offset: "50%",
+					"stop-color": "currentColor"
+				}), createElementVNode("stop", {
+					offset: "50%",
+					"stop-color": "transparent"
+				})])], -1), createElementVNode("polygon", { points: "12 2 15 9 22 9 16 14 18 22 12 17 6 22 8 14 2 9 9 9" }, null, -1)])], 8, _hoisted_3);
+			}), 128))]), count.value != null ? (openBlock(), createElementBlock("span", _hoisted_4, "(" + toDisplayString(count.value) + ")", 1)) : createCommentVNode("", true)], 10, _hoisted_1)) : emptyText.value != null ? (openBlock(), createElementBlock("span", {
+				key: 1,
+				"data-slot": "rating-field",
+				class: normalizeClass(props.class)
+			}, toDisplayString(emptyText.value), 3)) : createCommentVNode("", true);
+		};
+	}
+});
+export { rating_field_vue_vue_type_script_setup_true_lang_default as default };

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

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

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

@@ -1,3 +1,19 @@
+/**
+ * `<RecordField>` — displays a labeled field-value pair with flexible rendering,
+ * the Vue analog of `@chelone/react`'s `fields/record-field.tsx`. Supports
+ * vertical (`default`) or `inline` layout. Renders, in priority: the default
+ * slot, then a `field` component, then a fallback `<TextField source>`. Used
+ * inside a `RecordContext` (a `<Show>`, an `<ArrayField>` row).
+ *
+ * Idiom translation from the twin: React distinguishes `children` from a
+ * `render: (record) => ReactNode` prop. Vue collapses both into ONE default
+ * SCOPED SLOT — the slot receives `{ record }`, so a consumer either drops a
+ * child field (`<RecordField source="price"><NumberField source="price"/></RecordField>`)
+ * or computes derived text (`<RecordField v-slot="{ record }">{{ record.w }}x{{ record.h }}</RecordField>`).
+ * The label uses the shared `humanizeSource` helper (the full resource-scoped
+ * label i18n is a later wave — parity with the Vue inputs).
+ */
+import { type VNode } from "vue";
 import type { Component } from "vue";
 import type { LooseRecord, SourceProp } from "@chelone/core";
 /** Props for {@link RecordField}. */
@@ -15,21 +31,26 @@ export interface RecordFieldProps<RecordType extends LooseRecord = LooseRecord>
     variant?: "default" | "inline";
     class?: string;
 }
-declare const _default: <RecordType extends LooseRecord = LooseRecord>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_expose?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
-    props: __VLS_PrettifyLocal<Pick<Partial<{}> & Omit<{} & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, never>, never> & RecordFieldProps<RecordType> & Partial<{}>> & import("vue").PublicProps;
-    expose(exposed: import("vue").ShallowUnwrapRef<{}>): void;
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: <RecordType extends LooseRecord = 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<RecordFieldProps<RecordType>> & (typeof globalThis extends {
+        __VLS_PROPS_FALLBACK: infer P;
+    } ? P : {});
+    expose: (exposed: {}) => void;
     attrs: any;
     slots: {
         /** Receives the resolved record; renders children or derived content. */
         default?(props: {
             record: RecordType;
-        }): unknown;
+        }): VNode[];
     };
     emit: {};
 }>) => import("vue").VNode & {
-    __ctx?: Awaited<typeof __VLS_setup>;
+    __ctx?: NonNullable<Awaited<typeof __VLS_setup>>;
 };
-export default _default;
-type __VLS_PrettifyLocal<T> = {
+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/record-field.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,79 @@
+import { cn } from "../../../lib/utils.js";
+import { humanizeSource } from "../inputs/label-text.js";
+import { useRecordContextRef } from "../../../record/record-context.js";
+import { useTranslate } from "../../../i18n/use-translate.js";
+import text_field_default from "./text-field.js";
+import { computed, createBlock, createCommentVNode, createElementBlock, defineComponent, normalizeClass, openBlock, renderSlot, resolveDynamicComponent, toDisplayString, unref, useSlots } from "vue";
+// src/components/admin/fields/record-field.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = {
+	key: 1,
+	class: "flex-1"
+};
+var record_field_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	__name: "record-field",
+	props: {
+		source: {},
+		label: {
+			type: [String, Boolean],
+			default: void 0
+		},
+		resource: {},
+		record: {},
+		empty: {},
+		field: {},
+		variant: {},
+		class: {}
+	},
+	setup(__props) {
+		/**
+		* `<RecordField>` — displays a labeled field-value pair with flexible rendering,
+		* the Vue analog of `@chelone/react`'s `fields/record-field.tsx`. Supports
+		* vertical (`default`) or `inline` layout. Renders, in priority: the default
+		* slot, then a `field` component, then a fallback `<TextField source>`. Used
+		* inside a `RecordContext` (a `<Show>`, an `<ArrayField>` row).
+		*
+		* Idiom translation from the twin: React distinguishes `children` from a
+		* `render: (record) => ReactNode` prop. Vue collapses both into ONE default
+		* SCOPED SLOT — the slot receives `{ record }`, so a consumer either drops a
+		* child field (`<RecordField source="price"><NumberField source="price"/></RecordField>`)
+		* or computes derived text (`<RecordField v-slot="{ record }">{{ record.w }}x{{ record.h }}</RecordField>`).
+		* The label uses the shared `humanizeSource` helper (the full resource-scoped
+		* label i18n is a later wave — parity with the Vue inputs).
+		*/
+		const props = __props;
+		const slots = useSlots();
+		const translate = useTranslate();
+		const record = useRecordContextRef(() => props.record);
+		const hasSlot = computed(() => slots.default != null);
+		/** Nothing to show at all → render nothing (parity with the twin's guard). */
+		const isBlank = computed(() => !props.source && !props.label && !hasSlot.value && !props.field);
+		const showLabel = computed(() => props.label !== "" && props.label !== false);
+		const labelText = computed(() => {
+			if (!showLabel.value) return null;
+			const raw = typeof props.label === "string" ? props.label : props.source ? humanizeSource(props.source) : null;
+			return raw != null ? translate(raw, { _: raw }) : null;
+		});
+		const emptyText = computed(() => props.empty ? translate(props.empty, { _: props.empty }) : props.empty);
+		return (_ctx, _cache) => {
+			return !isBlank.value ? (openBlock(), createElementBlock("div", {
+				key: 0,
+				"data-slot": "record-field",
+				class: normalizeClass(unref(cn)(props.class, "flex", __props.variant === "inline" ? "flex-row" : "flex-col"))
+			}, [labelText.value != null ? (openBlock(), createElementBlock("div", {
+				key: 0,
+				class: normalizeClass(unref(cn)(__props.variant === "inline" ? "block min-w-50" : "text-xs", "text-muted-foreground"))
+			}, toDisplayString(labelText.value), 3)) : createCommentVNode("", true), hasSlot.value && unref(record) ? (openBlock(), createElementBlock("span", _hoisted_1, [renderSlot(_ctx.$slots, "default", { record: unref(record) })])) : __props.field ? (openBlock(), createBlock(resolveDynamicComponent(__props.field), {
+				key: 2,
+				source: __props.source,
+				empty: __props.empty,
+				class: "flex-1"
+			}, null, 8, ["source", "empty"])) : __props.source ? (openBlock(), createBlock(text_field_default, {
+				key: 3,
+				source: __props.source,
+				empty: emptyText.value,
+				class: "flex-1"
+			}, null, 8, ["source", "empty"])) : createCommentVNode("", true)], 2)) : createCommentVNode("", true);
+		};
+	}
+});
+export { record_field_vue_vue_type_script_setup_true_lang_default as default };

package/dist/components/admin/fields/reference-array-field.js

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

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

@@ -14,10 +14,11 @@ export interface ReferenceArrayFieldProps {
     /** Client-side page size for the resolved list. */
     perPage?: number;
 }
-declare const _default: __VLS_WithSlots<import("vue").DefineComponent<ReferenceArrayFieldProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ReferenceArrayFieldProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<ReferenceArrayFieldProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ReferenceArrayFieldProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
     default?: (props: {}) => any;
 }>;
-export default _default;
 type __VLS_WithSlots<T, S> = T & {
     new (): {
         $slots: S;

package/dist/components/admin/fields/reference-array-field.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,54 @@
+import { useGetManyAggregate } from "../../../data/queries.js";
+import { useFieldValue } from "../../../record/use-field-value.js";
+import { provideListContext } from "../../../list/list-context.js";
+import { provideResourceContext } from "../../../resource-context.js";
+import { useList } from "../../../list/use-list.js";
+import { computed, defineComponent, renderSlot } from "vue";
+import { identifiersOf } from "@chelone/core";
+// src/components/admin/fields/reference-array-field.vue?vue&type=script&setup=true&lang.ts
+var reference_array_field_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	__name: "reference-array-field",
+	props: {
+		source: {},
+		reference: {},
+		record: {},
+		sort: {},
+		filter: {},
+		perPage: {}
+	},
+	setup(__props) {
+		/**
+		* `<ReferenceArrayField>` — displays multiple related records by following an
+		* array of foreign keys. The Vue port of `@chelone/react`'s
+		* `fields/reference-array-field.tsx`. Reads the id array at `source`, fetches the
+		* referenced records with `useGetManyAggregate`, drops them in a client-side `ListContext`,
+		* publishes the reference resource, and renders its default slot.
+		*
+		* Rebridge note (mirrors the React twin): chelone has no `ReferenceArrayFieldBase`
+		* — composes `useFieldValue` + `useGetManyAggregate` + client-side `useList` +
+		* `provideListContext` + `provideResourceContext`.
+		*/
+		const props = __props;
+		const value = useFieldValue({
+			source: props.source,
+			record: props.record
+		});
+		const ids = computed(() => identifiersOf(value.value));
+		const query = useGetManyAggregate(props.reference, () => ({ ids: ids.value }), { enabled: () => ids.value.length > 0 });
+		const listContext = useList({
+			data: () => ids.value.length > 0 ? query.data.value ?? void 0 : [],
+			isPending: () => ids.value.length > 0 ? query.isPending.value : false,
+			isFetching: () => ids.value.length > 0 ? query.isFetching.value : false,
+			error: () => query.error.value,
+			sort: props.sort,
+			filter: props.filter,
+			perPage: props.perPage
+		});
+		provideResourceContext(props.reference);
+		provideListContext(listContext);
+		return (_ctx, _cache) => {
+			return renderSlot(_ctx.$slots, "default");
+		};
+	}
+});
+export { reference_array_field_vue_vue_type_script_setup_true_lang_default as default };

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

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

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

@@ -18,7 +18,7 @@
  * `useGetPathForRecord` yields a path; the link stops click propagation so a
  * `<DataTable>` row click does not also fire.
  */
-import type { LooseRecord } from "@chelone/core";
+import { type LooseRecord } from "@chelone/core";
 import type { SourceProp } from "@chelone/core";
 import type { LinkToType } from "../../../router/index.js";
 /** Props for {@link ReferenceField}. */
@@ -33,14 +33,15 @@ export interface ReferenceFieldProps {
      */
     link?: LinkToType;
 }
-declare const _default: __VLS_WithSlots<import("vue").DefineComponent<ReferenceFieldProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ReferenceFieldProps> & Readonly<{}>, {
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<ReferenceFieldProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ReferenceFieldProps> & Readonly<{}>, {
     link: LinkToType;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
     default?: (props: {}) => any;
 } & {
     default?: (props: {}) => any;
 }>;
-export default _default;
 type __VLS_WithSlots<T, S> = T & {
     new (): {
         $slots: S;

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

@@ -0,0 +1,85 @@
+import { useGetManyAggregate } from "../../../data/queries.js";
+import { useGetRecordRepresentation } from "../../../label/use-get-record-representation.js";
+import { provideRecordContext } from "../../../record/record-context.js";
+import { useFieldValue } from "../../../record/use-field-value.js";
+import { useGetPathForRecord } from "../../../router/use-get-path-for-record.js";
+import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, defineComponent, openBlock, renderSlot, toDisplayString, unref, withCtx, withModifiers } from "vue";
+import { isIdentifier } from "@chelone/core";
+import { RouterLink } from "vue-router";
+// src/components/admin/fields/reference-field.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = {
+	key: 0,
+	"data-slot": "reference-field"
+};
+var _hoisted_2 = { "data-slot": "reference-field" };
+var _hoisted_3 = { "data-slot": "reference-field" };
+var _hoisted_4 = {
+	key: 0,
+	"data-slot": "reference-field"
+};
+var reference_field_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	__name: "reference-field",
+	props: {
+		source: {},
+		reference: {},
+		record: {},
+		empty: {},
+		link: {
+			type: [
+				String,
+				Boolean,
+				Function
+			],
+			default: void 0
+		}
+	},
+	setup(__props) {
+		/**
+		* `<ReferenceField>` — follows a foreign key to a related record and displays
+		* it. The Vue analog of `@chelone/react`'s `fields/reference-field.tsx`. Reads
+		* the FK at `source` off the ambient record, fetches the referenced record with
+		* `useGetManyAggregate` (vue-query, enabled only when the FK is present), and renders
+		* either the default slot (against the referenced record's `RecordContext`) or —
+		* with no slot — the reference's record representation.
+		*
+		* Rebridge note (mirrors the React twin): Chelone carries no
+		* `ReferenceFieldBase` stack — this field resolves the single record directly
+		* with `useGetManyAggregate` and publishes it via `provideRecordContext`.
+		*
+		* The content is wrapped in a `<RouterLink>` to the referenced record when
+		* `useGetPathForRecord` yields a path. The link stops click propagation so a
+		* `<DataTable>` row click does not also fire.
+		*
+		* The content is wrapped in a `<RouterLink>` to the referenced record when
+		* `useGetPathForRecord` yields a path; the link stops click propagation so a
+		* `<DataTable>` row click does not also fire.
+		*/
+		const props = __props;
+		const fk = useFieldValue({
+			source: props.source,
+			record: props.record
+		});
+		const id = computed(() => isIdentifier(fk.value) ? fk.value : void 0);
+		const query = useGetManyAggregate(props.reference, () => ({ ids: id.value != null ? [id.value] : [] }), { enabled: () => id.value != null });
+		const referenceRecord = computed(() => query.data.value?.[0]);
+		provideRecordContext(referenceRecord);
+		const path = useGetPathForRecord({
+			resource: () => props.reference,
+			record: referenceRecord,
+			link: computed(() => props.link)
+		});
+		const getRepresentation = useGetRecordRepresentation(props.reference);
+		const representation = computed(() => referenceRecord.value ? getRepresentation(referenceRecord.value) : null);
+		return (_ctx, _cache) => {
+			return id.value == null ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [__props.empty ? (openBlock(), createElementBlock("span", _hoisted_1, toDisplayString(__props.empty), 1)) : createCommentVNode("", true)], 64)) : unref(query).isPending.value ? (openBlock(), createElementBlock(Fragment, { key: 1 }, [], 64)) : referenceRecord.value ? (openBlock(), createElementBlock(Fragment, { key: 2 }, [unref(path) ? (openBlock(), createBlock(unref(RouterLink), {
+				key: 0,
+				to: unref(path),
+				onClick: _cache[0] || (_cache[0] = withModifiers(() => {}, ["stop"]))
+			}, {
+				default: withCtx(() => [renderSlot(_ctx.$slots, "default", {}, () => [createElementVNode("span", _hoisted_2, toDisplayString(representation.value), 1)])]),
+				_: 3
+			}, 8, ["to"])) : renderSlot(_ctx.$slots, "default", {}, () => [createElementVNode("span", _hoisted_3, toDisplayString(representation.value), 1)], void 0, 1)], 64)) : (openBlock(), createElementBlock(Fragment, { key: 3 }, [__props.empty ? (openBlock(), createElementBlock("span", _hoisted_4, toDisplayString(__props.empty), 1)) : createCommentVNode("", true)], 64));
+		};
+	}
+});
+export { reference_field_vue_vue_type_script_setup_true_lang_default as default };

package/dist/components/admin/fields/reference-many-count.js

@@ -0,0 +1,4 @@
+import reference_many_count_vue_vue_type_script_setup_true_lang_default from "./reference-many-count.vue_vue_type_script_setup_true_lang.js";
+// src/components/admin/fields/reference-many-count.vue
+var reference_many_count_default = reference_many_count_vue_vue_type_script_setup_true_lang_default;
+export { reference_many_count_default as default };

package/dist/components/admin/fields/reference-many-count.vue.d.ts

@@ -18,5 +18,6 @@ export interface ReferenceManyCountProps {
     /** A class name applied to the count's `<span>`. */
     class?: string;
 }
-declare const _default: import("vue").DefineComponent<ReferenceManyCountProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ReferenceManyCountProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
 export default _default;
+declare const __VLS_export: import("vue").DefineComponent<ReferenceManyCountProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ReferenceManyCountProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

package/dist/components/admin/fields/reference-many-count.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,54 @@
+import { useGetManyReference } from "../../../data/queries.js";
+import { useFieldValue } from "../../../record/use-field-value.js";
+import { Fragment, computed, createElementBlock, createTextVNode, defineComponent, normalizeClass, openBlock, toDisplayString, unref } from "vue";
+import { isIdentifier } from "@chelone/core";
+// src/components/admin/fields/reference-many-count.vue?vue&type=script&setup=true&lang.ts
+var reference_many_count_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	__name: "reference-many-count",
+	props: {
+		reference: {},
+		target: {},
+		source: {},
+		record: {},
+		filter: {},
+		loading: {},
+		error: {},
+		class: {}
+	},
+	setup(__props) {
+		/**
+		* `<ReferenceManyCount>` — how many rows of `reference` point back at the
+		* current record, without loading them. The Vue port of `@chelone/react`'s
+		* `fields/reference-many-count.tsx`. Reads the `total` of a one-row
+		* `getManyReference` page. Renders nothing (and fetches nothing) without a
+		* record id, and nothing when the provider returns no `total`; a `0` total
+		* renders as `0`. No `link` prop and no number formatting.
+		*/
+		const props = __props;
+		const fieldValue = useFieldValue({
+			source: props.source ?? "id",
+			get record() {
+				return props.record;
+			}
+		});
+		const id = computed(() => isIdentifier(fieldValue.value) ? fieldValue.value : void 0);
+		const query = useGetManyReference(props.reference, () => ({
+			target: props.target,
+			id: id.value ?? "",
+			pagination: {
+				page: 1,
+				perPage: 1
+			},
+			filter: props.filter
+		}), { enabled: () => id.value != null });
+		const total = computed(() => query.data.value?.total);
+		return (_ctx, _cache) => {
+			return id.value == null ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [], 64)) : unref(query).isPending.value ? (openBlock(), createElementBlock(Fragment, { key: 1 }, [createTextVNode(toDisplayString(__props.loading), 1)], 64)) : unref(query).error.value ? (openBlock(), createElementBlock(Fragment, { key: 2 }, [createTextVNode(toDisplayString(__props.error), 1)], 64)) : total.value == null ? (openBlock(), createElementBlock(Fragment, { key: 3 }, [], 64)) : (openBlock(), createElementBlock("span", {
+				key: 4,
+				"data-slot": "reference-many-count",
+				class: normalizeClass(props.class)
+			}, toDisplayString(total.value), 3));
+		};
+	}
+});
+export { reference_many_count_vue_vue_type_script_setup_true_lang_default as default };

package/dist/components/admin/fields/reference-many-field.js

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