@opentiny/vue-docs 2.1.8 → 2.1.10

package/demos/pc/app/radio/webdoc/radio.js

@@ -27,23 +27,12 @@ export default {
       'name': { 'zh-CN': '配置式单选组', 'en-US': 'Profile Radio Group' },
       'desc': {
         'zh-CN':
-          '<p>通过 <code>options</code> 配置式渲染单选组。 <code>options</code> 的类型为<a href="#IRadioGroupOptions">IRadioGroupOptions[]</a>。另外还提供 <code>type</code> 属性，配合 <code>options</code> 属性一起使用，默认值为 <code>radio</code> 。可以配置为 <code>button</code> ，配置后单选组将以按钮的形式展示。</p>\n',
+          '<p>通过 <code>options</code> 配置式渲染单选组。 <code>options</code> 的类型为 <a href="#IRadioGroupOptions">IRadioGroupOptions[]</a> 。另外还提供 <code>type</code> 属性，配合 <code>options</code> 属性一起使用，默认值为 <code>radio</code> 。可以配置为 <code>button</code> ，配置后单选组将以按钮的形式展示。</p>\n',
         'en-US':
           '<p>Provides the <code>options</code> attribute to render radio groups by configuring object array data. This property eliminates the need to insert a <code>&lt;radio&gt;</code> or <code>&lt;radio-button&gt;</code> tag as a slot in the tag. \n\nThe <code>options</code> object array contains three fields: <code>label</code> , <code>text</code> , and <code>events</code> . \n\n The <code>type</code> attribute is also provided, which is used together with the <code>options</code> attribute. The default value is <code>radio</code> . You can also set this parameter to <code>button</code> . After the configuration, the radio group is displayed as a button. </p>\n'
       },
       'codeFiles': ['group-options.vue']
     },
-    {
-      'demoId': 'radio-events',
-      'name': { 'zh-CN': '单选框事件', 'en-US': 'Option button event' },
-      'desc': {
-        'zh-CN':
-          '<p>可在 <code>radio</code> 、 <code>radio-group</code> 组件上设置 <code>change</code> 事件，当绑定值变化时触发，参数为选中的 <code>label</code> 值。</p>\n',
-        'en-US':
-          '<p>You can set the <code>change</code> event on the Radio and  <code>radio-group</code> components. The event is triggered when the bound value changes. The callback function is the selected radio label value. </p>\n'
-      },
-      'codeFiles': ['radio-events.vue']
-    },
     {
       'demoId': 'with-border',
       'name': { 'zh-CN': '带有边框', 'en-US': 'With borders' },
@@ -57,7 +46,7 @@ export default {
       'demoId': 'dynamic-disable',
       'name': { 'zh-CN': '禁用状态', 'en-US': 'Disabled' },
       'desc': {
-        'zh-CN': '<p>设置 <code>disabled</code> 属性即可启动禁用状态，默认为 false 。</p>\n',
+        'zh-CN': '<p>通过 <code>disabled</code> 设置是否禁用单选框 。</p>\n',
         'en-US':
           '<p>Set the <code>disabled</code> attribute to enable the disabled state. The default value is false. </p>\n'
       },
@@ -75,7 +64,7 @@ export default {
     },
     {
       'demoId': 'active-color',
-      'name': { 'zh-CN': '颜色设置', 'en-US': 'Color Settings' },
+      'name': { 'zh-CN': '自定义颜色', 'en-US': 'Custom color' },
       'desc': {
         'zh-CN':
           '<p>通过 <code>text-color</code> 设置单选按钮组激活时的文本颜色，通过 <code>fill</code> 设置填充色和边框色。</p>\n',
@@ -100,7 +89,7 @@ export default {
       'name': { 'zh-CN': '尺寸设置', 'en-US': 'Size Settings' },
       'desc': {
         'zh-CN':
-          '<p>可对按钮形式的 <code>radio</code> 或带有边框的 <code>radio</code> 设置 <code>size</code> 属性，以改变其尺寸，包括 <code>medium、small、mini</code> 三个选项。</p>\n',
+          '<p>可对按钮形式的 <code>radio</code> 或带有边框的 <code>radio</code> 设置 <code>size</code> 属性，以改变其尺寸，可选值有： <code>medium</code>  、<code>small</code>  、<code>mini</code> 。</p>\n',
         'en-US':
           '<p>You can set the <code>size</code> attribute for a radio with a button or a radio with a border to change its size. The options include medium, small, and mini. </p>\n'
       },
@@ -110,10 +99,21 @@ export default {
       'demoId': 'default-slot',
       'name': { 'zh-CN': '默认插槽', 'en-US': 'Default slot' },
       'desc': {
-        'zh-CN': '<p>通过 <code>default</code> 默认插槽列表。</p>\n',
+        'zh-CN': '<p>通过 <code>default</code> 默认插槽自定义描述内容。</p>\n',
         'en-US': '<p>by <code>default</code> default slot list. </p>\n'
       },
       'codeFiles': ['default-slot.vue']
+    },
+    {
+      'demoId': 'radio-events',
+      'name': { 'zh-CN': '单选框事件', 'en-US': 'Option button event' },
+      'desc': {
+        'zh-CN':
+          '<p>可在 <code>radio</code> 、 <code>radio-group</code> 组件上监听 <code>change</code> 事件，当绑定值变化时触发。</p>\n',
+        'en-US':
+          '<p>You can set the <code>change</code> event on the Radio and  <code>radio-group</code> components. The event is triggered when the bound value changes. The callback function is the selected radio label value. </p>\n'
+      },
+      'codeFiles': ['radio-events.vue']
     }
   ],
   apis: [
@@ -144,9 +144,9 @@ export default {
         {
           'name': 'label',
           'type': 'boolean | number | string',
-          'defaultValue': '',
+          'defaultValue': '--',
           'desc': {
-            'zh-CN': 'radio选中时的值',
+            'zh-CN': 'radio 选中时的值',
             'en-US': 'Value when radio is selected'
           },
           'demoId': 'basic-usage'
@@ -154,7 +154,7 @@ export default {
         {
           'name': 'modelValue / v-model',
           'type': 'boolean | number | string',
-          'defaultValue': '',
+          'defaultValue': '--',
           'desc': {
             'zh-CN': '绑定值',
             'en-US': 'Bound Value'
@@ -164,7 +164,7 @@ export default {
         {
           'name': 'name',
           'type': 'string',
-          'defaultValue': '',
+          'defaultValue': '--',
           'desc': {
             'zh-CN': '原生 name 属性',
             'en-US': 'Native name attribute'
@@ -173,19 +173,18 @@ export default {
         },
         {
           'name': 'size',
-          'type': 'string',
-          'defaultValue': '',
+          'type': "'medium' | small' | 'mini'",
+          'defaultValue': '--',
           'desc': {
-            'zh-CN': 'Radio 的尺寸，仅在 border 为真时有效;该属性的可选值为 medium / small / mini',
-            'en-US':
-              'Radio size. This parameter is valid only when border is set to true. The optional values of this attribute are medium / small / mini'
+            'zh-CN': 'radio 的尺寸，仅在 border 为真时有效',
+            'en-US': 'radio size. This parameter is valid only when border is set to true'
           },
           'demoId': 'radio-size'
         },
         {
           'name': 'text',
           'type': 'string',
-          'defaultValue': '',
+          'defaultValue': '--',
           'desc': {
             'zh-CN': '单选框文本内容',
             'en-US': 'Radio Box Text Content'
@@ -197,7 +196,7 @@ export default {
         {
           'name': 'change',
           'type': '(value: boolean | number | string) => void',
-          'defaultValue': '',
+          'defaultValue': '--',
           'desc': {
             'zh-CN': '绑定值变化时触发的事件',
             'en-US': 'Event triggered when the binding value changes'
@@ -209,9 +208,9 @@ export default {
         {
           'name': 'default',
           'type': '',
-          'defaultValue': '',
+          'defaultValue': '--',
           'desc': {
-            'zh-CN': 'Radio的默认插槽',
+            'zh-CN': 'radio 的默认插槽',
             'en-US': 'Radio default slot'
           },
           'demoId': 'default-slot'
@@ -235,9 +234,9 @@ export default {
         {
           'name': 'fill',
           'type': 'string',
-          'defaultValue': '',
+          'defaultValue': '--',
           'desc': {
-            'zh-CN': '设置按钮形式单选选中时的背景颜色',
+            'zh-CN': '按钮形式单选选中时的背景颜色',
             'en-US': 'Set the background color for button form when radio selected'
           },
           'demoId': 'active-color'
@@ -245,7 +244,7 @@ export default {
         {
           'name': 'modelValue / v-model',
           'type': 'string[] | number[]',
-          'defaultValue': '',
+          'defaultValue': '--',
           'desc': {
             'zh-CN': '单选组绑定值',
             'en-US': 'Radio group binding value'
@@ -256,17 +255,17 @@ export default {
           'name': 'options',
           'type': 'IRadioGroupOptions[]',
           'typeAnchorName': 'IRadioGroupOptions',
-          'defaultValue': '',
+          'defaultValue': '--',
           'desc': {
-            'zh-CN': '配置式单选组设置',
-            'en-US': 'Configuration based radio group settings'
+            'zh-CN': '配置式单选组设置列表',
+            'en-US': 'Configuration based radio group settings list'
           },
           'demoId': 'group-options'
         },
         {
           'name': 'size',
-          'type': 'medium | small | mini',
-          'defaultValue': '',
+          'type': "'medium' | small' | 'mini'",
+          'defaultValue': '--',
           'desc': {
             'zh-CN': '单选组尺寸',
             'en-US': 'Radio Group Size'
@@ -276,19 +275,19 @@ export default {
         {
           'name': 'text-color',
           'type': 'string',
-          'defaultValue': '',
+          'defaultValue': '--',
           'desc': {
-            'zh-CN': '设置按钮形式单选激活时的文本颜色',
+            'zh-CN': '按钮形式单选激活时的文本颜色',
             'en-US': 'Set the text color for button format radio active'
           },
           'demoId': 'active-color'
         },
         {
           'name': 'type',
-          'type': 'radio | button',
-          'defaultValue': 'radio',
+          'type': "'radio' | 'button'",
+          'defaultValue': "'radio'",
           'desc': {
-            'zh-CN': '设置配置式单选组的展示形式',
+            'zh-CN': '配置式单选组的展示形式',
             'en-US': 'Set the display format of configurable radio groups'
           },
           'demoId': 'group-options'
@@ -308,7 +307,7 @@ export default {
         {
           'name': 'change',
           'type': '(value: number[] | string[]) => void',
-          'defaultValue': '',
+          'defaultValue': '--',
           'desc': {
             'zh-CN': '绑定值变化时触发的事件',
             'en-US': 'Event triggered when the binding value changes'
@@ -320,9 +319,9 @@ export default {
         {
           'name': 'default',
           'type': '',
-          'defaultValue': '',
+          'defaultValue': '--',
           'desc': {
-            'zh-CN': 'RadioGroup的默认插槽',
+            'zh-CN': 'radio-group 的默认插槽',
             'en-US': 'Radio group default slot'
           },
           'demoId': 'radio-group'
@@ -346,7 +345,7 @@ export default {
         {
           'name': 'label',
           'type': 'boolean | number | string',
-          'defaultValue': '',
+          'defaultValue': '--',
           'desc': {
             'zh-CN': 'Radio 的 value',
             'en-US': 'Radio value'
@@ -356,7 +355,7 @@ export default {
         {
           'name': 'name',
           'type': 'string',
-          'defaultValue': '',
+          'defaultValue': '--',
           'desc': {
             'zh-CN': '原生name属性',
             'en-US': 'Native name attribute'
@@ -366,7 +365,7 @@ export default {
         {
           'name': 'text',
           'type': 'string',
-          'defaultValue': '',
+          'defaultValue': '--',
           'desc': {
             'zh-CN': '单选框文本内容',
             'en-US': 'Radio Box Text Content'
@@ -378,7 +377,7 @@ export default {
         {
           'name': 'default',
           'type': '',
-          'defaultValue': '',
+          'defaultValue': '--',
           'desc': {
             'zh-CN': '默认插槽',
             'en-US': 'Default slot'

package/demos/pc/app/rate/webdoc/rate.js

@@ -5,7 +5,7 @@ export default {
     {
       'demoId': 'basic-usage',
       'name': { 'zh-CN': '基本用法', 'en-US': 'Basic Usage' },
-      'desc': { 'zh-CN': '详细用法参考如下示例', 'en-US': 'For details, see the following example.' },
+      'desc': { 'zh-CN': '', 'en-US': '' },
       'codeFiles': ['basic-usage.vue']
     },
     {
@@ -147,7 +147,7 @@ export default {
       'name': { 'zh-CN': '界限值', 'en-US': 'Boundaries' },
       'desc': {
         'zh-CN':
-          '<p>可通过 <code>low-threshold high-threshold</code> 分别设置下限值和上限值，通过<code>colors</code>配置显示星的颜色</p>\n',
+          '<p>可通过 <code>low-threshold high-threshold</code> 分别设置下限值和上限值，通过<code>colors</code>配置显示星的颜色。</p>',
         'en-US':
           '<p>You can set the lower limit and upper limit by using <code>low-threshold high-threshold</code>, and set the color of the displayed star by using <code>colors</p>\n'
       },

package/demos/pc/app/search/events-composition-api.vue

@@ -0,0 +1,46 @@
+<template>
+  <div>
+    <p>搜索事件</p>
+    <tiny-search @search="search" is-enter-search></tiny-search>
+    <p>值变化事件</p>
+    <tiny-search @change="change" @input="input"></tiny-search>
+    <p>类型选中事件</p>
+    <tiny-search :search-types="searchTypes" @select="select"></tiny-search>
+  </div>
+</template>
+
+<script setup lang="jsx">
+import { ref } from 'vue'
+import { Search as TinySearch, Modal } from '@opentiny/vue'
+
+const searchTypes = ref([
+  {
+    text: '找人',
+    value: 1
+  },
+  {
+    text: '找文档',
+    value: 2
+  },
+  {
+    text: '找谁',
+    value: 3
+  }
+])
+
+function search(key, value) {
+  Modal.message(`${value}`)
+}
+
+function change(key, value) {
+  Modal.message(`change: ${value}`)
+}
+
+function input(key, value) {
+  Modal.message(`input: ${key}, ${JSON.stringify(value)}`)
+}
+
+function select(value) {
+  Modal.message({ message: `${value.text}`, status: 'info' })
+}
+</script>

package/demos/pc/app/search/events.spec.ts

@@ -0,0 +1,36 @@
+import { expect, test } from '@playwright/test'
+
+test('事件是否正常触发', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('search#search-events')
+
+  const modal = page.locator('.tiny-modal')
+  const input = page.locator('.tiny-search').getByRole('textbox')
+  const modalText = modal.getByText('111')
+  const button = page.locator('.tiny-search__input-btn > a')
+  const empty = modal.getByText('undefined')
+
+  await button.click()
+  await expect(empty).toBeVisible()
+  await input.fill('111')
+  await button.click()
+  await modalText.waitFor({ state: 'attached', timeout: 100 })
+
+  // change事件
+  await input.fill('111')
+  await input.press('Enter')
+  await modalText.waitFor({ state: 'attached', timeout: 100 })
+
+  // select事件
+  const search = page.locator('.tiny-search')
+  const expand = search.locator('.icon-outer')
+  const option = search.locator('.tiny-search__poplist-item').filter({ hasText: '找谁' })
+  const text = search.locator('.tiny-search__text')
+  const modalContent = page.locator('.tiny-modal').getByText('找谁')
+
+  await expect(text).toHaveText('找人')
+  await expand.click()
+  await option.click() // 下拉选择
+  await expect(text).toHaveText('找谁')
+  await modalContent.waitFor({ state: 'attached', timeout: 100 })
+})

package/demos/pc/app/search/{select-events.vue → events.vue}

@@ -1,5 +1,12 @@
 <template>
-  <tiny-search :search-types="searchTypes" @select="select"></tiny-search>
+  <div>
+    <p>搜索事件</p>
+    <tiny-search @search="search" is-enter-search></tiny-search>
+    <p>值变化事件</p>
+    <tiny-search @change="change" @input="input"></tiny-search>
+    <p>类型选中事件</p>
+    <tiny-search :search-types="searchTypes" @select="select"></tiny-search>
+  </div>
 </template>
 
 <script lang="jsx">
@@ -28,6 +35,15 @@ export default {
     }
   },
   methods: {
+    search(key, value) {
+      Modal.message(`${value}`)
+    },
+    change(key, value) {
+      Modal.message(`change: ${value}`)
+    },
+    input(key, value) {
+      Modal.message(`input: ${key}, ${JSON.stringify(value)}`)
+    },
     select(value) {
       Modal.message({ message: `${value.text}`, status: 'info' })
     }

package/demos/pc/app/search/webdoc/search.js

@@ -6,9 +6,9 @@ export default {
       'demoId': 'basic-usage',
       'name': { 'zh-CN': '基本用法', 'en-US': 'Basic Usage' },
       'desc': {
-        'zh-CN': '通过<code>v-model</code>设置双向绑定搜索值，<code>placeholder</code>设置默认占位符文本。',
+        'zh-CN': '通过 <code>v-model</code> 设置双向绑定搜索值， <code>placeholder</code> 设置默认占位符文本。',
         'en-US':
-          'Set bidirectional binding search values through<code>v-model</code>, and set default placeholder text through<code>placeholder</code>.'
+          'Set bidirectional binding search values through <code>v-model</code> , and set default placeholder text through <code>placeholder</code> .'
       },
       'codeFiles': ['basic-usage.vue']
     },
@@ -16,8 +16,8 @@ export default {
       'demoId': 'clearable',
       'name': { 'zh-CN': '可清除', 'en-US': 'Can be cleared' },
       'desc': {
-        'zh-CN': '通过<code>clearable</code>设置显示清空图标按钮。',
-        'en-US': 'Set the display clear icon button through<code>clear</code>.'
+        'zh-CN': '通过 <code>clearable</code> 设置显示清空图标按钮。',
+        'en-US': 'Set the display clear icon button through <code>clear</code> .'
       },
       'codeFiles': ['clearable.vue']
     },
@@ -25,8 +25,8 @@ export default {
       'demoId': 'mini-mode',
       'name': { 'zh-CN': '迷你模式', 'en-US': 'Mini mode' },
       'desc': {
-        'zh-CN': '通过<code>mini</code>设置为mini模式。',
-        'en-US': 'Set to mini mode through<code>mini</code>.'
+        'zh-CN': '通过 <code>mini</code> 设置为mini模式。',
+        'en-US': 'Set to mini mode through <code>mini</code> .'
       },
       'codeFiles': ['mini-mode.vue']
     },
@@ -34,9 +34,9 @@ export default {
       'demoId': 'search-types',
       'name': { 'zh-CN': '搜索类型', 'en-US': 'Search Type' },
       'desc': {
-        'zh-CN': '通过<code>search-types</code>设置可选的搜索类型，<code>type-value</code>设置搜索类型的默认值。',
+        'zh-CN': '通过 <code>search-types</code> 设置可选的搜索类型， <code>type-value</code> 设置搜索类型的默认值。',
         'en-US':
-          'Set optional search types by<code>search-types</code>, and set default values for search types by<code>type-value</code>.'
+          'Set optional search types by <code>search-types</code> , and set default values for search types by <code>type-value</code> .'
       },
       'codeFiles': ['search-types.vue']
     },
@@ -44,8 +44,8 @@ export default {
       'demoId': 'transparent-mode',
       'name': { 'zh-CN': '透明模式', 'en-US': 'Transparent mode' },
       'desc': {
-        'zh-CN': '通过<code>transparent</code>设置为透明模式（注：<code>mini</code>模式下有效）。',
-        'en-US': 'Set to transparent mode through<code>transparent</code>(note: valid in<code>mini</code>mode).'
+        'zh-CN': '通过 <code>transparent</code> 设置为透明模式（注： <code>mini</code> 模式下有效）。',
+        'en-US': 'Set to transparent mode through <code>transparent</code> (note: valid in <code>mini</code> mode).'
       },
       'codeFiles': ['transparent-mode.vue']
     },
@@ -56,8 +56,8 @@ export default {
         'en-US': 'Custom Search Type Dropdown'
       },
       'desc': {
-        'zh-CN': '通过<code>poplist</code>插槽自定义搜索类型弹出的内容。',
-        'en-US': 'Customize the search type pop-up content through the<code>popup</code>slot.'
+        'zh-CN': '通过 <code>poplist</code> 插槽自定义搜索类型弹出的内容。',
+        'en-US': 'Customize the search type pop-up content through the <code>popup</code> slot.'
       },
       'codeFiles': ['custom-search-types.vue']
     },
@@ -65,8 +65,8 @@ export default {
       'demoId': 'show-selected-types',
       'name': { 'zh-CN': '定义默认搜索类型', 'en-US': 'Customize default search type' },
       'desc': {
-        'zh-CN': '通过<code>text</code>插槽自定义默认搜索类型的内容。',
-        'en-US': 'Customize the content of the default search type through the<code>text</code>slot.'
+        'zh-CN': '通过 <code>text</code> 插槽自定义默认搜索类型的内容。',
+        'en-US': 'Customize the content of the default search type through the <code>text</code> slot.'
       },
       'codeFiles': ['show-selected-types.vue']
     },
@@ -74,39 +74,23 @@ export default {
       'demoId': 'slot-prefix',
       'name': { 'zh-CN': '左侧插槽', 'en-US': 'Left slot' },
       'desc': {
-        'zh-CN': '通过<code>prefix</code>插槽自定义左侧内容。',
-        'en-US': 'Customize the left content through the<code>prefix</code>slot.'
+        'zh-CN': '通过 <code>prefix</code> 插槽自定义左侧内容。',
+        'en-US': 'Customize the left content through the <code>prefix</code> slot.'
       },
       'codeFiles': ['slot-prefix.vue']
     },
     {
-      'demoId': 'search-events',
-      'name': { 'zh-CN': 'search 事件', 'en-US': 'Search event' },
+      'demoId': 'events',
+      'name': { 'zh-CN': '事件', 'en-US': 'Search event' },
       'desc': {
-        'zh-CN': '通过<code>is-enter-search</code>设置回车触发搜索事件，<code>search</code>监听搜索事件。',
-        'en-US':
-          'Set a carriage return to trigger a search event by<code>is-enter-search</code>, and listen for search events by<code>search</code>.'
-      },
-      'codeFiles': ['search-events.vue']
-    },
-    {
-      'demoId': 'change-events',
-      'name': { 'zh-CN': '值变化事件', 'en-US': 'Change event' },
-      'desc': {
-        'zh-CN': '通过<code>change</code>监听输入框失焦时搜索值改变事件, <code>input</code>监听搜索值实时改变事件。',
-        'en-US':
-          'By<code>change</code>listening for search value change events when the input box is out of focus,<code>input</code>listening for real-time search value change events.'
-      },
-      'codeFiles': ['change-events.vue']
-    },
-    {
-      'demoId': 'select-events',
-      'name': { 'zh-CN': 'select 事件', 'en-US': 'Select event' },
-      'desc': {
-        'zh-CN': '通过<code>select</code>监听搜索类型选中事件。',
-        'en-US': 'Listen for search type selection events through<code>select</code>.'
+        'zh-CN': `<div class="tip custom-block"><p class="custom-block-title">通过 <code>is-enter-search</code> 设置回车触发搜索事件， <code>search</code> 监听搜索事件；<br />
+              通过 <code>change</code> 监听输入框失焦时搜索值改变事件, <code>input</code> 监听搜索值实时改变事件；<br />
+              通过 <code>select</code> 监听搜索类型选中事件。</p></div>`,
+        'en-US': `<div class="tip custom-block"><p class="custom-block-title">Set a carriage return to trigger a search event by <code>is enter search</code> , and listen for search events by <code>search</code> <br />
+              By <code>change</code> listening for search value change events when the input box is out of focus, and <code>input</code> listening for real-time search value change events<br />
+              Listen for search type selection events through <code>select</code> .</p></div>`
       },
-      'codeFiles': ['select-events.vue']
+      'codeFiles': ['events.vue']
     }
   ],
   apis: [
@@ -132,7 +116,7 @@ export default {
             'zh-CN': '是否在按下键盘Enter键时触发search事件',
             'en-US': 'Whether to trigger the search event when pressing the Enter key on the keyboard'
           },
-          'demoId': 'search-events'
+          'demoId': 'events'
         },
         {
           'name': 'mini',
@@ -199,50 +183,50 @@ export default {
       'events': [
         {
           'name': 'change',
-          'type': '(arg1: ITypeValue, arg2: string) => void',
+          'type': '(value: ITypeValue, input: string) => void',
           'typeAnchorName': 'ITypeValue',
           'defaultValue': '',
           'desc': {
-            'zh-CN': '输入完成时触发的回调函数；// arg1 为搜索类型，arg2 为当前输入值',
+            'zh-CN': '输入完成时触发的回调函数； value 为搜索类型，input 为当前输入值',
             'en-US':
-              'The callback function triggered upon input completion// Arg1 is the search type, arg2 is the current input value'
+              'The callback function triggered upon input completion; value is the search type, input is the current input value'
           },
-          'demoId': 'change-events'
+          'demoId': 'events'
         },
         {
           'name': 'input',
-          'type': '(arg1: string, arg2: ITypeValue) => void',
+          'type': '(input: string, value: ITypeValue) => void',
           'typeAnchorName': 'ITypeValue',
           'defaultValue': '',
           'desc': {
-            'zh-CN': '输入实时触发的回调函数；// arg1 为当前输入值，arg2 为搜索类型【3.9.1新增】',
+            'zh-CN': '输入实时触发的回调函数； input 为当前输入值，value 为搜索类型【3.9.1新增】',
             'en-US':
-              'Input a real-time triggered callback function// Arg1 is the current input value, arg2 is the search type [3.9.1 added]'
+              'Input a real-time triggered callback function; input is the current input value, value is the search type [3.9.1 added]'
           },
-          'demoId': 'change-events'
+          'demoId': 'events'
         },
         {
           'name': 'search',
-          'type': '(arg1: ITypeValue, arg2: string) => void',
+          'type': '(value: ITypeValue, input: string) => void',
           'typeAnchorName': 'ITypeValue',
           'defaultValue': '',
           'desc': {
-            'zh-CN': '展开模式下，点击搜索按钮时触发的回调函数；// arg1 为搜索类型，arg2 为当前输入值',
+            'zh-CN': '展开模式下，点击搜索按钮时触发的回调函数； value 为搜索类型，input 为当前输入值',
             'en-US':
-              'The callback function triggered when clicking the search button in expansion mode// Arg1 is the search type, arg2 is the current input value'
+              'The callback function triggered when clicking the search button in expansion mode; value is the search type, input is the current input value'
           },
-          'demoId': 'search-events'
+          'demoId': 'events'
         },
         {
           'name': 'select',
-          'type': '(arg1: ITypeValue) => void',
+          'type': '(value: ITypeValue) => void',
           'typeAnchorName': 'ITypeValue',
           'defaultValue': '',
           'desc': {
-            'zh-CN': '切换类型时触发的回调函数；// arg1 为搜索类型',
-            'en-US': 'The callback function triggered when switching types// Arg1 is a search type'
+            'zh-CN': '切换类型时触发的回调函数； value 为搜索类型',
+            'en-US': 'The callback function triggered when switching types; value is a search type'
           },
-          'demoId': 'select-events'
+          'demoId': 'events'
         }
       ],
       'slots': [

package/demos/pc/app/select/allow-create-composition-api.vue

@@ -1,7 +1,14 @@
 <template>
-  <tiny-select v-model="value" placeholder="请选择" allow-create filterable default-first-option>
-    <tiny-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </tiny-option>
-  </tiny-select>
+  <div>
+    <p>场景1：allow-create + filterable，点击创建条目</p>
+    <tiny-select v-model="value" allow-create filterable>
+      <tiny-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </tiny-option>
+    </tiny-select>
+    <p>场景2：allow-create + filterable + default-first-option，Enter 键创建条目</p>
+    <tiny-select v-model="value" allow-create filterable default-first-option>
+      <tiny-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </tiny-option>
+    </tiny-select>
+  </div>
 </template>
 
 <script setup>
@@ -17,3 +24,13 @@ const options = ref([
 ])
 const value = ref('')
 </script>
+
+<style lang="less" scoped>
+.tiny-select {
+  width: 280px;
+}
+p {
+  font-size: 14px;
+  line-height: 1.5;
+}
+</style>