fix: fix grid、flowchart、grid、treemenu bugs (#2588)

examples/sites/package.json

@@ -52,7 +52,6 @@
   "devDependencies": {
     "@opentiny-internal/unplugin-virtual-template": "workspace:~",
     "@playwright/test": "~1.42.0",
-    "@opentiny/vue-mobile": "workspace:~",
     "@types/markdown-it": "^12.2.3",
     "@types/node": "^17.0.45",
     "@unocss/preset-icons": "^0.38.2",
@@ -88,4 +87,4 @@
     "vite-svg-loader": "^3.6.0",
     "vue-tsc": "^1.8.5"
   }
-}
+}

packages/modules.json

@@ -3060,11 +3060,6 @@
       "pc"
     ]
   },
-  "TreeMenuPc": {
-    "path": "vue/src/tree-menu/src/pc.vue",
-    "type": "template",
-    "exclude": false
-  },
   "TreePc": {
     "path": "vue/src/tree/src/pc.vue",
     "type": "template",

packages/renderless/src/flowchart/index.ts

@@ -290,8 +290,11 @@ export const refresh =
   ({ graphWidth = 0, adjustX = 0 } = {}) => {
     api.removeListeners()
 
-    if (graphWidth && graphWidth !== state.temporary.graphWidth) {
-      state.temporary.graphWidth = graphWidth
+    // 修复浏览器缩放时出现抖动问题， 缩放模式下offsetWidth与真实宽度可能有差异(差异不超过1px)
+    const graphWidthAdapt = graphWidth - 1 >= 0 ? graphWidth - 1 : 0
+
+    if (graphWidth && graphWidthAdapt !== state.temporary.graphWidth) {
+      state.temporary.graphWidth = graphWidthAdapt
       state.temporary.adjustX = adjustX
     }
 

packages/renderless/types/tree-menu.type.ts

@@ -1,5 +1,5 @@
 import type { ComputedRef, ExtractPropTypes } from 'vue'
-import type { treeMenuProps } from '@/tree-menu/src'
+import type { treeMenuProps } from '@/tree-menu/src/props.ts'
 import type {
   initData,
   setMenuKey,

packages/theme-saas/src/cascader-menu/index.less

@@ -18,7 +18,7 @@
   }
 
   & &__wrap {
-    height: 204px;
+    min-height: 204px;
   }
 
   & &__list {

packages/theme-saas/src/date-range/index.less

@@ -67,8 +67,8 @@
     }
 
     .@{date-range-picker-prefix-cls}__header div {
-      margin-left: 50px;
-      margin-right: 50px;
+      @apply leading-5;
+      margin: 0 auto;
     }
   }
 

packages/theme-saas/src/grid/mixins/table.less

@@ -33,6 +33,11 @@
     .@{grid-cell-prefix-cls} {
       .TextEllipsis();
       @apply leading-normal;
+      // 表头布局从block改为了flex，此处兼容插槽文本溢出不显示省略号问题
+      &:not(:has(.tiny-grid-cell-text)) > span:only-of-type {
+        @apply text-ellipsis;
+        @apply overflow-hidden;
+      }
 
       & > .@{grid-checkbox-prefix-cls} {
         .TextEllipsis();

packages/theme-saas/src/grid/table.less

@@ -644,9 +644,6 @@
       @apply flex;
       @apply items-center;
       @apply justify-start;
-      &:has(> span:only-child) {
-        @apply block;
-      }
     }
 
     &.col__center {

packages/theme-saas/src/picker/index.less

@@ -146,11 +146,11 @@
 
     .@{range-prefix-cls}-separator {
       @apply leading-6;
-      @apply text-xs;
+      @apply text-sm;
     }
 
     .@{range-prefix-cls}-input {
-      @apply text-xs;
+      @apply text-sm;
     }
 
     .@{range-prefix-cls}__close-icon,
@@ -238,7 +238,7 @@
     @apply ~'-translate-y-2/4';
     @apply max-w-full;
     @apply truncate;
-    @apply text-xs;
+    @apply text-sm;
   }
 }
 

packages/vue/src/file-upload/src/mobile-first.vue

@@ -673,7 +673,7 @@ export default defineComponent({
       <div {...attrs} data-tag="tiny-file-upload" class={isDragSingle ? 'relative inline-block' : ''}>
         {getDefaultTitle({ listType, title, showTitle, displayOnly, mode })}
         {noticePC}
-        {isText ? (slots.trigger ? [createUploadComponent()] : createUploadComponent()) : null}
+        {isText && !displayOnly ? (slots.trigger ? [createUploadComponent()] : createUploadComponent()) : null}
         {noticeMF}
         {uploadList}
         {previewComponent}

packages/vue/src/grid/package.json

@@ -16,6 +16,7 @@
   },
   "dependencies": {
     "@opentiny/vue-common": "workspace:~",
+    "@opentiny/vue-directive": "workspace:~",
     "@opentiny/vue-dropdown": "workspace:~",
     "@opentiny/vue-dropdown-item": "workspace:~",
     "@opentiny/vue-dropdown-menu": "workspace:~",

packages/vue/src/grid/src/radio/src/radio.ts

@@ -22,8 +22,9 @@
  * SOFTWARE.
  *
  */
-import { h, $prefix, defineComponent } from '@opentiny/vue-common'
+import { h, $prefix, defineComponent, isVue2, hooks } from '@opentiny/vue-common'
 import { iconRadio, iconRadioselected } from '@opentiny/vue-icon'
+import { AutoTip } from '@opentiny/vue-directive'
 
 export default defineComponent({
   name: $prefix + 'GridRadio',
@@ -35,6 +36,7 @@ export default defineComponent({
     name: String,
     size: String
   },
+  directives: { AutoTip },
   computed: {
     vSize() {
       return this.size || this.$parent.size || this.$parent.vSize
@@ -48,6 +50,18 @@ export default defineComponent({
     let $slots = this.slots
     const disableClass = 'disabled'
 
+    const labelContent = () => {
+      let content = h(
+        'span',
+        { class: 'tiny-grid-radio__label', directives: isVue2 ? [{ name: 'AutoTip' }] : null },
+        $slots.default()
+      )
+      if (!isVue2) {
+        hooks.withDirectives(content, [[AutoTip]])
+      }
+      return content
+    }
+
     return h(
       'label',
       {
@@ -82,7 +96,7 @@ export default defineComponent({
           h(iconRadio(), { class: ['tiny-svg-size', 'icon-radio'] }),
           h(iconRadioselected(), { class: ['tiny-svg-size', 'icon-radio-selected'] })
         ]),
-        $slots.default ? h('span', { class: 'tiny-grid-radio__label' }, $slots.default()) : null
+        $slots.default ? labelContent() : null
       ]
     )
   }

packages/vue/src/grid/src/table/src/utils/handleGlobalMousedownEvent.ts

@@ -76,11 +76,13 @@ export function handleGlobalIsClear({ $el, _vm, actived, editConfig, event, isCl
 }
 
 export function handleGlobalClearActived({ $el, _vm, event, isClear }) {
+  const tableContent = _vm.$refs.tableBody?.$refs.table
+  // 如果点击了当前表格之外
   if (
     isClear ||
-    // 如果点击了当前表格之外
     !_vm.getEventTargetNode(event, $el).flag ||
-    (_vm.$refs.tableHeader && _vm.$refs.tableHeader.$el.contains(event.target))
+    (_vm.$refs.tableHeader && _vm.$refs.tableHeader.$el.contains(event.target)) ||
+    (tableContent && !tableContent.contains(event.target))
   ) {
     setTimeout(() => _vm.clearActived(event))
   }

packages/vue/src/tree-menu/index.ts

@@ -9,8 +9,7 @@
  * A PARTICULAR PURPOSE. SEE THE APPLICABLE LICENSES FOR MORE DETAILS.
  *
  */
-import TreeMenu from './src/index'
-import '@opentiny/vue-theme/tree-menu/index.less'
+import TreeMenu from './src/pc.vue'
 import { version } from './package.json'
 
 /* istanbul ignore next */

packages/vue/src/tree-menu/src/pc.vue

@@ -104,7 +104,9 @@ import { $prefix, setup, defineComponent } from '@opentiny/vue-common'
 import { renderless, api } from '@opentiny/vue-renderless/tree-menu/vue'
 import Tree from '@opentiny/vue-tree'
 import Input from '@opentiny/vue-input'
-import { iconSearch, iconLeftWardArrow, iconEditorMenuLeft, iconEditorMenuRight } from '@opentiny/vue-icon'
+import { iconLeftWardArrow, iconEditorMenuLeft, iconEditorMenuRight } from '@opentiny/vue-icon'
+import { treeMenuProps } from './props'
+import '@opentiny/vue-theme/tree-menu/index.less'
 
 export default defineComponent({
   name: $prefix + 'TreeMenu',
@@ -130,104 +132,9 @@ export default defineComponent({
     IconEditorMenuLeft: iconEditorMenuLeft(),
     IconEditorMenuRight: iconEditorMenuRight()
   },
-  props: {
-    placeholder: {
-      default: '',
-      type: String
-    },
-    data: Array,
-    nodeKey: String,
-    defaultExpandAll: Boolean,
-    suffixIcon: Object,
-    searchIcon: {
-      type: Object,
-      default: () => iconSearch()
-    },
-    props: Object,
-    draggable: {
-      type: Boolean,
-      default: false
-    },
-    emptyText: {
-      type: String,
-      default: ''
-    },
-    checkStrictly: Boolean,
-    lazy: {
-      type: Boolean,
-      default: false
-    },
-    load: Function,
-    showCheckbox: Boolean,
-    filterNodeMethod: Function,
-    defaultCheckedKeys: Array,
-    defaultExpandedKeys: Array,
-    defaultExpandedKeysHighlight: [Number, String],
-    indent: {
-      type: Number,
-      default: 16
-    },
-    allowDrag: Function,
-    allowDrop: Function,
-    expandOnClickNode: {
-      type: Boolean,
-      default: true
-    },
-    ellipsis: {
-      type: Boolean,
-      default: false
-    },
-    wrap: {
-      type: Boolean,
-      default: false
-    },
-    getMenuDataSync: Function,
-    accordion: Boolean,
-    showTitle: {
-      type: Boolean,
-      default: true
-    },
-    showFilter: {
-      type: Boolean,
-      default: true
-    },
-    showExpand: {
-      type: Boolean,
-      default: false
-    },
-    collapsible: {
-      type: Boolean,
-      default: true
-    },
-    showNumber: {
-      type: Boolean,
-      default: false
-    },
-    nodeHeight: Number,
-    onlyCheckChildren: {
-      type: Boolean,
-      default: false
-    },
-    menuCollapsible: {
-      type: Boolean,
-      default: false
-    },
-    clearable: {
-      type: Boolean,
-      default: false
-    },
-    highlightQuery: {
-      type: Boolean,
-      default: false
-    },
-    // metaErp 新增属性
-    widthAdapt: {
-      type: Boolean,
-      default: false
-    }
-  },
+  props: treeMenuProps,
   setup(props, context) {
-    return setup({ props, context, renderless, api })
+    return setup({ props, context, renderless, api, mono: true })
   }
 })
 </script>

packages/vue/src/tree-menu/src/index.ts → packages/vue/src/tree-menu/src/props.ts

@@ -1,6 +1,5 @@
-import { $props, $prefix, $setup, defineComponent } from '@opentiny/vue-common'
-import template from 'virtual-template?pc'
 import { iconSearch } from '@opentiny/vue-icon'
+import { $props } from '@opentiny/vue-common'
 
 export const treeMenuProps = {
   ...$props,
@@ -95,11 +94,3 @@ export const treeMenuProps = {
     default: false
   }
 }
-
-export default defineComponent({
-  name: $prefix + 'TreeMenu',
-  props: treeMenuProps,
-  setup(props, context) {
-    return $setup({ props, context, template })
-  }
-})