@opentiny/vue-docs 2.2.20 → 2.2.21

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

@@ -0,0 +1,234 @@
+<template>
+  <div>
+    <div class="my20">自定义节点,为节点添加提示</div>
+    <tiny-cascader v-model="value1" :options="options">
+      <template #default="{ node }">
+        <span :title="node.label"> {{ node.label }} <tiny-icon-share /></span>
+      </template>
+    </tiny-cascader>
+    <div class="my20">自定义空数据插槽</div>
+    <tiny-cascader v-model="value2" :options="[]">
+      <template #no-data>
+        <div>no-data</div>
+      </template>
+    </tiny-cascader>
+  </div>
+</template>
+
+<script>
+import { Cascader } from '@opentiny/vue'
+import { iconShare } from '@opentiny/vue-icon'
+
+export default {
+  components: {
+    TinyCascader: Cascader,
+    TinyIconShare: iconShare()
+  },
+  data() {
+    return {
+      value1: '',
+      value2: '',
+      options: [
+        {
+          value: 'zhinan',
+          label: '指南',
+          children: [
+            {
+              value: 'anzhuang',
+              label: '安装',
+              children: [
+                {
+                  value: 'xiangmudengji',
+                  label: '项目登记'
+                },
+                {
+                  value: 'huanjingzhunbei',
+                  label: '环境准备'
+                },
+                {
+                  value: 'anzhuangcli',
+                  label: '安装 CLI'
+                },
+                {
+                  value: 'chuangjianxiangmu',
+                  label: '创建项目'
+                }
+              ]
+            },
+            {
+              value: 'kaifa',
+              label: '开发',
+              children: [
+                {
+                  value: 'yinruzujian',
+                  label: '引入组件'
+                },
+                {
+                  value: 'monishuju',
+                  label: '模拟数据'
+                }
+              ]
+            }
+          ]
+        },
+        {
+          value: 'zujian',
+          label: '组件',
+          children: [
+            {
+              value: 'basic',
+              label: '框架风格',
+              children: [
+                {
+                  value: 'layout',
+                  label: 'Layout 布局'
+                },
+                {
+                  value: 'color',
+                  label: 'Color 色彩'
+                },
+                {
+                  value: 'font',
+                  label: 'Font 字体'
+                },
+                {
+                  value: 'icon',
+                  label: 'Icon 图标'
+                }
+              ]
+            },
+            {
+              value: 'form',
+              label: '表单组件',
+              children: [
+                {
+                  value: 'radio',
+                  label: 'Radio 单选框'
+                },
+                {
+                  value: 'checkbox',
+                  label: 'Checkbox 多选框'
+                },
+                {
+                  value: 'input',
+                  label: 'Input 输入框'
+                },
+                {
+                  value: 'number',
+                  label: 'Numeric 计数器'
+                },
+                {
+                  value: 'select',
+                  label: 'Select 选择器'
+                },
+                {
+                  value: 'cascader',
+                  label: 'Cascader 级联选择器'
+                },
+                {
+                  value: 'switch',
+                  label: 'Switch 开关'
+                },
+                {
+                  value: 'slider',
+                  label: 'Slider 滑块'
+                },
+                {
+                  value: 'time-picker',
+                  label: 'TimePicker 时间选择器'
+                },
+                {
+                  value: 'date-picker',
+                  label: 'DatePicker 日期选择器'
+                },
+                {
+                  value: 'form',
+                  label: 'Form 表单'
+                }
+              ]
+            },
+            {
+              value: 'data',
+              label: '数据组件',
+              children: [
+                {
+                  value: 'tree',
+                  label: 'Tree 树形控件'
+                },
+                {
+                  value: 'pager',
+                  label: 'Pager 分页'
+                }
+              ]
+            },
+            {
+              value: 'notice',
+              label: '提示组件',
+              children: [
+                {
+                  value: 'alert',
+                  label: 'Alert 警告'
+                },
+                {
+                  value: 'loading',
+                  label: 'Loading 加载'
+                }
+              ]
+            },
+            {
+              value: 'navigation',
+              label: '导航组件',
+              children: [
+                {
+                  value: 'menu',
+                  label: 'NavMenu 导航菜单'
+                },
+                {
+                  value: 'tabs',
+                  label: 'Tabs 标签页'
+                },
+                {
+                  value: 'breadcrumb',
+                  label: 'Breadcrumb 面包屑'
+                },
+                {
+                  value: 'steps',
+                  label: 'Steps 步骤条'
+                }
+              ]
+            },
+            {
+              value: 'others',
+              label: '其他组件',
+              children: [
+                {
+                  value: 'rate',
+                  label: 'Rate 评分'
+                },
+                {
+                  value: 'tag',
+                  label: 'Tag 标签'
+                },
+                {
+                  value: 'usercontact',
+                  label: 'UserContact 联系人'
+                },
+                {
+                  value: 'slidebar',
+                  label: 'SlideBar 滚动块'
+                }
+              ]
+            }
+          ]
+        }
+      ]
+    }
+  }
+}
+</script>
+
+<style scoped>
+.my20 {
+  margin: 20px 0;
+}
+</style>

package/demos/pc/app/cascader/webdoc/cascader.js

@@ -268,6 +268,24 @@ export default {
           '<p>\n            Cascader cascade selector events include: <code>change</code>, <code>expand-change</code>, <code>blur</code>, <code>focus</code>, < code>visible-change</code>. \n            Use <code>props.emitPath</code> to set the return type of the node.\n          </p>'
       },
       codeFiles: ['events.vue']
+    },
+    {
+      demoId: 'slot',
+      name: {
+        'zh-CN': '插槽',
+        'en-US': 'Empty Data Slot'
+      },
+      desc: {
+        'zh-CN': `
+          通过 <code>default</code> 插槽，自定义级联节点。<br>
+          通过 <code>no-data</code> 插槽设置没有数据时显示的内容。
+        `,
+        'en-US': `
+          Use the <code>default</code> slot to customize the cascaded node.<br>
+          The <code>no-data</code> slot sets what is displayed when there is no data.
+        `
+      },
+      codeFiles: ['slot.vue']
     }
   ]
 }

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

@@ -0,0 +1,6 @@
+import { test } from '@playwright/test'
+
+test('base', async ({ page }) => {
+  await page.goto('chart-autonavi-map')
+  const chart = page.locator('#amap-base .amap-layers')
+})

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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