@opentiny/vue-docs 2.1.8 → 2.1.10

package/demos/pc/app/button-group/size.spec.ts

@@ -4,11 +4,11 @@ test('测试按钮尺寸', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('button-group#size')
 
-  const miniHeight = '24px'
-  const smallHeight = '36px'
   const mediumHeight = '42px'
-  const preview = page.locator('#preview')
-  const buttonGroup = preview.locator('.tiny-button-group').first()
+  const smallHeight = '32px'
+  const miniHeight = '24px'
+  const demo = page.locator('#size')
+  const buttonGroup = demo.locator('.tiny-button-group').first()
   await buttonGroup.getByRole('button', { name: 'Button3' }).click()
   await expect(buttonGroup.locator('li').nth(2)).toHaveClass('active')
   await buttonGroup.getByRole('button', { name: 'Button2' }).click()
@@ -16,7 +16,7 @@ test('测试按钮尺寸', async ({ page }) => {
   await buttonGroup.getByRole('button', { name: 'Button1' }).click()
   await expect(buttonGroup.locator('li').nth(0)).toHaveClass('active')
 
-  await expect(preview.getByRole('button', { name: 'Button1' }).first()).toHaveCSS('height', miniHeight)
-  await expect(preview.getByRole('button', { name: 'Button1' }).nth(1)).toHaveCSS('height', smallHeight)
-  await expect(preview.getByRole('button', { name: 'Button1' }).nth(2)).toHaveCSS('height', mediumHeight)
+  await expect(demo.getByRole('button', { name: 'Button1' }).first()).toHaveCSS('height', mediumHeight)
+  await expect(demo.getByRole('button', { name: 'Button1' }).nth(1)).toHaveCSS('height', smallHeight)
+  await expect(demo.getByRole('button', { name: 'Button1' }).nth(2)).toHaveCSS('height', miniHeight)
 })

package/demos/pc/app/button-group/size.vue

@@ -1,8 +1,8 @@
 <template>
   <div class="button-group-demo">
-    <tiny-button-group size="mini" :data="groupData" v-model="checkedVal"></tiny-button-group>
-    <tiny-button-group size="small" :data="groupData" v-model="checkedVal"></tiny-button-group>
     <tiny-button-group size="medium" :data="groupData" v-model="checkedVal"></tiny-button-group>
+    <tiny-button-group size="small" :data="groupData" v-model="checkedVal"></tiny-button-group>
+    <tiny-button-group size="mini" :data="groupData" v-model="checkedVal"></tiny-button-group>
   </div>
 </template>
 

package/demos/pc/app/button-group/slot-default.spec.ts

@@ -3,8 +3,8 @@ import { test, expect } from '@playwright/test'
 test('测试按钮默认插槽', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('button-group#slot-default')
-  const preview = page.locator('#preview')
-  const buttonGroup = preview.locator('.tiny-button-group').first()
+  const demo = page.locator('#slot-default')
+  const buttonGroup = demo.locator('.tiny-button-group').first()
   await expect(buttonGroup.getByRole('button', { name: 'Button1' })).toHaveCSS('background-color', 'rgb(94, 124, 224)')
   await expect(buttonGroup.getByRole('button', { name: 'Button2' })).toHaveCSS('background-color', 'rgb(80, 212, 171)')
   await expect(buttonGroup.getByRole('button', { name: 'Button3' })).toHaveClass(/is-disabled/)

package/demos/pc/app/button-group/sup-composition-api.vue

@@ -23,8 +23,8 @@ const groupData = ref([
     text: 'Button1',
     value: 'Button1',
     sup: {
-      class: ['disabled-bg', 'disabled-text'],
-      text: '售罄'
+      class: ['success-bg'],
+      text: '特惠'
     }
   },
   {
@@ -56,12 +56,10 @@ const groupData = ref([
 </script>
 
 <style scoped>
-.tiny-button-group :deep(.disabled-bg) {
-  background-color: #ccc;
-}
-.tiny-button-group :deep(.disabled-tex)t {
-  color: #000;
+.tiny-button-group :deep(.success-bg) {
+  background-color: #52c41a;
 }
+
 .tiny-button-group :deep(.sup-slot) {
   line-height: 1;
   padding: 0 4px;

package/demos/pc/app/button-group/sup.spec.ts

@@ -3,17 +3,16 @@ import { test, expect } from '@playwright/test'
 test('测试选块角标', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('button-group#sup')
-  const preview = page.locator('#preview')
-  const buttonGroup = preview.locator('.tiny-button-group').first()
+  const demo = page.locator('#sup')
+  const buttonGroup = demo.locator('.tiny-button-group').first()
   const item = buttonGroup.locator('.tiny-group-item > li')
-  const getSup = (parent) => parent.locator('.tiny-group-item__sup')
+  const getSup = (parent: any) => parent.locator('.tiny-group-item__sup')
 
   // 测试自定义背景和字体颜色
   const sup1 = getSup(item.first())
   await expect(sup1).toBeVisible()
   await expect(sup1).toHaveCSS('position', 'absolute')
-  await expect(sup1).toHaveCSS('color', 'rgb(0, 0, 0)')
-  await expect(sup1).toHaveCSS('background-color', 'rgb(204, 204, 204)')
+  await expect(sup1).toHaveCSS('background-color', 'rgb(82, 196, 26)')
 
   // 测试图标角标
   const sup2 = getSup(item.nth(1))

package/demos/pc/app/button-group/sup.vue

@@ -29,8 +29,8 @@ export default {
           text: 'Button1',
           value: 'Button1',
           sup: {
-            class: ['disabled-bg', 'disabled-text'],
-            text: '售罄'
+            class: ['success-bg'],
+            text: '特惠'
           }
         },
         {
@@ -65,12 +65,10 @@ export default {
 </script>
 
 <style scoped>
-.tiny-button-group :deep(.disabled-bg) {
-  background-color: #ccc;
-}
-.tiny-button-group :deep(.disabled-tex)t {
-  color: #000;
+.tiny-button-group :deep(.success-bg) {
+  background-color: #52c41a;
 }
+
 .tiny-button-group :deep(.sup-slot) {
   line-height: 1;
   padding: 0 4px;

package/demos/pc/app/button-group/text-value-field.spec.ts

@@ -2,14 +2,17 @@ import { test, expect } from '@playwright/test'
 
 test('测试数据字段映射', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
-  await page.goto('button-group#data')
+  await page.goto('button-group#text-value-field')
 
-  const preview = page.locator('#preview')
-  const buttonGroup = preview.locator('.tiny-button-group').first()
+  const demo = page.locator('#text-value-field')
+  const buttonGroup = demo.locator('.tiny-button-group').first()
   await buttonGroup.getByRole('button', { name: 'Button3' }).click()
   await expect(buttonGroup.locator('li').nth(2)).toHaveClass('active')
+  await expect(demo.locator('.pc-demo')).toHaveText(/当前选中值：3/)
   await buttonGroup.getByRole('button', { name: 'Button2' }).click()
   await expect(buttonGroup.locator('li').nth(1)).toHaveClass('active')
+  await expect(demo.locator('.pc-demo')).toHaveText(/当前选中值：2/)
   await buttonGroup.getByRole('button', { name: 'Button1' }).click()
   await expect(buttonGroup.locator('li').nth(0)).toHaveClass('active')
+  await expect(demo.locator('.pc-demo')).toHaveText(/当前选中值：1/)
 })

package/demos/pc/app/button-group/webdoc/button-group.js

@@ -7,18 +7,18 @@ export default {
       'name': { 'zh-CN': '基本用法', 'en-US': 'Basic Usage' },
       'desc': {
         'zh-CN':
-          '<p>通过 <code>data</code> 设置按钮组数据，类型为<a href="#IButtonGroupData">IButtonGroupData</a>，通过 <code>v-model</code> 设置绑定值。</p>',
+          '<p>通过 <code>data</code> 设置按钮组数据，类型为 <a href="#IButtonGroupData">IButtonGroupData</a> ，通过 <code>v-model</code> 设置绑定值。</p>',
         'en-US':
-          '<p>Set the button group data to type<a="# IButtonGroupData">IButtonGroupData</a>through <code>data</code> , and set the binding value through <code>v model</code> .</p>'
+          '<p>Set the button group data to type <a="# IButtonGroupData">IButtonGroupData</a> through <code>data</code> , and set the binding value through <code>v model</code> .</p>'
       },
       'codeFiles': ['basic-usage.vue']
     },
     {
       'demoId': 'size',
-      'name': { 'zh-CN': '设置组件尺寸大小', 'en-US': 'Set Component Size' },
+      'name': { 'zh-CN': '组件尺寸大小', 'en-US': 'Set Component Size' },
       'desc': {
         'zh-CN':
-          '<p>通过 <code>size</code> 设置尺寸大小，可选值为： <code>medium</code> ， <code>small</code> ， <code>mini</code> 。</p>',
+          '<p>通过 <code>size</code> 设置尺寸大小，可选值有 <code>medium</code> 、<code>small</code> 、<code>mini</code> 。</p>',
         'en-US':
           '<p>Set the size through <code>size</code> . The optional values are: <code>medium</code> , <code>small</code> , <code>mini</code> .</p>'
       },
@@ -49,7 +49,7 @@ export default {
       'name': { 'zh-CN': '数据字段映射', 'en-US': 'Data Field Mapping' },
       'desc': {
         'zh-CN':
-          '<p>若按钮组数据对象中的字段不是默认的 text 和 value ，则可通过 <code>text-field</code> 、 <code>value-field</code> 属性进行映射。</p>',
+          '<p>若按钮组数据对象中的字段不是默认的 <code>text</code> 和 <code>value</code> ，则可通过 <code>text-field</code> 、<code>value-field</code> 属性进行映射。</p>',
         'en-US':
           '<p>If the fields in the button group data object are not the default text and value, the <code>text-field</code> and <code>value-field</code> attributes can be used for mapping. </p>'
       },
@@ -76,21 +76,12 @@ export default {
       },
       'codeFiles': ['show-edit.vue']
     },
-    {
-      'demoId': 'change-event',
-      'name': { 'zh-CN': 'change事件', 'en-US': 'Change Event' },
-      'desc': {
-        'zh-CN': '<p>当选中按钮发生改变时触发 <code>change</code> 事件。</p>',
-        'en-US': '<p>The <code>change</code> event is triggered when the selected button is changed. </p>'
-      },
-      'codeFiles': ['change-event.vue']
-    },
     {
       'demoId': 'slot-default',
       'name': { 'zh-CN': '默认插槽', 'en-US': 'Default slot' },
       'desc': {
         'zh-CN':
-          '<p>使用默认插槽自定义按钮组，使用默认插槽后， <code>button-group</code> 的 <code>data、text-field、value-field、value / v-model、size</code> 属性对插槽中的按钮将不再生效。</p>',
+          '<p>使用默认插槽自定义按钮组，使用默认插槽后， <code>button-group</code> 的 <code>data</code> 、<code>text-field</code> 、<code>value-field</code> 、<code>value / v-model</code> 、<code>size</code> 属性对插槽中的按钮将不再生效。</p>',
         'en-US':
           '<p>When the default slot mode is used, the <code>data, text-field, value-field, v-model, and size</code> attributes of the ButtonGroup do not take effect for buttons in the slot. </p>'
       },
@@ -120,10 +111,19 @@ export default {
       'name': { 'zh-CN': '选块角标', 'en-US': '' },
       'desc': {
         'zh-CN':
-          '<p>通过 <code>data</code> 的 <code>sup</code> 属性配置选块角标。详见<a href="IButtonGroupData">IButtonGroupData</a></p>',
+          '<p>通过 <code>data</code> 的 <code>sup</code> 属性配置选块角标，详见 <a href="IButtonGroupData">IButtonGroupData</a> 。</p>',
         'en-US': ''
       },
       'codeFiles': ['sup.vue']
+    },
+    {
+      'demoId': 'change-event',
+      'name': { 'zh-CN': '事件', 'en-US': 'Change Event' },
+      'desc': {
+        'zh-CN': '<p>当选中按钮发生改变时触发 <code>change</code> 事件。</p>',
+        'en-US': '<p>The <code>change</code> event is triggered when the selected button is changed. </p>'
+      },
+      'codeFiles': ['change-event.vue']
     }
   ],
   apis: [
@@ -145,7 +145,7 @@ export default {
           'name': 'data',
           'type': 'IButtonGroupData[]',
           'typeAnchorName': 'IButtonGroupData',
-          'defaultValue': '',
+          'defaultValue': '--',
           'desc': {
             'zh-CN': '按钮组数据',
             'en-US': 'button group data'
@@ -157,7 +157,7 @@ export default {
           'type': 'boolean',
           'defaultValue': 'false',
           'desc': {
-            'zh-CN': '设置按钮组是否被禁用',
+            'zh-CN': '是否被禁用按钮组',
             'en-US': 'Sets whether the button group is disabled'
           },
           'demoId': 'disabled'
@@ -165,7 +165,7 @@ export default {
         {
           'name': 'modelValue / v-model',
           'type': 'number | string',
-          'defaultValue': '',
+          'defaultValue': '--',
           'desc': {
             'zh-CN': '默认选中按钮的值',
             'en-US': 'Default value of the selected button'
@@ -196,19 +196,19 @@ export default {
         {
           'name': 'show-more',
           'type': 'number',
-          'defaultValue': '',
+          'defaultValue': '--',
           'desc': {
-            'zh-CN': '设置超过多少个显示更多按钮',
-            'en-US': 'Set the number of more buttons to be displayed'
+            'zh-CN': '当超过给定的按钮数量时显示更多按钮',
+            'en-US': 'Show more buttons when the given number of buttons is exceeded'
           },
           'demoId': 'show-more'
         },
         {
           'name': 'size',
           'type': 'string',
-          'defaultValue': '',
+          'defaultValue': '--',
           'desc': {
-            'zh-CN': '设置组件大小',
+            'zh-CN': '按钮组尺寸大小',
             'en-US': 'Set the component size'
           },
           'demoId': 'size'
@@ -216,7 +216,7 @@ export default {
         {
           'name': 'text-field',
           'type': 'string',
-          'defaultValue': 'text',
+          'defaultValue': "'text'",
           'desc': {
             'zh-CN': '按钮显示文字的字段值',
             'en-US': 'Field value of the button displayed text'
@@ -226,9 +226,9 @@ export default {
         {
           'name': 'value-field',
           'type': 'string',
-          'defaultValue': 'value',
+          'defaultValue': "'value'",
           'desc': {
-            'zh-CN': '按钮值的字段值',
+            'zh-CN': '按钮选中值的字段值',
             'en-US': 'Field value of the button value'
           },
           'demoId': 'text-value-field'
@@ -238,9 +238,9 @@ export default {
         {
           'name': 'change',
           'type': '(value: string | number) => void',
-          'defaultValue': '',
+          'defaultValue': '--',
           'desc': {
-            'zh-CN': '当选中按钮发生改变时触发的回调函数',
+            'zh-CN': '当选中按钮发生改变时触发',
             'en-US': 'Set the callback function triggered when the selected button is changed'
           },
           'demoId': 'change-event'
@@ -248,9 +248,9 @@ export default {
         {
           'name': 'edit',
           'type': '() => void',
-          'defaultValue': '',
+          'defaultValue': '--',
           'desc': {
-            'zh-CN': '当编辑按钮被点击时触发的回调函数',
+            'zh-CN': '当编辑按钮被点击时触发',
             'en-US': 'Set the callback function triggered when the edit button is clicked'
           },
           'demoId': 'show-edit'
@@ -260,7 +260,7 @@ export default {
         {
           'name': 'default',
           'type': '',
-          'defaultValue': '',
+          'defaultValue': '--',
           'desc': {
             'zh-CN': '默认插槽，自定义按钮组内容',
             'en-US': 'button group content'

package/demos/pc/app/cascader/check-strictly-composition-api.vue

@@ -1,7 +1,9 @@
 <template>
-  <div>
-    <tiny-cascader :options="options" :props="{ checkStrictly: true }" v-model="value"></tiny-cascader>
-    value:{{ value }}
+  <div class="demo-tiny-cascader-check-strictly">
+    <div>value: {{ value }}</div>
+    <div>
+      <tiny-cascader :options="options" :props="{ checkStrictly: true }" v-model="value"></tiny-cascader>
+    </div>
   </div>
 </template>
 
@@ -205,3 +207,9 @@ const options = ref([
   }
 ])
 </script>
+
+<style scoped>
+.demo-tiny-cascader-check-strictly > :not(:last-child) {
+  margin-bottom: 12px;
+}
+</style>

package/demos/pc/app/cascader/check-strictly.vue

@@ -1,7 +1,9 @@
 <template>
-  <div>
-    <tiny-cascader :options="options" :props="{ checkStrictly: true }" v-model="value"></tiny-cascader>
-    value:{{ value }}
+  <div class="demo-tiny-cascader-check-strictly">
+    <div>value: {{ value }}</div>
+    <div>
+      <tiny-cascader :options="options" :props="{ checkStrictly: true }" v-model="value"></tiny-cascader>
+    </div>
   </div>
 </template>
 
@@ -213,3 +215,9 @@ export default {
   }
 }
 </script>
+
+<style scoped>
+.demo-tiny-cascader-check-strictly > :not(:last-child) {
+  margin-bottom: 12px;
+}
+</style>

package/demos/pc/app/cascader/clearable-composition-api.vue

@@ -1,13 +1,5 @@
 <template>
-  <tiny-cascader
-    v-model="value"
-    :options="options"
-    clearable
-    separator="+"
-    size="medium"
-    popper-class="custom-class"
-    :popper-append-to-body="false"
-  ></tiny-cascader>
+  <tiny-cascader v-model="value" :options="options" clearable separator="+"></tiny-cascader>
 </template>
 
 <script setup>

package/demos/pc/app/cascader/clearable.spec.ts

@@ -8,6 +8,4 @@ test('可清空', async ({ page }) => {
   await page.locator('.tiny-input__suffix-inner > .tiny-svg').click()
   const textClear = await page.getByRole('textbox', { name: '请选择' }).inputValue()
   await expect(textClear).toEqual('')
-  const medium = page.locator('.tiny-cascader--medium')
-  await expect(medium).toBeVisible()
 })

package/demos/pc/app/cascader/clearable.vue

@@ -1,13 +1,5 @@
 <template>
-  <tiny-cascader
-    v-model="value"
-    :options="options"
-    clearable
-    separator="+"
-    size="medium"
-    popper-class="custom-class"
-    :popper-append-to-body="false"
-  ></tiny-cascader>
+  <tiny-cascader v-model="value" :options="options" clearable separator="+"></tiny-cascader>
 </template>
 
 <script>

package/demos/pc/app/cascader/collapse-tags-composition-api.vue

@@ -1,5 +1,5 @@
 <template>
-  <tiny-cascader v-model="value" :options="options" :props="props" collapse-tags clearable></tiny-cascader>
+  <tiny-cascader v-model="value" :options="options" :props="props" collapse-tags></tiny-cascader>
 </template>
 
 <script setup>

package/demos/pc/app/cascader/collapse-tags.vue

@@ -1,5 +1,5 @@
 <template>
-  <tiny-cascader v-model="value" :options="options" :props="props" collapse-tags clearable></tiny-cascader>
+  <tiny-cascader v-model="value" :options="options" :props="props" collapse-tags></tiny-cascader>
 </template>
 
 <script>

package/demos/pc/app/cascader/disabled-items-composition-api.vue

@@ -1,7 +1,9 @@
 <template>
-  <tiny-cascader :options="optionsDis"></tiny-cascader>
+  <div class="cascader-demo-disabled">
+    <tiny-cascader :options="optionsDis"></tiny-cascader>
+    <tiny-cascader :options="optionsDis" disabled></tiny-cascader>
+  </div>
 </template>
-
 <script setup>
 import { ref } from 'vue'
 import { Cascader as TinyCascader } from '@opentiny/vue'
@@ -202,3 +204,9 @@ const optionsDis = ref([
   }
 ])
 </script>
+
+<style scoped>
+.cascader-demo-disabled > :not(:last-child){
+  margin-right: 12px;
+}
+</style>

package/demos/pc/app/cascader/disabled-items.spec.ts

@@ -3,9 +3,11 @@ import { test, expect } from '@playwright/test'
 test('禁用选项', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('cascader#disabled-items')
-  await page.getByRole('textbox', { name: '请选择' }).click()
-  const cascader = page.locator(
-    '.tiny-cascader-menu > .tiny-cascader-menu__wrap > .tiny-cascader-menu__list > .is-disabled'
-  )
-  await expect(cascader).toBeVisible()
+  await page.locator('.tiny-cascader').getByPlaceholder('请选择').nth(1).click()
+  const cascader1 = page.getByRole('menuitem', { name: '指南' })
+  await expect(cascader1).toHaveClass(/is-disabled/)
+
+  await page.getByPlaceholder('请选择').nth(1).click()
+  const cascader2 = page.locator('.tiny-cascader.is-disabled .tiny-input')
+  await expect(cascader2).toHaveClass(/is-disabled/)
 })

package/demos/pc/app/cascader/disabled-items.vue

@@ -1,5 +1,8 @@
 <template>
-  <tiny-cascader :options="optionsDis"></tiny-cascader>
+  <div class="cascader-demo-disabled">
+    <tiny-cascader :options="optionsDis"></tiny-cascader>
+    <tiny-cascader :options="optionsDis" disabled></tiny-cascader>
+  </div>
 </template>
 
 <script>
@@ -210,3 +213,9 @@ export default {
   }
 }
 </script>
+
+<style scoped>
+.cascader-demo-disabled > :not(:last-child){
+  margin-right: 12px;
+}
+</style>

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

@@ -1,10 +1,9 @@
 <template>
-  <div>
-    value:{{ value }}
+  <div class="demo-tiny-cascader-event">
+    <div>value: {{ value }}</div>
     <tiny-cascader
       v-model="value"
-      ref="cascaderRef"
-      filterable
+      ref="cascader"
       :options="options"
       @change="handleChange"
       @blur="handleblur"
@@ -247,3 +246,9 @@ function handleChange(value) {
   })
 }
 </script>
+
+<style scoped>
+.demo-tiny-cascader-event > :not(:last-child) {
+  margin-bottom: 12px;
+}
+</style>

package/demos/pc/app/cascader/events.vue

@@ -1,10 +1,9 @@
 <template>
-  <div>
-    value:{{ value }}
+  <div class="demo-tiny-cascader-event">
+    <div>value: {{ value }}</div>
     <tiny-cascader
       v-model="value"
       ref="cascader"
-      filterable
       :options="options"
       @change="handleChange"
       @blur="handleblur"
@@ -251,3 +250,9 @@ export default {
   }
 }
 </script>
+
+<style scoped>
+.demo-tiny-cascader-event > :not(:last-child) {
+  margin-bottom: 12px;
+}
+</style>

package/demos/pc/app/cascader/size-composition-api.vue

@@ -0,0 +1,51 @@
+<template>
+  <div class="tiny-demo-cascader-size">
+    <tiny-cascader v-model="value" :options="options" size="mini"></tiny-cascader>
+    <tiny-cascader v-model="value" :options="options" size="small"></tiny-cascader>
+    <tiny-cascader v-model="value" :options="options" size="medium"></tiny-cascader>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import { Cascader as TinyCascader } from '@opentiny/vue'
+
+const value = ref(['zhinan', 'anzhuang', 'xiangmudengji'])
+const options = ref([
+  {
+    value: 'zhinan',
+    label: '指南',
+    children: [
+      {
+        value: 'anzhuang',
+        label: '安装',
+        children: [
+          {
+            value: 'xiangmudengji',
+            label: '项目登记'
+          },
+          {
+            value: 'huanjingzhunbei',
+            label: '环境准备'
+          },
+          {
+            value: 'anzhuangcli',
+            label: '安装 CLI'
+          },
+          {
+            value: 'chuangjianxiangmu',
+            label: '创建项目'
+          }
+        ]
+      }
+    ]
+  }
+])
+</script>
+
+<style scoped>
+.tiny-demo-cascader-size {
+  display: flex;
+  gap: 12px;
+}
+</style>

package/demos/pc/app/cascader/size.spec.ts

@@ -0,0 +1,13 @@
+import { test, expect } from '@playwright/test'
+
+test('size', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('cascader#size')
+
+  await expect(page.locator('.tiny-cascader.tiny-cascader--mini input')).toHaveCSS('height', '24px')
+
+  await expect(page.locator('.tiny-cascader.tiny-cascader--small input')).toHaveCSS('height', '32px')
+
+  await expect(page.locator('.tiny-cascader.tiny-cascader--medium input')).toHaveCSS('height', '40px')
+
+})