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

* fix(tag): tag add maxWidth prop, and select add maxTagWidth prop * fix(tag): add documents for new props-- maxWidth * fix(theme-saas): add ellipsis to tag * fix(e2e): fix reviews
2025-03-20 23:49:59 -07:00 · 2025-03-20 23:49:59 -07:00 · f17a8603af
parent d23d2b1c02
commit f17a8603af
14 changed files with 135 additions and 14 deletions
--- a/examples/sites/demos/apis/select.js
+++ b/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',
--- a/examples/sites/demos/apis/tag.js
+++ b/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',
--- a/examples/sites/demos/pc/app/tag/max-width-composition-api.vue
+++ b/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>
--- a/examples/sites/demos/pc/app/tag/max-width.spec.ts
+++ b/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')
+})
--- a/examples/sites/demos/pc/app/tag/max-width.vue
+++ b/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>
--- a/examples/sites/demos/pc/app/tag/webdoc/tag.js
+++ b/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: {
--- a/packages/theme-saas/src/tag/index.less
+++ b/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'),
--- a/packages/theme/src/tag/index.less
+++ b/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;
--- a/packages/vue/src/select/src/index.ts
+++ b/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) {
--- a/packages/vue/src/select/src/mobile-first.vue
+++ b/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 })
--- a/packages/vue/src/select/src/pc.vue
+++ b/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 })
--- a/packages/vue/src/tag/src/index.ts
+++ b/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
  }
 }

--- a/packages/vue/src/tag/src/mobile-first.vue
+++ b/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
--- a/packages/vue/src/tag/src/pc.vue
+++ b/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}>