@webx-ui/core 0.7.0 → 0.9.0

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

@@ -1,4 +1,9 @@
 export * from './components';
 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';