@xen-orchestra/web-core 0.6.0 → 0.8.0

package/lib/packages/menu/base.ts

@@ -0,0 +1,26 @@
+import type { MenuAction, MenuLink, MenuRouterLink, MenuToggleTrigger, Menu } from '@core/packages/menu'
+import { computed } from 'vue'
+
+export type MenuItem = MenuAction | MenuLink | MenuRouterLink | MenuToggleTrigger
+
+export abstract class BaseItem {
+  id = Symbol('Menu Item')
+
+  protected constructor(public menu: Menu) {
+    menu.addItem(this as any)
+  }
+
+  get isActive() {
+    return computed(() => this.menu.context.activeItemId.value === this.id)
+  }
+
+  activate() {
+    this.menu.context.activeItemId.value = this.id
+  }
+
+  deactivate() {
+    if (this.isActive.value) {
+      this.menu.context.activeItemId.value = undefined
+    }
+  }
+}

package/lib/packages/menu/context.ts

@@ -0,0 +1,27 @@
+import { uniqueId } from '@core/utils/unique-id.util'
+import { useEventListener } from '@vueuse/core'
+import { type Ref, ref } from 'vue'
+
+export class MenuContext {
+  id: string
+
+  activeItemId: Ref<symbol | undefined> = ref()
+
+  constructor() {
+    this.id = uniqueId()
+
+    useEventListener(window, 'click', (event: PointerEvent) => {
+      if (this.hasSameController(event)) {
+        return
+      }
+
+      this.activeItemId.value = undefined
+    })
+  }
+
+  hasSameController(event: PointerEvent) {
+    return Array.from(window.document.querySelectorAll(`[data-menu-id="${this.id}"]`)).some(
+      el => el === event.target || event.composedPath().includes(el)
+    )
+  }
+}

package/lib/packages/menu/index.ts

@@ -0,0 +1,10 @@
+export * from './base'
+export * from './action'
+export * from './context'
+export * from './link'
+export * from './menu'
+export * from './router-link'
+export * from './structure'
+export * from './toggle'
+export * from './toggle-target'
+export * from './toggle-trigger'

package/lib/packages/menu/job.ts

@@ -0,0 +1,15 @@
+import type { Job } from '@core/packages/job'
+import { action } from '@core/packages/menu/action'
+import type { MenuLike } from '@core/packages/menu/menu'
+import { parseConfigHolder } from '@core/packages/menu/structure'
+
+export function job(job: Job<any>) {
+  return action(() => job.run(), {
+    busy: job.isRunning,
+    disabled: job.errorMessage,
+  })
+}
+
+export function useMenuJob(config: { job: Job<any>; parent: MenuLike }) {
+  return parseConfigHolder(config.parent, job(config.job))
+}

package/lib/packages/menu/link.ts

@@ -0,0 +1,56 @@
+import { BaseItem, type Menu, type MenuLike, parseConfigHolder } from '@core/packages/menu'
+import { computed, type MaybeRefOrGetter, reactive, toValue } from 'vue'
+
+export interface MenuLinkConfig {
+  href: MaybeRefOrGetter<string>
+  rel?: MaybeRefOrGetter<string>
+  target?: MaybeRefOrGetter<string>
+}
+
+export class MenuLinkConfigHolder {
+  constructor(public config: MenuLinkConfig) {}
+}
+
+export interface MenuLinkProps {
+  as: 'a'
+  href: string
+  rel: string
+  target: string
+  onClick: () => void
+  onMouseenter: () => void
+  'data-menu-id': string
+}
+
+export class MenuLink extends BaseItem {
+  constructor(
+    public menu: Menu,
+    public config: MenuLinkConfig
+  ) {
+    super(menu)
+  }
+
+  get props(): MenuLinkProps {
+    return reactive({
+      as: 'a',
+      onMouseenter: () => this.activate(),
+      onClick: () => this.deactivate(),
+      href: computed(() => toValue(this.config.href)),
+      rel: computed(() => toValue(this.config.rel) ?? 'noreferrer noopener'),
+      target: computed(() => toValue(this.config.target) ?? '_blank'),
+      'data-menu-id': this.menu.context.id,
+    })
+  }
+}
+
+export function link(href: MaybeRefOrGetter<string>, config: Omit<MenuLinkConfig, 'href'> = {}) {
+  return new MenuLinkConfigHolder({
+    ...config,
+    href,
+  })
+}
+
+export function useMenuLink(config: MenuLinkConfig & { parent: MenuLike }) {
+  const { parent, href, ...configRest } = config
+
+  return parseConfigHolder(parent, link(href, configRest))
+}

package/lib/packages/menu/menu.ts

@@ -0,0 +1,50 @@
+import {
+  MenuAction,
+  MenuContext,
+  MenuLink,
+  MenuRouterLink,
+  type MenuStructure,
+  MenuToggleTrigger,
+  type ParseStructure,
+  parseStructure,
+} from '@core/packages/menu'
+import { extendRef } from '@vueuse/core'
+import { computed, type ComputedRef, type MaybeRefOrGetter, shallowReactive, type ShallowReactive } from 'vue'
+
+export const MENU_SYMBOL = Symbol('Submenu')
+
+export type WithMenu = { [MENU_SYMBOL]: Menu }
+
+export type MenuLike = Menu | WithMenu
+
+type MenuItem = MenuAction | MenuLink | MenuRouterLink | MenuToggleTrigger
+
+export class Menu {
+  items: ShallowReactive<Map<symbol, MenuItem>> = shallowReactive(new Map())
+
+  isActive = computed(() => Array.from(this.items.values()).some(item => item.isActive.value))
+
+  constructor(public context: MenuContext) {}
+
+  addItem(item: MenuItem) {
+    this.items.set(item.id, item)
+  }
+}
+
+export function useMenu<const TStructure extends MenuStructure>(
+  structure: MaybeRefOrGetter<TStructure>
+): ComputedRef<ParseStructure<TStructure> & WithMenu> & WithMenu {
+  const context = new MenuContext()
+
+  const menu = new Menu(context)
+
+  return extendRef(
+    computed(() => {
+      return {
+        ...parseStructure(menu, structure),
+        [MENU_SYMBOL]: menu,
+      }
+    }),
+    { [MENU_SYMBOL]: menu }
+  )
+}

package/lib/packages/menu/router-link.ts

@@ -0,0 +1,51 @@
+import { BaseItem, type Menu, type MenuLike, parseConfigHolder } from '@core/packages/menu'
+import { computed, markRaw, type MaybeRefOrGetter, reactive, toValue } from 'vue'
+import { type RouteLocationRaw, RouterLink } from 'vue-router'
+
+export interface MenuRouterLinkConfig {
+  to: MaybeRefOrGetter<RouteLocationRaw>
+}
+
+export class MenuRouterLinkConfigHolder {
+  constructor(public config: MenuRouterLinkConfig) {}
+}
+
+export interface MenuRouterLinkProps {
+  as: typeof RouterLink
+  to: RouteLocationRaw
+  onClick: () => void
+  onMouseenter: () => void
+  'data-menu-id': string
+}
+
+export class MenuRouterLink extends BaseItem {
+  constructor(
+    public menu: Menu,
+    public config: MenuRouterLinkConfig
+  ) {
+    super(menu)
+  }
+
+  get props(): MenuRouterLinkProps {
+    return reactive({
+      as: markRaw(RouterLink),
+      onMouseenter: () => this.activate(),
+      onClick: () => this.deactivate(),
+      to: computed(() => toValue(this.config.to)),
+      'data-menu-id': this.menu.context.id,
+    })
+  }
+}
+
+export function routerLink(to: MaybeRefOrGetter<RouteLocationRaw>, config: Omit<MenuRouterLinkConfig, 'to'> = {}) {
+  return new MenuRouterLinkConfigHolder({
+    ...config,
+    to,
+  })
+}
+
+export function useMenuRouterLink(config: MenuRouterLinkConfig & { parent: MenuLike }) {
+  const { parent, to, ...configRest } = config
+
+  return parseConfigHolder(parent, routerLink(to, configRest))
+}

package/lib/packages/menu/structure.ts

@@ -0,0 +1,88 @@
+import {
+  Menu,
+  MENU_SYMBOL,
+  MenuAction,
+  type MenuActionProps,
+  MenuActionConfigHolder,
+  type MenuLike,
+  MenuLink,
+  type MenuLinkProps,
+  MenuLinkConfigHolder,
+  MenuRouterLink,
+  type MenuRouterLinkProps,
+  MenuRouterLinkConfigHolder,
+  type MenuToggleProps,
+  MenuToggleConfigHolder,
+  MenuToggleTarget,
+  MenuToggleTrigger,
+} from '@core/packages/menu'
+import { type MaybeRefOrGetter, toValue } from 'vue'
+
+export type MenuStructure = {
+  [K: string]: ConfigHolder
+}
+
+export type ConfigHolder =
+  | MenuActionConfigHolder
+  | MenuLinkConfigHolder
+  | MenuRouterLinkConfigHolder
+  | MenuToggleConfigHolder<any>
+
+export type ParseConfigHolder<TConfigHolder extends ConfigHolder> = TConfigHolder extends MenuActionConfigHolder
+  ? MenuActionProps
+  : TConfigHolder extends MenuLinkConfigHolder
+    ? MenuLinkProps
+    : TConfigHolder extends MenuRouterLinkConfigHolder
+      ? MenuRouterLinkProps
+      : TConfigHolder extends MenuToggleConfigHolder<infer TItems>
+        ? MenuToggleProps<TItems>
+        : never
+
+export type ParseStructure<TStructure extends MenuStructure> = {
+  [K in keyof TStructure]: ParseConfigHolder<TStructure[K]>
+}
+
+export function parseConfigHolder<TConfigHolder extends ConfigHolder>(
+  menuLike: MenuLike,
+  configHolder: TConfigHolder
+): ParseConfigHolder<TConfigHolder> {
+  const menu = menuLike instanceof Menu ? menuLike : menuLike[MENU_SYMBOL]
+
+  if (configHolder instanceof MenuActionConfigHolder) {
+    return new MenuAction(menu, configHolder.config).props as ParseConfigHolder<TConfigHolder>
+  }
+
+  if (configHolder instanceof MenuLinkConfigHolder) {
+    return new MenuLink(menu, configHolder.config).props as ParseConfigHolder<TConfigHolder>
+  }
+
+  if (configHolder instanceof MenuRouterLinkConfigHolder) {
+    return new MenuRouterLink(menu, configHolder.config).props as ParseConfigHolder<TConfigHolder>
+  }
+
+  if (configHolder instanceof MenuToggleConfigHolder) {
+    const trigger = new MenuToggleTrigger(menu, configHolder.config)
+    const target = new MenuToggleTarget(trigger, configHolder.config)
+
+    return {
+      $trigger: trigger.props,
+      $target: target.props,
+      $isOpen: trigger.isOpen,
+      [MENU_SYMBOL]: trigger.subMenu,
+      ...parseStructure(trigger.subMenu, configHolder.config.items),
+    } as ParseConfigHolder<TConfigHolder>
+  }
+
+  throw new Error('Unsupported config')
+}
+
+export function parseStructure<TStructure extends MenuStructure>(
+  menu: Menu,
+  structure: MaybeRefOrGetter<TStructure>
+): ParseStructure<TStructure> {
+  return Object.fromEntries(
+    Object.entries(toValue(structure)).map(([key, configHolder]) => {
+      return [key, parseConfigHolder(menu, configHolder)]
+    })
+  ) as ParseStructure<TStructure>
+}

package/lib/packages/menu/toggle-target.ts

@@ -0,0 +1,59 @@
+import type { MenuToggleTrigger } from '@core/packages/menu'
+import { autoUpdate, flip, type Placement, shift, useFloating, type UseFloatingReturn } from '@floating-ui/vue'
+import { unrefElement } from '@vueuse/core'
+import { computed, reactive, ref, type Ref, toValue, type UnwrapRef } from 'vue'
+
+export interface MenuToggleTargetConfig {
+  placement?: Placement
+}
+
+export interface MenuToggleTargetProps {
+  ref: (el: any) => void
+  style: {
+    display: string | undefined
+    zIndex: number
+  } & UnwrapRef<UseFloatingReturn['floatingStyles']>
+  'data-menu-id': string
+}
+
+export class MenuToggleTarget {
+  element: Ref<HTMLElement | null> = ref(null)
+
+  styles: UseFloatingReturn['floatingStyles']
+
+  constructor(
+    public trigger: MenuToggleTrigger,
+    public config: MenuToggleTargetConfig
+  ) {
+    const { floatingStyles } = useFloating(trigger.element, this.element, {
+      placement: computed(() => toValue(config.placement) ?? 'bottom-start'),
+      open: trigger.isOpen,
+      whileElementsMounted: autoUpdate,
+      middleware: [shift(), flip()],
+    })
+
+    this.styles = floatingStyles
+  }
+
+  get props(): MenuToggleTargetProps {
+    return reactive({
+      as: 'button',
+      type: 'button',
+      ref: (element: HTMLElement | null | undefined) => {
+        const newElement = unrefElement(element)
+
+        if (newElement !== this.element.value) {
+          this.element.value = newElement ?? null
+        }
+      },
+      style: computed(() => {
+        return {
+          display: this.trigger.isOpen.value ? undefined : 'none',
+          zIndex: 9999,
+          ...this.styles.value,
+        }
+      }),
+      'data-menu-id': this.trigger.menu.context.id,
+    })
+  }
+}

package/lib/packages/menu/toggle-trigger.ts

@@ -0,0 +1,72 @@
+import { BaseItem, Menu } from '@core/packages/menu'
+import { unrefElement, whenever } from '@vueuse/core'
+import { computed, type ComputedRef, type MaybeRefOrGetter, reactive, ref, type Ref, toValue } from 'vue'
+
+export interface MenuToggleTriggerConfig {
+  behavior?: MaybeRefOrGetter<'click' | 'mouseenter'>
+}
+
+export interface MenuToggleTriggerProps {
+  ref: (el: any) => void
+  as: 'button'
+  type: 'button'
+  submenu: true
+  onClick: () => void
+  onMouseenter: () => void
+  selected: boolean
+  'data-menu-id': string
+}
+
+export class MenuToggleTrigger extends BaseItem {
+  element: Ref<HTMLElement | null> = ref(null)
+
+  subMenu: Menu
+
+  isSelfOpen = ref(false)
+
+  isOpen = computed(() => this.isSelfOpen.value || this.subMenu.isActive.value)
+
+  constructor(
+    public menu: Menu,
+    public config: MenuToggleTriggerConfig
+  ) {
+    super(menu)
+    this.subMenu = new Menu(menu.context)
+
+    whenever(
+      () => !this.isActive.value && !this.subMenu.isActive.value,
+      () => {
+        this.isSelfOpen.value = false
+      }
+    )
+  }
+
+  get isActive(): ComputedRef<boolean> {
+    return computed(() => super.isActive.value || this.subMenu?.isActive.value)
+  }
+
+  get props(): MenuToggleTriggerProps {
+    return reactive({
+      ref: (element: HTMLElement | null | undefined) => {
+        const newElement = unrefElement(element)
+
+        if (newElement !== this.element.value) {
+          this.element.value = newElement ?? null
+        }
+      },
+      as: 'button',
+      type: 'button',
+      submenu: true,
+      onClick: () => (this.isSelfOpen.value = !this.isOpen.value),
+      onMouseenter: () => {
+        this.activate()
+
+        if (toValue(this.config.behavior) === 'mouseenter') {
+          this.isSelfOpen.value = true
+        }
+      },
+      selected: computed(() => this.isOpen.value),
+      'data-menu-id': this.menu.context.id,
+    })
+  }
+}

package/lib/packages/menu/toggle.ts

@@ -0,0 +1,43 @@
+import {
+  Menu,
+  MenuContext,
+  type MenuLike,
+  type MenuStructure,
+  type MenuToggleTargetConfig,
+  type MenuToggleTargetProps,
+  type MenuToggleTriggerConfig,
+  type MenuToggleTriggerProps,
+  parseConfigHolder,
+  type ParseStructure,
+  type WithMenu,
+} from '@core/packages/menu'
+import { computed, type ComputedRef, type MaybeRefOrGetter } from 'vue'
+
+export type MenuToggleConfig<TStructure extends MenuStructure> = MenuToggleTriggerConfig &
+  MenuToggleTargetConfig & {
+    items?: MaybeRefOrGetter<TStructure>
+  }
+
+export class MenuToggleConfigHolder<TStructure extends MenuStructure> {
+  constructor(public config: MenuToggleConfig<TStructure>) {}
+}
+
+export type MenuToggleProps<TStructure extends MenuStructure> = WithMenu &
+  ParseStructure<TStructure> & {
+    $trigger: MenuToggleTriggerProps
+    $target: MenuToggleTargetProps
+    $isOpen: ComputedRef<boolean>
+  }
+
+export function toggle<const TStructure extends MenuStructure>(config: MenuToggleConfig<TStructure>) {
+  return new MenuToggleConfigHolder(config)
+}
+
+export function useMenuToggle<const TStructure extends MenuStructure>(
+  config: MenuToggleConfig<TStructure> & { parent?: MenuLike } = {}
+) {
+  const { parent, ...toggleConfig } = config
+  const menu = parent ?? new Menu(new MenuContext())
+
+  return computed(() => parseConfigHolder(menu, toggle<TStructure>(toggleConfig)))
+}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@xen-orchestra/web-core",
   "type": "module",
-  "version": "0.6.0",
+  "version": "0.8.0",
   "private": false,
   "exports": {
     "./*": {
@@ -10,6 +10,7 @@
     }
   },
   "dependencies": {
+    "@floating-ui/vue": "^1.1.5",
     "@fontsource/poppins": "^5.0.14",
     "@fortawesome/fontawesome-common-types": "^6.5.1",
     "@fortawesome/free-regular-svg-icons": "^6.5.1",