From 672a76d0cbd16370a6628125e84de5a4a377aac6 Mon Sep 17 00:00:00 2001 From: roymondchen Date: Wed, 21 Aug 2024 16:01:03 +0800 Subject: [PATCH] =?UTF-8?q?feat(design):=20popover=20=E6=B7=BB=E5=8A=A0des?= =?UTF-8?q?troyOnClose=20props?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/design/src/Popover.vue | 23 +++++++++++++------ packages/design/src/types.ts | 2 ++ packages/editor/src/editorProps.ts | 2 +- .../editor/src/layouts/page-bar/PageBar.vue | 8 ++++++- .../editor/src/layouts/page-bar/PageList.vue | 8 ++++++- .../data-source/DataSourceListPanel.vue | 8 ++++++- packages/editor/src/theme/page-bar.scss | 3 ++- packages/form/src/fields/Text.vue | 2 +- packages/table/src/PopoverColumn.vue | 1 + packages/table/src/schema.ts | 9 ++++---- 10 files changed, 49 insertions(+), 17 deletions(-) diff --git a/packages/design/src/Popover.vue b/packages/design/src/Popover.vue index a56066d4..3cdf3317 100644 --- a/packages/design/src/Popover.vue +++ b/packages/design/src/Popover.vue @@ -2,12 +2,14 @@
@@ -24,7 +26,9 @@ import { useZIndex } from './index'; import type { PopoverProps } from './types'; defineSlots<{ + /** 触发 Popover 显示的 HTML 元素 */ reference(props: {}): any; + /** Popover 内嵌 HTML 文本 */ default(props: {}): any; }>(); @@ -37,6 +41,8 @@ const props = withDefaults(defineProps(), { trigger: 'hover', disabled: false, visible: undefined, + tabindex: 0, + destroyOnClose: false, }); const popoverVisible = ref(false); @@ -84,12 +90,11 @@ onMounted(() => { }); const zIndex = useZIndex(); -watch([referenceElementRef, popperElementRef], ([referenceElement, popperElement]) => { +watch([referenceElementRef, popperElementRef, popoverVisible], ([referenceElement, popperElement, popoverVisible]) => { destroy(); - if (!referenceElement || !popperElement) return; + if (!referenceElement || !popperElement || !popoverVisible) return; popperElement.style.zIndex = `${zIndex.nextZIndex()}`; - popperElement.focus(); instanceRef.value = createPopper(referenceElement, popperElement, { placement: props.placement || 'bottom', @@ -105,6 +110,10 @@ watch([referenceElementRef, popperElementRef], ([referenceElement, popperElement }); }); +const popperMouseenterHandler = () => { + popperElementRef.value?.focus(); +}; + const clickHandler = () => { if (props.disabled) return; @@ -129,9 +138,9 @@ const mouseleaveHandler = () => { clearTimeout(timer); } - timer = setTimeout(() => { + timer = globalThis.setTimeout(() => { popoverVisible.value = false; - }, 500); + }, 350); }; if (props.trigger === 'click' && typeof props.visible === 'undefined') { diff --git a/packages/design/src/types.ts b/packages/design/src/types.ts index e447bb5f..3118e2fa 100644 --- a/packages/design/src/types.ts +++ b/packages/design/src/types.ts @@ -230,6 +230,8 @@ export interface PopoverProps { disabled?: boolean; visible?: boolean; popperClass?: string; + tabindex?: number; + destroyOnClose?: boolean; } export interface RadioProps { diff --git a/packages/editor/src/editorProps.ts b/packages/editor/src/editorProps.ts index e51f3143..77ece155 100644 --- a/packages/editor/src/editorProps.ts +++ b/packages/editor/src/editorProps.ts @@ -82,7 +82,7 @@ export interface EditorProps { /** 禁用属性配置面板右下角显示源码的按钮 */ disabledShowSrc?: boolean; /** 中间工作区域中画布渲染的内容 */ - render?: (stage: StageCore) => HTMLDivElement | Promise; + render?: (stage: StageCore) => HTMLDivElement | void | Promise; /** 选中时会在画布上复制出一个大小相同的dom，实际拖拽的是这个dom，此方法用于干预这个dom的生成方式 */ updateDragEl?: UpdateDragEl; /** 用于设置画布上的dom是否可以被选中 */ diff --git a/packages/editor/src/layouts/page-bar/PageBar.vue b/packages/editor/src/layouts/page-bar/PageBar.vue index 8e798e96..c6662689 100644 --- a/packages/editor/src/layouts/page-bar/PageBar.vue +++ b/packages/editor/src/layouts/page-bar/PageBar.vue @@ -24,7 +24,13 @@
- +
- +
- + diff --git a/packages/editor/src/theme/page-bar.scss b/packages/editor/src/theme/page-bar.scss index fa018056..70dae269 100644 --- a/packages/editor/src/theme/page-bar.scss +++ b/packages/editor/src/theme/page-bar.scss @@ -5,12 +5,13 @@ width: 100%; .tmagic-design-button.m-editor-page-bar-switch-type-button { - margin-left: 7px; + margin-left: 10px; position: relative; top: 1px; border-radius: 3px 3px 0 0; border: 1px solid $--border-color; border-bottom: 1px solid transparent; + padding: 5px 10px; &.active { background-color: #f3f3f3; diff --git a/packages/form/src/fields/Text.vue b/packages/form/src/fields/Text.vue index 2906ad0b..ddf14071 100644 --- a/packages/form/src/fields/Text.vue +++ b/packages/form/src/fields/Text.vue @@ -1,5 +1,5 @@