ropav 0.0.5 → 0.0.7

package/dist/dropdown-menu.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"dropdown-menu.js","names":[],"sources":["../src/components/dropdown-menu/dropdown-menu-items.ts","../src/components/dropdown-menu/dropdown-menu-utils.ts","../src/components/dropdown-menu/useDropdownMenuDisclosure.ts","../src/components/dropdown-menu/useDropdownMenuDom.ts","../src/components/dropdown-menu/useDropdownMenuHoverIntent.ts","../src/components/dropdown-menu/useDropdownMenuInteractions.ts","../src/components/dropdown-menu/useDropdownMenuNavigation.ts","../src/components/dropdown-menu/useDropdownMenuRenderItems.ts","../src/components/dropdown-menu/useDropdownSubmenus.ts","../src/components/dropdown-menu/useDropdownMenu.ts","../src/components/dropdown-menu/dropdown-menu.vue","../src/components/dropdown-menu/dropdown-menu.vue"],"sourcesContent":["import { defineComponent, h, type PropType } from 'vue';\nimport type { DropdownMenuItemSlotProps, DropdownMenuRenderedItem } from './types';\n\nexport default defineComponent({\n    name: 'RpDropdownMenuItems',\n    props: {\n        items: {\n            type: Array as PropType<DropdownMenuRenderedItem[]>,\n            required: true,\n        },\n    },\n    setup(props, { slots }) {\n        function renderItems(items: DropdownMenuRenderedItem[]) {\n            return items.map((renderedItem) => {\n                const children = [\n                    h(\n                        'button',\n                        renderedItem.props,\n                        slots.item?.(renderedItem.slotProps as DropdownMenuItemSlotProps),\n                    ),\n                ];\n\n                if (renderedItem.hasSubmenu && renderedItem.submenuOpen) {\n                    children.push(\n                        h('div', renderedItem.submenuProps, renderItems(renderedItem.children)),\n                    );\n                }\n\n                return h(\n                    'div',\n                    {\n                        key: renderedItem.key,\n                        class: 'rp-dropdown-menu__item-wrap',\n                        role: 'none',\n                    },\n                    children,\n                );\n            });\n        }\n\n        return () => renderItems(props.items);\n    },\n});\n","import { bem } from '@/utils/bem';\nimport type {\n    DropdownMenuFocusTarget,\n    DropdownMenuItem,\n    DropdownMenuItemPath,\n    DropdownMenuOpenOptions,\n    DropdownMenuPlacement,\n} from './types';\n\nexport const DEFAULT_PLACEMENT: DropdownMenuPlacement = 'bottom-start';\nexport const DEFAULT_FOCUS_TARGET: DropdownMenuFocusTarget = 'first';\n\nexport type ItemPath = DropdownMenuItemPath;\nexport type SubmenuFocusTarget = DropdownMenuFocusTarget | false;\n\nexport type PointerPoint = {\n    x: number;\n    y: number;\n};\n\nexport function getOpenFocusTarget(\n    options: DropdownMenuOpenOptions | DropdownMenuFocusTarget | undefined,\n) {\n    if (typeof options === 'string') return options;\n    return options?.focus ?? DEFAULT_FOCUS_TARGET;\n}\n\nexport function getItemClass(\n    item: DropdownMenuItem,\n    focused: boolean,\n    disabled: boolean,\n    hasSubmenu: boolean,\n    submenuOpen: boolean,\n) {\n    return bem('rp-dropdown-menu__item', {\n        focused,\n        disabled,\n        destructive: item.destructive,\n        submenu: hasSubmenu,\n        open: submenuOpen,\n    });\n}\n\nexport function hasItemSubmenu(item: DropdownMenuItem) {\n    return (item.children?.length ?? 0) > 0;\n}\n\nexport function hasNestedItems(items: DropdownMenuItem[]): boolean {\n    return items.some((item) => hasItemSubmenu(item) || hasNestedItems(item.children ?? []));\n}\n\nexport function getPathKey(path: ItemPath) {\n    return path.length === 0 ? 'root' : path.join('-');\n}\n\nexport function getParentPath(path: ItemPath) {\n    return path.slice(0, -1);\n}\n\nexport function arePathsEqual(a: ItemPath, b: ItemPath) {\n    return a.length === b.length && a.every((part, index) => part === b[index]);\n}\n\nexport function isPathPrefix(prefix: ItemPath, path: ItemPath) {\n    return prefix.length <= path.length && prefix.every((part, index) => part === path[index]);\n}\n\nexport function normalizePath(indexOrPath: number | ItemPath): ItemPath {\n    return Array.isArray(indexOrPath) ? indexOrPath : [indexOrPath];\n}\n\nexport function getEventPoint(event: MouseEvent): PointerPoint {\n    return {\n        x: event.clientX,\n        y: event.clientY,\n    };\n}\n\nexport function hasMeasuredRect(rect: DOMRect) {\n    return rect.width > 0 || rect.height > 0;\n}\n\nexport function isPointInRect(point: PointerPoint, rect: DOMRect, padding = 0) {\n    return (\n        point.x >= rect.left - padding &&\n        point.x <= rect.right + padding &&\n        point.y >= rect.top - padding &&\n        point.y <= rect.bottom + padding\n    );\n}\n\nexport function getEnabledIndexes(items: DropdownMenuItem[]) {\n    return items.map((item, index) => (item.disabled ? -1 : index)).filter((index) => index >= 0);\n}\n\nexport function getNextEnabledIndex(items: DropdownMenuItem[], index: number, direction: 1 | -1) {\n    const enabledIndexes = getEnabledIndexes(items);\n    if (enabledIndexes.length === 0) return undefined;\n\n    if (direction === 1) {\n        return enabledIndexes.find((candidate) => candidate > index) ?? enabledIndexes[0];\n    }\n\n    for (let i = enabledIndexes.length - 1; i >= 0; i -= 1) {\n        const candidate = enabledIndexes[i]!;\n        if (candidate < index) return candidate;\n    }\n\n    return enabledIndexes[enabledIndexes.length - 1];\n}\n","import { watch, type Ref } from 'vue';\nimport { useClickOutside } from '@/composables/useClickOutside';\nimport type {\n    DropdownMenuCloseOptions,\n    DropdownMenuFocusTarget,\n    DropdownMenuItem,\n    DropdownMenuOpenOptions,\n    DropdownMenuProps,\n} from './types';\nimport { DEFAULT_FOCUS_TARGET, getOpenFocusTarget, type ItemPath } from './dropdown-menu-utils';\n\ntype BooleanSource = Readonly<Ref<boolean>>;\n\ntype UseDropdownMenuDisclosureOptions = {\n    props: Readonly<DropdownMenuProps>;\n    emit: {\n        openChange?: (open: boolean) => void;\n        select?: (item: DropdownMenuItem) => void;\n    };\n    rootRef: Ref<HTMLElement | null>;\n    uncontrolledOpen: Ref<boolean>;\n    isDisabled: BooleanSource;\n    isOpen: BooleanSource;\n    isVisible: BooleanSource;\n    focusedPath: Ref<ItemPath>;\n    resetFocus: () => void;\n    resetSubmenus: () => void;\n    resetHoverIntent: () => void;\n    focusItem: (target: DropdownMenuFocusTarget, menuPath?: ItemPath) => boolean;\n    focusMenu: () => void;\n    focusTrigger: () => void;\n};\n\nexport function useDropdownMenuDisclosure({\n    props,\n    emit,\n    rootRef,\n    uncontrolledOpen,\n    isDisabled,\n    isOpen,\n    isVisible,\n    focusedPath,\n    resetFocus,\n    resetSubmenus,\n    resetHoverIntent,\n    focusItem,\n    focusMenu,\n    focusTrigger,\n}: UseDropdownMenuDisclosureOptions) {\n    function setOpen(nextOpen: boolean) {\n        if (nextOpen && isDisabled.value) return;\n\n        const previousOpen = isOpen.value;\n        if (props.open === undefined) uncontrolledOpen.value = nextOpen;\n        if (previousOpen !== nextOpen) emit.openChange?.(nextOpen);\n    }\n\n    function resetMenuFocus() {\n        resetFocus();\n        resetSubmenus();\n        resetHoverIntent();\n    }\n\n    function open(options?: DropdownMenuOpenOptions | DropdownMenuFocusTarget) {\n        if (isDisabled.value) return;\n\n        setOpen(true);\n        focusItem(getOpenFocusTarget(options));\n        resetSubmenus();\n        resetHoverIntent();\n        focusMenu();\n    }\n\n    function close(options: DropdownMenuCloseOptions = {}) {\n        setOpen(false);\n        resetMenuFocus();\n        if (options.focusTrigger) focusTrigger();\n    }\n\n    function toggle() {\n        if (isVisible.value) {\n            close({ focusTrigger: true });\n        } else {\n            open();\n        }\n    }\n\n    watch(isDisabled, (disabled) => {\n        if (disabled) close();\n    });\n\n    watch(isVisible, (visible) => {\n        if (visible) {\n            if (focusedPath.value.length === 0) focusItem(DEFAULT_FOCUS_TARGET);\n            focusMenu();\n        } else {\n            resetMenuFocus();\n        }\n    });\n\n    useClickOutside(rootRef, isVisible, () => close());\n\n    return {\n        open,\n        close,\n        toggle,\n        resetMenuFocus,\n    };\n}\n","import { computed, nextTick, watch, type Ref } from 'vue';\nimport type { DropdownMenuPlacement } from './types';\nimport {\n    arePathsEqual,\n    getParentPath,\n    getPathKey,\n    hasMeasuredRect,\n    normalizePath,\n    type ItemPath,\n} from './dropdown-menu-utils';\n\ntype StringSource = {\n    readonly value: string;\n};\ntype PlacementSource = {\n    readonly value: DropdownMenuPlacement;\n};\n\ntype UseDropdownMenuDomOptions = {\n    menuId: StringSource;\n    rootRef: Ref<HTMLElement | null>;\n    menuRef: Ref<HTMLElement | null>;\n    placement: PlacementSource;\n    focusedPath: Ref<ItemPath>;\n};\n\nexport function useDropdownMenuDom({\n    menuId,\n    rootRef,\n    menuRef,\n    placement,\n    focusedPath,\n}: UseDropdownMenuDomOptions) {\n    const activeDescendantId = computed(() =>\n        focusedPath.value.length === 0 ? undefined : getItemId(focusedPath.value),\n    );\n\n    function focusMenu() {\n        nextTick(() => menuRef.value?.focus());\n    }\n\n    function focusTrigger() {\n        nextTick(() => {\n            const trigger = rootRef.value?.querySelector<HTMLElement>('[aria-haspopup=\"menu\"]');\n            trigger?.focus();\n        });\n    }\n\n    function getItemId(indexOrPath: number | ItemPath) {\n        return `${menuId.value}-item-${getPathKey(normalizePath(indexOrPath))}`;\n    }\n\n    function getSubmenuId(path: ItemPath) {\n        return `${menuId.value}-submenu-${getPathKey(path)}`;\n    }\n\n    function getItemElement(path: ItemPath) {\n        return document.getElementById(getItemId(path));\n    }\n\n    function getSubmenuElement(path: ItemPath) {\n        return document.getElementById(getSubmenuId(path));\n    }\n\n    function isSubmenuOpeningLeft(path: ItemPath) {\n        const submenuRect = getSubmenuElement(path)?.getBoundingClientRect();\n        const itemRect = getItemElement(path)?.getBoundingClientRect();\n\n        if (submenuRect && itemRect && hasMeasuredRect(submenuRect) && hasMeasuredRect(itemRect)) {\n            return submenuRect.right <= itemRect.left;\n        }\n\n        return placement.value.endsWith('end');\n    }\n\n    function getMenuActiveDescendant(menuPath: ItemPath) {\n        return arePathsEqual(getParentPath(focusedPath.value), menuPath)\n            ? getItemId(focusedPath.value)\n            : undefined;\n    }\n\n    watch(focusedPath, (path) => {\n        if (path.length === 0) return;\n\n        const targetPath = [...path];\n        nextTick(() => {\n            if (!arePathsEqual(targetPath, focusedPath.value)) return;\n            getItemElement(targetPath)?.scrollIntoView?.({ block: 'nearest' });\n        });\n    });\n\n    return {\n        activeDescendantId,\n        focusMenu,\n        focusTrigger,\n        getItemId,\n        getSubmenuId,\n        getItemElement,\n        getSubmenuElement,\n        isSubmenuOpeningLeft,\n        getMenuActiveDescendant,\n    };\n}\n","import { onUnmounted, ref, type Ref } from 'vue';\nimport type { DropdownMenuItem } from './types';\nimport {\n    arePathsEqual,\n    getEventPoint,\n    hasMeasuredRect,\n    isPathPrefix,\n    isPointInRect,\n    type ItemPath,\n    type PointerPoint,\n} from './dropdown-menu-utils';\n\nconst SAFE_TRIANGLE_PADDING = 2;\nconst SAFE_TRIANGLE_ORIGIN_OFFSET = 2;\nconst SAFE_TRIANGLE_TIMEOUT = 400;\n\nexport type SafeTriangle = [PointerPoint, PointerPoint, PointerPoint];\ntype GetSafeTriangleOptions = {\n    itemRect: DOMRect | null;\n    submenuRect: DOMRect;\n    origin: PointerPoint;\n};\ntype PendingHover = {\n    item: DropdownMenuItem;\n    path: ItemPath;\n};\ntype HoverCommit = (item: DropdownMenuItem, path: ItemPath, point?: PointerPoint) => void;\n\ntype UseDropdownMenuHoverIntentOptions = {\n    openSubmenuPath: Ref<ItemPath>;\n    getItemElement: (path: ItemPath) => HTMLElement | null;\n    getSubmenuElement: (path: ItemPath) => HTMLElement | null;\n};\n\nfunction getTriangleArea(a: PointerPoint, b: PointerPoint, c: PointerPoint) {\n    return Math.abs((a.x * (b.y - c.y) + b.x * (c.y - a.y) + c.x * (a.y - b.y)) / 2);\n}\n\nfunction isPointInTriangle(point: PointerPoint, triangle: SafeTriangle) {\n    const [a, b, c] = triangle;\n    const area = getTriangleArea(a, b, c);\n    const area1 = getTriangleArea(point, b, c);\n    const area2 = getTriangleArea(a, point, c);\n    const area3 = getTriangleArea(a, b, point);\n\n    return Math.abs(area - (area1 + area2 + area3)) < 0.5;\n}\n\nfunction clamp(value: number, min: number, max: number) {\n    return Math.min(Math.max(value, min), max);\n}\n\nfunction clampPointToRect(point: PointerPoint, rect: DOMRect): PointerPoint {\n    return {\n        x: clamp(point.x, rect.left, rect.right),\n        y: clamp(point.y, rect.top, rect.bottom),\n    };\n}\n\nexport function getDropdownMenuSafeTriangle({\n    itemRect,\n    submenuRect,\n    origin,\n}: GetSafeTriangleOptions): SafeTriangle {\n    const measuredItemRect = itemRect && hasMeasuredRect(itemRect) ? itemRect : null;\n    const opensRight = !measuredItemRect || submenuRect.left >= measuredItemRect.right;\n    const edgeX = opensRight ? submenuRect.left : submenuRect.right;\n    const boundedOrigin = measuredItemRect ? clampPointToRect(origin, measuredItemRect) : origin;\n    const expandedOrigin = {\n        x:\n            boundedOrigin.x +\n            (opensRight ? -SAFE_TRIANGLE_ORIGIN_OFFSET : SAFE_TRIANGLE_ORIGIN_OFFSET),\n        y: boundedOrigin.y,\n    };\n\n    return [\n        expandedOrigin,\n        {\n            x: edgeX,\n            y: submenuRect.top - SAFE_TRIANGLE_PADDING,\n        },\n        {\n            x: edgeX,\n            y: submenuRect.bottom + SAFE_TRIANGLE_PADDING,\n        },\n    ];\n}\n\nexport function useDropdownMenuHoverIntent({\n    openSubmenuPath,\n    getItemElement,\n    getSubmenuElement,\n}: UseDropdownMenuHoverIntentOptions) {\n    const safeTriangleOrigin = ref<PointerPoint | null>(null);\n    let latestPointerPoint: PointerPoint | null = null;\n    let pendingHover: PendingHover | null = null;\n    let pendingHoverTimer: number | undefined;\n\n    function clearPendingHover() {\n        pendingHover = null;\n        if (pendingHoverTimer !== undefined) {\n            window.clearTimeout(pendingHoverTimer);\n            pendingHoverTimer = undefined;\n        }\n    }\n\n    function resetHoverIntent() {\n        safeTriangleOrigin.value = null;\n        latestPointerPoint = null;\n        clearPendingHover();\n    }\n\n    function getFallbackTriangleOrigin(path: ItemPath): PointerPoint | null {\n        const itemRect = getItemElement(path)?.getBoundingClientRect();\n        if (!itemRect) return null;\n\n        const submenuRect = getSubmenuElement(path)?.getBoundingClientRect();\n        const opensRight = !submenuRect || submenuRect.left >= itemRect.right;\n        return {\n            x: opensRight ? itemRect.right : itemRect.left,\n            y: itemRect.top + itemRect.height / 2,\n        };\n    }\n\n    function trackSubmenuOpen(path: ItemPath, point?: PointerPoint) {\n        safeTriangleOrigin.value = point ?? getFallbackTriangleOrigin(path);\n        clearPendingHover();\n    }\n\n    function isPointInCurrentSubmenu(point: PointerPoint) {\n        if (openSubmenuPath.value.length === 0) return false;\n\n        const submenuRect = getSubmenuElement(openSubmenuPath.value)?.getBoundingClientRect();\n        return submenuRect ? isPointInRect(point, submenuRect, SAFE_TRIANGLE_PADDING) : false;\n    }\n\n    function getSafeTriangle(path: ItemPath): SafeTriangle | null {\n        const submenuRect = getSubmenuElement(path)?.getBoundingClientRect();\n        const itemRect = getItemElement(path)?.getBoundingClientRect();\n        const origin = safeTriangleOrigin.value ?? getFallbackTriangleOrigin(path);\n\n        if (!submenuRect || !origin) return null;\n\n        return getDropdownMenuSafeTriangle({\n            itemRect: itemRect ?? null,\n            submenuRect,\n            origin,\n        });\n    }\n\n    function updateSafeTriangleOrigin(point: PointerPoint) {\n        if (openSubmenuPath.value.length === 0) return;\n\n        const itemRect = getItemElement(openSubmenuPath.value)?.getBoundingClientRect();\n        if (itemRect && isPointInRect(point, itemRect)) {\n            safeTriangleOrigin.value = point;\n        }\n    }\n\n    function shouldDelayHover(path: ItemPath, point: PointerPoint) {\n        if (openSubmenuPath.value.length === 0) return false;\n        if (arePathsEqual(path, openSubmenuPath.value)) return false;\n        if (isPathPrefix(openSubmenuPath.value, path)) return false;\n        if (isPointInCurrentSubmenu(point)) return true;\n\n        const triangle = getSafeTriangle(openSubmenuPath.value);\n        return triangle ? isPointInTriangle(point, triangle) : false;\n    }\n\n    function delayHoveredItem(item: DropdownMenuItem, path: ItemPath, commit: HoverCommit) {\n        pendingHover = {\n            item,\n            path,\n        };\n\n        if (pendingHoverTimer !== undefined) window.clearTimeout(pendingHoverTimer);\n        pendingHoverTimer = window.setTimeout(() => {\n            if (!pendingHover) return;\n\n            const nextHover = pendingHover;\n            if (latestPointerPoint && isPointInCurrentSubmenu(latestPointerPoint)) {\n                clearPendingHover();\n                return;\n            }\n\n            commit(nextHover.item, nextHover.path);\n        }, SAFE_TRIANGLE_TIMEOUT);\n    }\n\n    function handleItemHover(\n        item: DropdownMenuItem,\n        path: ItemPath,\n        event: MouseEvent | undefined,\n        commit: HoverCommit,\n    ) {\n        const point = event ? getEventPoint(event) : undefined;\n        latestPointerPoint = point ?? latestPointerPoint;\n\n        if (point && shouldDelayHover(path, point)) {\n            delayHoveredItem(item, path, commit);\n            return;\n        }\n\n        commit(item, path, point);\n    }\n\n    function handleMenuMousemove(event: MouseEvent, commit: HoverCommit) {\n        const point = getEventPoint(event);\n        latestPointerPoint = point;\n        updateSafeTriangleOrigin(point);\n        if (!pendingHover) return;\n\n        if (shouldDelayHover(pendingHover.path, point)) return;\n\n        const nextHover = pendingHover;\n        commit(nextHover.item, nextHover.path, point);\n    }\n\n    onUnmounted(clearPendingHover);\n\n    return {\n        clearPendingHover,\n        resetHoverIntent,\n        trackSubmenuOpen,\n        handleItemHover,\n        handleMenuMousemove,\n    };\n}\n","import type { Ref } from 'vue';\nimport type {\n    DropdownMenuCloseOptions,\n    DropdownMenuFocusTarget,\n    DropdownMenuItem,\n    DropdownMenuOpenOptions,\n    DropdownMenuProps,\n} from './types';\nimport {\n    arePathsEqual,\n    DEFAULT_FOCUS_TARGET,\n    getEventPoint,\n    getParentPath,\n    hasItemSubmenu,\n    normalizePath,\n    type ItemPath,\n    type PointerPoint,\n    type SubmenuFocusTarget,\n} from './dropdown-menu-utils';\n\ntype BooleanSource = Readonly<Ref<boolean>>;\n\ntype DisclosureControls = {\n    open: (options?: DropdownMenuOpenOptions | DropdownMenuFocusTarget) => void;\n    close: (options?: DropdownMenuCloseOptions) => void;\n    toggle: () => void;\n};\n\ntype SubmenuControls = {\n    closeSubmenusAfter: (menuPath: ItemPath) => void;\n    openSubmenu: (path: ItemPath, focus?: SubmenuFocusTarget) => boolean;\n    closeSubmenu: (path: ItemPath) => boolean;\n    closeCurrentSubmenu: () => boolean;\n};\n\ntype HoverIntentControls = {\n    clearPendingHover: () => void;\n    resetHoverIntent: () => void;\n    trackSubmenuOpen: (path: ItemPath, point?: PointerPoint) => void;\n    handleItemHover: (\n        item: DropdownMenuItem,\n        path: ItemPath,\n        event: MouseEvent | undefined,\n        commit: (item: DropdownMenuItem, path: ItemPath, point?: PointerPoint) => void,\n    ) => void;\n    handleMenuMousemove: (\n        event: MouseEvent,\n        commit: (item: DropdownMenuItem, path: ItemPath, point?: PointerPoint) => void,\n    ) => void;\n};\n\ntype UseDropdownMenuInteractionsOptions = {\n    props: Readonly<DropdownMenuProps>;\n    emit: {\n        select?: (item: DropdownMenuItem) => void;\n    };\n    isDisabled: BooleanSource;\n    focusedPath: Ref<ItemPath>;\n    openSubmenuPath: Ref<ItemPath>;\n    getItemAtPath: (path: ItemPath) => DropdownMenuItem | undefined;\n    focusItem: (target: DropdownMenuFocusTarget, menuPath?: ItemPath) => boolean;\n    moveFocus: (direction: 1 | -1) => ItemPath | undefined;\n    submenus: SubmenuControls;\n    hoverIntent: HoverIntentControls;\n    disclosure: DisclosureControls;\n    isSubmenuOpeningLeft: (path: ItemPath) => boolean;\n};\n\nexport function useDropdownMenuInteractions({\n    props,\n    emit,\n    isDisabled,\n    focusedPath,\n    openSubmenuPath,\n    getItemAtPath,\n    focusItem,\n    moveFocus,\n    submenus,\n    hoverIntent,\n    disclosure,\n    isSubmenuOpeningLeft,\n}: UseDropdownMenuInteractionsOptions) {\n    function activateItem(item: DropdownMenuItem, path: ItemPath, event?: MouseEvent) {\n        if (item.disabled) return;\n\n        if (hasItemSubmenu(item)) {\n            openSubmenu(path, DEFAULT_FOCUS_TARGET, event ? getEventPoint(event) : undefined);\n            return;\n        }\n\n        selectItem(item);\n    }\n\n    function selectItem(item: DropdownMenuItem) {\n        if (item.disabled) return;\n\n        emit.select?.(item);\n        if (props.closeOnSelect !== false) {\n            disclosure.close({ focusTrigger: true });\n        }\n    }\n\n    function closeSubmenusAfter(menuPath: ItemPath) {\n        submenus.closeSubmenusAfter(menuPath);\n        hoverIntent.resetHoverIntent();\n    }\n\n    function openSubmenu(\n        path: ItemPath,\n        focus: SubmenuFocusTarget = DEFAULT_FOCUS_TARGET,\n        point?: PointerPoint,\n    ) {\n        const opened = submenus.openSubmenu(path, focus);\n        if (opened) hoverIntent.trackSubmenuOpen(path, point);\n        return opened;\n    }\n\n    function closeSubmenu(path: ItemPath) {\n        const closed = submenus.closeSubmenu(path);\n        if (closed) hoverIntent.resetHoverIntent();\n        return closed;\n    }\n\n    function closeCurrentSubmenu() {\n        const closed = submenus.closeCurrentSubmenu();\n        if (closed) hoverIntent.resetHoverIntent();\n        return closed;\n    }\n\n    function commitHoveredItem(item: DropdownMenuItem, path: ItemPath, point?: PointerPoint) {\n        hoverIntent.clearPendingHover();\n        focusedPath.value = [...path];\n\n        if (hasItemSubmenu(item)) {\n            openSubmenu(path, false, point);\n        } else {\n            closeSubmenusAfter(getParentPath(path));\n        }\n    }\n\n    function focusHoveredItem(\n        item: DropdownMenuItem,\n        indexOrPath: number | ItemPath,\n        event?: MouseEvent,\n    ) {\n        if (item.disabled) return;\n\n        const path = normalizePath(indexOrPath);\n        hoverIntent.handleItemHover(item, path, event, commitHoveredItem);\n    }\n\n    function selectFocusedItem() {\n        const item = getItemAtPath(focusedPath.value);\n        if (!item) return;\n        activateItem(item, focusedPath.value);\n    }\n\n    function moveFocusedItem(direction: 1 | -1) {\n        const menuPath = moveFocus(direction);\n        if (menuPath) closeSubmenusAfter(menuPath);\n    }\n\n    function onTriggerClick() {\n        disclosure.toggle();\n    }\n\n    function onTriggerKeydown(event: KeyboardEvent) {\n        if (isDisabled.value) return;\n\n        switch (event.key) {\n            case 'Enter':\n            case ' ':\n            case 'ArrowDown':\n                event.preventDefault();\n                disclosure.open();\n                break;\n            case 'ArrowUp':\n                event.preventDefault();\n                disclosure.open({ focus: 'last' });\n                break;\n            case 'Escape':\n                disclosure.close({ focusTrigger: true });\n                break;\n        }\n    }\n\n    function onMenuKeydown(event: KeyboardEvent) {\n        hoverIntent.resetHoverIntent();\n\n        switch (event.key) {\n            case 'ArrowDown':\n                event.preventDefault();\n                moveFocusedItem(1);\n                break;\n            case 'ArrowUp':\n                event.preventDefault();\n                moveFocusedItem(-1);\n                break;\n            case 'Home':\n                event.preventDefault();\n                focusItem('first', getParentPath(focusedPath.value));\n                break;\n            case 'End':\n                event.preventDefault();\n                focusItem('last', getParentPath(focusedPath.value));\n                break;\n            case 'ArrowRight':\n            case 'ArrowLeft':\n                onMenuHorizontalKeydown(event);\n                break;\n            case 'Enter':\n            case ' ':\n                event.preventDefault();\n                selectFocusedItem();\n                break;\n            case 'Escape':\n                event.preventDefault();\n                if (!closeCurrentSubmenu()) disclosure.close({ focusTrigger: true });\n                break;\n            case 'Tab':\n                disclosure.close();\n                break;\n        }\n    }\n\n    function onMenuHorizontalKeydown(event: KeyboardEvent) {\n        const isRight = event.key === 'ArrowRight';\n        const currentMenuPath = getParentPath(focusedPath.value);\n        const closePath =\n            focusedPath.value.length > 1\n                ? currentMenuPath\n                : arePathsEqual(focusedPath.value, openSubmenuPath.value)\n                  ? focusedPath.value\n                  : undefined;\n\n        if (closePath && isRight === isSubmenuOpeningLeft(closePath)) {\n            event.preventDefault();\n            closeSubmenu(closePath);\n            return;\n        }\n\n        const item = getItemAtPath(focusedPath.value);\n        if (!item || item.disabled || !hasItemSubmenu(item)) return;\n\n        const nextSubmenuOpensLeft = isSubmenuOpeningLeft(focusedPath.value);\n        if (isRight === nextSubmenuOpensLeft) return;\n\n        event.preventDefault();\n        openSubmenu(focusedPath.value);\n    }\n\n    function onMenuMousemove(event: MouseEvent) {\n        hoverIntent.handleMenuMousemove(event, commitHoveredItem);\n    }\n\n    function onMenuMouseleave() {\n        hoverIntent.resetHoverIntent();\n    }\n\n    return {\n        activateItem,\n        selectItem,\n        openSubmenu,\n        closeSubmenu,\n        focusHoveredItem,\n        onTriggerClick,\n        onTriggerKeydown,\n        onMenuKeydown,\n        onMenuMousemove,\n        onMenuMouseleave,\n    };\n}\n","import { computed, ref } from 'vue';\nimport type { DropdownMenuFocusTarget, DropdownMenuItem } from './types';\nimport {\n    arePathsEqual,\n    getEnabledIndexes,\n    getNextEnabledIndex,\n    getParentPath,\n    normalizePath,\n    type ItemPath,\n} from './dropdown-menu-utils';\n\ntype DropdownMenuItemsSource = {\n    readonly value: DropdownMenuItem[];\n};\n\nexport function useDropdownMenuNavigation(items: DropdownMenuItemsSource) {\n    const focusedPath = ref<ItemPath>([]);\n    const focusedIndex = computed(() => focusedPath.value[0] ?? -1);\n\n    function getItemsAtPath(path: ItemPath) {\n        let currentItems = items.value;\n        for (const index of path) {\n            const item = currentItems[index];\n            if (!item) return [];\n            currentItems = item.children ?? [];\n        }\n        return currentItems;\n    }\n\n    function getItemAtPath(path: ItemPath) {\n        if (path.length === 0) return undefined;\n        const parentItems = getItemsAtPath(getParentPath(path));\n        return parentItems[path[path.length - 1]];\n    }\n\n    function focusItem(target: DropdownMenuFocusTarget, menuPath: ItemPath = []) {\n        const enabledIndexes = getEnabledIndexes(getItemsAtPath(menuPath));\n        const index =\n            target === 'last' ? enabledIndexes[enabledIndexes.length - 1] : enabledIndexes[0];\n\n        if (index === undefined) {\n            if (menuPath.length === 0) focusedPath.value = [];\n            return false;\n        }\n\n        focusedPath.value = [...menuPath, index];\n        return true;\n    }\n\n    function resetFocus() {\n        focusedPath.value = [];\n    }\n\n    function isItemFocused(indexOrPath: number | ItemPath) {\n        return arePathsEqual(normalizePath(indexOrPath), focusedPath.value);\n    }\n\n    function moveFocus(direction: 1 | -1) {\n        const menuPath = getParentPath(focusedPath.value);\n        const itemsAtPath = getItemsAtPath(menuPath);\n        const currentIndex =\n            focusedPath.value.length === 0\n                ? direction === 1\n                    ? -1\n                    : itemsAtPath.length\n                : focusedPath.value[focusedPath.value.length - 1]!;\n        const nextIndex = getNextEnabledIndex(itemsAtPath, currentIndex, direction);\n\n        if (nextIndex === undefined) {\n            focusedPath.value = [];\n            return undefined;\n        }\n\n        focusedPath.value = [...menuPath, nextIndex];\n        return menuPath;\n    }\n\n    return {\n        focusedPath,\n        focusedIndex,\n        getItemsAtPath,\n        getItemAtPath,\n        focusItem,\n        resetFocus,\n        isItemFocused,\n        moveFocus,\n    };\n}\n","import { computed } from 'vue';\nimport { bem } from '@/utils/bem';\nimport type {\n    DropdownMenuCloseOptions,\n    DropdownMenuFocusTarget,\n    DropdownMenuItem,\n    DropdownMenuItemProps,\n    DropdownMenuItemSlotProps,\n    DropdownMenuRenderedItem,\n    DropdownMenuSubmenuProps,\n} from './types';\nimport {\n    DEFAULT_FOCUS_TARGET,\n    getItemClass,\n    getPathKey,\n    hasItemSubmenu,\n    hasNestedItems,\n    normalizePath,\n    type ItemPath,\n} from './dropdown-menu-utils';\n\ntype DropdownMenuItemsSource = {\n    readonly value: DropdownMenuItem[];\n};\n\ntype UseDropdownMenuRenderItemsOptions = {\n    items: DropdownMenuItemsSource;\n    getItemId: (path: ItemPath) => string;\n    getSubmenuId: (path: ItemPath) => string;\n    getMenuActiveDescendant: (path: ItemPath) => string | undefined;\n    isItemFocused: (indexOrPath: number | ItemPath) => boolean;\n    isSubmenuOpen: (path: ItemPath) => boolean;\n    activateItem: (item: DropdownMenuItem, path: ItemPath, event?: MouseEvent) => void;\n    focusHoveredItem: (\n        item: DropdownMenuItem,\n        indexOrPath: number | ItemPath,\n        event?: MouseEvent,\n    ) => void;\n    selectItem: (item: DropdownMenuItem) => void;\n    openSubmenu: (path: ItemPath, focus?: DropdownMenuFocusTarget) => void;\n    closeSubmenu: (path: ItemPath) => void;\n    close: (options?: DropdownMenuCloseOptions) => void;\n};\n\nexport function useDropdownMenuRenderItems({\n    items,\n    getItemId,\n    getSubmenuId,\n    getMenuActiveDescendant,\n    isItemFocused,\n    isSubmenuOpen,\n    activateItem,\n    focusHoveredItem,\n    selectItem,\n    openSubmenu,\n    closeSubmenu,\n    close,\n}: UseDropdownMenuRenderItemsOptions) {\n    const renderedItems = computed<DropdownMenuRenderedItem[]>(() => getRenderedItems(items.value));\n\n    function getRenderedItems(\n        dropdownItems: DropdownMenuItem[],\n        parentPath: ItemPath = [],\n    ): DropdownMenuRenderedItem[] {\n        return dropdownItems.map((item, index) => {\n            const path = [...parentPath, index];\n            const level = parentPath.length;\n            const focused = isItemFocused(path);\n            const disabled = Boolean(item.disabled);\n            const hasSubmenu = hasItemSubmenu(item);\n            const submenuOpen = hasSubmenu && isSubmenuOpen(path);\n\n            return {\n                item,\n                index,\n                key: `${getPathKey(path)}:${String(item.value)}`,\n                path,\n                level,\n                focused,\n                disabled,\n                hasSubmenu,\n                submenuOpen,\n                props: getItemProps(item, path, focused, disabled),\n                submenuProps: hasSubmenu ? getSubmenuProps(item, path) : undefined,\n                slotProps: getItemSlotProps(item, path, focused, disabled),\n                children: hasSubmenu ? getRenderedItems(item.children ?? [], path) : [],\n            };\n        });\n    }\n\n    function getItemProps(\n        item: DropdownMenuItem,\n        indexOrPath: number | ItemPath,\n        focused = isItemFocused(indexOrPath),\n        disabled = Boolean(item.disabled),\n    ): DropdownMenuItemProps {\n        const path = normalizePath(indexOrPath);\n        const hasSubmenu = hasItemSubmenu(item);\n        const submenuOpen = hasSubmenu && isSubmenuOpen(path);\n\n        return {\n            id: getItemId(path),\n            type: 'button',\n            role: 'menuitem',\n            tabindex: -1,\n            class: getItemClass(item, focused, disabled, hasSubmenu, submenuOpen),\n            'aria-controls': hasSubmenu ? getSubmenuId(path) : undefined,\n            'aria-expanded': hasSubmenu ? submenuOpen : undefined,\n            'aria-haspopup': hasSubmenu ? 'menu' : undefined,\n            'aria-disabled': disabled || undefined,\n            'data-disabled': disabled || undefined,\n            'data-focused': focused || undefined,\n            'data-submenu': hasSubmenu || undefined,\n            onClick: (event) => activateItem(item, path, event),\n            onMouseenter: (event) => focusHoveredItem(item, path, event),\n        };\n    }\n\n    function getSubmenuProps(item: DropdownMenuItem, path: ItemPath): DropdownMenuSubmenuProps {\n        return {\n            id: getSubmenuId(path),\n            role: 'menu',\n            class: bem('rp-dropdown-menu__submenu', {\n                open: isSubmenuOpen(path),\n                'has-submenu': hasNestedItems(item.children ?? []),\n            }),\n            'aria-label': item.label,\n            'aria-activedescendant': getMenuActiveDescendant(path),\n        };\n    }\n\n    function getItemSlotProps(\n        item: DropdownMenuItem,\n        indexOrPath: number | ItemPath,\n        focused = isItemFocused(indexOrPath),\n        disabled = Boolean(item.disabled),\n    ): DropdownMenuItemSlotProps {\n        const path = normalizePath(indexOrPath);\n        const hasSubmenu = hasItemSubmenu(item);\n\n        return {\n            item,\n            index: path[path.length - 1] ?? -1,\n            path,\n            level: path.length - 1,\n            focused,\n            disabled,\n            hasSubmenu,\n            isSubmenuOpen: hasSubmenu && isSubmenuOpen(path),\n            select: () => selectItem(item),\n            openSubmenu: (focus = DEFAULT_FOCUS_TARGET) => openSubmenu(path, focus),\n            closeSubmenu: () => closeSubmenu(path),\n            close,\n        };\n    }\n\n    return {\n        renderedItems,\n        getItemProps,\n        getItemSlotProps,\n    };\n}\n","import { ref, type Ref } from 'vue';\nimport type { DropdownMenuItem } from './types';\nimport {\n    DEFAULT_FOCUS_TARGET,\n    getParentPath,\n    hasItemSubmenu,\n    isPathPrefix,\n    type ItemPath,\n    type SubmenuFocusTarget,\n} from './dropdown-menu-utils';\n\ntype UseDropdownSubmenusOptions = {\n    focusedPath: Ref<ItemPath>;\n    getItemAtPath: (path: ItemPath) => DropdownMenuItem | undefined;\n    focusItem: (target: Exclude<SubmenuFocusTarget, false>, menuPath?: ItemPath) => boolean;\n};\n\nexport function useDropdownSubmenus({\n    focusedPath,\n    getItemAtPath,\n    focusItem,\n}: UseDropdownSubmenusOptions) {\n    const openSubmenuPath = ref<ItemPath>([]);\n\n    function resetSubmenus() {\n        openSubmenuPath.value = [];\n    }\n\n    function isSubmenuOpen(path: ItemPath) {\n        return path.length > 0 && isPathPrefix(path, openSubmenuPath.value);\n    }\n\n    function closeSubmenusAfter(menuPath: ItemPath) {\n        openSubmenuPath.value = [...menuPath];\n    }\n\n    function openSubmenu(path: ItemPath, focus: SubmenuFocusTarget = DEFAULT_FOCUS_TARGET) {\n        const item = getItemAtPath(path);\n        if (!item || item.disabled || !hasItemSubmenu(item)) return false;\n\n        openSubmenuPath.value = [...path];\n        if (focus && !focusItem(focus, path)) focusedPath.value = [...path];\n        return true;\n    }\n\n    function closeSubmenu(path: ItemPath) {\n        if (!isSubmenuOpen(path)) return false;\n\n        openSubmenuPath.value = getParentPath(path);\n        if (isPathPrefix(path, focusedPath.value) && focusedPath.value.length > path.length) {\n            focusedPath.value = [...path];\n        }\n        return true;\n    }\n\n    function closeCurrentSubmenu() {\n        const path =\n            focusedPath.value.length > 1 ? getParentPath(focusedPath.value) : focusedPath.value;\n\n        if (path.length === 0 || !isSubmenuOpen(path)) return false;\n\n        return closeSubmenu(path);\n    }\n\n    return {\n        openSubmenuPath,\n        resetSubmenus,\n        isSubmenuOpen,\n        closeSubmenusAfter,\n        openSubmenu,\n        closeSubmenu,\n        closeCurrentSubmenu,\n    };\n}\n","import { computed, ref, useId } from 'vue';\nimport { bem } from '@/utils/bem';\nimport type {\n    DropdownMenuContentProps,\n    DropdownMenuItem,\n    DropdownMenuProps,\n    DropdownMenuSlotProps,\n    DropdownMenuTriggerProps,\n} from './types';\nimport { DEFAULT_PLACEMENT, hasNestedItems } from './dropdown-menu-utils';\nimport { useDropdownMenuDisclosure } from './useDropdownMenuDisclosure';\nimport { useDropdownMenuDom } from './useDropdownMenuDom';\nimport { useDropdownMenuHoverIntent } from './useDropdownMenuHoverIntent';\nimport { useDropdownMenuInteractions } from './useDropdownMenuInteractions';\nimport { useDropdownMenuNavigation } from './useDropdownMenuNavigation';\nimport { useDropdownMenuRenderItems } from './useDropdownMenuRenderItems';\nimport { useDropdownSubmenus } from './useDropdownSubmenus';\n\nexport function useDropdownMenu(\n    props: Readonly<DropdownMenuProps>,\n    emit: {\n        openChange?: (open: boolean) => void;\n        select?: (item: DropdownMenuItem) => void;\n    } = {},\n) {\n    const rootRef = ref<HTMLElement | null>(null);\n    const menuRef = ref<HTMLElement | null>(null);\n    const uncontrolledOpen = ref(false);\n\n    const generatedId = useId();\n    const menuId = computed(() => props.id ?? `${generatedId}-menu`);\n    const placement = computed(() => props.placement ?? DEFAULT_PLACEMENT);\n    const visibleItems = computed(() => props.items ?? []);\n    const isDisabled = computed(() => Boolean(props.disabled));\n    const isOpen = computed(() => props.open ?? uncontrolledOpen.value);\n    const isVisible = computed(() => isOpen.value && !isDisabled.value);\n    const contentHasSubmenu = computed(() => hasNestedItems(visibleItems.value));\n    const isEmpty = computed(() => visibleItems.value.length === 0);\n\n    const {\n        focusedPath,\n        focusedIndex,\n        getItemAtPath,\n        focusItem,\n        resetFocus,\n        isItemFocused,\n        moveFocus,\n    } = useDropdownMenuNavigation(visibleItems);\n\n    const submenus = useDropdownSubmenus({\n        focusedPath,\n        getItemAtPath,\n        focusItem,\n    });\n    const { openSubmenuPath, isSubmenuOpen } = submenus;\n\n    const {\n        activeDescendantId,\n        focusMenu,\n        focusTrigger,\n        getItemId,\n        getSubmenuId,\n        getItemElement,\n        getSubmenuElement,\n        isSubmenuOpeningLeft,\n        getMenuActiveDescendant,\n    } = useDropdownMenuDom({\n        menuId,\n        rootRef,\n        menuRef,\n        placement,\n        focusedPath,\n    });\n\n    const hoverIntent = useDropdownMenuHoverIntent({\n        openSubmenuPath,\n        getItemElement,\n        getSubmenuElement,\n    });\n\n    const disclosure = useDropdownMenuDisclosure({\n        props,\n        emit,\n        rootRef,\n        uncontrolledOpen,\n        isDisabled,\n        isOpen,\n        isVisible,\n        focusedPath,\n        resetFocus,\n        resetSubmenus: submenus.resetSubmenus,\n        resetHoverIntent: hoverIntent.resetHoverIntent,\n        focusItem,\n        focusMenu,\n        focusTrigger,\n    });\n    const { open, close, toggle } = disclosure;\n\n    const {\n        activateItem,\n        selectItem,\n        openSubmenu,\n        closeSubmenu,\n        focusHoveredItem,\n        onTriggerClick,\n        onTriggerKeydown,\n        onMenuKeydown,\n        onMenuMousemove,\n        onMenuMouseleave,\n    } = useDropdownMenuInteractions({\n        props,\n        emit,\n        isDisabled,\n        focusedPath,\n        openSubmenuPath,\n        getItemAtPath,\n        focusItem,\n        moveFocus,\n        submenus,\n        hoverIntent,\n        disclosure,\n        isSubmenuOpeningLeft,\n    });\n\n    const rootClass = computed(() =>\n        bem('rp-dropdown-menu', {\n            [`placement-${placement.value}`]: true,\n            open: isVisible.value,\n            disabled: isDisabled.value,\n        }),\n    );\n\n    const contentClass = computed(() =>\n        bem('rp-dropdown-menu__content', {\n            'has-submenu': contentHasSubmenu.value,\n        }),\n    );\n\n    const triggerProps = computed<DropdownMenuTriggerProps>(() => ({\n        'aria-controls': isDisabled.value ? undefined : menuId.value,\n        'aria-expanded': isDisabled.value ? undefined : isVisible.value,\n        'aria-haspopup': 'menu',\n        disabled: isDisabled.value || undefined,\n        onClick: onTriggerClick,\n        onKeydown: onTriggerKeydown,\n    }));\n\n    const contentProps = computed<DropdownMenuContentProps>(() => ({\n        id: menuId.value,\n        role: 'menu',\n        tabindex: -1,\n        'aria-label': props.ariaLabel || undefined,\n        'aria-activedescendant': activeDescendantId.value,\n        onKeydown: onMenuKeydown,\n        onMousemove: onMenuMousemove,\n        onMouseleave: onMenuMouseleave,\n    }));\n\n    const slotProps = computed<DropdownMenuSlotProps>(() => ({\n        triggerProps: triggerProps.value,\n        isOpen: isVisible.value,\n        open,\n        close,\n        toggle,\n    }));\n\n    const { renderedItems, getItemProps, getItemSlotProps } = useDropdownMenuRenderItems({\n        items: visibleItems,\n        getItemId,\n        getSubmenuId,\n        getMenuActiveDescendant,\n        isItemFocused,\n        isSubmenuOpen,\n        activateItem,\n        focusHoveredItem,\n        selectItem,\n        openSubmenu,\n        closeSubmenu,\n        close,\n    });\n\n    return {\n        rootRef,\n        menuRef,\n        menuId,\n        isVisible,\n        isEmpty,\n        visibleItems,\n        renderedItems,\n        focusedIndex,\n        focusedPath,\n        activeDescendantId,\n        rootClass,\n        contentClass,\n        triggerProps,\n        contentProps,\n        slotProps,\n        open,\n        close,\n        toggle,\n        selectItem,\n        openSubmenu,\n        closeSubmenu,\n        onItemMouseenter: focusHoveredItem,\n        onTriggerKeydown,\n        onMenuKeydown,\n        getItemProps,\n        getItemSlotProps,\n    };\n}\n","<template>\n    <span ref=\"rootRef\" :class=\"rootClass\">\n        <slot v-bind=\"slotProps\" />\n\n        <Transition name=\"rp-dropdown-menu-content\">\n            <div v-if=\"isVisible\" ref=\"menuRef\" :class=\"contentClass\" v-bind=\"contentProps\">\n                <div v-if=\"isEmpty\" class=\"rp-dropdown-menu__empty\">\n                    <slot name=\"empty\">No actions</slot>\n                </div>\n\n                <DropdownMenuItems :items=\"renderedItems\">\n                    <template #item=\"itemSlotProps\">\n                        <slot name=\"item\" v-bind=\"itemSlotProps\">\n                            <span class=\"rp-dropdown-menu__label\">{{\n                                itemSlotProps.item.label\n                            }}</span>\n                            <kbd\n                                v-if=\"itemSlotProps.item.shortcut\"\n                                class=\"rp-dropdown-menu__shortcut\"\n                            >\n                                {{ itemSlotProps.item.shortcut }}\n                            </kbd>\n                        </slot>\n                        <span\n                            v-if=\"itemSlotProps.hasSubmenu\"\n                            class=\"rp-dropdown-menu__submenu-icon\"\n                            aria-hidden=\"true\"\n                        >\n                            <IconChevronRight />\n                        </span>\n                    </template>\n                </DropdownMenuItems>\n            </div>\n        </Transition>\n    </span>\n</template>\n\n<script lang=\"ts\" setup vapor>\nimport IconChevronRight from '~icons/lucide/chevron-right';\nimport DropdownMenuItems from './dropdown-menu-items';\nimport { useDropdownMenu } from './useDropdownMenu';\nimport type {\n    DropdownMenuItem,\n    DropdownMenuItemSlotProps,\n    DropdownMenuProps,\n    DropdownMenuSlotProps,\n} from './types';\n\ndefineOptions({ name: 'RpDropdownMenu' });\n\nconst props = withDefaults(defineProps<DropdownMenuProps>(), {\n    items: () => [],\n    placement: 'bottom-start',\n    open: undefined,\n    disabled: false,\n    closeOnSelect: true,\n});\n\nconst emit = defineEmits<{\n    'update:open': [value: boolean];\n    select: [item: DropdownMenuItem];\n}>();\n\ndefineSlots<{\n    default(props: DropdownMenuSlotProps): unknown;\n    item?(props: DropdownMenuItemSlotProps): unknown;\n    empty?(): unknown;\n}>();\n\nconst {\n    rootRef,\n    menuRef,\n    isVisible,\n    isEmpty,\n    renderedItems,\n    rootClass,\n    contentClass,\n    contentProps,\n    slotProps,\n} = useDropdownMenu(props, {\n    openChange: (open) => emit('update:open', open),\n    select: (item) => emit('select', item),\n});\n\nvoid rootRef;\nvoid menuRef;\n</script>\n\n<style src=\"./dropdown-menu.scss\" lang=\"scss\"></style>\n","<template>\n    <span ref=\"rootRef\" :class=\"rootClass\">\n        <slot v-bind=\"slotProps\" />\n\n        <Transition name=\"rp-dropdown-menu-content\">\n            <div v-if=\"isVisible\" ref=\"menuRef\" :class=\"contentClass\" v-bind=\"contentProps\">\n                <div v-if=\"isEmpty\" class=\"rp-dropdown-menu__empty\">\n                    <slot name=\"empty\">No actions</slot>\n                </div>\n\n                <DropdownMenuItems :items=\"renderedItems\">\n                    <template #item=\"itemSlotProps\">\n                        <slot name=\"item\" v-bind=\"itemSlotProps\">\n                            <span class=\"rp-dropdown-menu__label\">{{\n                                itemSlotProps.item.label\n                            }}</span>\n                            <kbd\n                                v-if=\"itemSlotProps.item.shortcut\"\n                                class=\"rp-dropdown-menu__shortcut\"\n                            >\n                                {{ itemSlotProps.item.shortcut }}\n                            </kbd>\n                        </slot>\n                        <span\n                            v-if=\"itemSlotProps.hasSubmenu\"\n                            class=\"rp-dropdown-menu__submenu-icon\"\n                            aria-hidden=\"true\"\n                        >\n                            <IconChevronRight />\n                        </span>\n                    </template>\n                </DropdownMenuItems>\n            </div>\n        </Transition>\n    </span>\n</template>\n\n<script lang=\"ts\" setup vapor>\nimport IconChevronRight from '~icons/lucide/chevron-right';\nimport DropdownMenuItems from './dropdown-menu-items';\nimport { useDropdownMenu } from './useDropdownMenu';\nimport type {\n    DropdownMenuItem,\n    DropdownMenuItemSlotProps,\n    DropdownMenuProps,\n    DropdownMenuSlotProps,\n} from './types';\n\ndefineOptions({ name: 'RpDropdownMenu' });\n\nconst props = withDefaults(defineProps<DropdownMenuProps>(), {\n    items: () => [],\n    placement: 'bottom-start',\n    open: undefined,\n    disabled: false,\n    closeOnSelect: true,\n});\n\nconst emit = defineEmits<{\n    'update:open': [value: boolean];\n    select: [item: DropdownMenuItem];\n}>();\n\ndefineSlots<{\n    default(props: DropdownMenuSlotProps): unknown;\n    item?(props: DropdownMenuItemSlotProps): unknown;\n    empty?(): unknown;\n}>();\n\nconst {\n    rootRef,\n    menuRef,\n    isVisible,\n    isEmpty,\n    renderedItems,\n    rootClass,\n    contentClass,\n    contentProps,\n    slotProps,\n} = useDropdownMenu(props, {\n    openChange: (open) => emit('update:open', open),\n    select: (item) => emit('select', item),\n});\n\nvoid rootRef;\nvoid menuRef;\n</script>\n\n<style src=\"./dropdown-menu.scss\" lang=\"scss\"></style>\n"],"mappings":"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"}

package/dist/field.css

@@ -1,4 +1,4 @@
-.rp-field[data-v-b8c3dcbe] {
+.rp-field[data-v-50e7f3a5] {
   --_rp-field-danger: var(--rp-color-danger);
   display: grid;
   gap: var(--rp-spacing-1);
@@ -6,10 +6,10 @@
   font-family: var(--rp-font-family);
   color: var(--rp-color-text);
 }
-html.dark .rp-field[data-v-b8c3dcbe] {
+html.dark .rp-field[data-v-50e7f3a5] {
   --_rp-field-danger: var(--rp-color-danger-fg);
 }
-.rp-field__label[data-v-b8c3dcbe] {
+.rp-field__label[data-v-50e7f3a5] {
   display: inline-flex;
   width: fit-content;
   align-items: center;
@@ -19,22 +19,22 @@ html.dark .rp-field[data-v-b8c3dcbe] {
   font-weight: var(--rp-font-weight-medium);
   line-height: var(--rp-line-height-normal);
 }
-.rp-field__required[data-v-b8c3dcbe] {
+.rp-field__required[data-v-50e7f3a5] {
   color: var(--_rp-field-danger);
   line-height: var(--rp-line-height-none);
 }
-.rp-field__control[data-v-b8c3dcbe] {
+.rp-field__control[data-v-50e7f3a5] {
   min-width: 0;
 }
-.rp-field__description[data-v-b8c3dcbe], .rp-field__message[data-v-b8c3dcbe] {
+.rp-field__description[data-v-50e7f3a5], .rp-field__message[data-v-50e7f3a5] {
   margin: 0;
   color: var(--rp-color-text-secondary);
   font-size: var(--rp-font-size-sm);
   line-height: var(--rp-line-height-normal);
 }
-.rp-field--invalid .rp-field__message[data-v-b8c3dcbe] {
+.rp-field--invalid .rp-field__message[data-v-50e7f3a5] {
   color: var(--_rp-field-danger);
 }
-.rp-field--disabled .rp-field__label[data-v-b8c3dcbe], .rp-field--disabled .rp-field__description[data-v-b8c3dcbe], .rp-field--disabled .rp-field__message[data-v-b8c3dcbe] {
+.rp-field--disabled .rp-field__label[data-v-50e7f3a5], .rp-field--disabled .rp-field__description[data-v-50e7f3a5], .rp-field--disabled .rp-field__message[data-v-50e7f3a5] {
   color: var(--rp-color-text-disabled);
 }

package/dist/field.js

@@ -1,13 +1,57 @@
 import './field.css';
-import { n as bem, t as _plugin_vue_export_helper_default } from "./_plugin-vue_export-helper.js";
-import { child, computed, createIf, createSlot, defineVaporComponent, renderEffect, setClass, setInsertionState, setProp, setText, template, toDisplayString, useId, useSlots } from "vue";
+import { t as bem } from "./bem.js";
+import { t as _plugin_vue_export_helper_default } from "./_plugin-vue_export-helper.js";
+import { child, computed, createIf, createSlot, defineVaporComponent, renderEffect, setClass, setInsertionState, setProp, setText, template, toDisplayString, unref, useId, useSlots } from "vue";
+//#region src/components/field/useField.ts
+function useField(props) {
+	const slots = useSlots();
+	const generatedId = useId();
+	const controlId = computed(() => props.id ?? `${generatedId}-control`);
+	const labelId = computed(() => `${controlId.value}-label`);
+	const descriptionId = computed(() => `${controlId.value}-description`);
+	const messageId = computed(() => `${controlId.value}-message`);
+	const isInvalid = computed(() => Boolean(props.invalid || props.error));
+	const messageText = computed(() => props.error || props.message);
+	const hasLabel = computed(() => Boolean(props.label || slots.label));
+	const hasDescription = computed(() => Boolean(props.description || slots.description));
+	const hasMessage = computed(() => Boolean(messageText.value || slots.message));
+	const controlLabelledby = computed(() => hasLabel.value ? labelId.value : void 0);
+	const controlDescribedby = computed(() => [hasDescription.value ? descriptionId.value : void 0, hasMessage.value ? messageId.value : void 0].filter(Boolean).join(" ") || void 0);
+	return {
+		controlId,
+		labelId,
+		descriptionId,
+		messageId,
+		isInvalid,
+		messageText,
+		hasLabel,
+		hasDescription,
+		hasMessage,
+		controlLabelledby,
+		controlDescribedby,
+		rootClass: computed(() => bem("rp-field", {
+			disabled: props.disabled,
+			required: props.required,
+			invalid: isInvalid.value
+		})),
+		controlProps: computed(() => ({
+			id: controlId.value,
+			disabled: props.disabled || void 0,
+			required: props.required || void 0,
+			invalid: isInvalid.value || void 0,
+			labelledby: controlLabelledby.value,
+			describedby: controlDescribedby.value
+		}))
+	};
+}
+//#endregion
 //#region src/components/field/field.vue?vue&type=script&setup=true&vapor=true&lang.ts
 var t0 = template(" ");
-var t1 = template("<span data-v-b8c3dcbe class=rp-field__required aria-hidden=true>*", 2);
-var t2 = template("<label data-v-b8c3dcbe class=rp-field__label>");
-var t3 = template("<p data-v-b8c3dcbe class=rp-field__description>");
-var t4 = template("<p data-v-b8c3dcbe class=rp-field__message>");
-var t5 = template("<div data-v-b8c3dcbe><div data-v-b8c3dcbe class=rp-field__control></div>", 1);
+var t1 = template("<span data-v-50e7f3a5 class=rp-field__required aria-hidden=true>*", 2);
+var t2 = template("<label data-v-50e7f3a5 class=rp-field__label>");
+var t3 = template("<p data-v-50e7f3a5 class=rp-field__description>");
+var t4 = template("<p data-v-50e7f3a5 class=rp-field__message>");
+var t5 = template("<div data-v-50e7f3a5><div data-v-50e7f3a5 class=rp-field__control></div>", 1);
 //#endregion
 //#region src/components/field/field.vue
 var field_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineVaporComponent({
@@ -33,42 +77,16 @@ var field_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__
 		}
 	},
 	setup(__props) {
-		const props = __props;
-		const slots = useSlots();
-		const generatedId = useId();
-		const controlId = computed(() => props.id ?? `${generatedId}-control`);
-		const labelId = computed(() => `${controlId.value}-label`);
-		const descriptionId = computed(() => `${controlId.value}-description`);
-		const messageId = computed(() => `${controlId.value}-message`);
-		const isInvalid = computed(() => Boolean(props.invalid || props.error));
-		const messageText = computed(() => props.error || props.message);
-		const hasLabel = computed(() => Boolean(props.label || slots.label));
-		const hasDescription = computed(() => Boolean(props.description || slots.description));
-		const hasMessage = computed(() => Boolean(messageText.value || slots.message));
-		const controlLabelledby = computed(() => hasLabel.value ? labelId.value : void 0);
-		const controlDescribedby = computed(() => [hasDescription.value ? descriptionId.value : void 0, hasMessage.value ? messageId.value : void 0].filter(Boolean).join(" ") || void 0);
-		const rootClass = computed(() => bem("rp-field", {
-			disabled: props.disabled,
-			required: props.required,
-			invalid: isInvalid.value
-		}));
-		const controlProps = computed(() => ({
-			id: controlId.value,
-			disabled: props.disabled || void 0,
-			required: props.required || void 0,
-			invalid: isInvalid.value || void 0,
-			labelledby: controlLabelledby.value,
-			describedby: controlDescribedby.value
-		}));
+		const { controlId, labelId, descriptionId, messageId, isInvalid, messageText, hasLabel, hasDescription, hasMessage, controlLabelledby, controlDescribedby, rootClass, controlProps } = useField(__props);
 		const n23 = t5();
 		const n10 = child(n23, 1);
-		renderEffect(() => setClass(n23, rootClass.value));
+		renderEffect(() => setClass(n23, unref(rootClass)));
 		setInsertionState(n23, 0, 0);
-		createIf(() => hasLabel.value, () => {
+		createIf(() => unref(hasLabel), () => {
 			const n8 = t2();
 			renderEffect(() => {
-				setProp(n8, "id", labelId.value);
-				setProp(n8, "for", controlId.value);
+				setProp(n8, "id", unref(labelId));
+				setProp(n8, "for", unref(controlId));
 			});
 			setInsertionState(n8, null, 0);
 			createSlot("label", null, () => {
@@ -84,18 +102,18 @@ var field_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__
 		});
 		setInsertionState(n10, null, 0);
 		createSlot("default", {
-			id: () => controlId.value,
+			id: () => unref(controlId),
 			disabled: () => __props.disabled || void 0,
 			required: () => __props.required || void 0,
-			invalid: () => isInvalid.value || void 0,
-			labelledby: () => controlLabelledby.value,
-			describedby: () => controlDescribedby.value,
-			controlProps: () => controlProps.value
+			invalid: () => unref(isInvalid) || void 0,
+			labelledby: () => unref(controlLabelledby),
+			describedby: () => unref(controlDescribedby),
+			controlProps: () => unref(controlProps)
 		}, null, 1);
 		setInsertionState(n23, null, 2);
-		createIf(() => hasDescription.value, () => {
+		createIf(() => unref(hasDescription), () => {
 			const n16 = t3();
-			renderEffect(() => setProp(n16, "id", descriptionId.value));
+			renderEffect(() => setProp(n16, "id", unref(descriptionId)));
 			setInsertionState(n16, null, 0);
 			createSlot("description", null, () => {
 				const n15 = t0();
@@ -105,23 +123,23 @@ var field_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__
 			return n16;
 		});
 		setInsertionState(n23, null, 3);
-		createIf(() => hasMessage.value, () => {
+		createIf(() => unref(hasMessage), () => {
 			const n22 = t4();
 			renderEffect(() => {
-				setProp(n22, "id", messageId.value);
-				setProp(n22, "role", isInvalid.value ? "alert" : void 0);
+				setProp(n22, "id", unref(messageId));
+				setProp(n22, "role", unref(isInvalid) ? "alert" : void 0);
 			});
 			setInsertionState(n22, null, 0);
 			createSlot("message", null, () => {
 				const n21 = t0();
-				renderEffect(() => setText(n21, toDisplayString(messageText.value)));
+				renderEffect(() => setText(n21, toDisplayString(unref(messageText))));
 				return n21;
 			}, 1);
 			return n22;
 		});
 		return n23;
 	}
-}), [["__scopeId", "data-v-b8c3dcbe"]]);
+}), [["__scopeId", "data-v-50e7f3a5"]]);
 //#endregion
 export { field_default as t };
 

package/dist/field.js.map

@@ -1 +1 @@
-{"version":3,"file":"field.js","names":[],"sources":["../src/components/field/field.vue","../src/components/field/field.vue"],"sourcesContent":["<template>\n    <div :class=\"rootClass\">\n        <label v-if=\"hasLabel\" :id=\"labelId\" class=\"rp-field__label\" :for=\"controlId\">\n            <slot name=\"label\">{{ label }}</slot>\n            <span v-if=\"required\" class=\"rp-field__required\" aria-hidden=\"true\">*</span>\n        </label>\n\n        <div class=\"rp-field__control\">\n            <slot\n                :id=\"controlId\"\n                :disabled=\"disabled || undefined\"\n                :required=\"required || undefined\"\n                :invalid=\"isInvalid || undefined\"\n                :labelledby=\"controlLabelledby\"\n                :describedby=\"controlDescribedby\"\n                :control-props=\"controlProps\"\n            />\n        </div>\n\n        <p v-if=\"hasDescription\" :id=\"descriptionId\" class=\"rp-field__description\">\n            <slot name=\"description\">{{ description }}</slot>\n        </p>\n\n        <p\n            v-if=\"hasMessage\"\n            :id=\"messageId\"\n            class=\"rp-field__message\"\n            :role=\"isInvalid ? 'alert' : undefined\"\n        >\n            <slot name=\"message\">{{ messageText }}</slot>\n        </p>\n    </div>\n</template>\n\n<script lang=\"ts\" setup vapor>\nimport { computed, useId, useSlots } from 'vue';\nimport { bem } from '@/utils/bem';\nimport type { FieldControlProps, FieldProps } from './types';\n\ndefineOptions({ name: 'RpField' });\n\nconst props = withDefaults(defineProps<FieldProps>(), {\n    label: '',\n    description: '',\n    message: '',\n    error: '',\n    disabled: undefined,\n    required: false,\n    invalid: undefined,\n});\n\nconst slots = useSlots();\nconst generatedId = useId();\n\nconst controlId = computed(() => props.id ?? `${generatedId}-control`);\nconst labelId = computed(() => `${controlId.value}-label`);\nconst descriptionId = computed(() => `${controlId.value}-description`);\nconst messageId = computed(() => `${controlId.value}-message`);\n\nconst isInvalid = computed(() => Boolean(props.invalid || props.error));\nconst messageText = computed(() => props.error || props.message);\n\nconst hasLabel = computed(() => Boolean(props.label || slots.label));\nconst hasDescription = computed(() => Boolean(props.description || slots.description));\nconst hasMessage = computed(() => Boolean(messageText.value || slots.message));\n\nconst controlLabelledby = computed(() => (hasLabel.value ? labelId.value : undefined));\nconst controlDescribedby = computed(\n    () =>\n        [\n            hasDescription.value ? descriptionId.value : undefined,\n            hasMessage.value ? messageId.value : undefined,\n        ]\n            .filter(Boolean)\n            .join(' ') || undefined,\n);\n\nconst rootClass = computed(() =>\n    bem('rp-field', {\n        disabled: props.disabled,\n        required: props.required,\n        invalid: isInvalid.value,\n    }),\n);\n\nconst controlProps = computed<FieldControlProps>(() => ({\n    id: controlId.value,\n    disabled: props.disabled || undefined,\n    required: props.required || undefined,\n    invalid: isInvalid.value || undefined,\n    labelledby: controlLabelledby.value,\n    describedby: controlDescribedby.value,\n}));\n</script>\n\n<style src=\"./field.scss\" lang=\"scss\" scoped></style>\n","<template>\n    <div :class=\"rootClass\">\n        <label v-if=\"hasLabel\" :id=\"labelId\" class=\"rp-field__label\" :for=\"controlId\">\n            <slot name=\"label\">{{ label }}</slot>\n            <span v-if=\"required\" class=\"rp-field__required\" aria-hidden=\"true\">*</span>\n        </label>\n\n        <div class=\"rp-field__control\">\n            <slot\n                :id=\"controlId\"\n                :disabled=\"disabled || undefined\"\n                :required=\"required || undefined\"\n                :invalid=\"isInvalid || undefined\"\n                :labelledby=\"controlLabelledby\"\n                :describedby=\"controlDescribedby\"\n                :control-props=\"controlProps\"\n            />\n        </div>\n\n        <p v-if=\"hasDescription\" :id=\"descriptionId\" class=\"rp-field__description\">\n            <slot name=\"description\">{{ description }}</slot>\n        </p>\n\n        <p\n            v-if=\"hasMessage\"\n            :id=\"messageId\"\n            class=\"rp-field__message\"\n            :role=\"isInvalid ? 'alert' : undefined\"\n        >\n            <slot name=\"message\">{{ messageText }}</slot>\n        </p>\n    </div>\n</template>\n\n<script lang=\"ts\" setup vapor>\nimport { computed, useId, useSlots } from 'vue';\nimport { bem } from '@/utils/bem';\nimport type { FieldControlProps, FieldProps } from './types';\n\ndefineOptions({ name: 'RpField' });\n\nconst props = withDefaults(defineProps<FieldProps>(), {\n    label: '',\n    description: '',\n    message: '',\n    error: '',\n    disabled: undefined,\n    required: false,\n    invalid: undefined,\n});\n\nconst slots = useSlots();\nconst generatedId = useId();\n\nconst controlId = computed(() => props.id ?? `${generatedId}-control`);\nconst labelId = computed(() => `${controlId.value}-label`);\nconst descriptionId = computed(() => `${controlId.value}-description`);\nconst messageId = computed(() => `${controlId.value}-message`);\n\nconst isInvalid = computed(() => Boolean(props.invalid || props.error));\nconst messageText = computed(() => props.error || props.message);\n\nconst hasLabel = computed(() => Boolean(props.label || slots.label));\nconst hasDescription = computed(() => Boolean(props.description || slots.description));\nconst hasMessage = computed(() => Boolean(messageText.value || slots.message));\n\nconst controlLabelledby = computed(() => (hasLabel.value ? labelId.value : undefined));\nconst controlDescribedby = computed(\n    () =>\n        [\n            hasDescription.value ? descriptionId.value : undefined,\n            hasMessage.value ? messageId.value : undefined,\n        ]\n            .filter(Boolean)\n            .join(' ') || undefined,\n);\n\nconst rootClass = computed(() =>\n    bem('rp-field', {\n        disabled: props.disabled,\n        required: props.required,\n        invalid: isInvalid.value,\n    }),\n);\n\nconst controlProps = computed<FieldControlProps>(() => ({\n    id: controlId.value,\n    disabled: props.disabled || undefined,\n    required: props.required || undefined,\n    invalid: isInvalid.value || undefined,\n    labelledby: controlLabelledby.value,\n    describedby: controlDescribedby.value,\n}));\n</script>\n\n<style src=\"./field.scss\" lang=\"scss\" scoped></style>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAyCA,MAAM,QAAQ;EAUd,MAAM,QAAQ,SAAS;EACvB,MAAM,cAAc,MAAM;EAE1B,MAAM,YAAY,eAAe,MAAM,MAAM,GAAG,YAAY,SAAS;EACrE,MAAM,UAAU,eAAe,GAAG,UAAU,MAAM,OAAO;EACzD,MAAM,gBAAgB,eAAe,GAAG,UAAU,MAAM,aAAa;EACrE,MAAM,YAAY,eAAe,GAAG,UAAU,MAAM,SAAS;EAE7D,MAAM,YAAY,eAAe,QAAQ,MAAM,WAAW,MAAM,KAAK,CAAC;EACtE,MAAM,cAAc,eAAe,MAAM,SAAS,MAAM,OAAO;EAE/D,MAAM,WAAW,eAAe,QAAQ,MAAM,SAAS,MAAM,KAAK,CAAC;EACnE,MAAM,iBAAiB,eAAe,QAAQ,MAAM,eAAe,MAAM,WAAW,CAAC;EACrF,MAAM,aAAa,eAAe,QAAQ,YAAY,SAAS,MAAM,OAAO,CAAC;EAE7E,MAAM,oBAAoB,eAAgB,SAAS,QAAQ,QAAQ,QAAQ,KAAA,CAAU;EACrF,MAAM,qBAAqB,eAEnB,CACI,eAAe,QAAQ,cAAc,QAAQ,KAAA,GAC7C,WAAW,QAAQ,UAAU,QAAQ,KAAA,CACzC,CAAA,CACK,OAAO,OAAO,CAAA,CACd,KAAK,GAAG,KAAK,KAAA,CAC1B;EAEA,MAAM,YAAY,eACd,IAAI,YAAY;GACZ,UAAU,MAAM;GAChB,UAAU,MAAM;GAChB,SAAS,UAAU;EACvB,CAAC,CACL;EAEA,MAAM,eAAe,gBAAmC;GACpD,IAAI,UAAU;GACd,UAAU,MAAM,YAAY,KAAA;GAC5B,UAAU,MAAM,YAAY,KAAA;GAC5B,SAAS,UAAU,SAAS,KAAA;GAC5B,YAAY,kBAAkB;GAC9B,aAAa,mBAAmB;EACpC,EAAE;;;mCA3Fe,UAAA,KAAS,CAAA;;iBACL,SAAA,aAAQ;;;gBAAG,MAAI,QAAA,KAAO;gBAA2B,OAAK,UAAA,KAAS;;;cAClE,SAAY,YAAA;;mDAAI,QAAA,KAAK,CAAA,CAAA;;;;kBACf,QAAA,gBAAQ;;;;;;;GAKf,UAAI,UAAA;GACJ,gBAAU,QAAA,YAAY,KAAA;GACtB,gBAAU,QAAA,YAAY,KAAA;GACtB,eAAS,UAAA,SAAa,KAAA;GACtB,kBAAY,kBAAA;GACZ,mBAAa,mBAAA;GACb,oBAAe,aAAA;;;iBAIf,eAAA,aAAc;;mCAAG,MAAI,cAAA,KAAa,CAAA;;cACjC,eAAkB,YAAA;;oDAAI,QAAA,WAAW,CAAA,CAAA;;;;;;iBAIjC,WAAA,aAAU;;;iBACf,MAAI,UAAA,KAAS;iBAEb,QAAM,UAAA,QAAS,UAAa,KAAA,CAAS;;;cAEhC,WAAc,YAAA;;oDAAI,YAAA,KAAW,CAAA,CAAA"}
+{"version":3,"file":"field.js","names":[],"sources":["../src/components/field/useField.ts","../src/components/field/field.vue","../src/components/field/field.vue"],"sourcesContent":["import { computed, useId, useSlots } from 'vue';\nimport { bem } from '@/utils/bem';\nimport type { FieldControlProps, FieldProps } from './types';\n\nexport function useField(props: Readonly<FieldProps>) {\n    const slots = useSlots();\n    const generatedId = useId();\n\n    const controlId = computed(() => props.id ?? `${generatedId}-control`);\n    const labelId = computed(() => `${controlId.value}-label`);\n    const descriptionId = computed(() => `${controlId.value}-description`);\n    const messageId = computed(() => `${controlId.value}-message`);\n\n    const isInvalid = computed(() => Boolean(props.invalid || props.error));\n    const messageText = computed(() => props.error || props.message);\n\n    const hasLabel = computed(() => Boolean(props.label || slots.label));\n    const hasDescription = computed(() => Boolean(props.description || slots.description));\n    const hasMessage = computed(() => Boolean(messageText.value || slots.message));\n\n    const controlLabelledby = computed(() => (hasLabel.value ? labelId.value : undefined));\n    const controlDescribedby = computed(\n        () =>\n            [\n                hasDescription.value ? descriptionId.value : undefined,\n                hasMessage.value ? messageId.value : undefined,\n            ]\n                .filter(Boolean)\n                .join(' ') || undefined,\n    );\n\n    const rootClass = computed(() =>\n        bem('rp-field', {\n            disabled: props.disabled,\n            required: props.required,\n            invalid: isInvalid.value,\n        }),\n    );\n\n    const controlProps = computed<FieldControlProps>(() => ({\n        id: controlId.value,\n        disabled: props.disabled || undefined,\n        required: props.required || undefined,\n        invalid: isInvalid.value || undefined,\n        labelledby: controlLabelledby.value,\n        describedby: controlDescribedby.value,\n    }));\n\n    return {\n        controlId,\n        labelId,\n        descriptionId,\n        messageId,\n        isInvalid,\n        messageText,\n        hasLabel,\n        hasDescription,\n        hasMessage,\n        controlLabelledby,\n        controlDescribedby,\n        rootClass,\n        controlProps,\n    };\n}\n","<template>\n    <div :class=\"rootClass\">\n        <label v-if=\"hasLabel\" :id=\"labelId\" class=\"rp-field__label\" :for=\"controlId\">\n            <slot name=\"label\">{{ label }}</slot>\n            <span v-if=\"required\" class=\"rp-field__required\" aria-hidden=\"true\">*</span>\n        </label>\n\n        <div class=\"rp-field__control\">\n            <slot\n                :id=\"controlId\"\n                :disabled=\"disabled || undefined\"\n                :required=\"required || undefined\"\n                :invalid=\"isInvalid || undefined\"\n                :labelledby=\"controlLabelledby\"\n                :describedby=\"controlDescribedby\"\n                :control-props=\"controlProps\"\n            />\n        </div>\n\n        <p v-if=\"hasDescription\" :id=\"descriptionId\" class=\"rp-field__description\">\n            <slot name=\"description\">{{ description }}</slot>\n        </p>\n\n        <p\n            v-if=\"hasMessage\"\n            :id=\"messageId\"\n            class=\"rp-field__message\"\n            :role=\"isInvalid ? 'alert' : undefined\"\n        >\n            <slot name=\"message\">{{ messageText }}</slot>\n        </p>\n    </div>\n</template>\n\n<script lang=\"ts\" setup vapor>\nimport { useField } from './useField';\nimport type { FieldProps } from './types';\n\ndefineOptions({ name: 'RpField' });\n\nconst props = withDefaults(defineProps<FieldProps>(), {\n    label: '',\n    description: '',\n    message: '',\n    error: '',\n    disabled: undefined,\n    required: false,\n    invalid: undefined,\n});\n\nconst {\n    controlId,\n    labelId,\n    descriptionId,\n    messageId,\n    isInvalid,\n    messageText,\n    hasLabel,\n    hasDescription,\n    hasMessage,\n    controlLabelledby,\n    controlDescribedby,\n    rootClass,\n    controlProps,\n} = useField(props);\n</script>\n\n<style src=\"./field.scss\" lang=\"scss\" scoped></style>\n","<template>\n    <div :class=\"rootClass\">\n        <label v-if=\"hasLabel\" :id=\"labelId\" class=\"rp-field__label\" :for=\"controlId\">\n            <slot name=\"label\">{{ label }}</slot>\n            <span v-if=\"required\" class=\"rp-field__required\" aria-hidden=\"true\">*</span>\n        </label>\n\n        <div class=\"rp-field__control\">\n            <slot\n                :id=\"controlId\"\n                :disabled=\"disabled || undefined\"\n                :required=\"required || undefined\"\n                :invalid=\"isInvalid || undefined\"\n                :labelledby=\"controlLabelledby\"\n                :describedby=\"controlDescribedby\"\n                :control-props=\"controlProps\"\n            />\n        </div>\n\n        <p v-if=\"hasDescription\" :id=\"descriptionId\" class=\"rp-field__description\">\n            <slot name=\"description\">{{ description }}</slot>\n        </p>\n\n        <p\n            v-if=\"hasMessage\"\n            :id=\"messageId\"\n            class=\"rp-field__message\"\n            :role=\"isInvalid ? 'alert' : undefined\"\n        >\n            <slot name=\"message\">{{ messageText }}</slot>\n        </p>\n    </div>\n</template>\n\n<script lang=\"ts\" setup vapor>\nimport { useField } from './useField';\nimport type { FieldProps } from './types';\n\ndefineOptions({ name: 'RpField' });\n\nconst props = withDefaults(defineProps<FieldProps>(), {\n    label: '',\n    description: '',\n    message: '',\n    error: '',\n    disabled: undefined,\n    required: false,\n    invalid: undefined,\n});\n\nconst {\n    controlId,\n    labelId,\n    descriptionId,\n    messageId,\n    isInvalid,\n    messageText,\n    hasLabel,\n    hasDescription,\n    hasMessage,\n    controlLabelledby,\n    controlDescribedby,\n    rootClass,\n    controlProps,\n} = useField(props);\n</script>\n\n<style src=\"./field.scss\" lang=\"scss\" scoped></style>\n"],"mappings":";;;;AAIA,SAAgB,SAAS,OAA6B;CAClD,MAAM,QAAQ,SAAS;CACvB,MAAM,cAAc,MAAM;CAE1B,MAAM,YAAY,eAAe,MAAM,MAAM,GAAG,YAAY,SAAS;CACrE,MAAM,UAAU,eAAe,GAAG,UAAU,MAAM,OAAO;CACzD,MAAM,gBAAgB,eAAe,GAAG,UAAU,MAAM,aAAa;CACrE,MAAM,YAAY,eAAe,GAAG,UAAU,MAAM,SAAS;CAE7D,MAAM,YAAY,eAAe,QAAQ,MAAM,WAAW,MAAM,KAAK,CAAC;CACtE,MAAM,cAAc,eAAe,MAAM,SAAS,MAAM,OAAO;CAE/D,MAAM,WAAW,eAAe,QAAQ,MAAM,SAAS,MAAM,KAAK,CAAC;CACnE,MAAM,iBAAiB,eAAe,QAAQ,MAAM,eAAe,MAAM,WAAW,CAAC;CACrF,MAAM,aAAa,eAAe,QAAQ,YAAY,SAAS,MAAM,OAAO,CAAC;CAE7E,MAAM,oBAAoB,eAAgB,SAAS,QAAQ,QAAQ,QAAQ,KAAA,CAAU;CACrF,MAAM,qBAAqB,eAEnB,CACI,eAAe,QAAQ,cAAc,QAAQ,KAAA,GAC7C,WAAW,QAAQ,UAAU,QAAQ,KAAA,CACzC,CAAC,CACI,OAAO,OAAO,CAAC,CACf,KAAK,GAAG,KAAK,KAAA,CAC1B;CAmBA,OAAO;EACH;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA,WA7Bc,eACd,IAAI,YAAY;GACZ,UAAU,MAAM;GAChB,UAAU,MAAM;GAChB,SAAS,UAAU;EACvB,CAAC,CAwBD;EACA,cAtBiB,gBAAmC;GACpD,IAAI,UAAU;GACd,UAAU,MAAM,YAAY,KAAA;GAC5B,UAAU,MAAM,YAAY,KAAA;GAC5B,SAAS,UAAU,SAAS,KAAA;GAC5B,YAAY,kBAAkB;GAC9B,aAAa,mBAAmB;EACpC,EAeI;CACJ;AACJ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;ECbA,MAAM,EACF,WACA,SACA,eACA,WACA,WACA,aACA,UACA,gBACA,YACA,mBACA,oBACA,WACA,iBACA,SAAS,OAAK;;;mCA/DD,MAAA,SAAA,CAAS,CAAA;;iBACL,MAAA,QAAA,SAAQ;;;gBAAG,MAAI,MAAA,OAAA,CAAO;gBAA2B,OAAK,MAAA,SAAA,CAAS;;;cAClE,SAAY,YAAA;;mDAAI,QAAA,KAAK,CAAA,CAAA;;;;kBACf,QAAA,gBAAQ;;;;;;;GAKf,UAAI,MAAA,SAAA;GACJ,gBAAU,QAAA,YAAY,KAAA;GACtB,gBAAU,QAAA,YAAY,KAAA;GACtB,eAAS,MAAA,SAAA,KAAa,KAAA;GACtB,kBAAY,MAAA,iBAAA;GACZ,mBAAa,MAAA,kBAAA;GACb,oBAAe,MAAA,YAAA;;;iBAIf,MAAA,cAAA,SAAc;;mCAAG,MAAI,MAAA,aAAA,CAAa,CAAA;;cACjC,eAAkB,YAAA;;oDAAI,QAAA,WAAW,CAAA,CAAA;;;;;;iBAIjC,MAAA,UAAA,SAAU;;;iBACf,MAAI,MAAA,SAAA,CAAS;iBAEb,QAAM,MAAA,SAAA,IAAS,UAAa,KAAA,CAAS;;;cAEhC,WAAc,YAAA;;oDAAI,MAAA,WAAA,CAAW,CAAA,CAAA"}