ropav 0.4.0 → 0.5.0

package/dist/components/sidebar/sidebar.storage.js

@@ -0,0 +1,45 @@
+//#region src/components/sidebar/sidebar.storage.ts
+var VERSION = 1;
+var keyFor = (id) => `ropav:sidebar:${id}`;
+/**
+* Storage can throw rather than merely fail — Safari's private mode raises on access, not only on
+* write — so every call is guarded, and an unreadable store is treated as an empty one.
+*/
+var storage = () => {
+	try {
+		return typeof window === "undefined" ? null : window.localStorage;
+	} catch {
+		return null;
+	}
+};
+/** What was stored under `id`, or `null` when there is nothing usable there. */
+var readSidebarLayout = (id) => {
+	const store = storage();
+	if (!store) return null;
+	try {
+		const raw = store.getItem(keyFor(id));
+		if (!raw) return null;
+		const parsed = JSON.parse(raw);
+		if (parsed?.v !== VERSION || typeof parsed.e !== "boolean") return null;
+		return {
+			isExpanded: parsed.e,
+			width: typeof parsed.w === "string" ? parsed.w : void 0
+		};
+	} catch {
+		return null;
+	}
+};
+var writeSidebarLayout = (id, isExpanded, width) => {
+	const store = storage();
+	if (!store) return;
+	const layout = {
+		e: isExpanded,
+		v: VERSION,
+		...width ? { w: width } : {}
+	};
+	try {
+		store.setItem(keyFor(id), JSON.stringify(layout));
+	} catch {}
+};
+//#endregion
+export { readSidebarLayout, writeSidebarLayout };

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

@@ -0,0 +1,259 @@
+import type { PressEvent } from "../../composables/use-press.js";
+import type { LinkCurrent } from "../link/link.types.js";
+import type { SidebarCollapsibleMode } from "./sidebar.state.js";
+import type { SidebarVariants } from "@ropav/styles";
+/** Which edge of the page the panel sits on. */
+export type SidebarSide = NonNullable<SidebarVariants["side"]>;
+export interface SidebarRootProps {
+    class?: string;
+    /** @default "left" */
+    side?: SidebarSide;
+    /** How the panel gets out of the way. `none` pins it open. @default "icon" */
+    collapsible?: SidebarCollapsibleMode;
+    /** Whether the panel is expanded. Set, the sidebar reports a toggle rather than acting on it. */
+    isExpanded?: boolean;
+    /** Whether the panel starts expanded, when the caller is not controlling it. @default true */
+    defaultExpanded?: boolean;
+    /**
+     * Whether the drawer is showing on a narrow viewport.
+     *
+     * Held apart from `isExpanded` on purpose: one flag across both widths would open the drawer
+     * already collapsed for anyone who had collapsed the sidebar first.
+     */
+    isMobileOpen?: boolean;
+    /** @default false */
+    defaultMobileOpen?: boolean;
+    /** The width the expanded panel renders at, as a CSS length. */
+    width?: string;
+    /** The width it starts at. Unset, the stylesheet decides and nothing is written inline. */
+    defaultWidth?: string;
+    /**
+     * Where the sidebar is remembered between visits, under `ropav:sidebar:<id>` in `localStorage`.
+     *
+     * The wide-viewport state only: whether the panel was left expanded and how wide it was. What
+     * the drawer was doing is not worth restoring — it is opened to be used and closed when it is.
+     */
+    autoSaveId?: string;
+    /**
+     * The viewport at or below which the panel becomes a drawer, as a media query.
+     *
+     * Written as a query rather than a number so a caller can key it to whatever their layout
+     * actually needs — a container, an orientation, a coarse pointer. @default "(max-width: 47.99rem)"
+     */
+    breakpoint?: string;
+}
+export interface SidebarRootEmits {
+    expandedChange: [isExpanded: boolean];
+    "update:isExpanded": [isExpanded: boolean];
+    mobileOpenChange: [isOpen: boolean];
+    "update:isMobileOpen": [isOpen: boolean];
+    "update:width": [width: string];
+}
+export interface SidebarPanelProps {
+    class?: string;
+    /**
+     * Accessible name for the landmark. Declared as `ariaLabel`, not `aria-label`: Vue normalises
+     * prop names, so a hyphenated declaration would never be matched. @default "Sidebar"
+     */
+    ariaLabel?: string;
+    /** Ids of the elements that name the landmark. */
+    ariaLabelledby?: string;
+}
+export interface SidebarInsetProps {
+    class?: string;
+}
+export interface SidebarHeaderProps {
+    class?: string;
+}
+export interface SidebarContentProps {
+    class?: string;
+    /**
+     * Whether the scroll region fades at whichever edge has more nav beyond it.
+     *
+     * On by default, and it costs nothing when there is nothing to say: the fade is a mask keyed on
+     * attributes that only appear once the region actually overflows, so a nav short enough to fit is
+     * left exactly as it was. @default true
+     */
+    showScrollShadow?: boolean;
+    /** How deep the fade runs, in pixels. Also how far focus is kept clear of it. @default 40 */
+    scrollShadowSize?: number;
+}
+export interface SidebarFooterProps {
+    class?: string;
+}
+export interface SidebarGroupProps {
+    class?: string;
+    /** Names the group where no `Sidebar.GroupLabel` does. */
+    ariaLabel?: string;
+}
+export interface SidebarGroupLabelProps {
+    class?: string;
+}
+export interface SidebarSeparatorProps {
+    class?: string;
+}
+export interface SidebarRailProps {
+    class?: string;
+    /**
+     * Whether dragging the rail resizes the panel. Off, it is a toggle strip and nothing else.
+     * @default false
+     */
+    isResizable?: boolean;
+    /** Suppresses both gestures. */
+    isDisabled?: boolean;
+    /** Narrowest width a drag may reach, in pixels. @default 180 */
+    minWidth?: number;
+    /** Widest width a drag may reach, in pixels. @default 480 */
+    maxWidth?: number;
+    /** How far one arrow press moves the edge, in pixels. @default 10 */
+    keyboardStep?: number;
+    /** How far a shift-arrow press moves it, in pixels. @default 50 */
+    keyboardLargeStep?: number;
+    /** @default "Resize sidebar" when it resizes, "Toggle sidebar" when it only toggles */
+    ariaLabel?: string;
+    ariaLabelledby?: string;
+}
+/** State the rail hands to its slot. */
+export interface SidebarRailSlotProps {
+    isDragging: boolean;
+    isHovered: boolean;
+    isFocused: boolean;
+    isFocusVisible: boolean;
+    isDisabled: boolean;
+    isResizable: boolean;
+    isCollapsed: boolean;
+}
+export interface SidebarItemProps {
+    class?: string;
+    /** Where the item goes. Without one it renders as a button, for a nav that acts rather than
+     * navigates. */
+    href?: string;
+    target?: string;
+    rel?: string;
+    /** Marks the item as the one for the current page. `"auto"` asks the router instead. */
+    ariaCurrent?: LinkCurrent;
+    /**
+     * Passed through to the router's `navigate` alongside the href, for whatever options the
+     * application's router accepts. Ignored without a `RouterProvider` above.
+     */
+    routerOptions?: unknown;
+    isDisabled?: boolean;
+    ariaLabel?: string;
+    ariaLabelledby?: string;
+    ariaDescribedby?: string;
+}
+export interface SidebarItemEmits {
+    press: [event: PressEvent];
+}
+export interface SidebarItemIconProps {
+    class?: string;
+}
+export interface SidebarItemLabelProps {
+    class?: string;
+}
+export interface SidebarItemTrailingProps {
+    class?: string;
+}
+export interface SidebarCollapsibleProps {
+    class?: string;
+    /** Whether the rows under this item are showing. Set, it reports a toggle rather than acting. */
+    isExpanded?: boolean;
+    /** Whether they start showing, when the caller is not controlling it. @default false */
+    defaultExpanded?: boolean;
+    isDisabled?: boolean;
+}
+export interface SidebarCollapsibleEmits {
+    expandedChange: [isExpanded: boolean];
+    "update:isExpanded": [isExpanded: boolean];
+}
+export interface SidebarCollapsibleTriggerProps {
+    class?: string;
+    isDisabled?: boolean;
+    ariaLabel?: string;
+}
+export interface SidebarSubMenuProps {
+    class?: string;
+    /** Names the list of children. @default the trigger names it */
+    ariaLabel?: string;
+}
+export interface SidebarItemIndicatorProps {
+    class?: string;
+}
+/** State a collapsible item hands to its slot. */
+export interface SidebarCollapsibleSlotProps {
+    isExpanded: boolean;
+    isDisabled: boolean;
+    /** Whether the sidebar itself has narrowed to its rail, where the children are not rendered. */
+    isCollapsed: boolean;
+}
+/** State the trigger hands to its slot. */
+export interface SidebarCollapsibleTriggerSlotProps extends SidebarCollapsibleSlotProps {
+    isHovered: boolean;
+    isFocused: boolean;
+    isFocusVisible: boolean;
+    isPressed: boolean;
+}
+export interface SidebarItemTooltipProps {
+    class?: string;
+    /**
+     * What the tooltip says — the item's own label, which the rail has taken out of sight.
+     *
+     * Restated rather than read off `Sidebar.ItemLabel`, because the label is a slot and its text is
+     * whatever a caller rendered into it; reaching into the DOM to find out would tie the tooltip to
+     * a markup shape neither part promises.
+     */
+    label?: string;
+    /**
+     * How long the pointer has to rest on the item before the tooltip opens.
+     *
+     * Left to the theme's `--tooltip-delay` by default, the same as every other tooltip. A rail is a
+     * good reason to want this shorter — the label is the only way to read the item, not a hint
+     * beside one — but that is a decision about the whole product's tooltips, not about this part.
+     */
+    delay?: number;
+    /** How long it stays after the pointer leaves. Left to the theme by default. */
+    closeDelay?: number;
+}
+/** State an item hands to its slot, matching the link's render props plus the sidebar's shape. */
+export interface SidebarItemSlotProps {
+    isCurrent: boolean;
+    isDisabled: boolean;
+    isHovered: boolean;
+    isPressed: boolean;
+    isFocused: boolean;
+    isFocusVisible: boolean;
+    /** Whether the sidebar has narrowed to its rail, so a caller can hang a tooltip off it. */
+    isCollapsed: boolean;
+}
+export interface SidebarTriggerProps {
+    class?: string;
+    isDisabled?: boolean;
+    /** @default "Toggle sidebar" */
+    ariaLabel?: string;
+}
+/** State the root hands to its slot. */
+export interface SidebarSlotProps {
+    side: SidebarSide;
+    collapsible: SidebarCollapsibleMode;
+    isOpen: boolean;
+    isExpanded: boolean;
+    /** Narrowed rather than hidden. Always false where the panel is a drawer. */
+    isCollapsed: boolean;
+    isMobile: boolean;
+}
+/** State a part reading only the sidebar's shape hands to its slot. */
+export interface SidebarPartSlotProps {
+    isCollapsed: boolean;
+    isOpen: boolean;
+    isMobile: boolean;
+}
+/** State the trigger hands to its slot. */
+export interface SidebarTriggerSlotProps {
+    isOpen: boolean;
+    isCollapsed: boolean;
+    isHovered: boolean;
+    isFocused: boolean;
+    isFocusVisible: boolean;
+    isPressed: boolean;
+    isDisabled: boolean;
+}

package/dist/components/splitter/index.d.ts

@@ -0,0 +1,143 @@
+import SplitterHandle from "./splitter-handle.js";
+import SplitterPanel from "./splitter-panel.js";
+import SplitterRoot from "./splitter-root.js";
+export declare const Splitter: ((__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>['props'], __VLS_ctx?: {
+    attrs: any;
+    slots: {
+        default?: (props: import("./splitter.types.js").SplitterSlotProps) => unknown;
+    };
+    emit: ((evt: "collapse", key: import("../../index.js").CollectionKey) => void) & ((evt: "expand", key: import("../../index.js").CollectionKey) => void) & ((evt: "resize", sizes: import("../../utils/flex-sizing.js").FlexSize[]) => void) & ((evt: "resizeEnd", sizes: import("../../utils/flex-sizing.js").FlexSize[]) => void) & ((evt: "resizeStart", sizes: import("../../utils/flex-sizing.js").FlexSize[]) => void) & ((evt: "update:sizes", sizes: import("../../utils/flex-sizing.js").FlexSize[]) => void);
+}, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>['expose'], __VLS_setup?: Promise<{
+    props: import('vue').PublicProps & {
+        class?: string;
+        orientation?: import("./splitter.state.js").SplitterOrientation;
+        sizes?: import("./splitter.state.js").SplitterSize[];
+        defaultSizes?: import("./splitter.state.js").SplitterSize[];
+        autoSaveId?: string;
+        isDisabled?: boolean;
+        keyboardStep?: number;
+        keyboardLargeStep?: number;
+        ariaLabel?: string;
+        ariaLabelledby?: string;
+        onCollapse?: ((key: import("../../index.js").CollectionKey) => any) | undefined;
+        onExpand?: ((key: import("../../index.js").CollectionKey) => any) | undefined;
+        onResize?: ((sizes: import("../../utils/flex-sizing.js").FlexSize[]) => any) | undefined;
+        onResizeEnd?: ((sizes: import("../../utils/flex-sizing.js").FlexSize[]) => any) | undefined;
+        onResizeStart?: ((sizes: import("../../utils/flex-sizing.js").FlexSize[]) => any) | undefined;
+        "onUpdate:sizes"?: ((sizes: import("../../utils/flex-sizing.js").FlexSize[]) => any) | undefined;
+    } & (typeof globalThis extends {
+        __VLS_PROPS_FALLBACK: infer P;
+    } ? P : {});
+    expose: (exposed: import('vue').ShallowUnwrapRef<{
+        measure: () => void;
+    }>) => void;
+    attrs: any;
+    slots: {
+        default?: (props: import("./splitter.types.js").SplitterSlotProps) => unknown;
+    };
+    emit: ((evt: "collapse", key: import("../../index.js").CollectionKey) => void) & ((evt: "expand", key: import("../../index.js").CollectionKey) => void) & ((evt: "resize", sizes: import("../../utils/flex-sizing.js").FlexSize[]) => void) & ((evt: "resizeEnd", sizes: import("../../utils/flex-sizing.js").FlexSize[]) => void) & ((evt: "resizeStart", sizes: import("../../utils/flex-sizing.js").FlexSize[]) => void) & ((evt: "update:sizes", sizes: import("../../utils/flex-sizing.js").FlexSize[]) => void);
+}>) => import('vue').VNode & {
+    __ctx?: NonNullable<Awaited<typeof __VLS_setup>>;
+}) & {
+    Handle: (__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>['props'], __VLS_ctx?: {
+        attrs: any;
+        slots: {
+            default?: (props: import("./splitter.types.js").SplitterHandleSlotProps) => unknown;
+        };
+        emit: {};
+    }, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>['expose'], __VLS_setup?: Promise<{
+        props: import('vue').PublicProps & {
+            class?: string;
+            id?: import("../../index.js").CollectionKey;
+            isDisabled?: boolean;
+            resetOnDoubleClick?: boolean;
+            showGrip?: boolean;
+            ariaLabel?: string;
+            ariaLabelledby?: string;
+        } & (typeof globalThis extends {
+            __VLS_PROPS_FALLBACK: infer P;
+        } ? P : {});
+        expose: (exposed: {}) => void;
+        attrs: any;
+        slots: {
+            default?: (props: import("./splitter.types.js").SplitterHandleSlotProps) => unknown;
+        };
+        emit: {};
+    }>) => import('vue').VNode & {
+        __ctx?: NonNullable<Awaited<typeof __VLS_setup>>;
+    };
+    Panel: (__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>['props'], __VLS_ctx?: {
+        attrs: any;
+        slots: {
+            default?: (props: import("./splitter.types.js").SplitterPanelSlotProps) => unknown;
+        };
+        emit: {};
+    }, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>['expose'], __VLS_setup?: Promise<{
+        props: import('vue').PublicProps & {
+            class?: string;
+            id?: import("../../index.js").CollectionKey;
+            size?: import("./splitter.state.js").SplitterSize;
+            defaultSize?: import("./splitter.state.js").SplitterSize;
+            minSize?: import("./splitter.state.js").SplitterSize;
+            maxSize?: import("./splitter.state.js").SplitterSize;
+            isCollapsible?: boolean;
+            collapsedSize?: import("./splitter.state.js").SplitterSize;
+        } & (typeof globalThis extends {
+            __VLS_PROPS_FALLBACK: infer P;
+        } ? P : {});
+        expose: (exposed: {}) => void;
+        attrs: any;
+        slots: {
+            default?: (props: import("./splitter.types.js").SplitterPanelSlotProps) => unknown;
+        };
+        emit: {};
+    }>) => import('vue').VNode & {
+        __ctx?: NonNullable<Awaited<typeof __VLS_setup>>;
+    };
+    Root: (__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>['props'], __VLS_ctx?: {
+        attrs: any;
+        slots: {
+            default?: (props: import("./splitter.types.js").SplitterSlotProps) => unknown;
+        };
+        emit: ((evt: "collapse", key: import("../../index.js").CollectionKey) => void) & ((evt: "expand", key: import("../../index.js").CollectionKey) => void) & ((evt: "resize", sizes: import("../../utils/flex-sizing.js").FlexSize[]) => void) & ((evt: "resizeEnd", sizes: import("../../utils/flex-sizing.js").FlexSize[]) => void) & ((evt: "resizeStart", sizes: import("../../utils/flex-sizing.js").FlexSize[]) => void) & ((evt: "update:sizes", sizes: import("../../utils/flex-sizing.js").FlexSize[]) => void);
+    }, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>['expose'], __VLS_setup?: Promise<{
+        props: import('vue').PublicProps & {
+            class?: string;
+            orientation?: import("./splitter.state.js").SplitterOrientation;
+            sizes?: import("./splitter.state.js").SplitterSize[];
+            defaultSizes?: import("./splitter.state.js").SplitterSize[];
+            autoSaveId?: string;
+            isDisabled?: boolean;
+            keyboardStep?: number;
+            keyboardLargeStep?: number;
+            ariaLabel?: string;
+            ariaLabelledby?: string;
+            onCollapse?: ((key: import("../../index.js").CollectionKey) => any) | undefined;
+            onExpand?: ((key: import("../../index.js").CollectionKey) => any) | undefined;
+            onResize?: ((sizes: import("../../utils/flex-sizing.js").FlexSize[]) => any) | undefined;
+            onResizeEnd?: ((sizes: import("../../utils/flex-sizing.js").FlexSize[]) => any) | undefined;
+            onResizeStart?: ((sizes: import("../../utils/flex-sizing.js").FlexSize[]) => any) | undefined;
+            "onUpdate:sizes"?: ((sizes: import("../../utils/flex-sizing.js").FlexSize[]) => any) | undefined;
+        } & (typeof globalThis extends {
+            __VLS_PROPS_FALLBACK: infer P;
+        } ? P : {});
+        expose: (exposed: import('vue').ShallowUnwrapRef<{
+            measure: () => void;
+        }>) => void;
+        attrs: any;
+        slots: {
+            default?: (props: import("./splitter.types.js").SplitterSlotProps) => unknown;
+        };
+        emit: ((evt: "collapse", key: import("../../index.js").CollectionKey) => void) & ((evt: "expand", key: import("../../index.js").CollectionKey) => void) & ((evt: "resize", sizes: import("../../utils/flex-sizing.js").FlexSize[]) => void) & ((evt: "resizeEnd", sizes: import("../../utils/flex-sizing.js").FlexSize[]) => void) & ((evt: "resizeStart", sizes: import("../../utils/flex-sizing.js").FlexSize[]) => void) & ((evt: "update:sizes", sizes: import("../../utils/flex-sizing.js").FlexSize[]) => void);
+    }>) => import('vue').VNode & {
+        __ctx?: NonNullable<Awaited<typeof __VLS_setup>>;
+    };
+};
+export { SplitterRoot, SplitterPanel, SplitterHandle };
+export type { SplitterRootProps, SplitterRootProps as SplitterProps, SplitterPanelProps, SplitterHandleProps, SplitterSlotProps, SplitterPanelSlotProps, SplitterHandleSlotProps, } from "./splitter.types.js";
+export type { SplitterOrientation, SplitterSize } from "./splitter.state.js";
+export { useSplitterContext } from "./splitter.context.js";
+export type { SplitterContext } from "./splitter.context.js";
+export type { SplitterState } from "./splitter.state.js";
+export { splitterVariants } from "@ropav/styles";
+export type { SplitterVariants } from "@ropav/styles";

package/dist/components/splitter/index.js

@@ -0,0 +1,13 @@
+import { useSplitterContext } from "./splitter.context.js";
+import splitter_handle_default from "./splitter-handle.js";
+import splitter_panel_default from "./splitter-panel.js";
+import splitter_root_default from "./splitter-root.js";
+import { splitterVariants } from "@ropav/styles";
+//#region src/components/splitter/index.ts
+var Splitter = Object.assign(splitter_root_default, {
+	Handle: splitter_handle_default,
+	Panel: splitter_panel_default,
+	Root: splitter_root_default
+});
+//#endregion
+export { Splitter, splitter_handle_default as SplitterHandle, splitter_panel_default as SplitterPanel, splitter_root_default as SplitterRoot, splitterVariants, useSplitterContext };

package/dist/components/splitter/splitter-handle.d.ts

@@ -0,0 +1,21 @@
+import type { SplitterHandleProps, SplitterHandleSlotProps } from "./splitter.types.js";
+declare const __VLS_export: (__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>['props'], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, 'attrs' | 'emit' | 'slots'>>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>['expose'], __VLS_setup?: Promise<{
+    props: import('vue').PublicProps & __VLS_PrettifyLocal<SplitterHandleProps> & (typeof globalThis extends {
+        __VLS_PROPS_FALLBACK: infer P;
+    } ? P : {});
+    expose: (exposed: {}) => void;
+    attrs: any;
+    slots: {
+        default?: (props: SplitterHandleSlotProps) => unknown;
+    };
+    emit: {};
+}>) => import('vue').VNode & {
+    __ctx?: NonNullable<Awaited<typeof __VLS_setup>>;
+};
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_PrettifyLocal<T> = (T extends any ? {
+    [K in keyof T]: T[K];
+} : {
+    [K in keyof T as K]: T[K];
+}) & {};