@webx-ui/core 0.23.0 → 0.26.0

package/dist/components/Button/Button.d.ts

@@ -20,6 +20,7 @@ declare const __VLS_component: import('vue').DefineComponent<ButtonProps, {}, {}
     type: import('./types').ButtonType;
     target: string;
     round: boolean;
+    icon: import('..').IconName;
     href: string;
     loading: boolean;
     block: boolean;

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

@@ -1,3 +1,4 @@
+import { IconName } from '../Icon/types';
 export type ButtonType = 'default' | 'primary' | 'success' | 'warning' | 'danger';
 export type ButtonVariant = 'solid' | 'outline' | 'text';
 export type ButtonSize = 'sm' | 'md' | 'lg';
@@ -5,6 +6,8 @@ export type ButtonNativeType = 'button' | 'submit' | 'reset';
 export interface ButtonProps {
     /** Semantic colour of the button. Defaults to `default`, or to the group's. */
     type?: ButtonType;
+    /** Icon before the label. The `icon` slot wins when both are given. */
+    icon?: IconName;
     /** Visual weight: filled, bordered or borderless. Defaults to `solid`, or to the group's. */
     variant?: ButtonVariant;
     /** Defaults to `md`, or to the enclosing `WxButtonGroup`. */

package/dist/components/DatePicker/DatePicker.d.ts

@@ -35,6 +35,7 @@ declare const __VLS_component: import('vue').DefineComponent<__VLS_PublicProps,
     id: string;
     readonly: boolean;
     format: string;
+    locale: string | import('../..').DateFnsLocale;
     valueFormat: string;
     minDate: string | Date;
     maxDate: string | Date;

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

@@ -1,4 +1,5 @@
 import { ControlSize, ControlStatus } from '../../composables/useFormField';
+import { DateFnsLocale } from '../../internal/dateLocale';
 export type DatePickerType = 'date' | 'datetime' | 'time';
 export type DatePickerModelValue = string | Date | null;
 export interface DatePickerProps {
@@ -22,6 +23,13 @@ export interface DatePickerProps {
     minutesIncrement?: number;
     /** 24-hour clock. Off means AM/PM. */
     is24?: boolean;
+    /**
+     * Language the calendar is drawn in: a BCP-47 tag such as `'ru'` or `'pt-BR'`, whose
+     * month and weekday names come from the browser, or a date-fns locale object for a
+     * language the browser does not carry. Defaults to what the application provided with
+     * `provideDateLocale`, then to the browser's own language.
+     */
+    locale?: string | DateFnsLocale;
     /** First day of the week: 0 is Sunday, 1 is Monday. */
     weekStart?: number;
     /** Apply the value as soon as it is picked, with no confirm button. */

package/dist/components/DateRangePicker/DateRangePicker.d.ts

@@ -34,6 +34,7 @@ declare const __VLS_component: import('vue').DefineComponent<__VLS_PublicProps,
     id: string;
     readonly: boolean;
     format: string;
+    locale: string | import('../..').DateFnsLocale;
     valueFormat: string;
     minDate: string | Date;
     maxDate: string | Date;

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

@@ -1,4 +1,5 @@
 import { ControlSize, ControlStatus } from '../../composables/useFormField';
+import { DateFnsLocale } from '../../internal/dateLocale';
 /** `[start, end]`, or `null` while nothing is picked. */
 export type DateRangePickerModelValue = string[] | Date[] | null;
 export interface DateRangePickerProps {
@@ -12,6 +13,13 @@ export interface DateRangePickerProps {
     maxDate?: string | Date;
     /** How many months to show side by side. Two makes picking across a boundary easy. */
     months?: number;
+    /**
+     * Language the calendar is drawn in: a BCP-47 tag such as `'ru'` or `'pt-BR'`, whose
+     * month and weekday names come from the browser, or a date-fns locale object for a
+     * language the browser does not carry. Defaults to what the application provided with
+     * `provideDateLocale`, then to the browser's own language.
+     */
+    locale?: string | DateFnsLocale;
     /** First day of the week: 0 is Sunday, 1 is Monday. */
     weekStart?: number;
     /** Apply as soon as the second date is picked, with no confirm button. */

package/dist/components/DateTimePicker/DateTimePicker.d.ts

@@ -33,6 +33,7 @@ declare const __VLS_component: import('vue').DefineComponent<__VLS_PublicProps,
     id: string;
     readonly: boolean;
     format: string;
+    locale: string | import('../..').DateFnsLocale;
     valueFormat: string;
     minDate: string | Date;
     maxDate: string | Date;

package/dist/components/EntityCard/EntityCard.d.ts

@@ -29,6 +29,7 @@ declare const __VLS_component: import('vue').DefineComponent<EntityCardProps, {}
     shape: import('./types').EntityCardShape;
     imageAlt: string;
     imageSize: number | string;
+    titleLines: number;
     selected: boolean;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLDivElement>;
 declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;

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

@@ -24,6 +24,14 @@ export interface EntityCardProps {
     imageSize?: number | string;
     /** Facts under the title. Use the `meta` slot when a fact needs markup. */
     meta?: EntityCardMeta[];
+    /**
+     * How many lines the name may take before it is cut.
+     *
+     * One by default, because a row of entities reads as a row only while every one of them is
+     * the same height. Two is for a list where the name is a sentence rather than a label — an
+     * article headline cut to one line on a phone is half a thought.
+     */
+    titleLines?: number;
     size?: EntityCardSize;
     /** `card` sits on its own surface; `plain` drops the background for use inside one. */
     variant?: EntityCardVariant;

package/dist/components/FormItem/FormItem.d.ts

@@ -20,10 +20,10 @@ declare const __VLS_component: import('vue').DefineComponent<FormItemProps, {
     required: boolean;
     label: string;
     error: string | string[];
+    wide: boolean;
     labelWidth: string;
     help: string;
     reserveErrorSpace: boolean;
-    wide: boolean;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLDivElement>;
 declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
 export default _default;

package/dist/components/Icon/icons.d.ts

@@ -47,6 +47,8 @@ export declare const builtinIcons: {
     readonly sliders: "<path d=\"M4 7h9M17 7h3M4 17h3M11 17h9\"/><circle cx=\"15\" cy=\"7\" r=\"2\"/><circle cx=\"9\" cy=\"17\" r=\"2\"/>";
     readonly home: "<path d=\"M4 10.5 12 4l8 6.5V19a1.5 1.5 0 0 1-1.5 1.5H15V14H9v6.5H5.5A1.5 1.5 0 0 1 4 19Z\"/>";
     readonly file: "<path d=\"M13.5 3.5H7a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V9zm0 0V9H19\"/>";
+    readonly 'file-text': string;
+    readonly newspaper: "<path d=\"M5 20.5h13.5a2 2 0 0 0 2-2v-13a2 2 0 0 0-2-2H9a2 2 0 0 0-2 2v13a2 2 0 0 1-2 2Z\"/><path d=\"M5 20.5a2 2 0 0 1-2-2v-8a2 2 0 0 1 2-2h2\"/><path d=\"M9.8 6.8h8.2v3.6h-8.2z\"/><path d=\"M9.8 13.6h8.2M9.8 16.6h5.2\"/>";
     readonly folder: "<path d=\"M3.5 7a2 2 0 0 1 2-2h3.2a2 2 0 0 1 1.5.7l1.3 1.5h7a2 2 0 0 1 2 2v8.3a2 2 0 0 1-2 2h-13a2 2 0 0 1-2-2z\"/>";
     readonly 'folder-move': string;
     readonly image: "<rect x=\"3.5\" y=\"4.5\" width=\"17\" height=\"15\" rx=\"2.5\"/><circle cx=\"8.75\" cy=\"9.75\" r=\"1.75\"/><path d=\"m4 17 4.5-4.2a2 2 0 0 1 2.7 0l3 2.8 1.6-1.5a2 2 0 0 1 2.7 0L20 16\"/>";

package/dist/components/RichText/RichText.d.ts

@@ -1,7 +1,7 @@
-import { RichTextProps, RichTextTool } from './types';
+import { RichTextLabels, RichTextModelValue, RichTextProps, RichTextTool } from './types';
 type __VLS_Props = RichTextProps;
 type __VLS_PublicProps = {
-    modelValue?: string;
+    modelValue?: RichTextModelValue;
 } & __VLS_Props;
 declare const _default: import('vue').DefineComponent<__VLS_PublicProps, {
     editor: import('vue').ShallowRef<import('@tiptap/vue-3').Editor | undefined, import('@tiptap/vue-3').Editor | undefined>;
@@ -9,13 +9,13 @@ declare const _default: import('vue').DefineComponent<__VLS_PublicProps, {
     clear: () => boolean | undefined;
 }, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
     change: (html: string) => any;
-    "update:modelValue": (value: string) => any;
+    "update:modelValue": (value: RichTextModelValue) => any;
     blur: () => any;
     focus: () => any;
     uploadError: (error: unknown, file: File) => any;
 }, string, import('vue').PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
     onChange?: ((html: string) => any) | undefined;
-    "onUpdate:modelValue"?: ((value: string) => any) | undefined;
+    "onUpdate:modelValue"?: ((value: RichTextModelValue) => any) | undefined;
     onBlur?: (() => any) | undefined;
     onFocus?: (() => any) | undefined;
     onUploadError?: ((error: unknown, file: File) => any) | undefined;
@@ -29,9 +29,11 @@ declare const _default: import('vue').DefineComponent<__VLS_PublicProps, {
     id: string;
     readonly: boolean;
     minHeight: string;
+    localized: boolean;
     tools: RichTextTool[];
     pickImage: import('./types').RichTextImagePicker;
     accept: string[];
+    labels: RichTextLabels;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {
     fileInput: HTMLInputElement;
 }, any>;

package/dist/components/RichText/tools.d.ts

@@ -1,4 +1,4 @@
-import { RichTextTool } from './types';
+import { RichTextTableTool, RichTextTool } from './types';
 /**
  * Kept out of the component because `withDefaults` cannot reference a binding
  * declared inside `<script setup>` — it is hoisted out of `setup()`.
@@ -12,37 +12,9 @@ export interface ToolMeta {
 }
 export declare const TOOL_META: Record<Exclude<RichTextTool, 'divider'>, ToolMeta>;
 /** Shown as a second row while the caret sits inside a table. */
-export declare const TABLE_TOOLS: readonly [{
-    readonly key: "addRowAfter";
-    readonly label: "Row below";
-    readonly icon: "rowAfter";
-}, {
-    readonly key: "addRowBefore";
-    readonly label: "Row above";
-    readonly icon: "rowBefore";
-}, {
-    readonly key: "addColumnAfter";
-    readonly label: "Column after";
-    readonly icon: "columnAfter";
-}, {
-    readonly key: "addColumnBefore";
-    readonly label: "Column before";
-    readonly icon: "columnBefore";
-}, {
-    readonly key: "deleteRow";
-    readonly label: "Delete row";
-    readonly icon: "deleteRow";
-}, {
-    readonly key: "deleteColumn";
-    readonly label: "Delete column";
-    readonly icon: "deleteColumn";
-}, {
-    readonly key: "mergeOrSplit";
-    readonly label: "Merge or split cells";
-    readonly icon: "mergeCells";
-}, {
-    readonly key: "deleteTable";
-    readonly label: "Delete table";
-    readonly icon: "deleteTable";
-}];
-export type TableToolKey = (typeof TABLE_TOOLS)[number]['key'];
+export declare const TABLE_TOOLS: {
+    key: RichTextTableTool;
+    label: string;
+    icon: string;
+}[];
+export type TableToolKey = RichTextTableTool;

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

@@ -1,16 +1,48 @@
 import { ControlSize, ControlStatus } from '../../composables/useFormField';
+import { LocalizedFieldProps, LocalizedValue } from '../../composables/useLocalized';
 export type RichTextTool = 'bold' | 'italic' | 'strike' | 'code' | 'h2' | 'h3' | 'h4' | 'bulletList' | 'orderedList' | 'blockquote' | 'hr' | 'link' | 'table' | 'image' | 'youtube' | 'undo' | 'redo'
 /** A vertical rule between groups. */
  | 'divider';
-export interface RichTextUploadResult {
+/** The keys of the second toolbar, the one that appears inside a table. */
+export type RichTextTableTool = 'addRowAfter' | 'addRowBefore' | 'addColumnAfter' | 'addColumnBefore' | 'deleteRow' | 'deleteColumn' | 'mergeOrSplit' | 'deleteTable';
+/**
+ * Everything this editor says out loud: a tooltip on every button, the two lines of the link
+ * bar, and the word shown while a file is going up.
+ */
+export type RichTextLabelKey = Exclude<RichTextTool, 'divider'> | RichTextTableTool
+/** The accessible name of the toolbar itself. */
+ | 'toolbar' | 'linkAddress' | 'youtubeAddress' | 'apply' | 'cancel' | 'uploading';
+/**
+ * What the editor calls its own buttons. It knows nothing about the panel it is opened in, so
+ * whoever opens it translates it; a key left out stays English.
+ */
+export type RichTextLabels = Partial<Record<RichTextLabelKey, string>>;
+/**
+ * A picture going into the document: where it is right now, and what it is filed under.
+ *
+ * `path` is the library's own key, written into the document as `data-wx-path` and kept there.
+ * The address is not the picture — a bucket that moves, a signed link that expires, an image
+ * edited in place all change the URL and none of them change the key — so whoever stores the
+ * document can work the address out again from the key rather than serving last month's.
+ * Without a `path` the picture is simply an address, which is what an external one is.
+ */
+export interface RichTextImage {
     url: string;
+    path?: string;
     alt?: string;
 }
-/** Uploads one file and resolves with the URL it ended up at. */
-export type RichTextUpload = (file: File) => Promise<RichTextUploadResult>;
-/** Opens a media library and resolves with the chosen URL, or `null` if cancelled. */
-export type RichTextImagePicker = () => Promise<string | null>;
-export interface RichTextProps {
+/** What an upload answers with. */
+export type RichTextUploadResult = RichTextImage;
+/** Uploads one file and resolves with where it ended up. */
+export type RichTextUpload = (file: File) => Promise<RichTextImage>;
+/**
+ * Opens a media library and resolves with what was chosen, or `null` if cancelled. A bare
+ * string is an address and nothing else — fine for a picker with no library behind it.
+ */
+export type RichTextImagePicker = () => Promise<RichTextImage | string | null>;
+/** One language's HTML, or every language's when the field is localized. */
+export type RichTextModelValue = string | LocalizedValue;
+export interface RichTextProps extends LocalizedFieldProps {
     placeholder?: string;
     disabled?: boolean;
     readonly?: boolean;
@@ -32,6 +64,8 @@ export interface RichTextProps {
     pickImage?: RichTextImagePicker;
     /** MIME types accepted for upload. */
     accept?: string[];
+    /** What the buttons and the link bar are called, for a panel that is not in English. */
+    labels?: RichTextLabels;
 }
 export interface RichTextEmits {
     change: [html: string];

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

@@ -40,6 +40,23 @@ declare const _default: <T extends TableRow = TableRow>(__VLS_props: NonNullable
         }) => unknown) | undefined;
         title?: () => unknown;
         actions?: () => unknown;
+        /**
+         * The fields of the filter, inside the panel a funnel in the header opens.
+         *
+         * Three dropdowns standing open in the header is three controls of chrome above the first
+         * row, and on a phone that is half the screen before any data. Behind the funnel they cost
+         * one button, and what they are set to is said by `applied` instead.
+         */
+        filters?: () => unknown;
+        /**
+         * What the filters are set to, as chips the reader can take off — the strip between the
+         * header and the rows.
+         *
+         * The table gives the place and the spacing; the chips are the caller's, because only the
+         * caller knows what "rubric: News" is called and what taking it off means. Nothing is drawn
+         * while the strip holds no elements.
+         */
+        applied?: () => unknown;
         empty?: () => unknown;
         footer?: () => unknown;
         loading?: () => unknown;
@@ -68,6 +85,23 @@ declare const _default: <T extends TableRow = TableRow>(__VLS_props: NonNullable
         }) => unknown) | undefined;
         title?: () => unknown;
         actions?: () => unknown;
+        /**
+         * The fields of the filter, inside the panel a funnel in the header opens.
+         *
+         * Three dropdowns standing open in the header is three controls of chrome above the first
+         * row, and on a phone that is half the screen before any data. Behind the funnel they cost
+         * one button, and what they are set to is said by `applied` instead.
+         */
+        filters?: () => unknown;
+        /**
+         * What the filters are set to, as chips the reader can take off — the strip between the
+         * header and the rows.
+         *
+         * The table gives the place and the spacing; the chips are the caller's, because only the
+         * caller knows what "rubric: News" is called and what taking it off means. Nothing is drawn
+         * while the strip holds no elements.
+         */
+        applied?: () => unknown;
         empty?: () => unknown;
         footer?: () => unknown;
         loading?: () => unknown;

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

@@ -33,6 +33,13 @@ export interface TableColumn<T = TableRow> {
     /** Heading text. Use the `header-<key>` slot for anything richer. */
     label?: string;
     width?: string | number;
+    /**
+     * A floor for the column — and only with `layout="auto"`.
+     *
+     * The fixed algorithm reads `width` and nothing else, and the widths ride on a `<col>`, where
+     * `min-width` is not one of the four properties that apply: declared there it computes, shows
+     * in devtools and does nothing. A fixed table sizes its columns by `width`.
+     */
     minWidth?: string | number;
     align?: TableAlign;
     /** Adds a sort control to the heading. The table reports, it does not reorder. */
@@ -153,6 +160,18 @@ export interface TableProps<T = TableRow> {
     /** Adds the search field to the header. */
     searchable?: boolean;
     searchPlaceholder?: string;
+    /**
+     * How many filters are on.
+     *
+     * A panel of filters says nothing about itself once it is shut, and a list narrowed by
+     * something the reader cannot see is a list that looks wrong. The number rides on the funnel,
+     * and `0` leaves it bare. What the filters actually are is said by the `applied` slot.
+     */
+    filtersCount?: number;
+    /** Name of the funnel — its tooltip, its accessible name and the heading of the panel. */
+    filtersLabel?: string;
+    /** Width of that panel: a number in pixels, or any CSS length. */
+    filtersWidth?: number | string;
     /** How long typing settles before `search` fires. Zero reports every keystroke. */
     searchDebounce?: number;
     loading?: boolean;

package/dist/components/TimePicker/TimePicker.d.ts

@@ -33,6 +33,7 @@ declare const __VLS_component: import('vue').DefineComponent<__VLS_PublicProps,
     id: string;
     readonly: boolean;
     format: string;
+    locale: string | import('../..').DateFnsLocale;
     valueFormat: string;
     minDate: string | Date;
     maxDate: string | Date;

package/dist/composables/useDateLocale.d.ts

@@ -0,0 +1,23 @@
+import { ComputedRef, InjectionKey, Ref } from 'vue';
+import { DateFnsLocale } from '../internal/dateLocale';
+/** A BCP-47 tag, or something that reads one — the application's own language. */
+export type DateLocaleSource = string | Ref<string> | ComputedRef<string>;
+/**
+ * The language every date picker below draws its calendar in.
+ *
+ * This is the language of the *interface*, not of the content: an administrator who
+ * switched the panel to Russian on a machine set to English expects the month header to
+ * follow the switch, and neither the browser nor the site's content languages know about
+ * it. A `locale` prop on the picker still wins over what is provided here.
+ */
+export declare const dateLocaleKey: InjectionKey<DateLocaleSource>;
+/**
+ * Tells every date picker below which language to draw its calendar in.
+ *
+ * ```ts
+ * app.provide(dateLocaleKey, computed(() => admin.i18n.state.locale))
+ * ```
+ */
+export declare function provideDateLocale(locale: DateLocaleSource): void;
+/** The calendar's language: the `locale` prop, then the application's, then the browser's. */
+export declare function useDateLocale(locale: () => string | DateFnsLocale | undefined): ComputedRef<DateFnsLocale>;

package/dist/index.d.ts

@@ -3,6 +3,8 @@ 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 { provideDateLocale, useDateLocale, dateLocaleKey, type DateLocaleSource, } from './composables/useDateLocale';
+export type { DateFnsLocale } from './internal/dateLocale';
 export { useElementWidth } from './composables/useElementWidth';
 export { useHoverPointer } from './composables/useHoverPointer';
 export { useToast, toast, toastQueue, dismissToast, removeToast, clearToasts, type ToastApi, type ToastHandle, type ToastOptions, type ToastRecord, type ToastType, type ToastAction, } from './composables/useToast';