@opentiny/vue-docs 1.0.3 → 1.0.4

package/resources/pc/demo/select/slot-default.vue

@@ -18,26 +18,11 @@ export default {
   data() {
     return {
       options: [
-        {
-          value: '选项1',
-          label: '黄金糕'
-        },
-        {
-          value: '选项2',
-          label: '双皮奶'
-        },
-        {
-          value: '选项3',
-          label: '蚵仔煎'
-        },
-        {
-          value: '选项4',
-          label: '龙须面'
-        },
-        {
-          value: '选项5',
-          label: '北京烤鸭'
-        }
+        { value: '选项1', label: '黄金糕' },
+        { value: '选项2', label: '双皮奶' },
+        { value: '选项3', label: '蚵仔煎' },
+        { value: '选项4', label: '龙须面' },
+        { value: '选项5', label: '北京烤鸭' }
       ],
       value: ''
     }

package/resources/pc/demo/select/slot-footer.vue

@@ -1,9 +1,12 @@
 <template>
   <tiny-select v-model="value" placeholder="请选择">
-    <tiny-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </tiny-option>
+    <tiny-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
+    </tiny-option>
     <template #footer>
       <div class="select-footer">
-        <tiny-button type="success" round>底部插槽</tiny-button>
+        <tiny-button type="success" round>
+          底部插槽
+        </tiny-button>
       </div>
     </template>
   </tiny-select>
@@ -21,26 +24,11 @@ export default {
   data() {
     return {
       options: [
-        {
-          value: '选项1',
-          label: '黄金糕'
-        },
-        {
-          value: '选项2',
-          label: '双皮奶'
-        },
-        {
-          value: '选项3',
-          label: '蚵仔煎'
-        },
-        {
-          value: '选项4',
-          label: '龙须面'
-        },
-        {
-          value: '选项5',
-          label: '北京烤鸭'
-        }
+        { value: '选项1', label: '黄金糕' },
+        { value: '选项2', label: '双皮奶' },
+        { value: '选项3', label: '蚵仔煎' },
+        { value: '选项4', label: '龙须面' },
+        { value: '选项5', label: '北京烤鸭' }
       ],
       value: ''
     }

package/resources/pc/demo/select/tag-copy-all.vue

@@ -1,13 +1,8 @@
 <template>
   <div>
     <tiny-select ref="select" v-model="value" placeholder="请选择" multiple copyable>
-      <tiny-option
-        v-for="item in options"
-        v-show="!item.filter"
-        :key="item.value"
-        :label="item.label"
-        :value="item.value"
-      >
+      <tiny-option v-for="item in options" v-show="!item.filter" :key="item.value" :label="item.label"
+        :value="item.value">
       </tiny-option>
     </tiny-select>
     <p>复制到此处：</p>
@@ -26,26 +21,11 @@ export default {
   data() {
     return {
       options: [
-        {
-          value: '选项1',
-          label: '黄金糕'
-        },
-        {
-          value: '选项2',
-          label: '双皮奶'
-        },
-        {
-          value: '选项3',
-          label: '蚵仔煎'
-        },
-        {
-          value: '选项4',
-          label: '龙须面'
-        },
-        {
-          value: '选项5',
-          label: '北京烤鸭'
-        }
+        { value: '选项1', label: '黄金糕' },
+        { value: '选项2', label: '双皮奶' },
+        { value: '选项3', label: '蚵仔煎' },
+        { value: '选项4', label: '龙须面' },
+        { value: '选项5', label: '北京烤鸭' }
       ],
       value: ['选项1']
     }

package/resources/pc/demo/select/tag-select.vue

@@ -1,13 +1,8 @@
 <template>
   <div>
     <tiny-select ref="select" v-model="value" placeholder="请选择" multiple tag-selectable>
-      <tiny-option
-        v-for="item in options"
-        v-show="!item.filter"
-        :key="item.value"
-        :label="item.label"
-        :value="item.value"
-      >
+      <tiny-option v-for="item in options" v-show="!item.filter" :key="item.value" :label="item.label"
+        :value="item.value">
       </tiny-option>
     </tiny-select>
     <p>复制到此处：</p>
@@ -26,26 +21,11 @@ export default {
   data() {
     return {
       options: [
-        {
-          value: '选项1',
-          label: '黄金糕'
-        },
-        {
-          value: '选项2',
-          label: '双皮奶'
-        },
-        {
-          value: '选项3',
-          label: '蚵仔煎'
-        },
-        {
-          value: '选项4',
-          label: '龙须面'
-        },
-        {
-          value: '选项5',
-          label: '北京烤鸭'
-        }
+        { value: '选项1', label: '黄金糕' },
+        { value: '选项2', label: '双皮奶' },
+        { value: '选项3', label: '蚵仔煎' },
+        { value: '选项4', label: '龙须面' },
+        { value: '选项5', label: '北京烤鸭' }
       ],
       value: ['选项1']
     }

package/resources/pc/demo/select/tag-type.vue

@@ -0,0 +1,31 @@
+<template>
+  <tiny-select v-model="value" placeholder="请选择" multiple tag-type="info">
+    <tiny-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
+    </tiny-option>
+  </tiny-select>
+</template>
+
+<script lang="jsx">
+import { Select, Option } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinySelect: Select,
+    TinyOption: Option
+  },
+  data() {
+    return {
+      options: [
+        { value: '选项1', label: '黄金糕' },
+        { value: '选项2', label: '双皮奶' },
+        { value: '选项3', label: '蚵仔煎' },
+        { value: '选项4', label: '龙须面' },
+        { value: '选项5', label: '北京烤鸭' },
+        { value: '选项6', label: '螺蛳粉' },
+        { value: '选项7', label: '小龙虾' }
+      ],
+      value: ['选项1', '选项2']
+    }
+  }
+}
+</script>

package/resources/pc/demo/slide-bar/wheel-blocks.spec.ts

@@ -6,12 +6,13 @@ test('每次滚动块数', async ({ page }) => {
   const preview = page.locator('#preview')
   const slideBarContainer = preview.locator('.tiny-slide-bar__content')
   const slideBarList = slideBarContainer.locator('.tiny-slide-bar__list')
+
   await slideBarList.first().click()
   await preview.locator('.icon-chevron-right').click()
   // 单个滚动块的宽度固定为196px，所以应为 196px * 2
   await expect(slideBarList).toHaveCSS('left', '-392px')
   await preview.locator('.icon-chevron-right').click()
-  await expect(slideBarList).toHaveCSS('left', '-976px')
+  await expect(slideBarList).toHaveCSS('left', '-784px')
   await preview.locator('.icon-chevron-left').click()
-  await expect(slideBarList).toHaveCSS('left', '0px')
+  await expect(slideBarList).toHaveCSS('left', '-392px')
 })

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

@@ -15,6 +15,6 @@ test('基础用法', async ({ page }) => {
   // 滑块向右移动百分之二十
   await page.mouse.move(sliderWidth * 0.2 + x, y)
   const sliderTip = slider.locator('div').nth(2)
-  await expect(sliderTip).toHaveText('39')
+  await expect(sliderTip).toHaveText('59')
   await page.mouse.up()
 })

package/resources/pc/demo/slider/range-select.spec.ts

@@ -12,6 +12,7 @@ test('范围选择', async ({ page }) => {
   const { x, y } = await sliderBlock1.boundingBox()
 
   await sliderBlock1.hover()
+  await sliderBlock1.hover() 
   await page.mouse.down()
   await page.mouse.move(sliderWidth * -0.1 + x, y)
   const sliderTip = slider.locator('div').nth(3)

package/resources/pc/demo/steps/order-progress.vue

@@ -2,9 +2,8 @@
   <div class="content">
     <tiny-steps
       :data="stepsData"
-      name-field="reName"
-      :space="100"
       :active="active"
+      name-field="reName"
       count-field="reCount"
       status-field="reStatus"
       @click="normalClick"

package/resources/pc/demo/steps/space.spec.ts

@@ -0,0 +1,12 @@
+import { test, expect } from '@playwright/test'
+
+test('节点宽度', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('http://localhost:7130/pc/steps/space')
+
+  const steps = page.locator('#preview .tiny-steps')
+  const node = steps.locator('li').first()
+  const { width } = await node.boundingBox()
+
+  await expect(Math.round(width)).toEqual(150)
+})

package/resources/pc/demo/steps/space.vue

@@ -0,0 +1,41 @@
+<template>
+  <tiny-steps space="200" :data="stepsData" :active="active" @click="onClick"></tiny-steps>
+</template>
+
+<script lang="jsx">
+import { Steps } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinySteps: Steps
+  },
+  data() {
+    return {
+      stepsData: [
+        {
+          name: 'name属性内容1',
+          count: 0,
+          status: 'done'
+        },
+        {
+          name: 'name属性内容2',
+          count: 9,
+          status: 'doing'
+        },
+        {
+          name: 'name属性内容3',
+          count: 0,
+          status: 'undo'
+        },
+      ],
+      active: 1
+    }
+  },
+  methods: {
+    onClick(index, node) {
+      this.active = index
+      node.status = 'doing'
+    }
+  }
+}
+</script>

package/resources/pc/demo/steps/text-position.vue

@@ -50,7 +50,7 @@ export default {
 }
 </script>
 
-<style lang="less">
+<style>
 code {
   padding: 4px;
   background-color: var(--lightless);

package/resources/pc/demo/time-line/custom-normal-step.vue

@@ -1,10 +1,14 @@
 <template>
   <tiny-time-line :data="data" :active="active" @click="click">
     <template #top="{ slotScope: { index, name } }">
-      <p class="custom-top">{{ index }}.{{ name }}</p>
+      <p class="custom-top">
+        {{ index }}.{{ name }}
+      </p>
     </template>
     <template #bottom="{ slotScope: { time } }">
-      <p class="custom-bottom">{{ time }}</p>
+      <p class="custom-bottom">
+        {{ time }}
+      </p>
     </template>
   </tiny-time-line>
 </template>
@@ -37,7 +41,8 @@ export default {
   }
 }
 </script>
-<style lang="less" scoped>
+
+<style scoped>
 .custom-top {
   text-align: center;
 }
@@ -46,4 +51,4 @@ export default {
   color: #8a8e99;
   font-size: 12px;
 }
-</style>
+</style>

package/resources/pc/demo/time-line/set-step-width.vue

@@ -1,5 +1,17 @@
 <template>
-  <tiny-time-line :data="data" :active="active" @click="click" :space="200" text-position="right"></tiny-time-line>
+  <p>1. <code>space</code>取值可以是带尺寸单位的具体数值。以下示例设置节点宽度为200px：</p>
+  <tiny-time-line :data="data" :active="active" space="200" @click="normalClick"> </tiny-time-line>
+
+  <p>2. <code>space</code>取值也可以是百分比数值，基准为组件父元素的宽度。以下示例设置引导线长度为20%：</p>
+  <div class="timeline-box">
+    <tiny-time-line
+      :data="data"
+      :active="active"
+      text-position="right"
+      space="20%"
+      @click="normalClick"
+    ></tiny-time-line>
+  </div>
 </template>
 
 <script lang="jsx">
@@ -26,3 +38,14 @@ export default {
   }
 }
 </script>
+
+<style lang="less" scoped>
+code {
+  padding: 4px;
+  background-color: var(--lightless);
+}
+
+.timeline-box {
+  width: 800px;
+}
+</style>

package/resources/pc/demo/time-select/clear-icon.spec.ts

@@ -8,6 +8,6 @@ test('自定义清空图标', async ({ page }) => {
   await page.getByText('10:00').click()
   await timeInput.hover()
   //   点击图标，清除输入框内容
-  await page.locator('i.tiny-input__icon svg').first().click()
+  await page.locator('#preview').getByRole('img').nth(1).click()
   expect(await page.getByPlaceholder('选择时间').getAttribute('title')).toEqual('')
 })

package/resources/pc/demo/time-select/suffix-icon.spec.ts

@@ -3,6 +3,6 @@ import { test, expect } from '@playwright/test'
 test('后置图标', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('http://localhost:7130/pc/time-select/suffix-icon')
-  const icon = page.locator('.tiny-input__icon svg')
+  const icon = page.locator('.tiny-input__icon-container svg')
   await expect(icon).toHaveCount(1)
 })

package/resources/pc/demo/toggle-menu/default-expand-all.spec.ts

@@ -1,13 +1,13 @@
-import { test, expect } from '@playwright/test';
+import { test, expect } from '@playwright/test'
 
 test('默认展开所有节点', async ({ page }) => {
-    page.on('pageerror', (exception) => expect(exception).toBeNull());
-    await page.goto('http://localhost:7130/pc/toggle-menu/default-expand-all');
-    const preview = page.locator('#preview');
-    // 默认所有的节点都可见
-    await expect(preview.locator('.tiny-tree .tiny-tree-node:visible')).toHaveCount(14);
-    await page.getByTitle('开发指南').click();
-    await expect(preview.locator('.tiny-tree .tiny-tree-node:visible')).toHaveCount(11);
-    await page.getByRole('treeitem', { name: '表单组件 Button 按钮 Input 输入框' }).getByTitle('表单组件').click();
-    await expect(preview.locator('.tiny-tree .tiny-tree-node:visible')).toHaveCount(9);
-})
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('http://localhost:7130/pc/toggle-menu/default-expand-all')
+  const preview = page.locator('#preview')
+  // 默认所有的节点都可见
+  await expect(preview.locator('.tiny-tree .tiny-tree-node:visible')).toHaveCount(14)
+  await page.getByTitle('开发指南').click()
+  await expect(preview.locator('.tiny-tree .tiny-tree-node:visible')).toHaveCount(11)
+  await page.getByTitle('表单组件').nth(1).click()
+  await expect(preview.locator('.tiny-tree .tiny-tree-node:visible')).toHaveCount(9)
+})

package/resources/pc/demo/toggle-menu/node-click.spec.ts

@@ -1,13 +1,13 @@
-import { test, expect } from '@playwright/test';
+import { test, expect } from '@playwright/test'
 
 test('点击节点事件', async ({ page }) => {
-    page.on('pageerror', (exception) => expect(exception).toBeNull());
-    await page.goto('http://localhost:7130/pc/toggle-menu/node-click');
-    const preview = page.locator('#preview');
-    await preview.getByRole('treeitem', { name: '更新日志' }).locator('div').nth(1).click();
-    await expect(page.locator('.tiny-modal__box').filter({ hasText: '点击节点后的事件' })).toBeVisible();
-    await preview.getByRole('treeitem', { name: '开发指南' }).locator('div').nth(1).click();
-    await expect(page.locator('.tiny-modal__box').filter({ hasText: '点击节点后的事件' }).nth(1)).toBeVisible();
-    await preview.getByRole('treeitem', { name: '开发指南 引入组件 国际化 权限' }).getByRole('treeitem', { name: '权限' }).locator('div').nth(1).click();
-    await expect(page.locator('.tiny-modal__box').filter({ hasText: '点击节点后的事件' }).nth(2)).toBeVisible();
-})
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('http://localhost:7130/pc/toggle-menu/node-click')
+  const preview = page.locator('#preview')
+  await preview.getByRole('treeitem', { name: '更新日志' }).locator('div').nth(1).click()
+  await expect(page.locator('.tiny-modal__box').filter({ hasText: '点击节点后的事件' })).toBeVisible()
+  await preview.getByRole('treeitem', { name: '开发指南' }).locator('div').nth(1).click()
+  await expect(page.locator('.tiny-modal__box').filter({ hasText: '点击节点后的事件' }).nth(1)).toBeVisible()
+  await page.getByRole('treeitem', { name: '权限' }).locator('div').nth(1).click()
+  await expect(page.locator('.tiny-modal__box').filter({ hasText: '点击节点后的事件' }).nth(2)).toBeVisible()
+})

package/resources/pc/demo/transfer/nested-tree.spec.ts

@@ -1,27 +1,39 @@
-import { test, expect } from '@playwright/test';
+import { test, expect } from '@playwright/test'
 
 test('判断是否可以将左侧数据交换至右侧面板', async ({ page }) => {
-    page.on('pageerror', (exception) => expect(exception).toBeNull());
-    await page.goto('http://localhost:7130/pc/transfer/nested-tree');
-    const preview = page.locator('#preview');
-    await preview.getByRole('treeitem', { name: '一级 1' }).locator('svg').first().click();
-    await preview.getByRole('treeitem', { name: '一级 1 二级 1-1' }).locator('svg').nth(2).click();
-    await preview.getByRole('treeitem', { name: '一级 1 二级 1-1 三级 1-1-1 三级 1-1-2' }).getByRole('treeitem', { name: '二级 1-1 三级 1-1-1 三级 1-1-2' }).getByRole('treeitem', { name: '三级 1-1-1' }).locator('span').nth(2).click();
-    await preview.getByRole('button').first().click();
-    const transferPanels = preview.locator('.tiny-transfer-panel');
-    const rightPanel = transferPanels.nth(1);
-    await expect(rightPanel.locator('div:nth-child(3) > div:nth-child(4) > .tiny-tree-node > .tiny-tree-node__content > span.tiny-tree-node__label')).toHaveText('三级 1-1-1');
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('http://localhost:7130/pc/transfer/nested-tree')
+  const preview = page.locator('#preview')
+  await preview.getByRole('treeitem', { name: '一级 1' }).locator('svg').first().click()
+  await preview.getByRole('treeitem', { name: '一级 1' }).getByText('二级 1-1').click()
+  await preview.getByRole('treeitem', { name: '三级 1-1-1' }).locator('span').nth(2).click()
+  await preview.getByRole('button').first().click()
+  const transferPanels = preview.locator('.tiny-transfer-panel')
+  const rightPanel = transferPanels.nth(1)
+  await expect(
+    rightPanel.locator(
+      'div:nth-child(3) > div:nth-child(4) > .tiny-tree-node > .tiny-tree-node__content > span.tiny-tree-node__label'
+    )
+  ).toHaveText('三级 1-1-1')
 })
 
 test('置顶和置底功能', async ({ page }) => {
-    page.on('pageerror', (exception) => expect(exception).toBeNull());
-    await page.goto('http://localhost:7130/pc/transfer/nested-tree');
-    const preview = page.locator('#preview');
-    const buttons = await preview.getByRole('paragraph').filter({ hasText: '列表 2 1 / 3' }).locator('div');
-    await buttons.nth(1).click();
-    const transferPanels = preview.locator('.tiny-transfer-panel');
-    const rightPanel = transferPanels.nth(1);
-    await expect(rightPanel.locator('div:nth-child(3) > div:nth-child(1) > .tiny-tree-node > .tiny-tree-node__content > span.tiny-tree-node__label')).toHaveText('二级 2-1');
-    await buttons.nth(2).click();
-    await expect(rightPanel.locator('div:nth-child(3) > div:nth-child(3) > .tiny-tree-node > .tiny-tree-node__content > span.tiny-tree-node__label')).toHaveText('二级 2-1');
-})
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('http://localhost:7130/pc/transfer/nested-tree')
+  const preview = page.locator('#preview')
+  const buttons = await preview.getByRole('paragraph').filter({ hasText: '列表 2 1 / 3' }).locator('div')
+  await buttons.nth(1).click()
+  const transferPanels = preview.locator('.tiny-transfer-panel')
+  const rightPanel = transferPanels.nth(1)
+  await expect(
+    rightPanel.locator(
+      'div:nth-child(3) > div:nth-child(1) > .tiny-tree-node > .tiny-tree-node__content > span.tiny-tree-node__label'
+    )
+  ).toHaveText('二级 2-1')
+  await buttons.nth(2).click()
+  await expect(
+    rightPanel.locator(
+      'div:nth-child(3) > div:nth-child(3) > .tiny-tree-node > .tiny-tree-node__content > span.tiny-tree-node__label'
+    )
+  ).toHaveText('二级 2-1')
+})

package/resources/pc/demo/tree/slot-deffault.vue

@@ -1,7 +1,9 @@
 <template>
   <tiny-tree :data="data5">
     <template #default="sourceData">
-      <div class="custom-label">{{ sourceData.data.label }}</div>
+      <div class="custom-label">
+        {{ sourceData.data.label }}
+      </div>
     </template>
   </tiny-tree>
 </template>
@@ -80,20 +82,18 @@ export default {
   }
 }
 </script>
-<style scoped lang="less">
+
+<style scoped>
 .custom-label {
   color: #5e7ce0;
 }
+:deep(.is-current>.tiny-tree-node__content)  svg {
+  fill: #fff;
+}
 
-:deep(.is-current>.tiny-tree-node__content) {
-  svg {
-    fill: #fff;
-  }
-
-  .custom-label {
-    color: #fff;
-    font-weight: 500;
-    margin-left: 8px;
-  }
+:deep(.is-current>.tiny-tree-node__content) .custom-label {
+  color: #fff;
+  font-weight: 500;
+  margin-left: 8px;
 }
 </style>

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

@@ -0,0 +1,21 @@
+import { expect, test } from '@playwright/test'
+
+test('user-custom-service', async ({ page }) => {
+  await page.goto('http://localhost:7130/pc/user/custom-service')
+  const input = page.locator('#preview .tiny-input__inner')
+  const value = page.locator('.user-value')
+  const options = page.locator('.tiny-select-dropdown').locator('.tiny-option')
+
+  await expect(input).toHaveValue('')
+  await expect(value).toHaveText('441047913162396')
+  await page.waitForTimeout(1000)
+  await expect(input).toHaveValue('test3')
+
+  await input.click()
+  await input.fill('xiaoming')
+  await input.press('Enter')
+  await page.waitForTimeout(2000)
+  await expect((await options.all()).length).toEqual(4)
+  await page.getByRole('listitem', { name: 'test2' }).click()
+  await expect(input).toHaveValue('test2')
+})