feat: sync release-3.17.0 to dev (#1748)

* fix(card): 修复card组件样式污染全局问题 * feat(drawer): [drawer] Add drag listening event (#1701) * feat(drawer): [drawer] Add drag listening event * feat(drawer): [drawer] Modify version number * feat(vue): [button-group] add empty slot (#1700) * feat(vue): [button-group] add empty slot * docs(button-group): add new api version * fix(select): fix Select‘s SMB theme, multi select svg color (#1705) * feat: update theme version * fix(chart): [chart] Fixed chart-core bug (#1708) * fix: chart-core添加cloneDeep引入 * fix: 修改chart组件getFormatted函数判断逻辑 * fix: 更新chart-core包版本为3.17.1 * fix(popper): fix build error in vitepress (#1711) * fix(popper): fix build error in vitepress * fix(popper): 升级版本 * fix(select): rename select's css var name (#1713) * fix(grid): [grid] change custom components to tinyvue components to a… (#1724) * fix(grid): [grid] change custom components to tinyvue components to adapt difference theme * Update package.json * fix(drawer): fix the issue content can not display when using v-if (#1733) * fix(dropdown): fix dropdown in virtual scrolling grid (#1717) * feat: update renderless version * fix(select): the input parameter of the computedDisabledTooltipcontent lost props (#1740) * fix(select): the input parameter of the computedDisabledTooltipcontent does not contain props * fix(select): update version * fix(grid-toolbar): [grid] fix toolbar ref name error (#1745) --------- Co-authored-by: MomoPoppy <125256456+MomoPoppy@users.noreply.github.com> Co-authored-by: gimmyhehe <975402925@qq.com> Co-authored-by: 申君健 <40288193@qq.com> Co-authored-by: Davont <davontz@icloud.com> Co-authored-by: Huang Yilin <huangyilin16@qq.com>
2024-07-17 11:22:52 +08:00 · 2024-07-17 11:22:52 +08:00 · 0b961665a6
parent 88734cb106
commit 0b961665a6
9 changed files with 62 additions and 121 deletions
--- a/packages/renderless/package.json
+++ b/packages/renderless/package.json
@ -1,6 +1,6 @@
 {
  "name": "@opentiny/vue-renderless",
-  "version": "3.17.2",
+  "version": "3.17.4",
  "private": true,
  "description": "An enterprise-class UI component library, support both Vue.js 2 and Vue.js 3, as well as PC and mobile.",
  "author": "OpenTiny Team",
--- a/packages/renderless/src/dropdown-menu/index.ts
+++ b/packages/renderless/src/dropdown-menu/index.ts
@ -132,12 +132,19 @@ export const useVuePopper = ({

  onMounted(() => {
    if (!dropdownVm) return
-    dropdownVm.popperElm = popper.popperElm.value = vm.$el
-    nextTick(() => (popper.referenceElm.value = dropdownVm.$el))

-    !props.multiStage && dropdownVm.initDomOperation()
+    if (popper.popperElm) {
+      dropdownVm.popperElm = popper.popperElm.value = vm.$el
+      nextTick(() => {
+        if (popper.referenceElm) {
+          popper.referenceElm.value = dropdownVm.$el
+        }
+      })

-    if (dropdownVm.inheritWidth) {
+      !props.multiStage && dropdownVm.initDomOperation()
+    }
+
+    if (dropdownVm.inheritWidth && popper.popperElm) {
      dropdownVm.popperElm.style.minWidth = dropdownVm.$el.clientWidth + 'px'
    }
  })
--- a/packages/renderless/src/select/vue.ts
+++ b/packages/renderless/src/select/vue.ts
@ -379,7 +379,7 @@ const initApi = ({
    computedShowNewOption: computedShowNewOption({ props, state }),
    computedShowCopy: computedShowCopy({ props, state }),
    computedOptionsAllDisabled: computedOptionsAllDisabled(state),
-    computedDisabledTooltipContent: computedDisabledTooltipContent(state),
+    computedDisabledTooltipContent: computedDisabledTooltipContent({ props, state }),

    computedSelectDisabled: computedSelectDisabled({ props, parent }),
    computedIsExpand: computedIsExpand({ props, state }),
--- a/packages/theme/package.json
+++ b/packages/theme/package.json
@ -1,6 +1,6 @@
 {
  "name": "@opentiny/vue-theme",
-  "version": "3.17.2",
+  "version": "3.17.3",
  "description": "An enterprise-class UI component library, support both Vue.js 2 and Vue.js 3, as well as PC and mobile.",
  "main": "index.css",
  "homepage": "https://opentiny.design/tiny-vue",
--- a/packages/theme/src/grid/custom.less
+++ b/packages/theme/src/grid/custom.less
@ -21,40 +21,9 @@
  width: 100%;

  & &__tabs {
-    .@{grid-custom-prefix-cls}__tabs-head {
-      white-space: nowrap;
+    .@{css-prefix}tabs__content {
      margin: 0;
-      overflow: hidden;
-      height: var(--ti-grid-custom-head-height);
-      width: 100%;
-      position: relative;
-
-      ul {
-        height: var(--ti-grid-custom-head-height);
-        border-bottom: 1px solid var(--ti-grid-border-color);
-        list-style: none;
-        box-sizing: border-box;
-
-        li {
-          float: left;
-          margin-right: -1px;
-          cursor: pointer;
-          line-height: 28px;
-          padding: 0 20px;
-          color: var(--ti-grid-text-color);
-          min-width: 90px;
-          height: var(--ti-grid-custom-head-height);
-          line-height: var(--ti-grid-custom-head-height);
-
-          &.@{grid-custom-prefix-cls}__tabs-selected {
-            color: var(--ti-grid-primary-color);
-            border-bottom: 3px solid var(--ti-grid-primary-color);
-            font-weight: 700;
-          }
-        }
-      }
    }
-
    .@{grid-custom-prefix-cls}__tabs-body {
      overflow-y: auto;
      border: 0;
@ -62,29 +31,7 @@

      .tabs-body-item {
        .@{grid-custom-prefix-cls}__alert {
-          position: relative;
-          border: 1px solid;
-          border-radius: var(--ti-grid-border-radius);
-          height: var(--ti-grid-custom-body-list-height);
-          line-height: var(--ti-grid-custom-body-list-height);
-          padding-left: 8px;
-          overflow: hidden;
-          background: var(--ti-grid-row-hover-background-color);
-          border-color: #91d5ff;
-          color: var(--ti-grid-text-color);
-          display: flex;
-          align-items: center;
-
-          .@{svg-prefix-cls} {
-            font-size: var(--ti-common-font-size-3);
-            fill: var(--ti-grid-primary-color);
-          }
-
-          p {
-            display: inline-block;
-            line-height: 16px;
-            padding-left: 8px;
-          }
+          margin: 0;
        }

        .@{grid-custom-prefix-cls}__setting {
--- a/packages/vue/src/drawer/package.json
+++ b/packages/vue/src/drawer/package.json
@ -1,6 +1,6 @@
 {
  "name": "@opentiny/vue-drawer",
-  "version": "3.17.1",
+  "version": "3.17.2",
  "description": "",
  "main": "lib/index.js",
  "module": "index.ts",
--- a/packages/vue/src/drawer/src/pc.vue
+++ b/packages/vue/src/drawer/src/pc.vue
@ -88,7 +88,7 @@
            :class="['tiny-drawer__body', { 'flex flex-col': flex }, 'drawer-body']"
          >
            <slot>
-              <slot-wrapper :node="customSlots.default"></slot-wrapper>
+              <slot-wrapper :node="customSlots?.default"></slot-wrapper>
            </slot>
          </div>

--- a/packages/vue/src/grid-toolbar/package.json
+++ b/packages/vue/src/grid-toolbar/package.json
@ -1,6 +1,6 @@
 {
  "name": "@opentiny/vue-grid-toolbar",
-  "version": "3.17.0",
+  "version": "3.17.2",
  "description": "",
  "main": "lib/index.js",
  "module": "index.ts",
@ -40,9 +40,11 @@
    "@opentiny/vue-dropdown-item": "workspace:~",
    "@opentiny/vue-tooltip": "workspace:~",
    "@opentiny/vue-theme": "workspace:~",
+    "@opentiny/vue-tabs": "workspace:~",
+    "@opentiny/vue-tab-item": "workspace:~",
    "@opentiny/vue-input": "workspace:~",
    "@opentiny/vue-popover": "workspace:~",
    "@opentiny/vue-tree": "workspace:~"
  },
  "license": "MIT"
-}
+}
--- a/packages/vue/src/grid-toolbar/src/custom.vue
+++ b/packages/vue/src/grid-toolbar/src/custom.vue
@ -1,14 +1,14 @@
 <!--
- * Copyright (c) 2022 - present TinyVue Authors.
- * Copyright (c) 2022 - present Huawei Cloud Computing Technologies Co., Ltd.
- *
- * Use of this source code is governed by an MIT-style license.
- *
- * THE OPEN SOURCE SOFTWARE IN THIS PRODUCT IS DISTRIBUTED IN THE HOPE THAT IT WILL BE USEFUL,
- * BUT WITHOUT ANY WARRANTY, WITHOUT EVEN THE IMPLIED WARRANTY OF MERCHANTABILITY OR FITNESS FOR
- * A PARTICULAR PURPOSE. SEE THE APPLICABLE LICENSES FOR MORE DETAILS.
- *
- -->
+* Copyright (c) 2022 - present TinyVue Authors.
+* Copyright (c) 2022 - present Huawei Cloud Computing Technologies Co., Ltd.
+*
+* Use of this source code is governed by an MIT-style license.
+*
+* THE OPEN SOURCE SOFTWARE IN THIS PRODUCT IS DISTRIBUTED IN THE HOPE THAT IT WILL BE USEFUL,
+* BUT WITHOUT ANY WARRANTY, WITHOUT EVEN THE IMPLIED WARRANTY OF MERCHANTABILITY OR FITNESS FOR
+* A PARTICULAR PURPOSE. SEE THE APPLICABLE LICENSES FOR MORE DETAILS.
+*
+-->
 <template>
  <tiny-modal
    width="600"
@ -20,37 +20,14 @@
  >
    <template #default>
      <div class="tiny-grid-custom tiny-grid__wrapper" v-if="visible">
-        <div class="tiny-grid-custom__tabs">
-          <div class="tiny-grid-custom__tabs-head">
-            <ul>
-              <li
-                @click="activeName = 'base'"
-                :class="{
-                  'tiny-grid-custom__tabs-selected': activeName === 'base'
-                }"
-              >
-                <span>{{ t('ui.grid.individuation.tabs.base.title') }}</span>
-              </li>
-              <li
-                v-if="other"
-                @click="activeName = 'other'"
-                :class="{
-                  'tiny-grid-custom__tabs-selected': activeName === 'other'
-                }"
-              >
-                <span>{{ t('ui.grid.individuation.tabs.other.title') }}</span>
-              </li>
-            </ul>
-          </div>
+        <tiny-tabs v-model="activeName" class="tiny-grid-custom__tabs">
          <div class="tiny-grid-custom__tabs-body">
-            <div
-              v-show="activeName === 'base'"
-              :class="['tabs-body-item', animateShow === 'base' ? 'active-item' : '']"
-            >
-              <div class="tiny-grid-custom__alert">
-                <component class="tiny-svg-size" is="icon-help" />
-                <p>{{ t('ui.grid.individuation.tabs.base.tips') }}</p>
-              </div>
+            <tiny-tab-item class="tabs-body-item" :title="t('ui.grid.individuation.tabs.base.title')" name="base">
+              <tiny-alert
+                class="tiny-grid-custom__alert"
+                :description="t('ui.grid.individuation.tabs.base.tips')"
+                :closable="false"
+              ></tiny-alert>
              <tiny-grid
                class="tiny-grid-custom__setting"
                :auto-resize="true"
@ -108,15 +85,18 @@
                  </template>
                </tiny-grid-column>
              </tiny-grid>
-            </div>
-            <div
-              v-show="activeName === 'other'"
-              :class="['tabs-body-item', animateShow === 'other' ? 'active-item' : '']"
+            </tiny-tab-item>
+            <tiny-tab-item
+              v-if="other"
+              class="tabs-body-item"
+              :title="t('ui.grid.individuation.tabs.other.title')"
+              name="other"
            >
-              <div class="tiny-grid-custom__alert">
-                <component class="tiny-svg-size" is="icon-help" />
-                <p>{{ t('ui.grid.individuation.tabs.other.tips') }}</p>
-              </div>
+              <tiny-alert
+                class="tiny-grid-custom__alert"
+                :description="t('ui.grid.individuation.tabs.other.tips')"
+                :closable="false"
+              ></tiny-alert>
              <ul class="tiny-grid-custom__setting other-setting">
                <li class="setting-item">
                  <span class="label">{{ t('ui.grid.individuation.tabs.other.sortType') }}</span>
@ -142,14 +122,15 @@
                  </span>
                </li>
              </ul>
-            </div>
+            </tiny-tab-item>
            <tiny-custom-switch
              v-if="multipleHistory && activeName === 'base'"
              ref="switch"
              :history-config="historyConfig"
            ></tiny-custom-switch>
          </div>
-        </div>
+        </tiny-tabs>
+
        <div
          v-if="!multipleHistory || (multipleHistory && activeName === 'base')"
          class="tiny-grid-custom__footer"
@ -187,11 +168,13 @@ import {
  IconMinus,
  IconDescending,
  IconAscending,
-  IconHelp,
  IconLeftFrozen,
  IconRightFrozen
 } from '@opentiny/vue-icon'
 import Select from '@opentiny/vue-select'
+import Alert from '@opentiny/vue-alert'
+import Tabs from '@opentiny/vue-tabs'
+import TabItem from '@opentiny/vue-tab-item'
 import Option from '@opentiny/vue-option'
 import CustomSwitch from './custom-switch.vue'
 import { extend } from '@opentiny/vue-renderless/common/object'
@ -199,6 +182,9 @@ import { $props, defineComponent, appProperties } from '@opentiny/vue-common'

 export default defineComponent({
  components: {
+    TinyAlert: Alert,
+    TinyTabs: Tabs,
+    TinyTabItem: TabItem,
    TinyModal: Modal,
    TinyButton: Button,
    TinyRadio: GridRadio,
@ -215,7 +201,6 @@ export default defineComponent({
    IconMinus: IconMinus(),
    IconDescending: IconDescending(),
    IconAscending: IconAscending(),
-    IconHelp: IconHelp(),
    TinyCustomSwitch: CustomSwitch
  },
  name: 'TinyGridCustom',
@ -319,11 +304,11 @@ export default defineComponent({
    showFixed() {
      return (this as any).$grid
    },
-    TinyTable() {
-      return ((this as any).$grid && (this as any).$grid.$refs.TinyTable) || {}
+    tinyTable() {
+      return ((this as any).$grid && (this as any).$grid.$refs.tinyTable) || {}
    },
    isGroup() {
-      return this.TinyTable.isGroup
+      return this.tinyTable.isGroup
    },
    historyConfig() {
      const multipleHistory =