@opentiny/vue-docs 2.2.20 → 2.2.21

package/demos/mobile/app/input/methods.spec.ts

@@ -0,0 +1,23 @@
+import { test, expect } from '@playwright/test'
+
+test('实例方法', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  page.goto('input#methods')
+
+  const inputs = page.locator('.demo-input-methods .tiny-mobile-input')
+
+  await page.getByRole('button', { name: 'focus' }).click()
+  await expect(inputs.first()).toHaveClass(/is-focus/)
+  await page.getByRole('button', { name: 'blur' }).click()
+  await expect(inputs.first()).not.toHaveClass(/is-focus/)
+
+  await inputs.nth(1).locator('input').fill('123')
+  await page.getByRole('button', { name: 'select' }).click()
+
+  // 判断input内容是否选中
+  const selectedText = await page.evaluate(() => {
+    const selection = window.getSelection()
+    return selection.toString()
+  })
+  await expect(selectedText).toBe('123')
+})

package/demos/mobile/app/input/native-attributes.spec.ts

@@ -0,0 +1,14 @@
+import { test, expect } from '@playwright/test'
+
+test('输入框原生属性', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  page.goto('input#native-attributes')
+
+  const inputs = page.locator('.demo-input .tiny-mobile-input input')
+
+  await expect(inputs.first()).toHaveAttribute('autofocus')
+  await expect(inputs.nth(1)).toHaveAttribute('readonly')
+  await expect(inputs.nth(2)).toHaveAttribute('autocomplete', 'on')
+  await expect(inputs.nth(3)).toHaveAttribute('step', '2')
+  await expect(inputs.nth(4)).toHaveAttribute('name', 'username')
+})

package/demos/mobile/app/input/native-attributes.vue

@@ -18,10 +18,6 @@
       <span>step=2</span>
       <tiny-input type="number" v-model="inputStep" :step="2" placeholder="step 为 2"></tiny-input>
     </div>
-    <div class="demo-input-item">
-      <span>min=2; max=11</span>
-      <tiny-input type="number" v-model="inputMaxMin" :min="2" :max="11"></tiny-input>
-    </div>
     <div class="demo-input-item">
       <span>name</span>
       <tiny-input v-model="username" name="username"></tiny-input>
@@ -41,7 +37,6 @@ export default {
       autofocusVal: '',
       input: 'readonly',
       inputStep: 2,
-      inputMaxMin: 1,
       inputAutocomplete: '',
       username: ''
     }

package/demos/mobile/app/input/prefix-suffix-icon.spec.ts

@@ -0,0 +1,12 @@
+import { test, expect } from '@playwright/test'
+
+test('输入框前置与后置图标', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  page.goto('input#prefix-suffix-icon')
+
+  const input1 = page.locator('.demo-input-icons .tiny-mobile-input').first()
+  const input2 = page.locator('.demo-input-icons .tiny-mobile-input').nth(1)
+
+  await expect(input1.locator('.tiny-mobile-input__prefix svg')).toBeVisible()
+  await expect(input2.locator('.tiny-mobile-input__suffix svg')).toBeVisible()
+})

package/demos/mobile/app/input/show-password.spec.ts

@@ -0,0 +1,16 @@
+import { test, expect } from '@playwright/test'
+
+test('密码框铭文显示', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('input#show-password')
+
+  const input = page.locator('.demo-input .tiny-mobile-input')
+  await expect(input.locator('input')).toHaveAttribute('type', 'password')
+  await input.locator('input').fill('123abc')
+  await input.locator('.tiny-mobile-input__icon').click()
+  await expect(input.locator('input')).toHaveAttribute('type', 'text')
+  await expect(input.locator('input')).toHaveValue('123abc')
+  await input.locator('.tiny-mobile-input__icon').click()
+  await expect(input.locator('input')).toHaveAttribute('type', 'password')
+  await expect(input.locator('input')).toHaveValue('123abc')
+})

package/demos/mobile/app/input/slots.spec.ts

@@ -0,0 +1,32 @@
+import { test, expect } from '@playwright/test'
+
+test('插槽', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  page.goto('input#slots')
+
+  const inputs = page.locator('.demo-input .tiny-mobile-input')
+  const prependSlot = inputs.first().locator('.tiny-mobile-input-group__prepend')
+  const appendSlot = inputs.nth(1).locator('.tiny-mobile-input-group__append')
+  const prefixSlot = inputs.nth(2).locator('.tiny-mobile-input__prefix')
+  const suffixSlot = inputs.nth(3).locator('.tiny-mobile-input__suffix')
+  const titleSlot = inputs.nth(4).locator('.tiny-mobile-input__title')
+  const tipsSlot = inputs.nth(4).locator('.tiny-mobile-input__tips')
+
+  await expect(prependSlot).toBeVisible()
+  await expect(prependSlot).toContainText('Http://')
+
+  await expect(appendSlot).toBeVisible()
+  await expect(appendSlot).toContainText('.com')
+
+  await expect(prefixSlot).toBeVisible()
+  await expect(prefixSlot.locator('.tiny-svg')).toBeVisible()
+
+  await expect(suffixSlot).toBeVisible()
+  await expect(suffixSlot.locator('.tiny-svg')).toBeVisible()
+
+  await expect(titleSlot).toBeVisible()
+  await expect(titleSlot).toContainText('自定义标题')
+
+  await expect(tipsSlot).toBeVisible()
+  await expect(tipsSlot).toContainText('自定义提示')
+})

package/demos/mobile/app/input/slots.vue

@@ -8,23 +8,23 @@
     </tiny-input>
     <tiny-input placeholder="prefix" v-model="input">
       <template #prefix>
-        <tiny-icon-search/>
+        <tiny-icon-search />
       </template>
     </tiny-input>
     <tiny-input placeholder="suffix" v-model="input">
       <template #suffix>
-        <tiny-icon-calendar/>
+        <tiny-icon-calendar />
       </template>
     </tiny-input>
     <br />
-    
+
     <tiny-input placeholder="suffix" v-model="input">
       <template #title>
-        <span>标题插槽内容</span>
+        <span>自定义标题</span>
       </template>
 
       <template #tips>
-        <span class="tips">提示插槽内容</span>
+        <span class="tips">自定义提示</span>
       </template>
     </tiny-input>
   </div>
@@ -38,7 +38,7 @@ export default {
   components: {
     TinyInput: Input,
     TinyIconSearch: IconSearch(),
-    TinyIconCalendar: IconCalendar(),
+    TinyIconCalendar: IconCalendar()
   },
   data() {
     return {
@@ -55,7 +55,7 @@ export default {
   background: #f5f5f5;
 }
 
-.demo-input [class^=tiny-mobile] {
+.demo-input [class^='tiny-mobile'] {
   margin-bottom: 8px;
 }
 

package/demos/mobile/app/input/textarea-rows-cols.spec.ts

@@ -0,0 +1,11 @@
+import { test, expect } from '@playwright/test'
+
+test('文本框行数与列数', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('input#textarea-rows-cols')
+
+  const textarea = page.locator('.demo-input .tiny-mobile-textarea textarea')
+
+  await expect(textarea).toHaveAttribute('rows', '3')
+  await expect(textarea).toHaveAttribute('cols', '30')
+})

package/demos/mobile/app/input/textarea-rows-cols.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="demo-input">
-    <p>rows=3 cols=80</p>
-    <tiny-input type="textarea" v-model="value" :rows="rows" :cols="cols" ></tiny-input>
+    <p>rows=3 cols=30</p>
+    <tiny-input type="textarea" v-model="value" :rows="rows" :cols="cols"></tiny-input>
   </div>
 </template>
 
@@ -16,7 +16,7 @@ export default {
     return {
       value: '杭州西湖是我国著名的旅游胜地，其位于浙江省杭州市西部。西湖是中国最美丽的湖泊之一。',
       rows: 3,
-      cols: 30,
+      cols: 30
     }
   }
 }

package/demos/mobile/app/input/textarea-scalable.spec.ts

@@ -0,0 +1,25 @@
+import { test, expect } from '@playwright/test'
+
+test.describe('文本域可缩放', () => {
+  test('可拖拽特性', async ({ page }) => {
+    page.on('pageerror', (exception) => expect(exception).toBeNull())
+    await page.goto('input#textarea-scalable')
+
+    const textarea = page.locator('.demo-input .tiny-mobile-textarea textarea')
+
+    await expect(textarea.first()).toHaveCSS('resize', 'none')
+    await expect(textarea.nth(1)).toHaveCSS('resize', 'vertical')
+    await expect(textarea.nth(2)).toHaveCSS('resize', 'both')
+    await expect(textarea.nth(3)).toHaveCSS('resize', 'horizontal')
+  })
+
+  test('可拖动改变大小', async ({ page }) => {
+    page.on('pageerror', (exception) => expect(exception).toBeNull())
+    await page.goto('input#textarea-scalable')
+
+    const textarea = page.locator('.demo-input .tiny-mobile-textarea textarea')
+
+    await expect(textarea.nth(5)).toHaveClass(/is-autosize/)
+    await expect(textarea.nth(6)).toHaveClass(/is-autosize/)
+  })
+})

package/demos/mobile/app/input/textarea-scalable.vue

@@ -1,14 +1,19 @@
 <template>
   <div class="demo-input">
-    <p>resize</p>
-    <tiny-input type="textarea" v-model="input" resize="vertical" placeholder="resize = vertical (default)"></tiny-input>
-    <tiny-input type="textarea" v-model="input" resize="none" placeholder="resize = none"></tiny-input>
-    <tiny-input type="textarea" v-model="input" resize="both" placeholder="resize = both"  width="300px"></tiny-input>
-    <tiny-input type="textarea" v-model="input" resize="horizontal" placeholder="resize = horizontal"></tiny-input>
+    <p>resize 可拖动调整大小</p>
+    <tiny-input type="textarea" v-model="value1" resize="none" placeholder="resize = none (default)"></tiny-input>
+    <tiny-input type="textarea" v-model="value2" resize="vertical" placeholder="resize = vertical"></tiny-input>
+    <tiny-input type="textarea" v-model="value3" resize="both" placeholder="resize = both" width="300px"></tiny-input>
+    <tiny-input type="textarea" v-model="value4" resize="horizontal" placeholder="resize = horizontal"></tiny-input>
 
-    <p>autosize</p>
-    <tiny-input type="textarea" v-model="textarea" placeholder="autosize" autosize></tiny-input>
-    <tiny-input type="textarea" v-model="textarea" placeholder="autosize = { minRows: 2, maxRows: 3 }" :autosize="{ minRows: 2, maxRows: 3 }"></tiny-input>
+    <p>autosize 自适应大小</p>
+    <tiny-input type="textarea" v-model="value5" placeholder="autosize = true" autosize></tiny-input>
+    <tiny-input
+      type="textarea"
+      v-model="value6"
+      placeholder="autosize = { minRows: 2, maxRows: 3 }"
+      :autosize="{ minRows: 2, maxRows: 3 }"
+    ></tiny-input>
   </div>
 </template>
 
@@ -21,8 +26,12 @@ export default {
   },
   data() {
     return {
-      input: '',
-      textarea: ''
+      value1: '',
+      value2: '',
+      value3: '',
+      value4: '',
+      value5: '',
+      value6: ''
     }
   }
 }
@@ -33,6 +42,8 @@ export default {
   height: 100%;
   padding: 20px 16px;
   background: #f5f5f5;
+  overflow-y: scroll;
+  box-sizing: border-box;
 }
 
 .demo-input .tiny-mobile-textarea {

package/demos/mobile/app/input/type-select.spec.ts

@@ -0,0 +1,20 @@
+import { test, expect } from '@playwright/test'
+
+test('插槽', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  page.goto('input#type-select')
+
+  const input = page.locator('.demo-input .tiny-mobile-input')
+  const selectIcon = input.locator('.tiny-mobile-input__select-icon')
+  const menu = page.locator('.tiny-mobile-action-sheet__menu').nth(1)
+  const menuItem = page.getByText('选项2')
+
+  await expect(input.locator('.tiny-mobile-input__select')).toBeVisible()
+  await expect(selectIcon).toBeVisible()
+
+  await selectIcon.click()
+  await expect(menu).toBeVisible()
+  await menuItem.click()
+  await expect(menu).not.toBeVisible()
+  await expect(input.locator('input')).toHaveValue('选项2')
+})

package/demos/mobile/app/input/type.spec.ts

@@ -0,0 +1,20 @@
+import { test, expect } from '@playwright/test'
+
+test('Input输入框类型', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('input#type')
+
+  const inputs = page.locator('.demo-input .tiny-mobile-input input')
+
+  await expect(inputs.first()).toHaveAttribute('type', 'text')
+  await expect(inputs.nth(1)).toHaveAttribute('type', 'password')
+  await expect(inputs.nth(2)).toHaveAttribute('type', 'email')
+  await expect(inputs.nth(3)).toHaveAttribute('type', 'number')
+  await expect(inputs.nth(4)).toHaveAttribute('type', 'tel')
+  await expect(inputs.nth(5)).toHaveAttribute('type', 'url')
+  await expect(inputs.nth(6)).toHaveAttribute('type', 'date')
+  await expect(inputs.nth(7)).toHaveAttribute('type', 'month')
+  await expect(inputs.nth(8)).toHaveAttribute('type', 'week')
+  await expect(inputs.nth(9)).toHaveAttribute('type', 'datetime-local')
+  await expect(inputs.nth(10)).toHaveAttribute('type', 'time')
+})

package/demos/mobile/app/input/validate-event.spec.ts

@@ -0,0 +1,22 @@
+import { test, expect } from '@playwright/test'
+
+test('表单校验', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('input#validate-event')
+
+  const input = page.locator('.demo-input .tiny-mobile-input input')
+  const label = page.locator('.demo-input .tiny-mobile-form-item__label')
+  const errorTip = page.locator('.demo-input .tiny-mobile-input-form__error')
+
+  await expect(errorTip).not.toBeVisible()
+  await input.click()
+  await label.click()
+  await expect(errorTip).toBeVisible()
+  await expect(errorTip).toContainText('请输入活动名称')
+
+  await input.fill('123')
+  await expect(errorTip).not.toBeVisible()
+
+  await input.fill('123456789')
+  await expect(errorTip).toContainText('长度在 3 到 5 个字符')
+})

package/demos/mobile/app/input/webdoc/input.js

@@ -73,8 +73,8 @@ export default {
     {
       demoId: 'show-password',
       name: {
-        'zh-CN': '密码框',
-        'en-US': 'Password Input'
+        'zh-CN': '密码框明文展示',
+        'en-US': 'Password Input Plaintext'
       },
       desc: {
         'zh-CN':
@@ -113,13 +113,13 @@ export default {
     {
       demoId: 'prefix-suffix-icon',
       name: {
-        'zh-CN': '图标',
-        'en-US': 'Icon'
+        'zh-CN': '前置与后置图标',
+        'en-US': 'Prefix and Suffix Icon'
       },
       desc: {
-        'zh-CN': '<p>可通过 <code>prefix-icon, suffix-icon</code> 属性设置输入框头部、尾部图标</p>',
+        'zh-CN': '<p>可通过 <code>prefix-icon, suffix-icon</code> 属性分别设置输入框头部、尾部图标</p>',
         'en-US':
-          '<p>You can set the header icon or the end icon of the text box through the <code>prefix-icon, suffix-icon</code> attribute </p>'
+          '<p>You can set the header icon or the end icon of the text box through the <code>prefix-icon, suffix-icon</code> attribute respectively.</p>'
       },
       codeFiles: ['prefix-suffix-icon.vue']
     },
@@ -136,69 +136,69 @@ export default {
       codeFiles: ['native-attributes.vue']
     },
     {
-      demoId: 'methods',
+      demoId: 'type-select',
       name: {
-        'zh-CN': '实例方法',
-        'en-US': 'Methods'
+        'zh-CN': '下拉列表',
+        'en-US': 'events'
       },
       desc: {
-        'zh-CN': '<p>可使用组件的实例方法：<code>focus | blur | select</code></p>',
-        'en-US': '<p>Those instance methods available: <code>focus | blur | select</code></p>'
+        'zh-CN': '<p>通过使用 <code>is-select</code> 与 <code>select-menu</code> 搭配让输入框变为下拉列表。</p>',
+        'en-US':
+          '<p>By using <code>is-select</code> with <code>select-menu</code>, the input field can be turned into a dropdown list.</p>'
       },
-      codeFiles: ['methods.vue']
+      codeFiles: ['type-select.vue']
     },
     {
-      demoId: 'events',
+      demoId: 'validate-event',
       name: {
-        'zh-CN': '事件',
-        'en-US': 'Events'
+        'zh-CN': '表单校验',
+        'en-US': 'form validation'
       },
       desc: {
         'zh-CN':
-          '\n          <p>输入框的事件，包括\n            <code>input</code>(输入值时触发), \n            <code>blur</code>(失去焦点时触发), \n            <code>focus</code>(获取焦点时触发), \n            <code>change</code>(值改变时触发), \n            <code>clear</code>(清除按钮时触发)\n          </p>\n        ',
+          '<p>可通过 <code>validate-event</code> 属性设置输入时触发表单校验。通过 <code>trigger</code> 配置触发校验规则的方式，为 <code>change</code> 时，当输入框值改变即触发校验，为 <code>blur</code> 时则失焦后触发校验</p>',
         'en-US':
-          '\n          <p>Event of the text box, including:\n            <code>input</code> (triggered when a value is entered)\n            <code>blur</code> (triggered when the focus is lost)\n            <code>focus</code> (triggered when the focus is obtained)\n            <code>change</code> (triggered when the value changes)\n            <code>clear</code> (triggered when the button is cleared)\n          </p>\n        '
+          '<p>You can set the <code>validate-event</code> attribute to trigger form validation upon input. Use <code>trigger</code> to configure the mode of triggering the validation rule. If <code>change</code> is used, the validation is triggered when the value in the text box changes. If <code>blur</code> is used, the validation is triggered after the focus is lost</p>'
       },
-      codeFiles: ['events.vue']
+      codeFiles: ['validate-event.vue']
     },
     {
-      demoId: 'slots',
+      demoId: 'methods',
       name: {
-        'zh-CN': '插槽',
-        'en-US': 'events'
+        'zh-CN': '实例方法',
+        'en-US': 'Methods'
       },
       desc: {
-        'zh-CN': '<p>Input 组件提供了丰富的插槽。</p>',
-        'en-US': '<p>Input component provides a rich set of slots.</p>'
+        'zh-CN': '<p>可使用组件的实例方法：<code>focus | blur | select</code></p>',
+        'en-US': '<p>Those instance methods available: <code>focus | blur | select</code></p>'
       },
-      codeFiles: ['slots.vue']
+      codeFiles: ['methods.vue']
     },
     {
-      demoId: 'type-select',
+      demoId: 'slots',
       name: {
-        'zh-CN': '下拉列表',
+        'zh-CN': '插槽',
         'en-US': 'events'
       },
       desc: {
-        'zh-CN': '<p>通过使用 <code>is-select</code> 与 <code>select-menu</code> 搭配让输入框变为下拉列表。</p>',
-        'en-US':
-          '<p>By using <code>is-select</code> with <code>select-menu</code>, the input field can be turned into a dropdown list.</p>'
+        'zh-CN': '<p>Input 组件提供了丰富的插槽。</p>',
+        'en-US': '<p>Input component provides a rich set of slots.</p>'
       },
-      codeFiles: ['type-select.vue']
+      codeFiles: ['slots.vue']
     },
     {
-      demoId: 'validate-event',
+      demoId: 'events',
       name: {
-        'zh-CN': '表单校验',
-        'en-US': 'form validation'
+        'zh-CN': '事件',
+        'en-US': 'Events'
       },
       desc: {
         'zh-CN':
-          '<p>可通过 <code>validate-event</code> 属性设置输入时触发表单校验。通过 <code>trigger</code> 配置触发校验规则的方式，为 <code>change</code> 时，当输入框值改变即触发校验，为 <code>blur</code> 时则失焦后触发校验</p>',
+          '<p>输入框的事件，包括 <code>input</code>(输入值时触发), <code>blur</code>(失去焦点时触发), <code>focus</code>(获取焦点时触发), <code>change</code>(值改变时触发), <code>clear</code>(清除按钮时触发)。</p>',
         'en-US':
-          '<p>You can set the <code>validate-event</code> attribute to trigger form validation upon input. Use <code>trigger</code> to configure the mode of triggering the validation rule. If <code>change</code> is used, the validation is triggered when the value in the text box changes. If <code>blur</code> is used, the validation is triggered after the focus is lost</p>'
+          '<p>Event of the text box, including: <code>input</code> (triggered when a value is entered) <code>blur</code> (triggered when the focus is lost)<code>focus</code> (triggered when the focus is obtained) <code>change</code> (triggered when the value changes) <code>clear</code> (triggered when the button is cleared).</p>'
       },
-      codeFiles: ['validate-event.vue']
+      codeFiles: ['events.vue']
     }
   ]
 }

package/demos/mobile-first/app/numeric/empty-value-composition-api.vue

@@ -0,0 +1,15 @@
+<template>
+  <tiny-numeric v-model="stepNum" :step="step" :empty-value="null" @change="onChange" allow-empty></tiny-numeric>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import { Numeric as TinyNumeric, Modal } from '@opentiny/vue'
+
+const step = ref(2)
+const stepNum = ref(1)
+
+function onChange(val, oldVal) {
+  Modal.message({ message: `${val} ${oldVal}`, status: 'info' })
+}
+</script>

package/demos/mobile-first/app/numeric/empty-value.vue

@@ -0,0 +1,24 @@
+<template>
+  <tiny-numeric v-model="stepNum" :step="step" :empty-value="null" @change="onChange" allow-empty></tiny-numeric>
+</template>
+
+<script>
+import { Numeric, Modal } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinyNumeric: Numeric
+  },
+  data() {
+    return {
+      step: 2,
+      stepNum: 1
+    }
+  },
+  methods: {
+    onChange(val, oldVal) {
+      Modal.message({ message: `${val} ${oldVal}`, status: 'info' })
+    }
+  }
+}
+</script>

package/demos/mobile-first/app/numeric/webdoc/numeric.js

@@ -78,6 +78,20 @@ export default {
       },
       codeFiles: ['allow-empty.vue']
     },
+    {
+      demoId: 'empty-value',
+      name: {
+        'zh-CN': '设定清空输入后的绑定值',
+        'en-US': 'Sets the binding value after the input is cleared'
+      },
+      desc: {
+        'zh-CN':
+          '可通过 <code>empty-value</code> 属性设置计数器在可清空下，清空后组件的绑定值。默认为 <code>undefined</code>。示例中将清空后组件绑定值改为<code>null</code>',
+        'en-US':
+          'You can use the <code>empty-value</code> attribute to set the binding value of the cleared component when the counter can be cleared. The default value is <code>undefined</code>. In the example, the component binding value is changed to <code>null</code>.'
+      },
+      codeFiles: ['empty-value.vue']
+    },
     {
       demoId: 'about-step',
       name: {

package/demos/mobile-first/app/select/collapse-tags.vue

@@ -1,5 +1,5 @@
 <template>
-  <tiny-select v-model="value" placeholder="请选择" multiple collapse-tags title="标题">
+  <tiny-select v-model="value" placeholder="请选择" multiple :show-proportion="true" collapse-tags title="标题">
     <tiny-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </tiny-option>
   </tiny-select>
 </template>

package/demos/mobile-first/app/select/webdoc/select.js

@@ -36,9 +36,10 @@ export default {
         'en-US': 'Collapse tags'
       },
       desc: {
-        'zh-CN': '<p>通过 <code>collapse-tags</code> 属性设置选中多个选项时，多个标签缩略展示。</p>\n',
+        'zh-CN':
+          '<p>通过 <code>collapse-tags</code> 属性设置选中多个选项时，多个标签缩略展示。设置 <code>show-proportion</code> 可展示当前选中条数和总条数占比，默认值为 <code>false</code> 。</p>\n',
         'en-US':
-          '<p>When multiple options are selected through the <code>collapse-tags</code> attribute settings, multiple tags will be abbreviated and displayed.</p>\n'
+          '<p>When multiple options are selected through the <code>collapse-tags</code> attribute settings, multiple tags will be abbreviated and displayed. Set <code>show promotion</code> to display the current number of selected items and the proportion of total items. The default value is <code>false</code> .</p>\n'
       },
       codeFiles: ['collapse-tags.vue']
     },

package/demos/pc/app/action-menu/card-mode-composition-api.vue

@@ -0,0 +1,31 @@
+<template>
+  <tiny-action-menu :options="options" mode="card"> </tiny-action-menu>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import { ActionMenu as TinyActionMenu } from '@opentiny/vue'
+import { iconWebPlus, iconSuccessful, iconCloseSquare } from '@opentiny/vue-icon'
+
+const options = ref([
+  {
+    label: '远程登陆',
+    icon: iconWebPlus()
+  },
+  {
+    label: '开机',
+    icon: iconSuccessful()
+  },
+  {
+    label: '关机',
+    icon: iconCloseSquare()
+  },
+  {
+    label: '重启'
+  },
+  {
+    label: '网络设置',
+    children: [{ label: '更改安全组' }, { label: '切换VPC', divided: true }]
+  }
+])
+</script>

package/demos/pc/app/action-menu/card-mode.spec.ts

@@ -0,0 +1,16 @@
+import { test, expect } from '@playwright/test'
+
+test('基本用法', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('action-menu#card-mode')
+
+  const wrap = page.locator('#card-mode')
+  const actionMenu = wrap.locator('.tiny-action-menu')
+  const visibleItem = actionMenu.locator('.tiny-action-menu__item')
+  const moreItem = visibleItem.last()
+
+  await expect(visibleItem).toHaveCount(4)
+  await expect(moreItem).not.toHaveText(/更多/)
+  // 三点图标
+  await expect(moreItem.locator('circle')).toHaveCount(3)
+})