ropav 0.0.6 → 0.0.7
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/_plugin-vue_export-helper.js +1 -11
- package/dist/accordion.css +112 -0
- package/dist/accordion.js +360 -0
- package/dist/accordion.js.map +1 -0
- package/dist/badge.css +169 -0
- package/dist/badge.js +103 -0
- package/dist/badge.js.map +1 -0
- package/dist/bem.js +11 -0
- package/dist/bem.js.map +1 -0
- package/dist/button-group.css +8 -8
- package/dist/button-group.js +2 -1
- package/dist/button-group.js.map +1 -1
- package/dist/button.js +3 -2
- package/dist/button.js.map +1 -1
- package/dist/card.js +2 -1
- package/dist/card.js.map +1 -1
- package/dist/checkbox.js +2 -1
- package/dist/checkbox.js.map +1 -1
- package/dist/collapse.css +32 -0
- package/dist/collapse.js +68 -0
- package/dist/collapse.js.map +1 -0
- package/dist/components/accordion/accordion-item.d.ts +40 -0
- package/dist/components/accordion/accordion.d.ts +23 -0
- package/dist/components/accordion/index.d.ts +4 -0
- package/dist/components/accordion/index.js +2 -0
- package/dist/components/accordion/types.d.ts +100 -0
- package/dist/components/accordion/useAccordion.d.ts +3 -0
- package/dist/components/badge/badge.d.ts +25 -0
- package/dist/components/badge/index.d.ts +3 -0
- package/dist/components/badge/index.js +2 -0
- package/dist/components/badge/types.d.ts +16 -0
- package/dist/components/badge/useBadgeColor.d.ts +8 -0
- package/dist/components/collapse/collapse.d.ts +36 -0
- package/dist/components/collapse/index.d.ts +3 -0
- package/dist/components/collapse/index.js +3 -0
- package/dist/components/collapse/types.d.ts +76 -0
- package/dist/components/collapse/useCollapse.d.ts +2 -0
- package/dist/components/dropdown-menu/dropdown-menu-items.d.ts +16 -0
- package/dist/components/dropdown-menu/dropdown-menu-utils.d.ts +23 -0
- package/dist/components/dropdown-menu/dropdown-menu.d.ts +26 -0
- package/dist/components/dropdown-menu/index.d.ts +3 -0
- package/dist/components/dropdown-menu/index.js +2 -0
- package/dist/components/dropdown-menu/types.d.ts +104 -0
- package/dist/components/dropdown-menu/useDropdownMenu.d.ts +32 -0
- package/dist/components/dropdown-menu/useDropdownMenuDisclosure.d.ts +30 -0
- package/dist/components/dropdown-menu/useDropdownMenuDom.d.ts +28 -0
- package/dist/components/dropdown-menu/useDropdownMenuHoverIntent.d.ts +24 -0
- package/dist/components/dropdown-menu/useDropdownMenuInteractions.d.ts +51 -0
- package/dist/components/dropdown-menu/useDropdownMenuNavigation.d.ts +16 -0
- package/dist/components/dropdown-menu/useDropdownMenuRenderItems.d.ts +25 -0
- package/dist/components/dropdown-menu/useDropdownSubmenus.d.ts +18 -0
- package/dist/components/field/field.d.ts +2 -2
- package/dist/components/field/useField.d.ts +16 -0
- package/dist/components/input/useInput.d.ts +8 -0
- package/dist/components/modal/index.d.ts +2 -0
- package/dist/components/modal/index.js +2 -0
- package/dist/components/modal/modal.d.ts +42 -0
- package/dist/components/modal/types.d.ts +32 -0
- package/dist/components/modal/useModal.d.ts +29 -0
- package/dist/components/overlay/index.d.ts +2 -0
- package/dist/components/overlay/index.js +2 -0
- package/dist/components/overlay/overlay.d.ts +19 -0
- package/dist/components/overlay/types.d.ts +12 -0
- package/dist/components/overlay/useOverlay.d.ts +7 -0
- package/dist/components/popover/index.d.ts +2 -0
- package/dist/components/popover/index.js +2 -0
- package/dist/components/popover/popover.d.ts +43 -0
- package/dist/components/popover/types.d.ts +40 -0
- package/dist/components/popover/usePopover.d.ts +20 -0
- package/dist/components/tabs/index.d.ts +6 -0
- package/dist/components/tabs/index.js +2 -0
- package/dist/components/tabs/tabs-content.d.ts +24 -0
- package/dist/components/tabs/tabs-list.d.ts +26 -0
- package/dist/components/tabs/tabs-trigger.d.ts +29 -0
- package/dist/components/tabs/tabs.d.ts +31 -0
- package/dist/components/tabs/types.d.ts +160 -0
- package/dist/components/tabs/useTabs.d.ts +5 -0
- package/dist/dropdown-menu.css +159 -0
- package/dist/dropdown-menu.js +903 -0
- package/dist/dropdown-menu.js.map +1 -0
- package/dist/field.css +8 -8
- package/dist/field.js +68 -50
- package/dist/field.js.map +1 -1
- package/dist/icon-button.css +1 -1
- package/dist/icon-button.js +3 -2
- package/dist/icon-button.js.map +1 -1
- package/dist/index.d.ts +8 -0
- package/dist/index.js +12 -1
- package/dist/input.css +25 -25
- package/dist/input.js +57 -38
- package/dist/input.js.map +1 -1
- package/dist/modal.css +134 -0
- package/dist/modal.js +433 -0
- package/dist/modal.js.map +1 -0
- package/dist/overlay.css +28 -0
- package/dist/overlay.js +84 -0
- package/dist/overlay.js.map +1 -0
- package/dist/popover.css +75 -0
- package/dist/popover.js +367 -0
- package/dist/popover.js.map +1 -0
- package/dist/progress.js +2 -1
- package/dist/progress.js.map +1 -1
- package/dist/radio.js +4 -9
- package/dist/radio.js.map +1 -1
- package/dist/select.js +8 -37
- package/dist/select.js.map +1 -1
- package/dist/slider.js +2 -1
- package/dist/slider.js.map +1 -1
- package/dist/switch.js +2 -1
- package/dist/switch.js.map +1 -1
- package/dist/tabs.css +279 -0
- package/dist/tabs.js +515 -0
- package/dist/tabs.js.map +1 -0
- package/dist/textarea.js +2 -1
- package/dist/textarea.js.map +1 -1
- package/dist/tooltip.js +2 -1
- package/dist/tooltip.js.map +1 -1
- package/dist/useClickOutside.js +26 -0
- package/dist/useClickOutside.js.map +1 -0
- package/dist/useCollapse.js +94 -0
- package/dist/useCollapse.js.map +1 -0
- package/dist/useRequiredInject.js +11 -0
- package/dist/useRequiredInject.js.map +1 -0
- package/dist/x.js +14 -0
- package/dist/x.js.map +1 -0
- package/package.json +35 -3
- package/dist/_plugin-vue_export-helper.js.map +0 -1
package/dist/tooltip.js
CHANGED
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import './tooltip.css';
|
|
2
|
+
import { t as bem } from "./bem.js";
|
|
3
|
+
import { t as _plugin_vue_export_helper_default } from "./_plugin-vue_export-helper.js";
|
|
2
4
|
import { n as getComponentCustomColor, r as isComponentPresetColor } from "./componentColors.js";
|
|
3
|
-
import { n as bem, t as _plugin_vue_export_helper_default } from "./_plugin-vue_export-helper.js";
|
|
4
5
|
import { VaporTransition, applyVShow, computed, createComponent, createIf, createInvoker, createSlot, defineVaporComponent, delegateEvents, extend, isRef, on, onBeforeUnmount, onMounted, ref, renderEffect, setAttr, setClass, setInsertionState, setProp, setStyle, setText, template, toDisplayString, unref, useId, useSlots, watch } from "vue";
|
|
5
6
|
//#region src/composables/useDelayedOpen.ts
|
|
6
7
|
function readOption(value, fallback) {
|
package/dist/tooltip.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"tooltip.js","names":[],"sources":["../src/composables/useDelayedOpen.ts","../src/components/tooltip/useTooltip.ts","../src/components/tooltip/tooltip.vue","../src/components/tooltip/tooltip.vue"],"sourcesContent":["import { computed, onBeforeUnmount, ref } from 'vue';\n\nexport interface UseDelayedOpenOptions {\n open?: boolean | (() => boolean | undefined);\n openDelay?: number | (() => number | undefined);\n disabled?: boolean | (() => boolean | undefined);\n onOpenChange?: (open: boolean) => void;\n}\n\nfunction readOption<T>(value: T | (() => T | undefined) | undefined, fallback: T): T {\n return typeof value === 'function'\n ? ((value as () => T | undefined)() ?? fallback)\n : (value ?? fallback);\n}\n\nfunction readOptional<T>(value: T | (() => T | undefined) | undefined): T | undefined {\n return typeof value === 'function' ? (value as () => T | undefined)() : value;\n}\n\nexport function useDelayedOpen(options: UseDelayedOpenOptions = {}) {\n const uncontrolledOpen = ref(false);\n let openTimer: ReturnType<typeof setTimeout> | null = null;\n\n const isOpen = computed(() => readOptional(options.open) ?? uncontrolledOpen.value);\n\n function clearTimers() {\n if (openTimer) {\n clearTimeout(openTimer);\n openTimer = null;\n }\n }\n\n function isDisabled() {\n return readOption(options.disabled, false);\n }\n\n function setOpen(nextOpen: boolean) {\n const previousOpen = isOpen.value;\n if (readOptional(options.open) === undefined) uncontrolledOpen.value = nextOpen;\n if (previousOpen !== nextOpen) options.onOpenChange?.(nextOpen);\n }\n\n function open() {\n if (isDisabled()) return;\n const delay = readOption(options.openDelay, 0);\n if (delay <= 0) {\n setOpen(true);\n return;\n }\n if (openTimer) clearTimeout(openTimer);\n openTimer = setTimeout(() => {\n setOpen(true);\n openTimer = null;\n }, delay);\n }\n\n function closeImmediate() {\n clearTimers();\n setOpen(false);\n }\n\n onBeforeUnmount(clearTimers);\n\n return {\n isOpen,\n open,\n closeImmediate,\n };\n}\n","import {\n computed,\n isRef,\n onBeforeUnmount,\n onMounted,\n ref,\n useId,\n useSlots,\n watch,\n type CSSProperties,\n} from 'vue';\nimport { useDelayedOpen } from '@/composables/useDelayedOpen';\nimport { getComponentCustomColor, isComponentPresetColor } from '@/utils/componentColors';\nimport { bem } from '@/utils/bem';\nimport type { TooltipOffset, TooltipPlacement, TooltipProps, TooltipTriggerProps } from './types';\n\ninterface TooltipPosition {\n x: number;\n y: number;\n}\n\nfunction isHTMLElement(value: unknown): value is HTMLElement {\n return typeof HTMLElement !== 'undefined' && value instanceof HTMLElement;\n}\n\nfunction getTargetPosition(rect: DOMRect, placement: TooltipPlacement): TooltipPosition {\n switch (placement) {\n case 'right':\n return { x: rect.right, y: rect.top + rect.height / 2 };\n case 'bottom':\n return { x: rect.left + rect.width / 2, y: rect.bottom };\n case 'left':\n return { x: rect.left, y: rect.top + rect.height / 2 };\n case 'top':\n default:\n return { x: rect.left + rect.width / 2, y: rect.top };\n }\n}\n\nfunction resolveOffsetStyle(offset: TooltipOffset | undefined): CSSProperties | undefined {\n if (offset == null) return undefined;\n\n if (typeof offset === 'number') {\n return {\n '--_rp-tooltip-main-axis-offset': `${offset}px`,\n };\n }\n\n const style: CSSProperties = {};\n\n if (offset.mainAxis != null) {\n style['--_rp-tooltip-main-axis-offset'] = `${offset.mainAxis}px`;\n }\n\n if (offset.crossAxis != null) {\n style['--_rp-tooltip-cross-axis-offset'] = `${offset.crossAxis}px`;\n }\n\n return Object.keys(style).length > 0 ? style : undefined;\n}\n\nfunction resolveTooltipColorStyle(color: TooltipProps['color']): CSSProperties | undefined {\n const customColor = getComponentCustomColor(color);\n if (!customColor) return undefined;\n\n return {\n '--_rp-tooltip-bg': customColor,\n '--_rp-tooltip-fg': 'var(--rp-color-on-primary)',\n };\n}\n\nexport function useTooltip(\n props: Readonly<TooltipProps>,\n emitOpenChange?: (open: boolean) => void,\n) {\n const slots = useSlots();\n const generatedId = useId();\n const targetElement = ref<HTMLElement | null>(null);\n const targetPosition = ref<TooltipPosition | null>(null);\n\n let isMounted = false;\n let removeTargetListeners: (() => void) | undefined;\n let removePositionListeners: (() => void) | undefined;\n let describedTarget: HTMLElement | null = null;\n let previousTargetDescribedby: string | null = null;\n\n const tooltipId = computed(() => props.id ?? `${generatedId}-tooltip`);\n const placement = computed(() => props.placement ?? 'top');\n const isTargetMode = computed(() => props.target != null && props.target !== '');\n const hasContent = computed(() => Boolean(props.content || slots.content));\n const isDecorative = computed(() => Boolean(props.decorative));\n const isDisabled = computed(() => Boolean(props.disabled || !hasContent.value));\n const shouldRenderContent = computed(() => !isDisabled.value);\n const shouldDescribeContent = computed(() => shouldRenderContent.value && !isDecorative.value);\n\n const { isOpen, open, closeImmediate } = useDelayedOpen({\n open: () => props.open,\n openDelay: () => props.openDelay ?? 300,\n disabled: () => isDisabled.value,\n onOpenChange: emitOpenChange,\n });\n\n const isVisible = computed(() => isOpen.value && !isDisabled.value);\n\n const rootClass = computed(() =>\n bem('rp-tooltip', {\n [`placement-${placement.value}`]: true,\n [`color-${props.color}`]: isComponentPresetColor(props.color),\n arrow: props.arrow,\n target: isTargetMode.value,\n open: isVisible.value,\n disabled: props.disabled,\n }),\n );\n\n const triggerProps = computed<TooltipTriggerProps>(() => ({\n 'aria-describedby': shouldDescribeContent.value ? tooltipId.value : undefined,\n }));\n\n const contentRole = computed(() => (isDecorative.value ? undefined : 'tooltip'));\n const contentAriaHidden = computed(() => (isDecorative.value ? 'true' : undefined));\n\n const contentStyle = computed<CSSProperties | undefined>(() => {\n const style: CSSProperties = {\n ...resolveOffsetStyle(props.offset),\n ...resolveTooltipColorStyle(props.color),\n };\n\n if (!isTargetMode.value || !targetPosition.value) {\n return Object.keys(style).length > 0 ? style : undefined;\n }\n\n return {\n ...style,\n '--_rp-tooltip-target-x': `${targetPosition.value.x}px`,\n '--_rp-tooltip-target-y': `${targetPosition.value.y}px`,\n };\n });\n\n function openTooltip() {\n open();\n }\n\n function closeTooltip() {\n closeImmediate();\n }\n\n function onKeydown(event: KeyboardEvent) {\n if (event.key === 'Escape') closeTooltip();\n }\n\n function readTarget() {\n return isRef(props.target) ? props.target.value : props.target;\n }\n\n function resolveTarget() {\n const target = readTarget();\n if (!target) return null;\n\n if (typeof target === 'string') {\n if (typeof document === 'undefined') return null;\n\n try {\n const element = document.querySelector(target);\n return isHTMLElement(element) ? element : null;\n } catch {\n return null;\n }\n }\n\n return isHTMLElement(target) ? target : null;\n }\n\n function restoreTargetDescription() {\n if (!describedTarget) return;\n\n if (previousTargetDescribedby) {\n describedTarget.setAttribute('aria-describedby', previousTargetDescribedby);\n } else {\n describedTarget.removeAttribute('aria-describedby');\n }\n\n describedTarget = null;\n previousTargetDescribedby = null;\n }\n\n function syncTargetDescription() {\n restoreTargetDescription();\n\n if (!isTargetMode.value || !shouldDescribeContent.value || !targetElement.value) return;\n\n describedTarget = targetElement.value;\n previousTargetDescribedby = describedTarget.getAttribute('aria-describedby');\n\n const ids = (previousTargetDescribedby ?? '').split(/\\s+/).filter(Boolean);\n if (!ids.includes(tooltipId.value)) ids.push(tooltipId.value);\n describedTarget.setAttribute('aria-describedby', ids.join(' '));\n }\n\n function updateTargetPosition() {\n if (!isTargetMode.value || !targetElement.value) {\n targetPosition.value = null;\n return;\n }\n\n targetPosition.value = getTargetPosition(\n targetElement.value.getBoundingClientRect(),\n placement.value,\n );\n }\n\n function onTargetOpen() {\n updateTargetPosition();\n openTooltip();\n }\n\n function bindTargetListeners(element: HTMLElement) {\n removeTargetListeners?.();\n\n element.addEventListener('mouseenter', onTargetOpen);\n element.addEventListener('mouseleave', closeTooltip);\n element.addEventListener('focusin', onTargetOpen);\n element.addEventListener('focusout', closeTooltip);\n element.addEventListener('keydown', onKeydown);\n\n removeTargetListeners = () => {\n element.removeEventListener('mouseenter', onTargetOpen);\n element.removeEventListener('mouseleave', closeTooltip);\n element.removeEventListener('focusin', onTargetOpen);\n element.removeEventListener('focusout', closeTooltip);\n element.removeEventListener('keydown', onKeydown);\n removeTargetListeners = undefined;\n };\n }\n\n function removeViewportListeners() {\n removePositionListeners?.();\n removePositionListeners = undefined;\n }\n\n function bindViewportListeners() {\n if (typeof window === 'undefined' || removePositionListeners) return;\n\n window.addEventListener('resize', updateTargetPosition);\n window.addEventListener('scroll', updateTargetPosition, true);\n\n removePositionListeners = () => {\n window.removeEventListener('resize', updateTargetPosition);\n window.removeEventListener('scroll', updateTargetPosition, true);\n };\n }\n\n function syncTarget() {\n if (!isTargetMode.value) {\n removeTargetListeners?.();\n removeViewportListeners();\n restoreTargetDescription();\n targetElement.value = null;\n targetPosition.value = null;\n return;\n }\n\n const nextTarget = resolveTarget();\n if (targetElement.value === nextTarget) {\n syncTargetDescription();\n updateTargetPosition();\n return;\n }\n\n removeTargetListeners?.();\n removeViewportListeners();\n restoreTargetDescription();\n targetElement.value = nextTarget;\n\n if (!nextTarget) {\n targetPosition.value = null;\n return;\n }\n\n bindTargetListeners(nextTarget);\n syncTargetDescription();\n updateTargetPosition();\n }\n\n watch(isDisabled, (disabled) => {\n if (disabled) closeTooltip();\n });\n\n watch(\n () => readTarget(),\n () => {\n if (isMounted) syncTarget();\n },\n { flush: 'post' },\n );\n\n watch([isTargetMode, shouldDescribeContent, tooltipId], () => {\n if (isMounted) syncTargetDescription();\n });\n\n watch([placement, isVisible], () => {\n if (isMounted && isVisible.value) updateTargetPosition();\n });\n\n watch(isVisible, (visible) => {\n if (!isMounted || !isTargetMode.value) return;\n\n if (visible) {\n updateTargetPosition();\n bindViewportListeners();\n } else {\n removeViewportListeners();\n }\n });\n\n onMounted(() => {\n isMounted = true;\n syncTarget();\n });\n\n onBeforeUnmount(() => {\n isMounted = false;\n removeTargetListeners?.();\n removeViewportListeners();\n restoreTargetDescription();\n });\n\n return {\n tooltipId,\n isOpen,\n isVisible,\n isTargetMode,\n shouldRenderContent,\n rootClass,\n triggerProps,\n contentRole,\n contentAriaHidden,\n contentStyle,\n openTooltip,\n closeTooltip,\n onKeydown,\n };\n}\n","<template>\n <span\n :class=\"rootClass\"\n @mouseenter=\"openTooltip\"\n @mouseleave=\"closeTooltip\"\n @focusin=\"openTooltip\"\n @focusout=\"closeTooltip\"\n @keydown=\"onKeydown\"\n >\n <slot v-if=\"!isTargetMode\" :trigger-props=\"triggerProps\" />\n\n <Transition name=\"rp-tooltip-content\">\n <span\n v-if=\"shouldRenderContent\"\n v-show=\"isVisible\"\n :id=\"tooltipId\"\n class=\"rp-tooltip__content\"\n :role=\"contentRole\"\n :aria-hidden=\"contentAriaHidden\"\n :style=\"contentStyle\"\n >\n <slot name=\"content\">{{ content }}</slot>\n </span>\n </Transition>\n </span>\n</template>\n\n<script lang=\"ts\" setup vapor>\nimport { useTooltip } from './useTooltip';\nimport type { TooltipProps } from './types';\n\ndefineOptions({ name: 'RpTooltip' });\n\nconst props = withDefaults(defineProps<TooltipProps>(), {\n content: '',\n placement: 'top',\n open: undefined,\n openDelay: 300,\n arrow: false,\n disabled: false,\n decorative: false,\n});\n\nconst emit = defineEmits<{\n 'update:open': [value: boolean];\n}>();\n\nconst {\n tooltipId,\n isVisible,\n isTargetMode,\n shouldRenderContent,\n rootClass,\n triggerProps,\n contentRole,\n contentAriaHidden,\n contentStyle,\n openTooltip,\n closeTooltip,\n onKeydown,\n} = useTooltip(props, (open) => {\n emit('update:open', open);\n});\n</script>\n\n<style src=\"./tooltip.scss\" lang=\"scss\" scoped></style>\n","<template>\n <span\n :class=\"rootClass\"\n @mouseenter=\"openTooltip\"\n @mouseleave=\"closeTooltip\"\n @focusin=\"openTooltip\"\n @focusout=\"closeTooltip\"\n @keydown=\"onKeydown\"\n >\n <slot v-if=\"!isTargetMode\" :trigger-props=\"triggerProps\" />\n\n <Transition name=\"rp-tooltip-content\">\n <span\n v-if=\"shouldRenderContent\"\n v-show=\"isVisible\"\n :id=\"tooltipId\"\n class=\"rp-tooltip__content\"\n :role=\"contentRole\"\n :aria-hidden=\"contentAriaHidden\"\n :style=\"contentStyle\"\n >\n <slot name=\"content\">{{ content }}</slot>\n </span>\n </Transition>\n </span>\n</template>\n\n<script lang=\"ts\" setup vapor>\nimport { useTooltip } from './useTooltip';\nimport type { TooltipProps } from './types';\n\ndefineOptions({ name: 'RpTooltip' });\n\nconst props = withDefaults(defineProps<TooltipProps>(), {\n content: '',\n placement: 'top',\n open: undefined,\n openDelay: 300,\n arrow: false,\n disabled: false,\n decorative: false,\n});\n\nconst emit = defineEmits<{\n 'update:open': [value: boolean];\n}>();\n\nconst {\n tooltipId,\n isVisible,\n isTargetMode,\n shouldRenderContent,\n rootClass,\n triggerProps,\n contentRole,\n contentAriaHidden,\n contentStyle,\n openTooltip,\n closeTooltip,\n onKeydown,\n} = useTooltip(props, (open) => {\n emit('update:open', open);\n});\n</script>\n\n<style src=\"./tooltip.scss\" lang=\"scss\" scoped></style>\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"tooltip.js","names":[],"sources":["../src/composables/useDelayedOpen.ts","../src/components/tooltip/useTooltip.ts","../src/components/tooltip/tooltip.vue","../src/components/tooltip/tooltip.vue"],"sourcesContent":["import { computed, onBeforeUnmount, ref } from 'vue';\n\nexport interface UseDelayedOpenOptions {\n open?: boolean | (() => boolean | undefined);\n openDelay?: number | (() => number | undefined);\n disabled?: boolean | (() => boolean | undefined);\n onOpenChange?: (open: boolean) => void;\n}\n\nfunction readOption<T>(value: T | (() => T | undefined) | undefined, fallback: T): T {\n return typeof value === 'function'\n ? ((value as () => T | undefined)() ?? fallback)\n : (value ?? fallback);\n}\n\nfunction readOptional<T>(value: T | (() => T | undefined) | undefined): T | undefined {\n return typeof value === 'function' ? (value as () => T | undefined)() : value;\n}\n\nexport function useDelayedOpen(options: UseDelayedOpenOptions = {}) {\n const uncontrolledOpen = ref(false);\n let openTimer: ReturnType<typeof setTimeout> | null = null;\n\n const isOpen = computed(() => readOptional(options.open) ?? uncontrolledOpen.value);\n\n function clearTimers() {\n if (openTimer) {\n clearTimeout(openTimer);\n openTimer = null;\n }\n }\n\n function isDisabled() {\n return readOption(options.disabled, false);\n }\n\n function setOpen(nextOpen: boolean) {\n const previousOpen = isOpen.value;\n if (readOptional(options.open) === undefined) uncontrolledOpen.value = nextOpen;\n if (previousOpen !== nextOpen) options.onOpenChange?.(nextOpen);\n }\n\n function open() {\n if (isDisabled()) return;\n const delay = readOption(options.openDelay, 0);\n if (delay <= 0) {\n setOpen(true);\n return;\n }\n if (openTimer) clearTimeout(openTimer);\n openTimer = setTimeout(() => {\n setOpen(true);\n openTimer = null;\n }, delay);\n }\n\n function closeImmediate() {\n clearTimers();\n setOpen(false);\n }\n\n onBeforeUnmount(clearTimers);\n\n return {\n isOpen,\n open,\n closeImmediate,\n };\n}\n","import {\n computed,\n isRef,\n onBeforeUnmount,\n onMounted,\n ref,\n useId,\n useSlots,\n watch,\n type CSSProperties,\n} from 'vue';\nimport { useDelayedOpen } from '@/composables/useDelayedOpen';\nimport { getComponentCustomColor, isComponentPresetColor } from '@/utils/componentColors';\nimport { bem } from '@/utils/bem';\nimport type { TooltipOffset, TooltipPlacement, TooltipProps, TooltipTriggerProps } from './types';\n\ninterface TooltipPosition {\n x: number;\n y: number;\n}\n\nfunction isHTMLElement(value: unknown): value is HTMLElement {\n return typeof HTMLElement !== 'undefined' && value instanceof HTMLElement;\n}\n\nfunction getTargetPosition(rect: DOMRect, placement: TooltipPlacement): TooltipPosition {\n switch (placement) {\n case 'right':\n return { x: rect.right, y: rect.top + rect.height / 2 };\n case 'bottom':\n return { x: rect.left + rect.width / 2, y: rect.bottom };\n case 'left':\n return { x: rect.left, y: rect.top + rect.height / 2 };\n case 'top':\n default:\n return { x: rect.left + rect.width / 2, y: rect.top };\n }\n}\n\nfunction resolveOffsetStyle(offset: TooltipOffset | undefined): CSSProperties | undefined {\n if (offset == null) return undefined;\n\n if (typeof offset === 'number') {\n return {\n '--_rp-tooltip-main-axis-offset': `${offset}px`,\n };\n }\n\n const style: CSSProperties = {};\n\n if (offset.mainAxis != null) {\n style['--_rp-tooltip-main-axis-offset'] = `${offset.mainAxis}px`;\n }\n\n if (offset.crossAxis != null) {\n style['--_rp-tooltip-cross-axis-offset'] = `${offset.crossAxis}px`;\n }\n\n return Object.keys(style).length > 0 ? style : undefined;\n}\n\nfunction resolveTooltipColorStyle(color: TooltipProps['color']): CSSProperties | undefined {\n const customColor = getComponentCustomColor(color);\n if (!customColor) return undefined;\n\n return {\n '--_rp-tooltip-bg': customColor,\n '--_rp-tooltip-fg': 'var(--rp-color-on-primary)',\n };\n}\n\nexport function useTooltip(\n props: Readonly<TooltipProps>,\n emitOpenChange?: (open: boolean) => void,\n) {\n const slots = useSlots();\n const generatedId = useId();\n const targetElement = ref<HTMLElement | null>(null);\n const targetPosition = ref<TooltipPosition | null>(null);\n\n let isMounted = false;\n let removeTargetListeners: (() => void) | undefined;\n let removePositionListeners: (() => void) | undefined;\n let describedTarget: HTMLElement | null = null;\n let previousTargetDescribedby: string | null = null;\n\n const tooltipId = computed(() => props.id ?? `${generatedId}-tooltip`);\n const placement = computed(() => props.placement ?? 'top');\n const isTargetMode = computed(() => props.target != null && props.target !== '');\n const hasContent = computed(() => Boolean(props.content || slots.content));\n const isDecorative = computed(() => Boolean(props.decorative));\n const isDisabled = computed(() => Boolean(props.disabled || !hasContent.value));\n const shouldRenderContent = computed(() => !isDisabled.value);\n const shouldDescribeContent = computed(() => shouldRenderContent.value && !isDecorative.value);\n\n const { isOpen, open, closeImmediate } = useDelayedOpen({\n open: () => props.open,\n openDelay: () => props.openDelay ?? 300,\n disabled: () => isDisabled.value,\n onOpenChange: emitOpenChange,\n });\n\n const isVisible = computed(() => isOpen.value && !isDisabled.value);\n\n const rootClass = computed(() =>\n bem('rp-tooltip', {\n [`placement-${placement.value}`]: true,\n [`color-${props.color}`]: isComponentPresetColor(props.color),\n arrow: props.arrow,\n target: isTargetMode.value,\n open: isVisible.value,\n disabled: props.disabled,\n }),\n );\n\n const triggerProps = computed<TooltipTriggerProps>(() => ({\n 'aria-describedby': shouldDescribeContent.value ? tooltipId.value : undefined,\n }));\n\n const contentRole = computed(() => (isDecorative.value ? undefined : 'tooltip'));\n const contentAriaHidden = computed(() => (isDecorative.value ? 'true' : undefined));\n\n const contentStyle = computed<CSSProperties | undefined>(() => {\n const style: CSSProperties = {\n ...resolveOffsetStyle(props.offset),\n ...resolveTooltipColorStyle(props.color),\n };\n\n if (!isTargetMode.value || !targetPosition.value) {\n return Object.keys(style).length > 0 ? style : undefined;\n }\n\n return {\n ...style,\n '--_rp-tooltip-target-x': `${targetPosition.value.x}px`,\n '--_rp-tooltip-target-y': `${targetPosition.value.y}px`,\n };\n });\n\n function openTooltip() {\n open();\n }\n\n function closeTooltip() {\n closeImmediate();\n }\n\n function onKeydown(event: KeyboardEvent) {\n if (event.key === 'Escape') closeTooltip();\n }\n\n function readTarget() {\n return isRef(props.target) ? props.target.value : props.target;\n }\n\n function resolveTarget() {\n const target = readTarget();\n if (!target) return null;\n\n if (typeof target === 'string') {\n if (typeof document === 'undefined') return null;\n\n try {\n const element = document.querySelector(target);\n return isHTMLElement(element) ? element : null;\n } catch {\n return null;\n }\n }\n\n return isHTMLElement(target) ? target : null;\n }\n\n function restoreTargetDescription() {\n if (!describedTarget) return;\n\n if (previousTargetDescribedby) {\n describedTarget.setAttribute('aria-describedby', previousTargetDescribedby);\n } else {\n describedTarget.removeAttribute('aria-describedby');\n }\n\n describedTarget = null;\n previousTargetDescribedby = null;\n }\n\n function syncTargetDescription() {\n restoreTargetDescription();\n\n if (!isTargetMode.value || !shouldDescribeContent.value || !targetElement.value) return;\n\n describedTarget = targetElement.value;\n previousTargetDescribedby = describedTarget.getAttribute('aria-describedby');\n\n const ids = (previousTargetDescribedby ?? '').split(/\\s+/).filter(Boolean);\n if (!ids.includes(tooltipId.value)) ids.push(tooltipId.value);\n describedTarget.setAttribute('aria-describedby', ids.join(' '));\n }\n\n function updateTargetPosition() {\n if (!isTargetMode.value || !targetElement.value) {\n targetPosition.value = null;\n return;\n }\n\n targetPosition.value = getTargetPosition(\n targetElement.value.getBoundingClientRect(),\n placement.value,\n );\n }\n\n function onTargetOpen() {\n updateTargetPosition();\n openTooltip();\n }\n\n function bindTargetListeners(element: HTMLElement) {\n removeTargetListeners?.();\n\n element.addEventListener('mouseenter', onTargetOpen);\n element.addEventListener('mouseleave', closeTooltip);\n element.addEventListener('focusin', onTargetOpen);\n element.addEventListener('focusout', closeTooltip);\n element.addEventListener('keydown', onKeydown);\n\n removeTargetListeners = () => {\n element.removeEventListener('mouseenter', onTargetOpen);\n element.removeEventListener('mouseleave', closeTooltip);\n element.removeEventListener('focusin', onTargetOpen);\n element.removeEventListener('focusout', closeTooltip);\n element.removeEventListener('keydown', onKeydown);\n removeTargetListeners = undefined;\n };\n }\n\n function removeViewportListeners() {\n removePositionListeners?.();\n removePositionListeners = undefined;\n }\n\n function bindViewportListeners() {\n if (typeof window === 'undefined' || removePositionListeners) return;\n\n window.addEventListener('resize', updateTargetPosition);\n window.addEventListener('scroll', updateTargetPosition, true);\n\n removePositionListeners = () => {\n window.removeEventListener('resize', updateTargetPosition);\n window.removeEventListener('scroll', updateTargetPosition, true);\n };\n }\n\n function syncTarget() {\n if (!isTargetMode.value) {\n removeTargetListeners?.();\n removeViewportListeners();\n restoreTargetDescription();\n targetElement.value = null;\n targetPosition.value = null;\n return;\n }\n\n const nextTarget = resolveTarget();\n if (targetElement.value === nextTarget) {\n syncTargetDescription();\n updateTargetPosition();\n return;\n }\n\n removeTargetListeners?.();\n removeViewportListeners();\n restoreTargetDescription();\n targetElement.value = nextTarget;\n\n if (!nextTarget) {\n targetPosition.value = null;\n return;\n }\n\n bindTargetListeners(nextTarget);\n syncTargetDescription();\n updateTargetPosition();\n }\n\n watch(isDisabled, (disabled) => {\n if (disabled) closeTooltip();\n });\n\n watch(\n () => readTarget(),\n () => {\n if (isMounted) syncTarget();\n },\n { flush: 'post' },\n );\n\n watch([isTargetMode, shouldDescribeContent, tooltipId], () => {\n if (isMounted) syncTargetDescription();\n });\n\n watch([placement, isVisible], () => {\n if (isMounted && isVisible.value) updateTargetPosition();\n });\n\n watch(isVisible, (visible) => {\n if (!isMounted || !isTargetMode.value) return;\n\n if (visible) {\n updateTargetPosition();\n bindViewportListeners();\n } else {\n removeViewportListeners();\n }\n });\n\n onMounted(() => {\n isMounted = true;\n syncTarget();\n });\n\n onBeforeUnmount(() => {\n isMounted = false;\n removeTargetListeners?.();\n removeViewportListeners();\n restoreTargetDescription();\n });\n\n return {\n tooltipId,\n isOpen,\n isVisible,\n isTargetMode,\n shouldRenderContent,\n rootClass,\n triggerProps,\n contentRole,\n contentAriaHidden,\n contentStyle,\n openTooltip,\n closeTooltip,\n onKeydown,\n };\n}\n","<template>\n <span\n :class=\"rootClass\"\n @mouseenter=\"openTooltip\"\n @mouseleave=\"closeTooltip\"\n @focusin=\"openTooltip\"\n @focusout=\"closeTooltip\"\n @keydown=\"onKeydown\"\n >\n <slot v-if=\"!isTargetMode\" :trigger-props=\"triggerProps\" />\n\n <Transition name=\"rp-tooltip-content\">\n <span\n v-if=\"shouldRenderContent\"\n v-show=\"isVisible\"\n :id=\"tooltipId\"\n class=\"rp-tooltip__content\"\n :role=\"contentRole\"\n :aria-hidden=\"contentAriaHidden\"\n :style=\"contentStyle\"\n >\n <slot name=\"content\">{{ content }}</slot>\n </span>\n </Transition>\n </span>\n</template>\n\n<script lang=\"ts\" setup vapor>\nimport { useTooltip } from './useTooltip';\nimport type { TooltipProps } from './types';\n\ndefineOptions({ name: 'RpTooltip' });\n\nconst props = withDefaults(defineProps<TooltipProps>(), {\n content: '',\n placement: 'top',\n open: undefined,\n openDelay: 300,\n arrow: false,\n disabled: false,\n decorative: false,\n});\n\nconst emit = defineEmits<{\n 'update:open': [value: boolean];\n}>();\n\nconst {\n tooltipId,\n isVisible,\n isTargetMode,\n shouldRenderContent,\n rootClass,\n triggerProps,\n contentRole,\n contentAriaHidden,\n contentStyle,\n openTooltip,\n closeTooltip,\n onKeydown,\n} = useTooltip(props, (open) => {\n emit('update:open', open);\n});\n</script>\n\n<style src=\"./tooltip.scss\" lang=\"scss\" scoped></style>\n","<template>\n <span\n :class=\"rootClass\"\n @mouseenter=\"openTooltip\"\n @mouseleave=\"closeTooltip\"\n @focusin=\"openTooltip\"\n @focusout=\"closeTooltip\"\n @keydown=\"onKeydown\"\n >\n <slot v-if=\"!isTargetMode\" :trigger-props=\"triggerProps\" />\n\n <Transition name=\"rp-tooltip-content\">\n <span\n v-if=\"shouldRenderContent\"\n v-show=\"isVisible\"\n :id=\"tooltipId\"\n class=\"rp-tooltip__content\"\n :role=\"contentRole\"\n :aria-hidden=\"contentAriaHidden\"\n :style=\"contentStyle\"\n >\n <slot name=\"content\">{{ content }}</slot>\n </span>\n </Transition>\n </span>\n</template>\n\n<script lang=\"ts\" setup vapor>\nimport { useTooltip } from './useTooltip';\nimport type { TooltipProps } from './types';\n\ndefineOptions({ name: 'RpTooltip' });\n\nconst props = withDefaults(defineProps<TooltipProps>(), {\n content: '',\n placement: 'top',\n open: undefined,\n openDelay: 300,\n arrow: false,\n disabled: false,\n decorative: false,\n});\n\nconst emit = defineEmits<{\n 'update:open': [value: boolean];\n}>();\n\nconst {\n tooltipId,\n isVisible,\n isTargetMode,\n shouldRenderContent,\n rootClass,\n triggerProps,\n contentRole,\n contentAriaHidden,\n contentStyle,\n openTooltip,\n closeTooltip,\n onKeydown,\n} = useTooltip(props, (open) => {\n emit('update:open', open);\n});\n</script>\n\n<style src=\"./tooltip.scss\" lang=\"scss\" scoped></style>\n"],"mappings":"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"}
|
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
import { onBeforeUnmount, onMounted, watch } from "vue";
|
|
2
|
+
//#region src/composables/useClickOutside.ts
|
|
3
|
+
function useClickOutside(target, active, callback) {
|
|
4
|
+
let isListening = false;
|
|
5
|
+
let stopWatch;
|
|
6
|
+
function handler(e) {
|
|
7
|
+
if (target.value && !target.value.contains(e.target)) callback();
|
|
8
|
+
}
|
|
9
|
+
function setListening(value) {
|
|
10
|
+
if (typeof document === "undefined" || value === isListening) return;
|
|
11
|
+
isListening = value;
|
|
12
|
+
if (value) document.addEventListener("click", handler, true);
|
|
13
|
+
else document.removeEventListener("click", handler, true);
|
|
14
|
+
}
|
|
15
|
+
onMounted(() => {
|
|
16
|
+
stopWatch = watch(active, setListening, { immediate: true });
|
|
17
|
+
});
|
|
18
|
+
onBeforeUnmount(() => {
|
|
19
|
+
stopWatch?.();
|
|
20
|
+
setListening(false);
|
|
21
|
+
});
|
|
22
|
+
}
|
|
23
|
+
//#endregion
|
|
24
|
+
export { useClickOutside as t };
|
|
25
|
+
|
|
26
|
+
//# sourceMappingURL=useClickOutside.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"useClickOutside.js","names":[],"sources":["../src/composables/useClickOutside.ts"],"sourcesContent":["import { watch, onMounted, onBeforeUnmount, type Ref } from 'vue';\n\nexport function useClickOutside(\n target: Ref<HTMLElement | null>,\n active: Readonly<Ref<boolean>>,\n callback: () => void,\n) {\n let isListening = false;\n let stopWatch: (() => void) | undefined;\n\n function handler(e: MouseEvent) {\n if (target.value && !target.value.contains(e.target as Node)) {\n callback();\n }\n }\n\n function setListening(value: boolean) {\n if (typeof document === 'undefined' || value === isListening) return;\n isListening = value;\n\n if (value) {\n document.addEventListener('click', handler, true);\n } else {\n document.removeEventListener('click', handler, true);\n }\n }\n\n onMounted(() => {\n stopWatch = watch(active, setListening, { immediate: true });\n });\n\n onBeforeUnmount(() => {\n stopWatch?.();\n setListening(false);\n });\n}\n"],"mappings":";;AAEA,SAAgB,gBACZ,QACA,QACA,UACF;CACE,IAAI,cAAc;CAClB,IAAI;CAEJ,SAAS,QAAQ,GAAe;EAC5B,IAAI,OAAO,SAAS,CAAC,OAAO,MAAM,SAAS,EAAE,MAAc,GACvD,SAAS;CAEjB;CAEA,SAAS,aAAa,OAAgB;EAClC,IAAI,OAAO,aAAa,eAAe,UAAU,aAAa;EAC9D,cAAc;EAEd,IAAI,OACA,SAAS,iBAAiB,SAAS,SAAS,IAAI;OAEhD,SAAS,oBAAoB,SAAS,SAAS,IAAI;CAE3D;CAEA,gBAAgB;EACZ,YAAY,MAAM,QAAQ,cAAc,EAAE,WAAW,KAAK,CAAC;CAC/D,CAAC;CAED,sBAAsB;EAClB,YAAY;EACZ,aAAa,KAAK;CACtB,CAAC;AACL"}
|
|
@@ -0,0 +1,94 @@
|
|
|
1
|
+
import { t as bem } from "./bem.js";
|
|
2
|
+
import { computed, ref, toValue, useId } from "vue";
|
|
3
|
+
//#region src/components/collapse/useCollapse.ts
|
|
4
|
+
var DEFAULT_ROLE = "region";
|
|
5
|
+
function optionValue(value) {
|
|
6
|
+
return toValue(value);
|
|
7
|
+
}
|
|
8
|
+
function useCollapse(options = {}, emitOpenChange) {
|
|
9
|
+
const generatedId = useId();
|
|
10
|
+
const uncontrolledOpen = ref(Boolean(optionValue(options.defaultOpen)));
|
|
11
|
+
const id = computed(() => optionValue(options.id) ?? `${generatedId}-collapse`);
|
|
12
|
+
const controlledOpen = computed(() => optionValue(options.open));
|
|
13
|
+
const isDisabled = computed(() => Boolean(optionValue(options.disabled)));
|
|
14
|
+
const isOpen = computed(() => Boolean(controlledOpen.value ?? uncontrolledOpen.value));
|
|
15
|
+
const state = computed(() => isOpen.value ? "open" : "closed");
|
|
16
|
+
const shouldRenderContent = computed(() => !optionValue(options.unmountOnExit) || isOpen.value);
|
|
17
|
+
const rootClass = computed(() => bem("rp-collapse", {
|
|
18
|
+
open: isOpen.value,
|
|
19
|
+
closed: !isOpen.value,
|
|
20
|
+
disabled: isDisabled.value
|
|
21
|
+
}));
|
|
22
|
+
const rootProps = computed(() => ({
|
|
23
|
+
class: rootClass.value,
|
|
24
|
+
"data-state": state.value,
|
|
25
|
+
"data-disabled": isDisabled.value || void 0
|
|
26
|
+
}));
|
|
27
|
+
const contentSlotProps = computed(() => ({
|
|
28
|
+
isOpen: isOpen.value,
|
|
29
|
+
open,
|
|
30
|
+
close,
|
|
31
|
+
toggle
|
|
32
|
+
}));
|
|
33
|
+
const triggerProps = computed(() => ({
|
|
34
|
+
type: "button",
|
|
35
|
+
disabled: isDisabled.value || void 0,
|
|
36
|
+
"aria-controls": id.value,
|
|
37
|
+
"aria-expanded": isOpen.value,
|
|
38
|
+
"aria-disabled": isDisabled.value || void 0,
|
|
39
|
+
onClick: onTriggerClick
|
|
40
|
+
}));
|
|
41
|
+
const contentProps = computed(() => ({
|
|
42
|
+
class: "rp-collapse__content",
|
|
43
|
+
id: id.value,
|
|
44
|
+
role: optionValue(options.role) ?? DEFAULT_ROLE,
|
|
45
|
+
"data-state": state.value,
|
|
46
|
+
"aria-hidden": isOpen.value ? void 0 : "true",
|
|
47
|
+
"aria-label": optionValue(options.ariaLabel) || void 0,
|
|
48
|
+
"aria-labelledby": optionValue(options.ariaLabelledby) || void 0,
|
|
49
|
+
"aria-describedby": optionValue(options.ariaDescribedby) || void 0
|
|
50
|
+
}));
|
|
51
|
+
const triggerSlotProps = computed(() => ({
|
|
52
|
+
triggerProps: triggerProps.value,
|
|
53
|
+
...contentSlotProps.value
|
|
54
|
+
}));
|
|
55
|
+
function setOpen(nextOpen) {
|
|
56
|
+
if (isDisabled.value || nextOpen === isOpen.value) return;
|
|
57
|
+
if (controlledOpen.value === void 0) uncontrolledOpen.value = nextOpen;
|
|
58
|
+
options.onOpenChange?.(nextOpen);
|
|
59
|
+
emitOpenChange?.(nextOpen);
|
|
60
|
+
}
|
|
61
|
+
function open() {
|
|
62
|
+
setOpen(true);
|
|
63
|
+
}
|
|
64
|
+
function close() {
|
|
65
|
+
setOpen(false);
|
|
66
|
+
}
|
|
67
|
+
function toggle() {
|
|
68
|
+
setOpen(!isOpen.value);
|
|
69
|
+
}
|
|
70
|
+
function onTriggerClick() {
|
|
71
|
+
toggle();
|
|
72
|
+
}
|
|
73
|
+
return {
|
|
74
|
+
id,
|
|
75
|
+
state,
|
|
76
|
+
isDisabled,
|
|
77
|
+
isOpen,
|
|
78
|
+
shouldRenderContent,
|
|
79
|
+
rootClass,
|
|
80
|
+
rootProps,
|
|
81
|
+
triggerProps,
|
|
82
|
+
contentProps,
|
|
83
|
+
triggerSlotProps,
|
|
84
|
+
contentSlotProps,
|
|
85
|
+
setOpen,
|
|
86
|
+
open,
|
|
87
|
+
close,
|
|
88
|
+
toggle
|
|
89
|
+
};
|
|
90
|
+
}
|
|
91
|
+
//#endregion
|
|
92
|
+
export { useCollapse as t };
|
|
93
|
+
|
|
94
|
+
//# sourceMappingURL=useCollapse.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"useCollapse.js","names":[],"sources":["../src/components/collapse/useCollapse.ts"],"sourcesContent":["import { computed, ref, toValue, useId } from 'vue';\nimport { bem } from '@/utils/bem';\nimport type {\n CollapseContentProps,\n CollapseContentRole,\n CollapseOption,\n CollapseRootProps,\n CollapseSlotProps,\n CollapseState,\n CollapseTriggerProps,\n CollapseTriggerSlotProps,\n UseCollapseOptions,\n UseCollapseReturn,\n} from './types';\n\nconst DEFAULT_ROLE: CollapseContentRole = 'region';\n\nfunction optionValue<T>(value: CollapseOption<T | undefined> | undefined) {\n return toValue(value);\n}\n\nexport function useCollapse(\n options: Readonly<UseCollapseOptions> = {},\n emitOpenChange?: (open: boolean) => void,\n): UseCollapseReturn {\n const generatedId = useId();\n const uncontrolledOpen = ref(Boolean(optionValue<boolean>(options.defaultOpen)));\n\n const id = computed(() => optionValue<string>(options.id) ?? `${generatedId}-collapse`);\n const controlledOpen = computed(() => optionValue<boolean>(options.open));\n const isDisabled = computed(() => Boolean(optionValue<boolean>(options.disabled)));\n const isOpen = computed(() => Boolean(controlledOpen.value ?? uncontrolledOpen.value));\n const state = computed<CollapseState>(() => (isOpen.value ? 'open' : 'closed'));\n const shouldRenderContent = computed(\n () => !optionValue<boolean>(options.unmountOnExit) || isOpen.value,\n );\n\n const rootClass = computed(() =>\n bem('rp-collapse', {\n open: isOpen.value,\n closed: !isOpen.value,\n disabled: isDisabled.value,\n }),\n );\n\n const rootProps = computed<CollapseRootProps>(() => ({\n class: rootClass.value,\n 'data-state': state.value,\n 'data-disabled': isDisabled.value || undefined,\n }));\n\n const contentSlotProps = computed<CollapseSlotProps>(() => ({\n isOpen: isOpen.value,\n open,\n close,\n toggle,\n }));\n\n const triggerProps = computed<CollapseTriggerProps>(() => ({\n type: 'button',\n disabled: isDisabled.value || undefined,\n 'aria-controls': id.value,\n 'aria-expanded': isOpen.value,\n 'aria-disabled': isDisabled.value || undefined,\n onClick: onTriggerClick,\n }));\n\n const contentProps = computed<CollapseContentProps>(() => ({\n class: 'rp-collapse__content',\n id: id.value,\n role: optionValue<CollapseContentRole>(options.role) ?? DEFAULT_ROLE,\n 'data-state': state.value,\n 'aria-hidden': isOpen.value ? undefined : 'true',\n 'aria-label': optionValue<string>(options.ariaLabel) || undefined,\n 'aria-labelledby': optionValue<string>(options.ariaLabelledby) || undefined,\n 'aria-describedby': optionValue<string>(options.ariaDescribedby) || undefined,\n }));\n\n const triggerSlotProps = computed<CollapseTriggerSlotProps>(() => ({\n triggerProps: triggerProps.value,\n ...contentSlotProps.value,\n }));\n\n function setOpen(nextOpen: boolean) {\n if (isDisabled.value || nextOpen === isOpen.value) return;\n\n if (controlledOpen.value === undefined) uncontrolledOpen.value = nextOpen;\n options.onOpenChange?.(nextOpen);\n emitOpenChange?.(nextOpen);\n }\n\n function open() {\n setOpen(true);\n }\n\n function close() {\n setOpen(false);\n }\n\n function toggle() {\n setOpen(!isOpen.value);\n }\n\n function onTriggerClick() {\n toggle();\n }\n\n return {\n id,\n state,\n isDisabled,\n isOpen,\n shouldRenderContent,\n rootClass,\n rootProps,\n triggerProps,\n contentProps,\n triggerSlotProps,\n contentSlotProps,\n setOpen,\n open,\n close,\n toggle,\n };\n}\n"],"mappings":";;;AAeA,IAAM,eAAoC;AAE1C,SAAS,YAAe,OAAkD;CACtE,OAAO,QAAQ,KAAK;AACxB;AAEA,SAAgB,YACZ,UAAwC,CAAC,GACzC,gBACiB;CACjB,MAAM,cAAc,MAAM;CAC1B,MAAM,mBAAmB,IAAI,QAAQ,YAAqB,QAAQ,WAAW,CAAC,CAAC;CAE/E,MAAM,KAAK,eAAe,YAAoB,QAAQ,EAAE,KAAK,GAAG,YAAY,UAAU;CACtF,MAAM,iBAAiB,eAAe,YAAqB,QAAQ,IAAI,CAAC;CACxE,MAAM,aAAa,eAAe,QAAQ,YAAqB,QAAQ,QAAQ,CAAC,CAAC;CACjF,MAAM,SAAS,eAAe,QAAQ,eAAe,SAAS,iBAAiB,KAAK,CAAC;CACrF,MAAM,QAAQ,eAA+B,OAAO,QAAQ,SAAS,QAAS;CAC9E,MAAM,sBAAsB,eAClB,CAAC,YAAqB,QAAQ,aAAa,KAAK,OAAO,KACjE;CAEA,MAAM,YAAY,eACd,IAAI,eAAe;EACf,MAAM,OAAO;EACb,QAAQ,CAAC,OAAO;EAChB,UAAU,WAAW;CACzB,CAAC,CACL;CAEA,MAAM,YAAY,gBAAmC;EACjD,OAAO,UAAU;EACjB,cAAc,MAAM;EACpB,iBAAiB,WAAW,SAAS,KAAA;CACzC,EAAE;CAEF,MAAM,mBAAmB,gBAAmC;EACxD,QAAQ,OAAO;EACf;EACA;EACA;CACJ,EAAE;CAEF,MAAM,eAAe,gBAAsC;EACvD,MAAM;EACN,UAAU,WAAW,SAAS,KAAA;EAC9B,iBAAiB,GAAG;EACpB,iBAAiB,OAAO;EACxB,iBAAiB,WAAW,SAAS,KAAA;EACrC,SAAS;CACb,EAAE;CAEF,MAAM,eAAe,gBAAsC;EACvD,OAAO;EACP,IAAI,GAAG;EACP,MAAM,YAAiC,QAAQ,IAAI,KAAK;EACxD,cAAc,MAAM;EACpB,eAAe,OAAO,QAAQ,KAAA,IAAY;EAC1C,cAAc,YAAoB,QAAQ,SAAS,KAAK,KAAA;EACxD,mBAAmB,YAAoB,QAAQ,cAAc,KAAK,KAAA;EAClE,oBAAoB,YAAoB,QAAQ,eAAe,KAAK,KAAA;CACxE,EAAE;CAEF,MAAM,mBAAmB,gBAA0C;EAC/D,cAAc,aAAa;EAC3B,GAAG,iBAAiB;CACxB,EAAE;CAEF,SAAS,QAAQ,UAAmB;EAChC,IAAI,WAAW,SAAS,aAAa,OAAO,OAAO;EAEnD,IAAI,eAAe,UAAU,KAAA,GAAW,iBAAiB,QAAQ;EACjE,QAAQ,eAAe,QAAQ;EAC/B,iBAAiB,QAAQ;CAC7B;CAEA,SAAS,OAAO;EACZ,QAAQ,IAAI;CAChB;CAEA,SAAS,QAAQ;EACb,QAAQ,KAAK;CACjB;CAEA,SAAS,SAAS;EACd,QAAQ,CAAC,OAAO,KAAK;CACzB;CAEA,SAAS,iBAAiB;EACtB,OAAO;CACX;CAEA,OAAO;EACH;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACJ;AACJ"}
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import { inject } from "vue";
|
|
2
|
+
//#region src/composables/useRequiredInject.ts
|
|
3
|
+
function useRequiredInject(key, componentName) {
|
|
4
|
+
const value = inject(key);
|
|
5
|
+
if (value == null) throw new Error(`[Ropav] <${componentName}> must be used inside its parent provider component.`);
|
|
6
|
+
return value;
|
|
7
|
+
}
|
|
8
|
+
//#endregion
|
|
9
|
+
export { useRequiredInject as t };
|
|
10
|
+
|
|
11
|
+
//# sourceMappingURL=useRequiredInject.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"useRequiredInject.js","names":[],"sources":["../src/composables/useRequiredInject.ts"],"sourcesContent":["import { inject, type InjectionKey } from 'vue';\n\nexport function useRequiredInject<T>(key: InjectionKey<T>, componentName: string): T {\n const value = inject(key);\n if (value == null) {\n throw new Error(\n `[Ropav] <${componentName}> must be used inside its parent provider component.`,\n );\n }\n return value;\n}\n"],"mappings":";;AAEA,SAAgB,kBAAqB,KAAsB,eAA0B;CACjF,MAAM,QAAQ,OAAO,GAAG;CACxB,IAAI,SAAS,MACT,MAAM,IAAI,MACN,YAAY,cAAc,qDAC9B;CAEJ,OAAO;AACX"}
|
package/dist/x.js
ADDED
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
import { defineVaporComponent, markRaw, template } from "vue";
|
|
2
|
+
//#region ~icons/lucide/x
|
|
3
|
+
var t0 = template("<svg viewBox=\"0 0 24 24\"width=1.2em height=1.2em><path fill=none stroke=currentColor stroke-linecap=round stroke-linejoin=round stroke-width=2 d=\"M18 6L6 18M6 6l12 12\">", 3, 1);
|
|
4
|
+
function render(_ctx) {
|
|
5
|
+
return t0();
|
|
6
|
+
}
|
|
7
|
+
var x_default = markRaw(defineVaporComponent({
|
|
8
|
+
name: "lucide-x",
|
|
9
|
+
render
|
|
10
|
+
}));
|
|
11
|
+
//#endregion
|
|
12
|
+
export { x_default as t };
|
|
13
|
+
|
|
14
|
+
//# sourceMappingURL=x.js.map
|
package/dist/x.js.map
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"x.js","names":[],"sources":[],"mappings":""}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "ropav",
|
|
3
|
-
"version": "0.0.
|
|
3
|
+
"version": "0.0.7",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"packageManager": "pnpm@11.10.0",
|
|
6
6
|
"engines": {
|
|
@@ -21,6 +21,14 @@
|
|
|
21
21
|
"types": "./dist/index.d.ts",
|
|
22
22
|
"import": "./dist/index.js"
|
|
23
23
|
},
|
|
24
|
+
"./accordion": {
|
|
25
|
+
"types": "./dist/components/accordion/index.d.ts",
|
|
26
|
+
"import": "./dist/components/accordion/index.js"
|
|
27
|
+
},
|
|
28
|
+
"./badge": {
|
|
29
|
+
"types": "./dist/components/badge/index.d.ts",
|
|
30
|
+
"import": "./dist/components/badge/index.js"
|
|
31
|
+
},
|
|
24
32
|
"./button": {
|
|
25
33
|
"types": "./dist/components/button/index.d.ts",
|
|
26
34
|
"import": "./dist/components/button/index.js"
|
|
@@ -37,6 +45,14 @@
|
|
|
37
45
|
"types": "./dist/components/checkbox/index.d.ts",
|
|
38
46
|
"import": "./dist/components/checkbox/index.js"
|
|
39
47
|
},
|
|
48
|
+
"./collapse": {
|
|
49
|
+
"types": "./dist/components/collapse/index.d.ts",
|
|
50
|
+
"import": "./dist/components/collapse/index.js"
|
|
51
|
+
},
|
|
52
|
+
"./dropdown-menu": {
|
|
53
|
+
"types": "./dist/components/dropdown-menu/index.d.ts",
|
|
54
|
+
"import": "./dist/components/dropdown-menu/index.js"
|
|
55
|
+
},
|
|
40
56
|
"./field": {
|
|
41
57
|
"types": "./dist/components/field/index.d.ts",
|
|
42
58
|
"import": "./dist/components/field/index.js"
|
|
@@ -49,6 +65,18 @@
|
|
|
49
65
|
"types": "./dist/components/input/index.d.ts",
|
|
50
66
|
"import": "./dist/components/input/index.js"
|
|
51
67
|
},
|
|
68
|
+
"./modal": {
|
|
69
|
+
"types": "./dist/components/modal/index.d.ts",
|
|
70
|
+
"import": "./dist/components/modal/index.js"
|
|
71
|
+
},
|
|
72
|
+
"./overlay": {
|
|
73
|
+
"types": "./dist/components/overlay/index.d.ts",
|
|
74
|
+
"import": "./dist/components/overlay/index.js"
|
|
75
|
+
},
|
|
76
|
+
"./popover": {
|
|
77
|
+
"types": "./dist/components/popover/index.d.ts",
|
|
78
|
+
"import": "./dist/components/popover/index.js"
|
|
79
|
+
},
|
|
52
80
|
"./progress": {
|
|
53
81
|
"types": "./dist/components/progress/index.d.ts",
|
|
54
82
|
"import": "./dist/components/progress/index.js"
|
|
@@ -69,6 +97,10 @@
|
|
|
69
97
|
"types": "./dist/components/switch/index.d.ts",
|
|
70
98
|
"import": "./dist/components/switch/index.js"
|
|
71
99
|
},
|
|
100
|
+
"./tabs": {
|
|
101
|
+
"types": "./dist/components/tabs/index.d.ts",
|
|
102
|
+
"import": "./dist/components/tabs/index.js"
|
|
103
|
+
},
|
|
72
104
|
"./textarea": {
|
|
73
105
|
"types": "./dist/components/textarea/index.d.ts",
|
|
74
106
|
"import": "./dist/components/textarea/index.js"
|
|
@@ -113,7 +145,7 @@
|
|
|
113
145
|
"@storybook/vue3-vite": "^10.4.6",
|
|
114
146
|
"@types/node": "^25.9.4",
|
|
115
147
|
"@vitejs/plugin-vue": "^6.0.7",
|
|
116
|
-
"@vitest/browser-playwright": "^4.1.
|
|
148
|
+
"@vitest/browser-playwright": "^4.1.10",
|
|
117
149
|
"@vue/compiler-vapor": "3.6.0-beta.17",
|
|
118
150
|
"@vue/tsconfig": "^0.9.1",
|
|
119
151
|
"bumpp": "^11.1.0",
|
|
@@ -128,7 +160,7 @@
|
|
|
128
160
|
"unplugin-icons": "^23.0.1",
|
|
129
161
|
"vite": "^8.1.3",
|
|
130
162
|
"vite-plugin-dts": "^5.0.3",
|
|
131
|
-
"vitest": "^4.1.
|
|
163
|
+
"vitest": "^4.1.10",
|
|
132
164
|
"vue": "beta",
|
|
133
165
|
"vue-tsc": "^3.3.6"
|
|
134
166
|
},
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"_plugin-vue_export-helper.js","names":[],"sources":["../src/utils/bem.ts"],"sourcesContent":["type BemModifier = string | Record<string, boolean | undefined>;\n\nexport function bem(block: string, ...modifiers: BemModifier[]): string[] {\n const classes = [block];\n for (const mod of modifiers) {\n if (typeof mod === 'string') {\n classes.push(`${block}--${mod}`);\n } else {\n for (const [key, val] of Object.entries(mod)) {\n if (val) classes.push(`${block}--${key}`);\n }\n }\n }\n return classes;\n}\n"],"mappings":";AAEA,SAAgB,IAAI,OAAe,GAAG,WAAoC;CACtE,MAAM,UAAU,CAAC,KAAK;CACtB,KAAK,MAAM,OAAO,WACd,IAAI,OAAO,QAAQ,UACf,QAAQ,KAAK,GAAG,MAAM,IAAI,KAAK;MAE/B,KAAK,MAAM,CAAC,KAAK,QAAQ,OAAO,QAAQ,GAAG,GACvC,IAAI,KAAK,QAAQ,KAAK,GAAG,MAAM,IAAI,KAAK;CAIpD,OAAO;AACX"}
|