@veltra/desktop 1.0.13 → 1.0.15

package/dist/components/code-editor/style2.css

@@ -16,34 +16,102 @@
 */
 /** 暗色：data-theme 与系统偏好，与 UITheme.injectBuiltInThemes 选择器策略一致 */
 .u-code-editor {
-  max-height: 300px;
+  --u-code-editor-default-lines: 8;
+  --u-code-editor-line-height: 1.6;
+  --u-code-editor-font-size: 13px;
+  --u-code-editor-padding-block: 6px;
+  --u-code-editor-bg: var(--u-bg-color-top);
+  --u-code-editor-fg: var(--u-text-color-main);
+  --u-code-editor-border: var(--u-border-color);
+  --u-code-editor-gutter-fg: var(--u-text-color-placeholder);
+  --u-code-editor-active-bg: rgba(30, 136, 229, 0.06);
+  --u-code-editor-selection-bg: rgba(30, 136, 229, 0.18);
+  position: relative;
   width: 100%;
-  box-shadow: inset 0 0 1px 1px var(--u-border-color);
-  transition: box-shadow 0.25s ease;
+  max-height: 480px;
+  border-radius: var(--u-radius-default);
+  background-color: var(--u-code-editor-bg);
+  box-shadow: inset 0 0 0 1px var(--u-code-editor-border);
+  overflow: hidden;
+  transition: box-shadow 0.2s ease;
 }
-.u-code-editor:hover {
-  box-shadow: inset 0 0 1px 1px var(--u-color-primary);
+.u-code-editor:hover, .u-code-editor:focus-within {
+  box-shadow: inset 0 0 0 1px var(--u-color-primary);
 }
-.u-code-editor--small {
-  min-height: var(--u-form-component-height-small);
-  border-radius: var(--u-radius-small);
-  padding: 2px calc(var(--u-gap-small) / 2);
+.u-code-editor .cm-editor {
+  background: transparent;
+  color: var(--u-code-editor-fg);
+  font-size: var(--u-code-editor-font-size);
+  line-height: var(--u-code-editor-line-height);
+  font-family: ui-monospace, "JetBrains Mono", "Fira Code", "SFMono-Regular", Menlo, Consolas, "Liberation Mono", monospace;
+  outline: none;
 }
-.u-code-editor--default {
-  min-height: var(--u-form-component-height-default);
-  border-radius: var(--u-radius-default);
-  padding: 2px calc(var(--u-gap-default) / 2);
+.u-code-editor .cm-editor.cm-focused {
+  outline: none;
+}
+.u-code-editor .cm-editor .cm-scroller {
+  font-family: inherit;
+  line-height: inherit;
+  overflow: visible;
+}
+.u-code-editor .cm-editor .cm-content {
+  padding: var(--u-code-editor-padding-block) 0;
+  min-height: calc(var(--u-code-editor-default-lines) * var(--u-code-editor-line-height) * var(--u-code-editor-font-size) + var(--u-code-editor-padding-block) * 2);
+  caret-color: var(--u-color-primary);
+}
+.u-code-editor .cm-editor .cm-line {
+  padding: 0 8px;
+}
+.u-code-editor .cm-editor .cm-gutters {
+  background-color: transparent;
+  color: var(--u-code-editor-gutter-fg);
+  border-right: 1px solid var(--u-code-editor-border);
+  user-select: none;
+}
+.u-code-editor .cm-editor .cm-gutterElement-phantom {
+  color: var(--u-code-editor-gutter-fg);
+  opacity: 0.45;
+  padding: 0 3px 0 5px;
+  text-align: right;
+  white-space: nowrap;
+  min-width: 1ch;
+  box-sizing: border-box;
+  pointer-events: none;
 }
-.u-code-editor--large {
-  min-height: var(--u-form-component-height-large);
-  border-radius: var(--u-radius-large);
-  padding: 2px calc(var(--u-gap-large) / 2);
+.u-code-editor .cm-editor .cm-activeLineGutter,
+.u-code-editor .cm-editor .cm-activeLine {
+  background-color: var(--u-code-editor-active-bg);
+}
+.u-code-editor .cm-editor .cm-selectionBackground,
+.u-code-editor .cm-editor ::selection {
+  background-color: var(--u-code-editor-selection-bg);
+}
+.u-code-editor .cm-editor .cm-cursor {
+  border-left-color: var(--u-color-primary);
+}
+.u-code-editor.is-dark {
+  --u-code-editor-bg: #282c34;
+  --u-code-editor-fg: #abb2bf;
+  --u-code-editor-border: rgba(255, 255, 255, 0.08);
+  --u-code-editor-gutter-fg: #5c6370;
+  --u-code-editor-active-bg: rgba(255, 255, 255, 0.04);
+  --u-code-editor-selection-bg: rgba(99, 162, 255, 0.25);
 }
 .u-code-editor.is-disabled {
   background-color: var(--u-color-disabled);
-  box-shadow: inset 0 0 1px 1px var(--u-border-color);
+  box-shadow: inset 0 0 0 1px var(--u-code-editor-border);
+  cursor: not-allowed;
+}
+.u-code-editor.is-disabled:hover, .u-code-editor.is-disabled:focus-within {
+  box-shadow: inset 0 0 0 1px var(--u-code-editor-border);
+}
+.u-code-editor.is-disabled .cm-editor,
+.u-code-editor.is-disabled .cm-content {
   cursor: not-allowed;
 }
 .u-code-editor.is-readonly {
-  box-shadow: none;
+  box-shadow: inset 0 0 0 1px var(--u-code-editor-border);
+}
+.u-code-editor.is-readonly:hover, .u-code-editor.is-readonly:focus-within {
+  box-shadow: inset 0 0 0 1px var(--u-code-editor-border);
 }

package/dist/components/dialog/dialog.js

@@ -93,11 +93,15 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
 			x: 0,
 			y: 0
 		};
-		/** 更新弹框位置 */
+		/**
+		* 更新弹框位置
+		* 使用独立 `translate` 而非整体 `transform`, 与 spring 动画的 `scale` 解耦,
+		* 避免动画期间整体 transform 被关键帧覆盖、动画结束后又"啪"地跳回内联位置
+		*/
 		const updateDialogTransform = (x, y) => {
 			const dom = dialogRef.value;
 			if (!dom) return;
-			setStyles(dom, { transform: `scale3d(1, 1, 1) translate3d(${x}px, ${y}px, 0)` });
+			setStyles(dom, { translate: `${x}px ${y}px` });
 		};
 		useDrag({
 			target: headerRef,

package/dist/components/dialog/dialog.js.map

@@ -1 +1 @@
-{"version":3,"file":"dialog.js","names":["$attrs","$slots"],"sources":["../../../src/components/dialog/dialog.vue"],"sourcesContent":["<template>\n  <Teleport to=\"body\">\n    <transition name=\"fade\" @after-leave=\"emit('closed')\" @enter=\"onOverlayEnter\">\n      <div\n        v-if=\"overlayVisible || opened\"\n        v-show=\"overlayVisible\"\n        :class=\"[cls.e('overlay'), bem.is('modal', modal)]\"\n        ref=\"overlayRef\"\n        @mousedown=\"modal && close()\"\n        @keyup.esc=\"close\"\n        tabindex=\"0\"\n      >\n        <transition name=\"spring\" @after-leave=\"onAfterDialogLeave\">\n          <div\n            v-if=\"dialogVisible\"\n            v-bind=\"$attrs\"\n            :class=\"className\"\n            ref=\"dialogRef\"\n            @mousedown.stop=\"handleIncreaseZIndex\"\n          >\n            <section :class=\"headerCls\" ref=\"headerRef\" @transitionend.stop @transitioncancel.stop>\n              <div :class=\"cls.e('title')\" @mousedown.stop>\n                <slot name=\"header\">\n                  {{ header || title }}\n                </slot>\n              </div>\n\n              <div :class=\"cls.e('buttons')\" @mousedown.stop>\n                <u-icon\n                  v-if=\"maximized\"\n                  :class=\"cls.e('btn-recover')\"\n                  @click=\"toggleMaximize(false)\"\n                  title=\"还原\"\n                >\n                  <Recover />\n                </u-icon>\n                <u-icon\n                  v-else\n                  :class=\"cls.e('btn-maximize')\"\n                  @click=\"toggleMaximize(true)\"\n                  title=\"最大化\"\n                >\n                  <Maximum />\n                </u-icon>\n                <u-icon :class=\"cls.e('btn-close')\" @click=\"close\" title=\"关闭\">\n                  <Close />\n                </u-icon>\n              </div>\n            </section>\n\n            <u-scroll\n              tag=\"section\"\n              :class=\"cls.e('body')\"\n              ref=\"bodyRef\"\n              :content-style=\"{ height: maximized ? '100%' : undefined }\"\n              @transitionend.stop\n              @transitioncancel.stop\n            >\n              <slot v-bind=\"{ maximized }\" />\n            </u-scroll>\n\n            <section ref=\"footerRef\" :class=\"footerCls\" v-if=\"$slots.footer\">\n              <slot name=\"footer\" v-bind=\"{ close }\" />\n            </section>\n          </div>\n        </transition>\n      </div>\n    </transition>\n  </Teleport>\n\n  <!-- 触发 -->\n  <UNodeRender @click=\"visible = !visible\" :content=\"getTriggerNode()\" ref=\"triggerRef\" />\n</template>\n\n<script lang=\"ts\" setup>\nimport { useDrag, useFallbackProps } from '@veltra/compositions'\nimport { Close, Maximum, Recover } from '@veltra/icons/normal'\nimport { bem, extractNormalVNodes, setStyles, zIndex } from '@veltra/utils'\nimport { shallowRef, watch, computed, provide, nextTick } from 'vue'\n\nimport type { DialogProps, DialogEmits, DialogExposed, ComponentSize } from '../../types'\nimport type { ScrollExposed } from '../../types'\nimport { UIcon } from '../icon'\nimport { UNodeRender } from '../node-render'\nimport { UScroll } from '../scroll'\nimport { DialogDIKey } from './di'\nimport { useMaximum } from './use-maximum'\n\ndefineOptions({\n  name: 'Dialog',\n  inheritAttrs: false\n})\n\nconst props = withDefaults(defineProps<DialogProps>(), {\n  modal: true,\n  modelValue: true,\n  autoScroll: true\n})\nconst emit = defineEmits<DialogEmits>()\n\nconst slots = defineSlots<{\n  footer?: (props: { close: () => void }) => any\n  trigger?: () => any\n  header?: () => any\n  default?: (props: {\n    /** 弹框是否最大化了 */\n    maximized: boolean\n  }) => any\n}>()\n\nconst cls = bem('dialog')\nconst headerCls = [cls.e('header')]\nconst footerCls = [cls.e('footer')]\n\nconst { size } = useFallbackProps([props], { size: 'default' as ComponentSize })\n\nconst overlayRef = shallowRef<HTMLDivElement>()\n\n/** 弹框模板引用 */\nconst dialogRef = shallowRef<HTMLDivElement>()\n\n/** 弹框头部模板引用 */\nconst headerRef = shallowRef<HTMLDivElement>()\n\n/** 弹框body模板引用 */\nconst bodyRef = shallowRef<ScrollExposed>()\n\n/** 弹框footer模板引用 */\nconst footerRef = shallowRef<HTMLDivElement>()\n\nconst visible = defineModel<boolean>({\n  default: false\n})\n\nconst overlayVisible = shallowRef(false)\nconst dialogVisible = shallowRef(false)\n\nwatch(visible, (v) => {\n  if (v) {\n    overlayVisible.value = true\n  } else {\n    dialogVisible.value = false\n  }\n})\n\nfunction getTriggerNode() {\n  const nodes = slots.trigger?.()\n  if (!nodes?.length) return null\n\n  const node = extractNormalVNodes(nodes)[0]\n  return node\n}\n\nfunction onOverlayEnter() {\n  dialogVisible.value = true\n}\n\nfunction onAfterDialogLeave() {\n  overlayVisible.value = false\n}\n\nconst { toggleMaximize, maximized } = useMaximum({\n  dialogRef,\n  cls\n})\n\nconst className = computed(() => {\n  return [cls.b, cls.m(size.value)]\n})\n\n/**\n * 是否弹出过, 用于控制下一次弹出时是否采用v-show的方式\n */\nlet opened = false\n\nwatch(visible, (v) => {\n  if (!v) return\n\n  if (!opened) opened = true\n\n  // 初始化位置偏移量\n  translated.x = 0\n  translated.y = 0\n\n  nextTick(() => {\n    setStyles(overlayRef.value!, { zIndex: zIndex() })\n  })\n})\n\n/** dialog位移的位置 */\nconst translated = {\n  x: 0,\n  y: 0\n}\n\n/** 更新弹框位置 */\nconst updateDialogTransform = (x: number, y: number) => {\n  const dom = dialogRef.value\n  if (!dom) return\n  setStyles(dom, {\n    transform: `scale3d(1, 1, 1) translate3d(${x}px, ${y}px, 0)`\n  })\n}\n\n// 运用拖拽\nuseDrag({\n  target: headerRef,\n\n  onDragStart() {\n    handleIncreaseZIndex()\n  },\n\n  onDrag({ x, y }) {\n    if (maximized.value) return\n    updateDialogTransform(translated.x + x, translated.y + y)\n  },\n\n  onDragEnd({ x, y }) {\n    if (maximized.value) return\n    translated.x += x\n    translated.y += y\n\n    // 字体模糊的bug修正\n    if (translated.x % 2 !== 0) {\n      translated.x += x < 0 ? 1 : -1\n    }\n    if (translated.y % 2 !== 0) {\n      translated.y += y < 0 ? 1 : -1\n    }\n    updateDialogTransform(translated.x, translated.y)\n  }\n})\n\nfunction handleIncreaseZIndex() {\n  if (props.modal) return\n  setStyles(overlayRef.value!, { zIndex: zIndex() })\n}\n\n/** 关闭 */\nconst close = () => {\n  visible.value = false\n}\n\nprovide(DialogDIKey, {\n  visible\n})\n\ndefineExpose<DialogExposed>({\n  close\n})\n</script>\n"],"mappings":"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"}
+{"version":3,"file":"dialog.js","names":["$attrs","$slots"],"sources":["../../../src/components/dialog/dialog.vue"],"sourcesContent":["<template>\n  <Teleport to=\"body\">\n    <transition name=\"fade\" @after-leave=\"emit('closed')\" @enter=\"onOverlayEnter\">\n      <div\n        v-if=\"overlayVisible || opened\"\n        v-show=\"overlayVisible\"\n        :class=\"[cls.e('overlay'), bem.is('modal', modal)]\"\n        ref=\"overlayRef\"\n        @mousedown=\"modal && close()\"\n        @keyup.esc=\"close\"\n        tabindex=\"0\"\n      >\n        <transition name=\"spring\" @after-leave=\"onAfterDialogLeave\">\n          <div\n            v-if=\"dialogVisible\"\n            v-bind=\"$attrs\"\n            :class=\"className\"\n            ref=\"dialogRef\"\n            @mousedown.stop=\"handleIncreaseZIndex\"\n          >\n            <section :class=\"headerCls\" ref=\"headerRef\" @transitionend.stop @transitioncancel.stop>\n              <div :class=\"cls.e('title')\" @mousedown.stop>\n                <slot name=\"header\">\n                  {{ header || title }}\n                </slot>\n              </div>\n\n              <div :class=\"cls.e('buttons')\" @mousedown.stop>\n                <u-icon\n                  v-if=\"maximized\"\n                  :class=\"cls.e('btn-recover')\"\n                  @click=\"toggleMaximize(false)\"\n                  title=\"还原\"\n                >\n                  <Recover />\n                </u-icon>\n                <u-icon\n                  v-else\n                  :class=\"cls.e('btn-maximize')\"\n                  @click=\"toggleMaximize(true)\"\n                  title=\"最大化\"\n                >\n                  <Maximum />\n                </u-icon>\n                <u-icon :class=\"cls.e('btn-close')\" @click=\"close\" title=\"关闭\">\n                  <Close />\n                </u-icon>\n              </div>\n            </section>\n\n            <u-scroll\n              tag=\"section\"\n              :class=\"cls.e('body')\"\n              ref=\"bodyRef\"\n              :content-style=\"{ height: maximized ? '100%' : undefined }\"\n              @transitionend.stop\n              @transitioncancel.stop\n            >\n              <slot v-bind=\"{ maximized }\" />\n            </u-scroll>\n\n            <section ref=\"footerRef\" :class=\"footerCls\" v-if=\"$slots.footer\">\n              <slot name=\"footer\" v-bind=\"{ close }\" />\n            </section>\n          </div>\n        </transition>\n      </div>\n    </transition>\n  </Teleport>\n\n  <!-- 触发 -->\n  <UNodeRender @click=\"visible = !visible\" :content=\"getTriggerNode()\" ref=\"triggerRef\" />\n</template>\n\n<script lang=\"ts\" setup>\nimport { useDrag, useFallbackProps } from '@veltra/compositions'\nimport { Close, Maximum, Recover } from '@veltra/icons/normal'\nimport { bem, extractNormalVNodes, setStyles, zIndex } from '@veltra/utils'\nimport { shallowRef, watch, computed, provide, nextTick } from 'vue'\n\nimport type { DialogProps, DialogEmits, DialogExposed, ComponentSize } from '../../types'\nimport type { ScrollExposed } from '../../types'\nimport { UIcon } from '../icon'\nimport { UNodeRender } from '../node-render'\nimport { UScroll } from '../scroll'\nimport { DialogDIKey } from './di'\nimport { useMaximum } from './use-maximum'\n\ndefineOptions({\n  name: 'Dialog',\n  inheritAttrs: false\n})\n\nconst props = withDefaults(defineProps<DialogProps>(), {\n  modal: true,\n  modelValue: true,\n  autoScroll: true\n})\nconst emit = defineEmits<DialogEmits>()\n\nconst slots = defineSlots<{\n  footer?: (props: { close: () => void }) => any\n  trigger?: () => any\n  header?: () => any\n  default?: (props: {\n    /** 弹框是否最大化了 */\n    maximized: boolean\n  }) => any\n}>()\n\nconst cls = bem('dialog')\nconst headerCls = [cls.e('header')]\nconst footerCls = [cls.e('footer')]\n\nconst { size } = useFallbackProps([props], { size: 'default' as ComponentSize })\n\nconst overlayRef = shallowRef<HTMLDivElement>()\n\n/** 弹框模板引用 */\nconst dialogRef = shallowRef<HTMLDivElement>()\n\n/** 弹框头部模板引用 */\nconst headerRef = shallowRef<HTMLDivElement>()\n\n/** 弹框body模板引用 */\nconst bodyRef = shallowRef<ScrollExposed>()\n\n/** 弹框footer模板引用 */\nconst footerRef = shallowRef<HTMLDivElement>()\n\nconst visible = defineModel<boolean>({\n  default: false\n})\n\nconst overlayVisible = shallowRef(false)\nconst dialogVisible = shallowRef(false)\n\nwatch(visible, (v) => {\n  if (v) {\n    overlayVisible.value = true\n  } else {\n    dialogVisible.value = false\n  }\n})\n\nfunction getTriggerNode() {\n  const nodes = slots.trigger?.()\n  if (!nodes?.length) return null\n\n  const node = extractNormalVNodes(nodes)[0]\n  return node\n}\n\nfunction onOverlayEnter() {\n  dialogVisible.value = true\n}\n\nfunction onAfterDialogLeave() {\n  overlayVisible.value = false\n}\n\nconst { toggleMaximize, maximized } = useMaximum({\n  dialogRef,\n  cls\n})\n\nconst className = computed(() => {\n  return [cls.b, cls.m(size.value)]\n})\n\n/**\n * 是否弹出过, 用于控制下一次弹出时是否采用v-show的方式\n */\nlet opened = false\n\nwatch(visible, (v) => {\n  if (!v) return\n\n  if (!opened) opened = true\n\n  // 初始化位置偏移量\n  translated.x = 0\n  translated.y = 0\n\n  nextTick(() => {\n    setStyles(overlayRef.value!, { zIndex: zIndex() })\n  })\n})\n\n/** dialog位移的位置 */\nconst translated = {\n  x: 0,\n  y: 0\n}\n\n/**\n * 更新弹框位置\n * 使用独立 `translate` 而非整体 `transform`, 与 spring 动画的 `scale` 解耦,\n * 避免动画期间整体 transform 被关键帧覆盖、动画结束后又\"啪\"地跳回内联位置\n */\nconst updateDialogTransform = (x: number, y: number) => {\n  const dom = dialogRef.value\n  if (!dom) return\n  setStyles(dom, {\n    translate: `${x}px ${y}px`\n  })\n}\n\n// 运用拖拽\nuseDrag({\n  target: headerRef,\n\n  onDragStart() {\n    handleIncreaseZIndex()\n  },\n\n  onDrag({ x, y }) {\n    if (maximized.value) return\n    updateDialogTransform(translated.x + x, translated.y + y)\n  },\n\n  onDragEnd({ x, y }) {\n    if (maximized.value) return\n    translated.x += x\n    translated.y += y\n\n    // 字体模糊的bug修正\n    if (translated.x % 2 !== 0) {\n      translated.x += x < 0 ? 1 : -1\n    }\n    if (translated.y % 2 !== 0) {\n      translated.y += y < 0 ? 1 : -1\n    }\n    updateDialogTransform(translated.x, translated.y)\n  }\n})\n\nfunction handleIncreaseZIndex() {\n  if (props.modal) return\n  setStyles(overlayRef.value!, { zIndex: zIndex() })\n}\n\n/** 关闭 */\nconst close = () => {\n  visible.value = false\n}\n\nprovide(DialogDIKey, {\n  visible\n})\n\ndefineExpose<DialogExposed>({\n  close\n})\n</script>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA6FA,MAAM,QAAQ;EAKd,MAAM,OAAO;EAEb,MAAM,QAAQ,UAAA;EAUd,MAAM,MAAM,IAAI,SAAQ;EACxB,MAAM,YAAY,CAAC,IAAI,EAAE,SAAS,CAAA;EAClC,MAAM,YAAY,CAAC,IAAI,EAAE,SAAS,CAAA;EAElC,MAAM,EAAE,SAAS,iBAAiB,CAAC,MAAM,EAAE,EAAE,MAAM,WAA4B,CAAA;EAE/E,MAAM,aAAa,YAA2B;;EAG9C,MAAM,YAAY,YAA2B;;EAG7C,MAAM,YAAY,YAA2B;;EAG7C,MAAM,UAAU,YAA0B;;EAG1C,MAAM,YAAY,YAA2B;EAE7C,MAAM,UAAU,SAAoB,SAAA,aAEnC;EAED,MAAM,iBAAiB,WAAW,MAAK;EACvC,MAAM,gBAAgB,WAAW,MAAK;AAEtC,QAAM,UAAU,MAAM;AACpB,OAAI,EACF,gBAAe,QAAQ;OAEvB,eAAc,QAAQ;IAEzB;EAED,SAAS,iBAAiB;GACxB,MAAM,QAAQ,MAAM,WAAU;AAC9B,OAAI,CAAC,OAAO,OAAQ,QAAO;AAG3B,UADa,oBAAoB,MAAM,CAAC;;EAI1C,SAAS,iBAAiB;AACxB,iBAAc,QAAQ;;EAGxB,SAAS,qBAAqB;AAC5B,kBAAe,QAAQ;;EAGzB,MAAM,EAAE,gBAAgB,cAAc,WAAW;GAC/C;GACA;GACD,CAAA;EAED,MAAM,YAAY,eAAe;AAC/B,UAAO,CAAC,IAAI,GAAG,IAAI,EAAE,KAAK,MAAM,CAAA;IACjC;;;;EAKD,IAAI,SAAS;AAEb,QAAM,UAAU,MAAM;AACpB,OAAI,CAAC,EAAG;AAER,OAAI,CAAC,OAAQ,UAAS;AAGtB,cAAW,IAAI;AACf,cAAW,IAAI;AAEf,kBAAe;AACb,cAAU,WAAW,OAAQ,EAAE,QAAQ,QAAQ,EAAE,CAAA;KAClD;IACF;;EAGD,MAAM,aAAa;GACjB,GAAG;GACH,GAAG;GACL;;;;;;EAOA,MAAM,yBAAyB,GAAW,MAAc;GACtD,MAAM,MAAM,UAAU;AACtB,OAAI,CAAC,IAAK;AACV,aAAU,KAAK,EACb,WAAW,GAAG,EAAE,KAAK,EAAE,KACxB,CAAA;;AAIH,UAAQ;GACN,QAAQ;GAER,cAAc;AACZ,0BAAqB;;GAGvB,OAAO,EAAE,GAAG,KAAK;AACf,QAAI,UAAU,MAAO;AACrB,0BAAsB,WAAW,IAAI,GAAG,WAAW,IAAI,EAAC;;GAG1D,UAAU,EAAE,GAAG,KAAK;AAClB,QAAI,UAAU,MAAO;AACrB,eAAW,KAAK;AAChB,eAAW,KAAK;AAGhB,QAAI,WAAW,IAAI,MAAM,EACvB,YAAW,KAAK,IAAI,IAAI,IAAI;AAE9B,QAAI,WAAW,IAAI,MAAM,EACvB,YAAW,KAAK,IAAI,IAAI,IAAI;AAE9B,0BAAsB,WAAW,GAAG,WAAW,EAAC;;GAEnD,CAAA;EAED,SAAS,uBAAuB;AAC9B,OAAI,MAAM,MAAO;AACjB,aAAU,WAAW,OAAQ,EAAE,QAAQ,QAAQ,EAAE,CAAA;;;EAInD,MAAM,cAAc;AAClB,WAAQ,QAAQ;;AAGlB,UAAQ,aAAa,EACnB,SACD,CAAA;AAED,WAA4B,EAC1B,OACD,CAAA;;;kBA5PC,YAmEW,UAAA,EAnED,IAAG,QAAM,EAAA,CACjB,YAiEa,YAAA;KAjED,MAAK;KAAQ,cAAW,OAAA,OAAA,OAAA,MAAA,WAAE,KAAI,SAAA;KAAa,SAAO;;4BAgEtD,CA9DE,eAAA,SAAkB,MAAA,OAAM,GAAA,gBAAA,WAAA,EADhC,mBA+DM,OAAA;;MA5DH,OAAK,eAAA,CAAG,MAAA,IAAG,CAAC,EAAC,UAAA,EAAa,MAAA,IAAG,CAAC,GAAE,SAAU,QAAA,MAAK,CAAA,CAAA;eAC5C;MAAJ,KAAI;MACH,aAAS,OAAA,OAAA,OAAA,MAAA,WAAE,QAAA,SAAS,OAAK;MACzB,SAAK,SAAM,OAAK,CAAA,MAAA,CAAA;MACjB,UAAS;SAET,YAqDa,YAAA;MArDD,MAAK;MAAU,cAAa;;6BAoDhC,CAlDE,cAAA,SAAA,WAAA,EADR,mBAmDM,OAnDN,WAmDM,EAAA,KAAA,GAAA,EAjDIA,KAAAA,QAAM;OACb,OAAO,UAAA;gBACJ;OAAJ,KAAI;OACH,aAAS,cAAO,sBAAoB,CAAA,OAAA,CAAA;;OAErC,mBA4BU,WAAA;QA5BA,OAAK,eAAE,UAAS;iBAAM;QAAJ,KAAI;QAAa,iBAAa,OAAA,OAAA,OAAA,KAAA,oBAAd,IAAmB,CAAA,OAAA,CAAA;QAAE,oBAAgB,OAAA,OAAA,OAAA,KAAA,oBAAjB,IAAsB,CAAA,OAAA,CAAA;WACpF,mBAIM,OAAA;QAJA,OAAK,eAAE,MAAA,IAAG,CAAC,EAAC,QAAA,CAAA;QAAY,aAAS,OAAA,OAAA,OAAA,KAAA,oBAAV,IAAe,CAAA,OAAA,CAAA;WAC1C,WAEO,KAAA,QAAA,UAAA,EAAA,QAAA,CAAA,gBAAA,gBADF,QAAA,UAAU,QAAA,MAAK,EAAA,EAAA,CAAA,CAAA,CAAA,EAAA,GAAA,EAItB,mBAoBM,OAAA;QApBA,OAAK,eAAE,MAAA,IAAG,CAAC,EAAC,UAAA,CAAA;QAAc,aAAS,OAAA,OAAA,OAAA,KAAA,oBAAV,IAAe,CAAA,OAAA,CAAA;WAEpC,MAAA,UAAS,IAAA,WAAA,EADjB,YAOS,MAAA,YAAA,EAAA;;QALN,OAAK,eAAE,MAAA,IAAG,CAAC,EAAC,cAAA,CAAA;QACZ,SAAK,OAAA,OAAA,OAAA,MAAA,WAAE,MAAA,eAAc,CAAA,MAAA;QACtB,OAAM;;+BAEK,CAAX,YAAW,MAAA,QAAA,CAAA,CAAA,CAAA;;yCAEb,YAOS,MAAA,YAAA,EAAA;;QALN,OAAK,eAAE,MAAA,IAAG,CAAC,EAAC,eAAA,CAAA;QACZ,SAAK,OAAA,OAAA,OAAA,MAAA,WAAE,MAAA,eAAc,CAAA,KAAA;QACtB,OAAM;;+BAEK,CAAX,YAAW,MAAA,QAAA,CAAA,CAAA,CAAA;;0BAEb,YAES,MAAA,YAAA,EAAA;QAFA,OAAK,eAAE,MAAA,IAAG,CAAC,EAAC,YAAA,CAAA;QAAgB,SAAO;QAAO,OAAM;;+BAC9C,CAAT,YAAS,MAAA,MAAA,CAAA,CAAA,CAAA;;;OAKf,YASW,MAAA,YAAA,EAAA;QART,KAAI;QACH,OAAK,eAAE,MAAA,IAAG,CAAC,EAAC,OAAA,CAAA;iBACT;QAAJ,KAAI;QACH,iBAAa,EAAA,QAAY,MAAA,UAAS,GAAA,SAAY,KAAA,GAAS;QACvD,iBAAa,OAAA,OAAA,OAAA,KAAA,oBAAd,IAAmB,CAAA,OAAA,CAAA;QAClB,oBAAgB,OAAA,OAAA,OAAA,KAAA,oBAAjB,IAAsB,CAAA,OAAA,CAAA;;+BAES,CAA/B,WAA+B,KAAA,QAAA,WAAA,eAAA,mBAAA,EAAA,WAAf,MAAA,UAAS,EAAA,CAAA,CAAA,CAAA,CAAA,CAAA;;;OAGuBC,KAAAA,OAAO,UAAA,WAAA,EAAzD,mBAEU,WAAA;;iBAFG;QAAJ,KAAI;QAAa,OAAK,eAAE,UAAS;WACxC,WAAyC,KAAA,QAAA,UAAA,eAAA,mBAAA,EAAX,OAAK,CAAA,CAAA,CAAA,CAAA,EAAA,IAAA,IAAA,mBAAA,QAAA,KAAA;;;yBAzDjC,eAAA,MAAc,CAAA,CAAA,GAAA,mBAAA,QAAA,KAAA,CAAA,CAAA;;;IAiE5B,mBAAA,OAAW;IACX,YAAwF,MAAA,WAAA,EAAA;KAA1E,SAAK,OAAA,QAAA,OAAA,OAAA,WAAE,QAAA,QAAO,CAAI,QAAA;KAAU,SAAS,gBAAc;KAAI,KAAI"}

package/dist/components/dialog/style2.css

@@ -36,7 +36,6 @@
 .u-dialog {
   pointer-events: auto;
   border-radius: var(--u-radius-large);
-  will-change: transform, opacity;
   display: flex;
   flex-direction: column;
   max-height: 90vh;
@@ -133,7 +132,7 @@
   width: 100vw !important;
   height: 100vh !important;
   max-height: 100vh;
-  transform: translate3d(0, 0, 0) scale3d(1, 1, 1) !important;
+  translate: 0 0 !important;
 }
 .dialog-maximize-enter-to .u-dialog__header:active {
   cursor: default;
@@ -141,7 +140,7 @@
 
 .dialog-maximize-enter-active,
 .dialog-maximize-leave-active {
-  transition-property: width, height, transform;
+  transition-property: width, height, translate;
   transition-duration: 0.25s;
 }
 

package/dist/components/expression-editor/components/path-preview.js

@@ -0,0 +1,27 @@
+import { Fragment, createCommentVNode, createElementBlock, createElementVNode, defineComponent, normalizeClass, normalizeStyle, openBlock, renderList, toDisplayString, unref } from "vue";
+import { bem } from "@veltra/utils";
+//#region src/components/expression-editor/components/path-preview.vue
+const _sfc_main = /* @__PURE__ */ defineComponent({
+	name: "ExpressionPathPreview",
+	__name: "path-preview",
+	props: { path: {} },
+	setup(__props) {
+		const cls = bem("expression-editor");
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", { class: normalizeClass(unref(cls).e("path-preview")) }, [createElementVNode("div", { class: normalizeClass(unref(cls).e("path-preview-title")) }, "变量路径", 2), createElementVNode("ul", { class: normalizeClass(unref(cls).e("path-tree")) }, [(openBlock(true), createElementBlock(Fragment, null, renderList(__props.path, (node, i) => {
+				return openBlock(), createElementBlock("li", {
+					key: `${i}-${node.value || node.label}`,
+					class: normalizeClass([unref(cls).e("path-tree-item"), unref(bem).is("active", i === __props.path.length - 1)]),
+					style: normalizeStyle({ paddingLeft: `${i * 14}px` })
+				}, [i > 0 ? (openBlock(), createElementBlock("span", {
+					key: 0,
+					class: normalizeClass(unref(cls).e("path-tree-branch"))
+				}, "└", 2)) : createCommentVNode("v-if", true), createElementVNode("span", { class: normalizeClass(unref(cls).e("path-tree-label")) }, toDisplayString(node.label), 3)], 6);
+			}), 128))], 2)], 2);
+		};
+	}
+});
+//#endregion
+export { _sfc_main as default };
+
+//# sourceMappingURL=path-preview.js.map

package/dist/components/expression-editor/components/path-preview.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"path-preview.js","names":[],"sources":["../../../../src/components/expression-editor/components/path-preview.vue"],"sourcesContent":["<template>\n  <div :class=\"cls.e('path-preview')\">\n    <div :class=\"cls.e('path-preview-title')\">变量路径</div>\n    <ul :class=\"cls.e('path-tree')\">\n      <li\n        v-for=\"(node, i) in path\"\n        :key=\"`${i}-${node.value || node.label}`\"\n        :class=\"[cls.e('path-tree-item'), bem.is('active', i === path.length - 1)]\"\n        :style=\"{ paddingLeft: `${i * 14}px` }\"\n      >\n        <span v-if=\"i > 0\" :class=\"cls.e('path-tree-branch')\">└</span>\n        <span :class=\"cls.e('path-tree-label')\">{{ node.label }}</span>\n      </li>\n    </ul>\n  </div>\n</template>\n\n<script lang=\"ts\" setup>\nimport { bem } from '@veltra/utils'\n\nimport type { VariableItem } from '../../../types'\n\ndefineOptions({\n  name: 'ExpressionPathPreview'\n})\n\ndefineProps<{\n  path: VariableItem[]\n}>()\n\nconst cls = bem('expression-editor')\n</script>\n"],"mappings":";;;;;;;;EA8BA,MAAM,MAAM,IAAI,oBAAmB;;uBA7BjC,mBAaM,OAAA,EAbA,OAAK,eAAE,MAAA,IAAG,CAAC,EAAC,eAAA,CAAA,EAAA,EAAA,CAChB,mBAAoD,OAAA,EAA9C,OAAK,eAAE,MAAA,IAAG,CAAC,EAAC,qBAAA,CAAA,EAAA,EAAwB,QAAI,EAAA,EAC9C,mBAUK,MAAA,EAVA,OAAK,eAAE,MAAA,IAAG,CAAC,EAAC,YAAA,CAAA,EAAA,EAAA,EAAA,UAAA,KAAA,EACf,mBAQK,UAAA,MAAA,WAPiB,QAAA,OAAZ,MAAM,MAAC;wBADjB,mBAQK,MAAA;KANF,KAAG,GAAK,EAAC,GAAI,KAAK,SAAS,KAAK;KAChC,OAAK,eAAA,CAAG,MAAA,IAAG,CAAC,EAAC,iBAAA,EAAoB,MAAA,IAAG,CAAC,GAAE,UAAW,MAAM,QAAA,KAAK,SAAM,EAAA,CAAA,CAAA;KACnE,OAAK,eAAA,EAAA,aAAA,GAAoB,IAAC,GAAA,KAAA,CAAA;QAEf,IAAC,KAAA,WAAA,EAAb,mBAA8D,QAAA;;KAA1C,OAAK,eAAE,MAAA,IAAG,CAAC,EAAC,mBAAA,CAAA;OAAsB,KAAC,EAAA,IAAA,mBAAA,QAAA,KAAA,EACvD,mBAA+D,QAAA,EAAxD,OAAK,eAAE,MAAA,IAAG,CAAC,EAAC,kBAAA,CAAA,EAAA,EAAA,gBAAwB,KAAK,MAAK,EAAA,EAAA,CAAA,EAAA,EAAA"}