@opentiny/vue-docs 1.0.1 → 1.0.3

package/resources/pc/demo/checkbox/indeterminate.spec.ts

@@ -0,0 +1,25 @@
+import { test, expect } from '@playwright/test';
+
+test('禁用', async ({ page }) => {
+    page.on('pageerror', (exception) => expect(exception).toBeNull());
+    await page.goto('http://localhost:7130/pc/checkbox/indeterminate');
+    const preview = page.locator('#preview');
+    await preview.locator('.tiny-switch').click();
+    const indeterminate = preview.locator('label').filter({ hasText: '全选' }).locator('span').first();
+    await expect(indeterminate).toHaveClass(/is-disabled/);
+    await expect(page.locator('label').filter({ hasText: '北京' }).locator('span').first()).toHaveClass(/is-disabled/);
+    await expect(page.locator('label').filter({ hasText: '广州' }).locator('span').first()).toHaveClass(/is-disabled/);
+})
+
+test('全选、半选', async ({ page }) => {
+    page.on('pageerror', (exception) => expect(exception).toBeNull());
+    await page.goto('http://localhost:7130/pc/checkbox/indeterminate');
+    const preview = page.locator('#preview');
+    const indeterminate = preview.locator('label').filter({ hasText: '全选' }).locator('span').first();
+    await expect(indeterminate).toHaveClass(/is-indeterminate/);
+    await page.locator('label').filter({ hasText: '广州' }).locator('span').nth(1).click();
+    await page.locator('label').filter({ hasText: '深圳' }).locator('span').nth(1).click();
+    await expect(indeterminate).toHaveClass(/is-indeterminate/);
+    await page.locator('label').filter({ hasText: '上海' }).locator('span').nth(1).click();
+    await expect(indeterminate).toHaveClass(/is-checked/);
+})

package/resources/pc/demo/checkbox/indeterminate.vue

@@ -1,23 +1,28 @@
 <template>
   <div>
-    <tiny-checkbox :indeterminate="isIndeterminate" v-model="checkAll"> 全选 </tiny-checkbox>
-    <div style="margin: 15px 0"></div>
-    <tiny-checkbox-group v-model="checkboxGroup">
-      <tiny-checkbox v-for="(city, index) in cities" :label="city" :key="index">{{ city }}</tiny-checkbox>
+    <div style="margin: 16px 0">全部禁用 <tiny-switch v-model="isDisabled"></tiny-switch></div>
+    <tiny-checkbox :indeterminate="isIndeterminate" v-model="checkAll" :disabled="isDisabled"> 全选 </tiny-checkbox>
+    <div style="margin: 16px 0"></div>
+    <tiny-checkbox-group v-model="checkboxGroup" :disabled="isDisabled">
+      <tiny-checkbox v-for="(city, index) in cities" :label="city" :key="index">
+        {{ city }}
+      </tiny-checkbox>
     </tiny-checkbox-group>
   </div>
 </template>
 
 <script lang="jsx">
-import { Checkbox, CheckboxGroup } from '@opentiny/vue'
+import { Checkbox, CheckboxGroup, Switch } from '@opentiny/vue'
 
 export default {
   components: {
     TinyCheckbox: Checkbox,
-    TinyCheckboxGroup: CheckboxGroup
+    TinyCheckboxGroup: CheckboxGroup,
+    TinySwitch: Switch
   },
   data() {
     return {
+      isDisabled: false,
       checkboxGroup: ['北京'],
       cities: ['上海', '北京', '广州', '深圳']
     }

package/resources/pc/demo/checkbox/min-max.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('http://localhost:7130/pc/checkbox/min-max');
+    const preview = page.locator('#preview');
+    const labels = preview.locator('.tiny-checkbox-group > label');
+    const disabledLabels = labels.locator('.is-disabled');
+    const checkedLabels = labels.locator('.is-checked');
+    await expect(disabledLabels).toHaveCount(2);
+    await expect(labels.locator('.is-checked.is-disabled')).toHaveCount(0);
+    await page.locator('label').filter({ hasText: '北京' }).locator('span').nth(1).click();
+    await expect(disabledLabels).toHaveCount(1);
+    await expect(checkedLabels).toHaveCount(1);
+    await expect(labels.locator('.is-checked.is-disabled')).toHaveCount(1);
+});

package/resources/pc/demo/checkbox/text.spec.ts

@@ -0,0 +1,10 @@
+import { test, expect } from '@playwright/test';
+
+test('文本', async ({ page }) => {
+    page.on('pageerror', (exception) => expect(exception).toBeNull());
+    await page.goto('http://localhost:7130/pc/checkbox/text');
+    const preview = page.locator('#preview');
+    await preview.locator('span').nth(2).click();
+    await preview.getByRole('button', { name: '获取文本' }).click();
+    await expect(page.locator('.tiny-modal').filter({ hasText: 'change 事件，当前选中的值为:真文本' })).toBeVisible();
+})

package/resources/pc/demo/checkbox/vertical-checkbox.spec.ts

@@ -0,0 +1,25 @@
+import { test, expect } from '@playwright/test';
+
+test('垂直布局', async ({ page }) => {
+    page.on('pageerror', (exception) => expect(exception).toBeNull());
+    await page.goto('http://localhost:7130/pc/checkbox/vertical-checkbox');
+    const preview = page.locator('#preview');
+    const checkedLabelBJ = preview.getByRole('checkbox', { name: '北京' }).filter({ hasText: '北京' })
+    await checkedLabelBJ.click();
+    await expect(checkedLabelBJ).toHaveClass(/is-checked/);
+    const checkedLabelSH = preview.getByRole('checkbox', { name: '上海' }).filter({ hasText: '上海' })
+    await checkedLabelSH.click();
+    await expect(checkedLabelSH).not.toHaveClass(/is-checked/);
+    const checkedLabelGZ = preview.getByRole('checkbox', { name: '广州' }).filter({ hasText: '广州' })
+    await checkedLabelGZ.click();
+    await expect(checkedLabelGZ).toHaveClass(/is-checked/);
+    const checkedLabelSZ = preview.getByRole('checkbox', { name: '深圳' }).filter({ hasText: '深圳' })
+    await checkedLabelSZ.click();
+    await expect(checkedLabelSZ).toHaveClass(/is-checked/);
+    const parentWrapper = preview.locator('div.tiny-checkbox-group.is-vertical');
+    await expect(parentWrapper).toHaveCSS('display', 'inline-block');
+    await expect(checkedLabelBJ).toHaveCSS('display', 'block');
+    await expect(checkedLabelSH).toHaveCSS('display', 'block');
+    await expect(checkedLabelGZ).toHaveCSS('display', 'block');
+    await expect(checkedLabelSZ).toHaveCSS('display', 'block');
+})

package/resources/pc/demo/checkbox/with-border.spec.ts

@@ -0,0 +1,26 @@
+import { test, expect } from '@playwright/test';
+
+test('尺寸', async ({ page }) => {
+    page.on('pageerror', (exception) => expect(exception).toBeNull());
+    await page.goto('http://localhost:7130/pc/checkbox/with-border');
+    const checkedLabelGZ = page.getByRole('checkbox', { name: '广州' }).filter({ hasText: '广州' });
+    // 点击第1个选项
+    await checkedLabelGZ.first().click();
+    await expect(checkedLabelGZ.first()).toHaveClass(/is-checked/);
+    let box = await checkedLabelGZ.first().boundingBox();
+    // 判断高度是否符合
+    await expect(box?.height).toBeCloseTo(42);
+    await checkedLabelGZ.nth(1).click();
+    await expect(checkedLabelGZ.nth(1)).toHaveClass(/is-checked/);
+    box = await checkedLabelGZ.nth(1).boundingBox();
+    await expect(box?.height).toBeCloseTo(36);
+    await checkedLabelGZ.nth(2).click();
+    await expect(checkedLabelGZ.nth(2)).toHaveClass(/is-checked/);
+    box = await checkedLabelGZ.nth(2).boundingBox();
+    await expect(box?.height).toBeCloseTo(30);
+    await checkedLabelGZ.nth(3).click();
+    await expect(checkedLabelGZ.nth(3)).toHaveClass(/is-checked/);
+    box = await checkedLabelGZ.nth(3).boundingBox();
+    await expect(Math.floor(box?.height || 24)).toBeCloseTo(24);
+    await expect(checkedLabelGZ.nth(4)).toHaveClass(/is-disabled/);
+})

package/resources/pc/demo/checkbox/with-border.vue

@@ -1,21 +1,28 @@
 <template>
   <div>
-    <div>
+    <div class="tiny-row">
       <tiny-checkbox-group v-model="checkboxGroup1">
         <tiny-checkbox-button v-for="city in cities" :label="city" :key="city">{{ city }}</tiny-checkbox-button>
       </tiny-checkbox-group>
     </div>
-    <div style="margin-top: 20px">
+    <div class="tiny-row">
       <tiny-checkbox-group v-model="checkboxGroup2" size="medium">
         <tiny-checkbox-button v-for="city in cities" :label="city" :key="city">{{ city }}</tiny-checkbox-button>
       </tiny-checkbox-group>
     </div>
-    <div style="margin-top: 20px">
+    <div class="tiny-row">
       <tiny-checkbox-group v-model="checkboxGroup3" size="small">
-        <tiny-checkbox-button v-for="city in cities" :label="city" :disabled="city === '北京'" :key="city">{{ city }}</tiny-checkbox-button>
+        <tiny-checkbox-button v-for="city in cities" :label="city" :disabled="city === '北京'" :key="city">{{
+          city
+        }}</tiny-checkbox-button>
+      </tiny-checkbox-group>
+    </div>
+    <div class="tiny-row">
+      <tiny-checkbox-group v-model="checkboxGroup4" size="mini">
+        <tiny-checkbox-button v-for="city in cities" :label="city" :key="city">{{ city }}</tiny-checkbox-button>
       </tiny-checkbox-group>
     </div>
-    <div style="margin-top: 20px">
+    <div>
       <tiny-checkbox-group v-model="checkboxGroup4" size="mini" disabled>
         <tiny-checkbox-button v-for="city in cities" :label="city" :key="city">{{ city }}</tiny-checkbox-button>
       </tiny-checkbox-group>
@@ -42,3 +49,8 @@ export default {
   }
 }
 </script>
+<style scoped>
+.tiny-row {
+  margin-bottom: 20px;
+}
+</style>

package/resources/pc/demo/collapse/accordion.spec.ts

@@ -0,0 +1,16 @@
+import { test, expect } from '@playwright/test'
+
+test('Collapse 手风琴模式', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('http://localhost:7130/pc/collapse/accordion')
+
+  const header = page.locator('.tiny-collapse-item__header')
+  const content = page.locator('.tiny-collapse-item__wrap')
+
+  // 内容折叠时点击标题展开，该项内容展开，其他内容折叠
+  await expect(content.first()).not.toHaveCSS('display', 'none')
+  await header.nth(1).click()
+  await expect(header.nth(1)).toHaveClass(/is-active/)
+  await expect(content.nth(1)).not.toHaveCSS('display', 'none')
+  await expect(content.first()).toHaveCSS('display', 'none')
+})

package/resources/pc/demo/collapse/basic-usage.spec.ts

@@ -0,0 +1,26 @@
+import { test, expect } from '@playwright/test'
+
+test('Collapse 基础用法', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('http://localhost:7130/pc/collapse/basic-usage')
+
+  const header = page.locator('.tiny-collapse-item__header')
+  const content = page.locator('.tiny-collapse-item__wrap')
+  const arrow = page.locator('.tiny-collapse-item__arrow')
+
+  // 内容折叠时点击标题展开，再次点击折叠
+  await expect(content.nth(1)).toHaveCSS('display', 'none')
+  await header.nth(1).click()
+  await expect(header.nth(1)).toHaveClass(/is-active/)
+  await expect(content.nth(1)).not.toHaveCSS('display', 'none')
+  await header.nth(1).click()
+  await expect(header.nth(1)).not.toHaveClass(/is-active/)
+  await expect(content.nth(1)).toHaveCSS('display', 'none')
+
+  // 内容展开时，标题箭头向上
+  await expect(content.first()).not.toHaveCSS('display', 'none')
+  await expect(arrow.first()).toHaveCSS('transform', 'matrix(0, -1, 1, 0, 0, 0)')
+  await header.first().click()
+  await expect(content.first()).toHaveCSS('display', 'none')
+  await expect(arrow.first()).toHaveCSS('transform', 'matrix(0, 1, -1, 0, 0, 0)')
+})

package/resources/pc/demo/collapse/block-close.spec.ts

@@ -0,0 +1,18 @@
+import { test, expect } from '@playwright/test'
+
+test('Collapse 阻止折叠面板关闭事件', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('http://localhost:7130/pc/collapse/block-close')
+
+  const modal = page.locator('.tiny-modal')
+  const header = page.locator('.tiny-collapse-item__header')
+  const content = page.locator('.tiny-collapse-item__wrap')
+
+  // 点击标题，展开的内容不折叠
+  await expect(header.first()).toHaveClass(/is-active/)
+  await expect(content.first()).not.toHaveCSS('display', 'none')
+  await header.first().click()
+  await expect(header.first()).toHaveClass(/is-active/)
+  await expect(modal).toHaveText(/阻止面板关闭/)
+  await expect(content.first()).not.toHaveCSS('display', 'none')
+})

package/resources/pc/demo/collapse/collapse-events.spec.ts

@@ -0,0 +1,13 @@
+import { test, expect } from '@playwright/test'
+
+test('Collapse 折叠面板事件', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('http://localhost:7130/pc/collapse/collapse-events')
+
+  const header = page.locator('.tiny-collapse-item__header')
+  const modal = page.locator('.tiny-modal')
+
+  // 点击标题，事件执行
+  await header.first().click()
+  await expect(modal).toBeVisible()
+})

package/resources/pc/demo/collapse/custom-collapse-icon.spec.ts

@@ -0,0 +1,19 @@
+import { test, expect } from '@playwright/test'
+
+test('Collapse 自定义展开折叠图标', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('http://localhost:7130/pc/collapse/custom-collapse-icon')
+
+  const header = page.locator('.tiny-collapse-item__header')
+  const content = page.locator('.tiny-collapse-item__wrap')
+  const customArrow = page.locator('.tiny-collapse-item__arrow').first()
+
+  // 自定义图标，内容展开时，标题箭头向上
+  await expect(customArrow.locator('svg')).toHaveClass(/icon-delta-right/)
+  await expect(content.first()).not.toHaveCSS('display', 'none')
+  await expect(customArrow).toHaveCSS('transform', 'matrix(0, -1, 1, 0, 0, 0)')
+  await header.first().click()
+  await expect(header.first()).not.toHaveClass(/is-active/)
+  await expect(content.first()).toHaveCSS('display', 'none')
+  await expect(customArrow).toHaveCSS('transform', 'matrix(0, 1, -1, 0, 0, 0)')
+})

package/resources/pc/demo/collapse/custom-collapse-title.spec.ts

@@ -0,0 +1,10 @@
+import { test, expect } from '@playwright/test'
+
+test('Collapse 自定义面板标题', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('http://localhost:7130/pc/collapse/custom-collapse-title')
+
+  const header = page.locator('.tiny-collapse-item__header')
+  await expect(header.first().locator('span')).toBeVisible()
+  await expect(header.nth(1).locator('div')).not.toHaveCount(0)
+})

package/resources/pc/demo/collapse/custom-collapse-title.vue

@@ -7,11 +7,29 @@
       <div>与现实生活一致：与现实生活的流程、逻辑保持一致，遵循用户习惯的语言和概念；</div>
       <div>在界面中一致：所有的元素和结构需保持一致，比如：设计样式、图标和文本、元素的位置等。</div>
     </tiny-collapse-item>
-    <tiny-collapse-item title="反馈 Feedback" name="2">
+    <tiny-collapse-item name="2">
+      <template #title>
+        <div class="title">
+          <div>反馈 Feedback</div>
+          <div>
+            <a href="">查看监控数据</a>
+            <a href="">卸载</a>
+          </div>
+        </div>
+      </template>
       <div>控制反馈：通过界面样式和交互动效让用户可以清晰的感知自己的操作；</div>
       <div>页面反馈：操作后，通过页面元素的变化清晰地展现当前状态。</div>
     </tiny-collapse-item>
-    <tiny-collapse-item title="效率 Efficiency" name="3">
+    <tiny-collapse-item name="3" disabled>
+      <template #title>
+        <div class="title">
+          <div>效率 Efficiency</div>
+          <div>
+            <a href="">查看监控数据</a>
+            <a href="">卸载</a>
+          </div>
+        </div>
+      </template>
       <div>简化流程：设计简洁直观的操作流程；</div>
       <div>清晰明确：语言表达清晰且表意明确，让用户快速理解进而作出决策；</div>
       <div>帮助用户识别：界面简单直白，让用户快速识别而非回忆，减少用户记忆负担。</div>
@@ -46,4 +64,31 @@ export default {
   fill: var(--ti-common-color-line-active);
   font-size: 18px;
 }
+.title {
+  width: 100%;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+.title a {
+  color: #1476ff;
+  position: relative;
+}
+.title a:hover {
+  font-weight: bold;
+}
+.title a:first-child::after {
+  content: '';
+  position: absolute;
+  height: 17px;
+  right: -12px;
+  border-right: 1px solid rgba(0, 0, 0, 0.15);
+}
+.title a:last-child {
+  margin-left: 24px;
+}
+.is-disabled a {
+  color: #c2c2c2;
+  pointer-events: none;
+}
 </style>

package/resources/pc/demo/collapse/dynamic-disable.spec.ts

@@ -0,0 +1,15 @@
+import { test, expect } from '@playwright/test'
+
+test('Collapse 禁用状态', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('http://localhost:7130/pc/collapse/dynamic-disable')
+
+  const disabledItem = page.locator('.tiny-collapse-item').nth(2)
+  const disabledHeader = page.locator('.tiny-collapse-item__header').nth(2)
+  const disabledContent = page.locator('.tiny-collapse-item__wrap').nth(2)
+
+  await expect(disabledItem).toHaveClass(/is-disabled/)
+  await expect(disabledContent).toHaveCSS('display', 'none')
+  await disabledHeader.click()
+  await expect(disabledContent).toHaveCSS('display', 'none')
+})

package/resources/pc/demo/collapse/nested-form.spec.ts

@@ -0,0 +1,9 @@
+import { test, expect } from '@playwright/test'
+
+test('Collapse 嵌套表单', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('http://localhost:7130/pc/collapse/nested-form')
+
+  const content = page.locator('.tiny-collapse-item__content')
+  await expect(content.locator('.tiny-form')).toBeVisible()
+})

package/resources/pc/demo/collapse/nested-grid.spec.ts

@@ -0,0 +1,9 @@
+import { test, expect } from '@playwright/test'
+
+test('Collapse 嵌套表格', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('http://localhost:7130/pc/collapse/nested-grid')
+
+  const content = page.locator('.tiny-collapse-item__content')
+  await expect(content.locator('.tiny-grid')).toBeVisible()
+})

package/resources/pc/demo/color/auxiliary-color.spec.js

@@ -0,0 +1,14 @@
+import { test, expect } from '@playwright/test';
+
+test('test', async ({ page }) => {
+    await page.goto('http://localhost:7130/pc/color/neutral-color');
+    await page.getByText('主色彩').click();
+    await page.getByText('bg-primary-normal').click();
+    await expect(page.getByText('bg-primary-normal')).toHaveClass(/bg-primary-normal/);
+    await page.getByText('bg-primary-hover').click();
+    await expect(page.getByText('bg-primary-hover')).toHaveClass(/bg-primary-hover/);
+    await page.getByText('bg-primary-active').click();
+    await expect(page.getByText('bg-primary-active')).toHaveClass(/bg-primary-active/);
+    await page.getByText('bg-btn-active').click();
+    await expect(page.getByText('bg-btn-active')).toHaveClass(/bg-btn-active/)
+});

package/resources/pc/demo/color/main-color.spec.js

@@ -0,0 +1,12 @@
+import { test, expect } from '@playwright/test';
+
+test('test', async ({ page }) => {
+    await page.goto('http://localhost:7130/pc/color/main-color');
+    await page.getByText('辅助色').click();
+    await page.getByText('bg-success-normal').click();
+    await expect(page.getByText('bg-success-normal')).toHaveClass(/bg-success-normal/)
+    await page.getByText('bg-warning-normal').click();
+    await expect(page.getByText('bg-warning-normal')).toHaveClass(/bg-warning-normal/)
+    await page.getByText('bg-error-normal').click();
+    await expect(page.getByText('bg-error-normal')).toHaveClass(/bg-error-normal/)
+});

package/resources/pc/demo/color/neutral-color.spec.js

@@ -0,0 +1,14 @@
+import { test, expect } from '@playwright/test';
+
+test('test', async ({ page }) => {
+    await page.goto('http://localhost:7130/pc/color/auxiliary-color');
+    await page.getByText('中性色').click();
+    await page.getByText('bg-gray-navigation').click();
+    await expect(page.getByText('bg-gray-navigation')).toHaveClass(/bg-gray-navigation/)
+    await page.getByText('bg-gray-darker').click();
+    await expect(page.getByText('bg-gray-darker')).toHaveClass(/bg-gray-darker/)
+    await page.getByText('bg-gray-dark').nth(1).click();
+    await expect(page.getByText('bg-gray-dark').nth(1)).toHaveClass(/bg-gray-dark/)
+    await page.getByText('bg-gray-normal').click();
+    await expect(page.getByText('bg-gray-normal')).toHaveClass(/bg-gray-normal/)
+});

package/resources/pc/demo/company/basic-usage.spec.ts

@@ -0,0 +1,25 @@
+import { test, expect } from '@playwright/test'
+
+test('基本用法', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).not.toBeNull())
+  await page.goto('http://localhost:7130/pc/company/basic-usage')
+
+  const select = page.getByPlaceholder('请选择')
+  const dropdown = page.locator('.tiny-select-dropdown.tiny-popper')
+  const icon = page.locator('#preview svg').nth(1)
+  const modal = page.locator('.tiny-modal')
+  const text = page.getByText('当前选中值：')
+
+  await expect(select).toHaveCount(1)
+  await expect(text).toHaveCount(1)
+  await text.isVisible()
+  await expect(dropdown).not.toBeVisible()
+
+  // 展开和收回下拉框测试
+  await icon.click()
+  await expect(dropdown).toBeVisible()
+  await expect(modal.nth(0)).toHaveText('visible:true')
+  await icon.click()
+  await expect(dropdown).not.toBeVisible()
+  await expect(modal.nth(1)).toHaveText('visible:false')
+})

package/resources/pc/demo/company/custom-service.spec.ts

@@ -0,0 +1,33 @@
+import { test, expect } from '@playwright/test'
+
+test('自定义服务', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).not.toBeNull())
+  await page.goto('http://localhost:7130/pc/company/custom-service')
+
+  const expand = page.locator('#preview svg').nth(1)
+  const clear = page.locator('#preview svg').nth(2)
+  const dropdownItems = page.locator('.tiny-option.tiny-select-dropdown__item')
+  const input = page.locator('#preview').getByPlaceholder('请输入')
+  const count = 2
+  const companys = ['一', '二']
+  const modal = page.locator('.tiny-modal')
+
+  // 展开
+  await expand.click()
+  await expect(dropdownItems).toHaveCount(count)
+  for (let i = 0; i < count; i++) {
+    await expect(dropdownItems.nth(i)).toHaveText(`公司${companys[i]}`)
+  }
+
+  // 选择
+  await dropdownItems.nth(0).click()
+  await expect(modal.nth(0)).toHaveText('change:0001')
+  await expect(input).toHaveValue('公司一')
+  await input.hover()
+
+  // 清空
+  await clear.click()
+  await expect(modal.nth(1)).toHaveText('change:')
+  await expect(modal.nth(2)).toHaveText('clear:触发了')
+  await expect(input).toHaveValue('')
+})

package/resources/pc/demo/company/custom-service.vue

@@ -1,9 +1,19 @@
 <template>
-  <tiny-company v-model="value" placeholder="请输入" :fetch-company="getCompanyData" is-drop-inherit-width></tiny-company>
+  <tiny-company
+    v-model="value"
+    placeholder="请输入"
+    :fetch-company="getCompanyData"
+    :fields="fields"
+    :max="2"
+    @change="change"
+    @clear="clear"
+    is-drop-inherit-width
+    clearable
+  ></tiny-company>
 </template>
 
 <script lang="jsx">
-import { Company } from '@opentiny/vue'
+import { Company, Modal } from '@opentiny/vue'
 
 export default {
   components: {
@@ -11,20 +21,41 @@ export default {
   },
   data() {
     return {
+      fields: {
+        textField: 'name',
+        valueField: 'id'
+      },
       value: ''
     }
   },
   methods: {
     getCompanyData() {
-      let that = this
-      return new Promise((resolve, reject) => {
-        that.$service.network
-          .get('servlet/idataProxy/params/ws/soaservices/CompanyServlet')
-          .then((response) => {
-            resolve((response.data && response.data.company) || [])
-          })
-          .catch(reject)
+      return new Promise((resolve) => {
+        resolve([
+          {
+            id: '0001',
+            name: '公司一'
+          },
+          {
+            id: '0002',
+            name: '公司二'
+          },
+          {
+            id: '0003',
+            name: '公司三'
+          },
+          {
+            id: '0004',
+            name: '公司四'
+          }
+        ])
       })
+    },
+    clear() {
+      Modal.message({ message: 'clear:触发了', status: 'info' })
+    },
+    change(value) {
+      Modal.message({ message: `change:${value}`, status: 'info' })
     }
   }
 }

package/resources/pc/demo/config-provider/base.vue

@@ -0,0 +1,48 @@
+<template>
+  <div>
+    <tiny-config-provider :tag="tag">
+      <tiny-tag>这是一个Tag</tiny-tag>
+      <tiny-tag>{{ tagEnable }}</tiny-tag>
+    </tiny-config-provider>
+    <br />
+    <div :style="[tag.enable && 'padding: 0px 1em;']">
+      <tiny-switch v-model="tag.enable" />
+    </div>
+  </div>
+</template>
+
+<script>
+import { ConfigProvider, Tag, Switch } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinyConfigProvider: ConfigProvider,
+    TinyTag: Tag,
+    TinySwitch: Switch
+  },
+  data() {
+    return {
+      tag: {
+        enable: true,
+        name: 'div'
+      }
+    }
+  },
+  computed: {
+    tagEnable() {
+      return this.tag.enable ? '被DOM包裹' : '没有被DOM包裹'
+    }
+  }
+}
+</script>
+
+<style scoped>
+.tiny-config-provider{
+  padding: 1em;
+  border: 1px solid #ccc;
+  border-radius: 1em;
+}
+.tiny-tag {
+  margin-right: 10px;
+}
+</style>