@xen-orchestra/web-core 0.7.0 → 0.8.0

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.7.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",