@webx-ui/core 0.14.3 → 0.16.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/Table/Table.d.ts

@@ -47,6 +47,11 @@ declare const _default: <T extends TableRow = TableRow>(__VLS_props: NonNullable
             row: T;
             index: number;
         }) => unknown;
+        /** Buttons along the top of a card, where a row has no room for a column of them. */
+        'card-actions'?: (props: {
+            row: T;
+            index: number;
+        }) => unknown;
     }> & {
         [key: `header-${string}`]: ((props: {
             column: TableColumn<T>;
@@ -70,6 +75,11 @@ declare const _default: <T extends TableRow = TableRow>(__VLS_props: NonNullable
             row: T;
             index: number;
         }) => unknown;
+        /** Buttons along the top of a card, where a row has no room for a column of them. */
+        'card-actions'?: (props: {
+            row: T;
+            index: number;
+        }) => unknown;
     };
     emit: (((evt: "search", term: string) => void) & ((evt: "row-click", row: T, index: number, event: MouseEvent) => void) & ((evt: "sort-change", sort: TableSort | null) => void) & ((evt: "selection-change", keys: RowKey[], rows: T[]) => void) & ((evt: "expand-change", keys: RowKey[], rows: T[]) => void) & ((evt: "node-drop", event: import('./types').TableNodeDropEvent<T>) => void) & ((evt: "state-change", state: TableState) => void)) & (((evt: "update:page", value: number) => void) & ((evt: "update:perPage", value: number) => void) & ((evt: "update:selected", value: RowKey[]) => void) & ((evt: "update:expanded", value: RowKey[]) => void) & ((evt: "update:sort", value: TableSort | null) => void) & ((evt: "update:search", value: string) => void));
 }>) => import('vue').VNode & {

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

@@ -50,6 +50,21 @@ export interface TableColumn<T = TableRow> {
     cellClass?: string;
     /** Leaves the column out without changing the array. */
     hidden?: boolean;
+    /**
+     * Drops the column while the table is narrower than this.
+     *
+     * The alternative is a horizontal scrollbar, and a column somebody has to drag sideways to
+     * read is a column they will not read. Say it about the ones that can go — a date, a count —
+     * and the ones that identify the row stay whatever the width.
+     */
+    hideBelow?: number;
+    /**
+     * Leaves the column out of a card, where space is the scarce thing.
+     *
+     * A date somebody scans down a column is worth a line of its own on a wide screen and is the
+     * first thing to go on a narrow one.
+     */
+    hideOnCards?: boolean;
 }
 /**
  * One line of the summary under the table. `label` occupies every column ahead of the
@@ -158,6 +173,21 @@ export interface TableProps<T = TableRow> {
     expandableIf?: (row: T) => boolean;
     /** Lines under the table: totals, discounts, whatever the figures are. */
     summary?: TableSummaryRow[];
+    /**
+     * Below this width — of the table, not the window — each row is drawn as a card instead.
+     *
+     * A table narrower than about forty characters is a row of columns nobody can read, and on a
+     * phone that is every table. `0` turns it off and keeps the columns at any width.
+     */
+    cardsBelow?: number;
+    /**
+     * Drops the table's own margins around the header and the cards.
+     *
+     * On its own the table is a surface, and its search field and cards keep clear of its rounded
+     * edge. Inside a card the card keeps the margins already, and a second set puts the search
+     * field a step in from whatever the card has above it.
+     */
+    flush?: boolean;
     /**
      * Puts the pagination in the footer. On by default as soon as `data` is a paginator,
      * since a paginated response is a promise that there are more pages to reach.

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';