fix(chart): fix chart extend bugs (#1638)

* fix: 修复chart图表的extend未生效问题

* fix: 优化图表extend逻辑

* fix: 优化图表extend逻辑

examples/sites/demos/pc/app/chart/boxplot/vertical-composition-api.vue

@@ -3,7 +3,7 @@
 </template>
 
 <script setup lang="jsx">
-import { chartBoxplot as TinyChartBoxplot } from '@opentiny/vue'
+import { ChartBoxplot as TinyChartBoxplot } from '@opentiny/vue'
 import { ref } from 'vue'
 
 function makeData() {

packages/theme/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opentiny/vue-theme",
-  "version": "3.16.0",
+  "version": "3.16.1",
   "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",
@@ -87,4 +87,4 @@
       ]
     }
   }
-}
+}

packages/theme/src/chart-core/index.less

@@ -17,6 +17,7 @@
 
 .hui-chart {
   position: relative;
+  height: 100%
 }
 
 .@{chart-prefix-cls} {

packages/theme/src/drop-times/index.less

@@ -12,11 +12,13 @@
 
 @import '../custom.less';
 
-@select-dropdown-prefix-cls: ~'@{css-prefix}select-dropdown';
+@drop-times-prefix-cls: ~'@{css-prefix}drop-times';
+@select-dropdown-prefix-cls: ~'@{css-prefix}select-dropdown__item';
 
-.@{select-dropdown-prefix-cls} {
 
-  & &__item {
+.@{drop-times-prefix-cls} {
+
+  .@{select-dropdown-prefix-cls} {
     font-size: var(--ti-drop-times-item-font-size);
     padding: var(--ti-drop-times-item-padding);
 
@@ -31,4 +33,4 @@
     }
 
   }
-}
+}

packages/vue/src/chart/chart-core/common/extend.ts

@@ -1,6 +1,7 @@
 import { merge, get } from './util'
 import { isObject } from './type'
 import { setObj as set } from './object'
+import cloneDeep from '../base/util/cloneDeep'
 
 const isArr = Array.isArray
 
@@ -22,7 +23,8 @@ function removeNullKeys(obj) {
 }
 
 export default ({ option, extend }) => {
-  const options = removeNullKeys(option)
+  const cloneOption = cloneDeep(option)
+  const mergeOption = removeNullKeys(cloneOption)
   if (!extend) {
     return
   }
@@ -32,11 +34,11 @@ export default ({ option, extend }) => {
 
     if (~key.indexOf('.')) {
       // （其他类型）属性名中带. 为true
-      set(options, key, value)
+      set(mergeOption, key, value)
     } else if (typeof value === 'function') {
       // 当属性为函数时，设置的是函数的返回值
-      options[key] = value(options[key])
-    } else if (isArr(options[key]) && isArr(value)) {
+      mergeOption[key] = value(mergeOption[key])
+    } else if (isArr(mergeOption[key]) && isArr(value)) {
       // 当被修改值和替换值都为数组时，key符合attrList就合并
       const attrList = [
         'series',
@@ -54,28 +56,28 @@ export default ({ option, extend }) => {
       ]
       if (~attrList.indexOf(key)) {
         // attrList，指定的key才能合并处理
-        options[key] = merge(options[key], value)
+        mergeOption[key] = merge(mergeOption[key], value)
       }
     } else {
       // 属性为对象(eg: tooltip)或包含对象的数组(eg: series)
-      if (isArr(options[key]) && isObject(options[key][0])) {
+      if (isArr(mergeOption[key]) && isObject(mergeOption[key][0])) {
         // 属性值是包含对象数组
-        options[key].forEach((option, i) => (options[key][i] = { ...option, ...value }))
-      } else if (isObject(options[key])) {
+        mergeOption[key].forEach((option, i) => (mergeOption[key][i] = { ...option, ...value }))
+      } else if (isObject(mergeOption[key])) {
         // 被替换属性值是对象
-        let optionBase = options[key]
+        let optionBase = mergeOption[key]
 
-        options[key] = { ...optionBase, ...value } // 两者合并，后者覆盖前者
+        mergeOption[key] = { ...optionBase, ...value } // 两者合并，后者覆盖前者
       } else {
         // 直接覆盖替换
-        options[key] = value
+        mergeOption[key] = value
       }
     }
   })
-  const { series } = option
+  const { series } = mergeOption
   if (series) {
     if (Array.isArray(series)) {
-      options.series = series.map((item) => {
+      mergeOption.series = series.map((item) => {
         if (get(item, 'type') === 'line' && get(item, 'label.show')) {
           item.showSymbol = true
         }
@@ -83,8 +85,8 @@ export default ({ option, extend }) => {
         return item
       })
     } else {
-      options.series.label = { show: false, ...option.series.label }
+      mergeOption.series.label = { show: false, ...mergeOption.series.label }
     }
   }
-  return options
+  return mergeOption
 }

packages/vue/src/chart/chart-core/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opentiny/vue-chart-core",
-  "version": "3.16.0",
+  "version": "3.16.1",
   "description": "",
   "main": "lib/index.js",
   "module": "index.ts",

packages/vue/src/chart/chart-core/src/chart-core.ts

@@ -26,7 +26,6 @@ export default {
     width: { type: String, default: 'auto' },
     height: { type: String, default: '400px' },
     events: { type: Object, default() {} },
-    events: { type: Object, default() {} },
     initOptions: {
       type: Object,
       default() {
@@ -168,12 +167,6 @@ export default {
     }
   },
   watch: {
-    options: {
-      handler() {
-        this.refreshChart()
-      },
-      deep: true
-    },
     options: {
       handler() {
         this.refreshChart()
@@ -360,8 +353,7 @@ export default {
         this.setAnimation(option)
         this.applyMarks(this.integrateChart.eChartOption)
         this.integrateChart.refresh(option)
-        this.applyExtend(this.integrateChart.eChartOption)
-        option.extend = this.integrateChart.eChartOption
+        option.extend = this.applyExtend(this.integrateChart.eChartOption)
         if (this.colorMode !== 'default') {
           option.color = this.computedChartColor()
         }
@@ -394,7 +386,7 @@ export default {
         this.integrateChart.setSimpleOption(this.iChartName, option, plugins)
         this.$emit('handle-color', option.color)
         this.applyMarks(this.integrateChart.eChartOption)
-        option = this.applyExtend(this.integrateChart.eChartOption)
+        option.extend = this.applyExtend(this.integrateChart.eChartOption)
 
         this.integrateChart.render(this.renderOption)
       }

packages/vue/src/select/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opentiny/vue-select",
-  "version": "3.16.0",
+  "version": "3.16.1",
   "description": "",
   "main": "lib/index.js",
   "module": "index.ts",

packages/vue/src/select/src/index.ts

@@ -344,6 +344,10 @@ export default defineComponent({
     allText: {
       type: String,
       default: ''
+    },
+    showAllTextTag: {
+      type: Boolean,
+      default: false
     }
   },
   setup(props, context) {

packages/vue/src/select/src/pc.vue

@@ -121,65 +121,80 @@
               </tiny-tag>
             </span>
             <span ref="tags-content" v-if="!collapseTags">
+              <!-- 当 showAllTextTag 时， 用all-text属性做为tag。 xdesign规范 -->
               <tiny-tag
-                v-if="hoverExpand || clickExpand"
-                :class="['tiny-select__tags-collapse', { 'is-hidden': state.isHidden }]"
+                v-if="showAllTextTag && state.selectCls === 'checked-sur'"
                 :type="state.getTagType"
-                key="tags-collapse"
-                data-tag="tags-collapse"
-                :closable="false"
+                key="tags-all-text-tag"
+                data-tag="tags-all-text-tag"
+                :closable="true"
                 :size="state.collapseTagSize"
-                @click="onClickCollapseTag($event)"
+                @close="toggleCheckAll(false)"
               >
-                <template v-if="hoverExpand"> + {{ state.collapseTagsLength }} </template>
-                <icon-ellipsis v-else></icon-ellipsis>
+                {{ allText || t('ui.base.all') }}
               </tiny-tag>
-              <tiny-tag
-                v-for="(item, index) in state.selected"
-                :key="getValueKey(item)"
-                :class="{ 'not-visible': state.toHideIndex <= index && !state.isExpand }"
-                :closable="!item.disabled && !item.required"
-                :size="state.collapseTagSize"
-                :hit="item.state ? item.state.hitState : item.hitState"
-                :type="state.getTagType"
-                @close="deleteTag($event, item)"
-                disable-transitions
-              >
-                <tiny-tooltip
-                  effect="light"
-                  placement="top"
-                  @mouseenter.native="handleEnterTag($event, getValueKey(item))"
+              <!-- 当非 showAllTextTag 时，原来的模式渲染 -->
+              <template v-else>
+                <tiny-tag
+                  v-if="hoverExpand || clickExpand"
+                  :class="['tiny-select__tags-collapse', { 'is-hidden': state.isHidden }]"
+                  :type="state.getTagType"
+                  key="tags-collapse"
+                  data-tag="tags-collapse"
+                  :closable="false"
+                  :size="state.collapseTagSize"
+                  @click="onClickCollapseTag($event)"
                 >
-                  <span v-if="!state.visible && state.overflow === index" class="tiny-select__tags-text">
-                    {{ item.state ? item.state.currentLabel + '... ' : item.currentLabel + '... ' }}
-                  </span>
-                  <span v-else class="tiny-select__tags-text">
-                    <slot name="label" :item="getLabelSlotValue(item)">
-                      {{ item.state ? item.state.currentLabel : item.currentLabel }}
-                    </slot>
-                  </span>
-                  <template v-if="state.tooltipContent[getValueKey(item)]" #content>
-                    <span v-if="!state.visible && state.overflow === index">
+                  <template v-if="hoverExpand"> + {{ state.collapseTagsLength }} </template>
+                  <icon-ellipsis v-else></icon-ellipsis>
+                </tiny-tag>
+                <tiny-tag
+                  v-for="(item, index) in state.selected"
+                  :key="getValueKey(item)"
+                  :class="{ 'not-visible': state.toHideIndex <= index && !state.isExpand }"
+                  :closable="!item.disabled && !item.required"
+                  :size="state.collapseTagSize"
+                  :hit="item.state ? item.state.hitState : item.hitState"
+                  :type="state.getTagType"
+                  @close="deleteTag($event, item)"
+                  disable-transitions
+                >
+                  <tiny-tooltip
+                    effect="light"
+                    placement="top"
+                    @mouseenter.native="handleEnterTag($event, getValueKey(item))"
+                  >
+                    <span v-if="!state.visible && state.overflow === index" class="tiny-select__tags-text">
                       {{ item.state ? item.state.currentLabel + '... ' : item.currentLabel + '... ' }}
                     </span>
-                    <span v-else>
+                    <span v-else class="tiny-select__tags-text">
                       <slot name="label" :item="getLabelSlotValue(item)">
                         {{ item.state ? item.state.currentLabel : item.currentLabel }}
                       </slot>
                     </span>
-                  </template>
-                </tiny-tooltip>
-              </tiny-tag>
+                    <template v-if="state.tooltipContent[getValueKey(item)]" #content>
+                      <span v-if="!state.visible && state.overflow === index">
+                        {{ item.state ? item.state.currentLabel + '... ' : item.currentLabel + '... ' }}
+                      </span>
+                      <span v-else>
+                        <slot name="label" :item="getLabelSlotValue(item)">
+                          {{ item.state ? item.state.currentLabel : item.currentLabel }}
+                        </slot>
+                      </span>
+                    </template>
+                  </tiny-tooltip>
+                </tiny-tag>
 
-              <!-- 收起按钮 -->
-              <span
-                v-if="clickExpand && state.showCollapseTag"
-                class="tiny-select__collapse-text"
-                @click="onClickCollapseTag($event)"
-              >
-                {{ t('ui.select.collapse') }}
-                <icon-chevron-up></icon-chevron-up>
-              </span>
+                <!-- 收起按钮 -->
+                <span
+                  v-if="clickExpand && state.showCollapseTag"
+                  class="tiny-select__collapse-text"
+                  @click="onClickCollapseTag($event)"
+                >
+                  {{ t('ui.select.collapse') }}
+                  <icon-chevron-up></icon-chevron-up>
+                </span>
+              </template>
             </span>
           </span>
 
@@ -751,6 +766,7 @@ export default defineComponent({
     'showProportion',
     'clickExpand',
     'maxVisibleRows',
+    'showAllTextTag',
     'allText'
   ],
   setup(props, context) {