@webx-ui/core 0.4.0 → 0.6.0

package/dist/components/Dialog/Dialog.d.ts

@@ -0,0 +1,105 @@
+import { DialogLayout, DialogProps } from './types';
+type __VLS_Props = DialogProps;
+declare function close(): void;
+/** Back to the declared size, in the middle of the screen, and forgotten. */
+declare function reset(): void;
+type __VLS_PublicProps = {
+    'open'?: boolean;
+} & __VLS_Props;
+declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    slots: Readonly<{
+        /** The control that opens the panel. Exactly one element. */
+        trigger?: (props: {
+            open: boolean;
+        }) => unknown;
+        /** The body. */
+        default?: (props: {
+            close: () => void;
+        }) => unknown;
+        /** Replaces `title`. */
+        title?: () => unknown;
+        /** Next to the heading — badges, or actions that belong to the whole panel. */
+        extra?: (props: {
+            close: () => void;
+        }) => unknown;
+        /** A column beside the body. Its presence is what splits the body in two. */
+        sidebar?: (props: {
+            close: () => void;
+        }) => unknown;
+        /** A row under the body — where the Save and Cancel go. */
+        footer?: (props: {
+            close: () => void;
+        }) => unknown;
+    }> & {
+        /** The control that opens the panel. Exactly one element. */
+        trigger?: (props: {
+            open: boolean;
+        }) => unknown;
+        /** The body. */
+        default?: (props: {
+            close: () => void;
+        }) => unknown;
+        /** Replaces `title`. */
+        title?: () => unknown;
+        /** Next to the heading — badges, or actions that belong to the whole panel. */
+        extra?: (props: {
+            close: () => void;
+        }) => unknown;
+        /** A column beside the body. Its presence is what splits the body in two. */
+        sidebar?: (props: {
+            close: () => void;
+        }) => unknown;
+        /** A row under the body — where the Save and Cancel go. */
+        footer?: (props: {
+            close: () => void;
+        }) => unknown;
+    };
+    refs: {
+        panel: HTMLDivElement;
+    };
+    rootEl: any;
+};
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: import('vue').DefineComponent<__VLS_PublicProps, {
+    close: typeof close;
+    reset: typeof reset;
+}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    close: () => any;
+    open: () => any;
+    "update:open": (value: boolean) => any;
+    layout: (layout: DialogLayout) => any;
+}, string, import('vue').PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    onClose?: (() => any) | undefined;
+    onOpen?: (() => any) | undefined;
+    "onUpdate:open"?: ((value: boolean) => any) | undefined;
+    onLayout?: ((layout: DialogLayout) => any) | undefined;
+}>, {
+    title: string;
+    modal: boolean;
+    ariaLabel: string;
+    closable: boolean;
+    closeLabel: string;
+    scroll: import('./types').DialogScroll;
+    width: number | string;
+    height: number | string;
+    stickyFooter: boolean;
+    minWidth: number;
+    minHeight: number;
+    sidebarWidth: number | string;
+    closeOnOverlay: boolean;
+    closeOnEscape: boolean;
+    overlay: boolean;
+    draggable: boolean;
+    resizable: boolean;
+    persist: string;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {
+    panel: HTMLDivElement;
+}, 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/Dialog/index.d.ts

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

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

@@ -0,0 +1,60 @@
+/**
+ * What scrolls when the content is longer than the screen: the body inside a panel that
+ * stops at the edge of the screen, or the whole panel inside the screen itself.
+ */
+export type DialogScroll = 'body' | 'panel';
+/** Where the panel was left: pixels, and the offset from the middle of the screen. */
+export interface DialogLayout {
+    width?: number;
+    height?: number;
+    x?: number;
+    y?: number;
+}
+export interface DialogProps {
+    /** Heading of the panel. The `title` slot replaces it. */
+    title?: string;
+    /** Width of the panel: a number in pixels, or any CSS length — `520`, `'60%'`. */
+    width?: number | string;
+    /** Height of the panel. Without it the panel grows with its content, up to the screen. */
+    height?: number | string;
+    /**
+     * Where a long panel scrolls. `body` keeps the panel within the screen and scrolls what
+     * is between the heading and the footer. `panel` lets the panel grow past the screen and
+     * scrolls the whole of it — the heading goes with it, and dragging and resizing are off.
+     */
+    scroll?: DialogScroll;
+    /** In `scroll="panel"`, keep the footer against the bottom of the screen. */
+    stickyFooter?: boolean;
+    /** Smallest width a resize may reach, in pixels. */
+    minWidth?: number;
+    /** Smallest height a resize may reach, in pixels. */
+    minHeight?: number;
+    /** Width of the `sidebar` column: a number in pixels, or any CSS length. */
+    sidebarWidth?: number | string;
+    /** Adds a × to the heading. */
+    closable?: boolean;
+    /** Label of that ×, for screen readers. */
+    closeLabel?: string;
+    /** A click outside the panel closes it. */
+    closeOnOverlay?: boolean;
+    /** Escape closes it. */
+    closeOnEscape?: boolean;
+    /** Dim the page behind the panel. */
+    overlay?: boolean;
+    /** Block the page behind the panel, trap focus inside it and lock the page's scroll. */
+    modal?: boolean;
+    /** The panel can be dragged by its heading. */
+    draggable?: boolean;
+    /** The panel can be resized by the grip in its bottom-right corner. */
+    resizable?: boolean;
+    /** Remember size and position under this key, in `localStorage`. */
+    persist?: string;
+    /** Accessible name for the panel when it has no visible heading. */
+    ariaLabel?: string;
+}
+export interface DialogEmits {
+    open: [];
+    close: [];
+    /** The panel was dragged or resized. Carries what `persist` would store. */
+    layout: [layout: DialogLayout];
+}

package/dist/components/Drawer/Drawer.d.ts

@@ -0,0 +1,98 @@
+import { DrawerLayout, DrawerProps } from './types';
+type __VLS_Props = DrawerProps;
+declare function close(): void;
+/** Back to the declared size, and forgotten. */
+declare function reset(): void;
+type __VLS_PublicProps = {
+    'open'?: boolean;
+} & __VLS_Props;
+declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    slots: Readonly<{
+        /** The control that opens the panel. Exactly one element. */
+        trigger?: (props: {
+            open: boolean;
+        }) => unknown;
+        /** The body. The one part of the panel that scrolls. */
+        default?: (props: {
+            close: () => void;
+        }) => unknown;
+        /** Replaces `title`. */
+        title?: () => unknown;
+        /** Next to the heading — badges, or actions that belong to the whole panel. */
+        extra?: (props: {
+            close: () => void;
+        }) => unknown;
+        /** A column beside the body. Its presence is what splits the body in two. */
+        sidebar?: (props: {
+            close: () => void;
+        }) => unknown;
+        /** A row under the body — where the Save and Cancel go. */
+        footer?: (props: {
+            close: () => void;
+        }) => unknown;
+    }> & {
+        /** The control that opens the panel. Exactly one element. */
+        trigger?: (props: {
+            open: boolean;
+        }) => unknown;
+        /** The body. The one part of the panel that scrolls. */
+        default?: (props: {
+            close: () => void;
+        }) => unknown;
+        /** Replaces `title`. */
+        title?: () => unknown;
+        /** Next to the heading — badges, or actions that belong to the whole panel. */
+        extra?: (props: {
+            close: () => void;
+        }) => unknown;
+        /** A column beside the body. Its presence is what splits the body in two. */
+        sidebar?: (props: {
+            close: () => void;
+        }) => unknown;
+        /** A row under the body — where the Save and Cancel go. */
+        footer?: (props: {
+            close: () => void;
+        }) => unknown;
+    };
+    refs: {};
+    rootEl: any;
+};
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: import('vue').DefineComponent<__VLS_PublicProps, {
+    close: typeof close;
+    reset: typeof reset;
+}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    close: () => any;
+    open: () => any;
+    "update:open": (value: boolean) => any;
+    layout: (layout: DrawerLayout) => any;
+}, string, import('vue').PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    onClose?: (() => any) | undefined;
+    onOpen?: (() => any) | undefined;
+    "onUpdate:open"?: ((value: boolean) => any) | undefined;
+    onLayout?: ((layout: DrawerLayout) => any) | undefined;
+}>, {
+    size: number | string;
+    title: string;
+    side: import('./types').DrawerSide;
+    modal: boolean;
+    ariaLabel: string;
+    closable: boolean;
+    closeLabel: string;
+    sidebarWidth: number | string;
+    closeOnOverlay: boolean;
+    closeOnEscape: boolean;
+    overlay: boolean;
+    resizable: boolean;
+    persist: string;
+    minSize: number;
+    resizeLabel: string;
+}, {}, {}, {}, 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/Drawer/index.d.ts

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

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

@@ -0,0 +1,46 @@
+export type DrawerSide = 'right' | 'left' | 'top' | 'bottom';
+/** Where the panel was left: its size along the axis it slides on, in pixels. */
+export interface DrawerLayout {
+    size?: number;
+}
+export interface DrawerProps {
+    /** Heading of the panel. The `title` slot replaces it. */
+    title?: string;
+    /** Edge the panel slides in from. */
+    side?: DrawerSide;
+    /**
+     * How far the panel reaches into the screen: its width on the left and right, its
+     * height at the top and bottom. A number in pixels, or any CSS length — `380`, `'40%'`.
+     */
+    size?: number | string;
+    /** Smallest size a resize may reach, in pixels. */
+    minSize?: number;
+    /** Width of the `sidebar` column: a number in pixels, or any CSS length. */
+    sidebarWidth?: number | string;
+    /** Adds a × to the heading. */
+    closable?: boolean;
+    /** Label of that ×, for screen readers. */
+    closeLabel?: string;
+    /** A click outside the panel closes it. */
+    closeOnOverlay?: boolean;
+    /** Escape closes it. */
+    closeOnEscape?: boolean;
+    /** Dim the page behind the panel. */
+    overlay?: boolean;
+    /** Block the page behind the panel, trap focus inside it and lock the page's scroll. */
+    modal?: boolean;
+    /** The panel can be resized by the edge it faces the page with. */
+    resizable?: boolean;
+    /** Remember the size under this key, in `localStorage`. */
+    persist?: string;
+    /** Accessible name for the panel when it has no visible heading. */
+    ariaLabel?: string;
+    /** Label of the resize handle, for screen readers. */
+    resizeLabel?: string;
+}
+export interface DrawerEmits {
+    open: [];
+    close: [];
+    /** The panel was resized. Carries what `persist` would store. */
+    layout: [layout: DrawerLayout];
+}

package/dist/components/InputNumber/InputNumber.d.ts

@@ -32,9 +32,9 @@ declare const _default: import('vue').DefineComponent<__VLS_PublicProps, {
     readonly: boolean;
     step: number;
     precision: number;
+    wheel: boolean;
     controls: boolean;
     controlsPosition: "sides" | "right";
-    wheel: boolean;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {
     inputRef: HTMLInputElement;
 }, any>;

package/dist/components/Kanban/Kanban.d.ts

@@ -0,0 +1,82 @@
+import { KanbanCard, KanbanColumn, KanbanId, KanbanProps, KanbanVia } from './types';
+declare const _default: <T extends KanbanCard = KanbanCard>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_expose?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
+    props: __VLS_PrettifyLocal<Pick<Partial<{}> & Omit<{
+        readonly onAdd?: ((column: KanbanColumn<T>) => any) | undefined;
+        readonly onMove?: ((move: import('./types').KanbanMove<T>) => any) | undefined;
+        readonly "onUpdate:collapsed"?: ((value: KanbanId[]) => any) | undefined;
+        readonly "onColumn-move"?: ((move: import('./types').KanbanColumnMove<T>) => any) | undefined;
+        readonly "onAdd-column"?: (() => any) | undefined;
+    } & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps, never>, "onAdd" | "onMove" | "onUpdate:collapsed" | "onColumn-move" | "onAdd-column"> & ({
+        collapsed?: KanbanId[];
+    } & KanbanProps<T>) & Partial<{}>> & import('vue').PublicProps;
+    expose(exposed: import('vue').ShallowUnwrapRef<{
+        move: (from: KanbanColumn<T>, fromIndex: number, to: KanbanColumn<T>, toIndex: number, via: KanbanVia) => void;
+        moveColumn: (from: number, to: number, via: KanbanVia) => void;
+        toggle: (column: KanbanColumn<T>) => void;
+    }>): void;
+    attrs: any;
+    slots: Readonly<{
+        /** One card. Without it the board falls back to the card's own title. */
+        card?: (props: {
+            card: T;
+            column: KanbanColumn<T>;
+            index: number;
+        }) => unknown;
+        /** Replaces the title and the count above a column. */
+        'column-header'?: (props: {
+            column: KanbanColumn<T>;
+            count: number;
+            overLimit: boolean;
+        }) => unknown;
+        /** The end of a column's heading — a plus, a menu, whatever the column can do. */
+        'column-actions'?: (props: {
+            column: KanbanColumn<T>;
+            collapsed: boolean;
+        }) => unknown;
+        /** Under the cards, where the add button would be. */
+        'column-footer'?: (props: {
+            column: KanbanColumn<T>;
+        }) => unknown;
+        /** Shown in a column holding no cards. */
+        empty?: (props: {
+            column: KanbanColumn<T>;
+        }) => unknown;
+        /** After the last column, in place of the add-a-column button. */
+        default?: () => unknown;
+    }> & {
+        /** One card. Without it the board falls back to the card's own title. */
+        card?: (props: {
+            card: T;
+            column: KanbanColumn<T>;
+            index: number;
+        }) => unknown;
+        /** Replaces the title and the count above a column. */
+        'column-header'?: (props: {
+            column: KanbanColumn<T>;
+            count: number;
+            overLimit: boolean;
+        }) => unknown;
+        /** The end of a column's heading — a plus, a menu, whatever the column can do. */
+        'column-actions'?: (props: {
+            column: KanbanColumn<T>;
+            collapsed: boolean;
+        }) => unknown;
+        /** Under the cards, where the add button would be. */
+        'column-footer'?: (props: {
+            column: KanbanColumn<T>;
+        }) => unknown;
+        /** Shown in a column holding no cards. */
+        empty?: (props: {
+            column: KanbanColumn<T>;
+        }) => unknown;
+        /** After the last column, in place of the add-a-column button. */
+        default?: () => unknown;
+    };
+    emit: (((evt: "add", column: KanbanColumn<T>) => void) & ((evt: "move", move: import('./types').KanbanMove<T>) => void) & ((evt: "column-move", move: import('./types').KanbanColumnMove<T>) => void) & ((evt: "add-column") => void)) & ((evt: "update:collapsed", value: KanbanId[]) => void);
+}>) => import('vue').VNode & {
+    __ctx?: Awaited<typeof __VLS_setup>;
+};
+export default _default;
+type __VLS_PrettifyLocal<T> = {
+    [K in keyof T]: T[K];
+} & {};

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

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

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

@@ -0,0 +1,83 @@
+export type KanbanId = string | number;
+/** Colour of the line above a column's heading. */
+export type KanbanTone = 'default' | 'primary' | 'success' | 'warning' | 'danger' | 'info';
+export type KanbanSize = 'sm' | 'md';
+/** How something was moved — worth knowing when you animate or undo. */
+export type KanbanVia = 'pointer' | 'keyboard';
+/** The least a card has to carry: something to key it by. */
+export interface KanbanCard {
+    id: KanbanId;
+    [key: string]: unknown;
+}
+export interface KanbanColumn<T extends KanbanCard = KanbanCard> {
+    id: KanbanId;
+    title?: string;
+    /** The cards, in the order they are shown. The board writes moves back into it. */
+    items: T[];
+    /**
+     * How many cards the column is meant to hold. At the limit the count turns red and
+     * nothing more can be dropped in — a work-in-progress limit, the point of a board.
+     */
+    limit?: number;
+    /** Colour of the rule above the heading. */
+    tone?: KanbanTone;
+    /** Cards can be neither taken from this column nor put into it. */
+    disabled?: boolean;
+}
+/** Where a card came from and where it went. */
+export interface KanbanMove<T extends KanbanCard = KanbanCard> {
+    card: T;
+    from: {
+        column: KanbanId;
+        index: number;
+    };
+    to: {
+        column: KanbanId;
+        index: number;
+    };
+    via: KanbanVia;
+}
+/** Where a column came from and where it went. */
+export interface KanbanColumnMove<T extends KanbanCard = KanbanCard> {
+    column: KanbanColumn<T>;
+    from: number;
+    to: number;
+    via: KanbanVia;
+}
+export interface KanbanProps<T extends KanbanCard = KanbanCard> {
+    /** The columns, each carrying its own cards. */
+    columns: KanbanColumn<T>[];
+    /** Boards that share a name exchange cards. Left alone, a board keeps to itself. */
+    group?: string;
+    size?: KanbanSize;
+    /** Width of a column: a number is pixels, a string is any CSS length. */
+    columnWidth?: number | string;
+    /** Nothing on the board can be moved. */
+    disabled?: boolean;
+    /** CSS selector for the part of a card that starts a drag. */
+    handle?: string;
+    /** Shows an add button under every column, which emits `add`. */
+    addable?: boolean;
+    addLabel?: string;
+    /** Lets a column be folded down to a strip. Use `v-model:collapsed` to remember it. */
+    collapsible?: boolean;
+    /** Columns can be dragged into another order, by their heading. */
+    reorderColumns?: boolean;
+    /** Shows an add button after the last column, which emits `add-column`. */
+    columnAddable?: boolean;
+    addColumnLabel?: string;
+    /** Shown in a column with no cards. */
+    emptyText?: string;
+    /** Accessible name for the board. */
+    ariaLabel?: string;
+}
+export interface KanbanEmits<T extends KanbanCard = KanbanCard> {
+    /** A card changed position or column. The arrays have already been updated. */
+    move: [move: KanbanMove<T>];
+    /** A column changed position. */
+    'column-move': [move: KanbanColumnMove<T>];
+    /** The add button under a column was pressed. */
+    add: [column: KanbanColumn<T>];
+    /** The add button after the last column was pressed. */
+    'add-column': [];
+}

package/dist/components/Popover/Popover.d.ts

@@ -63,8 +63,8 @@ declare const __VLS_component: import('vue').DefineComponent<__VLS_PublicProps,
     ariaLabel: string;
     closable: boolean;
     closeLabel: string;
-    arrow: boolean;
     width: number | string;
+    arrow: boolean;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
 declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
 export default _default;

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

@@ -28,9 +28,9 @@ declare const _default: import('vue').DefineComponent<__VLS_PublicProps, {
     status: import('../..').ControlStatus;
     id: string;
     readonly: boolean;
+    resize: "none" | "vertical" | "both";
     maxlength: number;
     showCount: boolean;
-    resize: "none" | "vertical" | "both";
     rows: number;
     autosize: boolean | import('./types').AutosizeOptions;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {

package/dist/components/index.d.ts

@@ -15,6 +15,8 @@ export * from './Countdown';
 export * from './DatePicker';
 export * from './DateRangePicker';
 export * from './DateTimePicker';
+export * from './Dialog';
+export * from './Drawer';
 export * from './Dropdown';
 export * from './DropdownItem';
 export * from './EntityCard';
@@ -25,6 +27,7 @@ export * from './Icon';
 export * from './Indicator';
 export * from './Input';
 export * from './InputNumber';
+export * from './Kanban';
 export * from './Link';
 export * from './Pagination';
 export * from './Popover';

package/dist/composables/useOverlayPanel.d.ts

@@ -0,0 +1,22 @@
+/**
+ * The pieces `WxDialog` and `WxDrawer` have in common: both take a size in pixels or
+ * per cent, both can be dragged to a new one, and both can be told to remember it.
+ */
+/** A number is pixels, however it arrives — `width="520"` in a template is a string. */
+export declare function cssLength(value: number | string | undefined): string | undefined;
+/**
+ * The pixels behind a size prop, when there are any — `'60%'` has none, and a gesture
+ * that starts on such a panel has to measure it instead.
+ */
+export declare function pixelLength(value: number | string | undefined): number | undefined;
+export declare function clamp(value: number, min: number, max: number): number;
+export interface PanelMemory<T> {
+    read: () => Partial<T> | null;
+    write: (value: T) => void;
+    clear: () => void;
+}
+/**
+ * `localStorage`, with every way it can fail treated the same way: remembering a panel's
+ * size is a convenience, and a private window or a full quota only costs the default.
+ */
+export declare function usePanelMemory<T>(prefix: string, key: () => string | undefined): PanelMemory<T>;