@webx-ui/core 0.5.0 → 0.7.0

package/dist/components/index.d.ts

@@ -2,24 +2,35 @@ export * from './Accordion';
 export * from './AccordionItem';
 export * from './Action';
 export * from './Actions';
+export * from './Alert';
+export * from './Aside';
 export * from './Autocomplete';
 export * from './Badge';
+export * from './Breadcrumb';
+export * from './BreadcrumbItem';
 export * from './Button';
 export * from './ButtonGroup';
 export * from './Card';
 export * from './Cascader';
 export * from './Checkbox';
 export * from './CheckboxGroup';
+export * from './Col';
 export * from './ColorPicker';
+export * from './Container';
 export * from './Countdown';
 export * from './DatePicker';
 export * from './DateRangePicker';
 export * from './DateTimePicker';
+export * from './Dialog';
+export * from './Divider';
+export * from './Drawer';
 export * from './Dropdown';
 export * from './DropdownItem';
 export * from './EntityCard';
+export * from './Footer';
 export * from './Form';
 export * from './FormItem';
+export * from './Header';
 export * from './Heading';
 export * from './Icon';
 export * from './Indicator';
@@ -27,6 +38,10 @@ export * from './Input';
 export * from './InputNumber';
 export * from './Kanban';
 export * from './Link';
+export * from './Main';
+export * from './Menu';
+export * from './MenuGroup';
+export * from './MenuItem';
 export * from './Pagination';
 export * from './Popover';
 export * from './Prose';
@@ -34,9 +49,13 @@ export * from './Radio';
 export * from './RadioGroup';
 export * from './Rate';
 export * from './RichText';
+export * from './Row';
+export * from './Scrollbar';
 export * from './Select';
 export * from './Slider';
+export * from './Space';
 export * from './Statistic';
+export * from './Submenu';
 export * from './Switch';
 export * from './Tab';
 export * from './Table';

package/dist/composables/useBreadcrumb.d.ts

@@ -0,0 +1,13 @@
+import { ComputedRef, InjectionKey } from 'vue';
+import { IconName } from '../components/Icon/types';
+export type BreadcrumbSize = 'sm' | 'md';
+/** What `WxBreadcrumb` hands down to the items inside it. */
+export interface BreadcrumbContext {
+    /** The character drawn between items. */
+    separator: ComputedRef<string>;
+    /** An icon drawn instead of that character. */
+    separatorIcon: ComputedRef<IconName | undefined>;
+    size: ComputedRef<BreadcrumbSize>;
+}
+export declare const breadcrumbKey: InjectionKey<BreadcrumbContext>;
+export declare function useBreadcrumb(): BreadcrumbContext | null;

package/dist/composables/useMenu.d.ts

@@ -0,0 +1,49 @@
+import { ComputedRef, InjectionKey } from 'vue';
+export type MenuMode = 'vertical' | 'horizontal';
+export type MenuSize = 'sm' | 'md';
+/** What identifies an entry: whatever you would put in a route table. */
+export type MenuValue = string | number;
+/** What `WxMenu` hands down to everything inside it. */
+export interface MenuContext {
+    mode: ComputedRef<MenuMode>;
+    size: ComputedRef<MenuSize>;
+    /** The icon rail: labels hidden, submenus opening as flyouts. */
+    collapsed: ComputedRef<boolean>;
+    /** The entry that is currently selected. */
+    active: ComputedRef<MenuValue | undefined>;
+    /** The submenus the active entry sits in, outermost first. */
+    trail: ComputedRef<MenuValue[]>;
+    select: (value: MenuValue, event: MouseEvent) => void;
+    isOpen: (value: MenuValue) => boolean;
+    setOpen: (value: MenuValue, open: boolean, ancestors: MenuValue[]) => void;
+    /**
+     * Bumped when every open flyout should close — an entry inside one was chosen.
+     * A panel cannot close on any click of its own: the branches inside it are opened
+     * by clicking too, and that would shut the panel before they could unfold.
+     */
+    closeSignal: ComputedRef<number>;
+    closeFlyouts: () => void;
+    /**
+     * An entry says where it sits so a submenu can tell it holds the active one —
+     * the highlight on a collapsed branch, and what `autoExpand` follows.
+     */
+    register: (value: MenuValue, ancestors: MenuValue[]) => void;
+    unregister: (value: MenuValue) => void;
+}
+/** What a `WxSubmenu` hands down to the entries it holds. */
+export interface SubmenuContext {
+    /** The submenus above this one, outermost first, including itself. */
+    ancestors: MenuValue[];
+    /** How deep the entries below sit — what the indent is counted from. */
+    depth: number;
+    /**
+     * Whether these entries are already inside a flyout panel. A panel is a fresh
+     * surface: the depth restarts at its edge, and the branches in it open inline
+     * rather than throwing a second panel beside the first.
+     */
+    inFlyout: boolean;
+}
+export declare const menuKey: InjectionKey<MenuContext>;
+export declare const submenuKey: InjectionKey<SubmenuContext>;
+export declare function useMenu(): MenuContext | null;
+export declare function useSubmenu(): SubmenuContext;

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

package/dist/composables/useResponsiveShell.d.ts

@@ -0,0 +1,59 @@
+import { ComputedRef, Ref } from 'vue';
+/** What shape the navigation takes at the width it has been given. */
+export type ShellLayout = 'sidebar' | 'rail' | 'drawer';
+export interface ResponsiveShellOptions {
+    /** Under this width the menu leaves the page for a drawer behind a burger. */
+    phone?: number;
+    /** Under this width the sidebar starts as an icon rail. */
+    tablet?: number;
+    /** Whether it starts as a rail on a screen wide enough for the full sidebar. */
+    collapsed?: boolean;
+    /**
+     * Remembers a sidebar that was closed by hand, under this key in `localStorage`.
+     * Only the closing is kept: a sidebar left open goes back to following the width,
+     * so a desktop opens it and a tablet still starts with the rail.
+     */
+    persist?: string;
+}
+export interface ResponsiveShell {
+    /** Width of what is being measured, in pixels. `0` until it has been measured. */
+    width: Ref<number>;
+    layout: ComputedRef<ShellLayout>;
+    /** Hand this to `WxAside` and `WxMenu` — true for both the rail and the drawer. */
+    collapsed: ComputedRef<boolean>;
+    /** Whether there is room for a sidebar at all. False on a phone. */
+    showAside: ComputedRef<boolean>;
+    drawerOpen: Ref<boolean>;
+    /**
+     * What the one button in the header does: it collapses and expands the sidebar
+     * while the sidebar is on the page, and opens the drawer once the menu is gone.
+     * The icon follows `layout` — a burger belongs to the drawer alone.
+     */
+    toggle: () => void;
+    close: () => void;
+}
+/**
+ * The rule on its own, so it can be read — and tested — without a browser.
+ *
+ * `collapsed` is the answer to "is the sidebar a rail", and `null` leaves it to the
+ * width: a rail from the tablet breakpoint down. Only the phone breakpoint is
+ * absolute, because a menu that has nowhere to stand has to leave the page.
+ *
+ * A width of `0` means nothing has been measured yet: on the server, and on the very
+ * first render. The widest shape is the right guess there, since it is the one a
+ * desktop gets, and the measurement that follows corrects it before paint.
+ */
+export declare function shellLayoutFor(width: number, collapsed: boolean | null, options?: ResponsiveShellOptions): ShellLayout;
+/**
+ * Drives the three shapes an admin sidebar takes — full, icon rail, drawer — from
+ * the width of the shell rather than from the viewport's. The two are the same
+ * thing on a real page, and they are not inside a preview, a split screen or the
+ * demo box on this page, which is the case that catches a viewport media query out.
+ *
+ * ```ts
+ * const shell = useResponsiveShell(shellRef)
+ * ```
+ *
+ * Pass nothing to measure the page itself.
+ */
+export declare function useResponsiveShell(target?: Ref<HTMLElement | null | undefined>, options?: ResponsiveShellOptions): ResponsiveShell;

package/dist/index.d.ts

@@ -1,3 +1,4 @@
 export * from './components';
 export { WebxUI, type WebxUiOptions } from './plugin';
 export type { ControlSize, ControlStatus, ValidationErrors } from './composables/useFormField';
+export { useResponsiveShell, shellLayoutFor, type ResponsiveShell, type ResponsiveShellOptions, type ShellLayout, } from './composables/useResponsiveShell';