@webx-ui/core 0.5.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

@@ -2,11 +2,11 @@ import { KanbanCard, KanbanColumn, KanbanId, KanbanProps, KanbanVia } from './ty
 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 "onUpdate:collapsed"?: ((value: KanbanId[]) => 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" | "onUpdate:collapsed" | "onMove" | "onColumn-move" | "onAdd-column"> & ({
+    } & 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<{

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

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