@volverjs/ui-vue 0.0.10-beta.47 → 0.0.10-beta.48

package/src/directives/v-contextmenu.ts

@@ -1,39 +1,31 @@
+import type VvDropdown from '@/components/VvDropdown/VvDropdown.vue'
 import type { Directive, DirectiveBinding } from 'vue'
+import { useDropdownContextmenu } from '@/composables'
 
 const contextmenu: Directive = {
-    beforeUpdate(el: HTMLElement, binding: DirectiveBinding) {
-        const clientX = ref(0)
-        const clientY = ref(0)
-        const virtualEl = {
-            getBoundingClientRect() {
-                return {
-                    width: 0,
-                    height: 0,
-                    x: clientX.value,
-                    y: clientY.value,
-                    top: clientY.value,
-                    left: clientX.value,
-                    right: clientX.value,
-                    bottom: clientY.value,
-                }
-            },
-        }
-        if (binding.value?.init) {
-            binding.value.init?.(virtualEl)
-        }
+    beforeUpdate(el, binding: DirectiveBinding) {
+        const { onContextmenu, onScroll, getBoundingClientRect } = useDropdownContextmenu(binding as unknown as Ref<typeof VvDropdown>)
+        binding.value.init({
+            getBoundingClientRect,
+        })
         el.addEventListener(
             'contextmenu',
-            (ev) => {
-                if (binding.value?.show) {
-                    ev.preventDefault()
-                    clientX.value = ev.clientX
-                    clientY.value = ev.clientY
-                    binding.value.show?.()
-                    return false
-                }
-            },
+            onContextmenu,
             false,
         )
+        const scrollContainerEl = findScrollContainer(binding.value.$el)
+        if (scrollContainerEl) {
+            scrollContainerEl.addEventListener('scroll', onScroll)
+        }
+        el.additionalData = { onContextmenu, onScroll, scrollContainerEl }
+    },
+    beforeUnmount(el) {
+        if (el?.additionalData?.onContextmenu) {
+            el.removeEventListener('contextmenu', el.additionalData.onContextmenu)
+        }
+        if (el?.additionalData?.onScroll && el?.additionalData?.scrollContainerEl) {
+            el.additionalData.scrollContainerEl.removeEventListener('scroll', el.additionalData.onScroll)
+        }
     },
 }
 

package/src/directives/v-tooltip.ts

@@ -1,6 +1,6 @@
-import { render, type Directive, type DirectiveBinding } from 'vue'
-import VvTooltip from '../components/VvTooltip/VvTooltip.vue'
 import type { Side } from '../constants'
+import { type Directive, type DirectiveBinding, render } from 'vue'
+import VvTooltip from '../components/VvTooltip/VvTooltip.vue'
 
 const tooltip: Directive = (() => {
     return {

package/src/icons.ts

@@ -1,7 +1,7 @@
-import normal from './assets/icons/normal.json'
 import detailed from './assets/icons/detailed.json'
+import normal from './assets/icons/normal.json'
 import simple from './assets/icons/simple.json'
 
 export default [normal, detailed, simple]
 
-export { normal, detailed, simple }
+export { detailed, normal, simple }

package/src/index.ts

@@ -1,5 +1,5 @@
-import VolverPlugin from './Volver'
 import type { Volver, VolverOptions } from './Volver'
+import VolverPlugin from './Volver'
 
 export { VolverPlugin }
 export * from './types'

package/src/props/index.ts

@@ -1,6 +1,4 @@
-import type { PropType } from 'vue'
-import type { Option } from '@/types/generic'
-import type { NavItem } from '@/types/nav'
+import type { VvIconProps } from '@/components/VvIcon'
 import type {
     AutoPlacementOptions,
     FlipOptions,
@@ -8,16 +6,18 @@ import type {
     ShiftOptions,
     SizeOptions,
 } from '@/types/floating-ui'
+import type { Option } from '@/types/generic'
+import type { NavItem } from '@/types/nav'
+import type { PropType } from 'vue'
 import {
+    ActionTag,
+    ButtonType,
     Placement,
-    Strategy,
     Position,
     Side,
-    ButtonType,
-    ActionTag,
     StorageType,
+    Strategy,
 } from '@/constants'
-import type { VvIconProps } from '@/components/VvIcon'
 
 export const LinkProps = {
     /**

package/src/resolvers/unplugin.ts

@@ -88,9 +88,9 @@ const getSideEffects = function (kebabName: string, importStyle?: ImportStyle) {
     if (styleNames) {
         styleNames.forEach((name) => {
             sideEffects.push(
-				`@volverjs/style/${
-					importStyle === 'scss' ? 'scss/' : ''
-				}components/${name}`,
+                `@volverjs/style/${
+                    importStyle === 'scss' ? 'scss/' : ''
+                }components/${name}`,
             )
         })
     }
@@ -121,8 +121,8 @@ export function VolverResolver({
                     return
                 }
                 const kebabName = kebabCase(name).replace(
-					`${prefix}-`,
-					`${VOLVER_PREFIX}-`,
+                    `${prefix}-`,
+                    `${VOLVER_PREFIX}-`,
                 )
 
                 if (ignore && ignore.includes(kebabName)) {

package/src/stories/Accordion/Accordion.stories.ts

@@ -1,7 +1,7 @@
 import type { Meta, StoryObj } from '@storybook/vue3'
-import { defaultTest } from './Accordion.test'
-import { defaultArgs, argTypes } from './Accordion.settings'
 import VvAccordion from '@/components/VvAccordion/VvAccordion.vue'
+import { argTypes, defaultArgs } from './Accordion.settings'
+import { defaultTest } from './Accordion.test'
 
 const meta: Meta<typeof VvAccordion> = {
     title: 'Components/Accordion',

package/src/stories/Accordion/Accordion.test.ts

@@ -1,7 +1,7 @@
-import { within } from '@storybook/test'
 import type { PlayAttributes } from '@/test/types'
 import { expect } from '@/test/expect'
 import { sleep } from '@/test/sleep'
+import { within } from '@storybook/test'
 
 export async function defaultTest({ canvasElement, args }: PlayAttributes) {
     const element = (await within(canvasElement).findByTestId(

package/src/stories/Accordion/AccordionSlots.stories.ts

@@ -1,7 +1,7 @@
 import type { Meta, StoryObj } from '@storybook/vue3'
-import { Default as AccordionDefault } from './Accordion.stories'
-import { defaultArgs } from './Accordion.settings'
 import VvAccordion from '@/components/VvAccordion/VvAccordion.vue'
+import { defaultArgs } from './Accordion.settings'
+import { Default as AccordionDefault } from './Accordion.stories'
 
 const meta: Meta<typeof VvAccordion> = {
     title: 'Components/Accordion/Slots',

package/src/stories/AccordionGroup/AccordionGroup.stories.ts

@@ -1,7 +1,7 @@
 import type { Meta, StoryObj } from '@storybook/vue3'
-import { defaultTest } from './AccordionGroup.test'
-import { defaultArgs, argTypes } from './AccordionGroup.settings'
 import VvAccordionGroup from '@/components/VvAccordionGroup/VvAccordionGroup.vue'
+import { argTypes, defaultArgs } from './AccordionGroup.settings'
+import { defaultTest } from './AccordionGroup.test'
 
 const meta: Meta<typeof VvAccordionGroup> = {
     title: 'Components/AccordionGroup',

package/src/stories/AccordionGroup/AccordionGroup.test.ts

@@ -1,7 +1,7 @@
-import { within } from '@storybook/test'
 import type { PlayAttributes } from '@/test/types'
 import { expect } from '@/test/expect'
 import { sleep } from '@/test/sleep'
+import { within } from '@storybook/test'
 
 export async function defaultTest({ canvasElement, args }: PlayAttributes) {
     const element = await within(canvasElement).findByTestId('element')

package/src/stories/AccordionGroup/AccordionGroupSlots.stories.ts

@@ -1,8 +1,8 @@
-import { defaultTest } from './AccordionGroup.test'
-import { defaultArgs, argTypes } from './AccordionGroup.settings'
-import meta, { type Story } from './AccordionGroup.stories'
 import VvAccordion from '@/components/VvAccordion/VvAccordion.vue'
 import VvAccordionGroup from '@/components/VvAccordionGroup/VvAccordionGroup.vue'
+import { argTypes, defaultArgs } from './AccordionGroup.settings'
+import meta, { type Story } from './AccordionGroup.stories'
+import { defaultTest } from './AccordionGroup.test'
 
 export default {
     ...meta,

package/src/stories/Alert/Alert.settings.ts

@@ -1,6 +1,6 @@
+import type { VvAlert } from '@/components'
 import type { ArgTypes, Meta } from '@storybook/vue3'
 import { IconArgTypes, ModifiersArgTypes } from '../argTypes'
-import type { VvAlert } from '@/components'
 
 export const defaultArgs: Meta<typeof VvAlert>['args'] = {
     title: 'Alert title!',

package/src/stories/Alert/Alert.stories.ts

@@ -1,7 +1,7 @@
 import type { Meta, StoryObj } from '@storybook/vue3'
-import { defaultTest } from './Alert.test'
-import { defaultArgs, argTypes } from './Alert.settings'
 import VvAlert from '@/components/VvAlert/VvAlert.vue'
+import { argTypes, defaultArgs } from './Alert.settings'
+import { defaultTest } from './Alert.test'
 
 const meta: Meta<typeof VvAlert> = {
     title: 'Components/Alert',

package/src/stories/Alert/Alert.test.ts

@@ -1,6 +1,6 @@
-import { within } from '@storybook/test'
 import type { PlayAttributes } from '@/test/types'
 import { expect } from '@/test/expect'
+import { within } from '@storybook/test'
 
 export async function defaultTest({ canvasElement, args }: PlayAttributes) {
     const element = await within(canvasElement).findByTestId('element')

package/src/stories/Alert/AlertModifiers.stories.ts

@@ -1,7 +1,7 @@
 import type { Meta } from '@storybook/vue3'
-import { defaultArgs, argTypes } from './Alert.settings'
-import { Default, type Story } from './Alert.stories'
 import VvAlert from '@/components/VvAlert/VvAlert.vue'
+import { argTypes, defaultArgs } from './Alert.settings'
+import { Default, type Story } from './Alert.stories'
 
 const meta: Meta<typeof VvAlert> = {
     title: 'Components/Alert/Modifiers',

package/src/stories/Alert/AlertSlots.stories.ts

@@ -1,7 +1,7 @@
 import type { Meta } from '@storybook/vue3'
-import { defaultArgs, argTypes } from './Alert.settings'
-import { Default as DefaultStory, type Story } from './Alert.stories'
 import VvAlert from '@/components/VvAlert/VvAlert.vue'
+import { argTypes, defaultArgs } from './Alert.settings'
+import { Default as DefaultStory, type Story } from './Alert.stories'
 
 const meta: Meta<typeof VvAlert> = {
     title: 'Components/Alert/Slots',

package/src/stories/AlertGroup/AlertGroup.stories.ts

@@ -1,7 +1,7 @@
 import type { Meta, StoryObj } from '@storybook/vue3'
-import { defaultTest } from './AlertGroup.test'
-import { defaultArgs, argTypes } from './AlertGroup.settings'
 import VvAlertGroup from '@/components/VvAlertGroup/VvAlertGroup.vue'
+import { argTypes, defaultArgs } from './AlertGroup.settings'
+import { defaultTest } from './AlertGroup.test'
 
 const meta: Meta<typeof VvAlertGroup> = {
     title: 'Components/AlertGroup',

package/src/stories/AlertGroup/AlertGroup.test.ts

@@ -1,6 +1,6 @@
-import { userEvent, within } from '@storybook/test'
 import type { PlayAttributes } from '@/test/types'
 import { expect } from '@/test/expect'
+import { userEvent, within } from '@storybook/test'
 
 export async function defaultTest({ canvasElement, args }: PlayAttributes) {
     const element = await within(canvasElement).findByTestId('element')
@@ -44,7 +44,7 @@ export async function defaultTest({ canvasElement, args }: PlayAttributes) {
 
     if (args.inline && args.block) {
         expect(element).toHaveClass(
-			`vv-alert-group--${args.block}-${args.inline}`,
+            `vv-alert-group--${args.block}-${args.inline}`,
         )
     }
 
@@ -77,7 +77,7 @@ export async function defaultTest({ canvasElement, args }: PlayAttributes) {
             const button = element as HTMLElement
             await userEvent.click(button)
             expect(alertGroupList.lastElementChild).toHaveClass(
-				`vv-alert--${button.id}`,
+                `vv-alert--${button.id}`,
             )
         }
     }

package/src/stories/AlertGroup/AlertGroupPosition.stories.ts

@@ -1,7 +1,7 @@
 import type { Meta } from '@storybook/vue3'
-import { defaultArgs, argTypes } from './AlertGroup.settings'
-import { Default, type Story } from './AlertGroup.stories'
 import VvAlertGroup from '@/components/VvAlertGroup/VvAlertGroup.vue'
+import { argTypes, defaultArgs } from './AlertGroup.settings'
+import { Default, type Story } from './AlertGroup.stories'
 
 const meta: Meta<typeof VvAlertGroup> = {
     title: 'Components/AlertGroup/Position',

package/src/stories/AlertGroup/AlertGroupSlots.stories.ts

@@ -1,7 +1,7 @@
 import type { Meta } from '@storybook/vue3'
-import { defaultArgs, argTypes } from './AlertGroup.settings'
-import { Default as DefaultStory, type Story } from './AlertGroup.stories'
 import VvAlertGroup from '@/components/VvAlertGroup/VvAlertGroup.vue'
+import { argTypes, defaultArgs } from './AlertGroup.settings'
+import { Default as DefaultStory, type Story } from './AlertGroup.stories'
 
 const meta: Meta<typeof VvAlertGroup> = {
     title: 'Components/AlertGroup/Slots',

package/src/stories/AlertGroup/AlertGroupWithComposable.stories.ts

@@ -1,9 +1,9 @@
 import type { Meta } from '@storybook/vue3'
-import { defaultArgs, argTypes } from './AlertGroup.settings'
-import { Default as DefaultStory, type Story } from './AlertGroup.stories'
 import VvAlertGroup from '@/components/VvAlertGroup/VvAlertGroup.vue'
 import VvButton from '@/components/VvButton/VvButton.vue'
 import { useAlert } from '@/composables/alert/useAlert'
+import { argTypes, defaultArgs } from './AlertGroup.settings'
+import { Default as DefaultStory, type Story } from './AlertGroup.stories'
 
 const meta: Meta<typeof VvAlertGroup> = {
     title: 'Composables/useAlert',

package/src/stories/Avatar/Avatar.stories.ts

@@ -1,7 +1,7 @@
 import type { Meta, StoryObj } from '@storybook/vue3'
-import { defaultTest } from '../Avatar/Avatar.test'
-import { defaultArgs, argTypes } from './Avatar.settings'
 import VvAvatar from '@/components/VvAvatar/VvAvatar.vue'
+import { defaultTest } from '../Avatar/Avatar.test'
+import { argTypes, defaultArgs } from './Avatar.settings'
 
 const meta: Meta<typeof VvAvatar> = {
     title: 'Components/Avatar',

package/src/stories/Avatar/Avatar.test.ts

@@ -1,6 +1,6 @@
-import { within } from '@storybook/test'
 import type { PlayAttributes } from '@/test/types'
 import { expect } from '@/test/expect'
+import { within } from '@storybook/test'
 
 export async function defaultTest({ canvasElement, args }: PlayAttributes) {
     const element = await within(canvasElement).findByTestId('element')

package/src/stories/Avatar/AvatarBadge.stories.ts

@@ -1,8 +1,8 @@
 // Replace vue3 with vue if you are using Storybook for Vue 2
 import type { Meta, StoryObj } from '@storybook/vue3'
-import { defaultArgs, argTypes } from './Avatar.settings'
 import VvAvatar from '@/components/VvAvatar/VvAvatar.vue'
 import VvBadge from '@/components/VvBadge/VvBadge.vue'
+import { argTypes, defaultArgs } from './Avatar.settings'
 
 const meta: Meta<typeof VvAvatar> = {
     title: 'Components/Avatar/Badge',

package/src/stories/Avatar/AvatarModifiers.stories.ts

@@ -1,7 +1,7 @@
 import type { Meta, StoryObj } from '@storybook/vue3'
-import { defaultTest } from '../Avatar/Avatar.test'
-import { defaultArgs, argTypes } from './Avatar.settings'
 import VvAvatar from '@/components/VvAvatar/VvAvatar.vue'
+import { defaultTest } from '../Avatar/Avatar.test'
+import { argTypes, defaultArgs } from './Avatar.settings'
 
 const meta: Meta<typeof VvAvatar> = {
     title: 'Components/Avatar/Modifiers',

package/src/stories/Avatar/AvatarSlots.stories.ts

@@ -1,7 +1,7 @@
 import type { Meta, StoryObj } from '@storybook/vue3'
-import { defaultTest } from '../Avatar/Avatar.test'
-import { defaultArgs, argTypes } from './Avatar.settings'
 import VvAvatar from '@/components/VvAvatar/VvAvatar.vue'
+import { defaultTest } from '../Avatar/Avatar.test'
+import { argTypes, defaultArgs } from './Avatar.settings'
 
 const meta: Meta<typeof VvAvatar> = {
     title: 'Components/Avatar/Slots',

package/src/stories/AvatarGroup/AvatarGroup.stories.ts

@@ -1,7 +1,7 @@
 import type { Meta, StoryObj } from '@storybook/vue3'
-import { defaultArgs, argTypes } from './AvatarGroup.settings'
-import { defaultTest } from './AvatarGroup.test'
 import VvAvatarGroup from '@/components/VvAvatarGroup/VvAvatarGroup.vue'
+import { argTypes, defaultArgs } from './AvatarGroup.settings'
+import { defaultTest } from './AvatarGroup.test'
 
 const meta: Meta<typeof VvAvatarGroup> = {
     title: 'Components/AvatarGroup',

package/src/stories/AvatarGroup/AvatarGroup.test.ts

@@ -1,6 +1,6 @@
-import { within } from '@storybook/test'
 import type { PlayAttributes } from '@/test/types'
 import { expect } from '@/test/expect'
+import { within } from '@storybook/test'
 
 export async function defaultTest({ canvasElement, args }: PlayAttributes) {
     const element = await within(canvasElement).findByTestId('element')

package/src/stories/AvatarGroup/AvatarGroupModifiers.stories.ts

@@ -1,7 +1,7 @@
 import type { Meta, StoryObj } from '@storybook/vue3'
-import { defaultArgs, argTypes } from './AvatarGroup.settings'
-import { Default } from './AvatarGroup.stories'
 import VvAvatarGroup from '@/components/VvAvatarGroup/VvAvatarGroup.vue'
+import { argTypes, defaultArgs } from './AvatarGroup.settings'
+import { Default } from './AvatarGroup.stories'
 
 const meta: Meta<typeof VvAvatarGroup> = {
     title: 'Components/AvatarGroup/Modifiers',

package/src/stories/AvatarGroup/AvatarGroupSlotDefault.stories.ts

@@ -1,8 +1,8 @@
 import type { Meta, StoryObj } from '@storybook/vue3'
-import { defaultArgs, argTypes } from './AvatarGroup.settings'
-import { defaultTest } from './AvatarGroup.test'
-import VvAvatarGroup from '@/components/VvAvatarGroup/VvAvatarGroup.vue'
 import VvAvatar from '@/components/VvAvatar/VvAvatar.vue'
+import VvAvatarGroup from '@/components/VvAvatarGroup/VvAvatarGroup.vue'
+import { argTypes, defaultArgs } from './AvatarGroup.settings'
+import { defaultTest } from './AvatarGroup.test'
 
 const meta: Meta<typeof VvAvatarGroup> = {
     title: 'Components/AvatarGroup/Slots',

package/src/stories/Badge/Badge.stories.ts

@@ -1,7 +1,7 @@
 import type { Meta, StoryObj } from '@storybook/vue3'
-import { defaultTest } from './Badge.test'
-import { defaultArgs, argTypes } from './Badge.settings'
 import VvBadge from '@/components/VvBadge/VvBadge.vue'
+import { argTypes, defaultArgs } from './Badge.settings'
+import { defaultTest } from './Badge.test'
 
 const meta: Meta<typeof VvBadge> = {
     title: 'Components/Badge',

package/src/stories/Badge/Badge.test.ts

@@ -1,6 +1,6 @@
-import { within } from '@storybook/test'
 import type { PlayAttributes } from '@/test/types'
 import { expect } from '@/test/expect'
+import { within } from '@storybook/test'
 
 export async function defaultTest({ canvasElement, args }: PlayAttributes) {
     const badge = await within(canvasElement).findByTestId('element')

package/src/stories/Badge/BadgeSlots.stories.ts

@@ -1,7 +1,7 @@
 import type { Meta, StoryObj } from '@storybook/vue3'
-import { defaultArgs, argTypes } from './Badge.settings'
-import { Default as DefaultStory } from './Badge.stories'
 import VvBadge from '@/components/VvBadge/VvBadge.vue'
+import { argTypes, defaultArgs } from './Badge.settings'
+import { Default as DefaultStory } from './Badge.stories'
 
 const meta: Meta<typeof VvBadge> = {
     title: 'Components/Badge/Slots',