@volverjs/ui-vue 0.0.10-beta.5 → 0.0.10-beta.51

package/src/constants.ts

@@ -1,121 +1,142 @@
-import type { InjectionKey, Ref } from 'vue'
 import type { Emitter } from 'mitt'
+import type { InjectionKey, Ref } from 'vue'
+import type {
+    AccordionGroupState,
+    AlertGroupState,
+    AlertModifier,
+    ButtonGroupState,
+    InputGroupState,
+} from './types'
 import type { Volver } from './Volver'
-import type { AlertModifiers } from './types/alert'
 
 export const DEFAULT_ICONIFY_PROVIDER = 'vv'
 
+export enum StorageType {
+    local = 'local',
+    session = 'session',
+}
+
 export enum Strategy {
-	absolute = 'absolute',
-	fixed = 'fixed',
+    absolute = 'absolute',
+    fixed = 'fixed',
 }
 
 export enum Side {
-	left = 'left',
-	right = 'right',
-	top = 'top',
-	bottom = 'bottom',
+    left = 'left',
+    right = 'right',
+    top = 'top',
+    bottom = 'bottom',
 }
 
 export enum Placement {
-	topStart = 'top-start',
-	topEnd = 'top-end',
-	bottomStart = 'bottom-start',
-	bottomEnd = 'bottom-end',
-	leftStart = 'left-start',
-	leftEnd = 'left-end',
-	rightStart = 'right-start',
-	rightEnd = 'right-end',
+    topStart = 'top-start',
+    topEnd = 'top-end',
+    bottomStart = 'bottom-start',
+    bottomEnd = 'bottom-end',
+    leftStart = 'left-start',
+    leftEnd = 'left-end',
+    rightStart = 'right-start',
+    rightEnd = 'right-end',
 }
 
 export enum Position {
-	before = 'before',
-	after = 'after',
+    before = 'before',
+    after = 'after',
 }
 
 export enum ButtonType {
-	button = 'button',
-	submit = 'submit',
-	reset = 'reset',
+    button = 'button',
+    submit = 'submit',
+    reset = 'reset',
 }
 
 export enum ActionTag {
-	nuxtLink = 'nuxt-link',
-	routerLink = 'router-link',
-	a = 'a',
-	button = 'button',
+    nuxtLink = 'nuxt-link',
+    routerLink = 'router-link',
+    a = 'a',
+    button = 'button',
 }
 
 export enum ActionRoles {
-	button = 'button',
-	link = 'link',
-	menuitem = 'menuitem',
+    button = 'button',
+    link = 'link',
+    menuitem = 'menuitem',
 }
 
 export enum DropdownRole {
-	listbox = 'listbox',
-	menu = 'menu',
+    listbox = 'listbox',
+    menu = 'menu',
 }
 
 export enum DropdownItemRole {
-	option = 'option',
-	presentation = 'presentation',
+    option = 'option',
+    presentation = 'presentation',
 }
 
-export enum AnchorTarget {
-	_blank = '_blank',
-	_self = '_self',
-	_parent = '_parent',
-	_top = '_top',
+export enum AlertRole {
+    alert = 'alert',
+    alertdialog = 'alertdialog',
 }
 
 // volver
 export const INJECTION_KEY_VOLVER = Symbol.for('volver') as InjectionKey<Volver>
 
 // groups
-export const INJECTION_KEY_BUTTON_GROUP = Symbol.for('buttonGroup')
-export const INJECTION_KEY_RADIO_GROUP = Symbol.for('radioGroup')
-export const INJECTION_KEY_CHECK_GROUP = Symbol.for('checkGroup')
-export const INJECTION_KEY_ACCORDION_GROUP = Symbol.for('accordionGroup')
+export const INJECTION_KEY_BUTTON_GROUP = Symbol.for(
+    'buttonGroup',
+) as InjectionKey<ButtonGroupState>
+export const INJECTION_KEY_RADIO_GROUP = Symbol.for(
+    'radioGroup',
+) as InjectionKey<InputGroupState>
+export const INJECTION_KEY_CHECK_GROUP = Symbol.for(
+    'checkGroup',
+) as InjectionKey<InputGroupState>
+export const INJECTION_KEY_ACCORDION_GROUP = Symbol.for(
+    'accordionGroup',
+) as InjectionKey<AccordionGroupState>
 
 // dropdown
+export type DropdownTriggerState = {
+    id?: Ref<string | number>
+    reference?: Ref<HTMLElement | null | undefined>
+    bus?: Emitter<{
+        click: Event
+        mouseover: Event
+        mouseleave: Event
+    }>
+    expanded?: Ref<boolean>
+    aria?: Ref<{
+        'aria-controls': string
+        'aria-haspopup': boolean
+        'aria-expanded': boolean
+    }>
+}
 export const INJECTION_KEY_DROPDOWN_TRIGGER = Symbol.for(
-	'dropdownTrigger',
-) as InjectionKey<{
-	id?: Ref<string | number>
-	reference?: Ref<HTMLElement | null>
-	bus?: Emitter<{
-		click: Event
-		mouseover: Event
-		mouseleave: Event
-	}>
-	expanded?: Ref<boolean>
-	aria?: Ref<{
-		'aria-controls': string
-		'aria-haspopup': boolean
-		'aria-expanded': boolean
-	}>
-}>
+    'dropdownTrigger',
+) as InjectionKey<DropdownTriggerState>
+
+export type DropdownItemState = {
+    role?: Ref<`${DropdownItemRole}`>
+    expanded?: Ref<boolean>
+    focused?: Ref<boolean>
+    hovered?: Ref<boolean>
+}
 export const INJECTION_KEY_DROPDOWN_ITEM = Symbol.for(
-	'dropdownItem',
-) as InjectionKey<{
-	role?: Ref<`${DropdownItemRole}`>
-	expanded?: Ref<boolean>
-}>
+    'dropdownItem',
+) as InjectionKey<DropdownItemState>
+
+export type DropdownActionState = {
+    role?: Ref<`${ActionRoles}`>
+    expanded?: Ref<boolean>
+}
 export const INJECTION_KEY_DROPDOWN_ACTION = Symbol.for(
-	'dropdownAction',
-) as InjectionKey<{
-	role?: Ref<`${ActionRoles}`>
-	expanded?: Ref<boolean>
-}>
+    'dropdownAction',
+) as InjectionKey<DropdownActionState>
 
 // alert
 export const INJECTION_KEY_ALERT_GROUP = Symbol.for(
-	'alertGroup',
-) as InjectionKey<{
-	name?: Ref<string | undefined>
-	bus?: Emitter<{ close: string }>
-}>
+    'alertGroup',
+) as InjectionKey<AlertGroupState>
 export const DEFAULT_ALERT_AUTO_CLOSE = 10000
 export const DEFAULT_ALERT_MODIFIERS = 'info'
 export const DEFAULT_ALERT_DISMISSABLE = true
@@ -124,15 +145,9 @@ export const DEFAULT_ALERT_INFO_ICON = 'information'
 export const DEFAULT_ALERT_SUCCESS_ICON = 'check-circle'
 export const DEFAULT_ALERT_WARNING_ICON = 'warning'
 export const DEFAULT_ALERT_DANGER_ICON = 'error'
-export const DefaultAlertIconMap = new Map<AlertModifiers, string>([
-	['success', DEFAULT_ALERT_SUCCESS_ICON],
-	['info', DEFAULT_ALERT_INFO_ICON],
-	['warning', DEFAULT_ALERT_WARNING_ICON],
-	['danger', DEFAULT_ALERT_DANGER_ICON],
+export const DefaultAlertIconMap = new Map<AlertModifier, string>([
+    ['success', DEFAULT_ALERT_SUCCESS_ICON],
+    ['info', DEFAULT_ALERT_INFO_ICON],
+    ['warning', DEFAULT_ALERT_WARNING_ICON],
+    ['danger', DEFAULT_ALERT_DANGER_ICON],
 ])
-// {
-// 	success: DEFAULT_ALERT_SUCCESS_ICON,
-// 	info: DEFAULT_ALERT_INFO_ICON,
-// 	warning: DEFAULT_ALERT_WARNING_ICON,
-// 	danger: DEFAULT_ALERT_DANGER_ICON,
-// }

package/src/directives/index.ts

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

package/src/directives/v-contextmenu.ts

@@ -1,40 +1,32 @@
+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)
-		}
-		el.addEventListener(
-			'contextmenu',
-			function (ev) {
-				if (binding.value?.show) {
-					ev.preventDefault()
-					clientX.value = ev.clientX
-					clientY.value = ev.clientY
-					binding.value.show?.()
-					return false
-				}
-			},
-			false,
-		)
-	},
+    beforeUpdate(el, binding: DirectiveBinding) {
+        const { onContextmenu, onScroll, getBoundingClientRect } = useDropdownContextmenu(binding as unknown as Ref<typeof VvDropdown>)
+        binding.value.init({
+            getBoundingClientRect,
+        })
+        el.addEventListener(
+            'contextmenu',
+            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)
+        }
+    },
 }
 
 export default contextmenu

package/src/directives/v-tooltip.ts

@@ -1,15 +1,24 @@
-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 = {
-	beforeMount(el: HTMLElement, binding: DirectiveBinding) {
-		const tooltip = h(VvTooltip, {
-			value: binding.value,
-			position: binding.arg as Side,
-		})
-		render(tooltip, el)
-	},
-}
+const tooltip: Directive = (() => {
+    return {
+        beforeMount(el: HTMLElement, binding: DirectiveBinding) {
+            const tooltip = h(VvTooltip, {
+                value: binding.value,
+                position: binding.arg as Side,
+            })
+            render(tooltip, el)
+        },
+        updated(el: HTMLElement, binding: DirectiveBinding) {
+            const tooltip = h(VvTooltip, {
+                value: binding.value,
+                position: binding.arg as Side,
+            })
+            render(tooltip, el)
+        },
+    }
+})()
 
 export default tooltip

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,12 +1,14 @@
+import type { Volver, VolverOptions } from './Volver'
 import VolverPlugin from './Volver'
-import type { Volver } from './Volver'
 
 export { VolverPlugin }
+export * from './types'
+export type { Volver, VolverOptions }
 
 // https://vuejs.org/guide/typescript/options-api.html#augmenting-global-properties
 // Add custom property and extend vue type definition
 declare module 'vue' {
-	interface ComponentCustomProperties {
-		$vv?: typeof Volver.prototype
-	}
+    interface ComponentCustomProperties {
+        $vv?: typeof Volver.prototype
+    }
 }