feat(autocomplete): [autocomplete] update autocomplete demos (#2384)

* feat(autocomplete): update autocomplete demos

* feat(autocomplete): update autocomplete demos

Author: zzcr

examples/sites/demos/pc/app/autocomplete/size-composition-api.vue

@@ -1,11 +1,36 @@
 <template>
   <div class="demo-autocomplete">
-    <tiny-autocomplete
-      size="medium"
-      v-model="value"
-      :fetch-suggestions="querySearch"
-      placeholder="请输入内容"
-    ></tiny-autocomplete>
+    <div>
+      <div class="title">medium:</div>
+      <tiny-autocomplete
+        size="medium"
+        v-model="value"
+        :fetch-suggestions="querySearch"
+        placeholder="请输入内容"
+      ></tiny-autocomplete>
+    </div>
+    <div>
+      <div class="title">default:</div>
+      <tiny-autocomplete v-model="value" :fetch-suggestions="querySearch" placeholder="请输入内容"></tiny-autocomplete>
+    </div>
+    <div>
+      <div class="title">small:</div>
+      <tiny-autocomplete
+        size="small"
+        v-model="value"
+        :fetch-suggestions="querySearch"
+        placeholder="请输入内容"
+      ></tiny-autocomplete>
+    </div>
+    <div>
+      <div class="title">small:</div>
+      <tiny-autocomplete
+        size="mini"
+        v-model="value"
+        :fetch-suggestions="querySearch"
+        placeholder="请输入内容"
+      ></tiny-autocomplete>
+    </div>
   </div>
 </template>
 
@@ -65,4 +90,10 @@ function loadAll() {
 .demo-autocomplete .tiny-autocomplete {
   width: 270px;
 }
+.demo-autocomplete > div {
+  margin-top: 12px;
+}
+.demo-autocomplete > div > .title {
+  line-height: 26px;
+}
 </style>

examples/sites/demos/pc/app/autocomplete/size.spec.ts

@@ -3,7 +3,14 @@ import { test, expect } from '@playwright/test'
 test('size', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('autocomplete#size')
-  await page.getByRole('textbox', { name: '请输入内容', exact: true }).click()
-  await page.getByRole('option', { name: 'WWWW科技YX公司' }).click()
-  await expect(page.locator('//div[@class="tiny-input tiny-input-medium"]')).toHaveClass(/tiny-input-medium/)
+  const demo = page.locator('#size')
+  const meiumSize = demo.locator('.tiny-autocomplete').first()
+  const defaultSize = demo.locator('.tiny-autocomplete').nth(1)
+  const smallSize = demo.locator('.tiny-autocomplete').nth(2)
+  const miniSize = demo.locator('.tiny-autocomplete').nth(3)
+
+  await expect(meiumSize).toHaveCSS('height', '40px')
+  await expect(defaultSize).toHaveCSS('height', '32px')
+  await expect(smallSize).toHaveCSS('height', '28px')
+  await expect(miniSize).toHaveCSS('height', '24px')
 })

examples/sites/demos/pc/app/autocomplete/size.vue

@@ -1,11 +1,36 @@
 <template>
   <div class="demo-autocomplete">
-    <tiny-autocomplete
-      size="medium"
-      v-model="value"
-      :fetch-suggestions="querySearch"
-      placeholder="请输入内容"
-    ></tiny-autocomplete>
+    <div>
+      <div class="title">medium:</div>
+      <tiny-autocomplete
+        size="medium"
+        v-model="value"
+        :fetch-suggestions="querySearch"
+        placeholder="请输入内容"
+      ></tiny-autocomplete>
+    </div>
+    <div>
+      <div class="title">default:</div>
+      <tiny-autocomplete v-model="value" :fetch-suggestions="querySearch" placeholder="请输入内容"></tiny-autocomplete>
+    </div>
+    <div>
+      <div class="title">small:</div>
+      <tiny-autocomplete
+        size="small"
+        v-model="value"
+        :fetch-suggestions="querySearch"
+        placeholder="请输入内容"
+      ></tiny-autocomplete>
+    </div>
+    <div>
+      <div class="title">small:</div>
+      <tiny-autocomplete
+        size="mini"
+        v-model="value"
+        :fetch-suggestions="querySearch"
+        placeholder="请输入内容"
+      ></tiny-autocomplete>
+    </div>
   </div>
 </template>
 
@@ -72,4 +97,10 @@ export default {
 .demo-autocomplete .tiny-autocomplete {
   width: 270px;
 }
+.demo-autocomplete > div {
+  margin-top: 12px;
+}
+.demo-autocomplete > div > .title {
+  line-height: 26px;
+}
 </style>

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

@@ -29,11 +29,12 @@ export default {
     {
       demoId: 'size',
       name: {
-        'zh-CN': '输入框大小',
+        'zh-CN': '尺寸',
         'en-US': 'Text box size'
       },
       desc: {
-        'zh-CN': '<p>可选择值为<code>medium</code>，<code>small</code>，<code>mini</code>。</p>',
+        'zh-CN':
+          '<p>可选择值为<code>medium</code>，<code>default</code>，<code>small</code>，<code>mini</code>，不传递就是默认尺寸。</p>',
         'en-US': '<p>The value can be <code>medium</code>, <code>small</code>, or <code>mini</code>.</p>'
       },
       codeFiles: ['size.vue']