fix(design,editor,tdesign-vue-next-adapter): tMagicPopover在TDesign下异常

fix #574

packages/design/src/Popover.vue

@@ -18,7 +18,7 @@ defineOptions({
   name: 'TMPopover',
 });
 
-const props = defineProps<PopoverProps>();
+const props = withDefaults(defineProps<PopoverProps>(), { visible: null });
 
 const ui = getConfig('components')?.popover;
 

packages/design/src/types.ts

@@ -228,6 +228,7 @@ export interface PopoverProps {
   content?: string;
   disabled?: boolean;
   popperClass?: string;
+  visible?: boolean | null;
 }
 
 export interface RadioProps {

packages/editor/src/theme/component-list-panel.scss

@@ -1,88 +1,96 @@
-.ui-component-panel.tmagic-design-collapse {
-  height: 100%;
-  border-top: 0 !important;
-  margin-top: 48px;
-  background-color: $--sidebar-content-background-color;
+.ui-component-panel {
+  &.tmagic-design-collapse {
+    height: 100%;
+    border-top: 0 !important;
+    margin-top: 48px;
+    background-color: $--sidebar-content-background-color;
 
-  .tmagic-design-collapse-item {
-    > div:first-of-type {
-      border-bottom: 1px solid $--border-color;
-      margin-bottom: 10px;
-    }
-  }
-
-  .el-collapse-item__header,
-  .t-collapse-panel__header {
-    background: $--sidebar-content-background-color;
-    color: $--font-color;
-    height: 25px;
-    line-height: 25px;
-    padding-left: 10px;
-    font-size: 12px;
-
-    i {
-      margin-right: 5px;
-      font-size: 14px;
-    }
-  }
-
-  .el-collapse-item__wrap,
-  .t-collapse-panel__body {
-    background: $--sidebar-content-background-color;
-    border-bottom: 0;
-
-    .el-collapse-item__content,
-    .t-collapse-panel__content {
-      padding: 10px;
-      display: flex;
-      flex-wrap: wrap;
+    .tmagic-design-collapse-item {
+      > div:first-of-type {
+        border-bottom: 1px solid $--border-color;
+        margin-bottom: 10px;
+      }
     }
 
-    .component-item {
-      display: flex;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      margin: 5px 10px;
-      box-sizing: border-box;
+    .el-collapse-item__header,
+    .t-collapse-panel__header {
+      background: $--sidebar-content-background-color;
       color: $--font-color;
-      flex-direction: column;
-      width: 42px;
-      cursor: pointer;
+      height: 25px;
+      line-height: 25px;
+      padding-left: 10px;
+      font-size: 12px;
 
       i {
-        font-size: 20px;
-        background: #fff;
-        height: 40px;
-        width: 40px;
-        line-height: 40px;
-        border-radius: 5px;
-        color: #909090;
-        border: 1px solid $--border-color;
+        margin-right: 5px;
+        font-size: 14px;
+      }
+    }
+
+    .el-collapse-item__wrap,
+    .t-collapse-panel__body {
+      background: $--sidebar-content-background-color;
+      border-bottom: 0;
+
+      .el-collapse-item__content,
+      .t-collapse-panel__content {
+        padding: 10px;
         display: flex;
-        justify-content: space-evenly;
-        align-items: center;
-        margin-bottom: 5px;
+        flex-wrap: wrap;
+      }
 
-        &:hover {
-          background: #2882e0;
-          color: #fff;
-          border-color: #4e8be1;
+      .component-item {
+        display: flex;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        margin: 5px 10px;
+        box-sizing: border-box;
+        color: $--font-color;
+        flex-direction: column;
+        width: 42px;
+        cursor: pointer;
+
+        i {
+          font-size: 20px;
+          background: #fff;
+          height: 40px;
+          width: 40px;
+          line-height: 40px;
+          border-radius: 5px;
+          color: #909090;
+          border: 1px solid $--border-color;
+          display: flex;
+          justify-content: space-evenly;
+          align-items: center;
+          margin-bottom: 5px;
+
+          &:hover {
+            background: #2882e0;
+            color: #fff;
+            border-color: #4e8be1;
+          }
         }
-      }
 
-      span {
-        font-size: 12px;
-        text-align: center;
-      }
+        span {
+          font-size: 12px;
+          text-align: center;
+        }
 
-      .el-tooltip {
-        width: 50px;
-        height: 30px;
-        line-height: 15px;
-        display: block;
-        white-space: normal;
-        margin: 0;
+        .el-tooltip {
+          width: 50px;
+          height: 30px;
+          line-height: 15px;
+          display: block;
+          white-space: normal;
+          margin: 0;
+        }
       }
     }
   }
+
+  .t-collapse {
+    margin-top: 0;
+    padding-top: 48px;
+    position: relative;
+  }
 }

packages/editor/src/theme/layer-panel.scss

@@ -1,5 +1,6 @@
 .m-editor-layer-panel {
   background: $--sidebar-content-background-color;
+  position: relative;
 
   .m-editor-tree {
     padding-top: 48px;

packages/tdesign-vue-next-adapter/package.json

@@ -38,12 +38,12 @@
   ],
   "dependencies": {
     "@tmagic/design": "1.3.15",
-    "tdesign-vue-next": "^1.3.4",
+    "tdesign-vue-next": "^1.8.1",
     "vue": "^3.3.8"
   },
   "peerDependencies": {
     "@tmagic/design": "1.3.15",
-    "tdesign-vue-next": "^1.3.4",
+    "tdesign-vue-next": "^1.8.1",
     "vue": "^3.3.8"
   },
   "devDependencies": {

packages/tdesign-vue-next-adapter/src/Popover.vue

@@ -0,0 +1,27 @@
+<template>
+  <TPopup
+    :placement="placement"
+    :trigger="trigger"
+    :disabled="disabled"
+    :visible="visible"
+    :overlayClassName="popperClass"
+  >
+    <slot name="reference"></slot>
+
+    <template #content>
+      <slot></slot>
+    </template>
+  </TPopup>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+import { Popup as TPopup, type PopupPlacement } from 'tdesign-vue-next';
+
+import type { PopoverProps } from '@tmagic/design';
+
+const props = defineProps<PopoverProps>();
+
+const placement = computed(() => props.placement as PopupPlacement);
+const trigger = computed(() => props.trigger as 'click' | 'focus' | 'mousedown' | 'context-menu' | 'hover');
+</script>

packages/tdesign-vue-next-adapter/src/index.ts

@@ -23,7 +23,6 @@ import {
   Option as TOption,
   OptionGroup as TOptionGroup,
   Pagination as TPagination,
-  Popup as TPopup,
   Radio as TRadio,
   RadioButton as TRadioButton,
   RadioGroup as TRadioGroup,
@@ -87,7 +86,7 @@ import type {
 import DatePicker from './DatePicker.vue';
 import Icon from './Icon.vue';
 import Input from './Input.vue';
-import { vLoading } from './loading';
+import Popover from './Popover.vue';
 import Scrollbar from './Scrollbar.vue';
 import TableColumn from './TableColumn.vue';
 import Tree from './Tree.vue';
@@ -109,7 +108,6 @@ const adapter: any = {
       console.log(msg);
     },
   },
-  loading: vLoading,
   components: {
     badge: {
       component: TBadge,
@@ -240,7 +238,7 @@ const adapter: any = {
       component: TDrawer,
       props: (props: DrawerProps) => ({
         visible: props.modelValue,
-        size: props.size,
+        size: typeof props.size === 'number' ? `${props.size}px` : props.size,
         closeOnEscKeydown: props.closeOnPressEscape,
         closeOnOverlayClick: props.closeOnClickModal,
         attach: props.appendToBody ? 'body' : undefined,
@@ -352,14 +350,8 @@ const adapter: any = {
     },
 
     popover: {
-      component: TPopup,
-      props: (props: PopoverProps) => ({
-        placement: props.placement,
-        trigger: props.trigger,
-        content: props.content,
-        disabled: props.disabled,
-        overlayClassName: props.popperClass,
-      }),
+      component: Popover,
+      props: (props: PopoverProps) => props,
     },
 
     radio: {
@@ -486,6 +478,7 @@ const adapter: any = {
     tooltip: {
       component: TTooltip,
       props: (props: TooltipProps) => ({
+        ...props,
         placement: props.placement,
         content: props.content,
       }),

packages/tdesign-vue-next-adapter/src/loading.ts

@@ -1,45 +0,0 @@
-import type { Directive } from 'vue';
-import { LoadingInstance, LoadingPlugin } from 'tdesign-vue-next';
-
-export type LoadingBinding = boolean;
-
-const INSTANCE_KEY = Symbol('TdesignLoading');
-
-export interface ElementLoading extends HTMLElement {
-  [INSTANCE_KEY]?: {
-    instance: LoadingInstance;
-  };
-}
-
-const createInstance = (el: ElementLoading) =>
-  (el[INSTANCE_KEY] = {
-    instance: LoadingPlugin({
-      attach: () => el,
-      showOverlay: true,
-      size: '20px',
-    }),
-  });
-
-export const vLoading: Directive<ElementLoading, LoadingBinding> = {
-  mounted(el, binding) {
-    const { value } = binding;
-    if (value) {
-      createInstance(el);
-    }
-  },
-
-  updated(el, binding) {
-    const instance = el[INSTANCE_KEY];
-    if (binding.oldValue !== binding.value) {
-      if (binding.value && !binding.oldValue) {
-        createInstance(el);
-      } else {
-        instance?.instance.hide();
-      }
-    }
-  },
-
-  unmounted(el) {
-    el[INSTANCE_KEY]?.instance.hide();
-  },
-};

pnpm-lock.yaml

@@ -595,8 +595,8 @@ importers:
         specifier: 1.3.15
         version: link:../design
       tdesign-vue-next:
-        specifier: ^1.3.4
-        version: 1.3.4(vue@3.3.8)
+        specifier: ^1.8.1
+        version: 1.8.1(vue@3.3.8)
       vue:
         specifier: ^3.3.8
         version: 3.3.8(typescript@5.0.4)
@@ -3527,6 +3527,14 @@ packages:
     engines: {node: '>=6.9.0'}
     dependencies:
       regenerator-runtime: 0.13.11
+    dev: true
+
+  /@babel/runtime@7.24.0:
+    resolution: {integrity: sha512-Chk32uHMg6TnQdvw2e9IlqPpFX/6NLuK0Ys2PqLb7/gL5uFn9mXvK715FGLlOLQrcO4qIkNHkvPGktzzXexsFw==}
+    engines: {node: '>=6.9.0'}
+    dependencies:
+      regenerator-runtime: 0.14.0
+    dev: false
 
   /@babel/template@7.20.7:
     resolution: {integrity: sha512-8SegXApWe6VoNw0r9JHpSteLKTpTiLZ4rMlGIm9JQ18KiCtyQiAMEazujAHrUS5flrcqYZa75ukev3P6QmUwUw==}
@@ -4461,8 +4469,8 @@ packages:
       fastq: 1.15.0
     dev: true
 
-  /@popperjs/core@2.11.7:
-    resolution: {integrity: sha512-Cr4OjIkipTtcXKjAsm8agyleBuDHvxzeBoa1v543lbv1YaIwQjESsVcmjiWiPEbC1FIeHOG/Op9kdCmAmiS3Kw==}
+  /@popperjs/core@2.11.8:
+    resolution: {integrity: sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==}
     dev: false
 
   /@rollup/pluginutils@4.2.1:
@@ -4836,6 +4844,11 @@ packages:
 
   /@types/sortablejs@1.10.7:
     resolution: {integrity: sha512-lGCwwgpj8zW/ZmaueoPVSP7nnc9t8VqVWXS+ASX3eoUUENmiazv0rlXyTRludXzuX9ALjPsMqBu85TgJNWbTOg==}
+    dev: true
+
+  /@types/sortablejs@1.15.8:
+    resolution: {integrity: sha512-b79830lW+RZfwaztgs1aVPgbasJ8e7AXtZYHTELNXZPsERt4ymJdjV4OccDbHQAvHrCcFpbF78jkm0R6h/pZVg==}
+    dev: false
 
   /@types/tinycolor2@1.4.3:
     resolution: {integrity: sha512-Kf1w9NE5HEgGxCRyIcRXR/ZYtDv0V8FVPtYHwLxl0O+maGX0erE77pQlD0gpP+/KByMZ87mOA79SjifhSB3PjQ==}
@@ -4845,8 +4858,8 @@ packages:
     resolution: {integrity: sha512-dqId9J8K/vGi5Zr7oo212BGii5m3q5Hxlkwy3WpYuKPklmBEvsbMYYyLxAQpSffdLl/gdW0XUpKWFvYmyoWCoQ==}
     dev: true
 
-  /@types/validator@13.7.14:
-    resolution: {integrity: sha512-J6OAed6rhN6zyqL9Of6ZMamhlsOEU/poBVvbHr/dKOYKTeuYYMlDkMv+b6UUV0o2i0tw73cgyv/97WTWaUl0/g==}
+  /@types/validator@13.11.9:
+    resolution: {integrity: sha512-FCTsikRozryfayPuiI46QzH3fnrOoctTjvOYZkho9BTFLCOZ2rgZJHMOVgCOfttjPJcgOx52EpkY0CMfy87MIw==}
     dev: false
 
   /@types/web-bluetooth@0.0.16:
@@ -6513,6 +6526,10 @@ packages:
       whatwg-url: 11.0.0
     dev: true
 
+  /dayjs@1.11.10:
+    resolution: {integrity: sha512-vjAczensTgRcqDERK0SR2XMwsF/tSvnvlv6VcF2GIhg6Sx4yOIt/irsr1RDJsKiIyBzJDpCoXiWWq28MqH2cnQ==}
+    dev: false
+
   /dayjs@1.11.4:
     resolution: {integrity: sha512-Zj/lPM5hOvQ1Bf7uAvewDaUcsJoI6JmNqmHhHl3nyumwe0XHwt8sWdOVAPACJzCebL8gQCi+K49w7iKWnGwX9g==}
 
@@ -8861,8 +8878,8 @@ packages:
     resolution: {integrity: sha512-ihFnidEeU8iXzcVHy74dhkxh/dn8Dc08ERl0xwoMMGqp4+LvRSCgicb+zGqWthVokQKvCSxITlh3P08OzdTYCQ==}
     dev: true
 
-  /mitt@3.0.0:
-    resolution: {integrity: sha512-7dX2/10ITVyqh4aOSVI9gdape+t9l2/8QxHrFmUXu4EEUpdlxl6RudZUPZoc+zuY2hk1j7XxVroIVIan/pD/SQ==}
+  /mitt@3.0.1:
+    resolution: {integrity: sha512-vKivATfr97l2/QBCYAkXYDbrIWPM2IIKEl7YPhjCvKlG3kE2gm+uBo6nEXK3M5/Ffh/FLpKExzOQ3JJoJGFKBw==}
     dev: false
 
   /mlly@1.2.0:
@@ -9630,10 +9647,10 @@ packages:
 
   /regenerator-runtime@0.13.11:
     resolution: {integrity: sha512-kY1AZVr2Ra+t+piVaJ4gxaFaReZVH40AKNo7UCX6W+dEwBo/2oZJzqfuN1qLq1oL45o56cPaTXELwrTh8Fpggg==}
+    dev: true
 
   /regenerator-runtime@0.14.0:
     resolution: {integrity: sha512-srw17NI0TUWHuGa5CFGGmhfNIeja30WMBfbslPNhf6JrqQlLN5gcrvig1oqPxiVaXb0oW0XRKtH6Nngs5lKCIA==}
-    dev: true
 
   /regenerator-transform@0.15.1:
     resolution: {integrity: sha512-knzmNAcuyxV+gQCufkYcvOqX/qIIfHLv0u5x79kRxuGojfYVky1f15TzZEu2Avte8QGepvUNTnLskf8E6X6Vyg==}
@@ -10242,31 +10259,31 @@ packages:
     resolution: {integrity: sha512-Cat63mxsVJlzYvN51JmVXIgNoUokrIaT2zLclCXjRd8boZ0004U4KCs/sToJ75C6sdlByWxpYnb5Boif1VSFew==}
     dev: true
 
-  /tdesign-icons-vue-next@0.1.8(vue@3.3.8):
-    resolution: {integrity: sha512-ssI/KJHlhUMYbf+dk+7Ab3LQbWc5wJBjWF9GaGZWPlMU0Yhui9oa2Dvm97Pbx8Ba6drTEDKwfmtJV2R4V6e84Q==}
+  /tdesign-icons-vue-next@0.2.2(vue@3.3.8):
+    resolution: {integrity: sha512-ZKleBME7ZF1IVgnRXmIBPjfNa2Mef1nrK56f2xwn1Aa5mvXxB3fSxEzwhObR7bhzf/K42mz/Knnbll5Y7vCBjg==}
     peerDependencies:
       vue: ^3.0.0
     dependencies:
-      '@babel/runtime': 7.21.0
+      '@babel/runtime': 7.24.0
       vue: 3.3.8(typescript@5.0.4)
     dev: false
 
-  /tdesign-vue-next@1.3.4(vue@3.3.8):
-    resolution: {integrity: sha512-6rCEvH4JQoKJZH7MWhF+i1cFBa+GybuulHI4/Wto4GWjeTNG+OnJwjYD3ZLcpGZHuVadP01/oYOFbMZoOQlllg==}
+  /tdesign-vue-next@1.8.1(vue@3.3.8):
+    resolution: {integrity: sha512-L8aP89pRV1nr3Tjedr6DqEtSGZghrzNx75En/owkUSjjiyU5oqeVIq/9JPvArNeJQCnmxcDwxYxBf+mRfjmrHg==}
     peerDependencies:
       vue: '>=3.1.0'
     dependencies:
-      '@babel/runtime': 7.21.0
-      '@popperjs/core': 2.11.7
+      '@babel/runtime': 7.24.0
+      '@popperjs/core': 2.11.8
       '@types/lodash': 4.14.182
-      '@types/sortablejs': 1.10.7
+      '@types/sortablejs': 1.15.8
       '@types/tinycolor2': 1.4.3
-      '@types/validator': 13.7.14
-      dayjs: 1.11.4
+      '@types/validator': 13.11.9
+      dayjs: 1.11.10
       lodash: 4.17.21
-      mitt: 3.0.0
+      mitt: 3.0.1
       sortablejs: 1.15.0
-      tdesign-icons-vue-next: 0.1.8(vue@3.3.8)
+      tdesign-icons-vue-next: 0.2.2(vue@3.3.8)
       tinycolor2: 1.6.0
       validator: 13.9.0
       vue: 3.3.8(typescript@5.0.4)