@opentiny/vue-docs 2.2.20 → 2.2.21

package/demos/pc/app/chart/process/demo5.vue

@@ -0,0 +1,36 @@
+<template>
+  <div>
+    <tiny-process :options="options"></tiny-process>
+  </div>
+</template>
+
+<script lang="jsx">
+import { ChartProcess } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinyProcess: ChartProcess
+  },
+  data() {
+    return {
+      options: {
+        name: 'ProcessBarChart',
+        theme: 'hwCloud-light',
+        padding: [32, 32, 0, 32],
+        state: {
+          error: 75,
+          warning: 60,
+          subwarning: 40
+        },
+        data: [
+          { name: 'UniEPMgr', value: 80 },
+          { name: 'SMLoglic', value: 65 },
+          { name: 'SSO', value: 55 },
+          { name: 'APIMgr', value: 35 },
+          { name: null, value: null }
+        ]
+      }
+    }
+  }
+}
+</script>

package/demos/pc/app/chart/process/demo6-composition-api.vue

@@ -0,0 +1,44 @@
+<template>
+  <div>
+    <tiny-chart-process :options="options"></tiny-chart-process>
+  </div>
+</template>
+
+<script setup lang="jsx">
+import { ref } from 'vue'
+import { ChartProcess as TinyChartProcess } from '@opentiny/vue'
+
+const options = ref({
+  name: 'ProcessBarChart',
+  theme: 'light',
+  type: 'double-sides',
+  padding: [48, '6%', 20, '6%'],
+  color: ['#00aaee', '#41ba41'],
+  legend: {
+    show: true,
+    right: '3%',
+    left: 'auto',
+    top: '3%'
+  },
+  data: [
+    {
+      name: 'China',
+      children: [
+        { name: 'Game', value: 30 },
+        { name: 'Move', value: 20 },
+        { name: 'Animation', value: 45 },
+        { name: 'Fiction', value: 60 }
+      ]
+    },
+    {
+      name: 'Mexico',
+      children: [
+        { name: 'School', value: 12 },
+        { name: 'Hospital', value: 14 },
+        { name: 'Cinema', value: 33 },
+        { name: 'Library', value: 44 }
+      ]
+    }
+  ]
+})
+</script>

package/demos/pc/app/chart/process/demo6.vue

@@ -0,0 +1,52 @@
+<template>
+  <div>
+    <tiny-process :options="options"></tiny-process>
+  </div>
+</template>
+
+<script lang="jsx">
+import { ChartProcess } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinyProcess: ChartProcess
+  },
+  data() {
+    return {
+      options: {
+        name: 'ProcessBarChart',
+        theme: 'light',
+        type: 'double-sides',
+        padding: [48, '6%', 20, '6%'],
+        color: ['#00aaee', '#41ba41'],
+        legend: {
+          show: true,
+          right: '3%',
+          left: 'auto',
+          top: '3%'
+        },
+        data: [
+          {
+            name: 'China',
+            children: [
+              { name: 'Game', value: 30 },
+              { name: 'Move', value: 20 },
+              { name: 'Animation', value: 45 },
+              { name: 'Fiction', value: 60 }
+            ]
+          },
+          {
+            name: 'Mexico',
+            children: [
+              { name: 'School', value: 12 },
+              { name: 'Hospital', value: 14 },
+              { name: 'Cinema', value: 33 },
+              { name: 'Library', value: 44 }
+            ]
+          }
+        ]
+      }
+    }
+  }
+}
+</script>

package/demos/pc/app/chart/radar/radar.spec.ts

@@ -0,0 +1,19 @@
+import { test, expect } from '@playwright/test'
+
+test('base', async ({ page }) => {
+  await page.goto('chart-radar#radar-base')
+  const chart = page.locator('#radar-base .hui-chart')
+  await expect(chart).toHaveScreenshot('base.png')
+})
+
+test('demo2', async ({ page }) => {
+  await page.goto('chart-radar#radar-demo2')
+  const chart = page.locator('#radar-demo2 .hui-chart')
+  await expect(chart).toHaveScreenshot('demo2.png')
+})
+
+test('demo3', async ({ page }) => {
+  await page.goto('chart-radar#radar-demo3')
+  const chart = page.locator('#radar-demo3 .hui-chart')
+  await expect(chart).toHaveScreenshot('demo3.png')
+})

package/demos/pc/app/chart/ring/ring.spec.ts

@@ -0,0 +1,43 @@
+import { test, expect } from '@playwright/test'
+
+test('base', async ({ page }) => {
+  await page.goto('chart-ring#ring-base')
+  const chart = page.locator('#ring-base .hui-chart')
+  await expect(chart).toHaveScreenshot('base.png')
+})
+
+test('demo2', async ({ page }) => {
+  await page.goto('chart-ring#ring-demo2')
+  const chart = page.locator('#ring-demo2 .hui-chart')
+  await expect(chart).toHaveScreenshot('demo2.png')
+})
+
+test('demo3', async ({ page }) => {
+  await page.goto('chart-ring#ring-demo3')
+  const chart = page.locator('#ring-demo3 .hui-chart')
+  await expect(chart).toHaveScreenshot('demo3.png')
+})
+
+test('demo4', async ({ page }) => {
+  await page.goto('chart-ring#ring-demo4')
+  const chart = page.locator('#ring-demo4 .hui-chart')
+  await expect(chart).toHaveScreenshot('demo4.png')
+})
+
+test('demo5', async ({ page }) => {
+  await page.goto('chart-ring#ring-demo5')
+  const chart = page.locator('#ring-demo5 .hui-chart')
+  await expect(chart).toHaveScreenshot('demo5.png')
+})
+
+test('demo6', async ({ page }) => {
+  await page.goto('chart-ring#ring-demo6')
+  const chart = page.locator('#ring-demo6 .hui-chart')
+  await expect(chart).toHaveScreenshot('demo6.png')
+})
+
+test('ring-title', async ({ page }) => {
+  await page.goto('chart-ring#ring-ring-title')
+  const chart = page.locator('#ring-ring-title .hui-chart')
+  await expect(chart).toHaveScreenshot('ring-title.png')
+})

package/demos/pc/app/chart/sankey/sankey.spec.ts

@@ -0,0 +1,13 @@
+import { test, expect } from '@playwright/test'
+
+test('base', async ({ page }) => {
+  await page.goto('chart-sankey#sankey-base')
+  const chart = page.locator('#sankey-base .hui-chart')
+  await expect(chart).toHaveScreenshot('base.png')
+})
+
+test('demo2', async ({ page }) => {
+  await page.goto('chart-sankey#sankey-demo2')
+  const chart = page.locator('#sankey-demo2 .hui-chart')
+  await expect(chart).toHaveScreenshot('demo2.png')
+})

package/demos/pc/app/chart/scatter/scatter.spec.ts

@@ -0,0 +1,49 @@
+import { test, expect } from '@playwright/test'
+
+test('base', async ({ page }) => {
+  await page.goto('chart-scatter#scatter-base')
+  const chart = page.locator('#scatter-base .hui-chart')
+  await expect(chart).toHaveScreenshot('base.png')
+})
+
+test('demo2', async ({ page }) => {
+  await page.goto('chart-scatter#scatter-demo2')
+  const chart = page.locator('#scatter-demo2 .hui-chart')
+  await expect(chart).toHaveScreenshot('demo2.png')
+})
+
+test('demo3', async ({ page }) => {
+  await page.goto('chart-scatter#scatter-demo3')
+  const chart = page.locator('#scatter-demo3 .hui-chart')
+  await expect(chart).toHaveScreenshot('demo3.png')
+})
+
+test('demo4', async ({ page }) => {
+  await page.goto('chart-scatter#scatter-demo4')
+  const chart = page.locator('#scatter-demo4 .hui-chart')
+  await expect(chart).toHaveScreenshot('demo4.png')
+})
+
+test('demo5', async ({ page }) => {
+  await page.goto('chart-scatter#scatter-demo5')
+  const chart = page.locator('#scatter-demo5 .hui-chart')
+  await expect(chart).toHaveScreenshot('demo5.png')
+})
+
+test('demo6', async ({ page }) => {
+  await page.goto('chart-scatter#scatter-demo6')
+  const chart = page.locator('#scatter-demo6 .hui-chart')
+  await expect(chart).toHaveScreenshot('demo6.png')
+})
+
+test('demo7', async ({ page }) => {
+  await page.goto('chart-scatter#scatter-demo7')
+  const chart = page.locator('#scatter-demo7 .hui-chart')
+  await expect(chart).toHaveScreenshot('demo7.png')
+})
+
+test('demo8', async ({ page }) => {
+  await page.goto('chart-scatter#scatter-demo8')
+  const chart = page.locator('#scatter-demo8 .hui-chart')
+  await expect(chart).toHaveScreenshot('demo8.png')
+})

package/demos/pc/app/chart/sunburst/sunburst.spec.ts

@@ -0,0 +1,19 @@
+import { test, expect } from '@playwright/test'
+
+test('base', async ({ page }) => {
+  await page.goto('chart-sunburst#sunburst-base')
+  const chart = page.locator('#sunburst-base .hui-chart')
+  await expect(chart).toHaveScreenshot('base.png')
+})
+
+test('demo2', async ({ page }) => {
+  await page.goto('chart-sunburst#sunburst-demo2')
+  const chart = page.locator('#sunburst-demo2 .hui-chart')
+  await expect(chart).toHaveScreenshot('demo2.png')
+})
+
+test('demo3', async ({ page }) => {
+  await page.goto('chart-sunburst#sunburst-demo3')
+  const chart = page.locator('#sunburst-demo3 .hui-chart')
+  await expect(chart).toHaveScreenshot('demo3.png')
+})

package/demos/pc/app/chart/tree/tree.spec.ts

@@ -0,0 +1,31 @@
+import { test, expect } from '@playwright/test'
+
+test('base', async ({ page }) => {
+  await page.goto('chart-tree#tree-base')
+  const chart = page.locator('#tree-base .hui-chart')
+  await expect(chart).toHaveScreenshot('base.png')
+})
+
+test('demo2', async ({ page }) => {
+  await page.goto('chart-tree#tree-demo2')
+  const chart = page.locator('#tree-demo2 .hui-chart')
+  await expect(chart).toHaveScreenshot('demo2.png')
+})
+
+test('demo3', async ({ page }) => {
+  await page.goto('chart-tree#tree-demo3')
+  const chart = page.locator('#tree-demo3 .hui-chart')
+  await expect(chart).toHaveScreenshot('demo3.png')
+})
+
+test('demo4', async ({ page }) => {
+  await page.goto('chart-tree#tree-demo4')
+  const chart = page.locator('#tree-demo4 .hui-chart')
+  await expect(chart).toHaveScreenshot('demo4.png')
+})
+
+test('demo5', async ({ page }) => {
+  await page.goto('chart-tree#tree-demo5')
+  const chart = page.locator('#tree-demo5 .hui-chart').first()
+  await expect(chart).toHaveScreenshot('demo5.png')
+})

package/demos/pc/app/chart/waterfall/waterfall.spec.ts

@@ -0,0 +1,31 @@
+import { test, expect } from '@playwright/test'
+
+test('base', async ({ page }) => {
+  await page.goto('chart-waterfall#waterfall-base')
+  const chart = page.locator('#waterfall-base .hui-chart')
+  await expect(chart).toHaveScreenshot('base.png')
+})
+
+test('demo2', async ({ page }) => {
+  await page.goto('chart-waterfall#waterfall-demo2')
+  const chart = page.locator('#waterfall-demo2 .hui-chart')
+  await expect(chart).toHaveScreenshot('demo2.png')
+})
+
+test('demo3', async ({ page }) => {
+  await page.goto('chart-waterfall#waterfall-demo3')
+  const chart = page.locator('#waterfall-demo3 .hui-chart')
+  await expect(chart).toHaveScreenshot('demo3.png')
+})
+
+test('demo4', async ({ page }) => {
+  await page.goto('chart-waterfall#waterfall-demo4')
+  const chart = page.locator('#waterfall-demo4 .hui-chart')
+  await expect(chart).toHaveScreenshot('demo4.png')
+})
+
+test('demo5', async ({ page }) => {
+  await page.goto('chart-waterfall#waterfall-demo5')
+  const chart = page.locator('#waterfall-demo5 .hui-chart')
+  await expect(chart).toHaveScreenshot('demo5.png')
+})

package/demos/pc/app/chart/webdoc/chart-process.cn.md

@@ -0,0 +1,7 @@
+---
+title: Chart 图表
+---
+
+# Chart 图表
+
+<div>基于 eCharts 封装，一个纯 Javascript 的图表库。</div>

package/demos/pc/app/chart/webdoc/chart-process.en.md

@@ -0,0 +1,7 @@
+---
+title: Chart
+---
+
+# Chart
+
+<div>Encapsulated based on eCharts, a pure Javascript chart library.</div>

package/demos/pc/app/chart/webdoc/chart-process.js

@@ -0,0 +1,55 @@
+export default {
+  column: '2',
+  owner: '',
+  demos: [
+    {
+      'demoId': 'process-base',
+      'name': { 'zh-CN': '基本用法', 'en-US': 'Basic Usage' },
+      'desc': {
+        'zh-CN':
+          '<p>可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器（IE 9/10/11，Chrome，Firefox，Safari 等）底层依赖轻量级的 Canvas 类库 ZRender，提供直观，生动，可交互，可高度个性化定制的数据可视化图表。</p>\n',
+        'en-US':
+          '<p> can run smoothly on PCs and mobile devices and is compatible with most browsers. (Internet Explorer 9/10/11, Chrome, Firefox, Safari, etc.) The bottom layer relies on the lightweight Canvas class library ZRender to provide intuitive, vivid, interactive, and highly personalized data visualization charts. </p>\n'
+      },
+      'codeFiles': ['process/base.vue']
+    },
+    {
+      'demoId': 'process-demo2',
+      'name': { 'zh-CN': '自定义', 'en-US': 'customizing' },
+      'desc': { 'zh-CN': '详细用法参考如下示例', 'en-US': 'For details, see the following example.' },
+      'codeFiles': ['process/demo2.vue']
+    },
+    {
+      'demoId': 'process-demo3',
+      'name': { 'zh-CN': '堆叠', 'en-US': 'Stacking' },
+      'desc': { 'zh-CN': '详细用法参考如下示例', 'en-US': 'For details, see the following example.' },
+      'codeFiles': ['process/demo3.vue']
+    },
+    {
+      'demoId': 'process-demo4',
+      'name': { 'zh-CN': '不同状态', 'en-US': 'Different states' },
+      'desc': { 'zh-CN': '详细用法参考如下示例', 'en-US': 'For details, see the following example.' },
+      'codeFiles': ['process/demo4.vue']
+    },
+    {
+      'demoId': 'process-demo5',
+      'name': { 'zh-CN': '数据缺省', 'en-US': 'data default' },
+      'desc': { 'zh-CN': '详细用法参考如下示例', 'en-US': 'For details, see the following example.' },
+      'codeFiles': ['process/demo5.vue']
+    },
+    {
+      'demoId': 'process-demo6',
+      'name': { 'zh-CN': '双向', 'en-US': 'Two-way' },
+      'desc': { 'zh-CN': '详细用法参考如下示例', 'en-US': 'For details, see the following example.' },
+      'codeFiles': ['process/demo6.vue']
+    }
+  ],
+  apis: [{ 'name': 'chart-process', 'type': 'component', 'props': [], 'events': [], 'slots': [] }],
+  types: [
+    {
+      name: 'options',
+      type: 'interface',
+      code: ``
+    }
+  ]
+}

package/demos/pc/app/chart/webdoc/chart-process.json.cn.md

@@ -0,0 +1,7 @@
+---
+title: Chart 图表
+---
+
+# Chart 图表
+
+<div>基于 eCharts 封装，一个纯 Javascript 的图表库。</div>

package/demos/pc/app/chart/webdoc/chart-process.json.en.md

@@ -0,0 +1,7 @@
+---
+title: Chart
+---
+
+# Chart
+
+<div>Encapsulated based on eCharts, a pure Javascript chart library.</div>

package/demos/pc/app/chart/wordcloud/wordcloud.spec.ts

@@ -0,0 +1,25 @@
+import { test, expect } from '@playwright/test'
+
+test('base', async ({ page }) => {
+  await page.goto('chart-wordcloud#wordcloud-base')
+  const chart = page.locator('#wordcloud-base .hui-chart')
+  await expect(chart).toHaveScreenshot('base.png')
+})
+
+test('demo2', async ({ page }) => {
+  await page.goto('chart-wordcloud#wordcloud-demo2')
+  const chart = page.locator('#wordcloud-demo2 .hui-chart')
+  await expect(chart).toHaveScreenshot('demo2.png')
+})
+
+test('demo3', async ({ page }) => {
+  await page.goto('chart-wordcloud#wordcloud-demo3')
+  const chart = page.locator('#wordcloud-demo3 .hui-chart')
+  await expect(chart).toHaveScreenshot('demo3.png')
+})
+
+test('demo4', async ({ page }) => {
+  await page.goto('chart-wordcloud#wordcloud-demo4')
+  const chart = page.locator('#wordcloud-demo4 .hui-chart')
+  await expect(chart).toHaveScreenshot('demo4.png')
+})

package/demos/pc/app/company/custom-service.spec.ts

@@ -9,6 +9,7 @@ test('自定义服务', async ({ page }) => {
   const count = 2
   const companys = ['一', '二']
   const modal = page.locator('.tiny-modal')
+  await page.waitForTimeout(200)
 
   // 展开
   await page.locator('.tiny-select .tiny-input__suffix .tiny-svg').click()
@@ -24,6 +25,6 @@ test('自定义服务', async ({ page }) => {
   await input.hover()
 
   // 清空
-  await page.locator('.tiny-select .tiny-input__suffix .tiny-svg').click()
+  await page.locator('.tiny-select .tiny-input__suffix .tiny-svg.icon-close').click()
   await expect(input).toHaveValue('')
 })

package/demos/pc/app/country/custom-service.spec.js

@@ -6,7 +6,7 @@ test('自定义服务', async ({ page }) => {
 
   const select = page.locator('.tiny-select')
   const item = page.getByText('France')
-  const clear = page.locator('.tiny-select .tiny-svg')
+  const clear = page.locator('.tiny-select .tiny-svg.icon-close')
   // 点击选中
   await select.click()
   await item.click()

package/demos/pc/app/date-picker/basic-usage-composition-api.vue

@@ -4,6 +4,7 @@
     <tiny-date-picker v-model="dateTimeValue" type="datetime" placeholder="请选择日期"></tiny-date-picker>
     <tiny-date-picker v-model="weekValue" type="week" placeholder="请选择周"></tiny-date-picker>
     <tiny-date-picker v-model="monthValue" type="month" placeholder="请选择月份"></tiny-date-picker>
+    <tiny-date-picker v-model="quarterValue" type="quarter" placeholder="请选择季度"></tiny-date-picker>
     <tiny-date-picker v-model="yearValue" type="year" placeholder="请选择年份"></tiny-date-picker>
   </div>
 </template>
@@ -16,6 +17,7 @@ const value = ref('')
 const dateTimeValue = ref('')
 const weekValue = ref('')
 const monthValue = ref('')
+const quarterValue = ref('')
 const yearValue = ref('')
 </script>
 

package/demos/pc/app/date-picker/basic-usage.vue

@@ -4,6 +4,7 @@
     <tiny-date-picker v-model="dateTimeValue" type="datetime" placeholder="请选择日期"></tiny-date-picker>
     <tiny-date-picker v-model="weekValue" type="week" placeholder="请选择周"></tiny-date-picker>
     <tiny-date-picker v-model="monthValue" type="month" placeholder="请选择月份"></tiny-date-picker>
+    <tiny-date-picker v-model="quarterValue" type="quarter" placeholder="请选择季度"></tiny-date-picker>
     <tiny-date-picker v-model="yearValue" type="year" placeholder="请选择年份"></tiny-date-picker>
   </div>
 </template>
@@ -21,6 +22,7 @@ export default {
       dateTimeValue: '',
       weekValue: '',
       monthValue: '',
+      quarterValue: '',
       yearValue: ''
     }
   }

package/demos/pc/app/date-picker/default-value.spec.ts

@@ -15,11 +15,11 @@ test('[DatePicker] 测试选择器打开时默认时间设置', async ({ page })
   await dateInputDefaultTime.press('Enter')
 
   await page.getByRole('textbox', { name: '2023-05-20 09:00:00' }).click()
-  await page.getByRole('cell', { name: '15' }).getByText('15').click()
+  await page.getByRole('cell', { name: '15' }).getByText('15').last().click()
   await expect(page.getByRole('textbox', { name: '选择时间' })).toHaveValue('09:00:00')
 
   await page.getByRole('textbox').nth(3).click()
-  await page.getByRole('cell', { name: '10' }).getByText('10').first().click()
+  await page.getByRole('cell', { name: '10' }).getByText('10').last().click()
   await page.getByRole('cell', { name: '10' }).getByText('10').nth(1).click()
   await expect(page.getByRole('textbox', { name: '开始时间' })).toHaveValue('09:00:00')
   await expect(page.getByRole('textbox', { name: '结束时间' })).toHaveValue('18:00:00')