@chelone/vue 0.6.0 → 0.7.0

package/dist/i18n/use-locale.js

@@ -1,41 +1,54 @@
-import { ref, getCurrentScope, onScopeDispose, readonly } from "vue";
 import { useCheloneContext, useCheloneI18n } from "../context.js";
+import { getCurrentScope, onScopeDispose, readonly, ref } from "vue";
+// src/i18n/use-locale.ts
+/**
+* `useLocale` / `useSetLocale` / `useLocaleState` / `useLocales` — the Vue twins of
+* `@chelone/react`'s locale hooks (`i18n-hooks.ts`). The locale is a readonly
+* ref fed by `i18n.subscribe`, so any computed or template that reads it
+* re-evaluates on `setLocale`.
+*
+* Unlike the React twin, `useLocale` gives `"en"` without an i18n instance
+* instead of throwing: components such as the currency field and input render
+* without one. `useSetLocale` still throws then, as there is nothing to set.
+*/
+/** The app locale as a readonly ref, `"en"` when no i18n was passed to `<Admin>`. */
 function useLocale() {
-  const { i18n } = useCheloneContext();
-  const locale = ref(i18n?.getLocale() ?? "en");
-  if (i18n && getCurrentScope()) {
-    onScopeDispose(
-      i18n.subscribe(() => {
-        locale.value = i18n.getLocale();
-      })
-    );
-  }
-  return readonly(locale);
+	const { i18n } = useCheloneContext();
+	const locale = ref(i18n?.getLocale() ?? "en");
+	if (i18n && getCurrentScope()) onScopeDispose(i18n.subscribe(() => {
+		locale.value = i18n.getLocale();
+	}));
+	return readonly(locale);
 }
+/** A stable `setLocale`. Throws when no i18n was passed to `<Admin>`. */
 function useSetLocale() {
-  const i18n = useCheloneI18n();
-  return (locale) => i18n.setLocale(locale);
+	const i18n = useCheloneI18n();
+	return (locale) => i18n.setLocale(locale);
 }
+/** The `[locale, setLocale]` pair. */
 function useLocaleState() {
-  return [useLocale(), useSetLocale()];
+	return [useLocale(), useSetLocale()];
 }
+/**
+* The locales the i18n instance registers, each named in its own language
+* ("Deutsch", not "German") so a user lost in the wrong language can find theirs.
+*
+* `getLocales()` returns bare codes. A code `Intl` rejects keeps the code as its
+* name. Without an i18n instance the list is empty rather than throwing, so
+* `<AppBar>` keeps rendering in an app that never passed one.
+*/
 function useLocales() {
-  const { i18n } = useCheloneContext();
-  return (i18n?.getLocales() ?? []).map((locale) => ({
-    locale,
-    name: localeName(locale)
-  }));
+	const { i18n } = useCheloneContext();
+	return (i18n?.getLocales() ?? []).map((locale) => ({
+		locale,
+		name: localeName(locale)
+	}));
 }
 function localeName(locale) {
-  try {
-    return new Intl.DisplayNames([locale], { type: "language" }).of(locale) ?? locale;
-  } catch {
-    return locale;
-  }
+	try {
+		return new Intl.DisplayNames([locale], { type: "language" }).of(locale) ?? locale;
+	} catch {
+		return locale;
+	}
 }
-export {
-  useLocale,
-  useLocaleState,
-  useLocales,
-  useSetLocale
-};
+export { useLocale, useLocaleState, useLocales, useSetLocale };

package/dist/i18n/use-translatable.d.ts

@@ -5,6 +5,7 @@
  * `selectLocale`. A translatable form calls `provideTranslatable` and each
  * translatable input or field below it reads `useTranslatableContext`.
  */
+import { type RecordForLocale } from "@chelone/core";
 import { type MaybeRefOrGetter, type Ref } from "vue";
 export interface UseTranslatableOptions {
     /**
@@ -26,7 +27,7 @@ export interface TranslatableContext {
     /** Throws when `locale` is not one of `locales`. */
     selectLocale(locale: string): void;
     /** `record` with each translation map replaced by its selected-locale value. */
-    getRecordForLocale<T extends object | null | undefined>(record: T): T extends object ? Record<string, unknown> : T;
+    getRecordForLocale<T extends object | null | undefined>(record: T): T extends object ? RecordForLocale<T> : T;
 }
 export declare function useTranslatable(options: UseTranslatableOptions): TranslatableContext;
 export declare function provideTranslatable(context: TranslatableContext): void;

package/dist/i18n/use-translatable.js

@@ -1,69 +1,66 @@
-import { getRecordForLocale, createTranslatableController } from "@chelone/core";
-import { shallowRef, watch, toValue, onScopeDispose, computed, provide, inject } from "vue";
 import { useLocale } from "./use-locale.js";
-const TranslatableKey = /* @__PURE__ */ Symbol(
-  "chelone-translatable"
-);
+import { computed, inject, onScopeDispose, provide, shallowRef, toValue, watch } from "vue";
+import { createTranslatableController, getRecordForLocale } from "@chelone/core";
+// src/i18n/use-translatable.ts
+/**
+* `useTranslatable` and the translatable context — the Vue bridge for core's
+* `createTranslatableController`. The selected locale is a readonly ref fed by
+* the controller's `subscribe`, so anything that reads it re-evaluates on
+* `selectLocale`. A translatable form calls `provideTranslatable` and each
+* translatable input or field below it reads `useTranslatableContext`.
+*/
+var TranslatableKey = Symbol("chelone-translatable");
 function useTranslatable(options) {
-  const appLocale = useLocale();
-  function build(preferred) {
-    const locales = toValue(options.locales);
-    const defaultLocale = toValue(options.defaultLocale);
-    const start = [preferred, defaultLocale, appLocale.value].find(
-      (locale) => locale !== void 0 && locales.includes(locale)
-    );
-    return createTranslatableController({ locales, defaultLocale: start });
-  }
-  let controller = build(void 0);
-  let release = () => {
-  };
-  const state = shallowRef(controller.getSnapshot());
-  function attach(next) {
-    release();
-    controller = next;
-    state.value = next.getSnapshot();
-    release = next.subscribe(() => {
-      state.value = next.getSnapshot();
-    });
-  }
-  attach(controller);
-  watch(
-    () => JSON.stringify(toValue(options.locales)),
-    () => {
-      const previous = controller;
-      attach(build(previous.getSnapshot().selectedLocale));
-      previous.destroy();
-    },
-    { flush: "sync" }
-  );
-  onScopeDispose(() => {
-    release();
-    controller.destroy();
-  });
-  const selectedLocale = computed(() => state.value.selectedLocale);
-  return {
-    get locales() {
-      return state.value.locales;
-    },
-    selectedLocale,
-    selectLocale: (locale) => controller.selectLocale(locale),
-    getRecordForLocale: (record) => getRecordForLocale(record, state.value.selectedLocale, state.value.locales)
-  };
+	const appLocale = useLocale();
+	function build(preferred) {
+		const locales = toValue(options.locales);
+		const start = [
+			preferred,
+			toValue(options.defaultLocale),
+			appLocale.value
+		].find((locale) => locale !== void 0 && locales.includes(locale));
+		return createTranslatableController({
+			locales,
+			defaultLocale: start
+		});
+	}
+	let controller = build(void 0);
+	let release = () => {};
+	const state = shallowRef(controller.getSnapshot());
+	function attach(next) {
+		release();
+		controller = next;
+		state.value = next.getSnapshot();
+		release = next.subscribe(() => {
+			state.value = next.getSnapshot();
+		});
+	}
+	attach(controller);
+	watch(() => JSON.stringify(toValue(options.locales)), () => {
+		const previous = controller;
+		attach(build(previous.getSnapshot().selectedLocale));
+		previous.destroy();
+	}, { flush: "sync" });
+	onScopeDispose(() => {
+		release();
+		controller.destroy();
+	});
+	return {
+		get locales() {
+			return state.value.locales;
+		},
+		selectedLocale: computed(() => state.value.selectedLocale),
+		selectLocale: (locale) => controller.selectLocale(locale),
+		getRecordForLocale: (record) => getRecordForLocale(record, state.value.selectedLocale, state.value.locales)
+	};
 }
 function provideTranslatable(context) {
-  provide(TranslatableKey, context);
+	provide(TranslatableKey, context);
 }
+/** The context a translatable form provided. Throws outside one. */
 function useTranslatableContext() {
-  const context = inject(TranslatableKey, void 0);
-  if (!context) {
-    throw new Error(
-      "useTranslatableContext must be used under a component that calls provideTranslatable"
-    );
-  }
-  return context;
+	const context = inject(TranslatableKey, void 0);
+	if (!context) throw new Error("useTranslatableContext must be used under a component that calls provideTranslatable");
+	return context;
 }
-export {
-  provideTranslatable,
-  useTranslatable,
-  useTranslatableContext
-};
+export { provideTranslatable, useTranslatable, useTranslatableContext };

package/dist/i18n/use-translate.d.ts

@@ -12,7 +12,8 @@
  * The returned `translate` reads the reactive locale from `useLocale`, so
  * anything calling it re-evaluates on `i18n.setLocale`.
  */
+import { type TranslateParamValues } from "@chelone/core";
 /** The translate signature the components consume. */
-export type Translate = (key: string, params?: Record<string, unknown>) => string;
+export type Translate = (key: string, params?: TranslateParamValues) => string;
 /** A bound `translate` over the ambient i18n, or an echo when none is present. */
 export declare function useTranslate(): Translate;

package/dist/i18n/use-translate.js

@@ -1,19 +1,33 @@
-import { createI18n } from "@chelone/core";
 import { useCheloneContext } from "../context.js";
 import { useLocale } from "./use-locale.js";
-const echoI18n = createI18n({
-  locale: "en",
-  messages: { en: {} }
+import { createI18n } from "@chelone/core";
+// src/i18n/use-translate.ts
+/**
+* `useTranslate` — the Vue twin of `@chelone/react`'s `useTranslate`
+* (`i18n-hooks.ts`). Returns a bound `translate(key, params?)` closure over the
+* ambient i18n instance. When no i18n was passed to `<Admin>`, it degrades to an
+* echo (`key => key`) so components (a label, a `<ValidationError>`) still
+* render readable text in tests / i18n-less setups instead of throwing.
+*
+* The fallback is a core i18n over an empty catalog: it echoes the key on a
+* miss, and honours the polyglot `{ _: message }` default (placeholders filled
+* in) exactly as a real instance does, so ra-core style labels still read well.
+*
+* The returned `translate` reads the reactive locale from `useLocale`, so
+* anything calling it re-evaluates on `i18n.setLocale`.
+*/
+var echoI18n = createI18n({
+	locale: "en",
+	messages: { en: {} }
 });
+/** A bound `translate` over the ambient i18n, or an echo when none is present. */
 function useTranslate() {
-  const { i18n } = useCheloneContext();
-  const active = i18n ?? echoI18n;
-  const locale = useLocale();
-  return (key, params) => {
-    void locale.value;
-    return active.translate(key, params);
-  };
+	const { i18n } = useCheloneContext();
+	const active = i18n ?? echoI18n;
+	const locale = useLocale();
+	return (key, params) => {
+		locale.value;
+		return active.translate(key, params);
+	};
 }
-export {
-  useTranslate
-};
+export { useTranslate };

package/dist/index.d.ts

@@ -1,3 +1,17 @@
+import type { ResourceRecord } from "@chelone/core";
+import type { Component } from "vue";
+/**
+ * How a record renders as a label: a source path, a function returning text,
+ * or a component. Set it as a `<Resource>`'s `recordRepresentation`.
+ */
+export type RecordRepresentation = string | ((record: ResourceRecord) => string | number) | Component;
+declare module "@chelone/core" {
+    interface ResourceSlots {
+        icon: Component;
+        representation: RecordRepresentation;
+        component: Component;
+    }
+}
 export type { AdminProps } from "./admin/admin.vue.js";
 export { default as Admin } from "./admin/admin.vue.js";
 export type { AuthGateState, HandleAuthCallbackResult, UseAuthenticatedOptions, } from "./admin/auth-gate.js";
@@ -41,8 +55,8 @@ export type { UseCheckForApplicationUpdateOptions } from "./data/use-check-for-a
 export { useCheckForApplicationUpdate } from "./data/use-check-for-application-update.js";
 export { useIsOffline } from "./data/use-is-offline.js";
 export { useLoading, useRefresh } from "./data/use-refresh.js";
-export type { CheloneFormContextValue, FormGroupProviderProps, FormGroupsProviderProps, FormSubmit, OptionalSaveFormProps, TabbedFormProps, TabbedFormTabProps, UseFormOptions, UseFormReturn, UseInputOptions, UseInputReturn, UseTabbedFormResult, UseWizardFormResult, WarnWhenUnsavedChangesDecision, WizardFormProps, WizardFormStepProps, } from "./form/index.js";
-export { CheloneFormContextKey, decodePath, FormGroupProvider, FormGroupsProvider, firstFieldError, provideCheloneForm, provideFormGroup, provideFormGroups, provideSourceScope, SourceScopeKey, splatBase, TabbedForm, TabbedFormTab, useCheloneFormContext, useForm, useFormGroup, useFormGroupName, useFormGroups, useInput, useOptionalCheloneFormContext, useOptionalFormGroups, useRegisterFieldGroup, useSourceScope, useTabbedFormContext, useWarnWhenUnsavedChanges, useWizardForm, useWizardFormContext, useWrappedSource, WizardForm, WizardFormStep, } from "./form/index.js";
+export type { CheloneFormContextValue, FormGroupProviderProps, FormGroupsProviderProps, FormSubmit, NamedFormHandle, OptionalSaveFormProps, TabbedFormProps, TabbedFormTabProps, UseFormOptions, UseFormReturn, UseInputOptions, UseInputReturn, UseTabbedFormResult, UseWizardFormResult, WarnWhenUnsavedChangesDecision, WizardFormProps, WizardFormStepProps, } from "./form/index.js";
+export { CheloneFormContextKey, decodePath, FormGroupProvider, FormGroupsProvider, firstFieldError, provideCheloneForm, provideFormGroup, provideFormGroups, provideSourceScope, SourceScopeKey, splatBase, TabbedForm, TabbedFormTab, useCheloneFormContext, useForm, useFormGroup, useFormGroupName, useFormGroups, useFormHandle, useInput, useOptionalCheloneFormContext, useOptionalFormGroups, useRegisterFieldGroup, useSourceScope, useTabbedFormContext, useWarnWhenUnsavedChanges, useWizardForm, useWizardFormContext, useWrappedSource, WizardForm, WizardFormStep, } from "./form/index.js";
 export type { Subscribable } from "./form/subscribe-ref.js";
 export { subscribeStore, useSubscribable } from "./form/subscribe-ref.js";
 export { useLocale, useLocaleState, useLocales, useSetLocale, } from "./i18n/use-locale.js";
@@ -75,7 +89,7 @@ export { usePresence } from "./realtime/presence.js";
 export type { UseSubscribeOptions } from "./realtime/subscribe.js";
 export { useOnReconnect, usePublish, useRealtimeStatus, useSubscribe, useSubscribeCallback, useSubscribeToRecord, useSubscribeToRecordList, } from "./realtime/subscribe.js";
 export type { RecordValue, UseRecordContextOptions, } from "./record/record-context.js";
-export { provideRecordContext, RecordContextKey, useRecordContext, } from "./record/record-context.js";
+export { provideRecordContext, RecordContextKey, useRecordContext, useRecordContextRef, } from "./record/record-context.js";
 export type { UseFieldValueOptions } from "./record/use-field-value.js";
 export { useFieldValue } from "./record/use-field-value.js";
 export type { UseResourceContextOptions } from "./resource-context.js";