diff --git a/lib/float/index.ts b/lib/float/index.ts index 1ef7197..31037ef 100644 --- a/lib/float/index.ts +++ b/lib/float/index.ts @@ -7,6 +7,7 @@ export { default as OuiMenu } from './oui-menu.vue' export { default as OuiMenuItems } from './oui-menu-items.vue' export { default as OuiTooltipActivator } from './oui-tooltip-activator.vue' -export { vMenu, useMenu, useMenuWithValue } from './use-menu' +export { useMenu, useMenuWithValue } from './use-menu' +export { vMenu } from './v-menu' // export { vActionToggle } from './lib' diff --git a/lib/float/use-menu.ts b/lib/float/use-menu.ts index cccab55..9e4fd2d 100644 --- a/lib/float/use-menu.ts +++ b/lib/float/use-menu.ts @@ -105,24 +105,3 @@ export function useMenuWithValue(itemsSource: OuiMenuCreator) { return (...args: any) => menu(value, ...args) } } - -// export function menuWithArgs(value: any) { -// return (...args: any) => menu(value, ...args) -// } - -/** Vue3 Directive! */ -export const vMenu = { - mounted: (element: HTMLElement, binding: DirectiveBinding) => { - log('v-menu', element, binding) - log.assert(typeof binding.value === 'function', 'v-menu requires function as argument') - element.addEventListener('contextmenu', (event: MouseEvent) => { - log('v-menu context') - event.preventDefault() // no system menu - binding.value(event, element) - }) - element.addEventListener('click', (event: MouseEvent) => { - log('v-menu click') - binding.value(event, element) - }) - }, -} diff --git a/lib/float/v-menu.ts b/lib/float/v-menu.ts new file mode 100644 index 0000000..d9082b0 --- /dev/null +++ b/lib/float/v-menu.ts @@ -0,0 +1,36 @@ +import type { DirectiveBinding } from 'vue' +import type { LoggerInterface } from 'zeed' +import { Logger } from 'zeed' + +const log: LoggerInterface = Logger('oui:v-menu') + +const menuElements = new Map() + +export const vMenu = { + updated: (element: HTMLElement, binding: DirectiveBinding) => { + // log('v-menu:updated', element, binding) + log.assert(typeof binding.value === 'function', 'v-menu requires function as argument') + menuElements.set(element, binding.value) + }, + mounted: (element: HTMLElement, binding: DirectiveBinding) => { + // log('v-menu:mounted', element, binding) + log.assert(typeof binding.value === 'function', 'v-menu requires function as argument') + + menuElements.set(element, binding.value) + element.addEventListener('contextmenu', (event: MouseEvent) => { + // log('v-menu context') + event.preventDefault() // no system menu + const fn = menuElements.get(element) + fn?.(event, element) + }) + element.addEventListener('click', (event: MouseEvent) => { + // log('v-menu click') + const fn = menuElements.get(element) + fn?.(event, element) + }) + }, + beforeUnmount: (element: HTMLElement, binding: DirectiveBinding) => { + // log('v-menu:beforeUnmount', element, binding) + menuElements.delete(element) + }, +} diff --git a/package.json b/package.json index 4dd8c00..28090b4 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "oui-kit", "type": "module", - "version": "0.10.6", + "version": "0.10.7", "author": { "name": "Dirk Holtwick", "email": "dirk.holtwick@gmail.com",