@webx-ui/core 0.14.2 → 0.15.0

package/dist/components/FileCard/FileCard.d.ts

@@ -39,6 +39,7 @@ declare function __VLS_template(): {
                 readonly showCount?: boolean | undefined;
                 readonly autocomplete?: string | undefined;
                 readonly ariaLabel?: string | undefined;
+                readonly localized?: boolean | undefined;
                 readonly onChange?: ((value: string) => any) | undefined;
                 readonly "onUpdate:modelValue"?: ((value: import('..').InputModelValue) => any) | undefined;
                 readonly onInput?: ((value: string) => any) | undefined;
@@ -94,6 +95,7 @@ declare function __VLS_template(): {
                 autocomplete: string;
                 maxlength: number;
                 showCount: boolean;
+                localized: boolean;
             }, {}, string, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, import('vue').ComponentProvideOptions> & {
                 beforeCreate?: (() => void) | (() => void)[];
                 created?: (() => void) | (() => void)[];
@@ -127,6 +129,7 @@ declare function __VLS_template(): {
             autocomplete: string;
             maxlength: number;
             showCount: boolean;
+            localized: boolean;
         }> & Omit<Readonly<{
             modelValue?: import('..').InputModelValue;
         } & import('..').InputProps> & Readonly<{
@@ -136,7 +139,7 @@ declare function __VLS_template(): {
             onClear?: (() => any) | undefined;
             onBlur?: ((event: FocusEvent) => any) | undefined;
             onFocus?: ((event: FocusEvent) => any) | undefined;
-        }>, "input" | "select" | "blur" | "focus" | ("size" | "disabled" | "type" | "placeholder" | "ariaLabel" | "clearable" | "status" | "id" | "readonly" | "autocomplete" | "maxlength" | "showCount")> & {
+        }>, "input" | "select" | "blur" | "focus" | ("size" | "disabled" | "type" | "placeholder" | "ariaLabel" | "clearable" | "status" | "id" | "readonly" | "autocomplete" | "maxlength" | "showCount" | "localized")> & {
             focus: () => void | undefined;
             blur: () => void | undefined;
             select: () => void | undefined;
@@ -203,6 +206,7 @@ declare const __VLS_component: import('vue').DefineComponent<FileCardProps, {},
             readonly showCount?: boolean | undefined;
             readonly autocomplete?: string | undefined;
             readonly ariaLabel?: string | undefined;
+            readonly localized?: boolean | undefined;
             readonly onChange?: ((value: string) => any) | undefined;
             readonly "onUpdate:modelValue"?: ((value: import('..').InputModelValue) => any) | undefined;
             readonly onInput?: ((value: string) => any) | undefined;
@@ -258,6 +262,7 @@ declare const __VLS_component: import('vue').DefineComponent<FileCardProps, {},
             autocomplete: string;
             maxlength: number;
             showCount: boolean;
+            localized: boolean;
         }, {}, string, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, import('vue').ComponentProvideOptions> & {
             beforeCreate?: (() => void) | (() => void)[];
             created?: (() => void) | (() => void)[];
@@ -291,6 +296,7 @@ declare const __VLS_component: import('vue').DefineComponent<FileCardProps, {},
         autocomplete: string;
         maxlength: number;
         showCount: boolean;
+        localized: boolean;
     }> & Omit<Readonly<{
         modelValue?: import('..').InputModelValue;
     } & import('..').InputProps> & Readonly<{
@@ -300,7 +306,7 @@ declare const __VLS_component: import('vue').DefineComponent<FileCardProps, {},
         onClear?: (() => any) | undefined;
         onBlur?: ((event: FocusEvent) => any) | undefined;
         onFocus?: ((event: FocusEvent) => any) | undefined;
-    }>, "input" | "select" | "blur" | "focus" | ("size" | "disabled" | "type" | "placeholder" | "ariaLabel" | "clearable" | "status" | "id" | "readonly" | "autocomplete" | "maxlength" | "showCount")> & {
+    }>, "input" | "select" | "blur" | "focus" | ("size" | "disabled" | "type" | "placeholder" | "ariaLabel" | "clearable" | "status" | "id" | "readonly" | "autocomplete" | "maxlength" | "showCount" | "localized")> & {
         focus: () => void | undefined;
         blur: () => void | undefined;
         select: () => void | undefined;

package/dist/components/Input/Input.d.ts

@@ -47,6 +47,7 @@ declare const __VLS_component: import('vue').DefineComponent<__VLS_PublicProps,
     autocomplete: string;
     maxlength: number;
     showCount: boolean;
+    localized: boolean;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {
     inputRef: HTMLInputElement;
 }, any>;

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

@@ -1,7 +1,8 @@
+import { LocalizedFieldProps, LocalizedValue } from '../../composables/useLocalized';
 export type InputSize = 'sm' | 'md' | 'lg';
 export type InputStatus = 'default' | 'success' | 'warning' | 'error';
 export type InputNativeType = 'text' | 'password' | 'email' | 'number' | 'search' | 'tel' | 'url';
-export interface InputProps {
+export interface InputProps extends LocalizedFieldProps {
     /** Overrides the id generated for the control (and used by a WxFormItem label). */
     id?: string;
     /** `type` attribute of the underlying `<input>`. */
@@ -21,7 +22,8 @@ export interface InputProps {
     /** Accessible label used when the input has no visible `<label>`. */
     ariaLabel?: string;
 }
-export type InputModelValue = string | number | undefined;
+/** A record once `localized` is on — the same field, in every language the site publishes in. */
+export type InputModelValue = string | number | LocalizedValue | undefined;
 export interface InputEmits {
     input: [value: string];
     change: [value: string];

package/dist/components/Locales/LocalePicker.d.ts

@@ -0,0 +1,11 @@
+import { LocaleOption } from '../../composables/useLocalized';
+type __VLS_Props = {
+    locales: LocaleOption[];
+    active: string;
+};
+declare const _default: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    choose: (code: string) => any;
+}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onChoose?: ((code: string) => any) | undefined;
+}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLDivElement>;
+export default _default;

package/dist/components/Locales/Locales.d.ts

@@ -0,0 +1,39 @@
+import { LocaleOption } from '../../composables/useLocalized';
+import { LocalesProps } from './types';
+type __VLS_Props = LocalesProps;
+type __VLS_PublicProps = {
+    'locale'?: string | undefined;
+} & __VLS_Props;
+declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    slots: {
+        default?(_: {
+            locale: undefined;
+            active: boolean;
+        }): any;
+        default?(_: {
+            locale: LocaleOption;
+            active: boolean;
+        }): any;
+    };
+    refs: {};
+    rootEl: HTMLDivElement;
+};
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: import('vue').DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    change: (code: string) => any;
+    "update:locale": (value: string | undefined) => any;
+}, string, import('vue').PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    onChange?: ((code: string) => any) | undefined;
+    "onUpdate:locale"?: ((value: string | undefined) => any) | undefined;
+}>, {
+    variant: import('./types').LocalesVariant;
+    locales: LocaleOption[];
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLDivElement>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/Locales/index.d.ts

@@ -0,0 +1,2 @@
+export { default as WxLocales } from './Locales';
+export type * from './types';

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

@@ -0,0 +1,20 @@
+import { LocaleOption } from '../../composables/useLocalized';
+export type LocalesVariant = 'inline' | 'tabs';
+export interface LocalesProps {
+    /**
+     * Languages to offer. Left out, the list provided by the panel is used — which is what a
+     * field does, so that a form does not repeat the site's settings on every control.
+     */
+    locales?: LocaleOption[];
+    /**
+     * `inline` tucks the selector into the top-right corner of what it wraps and folds down to
+     * the current language until it is pointed at — for a single field, where a row of tabs
+     * above every input would be louder than the inputs.
+     *
+     * `tabs` puts them in a row above, for a whole section edited one language at a time.
+     */
+    variant?: LocalesVariant;
+}
+export interface LocalesEmits {
+    change: [code: string];
+}

package/dist/components/Textarea/Textarea.d.ts

@@ -31,6 +31,7 @@ declare const _default: import('vue').DefineComponent<__VLS_PublicProps, {
     readonly: boolean;
     maxlength: number;
     showCount: boolean;
+    localized: boolean;
     rows: number;
     autosize: boolean | import('./types').AutosizeOptions;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {

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

@@ -1,9 +1,10 @@
 import { ControlSize, ControlStatus } from '../../composables/useFormField';
+import { LocalizedFieldProps, LocalizedValue } from '../../composables/useLocalized';
 export interface AutosizeOptions {
     minRows?: number;
     maxRows?: number;
 }
-export interface TextareaProps {
+export interface TextareaProps extends LocalizedFieldProps {
     size?: ControlSize;
     status?: ControlStatus;
     id?: string;
@@ -22,7 +23,8 @@ export interface TextareaProps {
     /** Accessible label used when the field has no visible `<label>`. */
     ariaLabel?: string;
 }
-export type TextareaModelValue = string | undefined;
+/** A record once `localized` is on — the same field, in every language the site publishes in. */
+export type TextareaModelValue = string | LocalizedValue | undefined;
 export interface TextareaEmits {
     input: [value: string];
     change: [value: string];

package/dist/components/index.d.ts

@@ -48,6 +48,7 @@ export * from './Input';
 export * from './InputNumber';
 export * from './Kanban';
 export * from './Link';
+export * from './Locales';
 export * from './ListDetail';
 export * from './Loading';
 export * from './Main';

package/dist/composables/useLocalized.d.ts

@@ -0,0 +1,66 @@
+import { ComputedRef, InjectionKey, Ref } from 'vue';
+/**
+ * One language the *content* is written in — not the language the panel is drawn in.
+ *
+ * A panel in English routinely edits a site published in Ukrainian and Russian, so the two lists
+ * are unrelated: this one comes from the site's own settings.
+ */
+export interface LocaleOption {
+    code: string;
+    /** What the selector shows. The code in capitals when nothing better is given. */
+    label?: string;
+}
+/** A field's value in every language it is written in: `{ uk: 'Двигуни', ru: 'Двигатели' }`. */
+export type LocalizedValue = Record<string, string>;
+export interface LocalesContext {
+    list: Ref<LocaleOption[]>;
+    /**
+     * The language being edited, shared by every field on the screen.
+     *
+     * One selector per field, all moving together: switching a page to Russian and then finding
+     * the field below still in Ukrainian is how half-translated records get saved.
+     */
+    active: Ref<string>;
+}
+export declare const localesKey: InjectionKey<LocalesContext>;
+/**
+ * Tells every localized field below which languages the site publishes in.
+ *
+ * ```ts
+ * provideLocales(computed(() => admin.i18n.state.contentLocales))
+ * ```
+ */
+export declare function provideLocales(list: Ref<LocaleOption[]> | ComputedRef<LocaleOption[]>): void;
+export declare function useLocales(): LocalesContext;
+/** The label a selector shows for a locale. */
+export declare function localeLabel(locale: LocaleOption): string;
+/**
+ * Reads a localized value for display: the asked-for language, then anything that is filled in.
+ *
+ * A record half-translated is the normal state of a site being worked on, and a blank cell in a
+ * table says less than the language that does have the words.
+ */
+export declare function localizedValue(value: LocalizedValue | string | null | undefined, locale?: string, fallback?: string): string;
+export interface LocalizedFieldProps {
+    /**
+     * Edits the value in every language the site publishes in, with a selector on the field.
+     *
+     * The model then carries `{ uk: '…', ru: '…' }` rather than a string.
+     */
+    localized?: boolean;
+}
+/**
+ * What a text control needs to render itself once per language.
+ *
+ * The non-localized case is the same code path with one nameless slot, so a control has one
+ * template rather than two that drift apart.
+ */
+export declare function useLocalized(props: LocalizedFieldProps, model: Ref<unknown>): {
+    on: ComputedRef<boolean>;
+    active: import('vue').WritableComputedRef<string, string>;
+    slots: ComputedRef<(string | undefined)[]>;
+    list: Ref<LocaleOption[], LocaleOption[]>;
+    read: (code: string | undefined) => string;
+    write: (code: string | undefined, next: string) => void;
+    nameFor: (name: unknown, code: string | undefined) => string | undefined;
+};

package/dist/index.d.ts

@@ -2,6 +2,7 @@ export * from './components';
 export { WebxUI, type WebxUiOptions } from './plugin';
 export type { ControlSize, ControlStatus, ValidationErrors } from './composables/useFormField';
 export { useControlAttrs, type ControlAttrs } from './composables/useControlAttrs';
+export { provideLocales, useLocales, useLocalized, localeLabel, localizedValue, localesKey, type LocaleOption, type LocalesContext, type LocalizedValue, type LocalizedFieldProps, } from './composables/useLocalized';
 export { useElementWidth } from './composables/useElementWidth';
 export { useToast, toast, toastQueue, dismissToast, removeToast, clearToasts, type ToastApi, type ToastHandle, type ToastOptions, type ToastRecord, type ToastType, type ToastAction, } from './composables/useToast';
 export { openModal, createModal, useModal, connectModals, modalKey, type ModalHandle, type ModalOptions, type ModalPromise, } from './composables/useModal';