@webx-ui/core 0.24.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/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';