@webx-ui/core 0.8.0 → 0.9.0

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

@@ -0,0 +1 @@
+export { default as WxStep } from './Step';

package/dist/components/Steps/Steps.d.ts

@@ -0,0 +1,31 @@
+import { StepsProps } from './types';
+declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    slots: Readonly<{
+        default?: () => unknown;
+    }> & {
+        default?: () => unknown;
+    };
+    refs: {};
+    rootEl: HTMLOListElement;
+};
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: import('vue').DefineComponent<StepsProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    change: (index: number) => any;
+}, string, import('vue').PublicProps, Readonly<StepsProps> & Readonly<{
+    onChange?: ((index: number) => any) | undefined;
+}>, {
+    size: import('./types').StepsSize;
+    ariaLabel: string;
+    error: boolean;
+    current: number;
+    direction: import('./types').StepsDirection;
+    clickable: boolean;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLOListElement>;
+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/Steps/context.d.ts

@@ -0,0 +1,5 @@
+import { InjectionKey } from 'vue';
+import { StepsContext } from './types';
+export declare const stepsKey: InjectionKey<StepsContext>;
+/** A step outside a sequence is one step, on its own, and still renders. */
+export declare function useSteps(): StepsContext;

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

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

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

@@ -0,0 +1,44 @@
+import { IconName } from '../Icon/types';
+export type StepsDirection = 'horizontal' | 'vertical';
+export type StepsSize = 'sm' | 'md';
+/** Where a step stands relative to the one the reader is on. */
+export type StepState = 'done' | 'current' | 'todo' | 'error';
+export interface StepsProps {
+    /** Which step the reader is on, counting from zero. */
+    current?: number;
+    direction?: StepsDirection;
+    size?: StepsSize;
+    /** Marks the current step as gone wrong, without moving off it. */
+    error?: boolean;
+    /**
+     * Lets a finished step be clicked to go back to it. Going forward is never
+     * offered: the steps ahead are the ones that have not been filled in.
+     */
+    clickable?: boolean;
+    /** Accessible name of the sequence. */
+    ariaLabel?: string;
+}
+export interface StepsEmits {
+    /** A step was chosen. Only fires for steps that are behind the current one. */
+    change: [index: number];
+}
+export interface StepProps {
+    /** What this step is. */
+    title?: string;
+    /** What it involves, in a few words. */
+    description?: string;
+    /** Icon instead of the number. */
+    icon?: IconName;
+}
+/** What `WxSteps` hands down to each step. */
+export interface StepsContext {
+    register: (id: symbol) => void;
+    unregister: (id: symbol) => void;
+    indexOf: (id: symbol) => number;
+    stateOf: (index: number) => StepState;
+    choose: (index: number) => void;
+    direction: StepsDirection;
+    size: StepsSize;
+    clickable: boolean;
+    total: number;
+}

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

@@ -36,9 +36,10 @@ export interface TableColumn<T = TableRow> {
     /** Adds a sort control to the heading. The table reports, it does not reorder. */
     sortable?: boolean;
     /**
-     * Pins the column to an edge while the rest scrolls sideways. A pinned column needs
-     * a `width`: the offsets of the ones behind it are worked out from the declared
-     * widths, and a column of unknown width cannot say where the next one starts.
+     * Pins the column to an edge while the rest scrolls sideways. Give it a `width` as
+     * well: the table measures where each pinned column comes to rest, but the declared
+     * width is what the offsets fall back on before the first measurement — and what
+     * decides how wide the column is in the first place.
      */
     fixed?: 'left' | 'right';
     /** Turns the raw value into the text of the cell. */

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

@@ -27,8 +27,8 @@ declare const _default: import('vue').DefineComponent<__VLS_PublicProps, {
     ariaLabel: string;
     status: import('../..').ControlStatus;
     id: string;
-    readonly: boolean;
     resize: "none" | "vertical" | "both";
+    readonly: boolean;
     maxlength: number;
     showCount: boolean;
     rows: number;

package/dist/components/Toaster/Toaster.d.ts

@@ -0,0 +1,9 @@
+import { ToasterProps } from './types';
+declare const _default: import('vue').DefineComponent<ToasterProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<ToasterProps> & Readonly<{}>, {
+    label: string;
+    width: number | string;
+    max: number;
+    placement: import('./types').ToasterPlacement;
+    hotkey: string[];
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+export default _default;

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

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

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

@@ -0,0 +1,16 @@
+/** Which corner — or edge — the toasts stack in. */
+export type ToasterPlacement = 'top-start' | 'top-center' | 'top-end' | 'bottom-start' | 'bottom-center' | 'bottom-end';
+export interface ToasterProps {
+    placement?: ToasterPlacement;
+    /** Width of a toast: a number in pixels, or any CSS length. */
+    width?: number | string;
+    /** Accessible name of the region the toasts land in. */
+    label?: string;
+    /**
+     * How many are shown at once. The rest wait their turn rather than covering the
+     * screen — a hundred failed requests is one problem, not a hundred notifications.
+     */
+    max?: number;
+    /** Key that dismisses everything on screen, e.g. `F8`. */
+    hotkey?: string[];
+}

package/dist/components/Tooltip/Tooltip.d.ts

@@ -0,0 +1,44 @@
+import { TooltipProps } from './types';
+type __VLS_Props = TooltipProps;
+type __VLS_PublicProps = {
+    'open'?: boolean | undefined;
+} & __VLS_Props;
+declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    slots: Readonly<{
+        /** The control the tip belongs to. Exactly one element. */
+        default?: () => unknown;
+        /** The tip itself, when the text is not enough. */
+        content?: () => unknown;
+    }> & {
+        /** The control the tip belongs to. Exactly one element. */
+        default?: () => unknown;
+        /** The tip itself, when the text is not enough. */
+        content?: () => unknown;
+    };
+    refs: {};
+    rootEl: any;
+};
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: import('vue').DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    "update:open": (value: boolean | undefined) => any;
+}, string, import('vue').PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:open"?: ((value: boolean | undefined) => any) | undefined;
+}>, {
+    disabled: boolean;
+    content: string;
+    side: import('./types').TooltipSide;
+    align: import('./types').TooltipAlign;
+    offset: number;
+    teleport: boolean;
+    delay: number;
+    maxWidth: number | string;
+    arrow: boolean;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+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/Tooltip/index.d.ts

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

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

@@ -0,0 +1,25 @@
+export type TooltipSide = 'top' | 'right' | 'bottom' | 'left';
+export type TooltipAlign = 'start' | 'center' | 'end';
+export interface TooltipProps {
+    /** The text. Use the `content` slot for anything richer. */
+    content?: string;
+    /** Which side of the trigger it prefers; it flips when there is no room. */
+    side?: TooltipSide;
+    align?: TooltipAlign;
+    /** Distance from the trigger, in pixels. */
+    offset?: number;
+    /**
+     * How long the pointer has to rest before the tip appears, in milliseconds. The
+     * first tip in a group waits; the ones after it come at once, because by then the
+     * reader has said what they are doing.
+     */
+    delay?: number;
+    /** Draws the little pointer at the trigger. */
+    arrow?: boolean;
+    /** Largest width the tip takes before it wraps. */
+    maxWidth?: number | string;
+    /** Nothing opens. For a tip whose trigger is temporarily meaningless. */
+    disabled?: boolean;
+    /** Render the tip in a portal so it escapes `overflow: hidden`. */
+    teleport?: boolean;
+}

package/dist/components/Upload/Upload.d.ts

@@ -0,0 +1,74 @@
+import { UploadFile, UploadProps } from './types';
+type __VLS_Props = UploadProps;
+type __VLS_PublicProps = {
+    modelValue?: UploadFile[];
+} & __VLS_Props;
+declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    slots: Readonly<{
+        /** Replaces the inside of the drop zone. */
+        default?: (props: {
+            open: () => void;
+            dragging: boolean;
+        }) => unknown;
+        /** Replaces the row a file is shown as. */
+        file?: (props: {
+            file: UploadFile;
+            remove: () => void;
+        }) => unknown;
+        /** Under the zone: a note about formats or sizes. */
+        footer?: () => unknown;
+    }> & {
+        /** Replaces the inside of the drop zone. */
+        default?: (props: {
+            open: () => void;
+            dragging: boolean;
+        }) => unknown;
+        /** Replaces the row a file is shown as. */
+        file?: (props: {
+            file: UploadFile;
+            remove: () => void;
+        }) => unknown;
+        /** Under the zone: a note about formats or sizes. */
+        footer?: () => unknown;
+    };
+    refs: {
+        input: HTMLInputElement;
+    };
+    rootEl: HTMLDivElement;
+};
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: import('vue').DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    "update:modelValue": (value: UploadFile[]) => any;
+    select: (file: UploadFile) => any;
+    add: (files: UploadFile[]) => any;
+    remove: (file: UploadFile) => any;
+    reject: (file: File, reason: "size" | "type" | "count" | "rejected") => any;
+}, string, import('vue').PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: UploadFile[]) => any) | undefined;
+    onSelect?: ((file: UploadFile) => any) | undefined;
+    onAdd?: ((files: UploadFile[]) => any) | undefined;
+    onRemove?: ((file: UploadFile) => any) | undefined;
+    onReject?: ((file: File, reason: "size" | "type" | "count" | "rejected") => any) | undefined;
+}>, {
+    multiple: boolean;
+    disabled: boolean;
+    max: number;
+    accept: string;
+    maxSize: number;
+    buttonOnly: boolean;
+    buttonText: string;
+    hint: string;
+    gallery: boolean;
+    removable: boolean;
+    beforeAdd: (file: File) => boolean | Promise<boolean>;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {
+    input: HTMLInputElement;
+}, 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/Upload/index.d.ts

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

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

@@ -0,0 +1,54 @@
+/** Where a file has got to. */
+export type UploadStatus = 'ready' | 'uploading' | 'done' | 'error';
+export interface UploadFile {
+    /** Stable across the file's whole life, including a retry. */
+    id: string;
+    name: string;
+    /** In bytes. `0` for a file that arrived as a URL rather than from disk. */
+    size: number;
+    type: string;
+    status: UploadStatus;
+    /** How far along, 0–100. Meaningful while `uploading`. */
+    progress: number;
+    /** What went wrong, for a file that failed. */
+    error?: string;
+    /** Where it ended up, once the caller knows. */
+    url?: string;
+    /** The file itself, for anything picked from disk. */
+    raw?: File;
+}
+export interface UploadProps {
+    /** What the file input accepts, e.g. `image/*,.pdf`. */
+    accept?: string;
+    multiple?: boolean;
+    /** Largest file, in bytes. Anything over it is refused before it is added. */
+    maxSize?: number;
+    /** Largest number of files. */
+    max?: number;
+    /** Drops the drop zone and leaves a button. */
+    buttonOnly?: boolean;
+    /** Label of the button. */
+    buttonText?: string;
+    /** The line inside the drop zone. */
+    hint?: string;
+    /** Shows each file as a thumbnail rather than a row. For pictures. */
+    gallery?: boolean;
+    disabled?: boolean;
+    /** Whether a file can be taken off the list once it is there. */
+    removable?: boolean;
+    /**
+     * Asked about every file before it joins the list. Return `false` — or a rejected
+     * promise — to refuse it. This is where a caller checks dimensions, or renames.
+     */
+    beforeAdd?: (file: File) => boolean | Promise<boolean>;
+}
+export interface UploadEmits {
+    /** Files that passed the checks and joined the list. */
+    add: [files: UploadFile[]];
+    /** A file was taken off the list. */
+    remove: [file: UploadFile];
+    /** A file was refused, and why. */
+    reject: [file: File, reason: 'size' | 'count' | 'type' | 'rejected'];
+    /** A file in the list was chosen — to preview it, usually. */
+    select: [file: UploadFile];
+}

package/dist/components/index.d.ts

@@ -2,9 +2,13 @@ export * from './Accordion';
 export * from './AccordionItem';
 export * from './Action';
 export * from './Actions';
+export * from './Affix';
 export * from './Alert';
 export * from './Aside';
 export * from './Autocomplete';
+export * from './Avatar';
+export * from './AvatarGroup';
+export * from './Backtop';
 export * from './Badge';
 export * from './Breadcrumb';
 export * from './BreadcrumbItem';
@@ -21,11 +25,14 @@ export * from './Countdown';
 export * from './DatePicker';
 export * from './DateRangePicker';
 export * from './DateTimePicker';
+export * from './Descriptions';
+export * from './DescriptionsItem';
 export * from './Dialog';
 export * from './Divider';
 export * from './Drawer';
 export * from './Dropdown';
 export * from './DropdownItem';
+export * from './Empty';
 export * from './EntityCard';
 export * from './Footer';
 export * from './Form';
@@ -33,29 +40,41 @@ export * from './FormItem';
 export * from './Header';
 export * from './Heading';
 export * from './Icon';
+export * from './Image';
 export * from './Indicator';
 export * from './Input';
 export * from './InputNumber';
 export * from './Kanban';
 export * from './Link';
 export * from './ListDetail';
+export * from './Loading';
 export * from './Main';
 export * from './Menu';
 export * from './MenuGroup';
 export * from './MenuItem';
 export * from './Pagination';
+export * from './Popconfirm';
 export * from './Popover';
+export * from './Progress';
 export * from './Prose';
 export * from './Radio';
 export * from './RadioGroup';
 export * from './Rate';
+export * from './Result';
 export * from './RichText';
 export * from './Row';
 export * from './Scrollbar';
+export * from './Segmented';
 export * from './Select';
+export * from './SelectionArea';
+export * from './Skeleton';
+export * from './SkeletonItem';
 export * from './Slider';
+export * from './SortableList';
 export * from './Space';
 export * from './Statistic';
+export * from './Step';
+export * from './Steps';
 export * from './Submenu';
 export * from './Switch';
 export * from './Tab';
@@ -67,3 +86,6 @@ export * from './Textarea';
 export * from './Timeline';
 export * from './TimelineItem';
 export * from './TimePicker';
+export * from './Toaster';
+export * from './Tooltip';
+export * from './Upload';

package/dist/composables/confirm.d.ts

@@ -0,0 +1,23 @@
+import { ButtonType } from '../components/Button/types';
+export interface ConfirmOptions {
+    /** The question, as the heading. Defaults to "Are you sure?" */
+    title?: string;
+    /** What is at stake, under the question. */
+    message?: string;
+    confirmText?: string;
+    cancelText?: string;
+    /** Colour of the confirming button. `danger` for anything that destroys something. */
+    tone?: ButtonType;
+    width?: number | string;
+}
+/**
+ * Asks, and answers `true` or `false`.
+ *
+ * ```ts
+ * if (await confirm('Delete this product?')) remove(product)
+ * ```
+ *
+ * It never rejects. A question that throws when the answer is no turns every call site
+ * into a `try` block, and a forgotten `catch` into an unhandled rejection.
+ */
+export declare function confirm(message?: string | ConfirmOptions, options?: ConfirmOptions): Promise<boolean>;

package/dist/composables/useModal.d.ts

@@ -0,0 +1,68 @@
+import { App, AppContext, Component, InjectionKey, Ref } from 'vue';
+/** What a component opened from code can do about itself. */
+export interface ModalHandle<T = unknown> {
+    /** `false` in a component that is being used declaratively. */
+    isModal: boolean;
+    /** Bind it to the panel: `<wx-dialog v-model:open="open">`. */
+    open: Ref<boolean>;
+    /** Settles the promise with a value, and closes. */
+    resolve: (value: T) => void;
+    /** Settles it with nothing, and closes. */
+    dismiss: () => void;
+}
+export interface ModalOptions {
+    /** Props for the component. */
+    props?: Record<string, unknown>;
+    /** Slots for it, as render functions. */
+    slots?: Record<string, (...args: unknown[]) => unknown>;
+    /** Events that settle the promise with their payload. Default: `resolve`. */
+    resolveOn?: string | string[];
+    /** Events that settle it with nothing. Default: `cancel` and `close`. */
+    dismissOn?: string | string[];
+    /** Where to mount. Default: a div at the end of `<body>`. */
+    container?: HTMLElement;
+    /** The app whose plugins and provides the component should see. */
+    appContext?: AppContext;
+    /** How long the closing animation is given before the node is taken away, in ms. */
+    duration?: number;
+}
+export interface ModalPromise<T> extends Promise<T | undefined> {
+    /** Closes it from outside — a route change, a timeout, a second thought. */
+    close: (value?: T) => void;
+}
+export declare const modalKey: InjectionKey<ModalHandle>;
+export declare function connectModals(app: App): void;
+/**
+ * Mounts a component outside the app and hands back a promise for its answer.
+ *
+ * ```ts
+ * const product = await openModal<Product>(ProductBrowser, {
+ *   props: { multiple: false },
+ *   resolveOn: 'select',
+ * })
+ * ```
+ *
+ * The promise settles the moment the answer is known and the node is taken away once the
+ * closing animation has had its time — so the caller is never waiting on an animation, and
+ * the panel is never cut off mid-fade.
+ */
+export declare function openModal<T = unknown>(component: Component, options?: ModalOptions): ModalPromise<T>;
+/**
+ * Wraps a component in a function that opens it — the shape a browser or a picker is
+ * reached by everywhere else in an app.
+ *
+ * ```ts
+ * export const productBrowser = createModal<Product, ProductBrowserProps>(ProductBrowser, {
+ *   resolveOn: 'select',
+ * })
+ *
+ * const product = await productBrowser({ multiple: false })
+ * ```
+ */
+export declare function createModal<T = unknown, P extends Record<string, unknown> = Record<string, never>>(component: Component, defaults?: ModalOptions): (props?: P, options?: ModalOptions) => ModalPromise<T>;
+/**
+ * The handle of the modal a component is being shown in. Outside one it answers all the
+ * same, with `isModal: false` and calls that do nothing — so a component can be written
+ * once and used both ways.
+ */
+export declare function useModal<T = unknown>(): ModalHandle<T>;

package/dist/composables/useToast.d.ts

@@ -0,0 +1,66 @@
+import { DeepReadonly } from 'vue';
+import { IconName } from '../components/Icon/types';
+export type ToastType = 'default' | 'success' | 'warning' | 'danger' | 'info';
+export interface ToastAction {
+    label: string;
+    onClick: () => void;
+}
+export interface ToastOptions {
+    /** A headline. Without one the toast is a single line — a message rather than a card. */
+    title?: string;
+    /** The message. This is what a one-line toast says. */
+    description?: string;
+    type?: ToastType;
+    /**
+     * How long it stays, in milliseconds. `0` keeps it until it is dismissed, which is
+     * what an error the reader has to act on wants.
+     */
+    duration?: number;
+    /** Adds a ×. On by default for anything that does not leave on its own. */
+    closable?: boolean;
+    /** Glyph to draw instead of the one the type picks; `false` drops it. */
+    icon?: IconName | false;
+    /** One thing to do about it: Undo, Retry, View. */
+    action?: ToastAction;
+}
+export interface ToastRecord extends ToastOptions {
+    id: number;
+    /** Bound to the panel; set to false to start it leaving. */
+    open: boolean;
+}
+export interface ToastHandle {
+    id: number;
+    dismiss: () => void;
+}
+/** What the `WxToaster` renders. Nothing else should be writing to it. */
+export declare function toastQueue(): DeepReadonly<ToastRecord[]>;
+/** Starts a toast leaving. It is taken off the queue once it has gone. */
+export declare function dismissToast(id: number): void;
+/** Takes a toast off the queue for good — called when its animation has finished. */
+export declare function removeToast(id: number): void;
+/** Clears everything on screen at once. */
+export declare function clearToasts(): void;
+export interface ToastApi {
+    (message: string | ToastOptions, options?: ToastOptions): ToastHandle;
+    success: (message: string | ToastOptions, options?: ToastOptions) => ToastHandle;
+    warning: (message: string | ToastOptions, options?: ToastOptions) => ToastHandle;
+    danger: (message: string | ToastOptions, options?: ToastOptions) => ToastHandle;
+    info: (message: string | ToastOptions, options?: ToastOptions) => ToastHandle;
+    dismiss: (id: number) => void;
+    clear: () => void;
+}
+declare const api: ToastApi;
+/**
+ * Raises a toast from anywhere.
+ *
+ * ```ts
+ * const toast = useToast()
+ * toast.success('Saved')
+ * toast.danger({ title: 'Could not save', description: response.message })
+ * ```
+ *
+ * The same object is importable as `toast` for code that is not in a component at
+ * all — an interceptor, say. Put one `<wx-toaster />` on the page to show them.
+ */
+export declare function useToast(): ToastApi;
+export { api as toast };

package/dist/index.d.ts

@@ -3,4 +3,7 @@ export { WebxUI, type WebxUiOptions } from './plugin';
 export type { ControlSize, ControlStatus, ValidationErrors } from './composables/useFormField';
 export { useControlAttrs, type ControlAttrs } from './composables/useControlAttrs';
 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';
+export { confirm, type ConfirmOptions } from './composables/confirm';
 export { useResponsiveShell, shellLayoutFor, type ResponsiveShell, type ResponsiveShellOptions, type ShellLayout, } from './composables/useResponsiveShell';