@veltra/desktop 1.1.31 → 1.1.33

package/dist/components/context-menu/style2.css

@@ -1,52 +0,0 @@
-@charset "UTF-8";
-/** flex布局 */
-/**
-* 设置css变量
-* 参数1:变量前缀
-* 参数2: 一个由值组成的列表或者由key, value组成的map
-* css-var(height, (
-*   large: 40px
-*   default: 32px
-*   small: 24px
-* ))
-* 生成的css变量:
-* --u-height-large: 40px;
-* --u-height-default: 32px;
-* --u-height-small: 24px;
-*/
-/** 暗色：data-theme 与系统偏好，与 UITheme.injectBuiltInThemes 选择器策略一致 */
-.u-context-menu {
-  position: fixed;
-  background-color: var(--u-bg-color-top);
-  box-shadow: var(--u-shadow);
-  border-radius: var(--u-radius-default);
-  padding: var(--u-gap-small);
-  backdrop-filter: var(--u-bg-filter);
-  -webkit-backdrop-filter: var(--u-bg-filter);
-}
-.u-context-menu__label {
-  margin-left: var(--u-gap-small);
-}
-.u-context-menu__item {
-  cursor: pointer;
-  padding: var(--u-gap-small);
-  border-radius: var(--u-radius-default);
-  display: flex;
-  justify-content: flex-start;
-  align-items: center;
-  flex-wrap: nowrap;
-}
-.u-context-menu__item:not(.is-disabled):not(.is-loading):hover {
-  background-color: var(--u-color-primary-light-9);
-}
-.u-context-menu__item.is-disabled {
-  cursor: not-allowed;
-  color: var(--u-text-color-disabled);
-}
-.u-context-menu__item.is-loading {
-  cursor: not-allowed;
-  color: var(--u-text-color-disabled);
-}
-.u-context-menu__icon-place {
-  width: 14px;
-}

package/src/components/context-menu/context-menu-item.vue

@@ -1,67 +0,0 @@
-<template>
-  <li
-    :class="[
-      cls.e('item'),
-      bem.is('disabled', disabled),
-      bem.is('loading', loading),
-      cls.em('item', 'menu')
-    ]"
-    v-ripple="!disabled && !loading"
-    @click="handleClickMenu"
-  >
-    <u-icon v-if="loading" :class="bem.is('loading')">
-      <Loading />
-    </u-icon>
-    <template v-else>
-      <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>
-  </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 { ContextMenuDIKey } from './di'
-
-defineOptions({ name: 'ContextMenuItem' })
-
-const { menu } = defineProps<{ menu: ContextMenuItem }>()
-
-const emit = defineEmits<{ (e: 'click-start'): void; (e: 'click-end'): void }>()
-
-const { cls } = inject(ContextMenuDIKey)!
-
-const loading = shallowRef(false)
-
-const disabled = computed(() => {
-  return (typeof menu.disabled === 'function' ? menu.disabled() : menu.disabled) ?? false
-})
-
-function handleClickMenu() {
-  if (disabled.value || loading.value) return
-  emit('click-start')
-  loading.value = true
-  const result = menu.callback?.()
-
-  if (result instanceof Promise) {
-    return result
-      .then(() => {})
-      .finally(() => {
-        emit('click-end')
-        loading.value = false
-      })
-  }
-  loading.value = false
-  emit('click-end')
-}
-</script>

package/src/components/context-menu/context-menu.vue

@@ -1,119 +0,0 @@
-<template>
-  <Teleport to="body">
-    <transition name="zoom-in" appear @after-leave="emit('destroy')">
-      <ul
-        :class="[cls.b, cls.m(size)]"
-        :style="style"
-        ref="contextMenuRef"
-        v-if="visible"
-        v-click-outside="handleClickOutside"
-      >
-        <UContextMenuItem
-          v-for="menu of menus"
-          :menu="menu"
-          :disabled="getMenuDisabled(menu)"
-          @click-start="handleClickStart"
-          @click-end="handleClickEnd"
-        />
-      </ul>
-    </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,
-  ContextMenuItem,
-  ContextMenuProps,
-  ComponentSize
-} from '../../types'
-import UContextMenuItem from './context-menu-item.vue'
-import { ContextMenuDIKey } 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('context-menu')
-
-const contextMenuRef = shallowRef<HTMLElement>()
-
-const visible = shallowRef(true)
-
-const computePosition = () => {
-  const position: {
-    top?: number
-    left?: number
-    right?: number
-    bottom?: number
-    transformOrigin?: string
-  } = {}
-
-  const { mousePosition } = props
-  const { x, y } = mousePosition
-  if (x > window.innerWidth / 2) {
-    position.right = window.innerWidth - x - 1
-  } else {
-    position.left = x + 1
-  }
-  if (y > window.innerHeight / 2) {
-    position.bottom = window.innerHeight - y - 1
-  } else {
-    position.top = y + 1
-  }
-
-  const positionY = position.top ? 'top' : 'bottom'
-  const positionX = position.left ? 'left' : 'right'
-  position.transformOrigin = `${positionY} ${positionX}`
-
-  return Object.fromEntries(
-    Object.entries(position).map(([k, v]) => [k, withUnit(v as number | string | undefined, 'px')])
-  ) as CSSProperties
-}
-
-const style = computed<CSSProperties>(() => {
-  return { width: withUnit(props.width, 'px'), ...computePosition(), zIndex: zIndex() }
-})
-
-const menus = computed(() => {
-  const { menus } = props
-  if (typeof menus === 'function') {
-    return menus()
-  }
-  return menus
-})
-
-const getMenuDisabled = (menu: ContextMenuItem) => {
-  return typeof menu.disabled === 'function' ? menu.disabled() : menu.disabled
-}
-
-function close() {
-  visible.value = false
-}
-
-let loading = false
-function handleClickStart() {
-  loading = true
-}
-
-function handleClickEnd() {
-  loading = false
-  close()
-}
-
-function handleClickOutside() {
-  if (loading) return
-  close()
-}
-
-provide(ContextMenuDIKey, { cls })
-</script>

package/src/components/context-menu/di.ts

@@ -1,5 +0,0 @@
-import type { BEM } from '@veltra/utils'
-import type { InjectionKey } from 'vue'
-
-export const ContextMenuDIKey: InjectionKey<{ cls: BEM<'context-menu'> }> =
-  Symbol('ContextMenuDIKey')

package/src/components/context-menu/index.ts

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

package/src/components/context-menu/style.scss

@@ -1,51 +0,0 @@
-@use 'pkg:@veltra/styles/mixins' as m;
-@use 'pkg:@veltra/styles/functions' as fn;
-@use 'pkg:@veltra/styles/vars';
-
-// 方便拼接
-$root-name: context-menu;
-
-@include m.b($root-name) {
-  position: fixed;
-  background-color: fn.use-var(bg-color, top);
-  box-shadow: fn.use-var(shadow);
-  border-radius: fn.use-var(radius, default);
-  padding: fn.use-var(gap, small);
-  backdrop-filter: fn.use-var(bg-filter);
-  -webkit-backdrop-filter: fn.use-var(bg-filter);
-
-  @include m.e(label) {
-    margin-left: fn.use-var(gap, small);
-  }
-
-  // @include m.size using ($size) {
-  // padding: fn.use-var(gap, $size);
-
-  // @include m.bem($root-name, item) {
-  //   padding: fn.use-var(gap, $size);
-  //   border-radius: fn.use-var(radius, $size);
-  // }
-  // }
-
-  @include m.e(item) {
-    cursor: pointer;
-    padding: fn.use-var(gap, small);
-    border-radius: fn.use-var(radius, default);
-    @include m.flex;
-
-    @include m.is-not(disabled, loading) {
-      &:hover {
-        background-color: fn.use-var(color, primary, light-9);
-      }
-    }
-
-    @include m.is(disabled, loading) {
-      cursor: not-allowed;
-      color: fn.use-var(text-color, disabled);
-    }
-  }
-
-  @include m.e(icon-place) {
-    width: 14px;
-  }
-}