@veltra/desktop 1.1.31 → 1.1.32

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);
+    }
+  }
+}

package/src/components/file-viewer/previewers/sheet-previewer.vue

@@ -20,9 +20,11 @@
 
 <script lang="ts" setup>
 import { bem } from '@veltra/utils'
+import { ListTable } from '@visactor/vtable'
 import { onBeforeUnmount, ref, shallowRef, useTemplateRef, watch } from 'vue'
 
 import type { FileViewerItem } from '../../../types/file-viewer'
+import { parseSheetFile, type SheetPreview } from '../sheet-parser'
 
 defineOptions({ name: 'FileViewerSheetPreviewer' })
 
@@ -33,73 +35,53 @@ const props = withDefaults(defineProps<{ file: FileViewerItem; maxRows?: number
 const emit = defineEmits<{ (e: 'error', err: unknown): void }>()
 
 const cls = bem('file-viewer')
-
 const container = useTemplateRef<HTMLDivElement>('container')
 const loading = ref(true)
 const truncated = ref(false)
 const totalRows = ref(0)
 const renderedRows = ref(0)
-
-interface SheetData {
-  name: string
-  headers: string[]
-  rows: string[][]
-  totalCount: number
-}
-
-const sheets = shallowRef<SheetData[]>([])
+const sheets = shallowRef<SheetPreview[]>([])
 const activeSheetIndex = ref(0)
 
 let controller: AbortController | undefined
-let instance: { release?: () => void; resize?: () => void } | undefined
+let table: ListTable | undefined
 let resizeObserver: ResizeObserver | undefined
 
+function releaseTable() {
+  table?.release()
+  table = undefined
+}
+
+function renderActive() {
+  const sheet = sheets.value[activeSheetIndex.value]
+  const el = container.value
+  if (!sheet || !el) return
+
+  releaseTable()
+
+  const limit = props.maxRows > 0 ? Math.min(props.maxRows, sheet.rows.length) : sheet.rows.length
+  totalRows.value = sheet.rows.length
+  renderedRows.value = limit
+  truncated.value = props.maxRows > 0 && sheet.rows.length > props.maxRows
+
+  table = new ListTable(el, {
+    records: sheet.rows.slice(0, limit),
+    columns: sheet.headers.map((title, i) => ({ field: String(i), title, width: 'auto' })),
+    widthMode: 'standard'
+  })
+}
+
 async function load() {
   controller?.abort()
   controller = new AbortController()
-  const signal = controller.signal
   loading.value = true
   sheets.value = []
   activeSheetIndex.value = 0
 
   try {
-    const ext = props.file.name.slice(props.file.name.lastIndexOf('.') + 1).toLowerCase()
-    const { toArrayBuffer, parseCsv } = await import('../helper')
-    const buf = await toArrayBuffer(props.file.src, signal)
-    if (signal.aborted) return
-
-    if (ext === 'csv') {
-      const text = new TextDecoder('utf-8', { fatal: false }).decode(buf)
-      const parsed = parseCsv(text).filter((row) => row.some((c) => c.length > 0))
-      const headers = parsed[0] ?? []
-      const rows = parsed.slice(1)
-      sheets.value = [
-        {
-          name: props.file.name,
-          headers: headers.map((h, i) => String(h) || `Column ${i + 1}`),
-          rows,
-          totalCount: rows.length
-        }
-      ]
-    } else {
-      const { readWorkbook } = await import('@cat-kit/excel')
-      const workbook = await readWorkbook(new Uint8Array(buf))
-      if (signal.aborted) return
-      sheets.value = workbook.worksheets.map((ws) => {
-        const wsRows = ws.getRows()
-        const firstRow = wsRows[0]
-        const headers = firstRow ? firstRow.toValues().map((v) => cellToString(v)) : []
-        const rows = wsRows.slice(1).map((r) => r.toValues().map(cellToString))
-        return {
-          name: ws.name,
-          headers: headers.map((h, i) => h || `Column ${i + 1}`),
-          rows,
-          totalCount: rows.length
-        }
-      })
-    }
-
-    await renderActive()
+    sheets.value = await parseSheetFile(props.file, controller.signal)
+    if (controller.signal.aborted) return
+    renderActive()
   } catch (err) {
     if ((err as { name?: string })?.name === 'AbortError') return
     emit('error', err)
@@ -108,97 +90,19 @@ async function load() {
   }
 }
 
-function cellToString(v: unknown): string {
-  if (v === null || v === undefined) return ''
-  if (typeof v === 'string') return v
-  if (typeof v === 'number' || typeof v === 'boolean') return String(v)
-  if (v instanceof Date) return v.toLocaleString()
-  if (typeof v === 'object' && v !== null && 'formula' in v) {
-    const f = v as { formula: string; result?: unknown }
-    if (f.result !== undefined && f.result !== null) return cellToString(f.result)
-    return `=${f.formula}`
-  }
-  return String(v)
-}
-
-async function renderActive() {
-  const sheet = sheets.value[activeSheetIndex.value]
-  if (!sheet || !container.value) return
-
-  releaseInstance()
-
-  const limit = props.maxRows > 0 ? Math.min(props.maxRows, sheet.rows.length) : sheet.rows.length
-  totalRows.value = sheet.totalCount
-  renderedRows.value = limit
-  truncated.value = props.maxRows > 0 && sheet.rows.length > props.maxRows
-
-  const columns = sheet.headers.map((h, i) => ({
-    field: 'c' + i,
-    title: h,
-    width: 'auto' as const
-  }))
-
-  const records: Record<string, string>[] = []
-  for (let i = 0; i < limit; i++) {
-    const row = sheet.rows[i]
-    if (!row) continue
-    const record: Record<string, string> = {}
-    for (let j = 0; j < columns.length; j++) {
-      record['c' + j] = row[j] ?? ''
-    }
-    records.push(record)
-  }
-
-  const VTable = await import('@visactor/vtable')
-  if (!container.value) return
-
-  instance = new VTable.ListTable(container.value, {
-    records,
-    columns,
-    widthMode: 'standard',
-    heightMode: 'standard',
-    defaultRowHeight: 32,
-    defaultHeaderRowHeight: 36,
-    autoFillWidth: true,
-    frozenColCount: 0,
-    theme: (VTable.themes.ARCO ?? VTable.themes.DEFAULT).extends({
-      defaultStyle: { borderLineWidth: 1 }
-    })
-  })
-}
-
-function releaseInstance() {
-  if (instance && typeof instance.release === 'function') {
-    try {
-      instance.release()
-    } catch {
-      /* noop */
-    }
-  }
-  instance = undefined
-}
-
-watch(
-  () => props.file,
-  () => load(),
-  { immediate: true }
-)
-
-watch(activeSheetIndex, () => renderActive())
-
+watch(() => props.file, load, { immediate: true })
+watch(activeSheetIndex, renderActive)
 watch(container, (el) => {
   resizeObserver?.disconnect()
   if (!el) return
-  resizeObserver = new ResizeObserver(() => {
-    instance?.resize?.()
-  })
+  resizeObserver = new ResizeObserver(() => table?.resize?.())
   resizeObserver.observe(el)
 })
 
 onBeforeUnmount(() => {
   controller?.abort()
   resizeObserver?.disconnect()
-  releaseInstance()
+  releaseTable()
   sheets.value = []
 })
 </script>

package/src/components/file-viewer/sheet-parser.ts

@@ -0,0 +1,52 @@
+import { readWorkbook } from '@cat-kit/excel'
+
+import type { FileViewerItem } from '../../types/file-viewer'
+import { getExtension, parseCsv, toArrayBuffer } from './helper'
+
+export interface SheetPreview {
+  name: string
+  headers: string[]
+  rows: string[][]
+}
+
+function cellToString(v: unknown): string {
+  if (v == null) return ''
+  if (typeof v === 'string') return v
+  if (typeof v === 'number' || typeof v === 'boolean') return String(v)
+  if (v instanceof Date) return v.toLocaleString()
+  if (typeof v === 'object' && 'formula' in v) {
+    const f = v as { formula: string; result?: unknown }
+    return f.result != null ? cellToString(f.result) : `=${f.formula}`
+  }
+  return JSON.stringify(v)
+}
+
+/** 解析 CSV / Excel 为表格预览数据 */
+export async function parseSheetFile(
+  file: FileViewerItem,
+  signal?: AbortSignal
+): Promise<SheetPreview[]> {
+  const ext = getExtension(file.name)
+  const buf = await toArrayBuffer(file.src, signal)
+  if (signal?.aborted) return []
+
+  if (ext === 'csv') {
+    const text = new TextDecoder('utf-8', { fatal: false }).decode(buf)
+    const parsed = parseCsv(text).filter((row) => row.some((c) => c.length > 0))
+    const headers = (parsed[0] ?? []).map((h, i) => String(h) || `Column ${i + 1}`)
+    return [{ name: file.name, headers, rows: parsed.slice(1) }]
+  }
+
+  const workbook = await readWorkbook(new Uint8Array(buf))
+  if (signal?.aborted) return []
+
+  return workbook.worksheets.map((ws) => {
+    const wsRows = ws.getRows()
+    const firstRow = wsRows[0]
+    const headers = (firstRow ? firstRow.toValues().map(cellToString) : []).map(
+      (h, i) => h || `Column ${i + 1}`
+    )
+    const rows = wsRows.slice(1).map((r) => r.toValues().map(cellToString))
+    return { name: ws.name, headers, rows }
+  })
+}

package/src/components/index.ts

@@ -66,7 +66,7 @@ export * from './table-editor'
 
 export * from './check-tag'
 
-export * from './context-menu'
+export * from './contextmenu'
 
 export * from './password-input'
 

package/src/style.ts

@@ -13,7 +13,7 @@ import './components/checkbox/style'
 import './components/code-editor/style'
 import './components/collapse/style'
 import './components/condition-editor/style'
-import './components/context-menu/style'
+import './components/contextmenu/style'
 import './components/date-panel/style'
 import './components/date-picker/style'
 import './components/date-range-picker/style'

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

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

package/src/types/index.ts

@@ -51,7 +51,7 @@ export * from './menu'
 export * from './password-input'
 export * from './date-picker'
 export * from './dropdown'
-export * from './context-menu'
+export * from './contextmenu'
 export * from './select'
 export * from './radio'
 export * from './checkbox'

package/dist/components/context-menu/api.d.ts

@@ -1,8 +0,0 @@
-import { ContextMenuProps } from "../../types/context-menu.js";
-//#region src/components/context-menu/api.d.ts
-declare const contextmenu: {
-  pop(options: ContextMenuProps): void;
-};
-//#endregion
-export { contextmenu };
-//# sourceMappingURL=api.d.ts.map

package/dist/components/context-menu/api.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"api.js","names":["MContextMenu"],"sources":["../../../src/components/context-menu/api.ts"],"sourcesContent":["import { createVNode, render, type VNode } from 'vue'\n\nimport type { ContextMenuProps } from '../../types'\nimport MContextMenu from './context-menu.vue'\n\nlet node: VNode\n\nexport const contextmenu = {\n  pop(options: ContextMenuProps): void {\n    if (node) {\n      render(null, document.body)\n    }\n\n    node = createVNode(MContextMenu, {\n      ...options,\n      onDestroy() {\n        render(null, document.body)\n      }\n    })\n\n    render(node, document.body)\n  }\n}\n"],"mappings":";;;AAKA,IAAI;AAEJ,MAAa,cAAc,EACzB,IAAI,SAAiC;CACnC,IAAI,MACF,OAAO,MAAM,SAAS,IAAI;CAG5B,OAAO,YAAYA,WAAc;EAC/B,GAAG;EACH,YAAY;GACV,OAAO,MAAM,SAAS,IAAI;EAC5B;CACF,CAAC;CAED,OAAO,MAAM,SAAS,IAAI;AAC5B,EACF"}

package/dist/components/context-menu/context-menu-item.js

@@ -1,60 +0,0 @@
-import _sfc_main$1 from "../icon/icon.js";
-import { ContextMenuDIKey } from "./di.js";
-import { Fragment, computed, createBlock, createElementBlock, createElementVNode, createVNode, defineComponent, inject, normalizeClass, openBlock, resolveDynamicComponent, shallowRef, toDisplayString, unref, withCtx, withDirectives } from "vue";
-import { bem } from "@veltra/utils";
-import { Loading } from "@veltra/icons/normal";
-import { vRipple } from "@veltra/directives";
-//#region src/components/context-menu/context-menu-item.vue
-const _sfc_main = /* @__PURE__ */ defineComponent({
-	name: "ContextMenuItem",
-	__name: "context-menu-item",
-	props: { menu: {} },
-	emits: ["click-start", "click-end"],
-	setup(__props, { emit: __emit }) {
-		const emit = __emit;
-		const { cls } = inject(ContextMenuDIKey);
-		const loading = shallowRef(false);
-		const disabled = computed(() => {
-			return (typeof __props.menu.disabled === "function" ? __props.menu.disabled() : __props.menu.disabled) ?? false;
-		});
-		function handleClickMenu() {
-			if (disabled.value || loading.value) return;
-			emit("click-start");
-			loading.value = true;
-			const result = __props.menu.callback?.();
-			if (result instanceof Promise) return result.then(() => {}).finally(() => {
-				emit("click-end");
-				loading.value = false;
-			});
-			loading.value = false;
-			emit("click-end");
-		}
-		return (_ctx, _cache) => {
-			return withDirectives((openBlock(), createElementBlock("li", {
-				class: normalizeClass([
-					unref(cls).e("item"),
-					unref(bem).is("disabled", disabled.value),
-					unref(bem).is("loading", loading.value),
-					unref(cls).em("item", "menu")
-				]),
-				onClick: handleClickMenu
-			}, [loading.value ? (openBlock(), createBlock(unref(_sfc_main$1), {
-				key: 0,
-				class: normalizeClass(unref(bem).is("loading"))
-			}, {
-				default: withCtx(() => [createVNode(unref(Loading))]),
-				_: 1
-			}, 8, ["class"])) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [__props.menu.icon ? (openBlock(), createBlock(unref(_sfc_main$1), { key: 0 }, {
-				default: withCtx(() => [(openBlock(), createBlock(resolveDynamicComponent(__props.menu.icon)))]),
-				_: 1
-			})) : (openBlock(), createElementBlock("i", {
-				key: 1,
-				class: normalizeClass(unref(cls).e("icon-place"))
-			}, null, 2))], 64)), createElementVNode("span", { class: normalizeClass(unref(cls).e("label")) }, toDisplayString(__props.menu.label), 3)], 2)), [[unref(vRipple), !disabled.value && !loading.value]]);
-		};
-	}
-});
-//#endregion
-export { _sfc_main as default };
-
-//# sourceMappingURL=context-menu-item.js.map

package/dist/components/context-menu/context-menu-item.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"context-menu-item.js","names":[],"sources":["../../../src/components/context-menu/context-menu-item.vue"],"sourcesContent":["<template>\n  <li\n    :class=\"[\n      cls.e('item'),\n      bem.is('disabled', disabled),\n      bem.is('loading', loading),\n      cls.em('item', 'menu')\n    ]\"\n    v-ripple=\"!disabled && !loading\"\n    @click=\"handleClickMenu\"\n  >\n    <u-icon v-if=\"loading\" :class=\"bem.is('loading')\">\n      <Loading />\n    </u-icon>\n    <template v-else>\n      <u-icon v-if=\"menu.icon\">\n        <component :is=\"menu.icon\" />\n      </u-icon>\n      <i v-else :class=\"cls.e('icon-place')\"></i>\n    </template>\n\n    <span :class=\"cls.e('label')\">{{ menu.label }}</span>\n  </li>\n</template>\n\n<script lang=\"ts\" setup>\nimport { vRipple } from '@veltra/directives'\nimport { Loading } from '@veltra/icons/normal'\nimport { bem } from '@veltra/utils'\nimport { computed, inject, shallowRef } from 'vue'\n\nimport type { ContextMenuItem } from '../../types'\nimport { UIcon } from '../icon'\nimport { ContextMenuDIKey } from './di'\n\ndefineOptions({ name: 'ContextMenuItem' })\n\nconst { menu } = defineProps<{ menu: ContextMenuItem }>()\n\nconst emit = defineEmits<{ (e: 'click-start'): void; (e: 'click-end'): void }>()\n\nconst { cls } = inject(ContextMenuDIKey)!\n\nconst loading = shallowRef(false)\n\nconst disabled = computed(() => {\n  return (typeof menu.disabled === 'function' ? menu.disabled() : menu.disabled) ?? false\n})\n\nfunction handleClickMenu() {\n  if (disabled.value || loading.value) return\n  emit('click-start')\n  loading.value = true\n  const result = menu.callback?.()\n\n  if (result instanceof Promise) {\n    return result\n      .then(() => {})\n      .finally(() => {\n        emit('click-end')\n        loading.value = false\n      })\n  }\n  loading.value = false\n  emit('click-end')\n}\n</script>\n"],"mappings":";;;;;;;;;;;;;EAuCA,MAAM,OAAO;EAEb,MAAM,EAAE,QAAQ,OAAO,gBAAgB;EAEvC,MAAM,UAAU,WAAW,KAAK;EAEhC,MAAM,WAAW,eAAe;GAC9B,QAAQ,OAAO,QAAA,KAAK,aAAa,aAAa,QAAA,KAAK,SAAS,IAAI,QAAA,KAAK,aAAa;EACpF,CAAC;EAED,SAAS,kBAAkB;GACzB,IAAI,SAAS,SAAS,QAAQ,OAAO;GACrC,KAAK,aAAa;GAClB,QAAQ,QAAQ;GAChB,MAAM,SAAS,QAAA,KAAK,WAAW;GAE/B,IAAI,kBAAkB,SACpB,OAAO,OACJ,WAAW,CAAC,CAAC,EACb,cAAc;IACb,KAAK,WAAW;IAChB,QAAQ,QAAQ;GAClB,CAAC;GAEL,QAAQ,QAAQ;GAChB,KAAK,WAAW;EAClB;;uCAhEE,mBAqBK,MAAA;IApBF,OAAK,eAAA;KAAU,MAAA,GAAA,EAAI,EAAC,MAAA;KAAgB,MAAA,GAAA,EAAI,GAAE,YAAa,SAAA,KAAQ;KAAS,MAAA,GAAA,EAAI,GAAE,WAAY,QAAA,KAAO;KAAS,MAAA,GAAA,EAAI,GAAE,QAAA,MAAA;;IAOhH,SAAO;OAEM,QAAA,SAAA,UAAA,GAAd,YAES,MAAA,WAAA,GAAA;;IAFe,OAAK,eAAE,MAAA,GAAA,EAAI,GAAE,SAAA,CAAA;;2BACxB,CAAX,YAAW,MAAA,OAAA,CAAA,CAAA,CAAA;;qCAEb,mBAKW,UAAA,EAAA,KAAA,EAAA,GAAA,CAJK,QAAA,KAAK,QAAA,UAAA,GAAnB,YAES,MAAA,WAAA,GAAA,EAAA,KAAA,EAAA,GAAA;2BADsB,EAAA,UAAA,GAA7B,YAA6B,wBAAb,QAAA,KAAK,IAAI,CAAA,EAAA,CAAA;;uBAE3B,mBAA2C,KAAA;;IAAhC,OAAK,eAAE,MAAA,GAAA,EAAI,EAAC,YAAA,CAAA;wBAGzB,mBAAqD,QAAA,EAA9C,OAAK,eAAE,MAAA,GAAA,EAAI,EAAC,OAAA,CAAA,EAAA,GAAA,gBAAc,QAAA,KAAK,KAAK,GAAA,CAAA,CAAA,GAAA,CAAA,IAAA,CAAA,CAAA,MAAA,OAAA,GAAA,CAbhC,SAAA,SAAQ,CAAK,QAAA,KAAO,CAAA,CAAA"}

package/dist/components/context-menu/context-menu.js

@@ -1,95 +0,0 @@
-import { ContextMenuDIKey } from "./di.js";
-import _sfc_main$1 from "./context-menu-item.js";
-import { Fragment, Teleport, Transition, computed, createBlock, createCommentVNode, createElementBlock, createVNode, defineComponent, normalizeClass, normalizeStyle, openBlock, provide, renderList, shallowRef, unref, withCtx, withDirectives } from "vue";
-import { useFallbackProps } from "@veltra/compositions";
-import { bem, withUnit, zIndex } from "@veltra/utils";
-import { vClickOutside } from "@veltra/directives";
-//#region src/components/context-menu/context-menu.vue
-const _sfc_main = /* @__PURE__ */ defineComponent({
-	name: "ContextMenu",
-	__name: "context-menu",
-	props: {
-		mousePosition: {},
-		width: { default: 150 },
-		menus: {},
-		size: {}
-	},
-	emits: ["destroy"],
-	setup(__props, { emit: __emit }) {
-		const props = __props;
-		const emit = __emit;
-		const { size } = useFallbackProps([props], { size: "default" });
-		const cls = bem("context-menu");
-		const contextMenuRef = shallowRef();
-		const visible = shallowRef(true);
-		const computePosition = () => {
-			const position = {};
-			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;
-			position.transformOrigin = `${position.top ? "top" : "bottom"} ${position.left ? "left" : "right"}`;
-			return Object.fromEntries(Object.entries(position).map(([k, v]) => [k, withUnit(v, "px")]));
-		};
-		const style = computed(() => {
-			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) => {
-			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 });
-		return (_ctx, _cache) => {
-			return openBlock(), createBlock(Teleport, { to: "body" }, [createVNode(Transition, {
-				name: "zoom-in",
-				appear: "",
-				onAfterLeave: _cache[0] || (_cache[0] = ($event) => emit("destroy"))
-			}, {
-				default: withCtx(() => [visible.value ? withDirectives((openBlock(), createElementBlock("ul", {
-					key: 0,
-					class: normalizeClass([unref(cls).b, unref(cls).m(unref(size))]),
-					style: normalizeStyle(style.value),
-					ref_key: "contextMenuRef",
-					ref: contextMenuRef
-				}, [(openBlock(true), createElementBlock(Fragment, null, renderList(menus.value, (menu) => {
-					return openBlock(), createBlock(_sfc_main$1, {
-						menu,
-						disabled: getMenuDisabled(menu),
-						onClickStart: handleClickStart,
-						onClickEnd: handleClickEnd
-					}, null, 8, ["menu", "disabled"]);
-				}), 256))], 6)), [[unref(vClickOutside), handleClickOutside]]) : createCommentVNode("v-if", true)]),
-				_: 1
-			})]);
-		};
-	}
-});
-//#endregion
-export { _sfc_main as default };
-
-//# sourceMappingURL=context-menu.js.map

package/dist/components/context-menu/context-menu.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"context-menu.js","names":[],"sources":["../../../src/components/context-menu/context-menu.vue"],"sourcesContent":["<template>\n  <Teleport to=\"body\">\n    <transition name=\"zoom-in\" appear @after-leave=\"emit('destroy')\">\n      <ul\n        :class=\"[cls.b, cls.m(size)]\"\n        :style=\"style\"\n        ref=\"contextMenuRef\"\n        v-if=\"visible\"\n        v-click-outside=\"handleClickOutside\"\n      >\n        <UContextMenuItem\n          v-for=\"menu of menus\"\n          :menu=\"menu\"\n          :disabled=\"getMenuDisabled(menu)\"\n          @click-start=\"handleClickStart\"\n          @click-end=\"handleClickEnd\"\n        />\n      </ul>\n    </transition>\n  </Teleport>\n</template>\n\n<script lang=\"ts\" setup>\nimport { useFallbackProps } from '@veltra/compositions'\nimport { vClickOutside } from '@veltra/directives'\nimport { bem, withUnit, zIndex } from '@veltra/utils'\nimport { computed, provide, shallowRef, type CSSProperties } from 'vue'\n\nimport type {\n  ContextMenuEmits,\n  ContextMenuItem,\n  ContextMenuProps,\n  ComponentSize\n} from '../../types'\nimport UContextMenuItem from './context-menu-item.vue'\nimport { ContextMenuDIKey } from './di'\n\ndefineOptions({ name: 'ContextMenu' })\n\nconst props = withDefaults(defineProps<ContextMenuProps>(), { width: 150 })\n\nconst emit = defineEmits<ContextMenuEmits>()\n\nconst { size } = useFallbackProps([props], { size: 'default' as ComponentSize })\n\nconst cls = bem('context-menu')\n\nconst contextMenuRef = shallowRef<HTMLElement>()\n\nconst visible = shallowRef(true)\n\nconst computePosition = () => {\n  const position: {\n    top?: number\n    left?: number\n    right?: number\n    bottom?: number\n    transformOrigin?: string\n  } = {}\n\n  const { mousePosition } = props\n  const { x, y } = mousePosition\n  if (x > window.innerWidth / 2) {\n    position.right = window.innerWidth - x - 1\n  } else {\n    position.left = x + 1\n  }\n  if (y > window.innerHeight / 2) {\n    position.bottom = window.innerHeight - y - 1\n  } else {\n    position.top = y + 1\n  }\n\n  const positionY = position.top ? 'top' : 'bottom'\n  const positionX = position.left ? 'left' : 'right'\n  position.transformOrigin = `${positionY} ${positionX}`\n\n  return Object.fromEntries(\n    Object.entries(position).map(([k, v]) => [k, withUnit(v as number | string | undefined, 'px')])\n  ) as CSSProperties\n}\n\nconst style = computed<CSSProperties>(() => {\n  return { width: withUnit(props.width, 'px'), ...computePosition(), zIndex: zIndex() }\n})\n\nconst menus = computed(() => {\n  const { menus } = props\n  if (typeof menus === 'function') {\n    return menus()\n  }\n  return menus\n})\n\nconst getMenuDisabled = (menu: ContextMenuItem) => {\n  return typeof menu.disabled === 'function' ? menu.disabled() : menu.disabled\n}\n\nfunction close() {\n  visible.value = false\n}\n\nlet loading = false\nfunction handleClickStart() {\n  loading = true\n}\n\nfunction handleClickEnd() {\n  loading = false\n  close()\n}\n\nfunction handleClickOutside() {\n  if (loading) return\n  close()\n}\n\nprovide(ContextMenuDIKey, { cls })\n</script>\n"],"mappings":";;;;;;;;;;;;;;;;;;EAuCA,MAAM,QAAQ;EAEd,MAAM,OAAO;EAEb,MAAM,EAAE,SAAS,iBAAiB,CAAC,KAAK,GAAG,EAAE,MAAM,UAA2B,CAAC;EAE/E,MAAM,MAAM,IAAI,cAAc;EAE9B,MAAM,iBAAiB,WAAwB;EAE/C,MAAM,UAAU,WAAW,IAAI;EAE/B,MAAM,wBAAwB;GAC5B,MAAM,WAMF,CAAC;GAEL,MAAM,EAAE,kBAAkB;GAC1B,MAAM,EAAE,GAAG,MAAM;GACjB,IAAI,IAAI,OAAO,aAAa,GAC1B,SAAS,QAAQ,OAAO,aAAa,IAAI;QAEzC,SAAS,OAAO,IAAI;GAEtB,IAAI,IAAI,OAAO,cAAc,GAC3B,SAAS,SAAS,OAAO,cAAc,IAAI;QAE3C,SAAS,MAAM,IAAI;GAKrB,SAAS,kBAAkB,GAFT,SAAS,MAAM,QAAQ,SAED,GADtB,SAAS,OAAO,SAAS;GAG3C,OAAO,OAAO,YACZ,OAAO,QAAQ,QAAQ,EAAE,KAAK,CAAC,GAAG,OAAO,CAAC,GAAG,SAAS,GAAkC,IAAI,CAAC,CAAC,CAChG;EACF;EAEA,MAAM,QAAQ,eAA8B;GAC1C,OAAO;IAAE,OAAO,SAAS,MAAM,OAAO,IAAI;IAAG,GAAG,gBAAgB;IAAG,QAAQ,OAAO;GAAE;EACtF,CAAC;EAED,MAAM,QAAQ,eAAe;GAC3B,MAAM,EAAE,UAAU;GAClB,IAAI,OAAO,UAAU,YACnB,OAAO,MAAM;GAEf,OAAO;EACT,CAAC;EAED,MAAM,mBAAmB,SAA0B;GACjD,OAAO,OAAO,KAAK,aAAa,aAAa,KAAK,SAAS,IAAI,KAAK;EACtE;EAEA,SAAS,QAAQ;GACf,QAAQ,QAAQ;EAClB;EAEA,IAAI,UAAU;EACd,SAAS,mBAAmB;GAC1B,UAAU;EACZ;EAEA,SAAS,iBAAiB;GACxB,UAAU;GACV,MAAM;EACR;EAEA,SAAS,qBAAqB;GAC5B,IAAI,SAAS;GACb,MAAM;EACR;EAEA,QAAQ,kBAAkB,EAAE,IAAI,CAAC;;uBApH/B,YAkBW,UAAA,EAlBD,IAAG,OAAM,GAAA,CACjB,YAgBa,YAAA;IAhBD,MAAK;IAAU,QAAA;IAAQ,cAAW,OAAA,OAAA,OAAA,MAAA,WAAE,KAAI,SAAA;;2BAe7C,CAVG,QAAA,QAAA,gBAAA,UAAA,GAJR,mBAcK,MAAA;;KAbF,OAAK,eAAA,CAAG,MAAA,GAAA,EAAI,GAAG,MAAA,GAAA,EAAI,EAAE,MAAA,IAAA,CAAI,CAAA,CAAA;KACzB,OAAK,eAAE,MAAA,KAAK;cACT;KAAJ,KAAI;0BAIJ,mBAME,UAAA,MAAA,WALe,MAAA,QAAR,SAAI;yBADb,YAME,aAAA;MAJO;MACN,UAAU,gBAAgB,IAAI;MAC9B,cAAa;MACb,YAAW;;6CAPG,kBAAkB,CAAA,CAAA,IAAA,mBAAA,QAAA,IAAA,CAAA,CAAA"}

package/dist/components/context-menu/di.js

@@ -1,6 +0,0 @@
-//#region src/components/context-menu/di.ts
-const ContextMenuDIKey = Symbol("ContextMenuDIKey");
-//#endregion
-export { ContextMenuDIKey };
-
-//# sourceMappingURL=di.js.map