origam 2.10.0 → 2.12.0

package/dist/src/components/Avatar/OrigamAvatar.vue

@@ -1,6 +1,6 @@
 <template>
 	<component
-			:is="tag"
+			:is="props.tag"
 			:id="id"
 			:class="avatarClasses"
 			@click="handleClick"

package/dist/src/components/Btn/OrigamBtnGroup.vue

@@ -1,6 +1,6 @@
 <template>
 	<component
-			:is="tag"
+			:is="props.tag"
 			:id="id"
 			role="group"
 			:class="btnGroupClasses"
@@ -30,6 +30,7 @@ import { OrigamBtn, OrigamDefaultsProvider } from "../../components";
 import {
   useDefaults,
   useDensity,
+  usePassedProps,
   useProps,
   useSize,
   useStateEffect,
@@ -37,6 +38,7 @@ import {
   useVariant
 } from "../../composables";
 import { DENSITY } from "../../enums";
+import { omitUndefined } from "../../utils";
 import { computed, StyleValue, useSlots } from "vue";
 const _props = defineProps({
   divided: { type: Boolean, required: false },
@@ -89,19 +91,33 @@ const _props = defineProps({
 });
 const props = useDefaults(_props);
 const { filterProps } = useProps(props);
+const wasPropPassed = usePassedProps(props);
 const slotDefaults = computed(() => ({
-  "origam-btn": {
+  "origam-btn": omitUndefined({
+    // `variant` is the ONE deliberate exception, kept unconditional:
+    // `--variant-text` (the group's own root default, and every
+    // child's own component default) has NO active-state background
+    // rule at all — only `outlined`/`tonal` paint a filled surface
+    // on the selected segment (see OrigamBtn.vue's
+    // `&--variant-outlined { &--active { background-color: ... } }`).
+    // The group's OWN resolved `variant` (whether explicitly passed,
+    // or resolved from a theme's `'origam-btn-group'` defaults) must
+    // always reach the children — else a themed
+    // `<origam-btn-toggle variant="outlined">` gets the right root
+    // chrome but every child silently stays on 'text', so the active
+    // segment never fills — no visible selection at all.
     variant: props.variant,
-    density: props.density,
-    color: props.color,
-    bgColor: props.bgColor,
-    size: props.size,
+    density: wasPropPassed("density") ? props.density : void 0,
+    color: wasPropPassed("color") ? props.color : void 0,
+    bgColor: wasPropPassed("bgColor") ? props.bgColor : void 0,
+    size: wasPropPassed("size") ? props.size : void 0,
     // New API: `hover` / `active` accept boolean | IHoverState |
     // IActiveState; pass-through propagates the parent's intent
-    // override to each child OrigamBtn.
-    hover: props.hover,
-    active: props.active
-  }
+    // override to each child OrigamBtn — only when the consumer
+    // actually set it.
+    hover: wasPropPassed("hover") ? props.hover : void 0,
+    active: wasPropPassed("active") ? props.active : void 0
+  })
 }));
 const items = computed(() => props.items ?? []);
 const slots = useSlots();

package/dist/src/components/Checkbox/OrigamCheckboxBtn.vue

@@ -77,7 +77,26 @@ const props = defineProps({
   bgColor: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
   active: { type: [Boolean, Object], required: false },
   activeClass: { type: String, required: false },
-  hover: { type: [Boolean, Object], required: false }
+  hover: { type: [Boolean, Object], required: false },
+  border: { type: [Boolean, Number, String, Array], required: false, skipCheck: true },
+  borderTop: { type: [Boolean, Number, String], required: false },
+  borderLeft: { type: [Boolean, Number, String], required: false },
+  borderBottom: { type: [Boolean, Number, String], required: false },
+  borderRight: { type: [Boolean, Number, String], required: false },
+  borderBlock: { type: [Boolean, Number, String], required: false },
+  borderInline: { type: [Boolean, Number, String], required: false },
+  borderColor: { type: String, required: false },
+  borderStyle: { type: String, required: false },
+  borderTopColor: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
+  borderRightColor: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
+  borderBottomColor: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
+  borderLeftColor: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
+  rounded: { type: [Boolean, Number, String, null], required: false, skipCheck: true },
+  roundedTopRight: { type: [Boolean, Number, String], required: false },
+  roundedTopLeft: { type: [Boolean, Number, String], required: false },
+  roundedBottomLeft: { type: [Boolean, Number, String], required: false },
+  roundedBottomRight: { type: [Boolean, Number, String], required: false },
+  elevation: { type: [Number, String], required: false }
 });
 const emits = defineEmits(["update:indeterminate", "update:modelValue", "update:focused", "click:label"]);
 defineSlots();

package/dist/src/components/ExpansionPanel/OrigamExpansionPanel.vue

@@ -1,6 +1,6 @@
 <template>
 	<component
-			:is="tag"
+			:is="props.tag"
 			v-contrast
 			:class="expansionPanelClasses"
 			:style="expansionPanelStyles"

package/dist/src/components/Label/OrigamLabel.vue

@@ -1,6 +1,6 @@
 <template>
 	<component
-			:is="tag"
+			:is="props.tag"
 			:id="id"
 			v-contrast
 			:class="labelClasses"

package/dist/src/components/Messages/OrigamMessages.vue

@@ -4,7 +4,7 @@
 			:transition="transition"
 	>
 		<component
-				:is="tag"
+				:is="props.tag"
 				:class="messagesClasses"
 				:style="[messagesStyles, rootTypographyStyles]"
 				aria-live="polite"

package/dist/src/components/Radio/OrigamRadioBtn.vue

@@ -73,7 +73,26 @@ const props = defineProps({
   bgColor: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
   active: { type: [Boolean, Object], required: false },
   activeClass: { type: String, required: false },
-  hover: { type: [Boolean, Object], required: false }
+  hover: { type: [Boolean, Object], required: false },
+  border: { type: [Boolean, Number, String, Array], required: false, skipCheck: true },
+  borderTop: { type: [Boolean, Number, String], required: false },
+  borderLeft: { type: [Boolean, Number, String], required: false },
+  borderBottom: { type: [Boolean, Number, String], required: false },
+  borderRight: { type: [Boolean, Number, String], required: false },
+  borderBlock: { type: [Boolean, Number, String], required: false },
+  borderInline: { type: [Boolean, Number, String], required: false },
+  borderColor: { type: String, required: false },
+  borderStyle: { type: String, required: false },
+  borderTopColor: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
+  borderRightColor: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
+  borderBottomColor: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
+  borderLeftColor: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
+  rounded: { type: [Boolean, Number, String, null], required: false, skipCheck: true },
+  roundedTopRight: { type: [Boolean, Number, String], required: false },
+  roundedTopLeft: { type: [Boolean, Number, String], required: false },
+  roundedBottomLeft: { type: [Boolean, Number, String], required: false },
+  roundedBottomRight: { type: [Boolean, Number, String], required: false },
+  elevation: { type: [Number, String], required: false }
 });
 const emits = defineEmits(["update:modelValue", "update:focused", "click:label"]);
 const { filterProps } = useProps(props);

package/dist/src/components/SelectionControl/OrigamSelectionControl.vue

@@ -15,7 +15,8 @@
 
       <div
         v-ripple="rippleProp"
-        class="origam-selection-control__input"
+        :class="selectionControlInputClasses"
+        :style="selectionControlInputStyles"
       >
         <slot
           name="input"
@@ -69,10 +70,13 @@ import { computed, inject, nextTick, ref, shallowRef, StyleValue, useAttrs } fro
 import { ORIGAM_SELECTION_CONTROL_GROUP_KEY } from "../../consts";
 import { OrigamIcon, OrigamLabel } from "../../components";
 import {
+  useBorder,
   useDefaults,
   useDensity,
+  useElevation,
   useHover,
   useProps,
+  useRounded,
   useStateEffect,
   useStyle,
   useTextColor,
@@ -108,7 +112,26 @@ const _props = defineProps({
   bgColor: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
   active: { type: [Boolean, Object], required: false },
   activeClass: { type: String, required: false },
-  hover: { type: [Boolean, Object], required: false }
+  hover: { type: [Boolean, Object], required: false },
+  border: { type: [Boolean, Number, String, Array], required: false, skipCheck: true },
+  borderTop: { type: [Boolean, Number, String], required: false },
+  borderLeft: { type: [Boolean, Number, String], required: false },
+  borderBottom: { type: [Boolean, Number, String], required: false },
+  borderRight: { type: [Boolean, Number, String], required: false },
+  borderBlock: { type: [Boolean, Number, String], required: false },
+  borderInline: { type: [Boolean, Number, String], required: false },
+  borderColor: { type: String, required: false },
+  borderStyle: { type: String, required: false },
+  borderTopColor: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
+  borderRightColor: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
+  borderBottomColor: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
+  borderLeftColor: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
+  rounded: { type: [Boolean, Number, String, null], required: false, skipCheck: true },
+  roundedTopRight: { type: [Boolean, Number, String], required: false },
+  roundedTopLeft: { type: [Boolean, Number, String], required: false },
+  roundedBottomLeft: { type: [Boolean, Number, String], required: false },
+  roundedBottomRight: { type: [Boolean, Number, String], required: false },
+  elevation: { type: [Number, String], required: false }
 });
 const props = useDefaults(_props);
 const emits = defineEmits(["click:label", "update:modelValue"]);
@@ -202,6 +225,9 @@ const bgColor = computed(() => {
   return model.value ? props.activeBgColor || props.bgColor : props.bgColor;
 });
 const { textColorClasses: wrapperColorClasses, textColorStyles: wrapperColorStyles } = useTextColor(color);
+const { borderClasses, borderStyles } = useBorder(props);
+const { roundedClasses, roundedStyles } = useRounded(props);
+const { elevationClasses, elevationStyles } = useElevation(props);
 const rippleProp = computed(() => {
   if (props.ripple) {
     return [!props.disabled && !props.readonly, null, ["center", "circle"]];
@@ -219,6 +245,21 @@ const selectionControlWrapperClasses = computed(() => {
     wrapperColorClasses.value
   ];
 });
+const selectionControlInputClasses = computed(() => {
+  return [
+    "origam-selection-control__input",
+    borderClasses.value,
+    roundedClasses.value,
+    elevationClasses.value
+  ];
+});
+const selectionControlInputStyles = computed(() => {
+  return [
+    borderStyles.value,
+    roundedStyles.value,
+    elevationStyles.value
+  ];
+});
 const selectionControlClasses = computed(() => {
   return [
     "origam-selection-control",
@@ -254,7 +295,6 @@ defineExpose(forwardRefs({
     contain: layout;
     display: flex;
     flex: 1 0;
-    grid-area: control;
     position: relative;
     user-select: none;
 
@@ -307,7 +347,11 @@ defineExpose(forwardRefs({
         left: 0;
         width: 100%;
         height: 100%;
-        border-radius: 100%;
+        // Le halo suit la forme du contrôle. Codé en dur à 100%, il restait
+        // circulaire même sous `rounded="md"` : la seule surface que la prop
+        // pouvait peindre au repos ignorait la prop. `inherit` reprend le
+        // border-radius résolu par `useRounded` sur `__input`.
+        border-radius: inherit;
         background-color: currentColor;
         opacity: 0;
         pointer-events: none;

package/dist/src/components/Tabs/OrigamTab.vue

@@ -1,6 +1,6 @@
 <template>
 	<component
-			:is="tag"
+			:is="props.tag"
 			:id="tabDomId"
 			ref="rootRef"
 			v-contrast

package/dist/src/components/Tabs/OrigamTabs.vue

@@ -1,6 +1,6 @@
 <template>
 	<component
-			:is="tag"
+			:is="props.tag"
 			:id="id"
 			ref="rootRef"
 			role="tablist"

package/dist/src/composables/Commons/locale.composable.cjs

@@ -10,24 +10,22 @@ exports.provideRtl = provideRtl;
 exports.useLocale = useLocale;
 exports.useRtl = useRtl;
 var _vue = require("vue");
-var _vueI18n = require("vue-i18n");
 var origamMessages = _interopRequireWildcard(require("../../assets/locales/index.cjs"));
 var _consts = require("../../consts/index.cjs");
 var _utils = require("../../utils/index.cjs");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 function createLocale(options) {
-  const i18nOptions = (0, _utils.mergeDeep)({
+  const merged = (0, _utils.mergeDeep)({
     locale: "en",
     fallbackLocale: "en",
-    messages: JSON.parse(JSON.stringify(origamMessages)),
+    messages: JSON.parse(JSON.stringify(origamMessages))
     // Fix problems with json file imported
-    legacy: false
   }, options);
-  const i18n = (0, _vueI18n.createI18n)(i18nOptions);
-  const locale = (0, _utils.createVueI18nAdapter)({
-    i18n,
-    useI18n: _vueI18n.useI18n
+  const locale = options?.adapter ?? (0, _utils.createBuiltinAdapter)({
+    current: (0, _vue.ref)(merged.locale),
+    fallback: (0, _vue.ref)(merged.fallbackLocale),
+    messages: (0, _vue.computed)(() => merged.messages)
   });
   const rtl = createRtl(locale, options);
   return {

package/dist/src/composables/Commons/locale.composable.d.ts

@@ -1,4 +1,4 @@
-import type { ILocaleInstance, ILocaleOptions, ILocaleProps, IRtlInstance, IRtlOptions, IRtlProps } from "../../interfaces";
+import type { ILocaleInstance, ILocaleOptions, ILocaleProps, IRtlInstance, IRtlOptions, IRtlProps, ILocaleMessages } from "../../interfaces";
 /*********************************************************
  * createLocale
  ********************************************************/
@@ -6,7 +6,7 @@ export declare function createLocale(options?: ILocaleOptions & IRtlOptions): {
     isRtl: import("vue").Ref<boolean>;
     rtl: import("vue").Ref<Record<string, boolean>>;
     name: string;
-    messages: import("vue").ComputedRef<import("../../interfaces").ILocaleMessages>;
+    messages: import("vue").ComputedRef<ILocaleMessages>;
     current: import("vue").Ref<string>;
     fallback: import("vue").Ref<string>;
     t: (key: string, ...params: unknown[]) => string;
@@ -24,7 +24,7 @@ export declare function provideLocale(props: ILocaleProps & IRtlProps): {
     isRtl: import("vue").Ref<boolean>;
     rtl: import("vue").Ref<Record<string, boolean>>;
     name: string;
-    messages: import("vue").ComputedRef<import("../../interfaces").ILocaleMessages>;
+    messages: import("vue").ComputedRef<ILocaleMessages>;
     current: import("vue").Ref<string>;
     fallback: import("vue").Ref<string>;
     t: (key: string, ...params: unknown[]) => string;

package/dist/src/composables/Commons/locale.composable.js

@@ -1,18 +1,19 @@
 import { computed, inject, provide, ref } from "vue";
-import { createI18n, useI18n } from "vue-i18n";
 import * as origamMessages from "../../assets/locales/index.js";
 import { LOCALE_RTL_DEFAULT, ORIGAM_LOCALE_KEY } from "../../consts/index.js";
-import { createVueI18nAdapter, getCurrentInstanceName, mergeDeep } from "../../utils/index.js";
+import { createBuiltinAdapter, getCurrentInstanceName, mergeDeep } from "../../utils/index.js";
 export function createLocale(options) {
-  const i18nOptions = mergeDeep({
+  const merged = mergeDeep({
     locale: "en",
     fallbackLocale: "en",
-    messages: JSON.parse(JSON.stringify(origamMessages)),
+    messages: JSON.parse(JSON.stringify(origamMessages))
     // Fix problems with json file imported
-    legacy: false
   }, options);
-  const i18n = createI18n(i18nOptions);
-  const locale = createVueI18nAdapter({ i18n, useI18n });
+  const locale = options?.adapter ?? createBuiltinAdapter({
+    current: ref(merged.locale),
+    fallback: ref(merged.fallbackLocale),
+    messages: computed(() => merged.messages)
+  });
   const rtl = createRtl(locale, options);
   return { ...locale, ...rtl };
 }

package/dist/src/interfaces/Commons/locale.interface.d.ts

@@ -1,5 +1,4 @@
 import type { ComputedRef, Ref } from "vue";
-import type { I18n, useI18n } from "vue-i18n";
 export interface ILocaleMessages {
     [key: string]: ILocaleMessages | string;
 }
@@ -17,9 +16,37 @@ export interface ILocaleOptions {
     fallbackLocale: string;
     messages: Record<string, unknown>;
 }
+/**
+ * Formes STRUCTURELLES de vue-i18n, declarees localement.
+ *
+ * `vue-i18n` est un peer OPTIONNEL : le DS ne doit pas en dependre, meme au
+ * niveau des types. Un `import type` reste inoffensif a l'execution mais fait
+ * echouer le type-check d'un projet qui ne l'installe pas (des lors que
+ * `skipLibCheck` est a false) — c'est la meme classe de bug que l'import
+ * runtime, un cran plus loin.
+ *
+ * On decrit donc uniquement ce que le DS consomme reellement. Une vraie
+ * instance vue-i18n satisfait ces formes structurellement, sans que le DS ait
+ * a connaitre le paquet.
+ */
+export interface IVueI18nGlobalLike {
+    locale: Ref<string>;
+    fallbackLocale: unknown;
+    messages: unknown;
+    t: (key: string, ...args: unknown[]) => string;
+    n: (value: number, ...args: unknown[]) => string;
+}
+export interface IVueI18nLike {
+    global: IVueI18nGlobalLike;
+}
+export type TUseI18nLike = (options: Record<string, unknown>) => {
+    locale: Ref<string>;
+    t: (key: string, ...args: unknown[]) => string;
+    n: (value: number, ...args: unknown[]) => string;
+};
 export interface ILocaleI18n {
-    i18n: I18n<Record<string, unknown>, Record<string, unknown>, Record<string, unknown>, string, false>;
-    useI18n: typeof useI18n;
+    i18n: IVueI18nLike;
+    useI18n: TUseI18nLike;
 }
 export interface ILocaleProps {
     messages?: ILocaleMessages;

package/dist/src/interfaces/SelectionControl/selection-control.interface.d.ts

@@ -1,6 +1,17 @@
-import type { IActiveProps, IBgColorProps, IColorProps, ICommonsComponentEmits, ICommonsComponentProps, IDensityProps, ISelectionControlGroupProps, IHoverProps } from '../../interfaces';
+import type { IActiveProps, IBgColorProps, IBorderProps, IColorProps, ICommonsComponentEmits, ICommonsComponentProps, IDensityProps, IElevationProps, ISelectionControlGroupProps, IHoverProps, IRoundedProps } from '../../interfaces';
 import type { TColor, TIcon } from '../../types';
-export interface ISelectionControlProps extends ICommonsComponentProps, Partial<Omit<ISelectionControlGroupProps, 'items'>>, IColorProps, IBgColorProps, IActiveProps, IHoverProps, IDensityProps {
+/**
+ * `border` / `rounded` / `elevation` (props-first, issue #241) — declared
+ * here so `OrigamSelectionControl` (the element that owns the visible
+ * state-layer box behind the Checkbox/Radio glyph) can consume them via
+ * the standard `useBorder` / `useRounded` / `useElevation` composables,
+ * mirroring the `ISwitchTrackProps` pattern (the track owns the surface,
+ * not the outer `OrigamSwitch`). `ICheckboxBtnProps` / `IRadioBtnProps`
+ * extend this interface, so `OrigamCheckbox(Btn)` / `OrigamRadio(Btn)`
+ * forward these values down automatically through `filterProps` without
+ * any additional wiring.
+ */
+export interface ISelectionControlProps extends ICommonsComponentProps, Partial<Omit<ISelectionControlGroupProps, 'items'>>, IColorProps, IBgColorProps, IActiveProps, IHoverProps, IDensityProps, IBorderProps, IRoundedProps, IElevationProps {
     label?: string;
     trueValue?: any;
     falseValue?: any;

package/dist/src/utils/Commons/locale.util.cjs

@@ -3,6 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+exports.createBuiltinAdapter = createBuiltinAdapter;
 exports.createProvideFunction = createProvideFunction;
 exports.createVueI18nAdapter = createVueI18nAdapter;
 exports.useProvided = useProvided;
@@ -16,7 +17,7 @@ function callI18nT(fn, key, params) {
 }
 function createVueI18nAdapter({
   i18n,
-  useI18n: useI18n2
+  useI18n
 }) {
   const current = i18n.global.locale;
   const fallback = i18n.global.fallbackLocale;
@@ -32,7 +33,7 @@ function createVueI18nAdapter({
       current,
       fallback,
       messages,
-      useI18n: useI18n2
+      useI18n
     })
   };
 }
@@ -77,4 +78,59 @@ function useProvided(props, prop, provided) {
     }
   });
   return internal;
+}
+function resolveKey(messages, key) {
+  const value = key.split(".").reduce((acc, segment) => acc && typeof acc === "object" ? acc[segment] : void 0, messages);
+  return typeof value === "string" ? value : void 0;
+}
+function stringifyParam(raw) {
+  if (typeof raw === "string") return raw;
+  if (typeof raw === "number" || typeof raw === "boolean" || typeof raw === "bigint") {
+    return raw.toString();
+  }
+  return "";
+}
+function asNamedParams(params) {
+  if (params.length !== 1) return void 0;
+  const first = params[0];
+  if (first === null || typeof first !== "object" || Array.isArray(first)) return void 0;
+  return first;
+}
+function interpolate(template, params) {
+  const named = asNamedParams(params);
+  const lookup = token => {
+    if (named) return named[token];
+    if (/^\d+$/.test(token)) return params[Number(token)];
+    return void 0;
+  };
+  return template.replace(/\{([^{}]+)\}/g, (_match, token) => {
+    return stringifyParam(lookup(token));
+  });
+}
+function createBuiltinAdapter(data) {
+  const translate = (key, ...params) => {
+    if (typeof key !== "string" || !key) return key;
+    const all = data.messages.value;
+    const template = resolveKey(all?.[data.current.value] ?? {}, key) ?? resolveKey(all?.[data.fallback.value] ?? {}, key);
+    if (template === void 0) return key;
+    return params.length ? interpolate(template, params) : template;
+  };
+  return {
+    name: "origam-builtin",
+    current: data.current,
+    fallback: data.fallback,
+    messages: data.messages,
+    t: translate,
+    n: value => new Intl.NumberFormat(data.current.value).format(value),
+    provide: props => {
+      const current = useProvided(props, "locale", data.current);
+      const fallback = useProvided(props, "fallback", data.fallback);
+      const messages = useProvided(props, "messages", data.messages);
+      return createBuiltinAdapter({
+        current,
+        fallback,
+        messages
+      });
+    }
+  };
 }

package/dist/src/utils/Commons/locale.util.d.ts

@@ -1,6 +1,5 @@
 import { ComputedRef, Ref } from "vue";
-import { useI18n } from "vue-i18n";
-import type { ILocaleI18n, ILocaleInstance, ILocaleMessages, ILocaleProps } from "../../interfaces";
+import type { ILocaleI18n, ILocaleInstance, ILocaleMessages, ILocaleProps, TUseI18nLike } from "../../interfaces";
 /**
  * Create vue i 18 n adapter.
  *
@@ -17,7 +16,7 @@ export declare function createProvideFunction(data: {
     current: Ref<string>;
     fallback: Ref<string>;
     messages: ComputedRef<ILocaleMessages>;
-    useI18n: typeof useI18n;
+    useI18n: TUseI18nLike;
 }): (props: ILocaleProps) => ILocaleInstance;
 /**
  * Use provided.
@@ -28,3 +27,8 @@ export declare function createProvideFunction(data: {
  * @returns …
  */
 export declare function useProvided<T>(props: any, prop: string, provided: Ref<T>): Ref<T>;
+export declare function createBuiltinAdapter(data: {
+    current: Ref<string>;
+    fallback: Ref<string>;
+    messages: ComputedRef<ILocaleMessages>;
+}): ILocaleInstance;

package/dist/src/utils/Commons/locale.util.js

@@ -6,7 +6,7 @@ function callI18nT(fn, key, params) {
   const list = params.map((p) => p == null ? "" : p);
   return fn(key, list);
 }
-export function createVueI18nAdapter({ i18n, useI18n: useI18n2 }) {
+export function createVueI18nAdapter({ i18n, useI18n }) {
   const current = i18n.global.locale;
   const fallback = i18n.global.fallbackLocale;
   const messages = i18n.global.messages;
@@ -17,7 +17,7 @@ export function createVueI18nAdapter({ i18n, useI18n: useI18n2 }) {
     messages,
     t: (key, ...params) => callI18nT(i18n.global.t.bind(i18n.global), key, params),
     n: i18n.global.n,
-    provide: createProvideFunction({ current, fallback, messages, useI18n: useI18n2 })
+    provide: createProvideFunction({ current, fallback, messages, useI18n })
   };
 }
 export function createProvideFunction(data) {
@@ -57,3 +57,57 @@ export function useProvided(props, prop, provided) {
   });
   return internal;
 }
+function resolveKey(messages, key) {
+  const value = key.split(".").reduce(
+    (acc, segment) => acc && typeof acc === "object" ? acc[segment] : void 0,
+    messages
+  );
+  return typeof value === "string" ? value : void 0;
+}
+function stringifyParam(raw) {
+  if (typeof raw === "string") return raw;
+  if (typeof raw === "number" || typeof raw === "boolean" || typeof raw === "bigint") {
+    return raw.toString();
+  }
+  return "";
+}
+function asNamedParams(params) {
+  if (params.length !== 1) return void 0;
+  const first = params[0];
+  if (first === null || typeof first !== "object" || Array.isArray(first)) return void 0;
+  return first;
+}
+function interpolate(template, params) {
+  const named = asNamedParams(params);
+  const lookup = (token) => {
+    if (named) return named[token];
+    if (/^\d+$/.test(token)) return params[Number(token)];
+    return void 0;
+  };
+  return template.replace(/\{([^{}]+)\}/g, (_match, token) => {
+    return stringifyParam(lookup(token));
+  });
+}
+export function createBuiltinAdapter(data) {
+  const translate = (key, ...params) => {
+    if (typeof key !== "string" || !key) return key;
+    const all = data.messages.value;
+    const template = resolveKey(all?.[data.current.value] ?? {}, key) ?? resolveKey(all?.[data.fallback.value] ?? {}, key);
+    if (template === void 0) return key;
+    return params.length ? interpolate(template, params) : template;
+  };
+  return {
+    name: "origam-builtin",
+    current: data.current,
+    fallback: data.fallback,
+    messages: data.messages,
+    t: translate,
+    n: (value) => new Intl.NumberFormat(data.current.value).format(value),
+    provide: (props) => {
+      const current = useProvided(props, "locale", data.current);
+      const fallback = useProvided(props, "fallback", data.fallback);
+      const messages = useProvided(props, "messages", data.messages);
+      return createBuiltinAdapter({ current, fallback, messages });
+    }
+  };
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "origam",
-  "version": "2.10.0",
+  "version": "2.12.0",
   "type": "module",
   "description": "origam — a Vue 3 design system with multi-theme design tokens, CSS-first components and TypeScript types.",
   "keywords": [