@webx-ui/core 0.6.0 → 0.7.0

package/dist/components/MenuItem/MenuItem.d.ts

@@ -0,0 +1,32 @@
+import { MenuItemProps } from './types';
+declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    slots: {
+        icon?(_: {}): any;
+        default?(_: {}): any;
+        trailing?(_: {}): any;
+    };
+    refs: {};
+    rootEl: any;
+};
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: import('vue').DefineComponent<MenuItemProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    click: (event: MouseEvent) => any;
+}, string, import('vue').PublicProps, Readonly<MenuItemProps> & Readonly<{
+    onClick?: ((event: MouseEvent) => any) | undefined;
+}>, {
+    disabled: boolean;
+    as: string | import('vue').Component;
+    label: string;
+    target: string;
+    value: import('..').MenuValue;
+    icon: import('..').IconName;
+    href: 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/MenuItem/index.d.ts

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

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

@@ -0,0 +1,23 @@
+import { Component } from 'vue';
+import { IconName } from '../Icon/types';
+import { MenuValue } from '../../composables/useMenu';
+export interface MenuItemProps {
+    /** What identifies the entry — the value the menu reports as selected. */
+    value?: MenuValue;
+    /** Icon before the label. The only thing left of the entry on a collapsed rail. */
+    icon?: IconName;
+    /**
+     * The label, when a slot would be overkill. It is also what a collapsed rail shows
+     * as the entry's title on hover.
+     */
+    label?: string;
+    /** Where the entry points. Without it the entry is a button. */
+    href?: string;
+    target?: string;
+    /** Renders through another component — `RouterLink`, say, with `to` in the attrs. */
+    as?: string | Component;
+    disabled?: boolean;
+}
+export interface MenuItemEmits {
+    click: [event: MouseEvent];
+}

package/dist/components/Row/Row.d.ts

@@ -0,0 +1,25 @@
+import { RowProps } from './types';
+declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    slots: {
+        default?(_: {}): any;
+    };
+    refs: {};
+    rootEl: any;
+};
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: import('vue').DefineComponent<RowProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<RowProps> & Readonly<{}>, {
+    as: string | import('vue').Component;
+    align: import('./types').RowAlign;
+    justify: import('./types').RowJustify;
+    gutter: number | string;
+    gutterY: number | string;
+    wrap: 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/Row/index.d.ts

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

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

@@ -0,0 +1,17 @@
+import { Component } from 'vue';
+export type RowJustify = 'start' | 'center' | 'end' | 'between' | 'around' | 'evenly';
+export type RowAlign = 'start' | 'center' | 'end' | 'stretch' | 'baseline';
+export interface RowProps {
+    /** Gap between columns: pixels as a number, or any CSS length. */
+    gutter?: number | string;
+    /** Gap between rows once the columns wrap. Defaults to `gutter`. */
+    gutterY?: number | string;
+    /** Distribution along the row. */
+    justify?: RowJustify;
+    /** Alignment across it. */
+    align?: RowAlign;
+    /** Lets columns wrap onto the next line. */
+    wrap?: boolean;
+    /** The element to render. */
+    as?: string | Component;
+}

package/dist/components/Scrollbar/Scrollbar.d.ts

@@ -0,0 +1,39 @@
+import { ScrollbarProps, ScrollMotion, ScrollTarget } from './types';
+declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    slots: {
+        default?(_: {}): any;
+    };
+    refs: {
+        viewport: HTMLDivElement;
+    };
+    rootEl: HTMLDivElement;
+};
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: import('vue').DefineComponent<ScrollbarProps, {
+    /** The scrolling element. */
+    el: import('vue').Ref<HTMLElement | null, HTMLElement | null>;
+    scrollTo: (options: ScrollTarget) => void | undefined;
+    scrollToTop: (behavior?: ScrollMotion) => void | undefined;
+    scrollToBottom: (behavior?: ScrollMotion) => void | undefined;
+}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    scroll: (event: Event) => any;
+}, string, import('vue').PublicProps, Readonly<ScrollbarProps> & Readonly<{
+    onScroll?: ((event: Event) => any) | undefined;
+}>, {
+    size: import('./types').ScrollbarSize;
+    always: boolean;
+    height: number | string;
+    maxHeight: number | string;
+    axis: import('./types').ScrollbarAxis;
+    chainScroll: boolean;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {
+    viewport: HTMLDivElement;
+}, 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/Scrollbar/index.d.ts

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

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

@@ -0,0 +1,30 @@
+export type ScrollbarAxis = 'y' | 'x' | 'both';
+export type ScrollbarSize = 'sm' | 'md';
+export interface ScrollbarProps {
+    /** Fixed height: pixels as a number, or any CSS length. */
+    height?: number | string;
+    /** Height the box grows to before it starts scrolling. */
+    maxHeight?: number | string;
+    /** Which way the content scrolls. */
+    axis?: ScrollbarAxis;
+    /** Thickness of the bar. */
+    size?: ScrollbarSize;
+    /** Keeps the bar visible instead of fading it in on hover. */
+    always?: boolean;
+    /**
+     * Lets a scroll that reaches the end carry on to the page behind it. Off by
+     * default: a panel inside a dialog should not scroll the page under it.
+     */
+    chainScroll?: boolean;
+}
+export interface ScrollbarEmits {
+    scroll: [event: Event];
+}
+/** How a programmatic scroll moves — the native `ScrollBehavior` values. */
+export type ScrollMotion = 'auto' | 'smooth' | 'instant';
+/** Where to scroll to, in the shape the native `scrollTo` takes. */
+export interface ScrollTarget {
+    top?: number;
+    left?: number;
+    behavior?: ScrollMotion;
+}

package/dist/components/Space/Space.d.ts

@@ -0,0 +1,27 @@
+import { SpaceProps } from './types';
+declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    slots: {
+        default?(_: {}): any;
+    };
+    refs: {};
+    rootEl: any;
+};
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: import('vue').DefineComponent<SpaceProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<SpaceProps> & Readonly<{}>, {
+    fill: boolean;
+    size: import('./types').SpaceSize | number | string;
+    as: string | import('vue').Component;
+    align: import('./types').SpaceAlign;
+    inline: boolean;
+    direction: import('./types').SpaceDirection;
+    justify: import('./types').SpaceJustify;
+    wrap: 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/Space/index.d.ts

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

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

@@ -0,0 +1,23 @@
+import { Component } from 'vue';
+export type SpaceDirection = 'horizontal' | 'vertical';
+export type SpaceSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+export type SpaceAlign = 'start' | 'center' | 'end' | 'baseline' | 'stretch';
+export type SpaceJustify = 'start' | 'center' | 'end' | 'between' | 'around' | 'evenly';
+export interface SpaceProps {
+    /** Along the line or down the page. */
+    direction?: SpaceDirection;
+    /** Gap between children: a keyword from the spacing scale, pixels, or any CSS length. */
+    size?: SpaceSize | number | string;
+    /** Cross-axis alignment. */
+    align?: SpaceAlign;
+    /** Main-axis distribution. */
+    justify?: SpaceJustify;
+    /** Lets a horizontal row wrap onto the next line. */
+    wrap?: boolean;
+    /** Children stretch to fill the row — equal-width buttons in a toolbar. */
+    fill?: boolean;
+    /** Renders as `inline-flex`, so the group sits inside a line of text. */
+    inline?: boolean;
+    /** The element to render. */
+    as?: string | Component;
+}

package/dist/components/Submenu/Submenu.d.ts

@@ -0,0 +1,31 @@
+import { SubmenuProps } from './types';
+declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    slots: {
+        icon?(_: {}): any;
+        icon?(_: {}): any;
+        title?(_: {}): any;
+        title?(_: {}): any;
+        default?(_: {}): any;
+        default?(_: {}): any;
+    };
+    refs: {};
+    rootEl: HTMLLIElement;
+};
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: import('vue').DefineComponent<SubmenuProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    toggle: (open: boolean) => any;
+}, string, import('vue').PublicProps, Readonly<SubmenuProps> & Readonly<{
+    onToggle?: ((open: boolean) => any) | undefined;
+}>, {
+    disabled: boolean;
+    title: string;
+    icon: import('..').IconName;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLLIElement>;
+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/Submenu/index.d.ts

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

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

@@ -0,0 +1,15 @@
+import { IconName } from '../Icon/types';
+import { MenuValue } from '../../composables/useMenu';
+export interface SubmenuProps {
+    /** What identifies the branch — the key the menu opens and closes it by. */
+    value: MenuValue;
+    /** Icon before the title. */
+    icon?: IconName;
+    /** The title, when a slot would be overkill. */
+    title?: string;
+    disabled?: boolean;
+}
+export interface SubmenuEmits {
+    /** The branch was opened or closed. */
+    toggle: [open: boolean];
+}

package/dist/components/index.d.ts

@@ -2,26 +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';
@@ -29,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';
@@ -36,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/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';