sit-onyx 1.0.0-alpha.152 → 1.0.0-alpha.154

package/dist/components/OnyxSelect/OnyxSelect.vue.d.ts

@@ -5,11 +5,13 @@ declare const _default: <TValue extends SelectOptionValue = SelectOptionValue>(_
     props: __VLS_Prettify<__VLS_OmitKeepDiscriminatedUnion<(Partial<{}> & Omit<{
         "onUpdate:modelValue"?: ((value: SelectOption<TValue> | SelectOption<TValue>[] | undefined) => any) | undefined;
         onValidityChange?: ((validity: ValidityState) => any) | undefined;
+        "onUpdate:open"?: ((open: boolean) => any) | undefined;
         "onUpdate:searchTerm"?: ((searchTerm: string) => any) | undefined;
         onLazyLoad?: (() => any) | undefined;
     } & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps & Readonly<import('vue').ExtractPropTypes<{}>> & {
         "onUpdate:modelValue"?: ((value: SelectOption<TValue> | SelectOption<TValue>[] | undefined) => any) | undefined;
         onValidityChange?: ((validity: ValidityState) => any) | undefined;
+        "onUpdate:open"?: ((open: boolean) => any) | undefined;
         "onUpdate:searchTerm"?: ((searchTerm: string) => any) | undefined;
         onLazyLoad?: (() => any) | undefined;
     }, never>) & ({} & OnyxSelectProps<TValue>), keyof import('vue').VNodeProps | keyof import('vue').AllowedComponentProps>> & {} & (import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps);
@@ -54,7 +56,7 @@ declare const _default: <TValue extends SelectOptionValue = SelectOptionValue>(_
          */
         option?(props: SelectOption<TValue>): unknown;
     }>;
-    emit: ((evt: "validityChange", validity: ValidityState) => void) & ((evt: "update:modelValue", value: SelectOption<TValue> | SelectOption<TValue>[] | undefined) => void) & ((evt: "update:searchTerm", searchTerm: string) => void) & ((evt: "lazyLoad") => void);
+    emit: ((evt: "validityChange", validity: ValidityState) => void) & ((evt: "update:modelValue", value: SelectOption<TValue> | SelectOption<TValue>[] | undefined) => void) & ((evt: "update:open", open: boolean) => void) & ((evt: "update:searchTerm", searchTerm: string) => void) & ((evt: "lazyLoad") => void);
 }>) => import('vue').VNode<import('vue').RendererNode, import('vue').RendererElement, {
     [key: string]: any;
 }> & {

package/dist/components/OnyxSelect/types.d.ts

@@ -13,6 +13,7 @@ export type SelectSearchProps = {
     withSearch: true;
     /**
      * Value of the search input.
+     * Property is managed internally, when undefined.
      */
     searchTerm?: string;
 } | {
@@ -52,6 +53,11 @@ export type SelectModelValueProps<TValue extends SelectOptionValue> = {
     };
 };
 export type OnyxSelectProps<TValue extends SelectOptionValue = SelectOptionValue> = DensityProp & SelectModelValueProps<TValue> & SelectSearchProps & Omit<OnyxSelectInputProps<TValue>, "density" | "modelValue"> & AutofocusProp & {
+    /**
+     * If true, the select popover is expanded and visible.
+     * Property is managed internally, when undefined.
+     */
+    open?: boolean;
     /**
      * Label describing the list of options to support assistive technologies.
      * @example: { label: "Your Animal", listLabel: "List of animals" }

package/dist/composables/useManagedState.d.ts

@@ -0,0 +1,26 @@
+import { Ref } from 'vue';
+
+/**
+ * Composable for conditionally managing state based on the prop value.
+ *
+ * When the prop value is not undefined, the prop value is always used.
+ * If the prop value is undefined, then the internal state is used instead.
+ *
+ * @param prop `toRef(() => props.something)` ref of the optional prop.
+ * @param initialState in case of the prop being initially undefined, this will be used as the initial state value.
+ * @param emit function that is called when a state write is performed
+ * @returns ref of the state
+ *
+ * @example ```ts
+ * // IMPORTANT: default value MUST be set to undefined
+ * const props = withDefaults(defineProps<{ isExpanded?: boolean }>(), { isExpanded: undefined });
+ * const emit = defineEmits<{ "update:isExpanded": [isExpanded: boolean] }>();
+ *
+ * const isExpanded = useManagedState(
+ *  toRef(() => props.isExpanded),
+ *  false,
+ *  (v) => emit("update:isExpanded", v ?? false),
+ * );
+ * ```
+ */
+export declare const useManagedState: <Prop extends Readonly<Ref<T | undefined>>, T>(prop: Prop, initialState: T, emit: (val: T) => void) => import('vue').WritableComputedRef<T>;

package/dist/i18n/index.d.ts

@@ -1,6 +1,6 @@
 import { FlattenedKeysOf } from '../types/i18n';
 import { DeepPartial } from '../types/utils';
-import { App, MaybeRef } from 'vue';
+import { App, ComputedRef, MaybeRef } from 'vue';
 import { default as enUS } from './locales/en-US.json';
 
 /**
@@ -22,6 +22,8 @@ export type ProvideI18nOptions = {
      * all onyx messages will be updated if it changes (if locale is supported).
      * If a message is missing for your currently set locale, English will be used as fallback.
      *
+     * The should be in the BCP 47 format as it's used to localize date times using the native [Intl API](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl)
+     *
      * @default "en-US"
      */
     locale?: MaybeRef<string>;
@@ -41,18 +43,41 @@ export type ProvideI18nOptions = {
      * ```
      */
     messages?: Record<string, DeepPartial<OnyxTranslations>>;
+    /**
+     * Custom translation function. This option can be used to pass a custom function for translations to onyx in case you want your i18n library to handle them.
+     * @example
+     * ```ts
+     * import { useI18n } from "vue-i18n";
+     *
+     * const { t } = useI18n();
+     * {
+     *   t: computed((key, placeholders) => t(`onyx.${key}`, placeholders?.n ?? 1, { named: placeholders }))
+     * }
+     * ```
+     *
+     * Note: If a custom `t` function is used, passed messages will not be used.
+     */
+    t?: ComputedRef<TranslationFunction>;
 };
+export type TranslationFunction = (key: OnyxTranslationKey, 
+/** Named values to interpolate into the translation. The property `n` is special as it represents the number of elements for pluralization. */
+placeholders?: Record<string, string | number | undefined> & {
+    n?: number;
+}) => string;
 /**
  * Provides a global i18n instance that is used by onyx.
  * Must only be called once in the `App.vue` file of a project that consumes onyx.
  */
-export declare const provideI18n: (app: App, options?: ProvideI18nOptions) => App<any>;
+export declare const provideI18n: (app: App, options?: ProvideI18nOptions) => {
+    t: ComputedRef<TranslationFunction>;
+    locale: ComputedRef<string>;
+};
 /**
  * Injects the onyx i18n instance.
  * Creates a fallback if provide was never called.
  */
 export declare const injectI18n: () => {
-    locale: import('vue').ComputedRef<string>;
-    t: import('vue').ComputedRef<(key: OnyxTranslationKey, placeholders?: Record<string, string | number | undefined>) => string>;
+    t: ComputedRef<TranslationFunction>;
+    locale: ComputedRef<string>;
 };
 export {};