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

package/src/components/VvInputText/VvInputText.vue

@@ -1,18 +1,18 @@
 <script setup lang="ts">
+import type { MaskedNumberOptions } from 'imask'
 import type { InputHTMLAttributes } from 'vue'
 import { useIMask } from 'vue-imask'
-import type { MaskedNumberOptions } from 'imask'
 import HintSlotFactory from '../common/HintSlot'
-import VvIcon from '../VvIcon/VvIcon.vue'
-import { ACTION_ICONS } from '../VvIcon'
-import VvInputTextActionsFactory from '../VvInputText/VvInputTextActions'
 import VvDropdown from '../VvDropdown/VvDropdown.vue'
 import VvDropdownOption from '../VvDropdown/VvDropdownOption.vue'
+import { ACTION_ICONS } from '../VvIcon'
+import VvIcon from '../VvIcon/VvIcon.vue'
 import {
+    INPUT_TYPES,
     VvInputTextEvents,
     VvInputTextProps,
-    INPUT_TYPES,
 } from '../VvInputText'
+import VvInputTextActionsFactory from '../VvInputText/VvInputTextActions'
 
 // props, emit, slots and attrs
 const props = defineProps(VvInputTextProps)
@@ -135,9 +135,9 @@ const { el, mask, typed, masked, unmasked } = useIMask(
                     date = new Date(date)
                 }
                 localModelValue.value = `${date.getFullYear()}-${(
-						`0${
-						date.getMonth() + 1}`
-					).slice(-2)}-${(`0${date.getDate()}`).slice(-2)}`
+                    `0${
+                        date.getMonth() + 1}`
+                ).slice(-2)}-${(`0${date.getDate()}`).slice(-2)}`
                 return
             }
             if (type.value === INPUT_TYPES.DATETIME_LOCAL) {
@@ -160,11 +160,11 @@ const { el, mask, typed, masked, unmasked } = useIMask(
                     date = new Date(date)
                 }
                 localModelValue.value = `${date.getFullYear()}-${(
-						`0${
-						date.getMonth() + 1}`
-					).slice(-2)}-${(`0${date.getDate()}`).slice(-2)}T${(
-						`0${date.getHours()}`
-					).slice(-2)}:${(`0${date.getMinutes()}`).slice(-2)}`
+                    `0${
+                        date.getMonth() + 1}`
+                ).slice(-2)}-${(`0${date.getDate()}`).slice(-2)}T${(
+                    `0${date.getHours()}`
+                ).slice(-2)}:${(`0${date.getMinutes()}`).slice(-2)}`
                 return
             }
             if (!localModelValue.value && !unmasked.value) {
@@ -217,9 +217,9 @@ watch(
 
 // template refs
 const inputEl = el as Ref<HTMLInputElement>
-const innerEl = ref<HTMLInputElement>()
-const wrapperEl = ref<HTMLDivElement>()
-const dropdownEl = ref<typeof VvDropdown>()
+const innerEl = useTemplateRef<HTMLInputElement>('innerEl')
+const wrapperEl = useTemplateRef<HTMLDivElement>('wrapperEl')
+const dropdownEl = useTemplateRef<typeof VvDropdown>('dropdownEl')
 
 defineExpose({ $inner: innerEl })
 
@@ -372,9 +372,9 @@ const filteredSuggestions = computed(() => {
             suggestion =>
                 isEmpty(localModelValue.value)
                 || (`${suggestion}`
-					    .toLowerCase()
-					    .includes(`${localModelValue.value}`.toLowerCase())
-					    && suggestion !== localModelValue.value),
+                    .toLowerCase()
+                    .includes(`${localModelValue.value}`.toLowerCase())
+                    && suggestion !== localModelValue.value),
         )
         .reverse()
 })

package/src/components/VvInputText/VvInputTextActions.ts

@@ -1,9 +1,9 @@
 import type { Component } from 'vue'
+import { INPUT_TYPES, type VvInputTextPropsTypes } from '.'
 import VvIcon from '../VvIcon/VvIcon.vue'
+import VvInputClearAction from '../VvInputText/VvInputClearAction'
 import VvInputPasswordAction from '../VvInputText/VvInputPasswordAction'
 import VvInputStepAction from '../VvInputText/VvInputStepAction'
-import VvInputClearAction from '../VvInputText/VvInputClearAction'
-import { type VvInputTextPropsTypes, INPUT_TYPES } from '.'
 
 export default function VvInputTextActionsFactory(
     type: string,
@@ -69,7 +69,7 @@ export default function VvInputTextActionsFactory(
                             disabled:
 								this.isDisabled
 								|| (parentProps.max !== undefined
-								&& parentProps.modelValue === parentProps.max),
+								    && parentProps.modelValue === parentProps.max),
                             label: this.labelStepUp,
                             onStepUp,
                             onStepDown,
@@ -79,7 +79,7 @@ export default function VvInputTextActionsFactory(
                             disabled:
 								this.isDisabled
 								|| (parentProps.min !== undefined
-								&& parentProps.modelValue === parentProps.min),
+								    && parentProps.modelValue === parentProps.min),
                             label: this.labelStepDown,
                             onStepUp,
                             onStepDown,

package/src/components/VvInputText/index.ts

@@ -1,7 +1,7 @@
-import type { ExtractPropTypes, PropType } from 'vue'
 import type { FactoryOpts } from 'imask'
+import type { ExtractPropTypes, PropType } from 'vue'
 import { InputTextareaProps, StorageProps } from '../../props'
-import { type VvIconProps, ACTION_ICONS } from '../VvIcon'
+import { ACTION_ICONS, type VvIconProps } from '../VvIcon'
 
 export const INPUT_TYPES = {
     TEXT: 'text',

package/src/components/VvNav/VvNav.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
+import { VvNavEvents, VvNavProps } from '@/components/VvNav'
 import VvNavItem from './VvNavItem.vue'
-import { VvNavProps, VvNavEvents } from '@/components/VvNav'
 
 const props = defineProps(VvNavProps)
 const emit = defineEmits(VvNavEvents)

package/src/components/VvRadio/VvRadio.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
+import { useGroupProps, VvRadioEvents, VvRadioProps } from '.'
 import { HintSlotFactory } from '../common/HintSlot'
-import { VvRadioProps, VvRadioEvents, useGroupProps } from '.'
 
 // props, emit and slots
 const props = defineProps(VvRadioProps)

package/src/components/VvRadio/index.ts

@@ -1,7 +1,7 @@
 import type { ExtractPropTypes } from 'vue'
 import type { InputGroupState } from '../../types/group'
-import { CheckboxRadioProps } from '../../props'
 import { INJECTION_KEY_RADIO_GROUP } from '../../constants'
+import { CheckboxRadioProps } from '../../props'
 
 export const VvRadioProps = CheckboxRadioProps
 
@@ -18,7 +18,7 @@ export function useGroupProps(
 ) {
     const { id } = toRefs(props)
     const { group, isInGroup, getGroupOrLocalRef }
-		= useInjectedGroupState<InputGroupState>(INJECTION_KEY_RADIO_GROUP)
+		= useGroupStateInject<InputGroupState>(INJECTION_KEY_RADIO_GROUP)
 
     // global props
     const modelValue = getGroupOrLocalRef('modelValue', props, emit)

package/src/components/VvRadioGroup/VvRadioGroup.vue

@@ -1,10 +1,10 @@
 <script setup lang="ts">
 import type { Option } from '../../types/generic'
 import type { InputGroupState } from '../../types/group'
+import { VvRadioGroupEvents, VvRadioGroupProps } from '.'
 import { INJECTION_KEY_RADIO_GROUP } from '../../constants'
 import { HintSlotFactory } from '../common/HintSlot'
 import VvRadio from '../VvRadio/VvRadio.vue'
-import { VvRadioGroupProps, VvRadioGroupEvents } from '.'
 
 // props, emit and slots
 const props = defineProps(VvRadioGroupProps)
@@ -25,7 +25,7 @@ const modelValue = useVModel(props, 'modelValue', emit)
 const { disabled, readonly, vertical, valid, invalid, modifiers }
 		= toRefs(props)
 
-useProvideGroupState<InputGroupState>(INJECTION_KEY_RADIO_GROUP, {
+useGroupStateProvide<InputGroupState>(INJECTION_KEY_RADIO_GROUP, {
     modelValue,
     disabled,
     readonly,

package/src/components/VvSelect/VvSelect.vue

@@ -1,9 +1,9 @@
 <script setup lang="ts" generic="T extends string | Option">
 import type { SelectHTMLAttributes } from 'vue'
-import VvIcon from '../VvIcon/VvIcon.vue'
-import HintSlotFactory from '../common/HintSlot'
 import type { Option } from '../../types/generic'
-import { type VvSelectEmits, useVvSelectProps } from '.'
+import { useVvSelectProps, type VvSelectEmits } from '.'
+import HintSlotFactory from '../common/HintSlot'
+import VvIcon from '../VvIcon/VvIcon.vue'
 
 // props, emit and slots
 // WARNING: This is a provisiaonal implementation, it may change in the future
@@ -20,7 +20,7 @@ const propsDefaults = useDefaults<typeof VvSelectProps>(
 )
 
 // template refs
-const selectEl = ref()
+const selectEl = useTemplateRef<HTMLSelectElement>('selectEl')
 
 // hint
 const {
@@ -72,8 +72,8 @@ const localModelValue = computed({
     set: (newValue) => {
         if (Array.isArray(newValue)) {
             newValue = newValue.filter(item => item !== undefined)
-            if (newValue.length === 0 && !props.unselectable) {
-                selectEl.value.value = props.modelValue
+            if (newValue.length === 0 && !props.unselectable && selectEl.value) {
+                selectEl.value.value = String(props.modelValue)
                 return
             }
         }

package/src/components/VvSelect/index.ts

@@ -1,23 +1,23 @@
 import type { MaybeElement } from '@vueuse/core'
+import type { Option } from '../../types/generic'
 import {
-    ValidProps,
-    InvalidProps,
-    HintProps,
-    LoadingProps,
+    AutocompleteProps,
+    AutofocusProps,
     DisabledProps,
-    ReadonlyProps,
-    ModifiersProps,
-    TabindexProps,
-    OptionsProps,
+    FloatingLabelProps,
+    HintProps,
     IconProps,
     IdNameProps,
-    FloatingLabelProps,
-    AutofocusProps,
-    AutocompleteProps,
+    InvalidProps,
     LabelProps,
+    LoadingProps,
+    ModifiersProps,
+    OptionsProps,
+    ReadonlyProps,
+    TabindexProps,
     UnselectableProps,
+    ValidProps,
 } from '../../props'
-import type { Option } from '../../types/generic'
 
 export type VvSelectEmits = {
     'update:modelValue': [any]

package/src/components/VvTab/VvTab.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import { VvTabProps, VvTabEvents } from '@/components/VvTab'
-import VvNav from '@/components/VvNav/VvNav.vue'
 import type { NavItemTab } from '@/types/nav'
+import VvNav from '@/components/VvNav/VvNav.vue'
+import { VvTabEvents, VvTabProps } from '@/components/VvTab'
 
 const props = defineProps(VvTabProps)
 const emit = defineEmits(VvTabEvents)

package/src/components/VvTab/index.ts

@@ -1,5 +1,5 @@
-import { ModifiersProps } from '@/props'
 import type { NavItemTab } from '@/types/nav'
+import { ModifiersProps } from '@/props'
 
 export const VvTabProps = {
     ...ModifiersProps,

package/src/components/VvTextarea/VvTextarea.vue

@@ -1,8 +1,8 @@
 <script setup lang="ts">
 import type { TextareaHTMLAttributes } from 'vue'
+import { VvTextareaEvents, VvTextareaProps } from '.'
 import HintSlotFactory from '../common/HintSlot'
 import VvIcon from '../VvIcon/VvIcon.vue'
-import { VvTextareaProps, VvTextareaEvents } from '.'
 
 // props, emit and slots
 const props = defineProps(VvTextareaProps)

package/src/components/common/HintSlot.ts

@@ -1,4 +1,4 @@
-import type { ExtractPropTypes, Slots, Ref } from 'vue'
+import type { ExtractPropTypes, Ref, Slots } from 'vue'
 
 /**
  * Merge array of string
@@ -14,18 +14,18 @@ function joinLines(items: string[] | string | unknown[] | undefined) {
 
 export type HintSlotProps = Readonly<
     ExtractPropTypes<{
-	    hintLabel: {
-	        type: StringConstructor
-	        default: ''
-	        required: true
-	    }
-	    modelValue: unknown
-	    valid: BooleanConstructor
-	    validLabel: (StringConstructor | ArrayConstructor)[]
-	    invalid: BooleanConstructor
-	    invalidLabel: (StringConstructor | ArrayConstructor)[]
-	    loading: BooleanConstructor
-	    loadingLabel: StringConstructor
+        hintLabel: {
+            type: StringConstructor
+            default: ''
+            required: true
+        }
+        modelValue: unknown
+        valid: BooleanConstructor
+        validLabel: (StringConstructor | ArrayConstructor)[]
+        invalid: BooleanConstructor
+        invalidLabel: (StringConstructor | ArrayConstructor)[]
+        loading: BooleanConstructor
+        loadingLabel: StringConstructor
     }>
 >
 
@@ -60,7 +60,7 @@ export function HintSlotFactory(
         () =>
             !hasLoadingLabelOrSlot.value
             && Boolean(
-			    props.value.invalid && (slots.invalid || invalidLabel.value),
+                props.value.invalid && (slots.invalid || invalidLabel.value),
             ),
     )
     const hasValidLabelOrSlot = computed(

package/src/components/index.ts

@@ -20,6 +20,7 @@ export { default as VvDropdownItem } from './VvDropdown/VvDropdownItem.vue'
 export { default as VvDropdownOptgroup } from './VvDropdown/VvDropdownOptgroup.vue'
 export { default as VvDropdownOption } from './VvDropdown/VvDropdownOption.vue'
 export { default as VvIcon } from './VvIcon/VvIcon.vue'
+export { default as VvInputFile } from './VvInputFile/VvInputFile.vue'
 export { default as VvInputText } from './VvInputText/VvInputText.vue'
 export { default as VvNav } from './VvNav/VvNav.vue'
 export { default as VvNavItem } from './VvNav/VvNavItem.vue'
@@ -31,4 +32,3 @@ export { default as VvSelect } from './VvSelect/VvSelect.vue'
 export { default as VvTab } from './VvTab/VvTab.vue'
 export { default as VvTextarea } from './VvTextarea/VvTextarea.vue'
 export { default as VvTooltip } from './VvTooltip/VvTooltip.vue'
-export { default as VvInputFile } from './VvInputFile/VvInputFile.vue'

package/src/composables/alert/useAlert.ts

@@ -1,12 +1,12 @@
+import type { Alert } from '@/types/alert'
 import {
     DEFAULT_ALERT_AUTO_CLOSE,
     DEFAULT_ALERT_DISMISSABLE,
     DEFAULT_ALERT_GROUP,
-    DEFAULT_ALERT_MODIFIERS,
     DEFAULT_ALERT_INFO_ICON,
+    DEFAULT_ALERT_MODIFIERS,
     DefaultAlertIconMap,
 } from '@/constants'
-import type { Alert } from '@/types/alert'
 
 type AlertInGroup = Alert & { timestamp: number, group: string }
 

package/src/composables/alert/{useProvideAlert.ts → useAlertProvide.ts}

@@ -1,12 +1,12 @@
 import type { Ref } from 'vue'
-import mitt from 'mitt'
 import { INJECTION_KEY_ALERT_GROUP } from '@/constants'
+import mitt from 'mitt'
 
 /**
  * Share the alert group name with all its children.
  * @param {Ref<string | undefined>} name the alert group name
  */
-export function useProvideAlertGroup({
+export function useAlertProvideGroup({
     name,
 }: {
     name: Ref<string | undefined>

package/src/composables/dropdown/useDropdownContextmenu.ts

@@ -0,0 +1,22 @@
+import type VvDropdown from '@/components/VvDropdown/VvDropdown.vue'
+import { computed, getCurrentInstance, onMounted, onUnmounted, type Ref, unref } from 'vue'
+
+export function useDropdownContextmenu(dropdownEl: Ref<typeof VvDropdown>, targetEl?: Ref<HTMLElement> | HTMLElement) {
+    const { x, y, getBoundingClientRect, onScroll } = useDropdownVirtualElement(dropdownEl)
+    const onContextmenu = (event: MouseEvent) => {
+        x.value = event.clientX
+        y.value = event.clientY
+        event.preventDefault()
+        dropdownEl.value.show()
+    }
+    const target = computed(() => unref(targetEl))
+    if (target && getCurrentInstance()) {
+        onMounted(() => {
+            target.value?.addEventListener('contextmenu', onContextmenu, false)
+        })
+        onUnmounted(() => {
+            target.value?.removeEventListener('contextmenu', onContextmenu)
+        })
+    }
+    return { x, y, getBoundingClientRect, onContextmenu, onScroll }
+}

package/src/composables/dropdown/{useProvideDropdown.ts → useDropdownProvide.ts}

@@ -1,26 +1,26 @@
-import { type Ref, Fragment } from 'vue'
 import mitt from 'mitt'
+import { Fragment, type Ref } from 'vue'
 import {
+    ActionRoles,
+    DropdownItemRole,
     type DropdownItemState,
-    INJECTION_KEY_DROPDOWN_TRIGGER,
+    DropdownRole,
     INJECTION_KEY_DROPDOWN_ACTION,
     INJECTION_KEY_DROPDOWN_ITEM,
-    DropdownRole,
-    DropdownItemRole,
-    ActionRoles,
+    INJECTION_KEY_DROPDOWN_TRIGGER,
 } from '../../constants'
 
 /**
  * Share the dropdown reference and the event bus with all its children.
  * @param {Ref<HTMLElement | null>} reference the dropdown reference
  */
-export function useProvideDropdownTrigger({
+export function useDropdownProvideTrigger({
     reference,
     id,
     expanded,
     aria,
 }: {
-    reference: Ref<HTMLElement | null>
+    reference: Ref<HTMLElement | null | undefined>
     id: Ref<string | number>
     expanded: Ref<boolean>
     aria: Ref<{
@@ -60,7 +60,7 @@ export function useProvideDropdownTrigger({
  * Share the dropdown item role with all its children.
  * @param {Ref<string>} role the dropdown item role
  */
-export function useProvideDropdownItem({
+export function useDropdownProvideItem({
     role,
     ...others
 }: Omit<DropdownItemState, 'role'> & {
@@ -82,7 +82,7 @@ export function useProvideDropdownItem({
  * Share the dropdown item role with all its children.
  * @param {Ref<string>} role the dropdown item role
  */
-export function useProvideDropdownAction({
+export function useDropdownProvideAction({
     expanded,
 }: {
     expanded?: Ref<boolean>

package/src/composables/dropdown/useDropdownVirtualElement.ts

@@ -0,0 +1,53 @@
+import type VvDropdown from '@/components/VvDropdown/VvDropdown.vue'
+import { onMounted, type Ref, ref } from 'vue'
+
+export function useDropdownVirtualElement(dropdownEl: Ref<typeof VvDropdown>) {
+    const x = ref(0)
+    const y = ref(0)
+
+    const scrollContainerEl = ref<HTMLElement>()
+    let scrollXDelta = 0
+    let scrollYDelta = 0
+    let lastScrollTop = 0
+    let lastScrollLeft = 0
+    const onScroll = (event: HTMLElementEventMap['scroll']) => {
+        const scrollEl = event.target as HTMLElement
+        scrollXDelta = scrollEl.scrollLeft - lastScrollLeft
+        scrollYDelta = scrollEl.scrollTop - lastScrollTop
+        y.value = y.value - scrollYDelta
+        x.value = x.value - scrollXDelta
+        lastScrollLeft = scrollEl.scrollLeft
+        lastScrollTop = scrollEl.scrollTop
+    }
+    const getBoundingClientRect = () => ({
+        width: 0,
+        height: 0,
+        x: x.value,
+        y: y.value,
+        top: y.value,
+        left: x.value,
+        right: x.value,
+        bottom: y.value,
+    })
+
+    if (getCurrentInstance()) {
+        onMounted(() => {
+            if (dropdownEl.value) {
+                dropdownEl.value.init({
+                    getBoundingClientRect,
+                })
+                scrollContainerEl.value = findScrollContainer(dropdownEl.value.$el)
+                if (scrollContainerEl.value) {
+                    scrollContainerEl.value.addEventListener('scroll', onScroll)
+                }
+            }
+        })
+
+        onUnmounted(() => {
+            if (scrollContainerEl.value) {
+                scrollContainerEl.value.removeEventListener('scroll', onScroll)
+            }
+        })
+    }
+    return { x, y, getBoundingClientRect, onScroll }
+}

package/src/composables/group/{useInjectedGroupState.ts → useGroupStateInject.ts}

@@ -1,9 +1,9 @@
-import type { Ref, InjectionKey } from 'vue'
+import type { InjectionKey, Ref } from 'vue'
 
 /**
  * Injects a group state
  */
-export function useInjectedGroupState<GroupStateType>(
+export function useGroupStateInject<GroupStateType>(
     groupKey: InjectionKey<GroupStateType>,
 ) {
     // Get group state

package/src/composables/group/{useProvideGroupState.ts → useGroupStateProvide.ts}

@@ -1,10 +1,10 @@
-import type { Ref, InjectionKey } from 'vue'
 import type { Emitter } from 'mitt'
+import type { InjectionKey, Ref } from 'vue'
 
 /**
  * Share part of the state of the component with all its children.
  */
-export function useProvideGroupState<
+export function useGroupStateProvide<
     TGroupState extends Record<
         string,
 		Ref<unknown> | Emitter<any>

package/src/composables/index.ts

@@ -1,2 +1,4 @@
 export { useAlert } from './alert/useAlert'
+export { useDropdownContextmenu } from './dropdown/useDropdownContextmenu'
+export { useDropdownVirtualElement } from './dropdown/useDropdownVirtualElement'
 export { useBlurhash } from './useBlurhash'

package/src/composables/useBlurhash.ts

@@ -1,7 +1,7 @@
-import { wrap } from 'comlink'
-import Pica from 'pica'
 import type { BlurhashWorkerType } from '@/types/blurhash'
 import BlurhashWorker from '@/workers/blurhash?worker&inline'
+import { wrap } from 'comlink'
+import Pica from 'pica'
 
 const remoteFunction = wrap<BlurhashWorkerType>(new BlurhashWorker())
 

package/src/composables/useOptions.ts

@@ -1,5 +1,5 @@
-import { get } from 'ts-dot-prop'
 import type { Option } from '../types/generic'
+import { get } from 'ts-dot-prop'
 
 export function useOptions(props: any) {
     const { options, labelKey, valueKey, disabledKey } = toRefs(props)

package/src/composables/usePersistence.ts

@@ -1,6 +1,6 @@
 import type { Ref } from 'vue'
-import { computed, isRef, ref, unref, watch } from 'vue'
 import { StorageType } from '@/constants'
+import { computed, isRef, ref, unref, watch } from 'vue'
 
 export function usePersistence<T>(storageKey: Ref<string | undefined> | undefined,	storageType: Ref<`${StorageType}`> | `${StorageType}` = StorageType.local,	defaultValue?: T) {
     const localValue: Ref<T | undefined> = ref()

package/src/composables/useTextCount.ts

@@ -35,8 +35,8 @@ export function useTextCount(
 
         if (options?.mode === 'limit' && options?.upperLimit) {
             return `${length.value} / ${
-				options.lowerLimit ? `${options.lowerLimit}-` : ''
-			}${options.upperLimit}`
+                options.lowerLimit ? `${options.lowerLimit}-` : ''
+            }${options.upperLimit}`
         }
 
         if (options?.mode === 'countdown') {

package/src/composables/useUniqueId.ts

@@ -1,6 +1,5 @@
-import { uid } from 'uid'
-import type { Ref } from 'vue'
+import { type Ref, useId } from 'vue'
 
 export function useUniqueId(id?: Ref<string | number | undefined>) {
-    return computed(() => String(id?.value || uid()))
+    return computed(() => String(id?.value || useId()))
 }

package/src/constants.ts

@@ -1,13 +1,13 @@
-import type { InjectionKey, Ref } from 'vue'
 import type { Emitter } from 'mitt'
-import type { Volver } from './Volver'
+import type { InjectionKey, Ref } from 'vue'
 import type {
     AccordionGroupState,
-    InputGroupState,
-    ButtonGroupState,
     AlertGroupState,
     AlertModifier,
+    ButtonGroupState,
+    InputGroupState,
 } from './types'
+import type { Volver } from './Volver'
 
 export const DEFAULT_ICONIFY_PROVIDER = 'vv'
 
@@ -98,7 +98,7 @@ export const INJECTION_KEY_ACCORDION_GROUP = Symbol.for(
 // dropdown
 export type DropdownTriggerState = {
     id?: Ref<string | number>
-    reference?: Ref<HTMLElement | null>
+    reference?: Ref<HTMLElement | null | undefined>
     bus?: Emitter<{
         click: Event
         mouseover: Event

package/src/directives/index.ts

@@ -1,4 +1,4 @@
-import vTooltip from '../directives/v-tooltip'
 import vContextmenu from '../directives/v-contextmenu'
+import vTooltip from '../directives/v-tooltip'
 
-export { vTooltip, vContextmenu }
+export { vContextmenu, vTooltip }