@webx-ui/core 0.7.0 → 0.8.0

package/dist/components/Container/Container.d.ts

@@ -12,6 +12,7 @@ declare const __VLS_component: import('vue').DefineComponent<ContainerProps, {},
     as: string | import('vue').Component;
     direction: import('./types').ContainerDirection;
     fullHeight: boolean;
+    viewport: boolean;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
 declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
 export default _default;

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

@@ -8,6 +8,16 @@ export interface ContainerProps {
     direction?: ContainerDirection;
     /** Makes the container at least as tall as the viewport. For the outermost one. */
     fullHeight?: boolean;
+    /**
+     * Makes the container exactly as tall as the viewport and stops it growing, so
+     * that what scrolls is a pane inside it rather than the page. This is the shape an
+     * admin shell has: a header that stays put and a main column that scrolls under
+     * it. Pair it with `scroll` on the `WxMain` inside.
+     *
+     * `fullHeight` is the other answer — at least the viewport, with the page itself
+     * scrolling. Use that for a document, this for an application.
+     */
+    viewport?: boolean;
     /** The element to render. */
     as?: string | Component;
 }

package/dist/components/ListDetail/ListDetail.d.ts

@@ -0,0 +1,73 @@
+import { ListDetailProps } from './types';
+type __VLS_Props = ListDetailProps;
+type __VLS_PublicProps = {
+    'open'?: boolean;
+    'filtersOpen'?: boolean;
+} & __VLS_Props;
+declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    slots: Readonly<{
+        /** What narrows the list: views, folders, filters. The column is optional. */
+        filters?: (props: {
+            inline: boolean;
+            close: () => void;
+        }) => unknown;
+        /** The records. */
+        list?: (props: {
+            filtersInline: boolean;
+            openFilters: () => void;
+        }) => unknown;
+        /** The record that is open. */
+        detail?: (props: {
+            inline: boolean;
+            back: () => void;
+        }) => unknown;
+        /** Shown in the pane's place while nothing is selected. */
+        empty?: () => unknown;
+    }> & {
+        /** What narrows the list: views, folders, filters. The column is optional. */
+        filters?: (props: {
+            inline: boolean;
+            close: () => void;
+        }) => unknown;
+        /** The records. */
+        list?: (props: {
+            filtersInline: boolean;
+            openFilters: () => void;
+        }) => unknown;
+        /** The record that is open. */
+        detail?: (props: {
+            inline: boolean;
+            back: () => void;
+        }) => unknown;
+        /** Shown in the pane's place while nothing is selected. */
+        empty?: () => unknown;
+    };
+    refs: {
+        root: HTMLDivElement;
+    };
+    rootEl: HTMLDivElement;
+};
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: import('vue').DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    "update:open": (value: boolean) => any;
+    "update:filtersOpen": (value: boolean) => any;
+}, string, import('vue').PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:open"?: ((value: boolean) => any) | undefined;
+    "onUpdate:filtersOpen"?: ((value: boolean) => any) | undefined;
+}>, {
+    filtersWidth: number | string;
+    listWidth: number | string;
+    detailMin: number;
+    filtersTitle: string;
+    detailLabel: string;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {
+    root: 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/ListDetail/index.d.ts

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

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

@@ -0,0 +1,19 @@
+export interface ListDetailProps {
+    /**
+     * Width of the column that narrows the list: saved views, filters, folders.
+     * The column is only rendered when the `filters` slot is used.
+     */
+    filtersWidth?: number | string;
+    /** Width of the list of records. */
+    listWidth?: number | string;
+    /**
+     * The narrowest the detail pane may be. It is what the two thresholds are made
+     * of: the filters column folds away when it would push the pane under this, and
+     * the pane stops standing beside the list when it no longer fits either.
+     */
+    detailMin?: number;
+    /** Heading of the panel the filters move into once the column does not fit. */
+    filtersTitle?: string;
+    /** Accessible name of the panel the detail opens in on a narrow screen. */
+    detailLabel?: string;
+}

package/dist/components/Menu/Menu.d.ts

@@ -10,7 +10,9 @@ declare function __VLS_template(): {
     slots: {
         default?(_: {}): any;
     };
-    refs: {};
+    refs: {
+        list: HTMLUListElement;
+    };
     rootEl: HTMLUListElement;
 };
 type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
@@ -27,9 +29,13 @@ declare const __VLS_component: import('vue').DefineComponent<__VLS_PublicProps,
     label: string;
     collapsed: boolean;
     mode: import('./types').MenuMode;
+    overflow: import('./types').MenuOverflow;
+    overflowTitle: string;
     accordion: boolean;
     autoExpand: boolean;
-}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLUListElement>;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {
+    list: HTMLUListElement;
+}, HTMLUListElement>;
 declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
 export default _default;
 type __VLS_WithTemplateSlots<T, S> = T & {

package/dist/components/Menu/nodes.d.ts

@@ -0,0 +1,30 @@
+import { PropType, VNode } from 'vue';
+/**
+ * The entries of a menu as a flat list, so they can be counted and split between the
+ * bar and the branch that holds what did not fit.
+ *
+ * A `v-for` arrives as one fragment holding many entries, and a `v-if` that is false
+ * arrives as a comment. Both have to go: the list is lined up index for index against
+ * the `<li>` elements the browser actually laid out, and a comment is not one.
+ */
+export declare function flattenEntries(nodes: VNode[]): VNode[];
+/**
+ * Renders vnodes that have already been created — the two halves of a split menu.
+ *
+ * It exists because a template can render a slot but not a slice of one, and the
+ * entries must be rendered *once*: an entry that appeared in both halves would
+ * register itself twice and report the wrong branch to the menu above it.
+ */
+export declare const WxMenuNodes: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+    nodes: {
+        type: PropType<VNode[]>;
+        required: true;
+    };
+}>, () => VNode<import('vue').RendererNode, import('vue').RendererElement, {
+    [key: string]: any;
+}>[], {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+    nodes: {
+        type: PropType<VNode[]>;
+        required: true;
+    };
+}>> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;

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

@@ -1,10 +1,20 @@
 import { MenuMode, MenuSize, MenuValue } from '../../composables/useMenu';
 export type { MenuMode, MenuSize, MenuValue };
+/**
+ * What a bar does with entries it has no room for: move them into a branch at the
+ * end of it, or let the bar scroll sideways. Vertical menus ignore this — a column
+ * has as much room as it needs.
+ */
+export type MenuOverflow = 'menu' | 'scroll';
 export interface MenuProps {
     /** A sidebar down the page, or a bar across the top of it. */
     mode?: MenuMode;
     /** Row height and text size. */
     size?: MenuSize;
+    /** What a bar does with the entries that do not fit across it. */
+    overflow?: MenuOverflow;
+    /** Title of the branch those entries move into. */
+    overflowTitle?: string;
     /**
      * The icon rail: labels are hidden and submenus open as flyouts beside the rail.
      * Vertical menus only — there is nothing to collapse in a bar.

package/dist/components/index.d.ts

@@ -38,6 +38,7 @@ export * from './Input';
 export * from './InputNumber';
 export * from './Kanban';
 export * from './Link';
+export * from './ListDetail';
 export * from './Main';
 export * from './Menu';
 export * from './MenuGroup';

package/dist/composables/useControlAttrs.d.ts

@@ -0,0 +1,35 @@
+import { ComputedRef } from 'vue';
+/**
+ * Splits what the caller wrote on a control between its two halves.
+ *
+ * Every control here sets `inheritAttrs: false` and hands `$attrs` to the element
+ * inside it, so that `placeholder`, `autocomplete`, `data-*` and the ARIA attributes
+ * reach the real `<input>` rather than the wrapper around it. Taken literally that
+ * sends `class` and `style` there too, and both are then in the wrong place:
+ *
+ * - The caller means the control, not its input. `class="w-60"` on a `<wx-select>` is
+ *   asking for a narrower select, and the select is the wrapper.
+ * - A parent's scoped CSS cannot reach it. Scoped styles carry an attribute that is
+ *   stamped on a child component's *root*, so a class that lands three elements deep
+ *   matches nothing — silently.
+ * - And where `$attrs` is bound to an element that is only sometimes rendered — the
+ *   search field of a filterable `WxSelect` — the class disappears altogether.
+ *
+ * So `class` and `style` go on the root, and everything else goes on the control.
+ *
+ * ```ts
+ * const { rootAttrs, controlAttrs } = useControlAttrs()
+ * ```
+ * ```vue
+ * <div :class="classes" v-bind="rootAttrs">
+ *   <input v-bind="controlAttrs" />
+ * </div>
+ * ```
+ */
+export interface ControlAttrs {
+    /** `class` and `style` — for the wrapper the caller can see. */
+    rootAttrs: ComputedRef<Record<string, unknown>>;
+    /** Everything else — for the element the browser focuses and reads out. */
+    controlAttrs: ComputedRef<Record<string, unknown>>;
+}
+export declare function useControlAttrs(): ControlAttrs;

package/dist/composables/useElementWidth.d.ts

@@ -0,0 +1,17 @@
+import { Ref } from 'vue';
+/**
+ * The width of an element, kept up to date — the measurement every layout that
+ * answers to its own box rather than to the window is built on.
+ *
+ * `0` means nothing has been measured yet: on the server, and until the element is
+ * mounted. Treat it as "assume the roomy case" rather than as zero width, the way
+ * `useResponsiveShell` does — the real number arrives before paint.
+ *
+ * ```ts
+ * const el = ref<HTMLElement | null>(null)
+ * const width = useElementWidth(el)
+ * ```
+ *
+ * Pass nothing to measure the page itself.
+ */
+export declare function useElementWidth(target?: Ref<HTMLElement | null | undefined>): Ref<number>;

package/dist/index.d.ts

@@ -1,4 +1,6 @@
 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 { useResponsiveShell, shellLayoutFor, type ResponsiveShell, type ResponsiveShellOptions, type ShellLayout, } from './composables/useResponsiveShell';