@chelone/vue 0.0.0-stage → 0.1.0

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

@@ -0,0 +1,69 @@
+import { defineComponent, computed, openBlock, createElementBlock, Fragment, normalizeClass, toDisplayString, createCommentVNode } from "vue";
+import { parsePhoneNumber } from "libphonenumber-js";
+import { useFieldValue } from "../../../record/use-field-value.js";
+import { useTranslate } from "../../../i18n/use-translate.js";
+const _hoisted_1 = ["href"];
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "phone-field",
+  props: {
+    source: {},
+    record: {},
+    defaultValue: {},
+    empty: {},
+    displayFormat: {},
+    link: { type: Boolean, default: true },
+    class: {}
+  },
+  setup(__props) {
+    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
+    );
+    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 {
+  _sfc_main as default
+};

package/dist/components/admin/fields/phone-field2.vue.js

@@ -0,0 +1,4 @@
+import _sfc_main from "./phone-field.vue.js";
+export {
+  _sfc_main as default
+};

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

@@ -0,0 +1,17 @@
+import type { LooseRecord } from "@chelone/core";
+/** Props for {@link RatingField}. */
+export interface RatingFieldProps {
+    source: string;
+    record?: LooseRecord;
+    defaultValue?: unknown;
+    empty?: string;
+    /** Total stars rendered (filled + outlined). Default 5. */
+    max?: number;
+    /** Allow half-star granularity when the value falls between integers. */
+    allowHalf?: boolean;
+    /** Sibling record source rendered in parentheses (e.g. a review count). */
+    countSource?: string;
+    class?: string;
+}
+declare const _default: import("vue").DefineComponent<RatingFieldProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<RatingFieldProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

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

@@ -0,0 +1,111 @@
+import { defineComponent, computed, inject, openBlock, createElementBlock, normalizeClass, createElementVNode, Fragment, renderList, toDisplayString, createCommentVNode } from "vue";
+import { useFieldValue } from "../../../record/use-field-value.js";
+import { RecordContextKey } from "../../../record/record-context.js";
+import { useTranslate } from "../../../i18n/use-translate.js";
+const _hoisted_1 = ["aria-label"];
+const _hoisted_2 = { class: "inline-flex" };
+const _hoisted_3 = ["fill", "data-rating-star"];
+const _hoisted_4 = {
+  key: 0,
+  class: "text-muted-foreground text-sm"
+};
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "rating-field",
+  props: {
+    source: {},
+    record: {},
+    defaultValue: {},
+    empty: {},
+    max: {},
+    allowHalf: { type: Boolean },
+    countSource: {},
+    class: {}
+  },
+  setup(__props) {
+    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)
+    );
+    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 - 0.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 {
+  _sfc_main as default
+};

package/dist/components/admin/fields/rating-field2.vue.js

@@ -0,0 +1,4 @@
+import _sfc_main from "./rating-field.vue.js";
+export {
+  _sfc_main as default
+};

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

@@ -0,0 +1,35 @@
+import type { Component } from "vue";
+import type { LooseRecord } from "@chelone/core";
+/** Props for {@link RecordField}. */
+export interface RecordFieldProps<RecordType = LooseRecord> {
+    source?: string;
+    /** Explicit label, or `false`/`""` to hide it. Absent → humanized `source`. */
+    label?: string | false;
+    /** Override the ambient resource (reserved for label i18n; inert in V1). */
+    resource?: string;
+    record?: RecordType;
+    empty?: string;
+    /** A field component to render (given `source` + `empty`) instead of TextField. */
+    field?: Component;
+    /** 'inline' lays the label + value in a row; 'default' stacks them. */
+    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;
+    attrs: any;
+    slots: {
+        /** Receives the resolved record; renders children or derived content. */
+        default?(props: {
+            record: RecordType;
+        }): unknown;
+    };
+    emit: {};
+}>) => import("vue").VNode & {
+    __ctx?: Awaited<typeof __VLS_setup>;
+};
+export default _default;
+type __VLS_PrettifyLocal<T> = {
+    [K in keyof T]: T[K];
+} & {};

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

@@ -0,0 +1,80 @@
+import { defineComponent, useSlots, inject, computed, openBlock, createElementBlock, normalizeClass, unref, toDisplayString, createCommentVNode, renderSlot, createBlock, resolveDynamicComponent } from "vue";
+import { cn } from "../../../lib/utils.js";
+import { humanizeSource } from "../inputs/label-text.js";
+import { RecordContextKey } from "../../../record/record-context.js";
+import { useTranslate } from "../../../i18n/use-translate.js";
+import _sfc_main$1 from "./text-field.vue.js";
+const _hoisted_1 = {
+  key: 1,
+  class: "flex-1"
+};
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "record-field",
+  props: {
+    source: {},
+    label: { type: [String, Boolean], default: void 0 },
+    resource: {},
+    record: {},
+    empty: {},
+    field: {},
+    variant: {},
+    class: {}
+  },
+  setup(__props) {
+    const props = __props;
+    const slots = useSlots();
+    const translate = useTranslate();
+    const injectedRecord = inject(RecordContextKey, null);
+    const record = computed(
+      () => props.record ?? injectedRecord?.value
+    );
+    const hasSlot = computed(() => slots.default != null);
+    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 && record.value ? (openBlock(), createElementBlock("span", _hoisted_1, [
+          renderSlot(_ctx.$slots, "default", { record: record.value })
+        ])) : __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(_sfc_main$1, {
+          key: 3,
+          source: __props.source,
+          empty: emptyText.value,
+          class: "flex-1"
+        }, null, 8, ["source", "empty"])) : createCommentVNode("", true)
+      ], 2)) : createCommentVNode("", true);
+    };
+  }
+});
+export {
+  _sfc_main as default
+};

package/dist/components/admin/fields/record-field2.vue.js

@@ -0,0 +1,4 @@
+import _sfc_main from "./record-field.vue.js";
+export {
+  _sfc_main as default
+};

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

@@ -0,0 +1,25 @@
+import type { FilterPayload, LooseRecord, SortPayload } from "@chelone/core";
+/** Props for {@link ReferenceArrayField}. */
+export interface ReferenceArrayFieldProps {
+    /** The FK-array field on the current record (e.g. `"tag_ids"`). */
+    source: string;
+    /** The referenced resource the ids point at (e.g. `"tags"`). */
+    reference: string;
+    /** The record to read the FK array off. Defaults to the ambient record. */
+    record?: LooseRecord;
+    /** Client-side sort for the resolved list. */
+    sort?: SortPayload;
+    /** Client-side filter for the resolved list. */
+    filter?: FilterPayload;
+    /** 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>, {
+    default?: (props: {}) => any;
+}>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

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

@@ -0,0 +1,46 @@
+import { defineComponent, computed, renderSlot } from "vue";
+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";
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "reference-array-field",
+  props: {
+    source: {},
+    reference: {},
+    record: {},
+    sort: {},
+    filter: {},
+    perPage: {}
+  },
+  setup(__props) {
+    const props = __props;
+    const value = useFieldValue({ source: props.source, record: props.record });
+    const ids = computed(
+      () => Array.isArray(value.value) ? 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 {
+  _sfc_main as default
+};

package/dist/components/admin/fields/reference-array-field2.vue.js

@@ -0,0 +1,4 @@
+import _sfc_main from "./reference-array-field.vue.js";
+export {
+  _sfc_main as default
+};

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

@@ -0,0 +1,47 @@
+/**
+ * `<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.
+ */
+import type { LooseRecord } from "@chelone/core";
+import type { LinkToType } from "../../../router/index.js";
+/** Props for {@link ReferenceField}. */
+export interface ReferenceFieldProps {
+    source: string;
+    reference: string;
+    record?: LooseRecord;
+    empty?: string;
+    /**
+     * Where the value links. Omit to infer the referenced record's show page, else
+     * its edit page, else no link; `false` renders no link.
+     */
+    link?: LinkToType;
+}
+declare const _default: __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.js

@@ -0,0 +1,76 @@
+import { defineComponent, computed, openBlock, createElementBlock, Fragment, toDisplayString, createCommentVNode, unref, createBlock, withModifiers, withCtx, renderSlot, createElementVNode } from "vue";
+import { RouterLink } from "vue-router";
+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";
+const _hoisted_1 = {
+  key: 0,
+  "data-slot": "reference-field"
+};
+const _hoisted_2 = { "data-slot": "reference-field" };
+const _hoisted_3 = { "data-slot": "reference-field" };
+const _hoisted_4 = {
+  key: 0,
+  "data-slot": "reference-field"
+};
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "reference-field",
+  props: {
+    source: {},
+    reference: {},
+    record: {},
+    empty: {},
+    link: { type: [String, Boolean, Function], default: void 0 }
+  },
+  setup(__props) {
+    const props = __props;
+    const fk = useFieldValue({ source: props.source, record: props.record });
+    const id = computed(() => fk.value);
+    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", { key: 1 }, () => [
+          createElementVNode("span", _hoisted_3, toDisplayString(representation.value), 1)
+        ])
+      ], 64)) : (openBlock(), createElementBlock(Fragment, { key: 3 }, [
+        __props.empty ? (openBlock(), createElementBlock("span", _hoisted_4, toDisplayString(__props.empty), 1)) : createCommentVNode("", true)
+      ], 64));
+    };
+  }
+});
+export {
+  _sfc_main as default
+};

package/dist/components/admin/fields/reference-field2.vue.js

@@ -0,0 +1,4 @@
+import _sfc_main from "./reference-field.vue.js";
+export {
+  _sfc_main as default
+};

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

@@ -0,0 +1,22 @@
+import type { FilterPayload, LooseRecord } from "@chelone/core";
+/** Props for {@link ReferenceManyCount}. */
+export interface ReferenceManyCountProps {
+    /** The referenced resource holding the reverse FK (e.g. `"books"`). */
+    reference: string;
+    /** The FK field on the reference pointing back at this record (e.g. `"author_id"`). */
+    target: string;
+    /** The field on the current record the `target` matches. Default `"id"`. */
+    source?: string;
+    /** The record whose id is matched. Defaults to the ambient record. */
+    record?: LooseRecord;
+    /** Permanent filter merged into the lookup, so only matching rows are counted. */
+    filter?: FilterPayload;
+    /** Shown while the count is loading. Nothing by default. */
+    loading?: string;
+    /** Shown when the lookup rejects. Nothing by default. */
+    error?: string;
+    /** 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>;
+export default _default;

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

@@ -0,0 +1,52 @@
+import { defineComponent, computed, openBlock, createElementBlock, Fragment, unref, createTextVNode, toDisplayString, normalizeClass } from "vue";
+import { useGetManyReference } from "../../../data/queries.js";
+import { useFieldValue } from "../../../record/use-field-value.js";
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "reference-many-count",
+  props: {
+    reference: {},
+    target: {},
+    source: {},
+    record: {},
+    filter: {},
+    loading: {},
+    error: {},
+    class: {}
+  },
+  setup(__props) {
+    const props = __props;
+    const fieldValue = useFieldValue({
+      source: props.source ?? "id",
+      get record() {
+        return props.record;
+      }
+    });
+    const id = computed(() => fieldValue.value);
+    const query = useGetManyReference(
+      props.reference,
+      () => ({
+        target: props.target,
+        // Never sent: the query is disabled without an id.
+        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 {
+  _sfc_main as default
+};

package/dist/components/admin/fields/reference-many-count2.vue.js

@@ -0,0 +1,4 @@
+import _sfc_main from "./reference-many-count.vue.js";
+export {
+  _sfc_main as default
+};

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

@@ -0,0 +1,33 @@
+import type { FilterPayload, LooseRecord, SortPayload } from "@chelone/core";
+/** Props for {@link ReferenceManyField}. */
+export interface ReferenceManyFieldProps {
+    /** The referenced resource holding the reverse FK (e.g. `"books"`). */
+    reference: string;
+    /** The FK field on the reference pointing back at this record (e.g. `"author_id"`). */
+    target: string;
+    /** The field on the current record the `target` matches. Default `"id"`. */
+    source?: string;
+    /** The record whose id is matched. Defaults to the ambient record. */
+    record?: LooseRecord;
+    /** Initial sort of the related list. Default id ascending. */
+    sort?: SortPayload;
+    /** Permanent filter merged into the reference lookup. */
+    filter?: FilterPayload;
+    /** Page size for the related list. Default 25. */
+    perPage?: number;
+    /** KV namespace for the list params and selection. Default `${reference}.${target}.${id}`; `false` keeps them in memory. */
+    storeKey?: string | false;
+    /** Debounce delay in ms for debounced `setFilters` calls. Default 500. */
+    debounce?: number;
+}
+declare const _default: __VLS_WithSlots<import("vue").DefineComponent<ReferenceManyFieldProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ReferenceManyFieldProps> & Readonly<{}>, {
+    storeKey: string | false;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
+    default?: (props: {}) => any;
+}>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};