@veltra/desktop 1.1.31 → 1.1.33

package/dist/style.js

@@ -30,7 +30,7 @@ import "./components/collapse/style.js";
 import "./components/select/style.js";
 import "./components/expression-editor/style.js";
 import "./components/condition-editor/style.js";
-import "./components/context-menu/style.js";
+import "./components/contextmenu/style.js";
 import "./components/date-panel/style.js";
 import "./components/date-picker/style.js";
 import "./components/date-range-picker/style.js";

package/dist/types/{context-menu.d.ts → contextmenu.d.ts}

@@ -1,24 +1,26 @@
 import { Component } from "vue";
 import { ComponentProps, DeconstructValue } from "@veltra/utils";
 
-//#region src/types/context-menu.d.ts
+//#region src/types/contextmenu.d.ts
 /**
  * 右键菜单项
  */
-interface ContextMenuItem {
+interface ContextmenuItem {
   /** 菜单名称 */
   label: string;
   /** 菜单描述 */
   description?: string;
   /** 菜单图标 */
   icon?: Component;
+  /** 子菜单 */
+  children?: ContextmenuItem[];
   /** 菜单点击时的回调 */
-  callback?: () => void | Promise<void>;
+  callback?: () => any;
   /** 是否禁用 */
   disabled?: boolean | (() => boolean);
 }
 /** 鼠标右键菜单组件属性 */
-interface ContextMenuProps extends ComponentProps {
+interface ContextmenuProps extends ComponentProps {
   /** 鼠标位置 */
   mousePosition: {
     x: number;
@@ -30,16 +32,16 @@ interface ContextMenuProps extends ComponentProps {
    */
   width?: number | string;
   /** 菜单项 */
-  menus: ContextMenuItem[] | (() => ContextMenuItem[]);
+  menus: ContextmenuItem[] | (() => ContextmenuItem[]);
 }
 /** 鼠标右键菜单组件定义的事件 */
-interface ContextMenuEmits {
+interface ContextmenuEmits {
   (e: 'destroy'): void;
 }
 /** 鼠标右键菜单组件暴露的属性和方法(组件内部使用) */
-interface _ContextMenuExposed {}
+interface _ContextmenuExposed {}
 /** 鼠标右键菜单组件暴露的属性和方法(组件外部使用, 引用的值会被自动解构) */
-type ContextMenuExposed = DeconstructValue<_ContextMenuExposed>;
+type ContextmenuExposed = DeconstructValue<_ContextmenuExposed>;
 //#endregion
-export { ContextMenuEmits, ContextMenuExposed, ContextMenuItem, ContextMenuProps, _ContextMenuExposed };
-//# sourceMappingURL=context-menu.d.ts.map
+export { ContextmenuEmits, ContextmenuExposed, ContextmenuItem, ContextmenuProps, _ContextmenuExposed };
+//# sourceMappingURL=contextmenu.d.ts.map

package/dist/types/index.d.ts

@@ -50,7 +50,7 @@ import { MenuEmits, MenuExposed, MenuItem, MenuProps, _MenuExposed } from "./men
 import { PasswordInputEmits, PasswordInputExposed, PasswordInputProps, _PasswordInputExposed } from "./password-input.js";
 import { DatePickerEmits, DatePickerExposed, DatePickerProps, _DatePickerExposed } from "./date-picker.js";
 import { DropdownEmits, DropdownExposed, DropdownProps, _DropdownExposed } from "./dropdown.js";
-import { ContextMenuEmits, ContextMenuExposed, ContextMenuItem, ContextMenuProps, _ContextMenuExposed } from "./context-menu.js";
+import { ContextmenuEmits, ContextmenuExposed, ContextmenuItem, ContextmenuProps, _ContextmenuExposed } from "./contextmenu.js";
 import { SelectEmits, SelectExposed, SelectProps, _SelectExposed } from "./select.js";
 import { RadioEmits, RadioExposed, RadioProps, _RadioExposed } from "./radio.js";
 import { CheckboxButtonEmits, CheckboxButtonProps, CheckboxEmits, CheckboxExposed, CheckboxProps } from "./checkbox.js";
@@ -81,7 +81,7 @@ export type * from "@veltra/utils";
 
 //#region src/types/index.d.ts
 declare namespace index_d_exports {
-  export { ActionEmits, ActionExposed, ActionGroupExposed, ActionGroupProps, ActionProps, AllKeys, AnimationEmits, AnimationExposed, AnimationProps, AutoCompleteEmits, AutoCompleteExposed, AutoCompleteProps, BadgeEmits, BadgeExposed, BadgeProps, BarType, BatchEditColumn, BatchEditEmits, BatchEditExposed, BatchEditFeature, BatchEditProps, BreadcrumbEmits, BreadcrumbExposed, BreadcrumbItem, BreadcrumbProps, BreadcrumbSlotScope, BreakCols, Breakpoint, ButtonEmits, ButtonExposed, ButtonProps, ButtonType, CalendarDay, CalendarEmits, CalendarExposed, CalendarMonth, CalendarProps, CalendarYear, CardActionProps, CardContentProps, CardCoverProps, CardEmits, CardExposed, CardProps, CascadeEmits, CascadeExposed, CascadeNode, CascadeProps, CheckTagEmits, CheckTagExposed, CheckTagProps, CheckboxButtonEmits, CheckboxButtonProps, CheckboxEmits, CheckboxExposed, CheckboxGroupEmits, CheckboxGroupExposed, CheckboxGroupProps, CheckboxProps, CodeEditorEmits, CodeEditorExposed, CodeEditorLang, CodeEditorProps, CollapseEmits, CollapseItemProps, CollapseModelValue, CollapseProps, CollapseValue, ConditionConnector, ConditionEditorEmits, ConditionEditorExposed, ConditionEditorProps, ConditionExpression, ConditionField, ConditionGroup, ConditionLeaf, ConditionNode, ConditionValue, ContextMenuEmits, ContextMenuExposed, ContextMenuItem, ContextMenuProps, CssTransitionEmits, CssTransitionExposed, CssTransitionProps, DataSettingConfig, DatePanelEmits, DatePanelProps, DatePickerEmits, DatePickerExposed, DatePickerProps, DateRangePickerEmits, DateRangePickerExposed, DateRangePickerProps, DialogEmits, DialogExposed, DialogProps, DrawerDirection, DrawerEmits, DrawerExposed, DrawerMode, DrawerProps, DropdownEmits, DropdownExposed, DropdownProps, EmptyEmits, EmptyExposed, EmptyProps, ExpressionEditorEmits, ExpressionEditorExposed, ExpressionEditorProps, ExpressionSelectableLevels, FileViewerEmits, FileViewerExposed, FileViewerItem, FileViewerKind, FileViewerProps, FloatButtonEmits, FloatButtonExposed, FloatButtonItem, FloatButtonProps, FormExposed, FormItemEmits, FormItemExposed, FormItemProps, FormModelField, FormModelItem, FormProps, GanttChartEmits, GanttChartExposed, GanttChartProps, GridEmits, GridExposed, GridInputEmits, GridInputExposed, GridInputProps, GridItemProps, GridProps, GroupInputEmits, GroupInputExposed, GroupInputProps, IFormModel, IconEmits, IconExposed, IconProps, InputEmits, InputExposed, InputProps, LayoutEmits, LayoutExposed, LayoutProps, ListEmits, ListExposed, ListProps, LoadingEmits, LoadingExposed, LoadingProps, LoadingType, MenuEmits, MenuExposed, MenuItem, MenuProps, Message, MessageConfirmEmits, MessageConfirmExposed, MessageConfirmProps, MessageEmits, MessageExposed, MessageInstance, MessageOptions, MessageProps, MessageType, ModelData, ModelRules, MultiAutoCompleteEmits, MultiAutoCompleteExposed, MultiAutoCompleteProps, MultiSelectEmits, MultiSelectExposed, MultiSelectProps, MultiTreeSelectEmits, MultiTreeSelectExposed, MultiTreeSelectProps, NodeRenderExposed, NodeRenderProps, NotificationEmits, NotificationExposed, NotificationProps, NumberEmits, NumberExposed, NumberInputEmits, NumberInputExposed, NumberInputProps, NumberProps, NumberRangeInputEmits, NumberRangeInputExposed, NumberRangeInputProps, NumberRangeTuple, PaginatorEmits, PaginatorExposed, PaginatorProps, PaletteColorType, PaletteEmits, PaletteExposed, PaletteHSV, PaletteProps, PaletteRGB, PanelItem, PanelType, PasswordInputEmits, PasswordInputExposed, PasswordInputProps, PopConfirmEmits, PopConfirmExposed, PopConfirmProps, PopEmits, PopExposed, PopProps, ProgressEmits, ProgressExposed, ProgressNodesEmits, ProgressNodesExposed, ProgressNodesProps, ProgressProps, QuickBatchEditEmits, QuickBatchEditExposed, QuickBatchEditProps, RadioEmits, RadioExposed, RadioGroupEmits, RadioGroupExposed, RadioGroupProps, RadioProps, RichTextEditorEmits, RichTextEditorExposed, RichTextEditorProps, RichTextFormat, ScrollEmits, ScrollExposed, ScrollPosition, ScrollProps, SelectEmits, SelectExposed, SelectProps, SliderEmits, SliderExposed, SliderProps, StepsEmits, StepsExposed, StepsProps, StepsSlotScope, SwitchEmits, SwitchExposed, SwitchProps, TabItem, TableColumn, TableColumnAlign, TableColumnNode, TableColumnRenderContext, TableColumnSlotsScope, TableEditorEmits, TableEditorExposed, TableEditorProps, TableEmits, TableExposed, TableProps, TableRow, TableRowSlotsScope, TableSummaryContext, TabsEmits, TabsExposed, TabsHorizontalEmits, TabsHorizontalExposed, TabsHorizontalProps, TabsProps, TabsVerticalEmits, TabsVerticalExposed, TabsVerticalProps, TagEmits, TagExposed, TagProps, TextEditorEmits, TextEditorExposed, TextEditorProps, TextEmits, TextExposed, TextProps, TextareaEmits, TextareaExposed, TextareaProps, ThemeExposed, ThemeProps, TipAlign, TipDirection, TipEmits, TipExposed, TipProps, ToolbarItem, TreeEmit, TreeExposed, TreeNode, TreeNodeProps, TreeProps, TreeSelectEmits, TreeSelectExposed, TreeSelectProps, UploaderEmits, UploaderExposed, UploaderProps, VariableItem, WatermarkEmits, WatermarkExposed, WatermarkProps, _ActionExposed, _ActionGroupExposed, _AnimationExposed, _AutoCompleteExposed, _BadgeExposed, _BatchEditExposed, _BreadcrumbExposed, _ButtonExposed, _CalendarExposed, _CardExposed, _CascadeExposed, _CheckTagExposed, _CodeEditorExposed, _ConditionEditorExposed, _ContextMenuExposed, _CssTransitionExposed, _DatePickerExposed, _DateRangePickerExposed, _DialogExposed, _DrawerExposed, _DropdownExposed, _EmptyExposed, _ExpressionEditorExposed, _FileViewerExposed, _FloatButtonExposed, _FormExposed, _GanttChartExposed, _GridExposed, _GridInputExposed, _GroupInputExposed, _InputExposed, _LayoutExposed, _ListExposed, _LoadingExposed, _MenuExposed, _MessageConfirmExposed, _MessageExposed, _MultiAutoCompleteExposed, _MultiSelectExposed, _MultiTreeSelectExposed, _NotificationExposed, _PaginatorExposed, _PaletteExposed, _PasswordInputExposed, _PopConfirmExposed, _PopExposed, _ProgressExposed, _ProgressNodesExposed, _QuickBatchEditExposed, _RadioExposed, _RadioGroupExposed, _RichTextEditorExposed, _ScrollExposed, _SelectExposed, _SliderExposed, _StepsExposed, _SwitchExposed, _TableEditorExposed, _TableExposed, _TabsExposed, _TabsHorizontalExposed, _TabsVerticalExposed, _TextEditorExposed, _TextExposed, _TextareaExposed, _ThemeExposed, _TipExposed, _TreeExposed, _TreeSelectExposed, _UploaderExposed, _WatermarkExposed };
+  export { ActionEmits, ActionExposed, ActionGroupExposed, ActionGroupProps, ActionProps, AllKeys, AnimationEmits, AnimationExposed, AnimationProps, AutoCompleteEmits, AutoCompleteExposed, AutoCompleteProps, BadgeEmits, BadgeExposed, BadgeProps, BarType, BatchEditColumn, BatchEditEmits, BatchEditExposed, BatchEditFeature, BatchEditProps, BreadcrumbEmits, BreadcrumbExposed, BreadcrumbItem, BreadcrumbProps, BreadcrumbSlotScope, BreakCols, Breakpoint, ButtonEmits, ButtonExposed, ButtonProps, ButtonType, CalendarDay, CalendarEmits, CalendarExposed, CalendarMonth, CalendarProps, CalendarYear, CardActionProps, CardContentProps, CardCoverProps, CardEmits, CardExposed, CardProps, CascadeEmits, CascadeExposed, CascadeNode, CascadeProps, CheckTagEmits, CheckTagExposed, CheckTagProps, CheckboxButtonEmits, CheckboxButtonProps, CheckboxEmits, CheckboxExposed, CheckboxGroupEmits, CheckboxGroupExposed, CheckboxGroupProps, CheckboxProps, CodeEditorEmits, CodeEditorExposed, CodeEditorLang, CodeEditorProps, CollapseEmits, CollapseItemProps, CollapseModelValue, CollapseProps, CollapseValue, ConditionConnector, ConditionEditorEmits, ConditionEditorExposed, ConditionEditorProps, ConditionExpression, ConditionField, ConditionGroup, ConditionLeaf, ConditionNode, ConditionValue, ContextmenuEmits, ContextmenuExposed, ContextmenuItem, ContextmenuProps, CssTransitionEmits, CssTransitionExposed, CssTransitionProps, DataSettingConfig, DatePanelEmits, DatePanelProps, DatePickerEmits, DatePickerExposed, DatePickerProps, DateRangePickerEmits, DateRangePickerExposed, DateRangePickerProps, DialogEmits, DialogExposed, DialogProps, DrawerDirection, DrawerEmits, DrawerExposed, DrawerMode, DrawerProps, DropdownEmits, DropdownExposed, DropdownProps, EmptyEmits, EmptyExposed, EmptyProps, ExpressionEditorEmits, ExpressionEditorExposed, ExpressionEditorProps, ExpressionSelectableLevels, FileViewerEmits, FileViewerExposed, FileViewerItem, FileViewerKind, FileViewerProps, FloatButtonEmits, FloatButtonExposed, FloatButtonItem, FloatButtonProps, FormExposed, FormItemEmits, FormItemExposed, FormItemProps, FormModelField, FormModelItem, FormProps, GanttChartEmits, GanttChartExposed, GanttChartProps, GridEmits, GridExposed, GridInputEmits, GridInputExposed, GridInputProps, GridItemProps, GridProps, GroupInputEmits, GroupInputExposed, GroupInputProps, IFormModel, IconEmits, IconExposed, IconProps, InputEmits, InputExposed, InputProps, LayoutEmits, LayoutExposed, LayoutProps, ListEmits, ListExposed, ListProps, LoadingEmits, LoadingExposed, LoadingProps, LoadingType, MenuEmits, MenuExposed, MenuItem, MenuProps, Message, MessageConfirmEmits, MessageConfirmExposed, MessageConfirmProps, MessageEmits, MessageExposed, MessageInstance, MessageOptions, MessageProps, MessageType, ModelData, ModelRules, MultiAutoCompleteEmits, MultiAutoCompleteExposed, MultiAutoCompleteProps, MultiSelectEmits, MultiSelectExposed, MultiSelectProps, MultiTreeSelectEmits, MultiTreeSelectExposed, MultiTreeSelectProps, NodeRenderExposed, NodeRenderProps, NotificationEmits, NotificationExposed, NotificationProps, NumberEmits, NumberExposed, NumberInputEmits, NumberInputExposed, NumberInputProps, NumberProps, NumberRangeInputEmits, NumberRangeInputExposed, NumberRangeInputProps, NumberRangeTuple, PaginatorEmits, PaginatorExposed, PaginatorProps, PaletteColorType, PaletteEmits, PaletteExposed, PaletteHSV, PaletteProps, PaletteRGB, PanelItem, PanelType, PasswordInputEmits, PasswordInputExposed, PasswordInputProps, PopConfirmEmits, PopConfirmExposed, PopConfirmProps, PopEmits, PopExposed, PopProps, ProgressEmits, ProgressExposed, ProgressNodesEmits, ProgressNodesExposed, ProgressNodesProps, ProgressProps, QuickBatchEditEmits, QuickBatchEditExposed, QuickBatchEditProps, RadioEmits, RadioExposed, RadioGroupEmits, RadioGroupExposed, RadioGroupProps, RadioProps, RichTextEditorEmits, RichTextEditorExposed, RichTextEditorProps, RichTextFormat, ScrollEmits, ScrollExposed, ScrollPosition, ScrollProps, SelectEmits, SelectExposed, SelectProps, SliderEmits, SliderExposed, SliderProps, StepsEmits, StepsExposed, StepsProps, StepsSlotScope, SwitchEmits, SwitchExposed, SwitchProps, TabItem, TableColumn, TableColumnAlign, TableColumnNode, TableColumnRenderContext, TableColumnSlotsScope, TableEditorEmits, TableEditorExposed, TableEditorProps, TableEmits, TableExposed, TableProps, TableRow, TableRowSlotsScope, TableSummaryContext, TabsEmits, TabsExposed, TabsHorizontalEmits, TabsHorizontalExposed, TabsHorizontalProps, TabsProps, TabsVerticalEmits, TabsVerticalExposed, TabsVerticalProps, TagEmits, TagExposed, TagProps, TextEditorEmits, TextEditorExposed, TextEditorProps, TextEmits, TextExposed, TextProps, TextareaEmits, TextareaExposed, TextareaProps, ThemeExposed, ThemeProps, TipAlign, TipDirection, TipEmits, TipExposed, TipProps, ToolbarItem, TreeEmit, TreeExposed, TreeNode, TreeNodeProps, TreeProps, TreeSelectEmits, TreeSelectExposed, TreeSelectProps, UploaderEmits, UploaderExposed, UploaderProps, VariableItem, WatermarkEmits, WatermarkExposed, WatermarkProps, _ActionExposed, _ActionGroupExposed, _AnimationExposed, _AutoCompleteExposed, _BadgeExposed, _BatchEditExposed, _BreadcrumbExposed, _ButtonExposed, _CalendarExposed, _CardExposed, _CascadeExposed, _CheckTagExposed, _CodeEditorExposed, _ConditionEditorExposed, _ContextmenuExposed, _CssTransitionExposed, _DatePickerExposed, _DateRangePickerExposed, _DialogExposed, _DrawerExposed, _DropdownExposed, _EmptyExposed, _ExpressionEditorExposed, _FileViewerExposed, _FloatButtonExposed, _FormExposed, _GanttChartExposed, _GridExposed, _GridInputExposed, _GroupInputExposed, _InputExposed, _LayoutExposed, _ListExposed, _LoadingExposed, _MenuExposed, _MessageConfirmExposed, _MessageExposed, _MultiAutoCompleteExposed, _MultiSelectExposed, _MultiTreeSelectExposed, _NotificationExposed, _PaginatorExposed, _PaletteExposed, _PasswordInputExposed, _PopConfirmExposed, _PopExposed, _ProgressExposed, _ProgressNodesExposed, _QuickBatchEditExposed, _RadioExposed, _RadioGroupExposed, _RichTextEditorExposed, _ScrollExposed, _SelectExposed, _SliderExposed, _StepsExposed, _SwitchExposed, _TableEditorExposed, _TableExposed, _TabsExposed, _TabsHorizontalExposed, _TabsVerticalExposed, _TextEditorExposed, _TextExposed, _TextareaExposed, _ThemeExposed, _TipExposed, _TreeExposed, _TreeSelectExposed, _UploaderExposed, _WatermarkExposed };
 }
 import * as import__veltra_utils from "@veltra/utils";
 //#endregion

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@veltra/desktop",
-  "version": "1.1.31",
+  "version": "1.1.33",
   "files": [
     "dist",
     "src"
@@ -68,11 +68,11 @@
     "@cat-kit/core": ">=1.1.6",
     "@cat-kit/excel": ">=1.0.0",
     "@cat-kit/fe": "^1.1.6",
-    "@veltra/compositions": "1.1.31",
-    "@veltra/directives": "1.1.31",
-    "@veltra/icons": "1.1.31",
-    "@veltra/styles": "1.1.31",
-    "@veltra/utils": "1.1.31",
+    "@veltra/compositions": "1.1.33",
+    "@veltra/directives": "1.1.33",
+    "@veltra/icons": "1.1.33",
+    "@veltra/styles": "1.1.33",
+    "@veltra/utils": "1.1.33",
     "vue": ">=3.5.0"
   }
 }

package/src/components/{context-menu → contextmenu}/api.ts

@@ -1,17 +1,17 @@
 import { createVNode, render, type VNode } from 'vue'
 
-import type { ContextMenuProps } from '../../types'
-import MContextMenu from './context-menu.vue'
+import type { ContextmenuProps } from '../../types'
+import UContextmenu from './contextmenu.vue'
 
 let node: VNode
 
 export const contextmenu = {
-  pop(options: ContextMenuProps): void {
+  pop(options: ContextmenuProps): void {
     if (node) {
       render(null, document.body)
     }
 
-    node = createVNode(MContextMenu, {
+    node = createVNode(UContextmenu, {
       ...options,
       onDestroy() {
         render(null, document.body)

package/src/components/contextmenu/contextmenu-item.vue

@@ -0,0 +1,63 @@
+<template>
+  <li
+    :class="[cls.e('item'), bem.is('disabled', disabled), bem.is('loading', loading)]"
+    v-ripple="!disabled && !loading"
+    @click="handleClickMenu"
+  >
+    <div :class="cls.e('item-content')">
+      <template v-if="showIconColumn">
+        <u-icon v-if="loading" :class="bem.is('loading')">
+          <Loading />
+        </u-icon>
+        <u-icon v-else-if="menu.icon">
+          <component :is="menu.icon" />
+        </u-icon>
+        <i v-else :class="cls.e('icon-place')"></i>
+      </template>
+
+      <span :class="cls.e('label')">{{ menu.label }}</span>
+
+      <i v-if="showArrowColumn" :class="cls.e('arrow-place')"></i>
+    </div>
+  </li>
+</template>
+
+<script lang="ts" setup>
+import { vRipple } from '@veltra/directives'
+import { Loading } from '@veltra/icons/normal'
+import { bem } from '@veltra/utils'
+import { computed, inject, shallowRef } from 'vue'
+
+import type { ContextmenuItem } from '../../types'
+import { UIcon } from '../icon'
+import { ContextmenuPanelDIKey, ContextmenuRootDIKey } from './di'
+import { getMenuDisabled } from './helper'
+
+defineOptions({ name: 'ContextmenuItem' })
+
+const { menu } = defineProps<{ menu: ContextmenuItem }>()
+
+const { cls, onItemClickStart, onItemClickEnd } = inject(ContextmenuRootDIKey)!
+const { showIconColumn, showArrowColumn } = inject(ContextmenuPanelDIKey)!
+
+const loading = shallowRef(false)
+const disabled = computed(() => getMenuDisabled(menu))
+
+function handleClickMenu() {
+  if (disabled.value || loading.value) return
+  onItemClickStart()
+  loading.value = true
+
+  const done = () => {
+    onItemClickEnd()
+    loading.value = false
+  }
+
+  const result = menu.callback?.()
+  if (result instanceof Promise) {
+    result.finally(done)
+  } else {
+    done()
+  }
+}
+</script>

package/src/components/contextmenu/contextmenu-panel.vue

@@ -0,0 +1,28 @@
+<template>
+  <ul v-bind="$attrs">
+    <template v-for="(menu, index) of menus" :key="index">
+      <UContextmenuSub v-if="menu.children?.length" :menu="menu" />
+      <UContextmenuItem v-else :menu="menu" />
+    </template>
+  </ul>
+</template>
+
+<script lang="ts" setup>
+import { computed, inject, provide } from 'vue'
+
+import type { ContextmenuItem } from '../../types'
+import UContextmenuItem from './contextmenu-item.vue'
+import UContextmenuSub from './contextmenu-sub.vue'
+import { ContextmenuPanelDIKey, ContextmenuRootDIKey } from './di'
+
+defineOptions({ name: 'ContextmenuPanel', inheritAttrs: false })
+
+const { menus } = defineProps<{ menus: ContextmenuItem[] }>()
+
+inject(ContextmenuRootDIKey)
+
+const showIconColumn = computed(() => menus.some((menu) => !!menu.icon))
+const showArrowColumn = computed(() => menus.some((menu) => !!menu.children?.length))
+
+provide(ContextmenuPanelDIKey, { showIconColumn, showArrowColumn })
+</script>

package/src/components/contextmenu/contextmenu-sub.vue

@@ -0,0 +1,88 @@
+<template>
+  <li
+    :class="[
+      cls.e('item'),
+      bem.is('disabled', disabled),
+      bem.is('open', subVisible),
+      bem.is('flip-x', flipX)
+    ]"
+    @mouseenter="handleMouseEnter"
+    @mouseleave="scheduleClose"
+  >
+    <div :class="cls.e('item-content')">
+      <template v-if="showIconColumn">
+        <u-icon v-if="menu.icon">
+          <component :is="menu.icon" />
+        </u-icon>
+        <i v-else :class="cls.e('icon-place')"></i>
+      </template>
+
+      <span :class="cls.e('label')">{{ menu.label }}</span>
+
+      <u-icon v-if="showArrowColumn" :class="cls.e('arrow')">
+        <ArrowRight />
+      </u-icon>
+      <i v-else :class="cls.e('arrow-place')"></i>
+    </div>
+
+    <UContextmenuPanel
+      v-show="subVisible"
+      :menus="menu.children!"
+      :class="[cls.e('sub'), bem.is('flip-x', flipX)]"
+      @mouseenter="cancelClose"
+      @mouseleave="scheduleClose"
+    />
+  </li>
+</template>
+
+<script lang="ts" setup>
+import { ArrowRight } from '@veltra/icons/normal'
+import { bem } from '@veltra/utils'
+import { computed, inject, nextTick, onBeforeUnmount, shallowRef } from 'vue'
+
+import type { ContextmenuItem } from '../../types'
+import { UIcon } from '../icon'
+import UContextmenuPanel from './contextmenu-panel.vue'
+import { ContextmenuPanelDIKey, ContextmenuRootDIKey } from './di'
+import { getMenuDisabled } from './helper'
+
+defineOptions({ name: 'ContextmenuSub' })
+
+const { menu } = defineProps<{ menu: ContextmenuItem }>()
+
+const { cls } = inject(ContextmenuRootDIKey)!
+const { showIconColumn, showArrowColumn } = inject(ContextmenuPanelDIKey)!
+
+const subVisible = shallowRef(false)
+const flipX = shallowRef(false)
+
+let closeTimer: ReturnType<typeof setTimeout> | undefined
+
+const disabled = computed(() => getMenuDisabled(menu))
+
+function cancelClose() {
+  if (closeTimer !== undefined) {
+    clearTimeout(closeTimer)
+    closeTimer = undefined
+  }
+}
+
+function scheduleClose() {
+  cancelClose()
+  closeTimer = setTimeout(() => {
+    subVisible.value = false
+  }, 250)
+}
+
+function handleMouseEnter(e: MouseEvent) {
+  if (disabled.value) return
+  cancelClose()
+  subVisible.value = true
+  nextTick(() => {
+    const panel = (e.currentTarget as HTMLElement).querySelector<HTMLElement>(`.${cls.e('sub')}`)
+    if (panel) flipX.value = panel.getBoundingClientRect().right > window.innerWidth
+  })
+}
+
+onBeforeUnmount(cancelClose)
+</script>

package/src/components/contextmenu/contextmenu.vue

@@ -0,0 +1,77 @@
+<template>
+  <Teleport to="body">
+    <transition name="zoom-in" appear @after-leave="emit('destroy')">
+      <UContextmenuPanel
+        v-if="visible"
+        :menus="menus"
+        :class="[cls.b, cls.m(size)]"
+        :style="style"
+        v-click-outside="handleClickOutside"
+      />
+    </transition>
+  </Teleport>
+</template>
+
+<script lang="ts" setup>
+import { useFallbackProps } from '@veltra/compositions'
+import { vClickOutside } from '@veltra/directives'
+import { bem, withUnit, zIndex } from '@veltra/utils'
+import { computed, provide, shallowRef, type CSSProperties } from 'vue'
+
+import type { ContextmenuEmits, ContextmenuProps, ComponentSize } from '../../types'
+import UContextmenuPanel from './contextmenu-panel.vue'
+import { ContextmenuRootDIKey } from './di'
+
+defineOptions({ name: 'Contextmenu' })
+
+const props = withDefaults(defineProps<ContextmenuProps>(), { width: 150 })
+
+const emit = defineEmits<ContextmenuEmits>()
+
+const { size } = useFallbackProps([props], { size: 'default' as ComponentSize })
+
+const cls = bem('contextmenu')
+
+const visible = shallowRef(true)
+
+const style = computed<CSSProperties>(() => {
+  const { x, y } = props.mousePosition
+  const flipX = x > window.innerWidth / 2
+  const flipY = y > window.innerHeight / 2
+  return {
+    width: withUnit(props.width, 'px'),
+    zIndex: zIndex(),
+    ...(flipX
+      ? { right: withUnit(window.innerWidth - x - 1, 'px') }
+      : { left: withUnit(x + 1, 'px') }),
+    ...(flipY
+      ? { bottom: withUnit(window.innerHeight - y - 1, 'px') }
+      : { top: withUnit(y + 1, 'px') }),
+    transformOrigin: `${flipY ? 'bottom' : 'top'} ${flipX ? 'right' : 'left'}`
+  }
+})
+
+const menus = computed(() => (typeof props.menus === 'function' ? props.menus() : props.menus))
+
+function close() {
+  visible.value = false
+}
+
+let loading = false
+
+provide(ContextmenuRootDIKey, {
+  cls,
+  onItemClickStart: () => {
+    loading = true
+  },
+  onItemClickEnd: () => {
+    loading = false
+    close()
+  }
+})
+
+function handleClickOutside() {
+  if (loading) return
+  close()
+}
+</script>

package/src/components/contextmenu/di.ts

@@ -0,0 +1,13 @@
+import type { BEM } from '@veltra/utils'
+import type { ComputedRef, InjectionKey } from 'vue'
+
+export const ContextmenuRootDIKey: InjectionKey<{
+  cls: BEM<'contextmenu'>
+  onItemClickStart: () => void
+  onItemClickEnd: () => void
+}> = Symbol('ContextmenuRootDIKey')
+
+export const ContextmenuPanelDIKey: InjectionKey<{
+  showIconColumn: ComputedRef<boolean>
+  showArrowColumn: ComputedRef<boolean>
+}> = Symbol('ContextmenuPanelDIKey')

package/src/components/contextmenu/helper.ts

@@ -0,0 +1,5 @@
+import type { ContextmenuItem } from '../../types'
+
+export function getMenuDisabled(menu: ContextmenuItem): boolean {
+  return (typeof menu.disabled === 'function' ? menu.disabled() : menu.disabled) ?? false
+}

package/src/components/contextmenu/index.ts

@@ -0,0 +1,3 @@
+export { default as UContextmenu } from './contextmenu.vue'
+
+export { contextmenu } from './api'

package/src/components/contextmenu/style.scss

@@ -0,0 +1,135 @@
+@use 'pkg:@veltra/styles/mixins' as m;
+@use 'pkg:@veltra/styles/functions' as fn;
+
+$root-name: contextmenu;
+$arrow-size: 12px;
+
+@mixin panel-surface {
+  margin: 0;
+  padding: 4px;
+  list-style: none;
+  display: flex;
+  flex-direction: column;
+  gap: 1px;
+  user-select: none;
+  color: fn.use-var(text-color, main);
+  background-color: fn.use-var(bg-color, top);
+  border: 1px solid fn.use-var(border, color);
+  border-radius: calc(fn.use-var(radius, default) + 2px);
+  box-shadow:
+    0 1px 2px rgba(15, 23, 42, 0.05),
+    0 8px 20px rgba(15, 23, 42, 0.08);
+  backdrop-filter: fn.use-var(bg-filter);
+  -webkit-backdrop-filter: fn.use-var(bg-filter);
+}
+
+@include m.b($root-name) {
+  $b: &;
+
+  position: fixed;
+  @include panel-surface;
+
+  @include m.e(label) {
+    flex: 1;
+    min-width: 0;
+    @include m.ellipsis;
+  }
+
+  @include m.e(item) {
+    position: relative;
+    cursor: pointer;
+    padding: 0;
+
+    @include m.is(disabled, loading) {
+      opacity: 0.55;
+      cursor: not-allowed;
+      color: fn.use-var(text-color, disabled);
+    }
+
+    @include m.is(open) {
+      &::after {
+        content: '';
+        position: absolute;
+        top: 0;
+        left: 100%;
+        width: 6px;
+        height: 100%;
+      }
+
+      @include m.is(flip-x) {
+        &::after {
+          left: auto;
+          right: 100%;
+        }
+      }
+    }
+  }
+
+  @include m.e(item-content) {
+    gap: 8px;
+    width: 100%;
+    padding: 0 8px;
+    min-height: 28px;
+    border-radius: calc(fn.use-var(radius, default) + 1px);
+    transition:
+      background-color 0.15s ease,
+      color 0.15s ease;
+    @include m.flex($align: center);
+
+    #{$b}__item:not(.is-disabled):not(.is-loading) > & {
+      &:hover {
+        background-color: var(--u-menu-hover-bg);
+        color: var(--u-menu-hover-color);
+      }
+    }
+  }
+
+  #{$b}__item.is-open:not(.is-disabled) > #{$b}__item-content {
+    background-color: var(--u-menu-hover-bg);
+    color: var(--u-menu-hover-color);
+  }
+
+  @include m.e(icon-place) {
+    width: 1em;
+    flex-shrink: 0;
+  }
+
+  @include m.e(arrow) {
+    width: $arrow-size;
+    flex-shrink: 0;
+    font-size: $arrow-size;
+    opacity: 0.65;
+  }
+
+  @include m.e(arrow-place) {
+    width: $arrow-size;
+    flex-shrink: 0;
+  }
+
+  @include m.e(sub) {
+    position: absolute;
+    top: 0;
+    left: 100%;
+    margin-left: -4px;
+    min-width: 120px;
+    width: max-content;
+    @include panel-surface;
+
+    @include m.is(flip-x) {
+      left: auto;
+      right: 100%;
+      margin-left: 0;
+      margin-right: -4px;
+    }
+  }
+
+  @include m.size using ($size) {
+    font-size: fn.use-var(font-size-main, $size);
+
+    @include m.e(item-content) {
+      padding: 0 fn.use-var(gap, $size);
+      min-height: calc(var(--u-menu-height-#{$size}) - 8px);
+      border-radius: calc(fn.use-var(radius, $size) + 1px);
+    }
+  }
+}