fix(tag): [tag,select] tag add maxWidth prop, and select add maxTagWidth prop

examples/sites/demos/apis/select.js

@@ -544,6 +544,20 @@ export default {
           pcDemo: 'tag-type',
           mfDemo: 'tag-type'
         },
+        {
+          name: 'max-tag-width',
+          type: 'string',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '多选时，设置最大标签宽度',
+            'en-US': 'When multiple selections are made, set the maximum label width.'
+          },
+          mode: ['pc', 'mobile-first'],
+          pcDemo: '',
+          meta: {
+            stable: '3.22.0'
+          }
+        },
         {
           name: 'text-field',
           type: 'string',

examples/sites/demos/apis/tag.js

@@ -54,6 +54,20 @@ export default {
           mode: ['mobile-first'],
           mfDemo: ''
         },
+        {
+          name: 'max-width',
+          type: 'string',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '设置最大宽度',
+            'en-US': 'set max width'
+          },
+          mode: ['pc', 'mobile-first'],
+          pcDemo: 'max-width',
+          meta: {
+            stable: '3.22.0'
+          }
+        },
         {
           name: 'disabled',
           type: 'boolean',

examples/sites/demos/pc/app/tag/max-width-composition-api.vue

@@ -0,0 +1,16 @@
+<template>
+  <div class="tiny-tag-demo">
+    <tiny-tag size="medium" type="success" maxWidth="80px"> 文本超长超长的标签 </tiny-tag>
+  </div>
+</template>
+
+<script setup lang="jsx">
+import { TinyTag } from '@opentiny/vue'
+</script>
+
+<style scoped>
+.tiny-tag-demo .tiny-tag {
+  margin-right: 10px;
+  margin-bottom: 10px;
+}
+</style>

examples/sites/demos/pc/app/tag/max-width.spec.ts

@@ -0,0 +1,10 @@
+import { test, expect } from '@playwright/test'
+
+test('测试最大宽度', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).not.toBeNull())
+  await page.goto('tag#max-width')
+
+  const normal = page.getByText('文本超长超长的标签')
+
+  await expect(normal).toHaveCSS('max-width', '80px')
+})

examples/sites/demos/pc/app/tag/max-width.vue

@@ -0,0 +1,22 @@
+<template>
+  <div class="tiny-tag-demo">
+    <tiny-tag size="medium" type="success" maxWidth="80px"> 文本超长超长的标签 </tiny-tag>
+  </div>
+</template>
+
+<script lang="jsx">
+import { TinyTag } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinyTag
+  }
+}
+</script>
+
+<style scoped>
+.tiny-tag-demo .tiny-tag {
+  margin-right: 10px;
+  margin-bottom: 10px;
+}
+</style>

examples/sites/demos/pc/app/tag/webdoc/tag.js

@@ -76,6 +76,18 @@ export default {
       },
       codeFiles: ['size.vue']
     },
+    {
+      demoId: 'max-width',
+      name: {
+        'zh-CN': '最大宽度',
+        'en-US': 'Max width'
+      },
+      desc: {
+        'zh-CN': '通过 <code>maxWidth</code> 设置最大宽度 。',
+        'en-US': 'Set the maxWidth through <code>maxWidth</code>.'
+      },
+      codeFiles: ['max-width.vue']
+    },
     {
       demoId: 'disabled',
       name: {

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

@@ -15,6 +15,10 @@
   @apply whitespace-nowrap;
   @apply inline-flex;
   @apply items-center;
+
+  @apply overflow-hidden;
+  @apply text-ellipsis;
+
   .tag-variant(
     theme('colors.color.info.primary.DEFAULT'),
     theme('colors.transparent'),

packages/theme/src/tag/index.less

@@ -24,7 +24,7 @@
   height: fit-content; // 避免 flex时，高度拉伸
   line-height: var(--tv-Tag-line-height);
   border: 1px solid;
-  max-width: 200px; // 新增约束，避免太长的标签
+  max-width: 200px; // 默认约束，避免太长的标签，用户还可以再通过属性，覆盖到style上.
   white-space: nowrap;
   text-overflow: ellipsis;
   overflow: hidden;

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

@@ -362,6 +362,11 @@ export default defineComponent({
     showAllTextTag: {
       type: Boolean,
       default: false
+    },
+    // 配置多选时，Tag的最大宽度
+    maxTagWidth: {
+      type: [String, Number],
+      default: null
     }
   },
   setup(props, context) {

packages/vue/src/select/src/mobile-first.vue

@@ -27,8 +27,8 @@
         multiple && !state.selectDisabled && state.selected.length
           ? state.selected.map((item) => (item.state ? item.state.currentLabel : item.currentLabel)).join('; ')
           : !multiple && state.selectDisabled
-          ? state.selectedLabel
-          : ''
+            ? state.selectedLabel
+            : ''
       "
     >
       <tiny-filter-box
@@ -87,6 +87,7 @@
               :class="gcls('tag-info')"
               @close="deleteTag($event, state.selectedVal[0])"
               disable-transitions
+              :maxWidth="maxTagWidth"
             >
               <tiny-tooltip
                 :effect="tooltipConfig.effect || 'light'"
@@ -120,6 +121,7 @@
               :class="gcls('tag-info')"
               type="info"
               disable-transitions
+              :maxWidth="maxTagWidth"
             >
               <span :class="gcls('tags-text')">+ {{ state.selectedVal.length - 1 }}</span>
             </tiny-tag>
@@ -139,6 +141,7 @@
               key="tags-collapse"
               :closable="false"
               :size="state.collapseTagSize"
+              :maxWidth="maxTagWidth"
               >+ {{ state.collapseTagsLength }}</tiny-tag
             >
             <tiny-tag
@@ -151,6 +154,7 @@
               type="info"
               @close="deleteTag($event, item)"
               disable-transitions
+              :maxWidth="maxTagWidth"
             >
               <tiny-tooltip
                 :effect="tooltipConfig.effect || 'light'"
@@ -711,7 +715,8 @@ export default defineComponent({
     'showEmptyValue',
     'tooltipConfig',
     'dropdownHeight',
-    'allText'
+    'allText',
+    'maxTagWidth'
   ],
   setup(props, context) {
     return setup({ props, context, renderless, api, classes })

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

@@ -86,6 +86,7 @@
                 :type="state.getTagType"
                 @close="deleteTag($event, state.selected[0])"
                 disable-transitions
+                :maxWidth="maxTagWidth"
               >
                 <tiny-tooltip
                   :effect="tooltipConfig.effect || 'light'"
@@ -119,6 +120,7 @@
                 :disabled="state.isDisabled"
                 disable-transitions
                 class="tiny-select__tags-number"
+                :maxWidth="maxTagWidth"
               >
                 <span class="tiny-select__tags-text">+ {{ state.selected.length - 1 }}</span>
               </tiny-tag>
@@ -135,6 +137,7 @@
                 :closable="true"
                 :size="state.collapseTagSize"
                 @close="toggleCheckAll(false)"
+                :maxWidth="maxTagWidth"
               >
                 {{ allText || t('ui.base.all') }}
               </tiny-tag>
@@ -150,6 +153,7 @@
                   :closable="false"
                   :size="state.collapseTagSize"
                   @click="onClickCollapseTag($event)"
+                  :maxWidth="maxTagWidth"
                 >
                   <template v-if="hoverExpand"> + {{ state.collapseTagsLength }} </template>
                   <icon-ellipsis v-else></icon-ellipsis>
@@ -168,6 +172,7 @@
                   :type="state.getTagType"
                   @close="deleteTag($event, item)"
                   disable-transitions
+                  :maxWidth="maxTagWidth"
                 >
                   <tiny-tooltip
                     :effect="tooltipConfig.effect || 'light'"
@@ -762,7 +767,8 @@ export default defineComponent({
     'clickExpand',
     'maxVisibleRows',
     'showAllTextTag',
-    'allText'
+    'allText',
+    'maxTagWidth'
   ],
   setup(props, context) {
     return setup({ props, context, renderless, api })

packages/vue/src/tag/src/index.ts

@@ -39,15 +39,14 @@ export const tagProps = {
   },
   beforeDelete: Function,
   value: [Number, String],
-
+  maxWidth: {
+    type: [String, Number],
+    default: null
+  },
   // mobile
   mini: {
     type: Boolean,
     default: false
-  },
-  maxWidth: {
-    type: [String, Number],
-    default: null
   }
 }
 

packages/vue/src/tag/src/mobile-first.vue

@@ -24,7 +24,8 @@ export default defineComponent({
     'size',
     'effect',
     'customClass',
-    'value'
+    'value',
+    'maxWidth'
   ],
   setup(props, context) {
     return setup({ props, context, renderless, api, h, classes }) as unknown as ITagApi
@@ -50,9 +51,15 @@ export default defineComponent({
       customClass
     )
 
+    const styles = { backgroundColor: color }
+
+    if (maxWidth) {
+      styles.maxWidth = maxWidth
+      styles.display = 'inline-block'
+    }
     const tagElement =
       value || (slots.default && slots.default()) ? (
-        <span data-tag="tiny-tag" class={classes} style={{ backgroundColor: color }} onClick={handleClick}>
+        <span data-tag="tiny-tag" class={classes} style={styles} onClick={handleClick}>
           {value ? <span>{value}</span> : slots.default && slots.default()}
           {closable && (
             <icon-close

packages/vue/src/tag/src/pc.vue

@@ -32,7 +32,8 @@ export default defineComponent({
     'effect',
     'value',
     'beforeDelete',
-    'onlyIcon'
+    'onlyIcon',
+    'maxWidth'
   ],
   setup(props, context) {
     return setup({ props, context, renderless, api, h }) as unknown as ITagApi
@@ -51,7 +52,8 @@ export default defineComponent({
       disabled,
       state,
       value,
-      onlyIcon
+      onlyIcon,
+      maxWidth
     } = this
 
     let styles = {}
@@ -76,6 +78,11 @@ export default defineComponent({
       }
     }
 
+    if (maxWidth) {
+      styles.maxWidth = maxWidth
+      styles.display = 'inline-block' // 显示省略号
+    }
+
     const tagElement =
       value || (slots.default && slots.default()) ? (
         <span data-tag="tiny-tag" class={classes} style={styles} onClick={handleClick}>