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/table/src/PopoverColumn.vue b/packages/table/src/PopoverColumn.vue index a4f0863a..30d29b8f 100644 --- a/packages/table/src/PopoverColumn.vue +++ b/packages/table/src/PopoverColumn.vue @@ -6,6 +6,7 @@ :placement="config.popover.placement" :width="config.popover.width" :trigger="config.popover.trigger" + :destroy-on-close="config.popover.destroyOnClose ?? true" > { table?: ColumnConfig[]; formatter?: 'datetime' | ((item: any, row: T) => any); popover?: { - placement: + placement?: | 'auto' | 'auto-start' | 'auto-end' @@ -66,9 +66,10 @@ export interface ColumnConfig { | 'right-end' | 'left-start' | 'left-end'; - width: string | number; - trigger: 'hover' | 'click'; - tableEmbed: boolean; + width?: string | number; + trigger?: 'hover' | 'click'; + tableEmbed?: boolean; + destroyOnClose?: boolean; }; sortable?: boolean | 'custom'; action?: 'tip' | 'actionLink' | 'img' | 'link' | 'tag';