@opentiny/vue-docs 2.2.7 → 2.2.9

package/demos/pc/app/alert/icon-composition-api.vue

@@ -3,14 +3,15 @@
     <tiny-alert :icon="TinyIconBoat" description="自定义图标"></tiny-alert>
     <tiny-alert description="默认图标"></tiny-alert>
     <tiny-alert type="success" description="type 为 success 的默认图标"></tiny-alert>
-    <tiny-alert type="warning" description="type 为 warning 的默认图标"></tiny-alert>
+    <tiny-alert :icon="TinyIconWarningTriangle" type="warning" description="type 为 warning 的默认图标"></tiny-alert>
     <tiny-alert type="error" description="type 为 error 的默认图标"></tiny-alert>
   </div>
 </template>
 
 <script setup>
 import { Alert as TinyAlert } from '@opentiny/vue'
-import { iconBoat } from '@opentiny/vue-icon'
+import { iconBoat, iconWarningTriangle } from '@opentiny/vue-icon'
 
 const TinyIconBoat = iconBoat()
+const TinyIconWarningTriangle = iconWarningTriangle()
 </script>

package/demos/pc/app/alert/icon.vue

@@ -3,14 +3,14 @@
     <tiny-alert :icon="TinyIconBoat" description="自定义图标"></tiny-alert>
     <tiny-alert description="默认图标"></tiny-alert>
     <tiny-alert type="success" description="type 为 success 的默认图标"></tiny-alert>
-    <tiny-alert type="warning" description="type 为 warning 的默认图标"></tiny-alert>
+    <tiny-alert :icon="TinyIconWarningTriangle" type="warning" description="type 为 warning 的默认图标"></tiny-alert>
     <tiny-alert type="error" description="type 为 error 的默认图标"></tiny-alert>
   </div>
 </template>
 
 <script>
 import { Alert } from '@opentiny/vue'
-import { iconBoat } from '@opentiny/vue-icon'
+import { iconBoat, iconWarningTriangle } from '@opentiny/vue-icon'
 
 export default {
   components: {
@@ -18,7 +18,8 @@ export default {
   },
   data() {
     return {
-      TinyIconBoat: iconBoat()
+      TinyIconBoat: iconBoat(),
+      TinyIconWarningTriangle: iconWarningTriangle()
     }
   }
 }

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

@@ -132,7 +132,7 @@ export default {
         },
         {
           'name': 'icon',
-          'type': 'VueComponent',
+          'type': 'Component',
           'defaultValue': '--',
           'desc': {
             'zh-CN': '传入图标组件自定义警告的图标，默认会根据 type 值自动使用对应图标',
@@ -174,7 +174,8 @@ export default {
         },
         {
           'name': 'type',
-          'type': "'success' | 'warning' | 'info' | 'error'",
+          'type': 'IType',
+          'typeAnchorName': 'IType',
           'defaultValue': "'info'",
           'desc': {
             'zh-CN': '警告的类型',
@@ -238,5 +239,14 @@ export default {
         }
       ]
     }
+  ],
+  types: [
+    {
+      name: 'IType',
+      type: 'type',
+      code: `
+type IType = 'success' | 'warning' | 'info' | 'error' | 'simple'
+`
+    }
   ]
 }

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

@@ -19,29 +19,29 @@ const links = ref([
       {
         key: 'basic-usage',
         link: '#basic-usage',
-        title: 'Basic Usage'
+        title: '基本用法'
       },
       {
         key: 'is-affix',
         link: '#is-affix',
-        title: 'Is Affix'
+        title: '固定模式'
       },
       {
         key: 'set-container',
         link: '#set-container',
-        title: 'Set Container'
+        title: '滚动容器'
       },
       {
         key: 'on-change',
-        link: '#on-change',
-        title: 'On Change'
+        link: '#change',
+        title: 'change 事件'
       }
     ]
   },
   {
     key: 'api',
-    link: '#api',
-    title: 'Api'
+    link: '#API',
+    title: 'API'
   }
 ])
 

package/demos/pc/app/anchor/basic-usage.spec.ts

@@ -6,7 +6,7 @@ test('基本用法', async ({ page }) => {
 
   const anchor = page.locator('.tiny-anchor')
   const link1 = anchor.getByRole('link', { name: '演示' })
-  const link2 = anchor.getByRole('link', { name: 'On Change' })
+  const link2 = anchor.getByRole('link', { name: 'change 事件' })
   const hash1 = await page.evaluate(() => window.location.hash)
 
   await link1.click()
@@ -18,5 +18,5 @@ test('基本用法', async ({ page }) => {
   await link2.click()
   const hash3 = await page.evaluate(() => window.location.hash)
 
-  await expect(hash3).toContain('#on-change')
+  await expect(hash3).toContain('#change')
 })

package/demos/pc/app/anchor/basic-usage.vue

@@ -27,29 +27,29 @@ export default {
             {
               key: 'basic-usage',
               link: '#basic-usage',
-              title: 'Basic Usage'
+              title: '基本用法'
             },
             {
               key: 'is-affix',
               link: '#is-affix',
-              title: 'Is Affix'
+              title: '固定模式'
             },
             {
               key: 'set-container',
               link: '#set-container',
-              title: 'Set Container'
+              title: '滚动容器'
             },
             {
               key: 'on-change',
-              link: '#on-change',
-              title: 'On Change'
+              link: '#change',
+              title: 'change 事件'
             }
           ]
         },
         {
           key: 'api',
-          link: '#api',
-          title: 'Api'
+          link: '#API',
+          title: 'API'
         }
       ],
       type: 'dot'

package/demos/pc/app/anchor/change-composition-api.vue

@@ -15,29 +15,29 @@ const links = ref([
       {
         key: 'basic-usage',
         link: '#basic-usage',
-        title: 'Basic Usage'
+        title: '基本用法'
       },
       {
         key: 'is-affix',
         link: '#is-affix',
-        title: 'Is Affix'
+        title: '固定模式'
       },
       {
         key: 'set-container',
         link: '#set-container',
-        title: 'Set Container'
+        title: '滚动容器'
       },
       {
         key: 'on-change',
-        link: '#on-change',
-        title: 'On Change'
+        link: '#change',
+        title: 'change 事件'
       }
     ]
   },
   {
     key: 'api',
-    link: '#api',
-    title: 'Api'
+    link: '#API',
+    title: 'API'
   }
 ])
 

package/demos/pc/app/anchor/change.spec.ts

@@ -6,12 +6,12 @@ test('change事件', async ({ page }) => {
 
   const anchor = page.locator('.tiny-anchor')
   const link1 = anchor.getByRole('link', { name: '演示' })
-  const link2 = anchor.getByRole('link', { name: 'On Change' })
+  const link2 = anchor.getByRole('link', { name: 'change 事件' })
   const modal = page.locator('.tiny-modal')
 
   await link1.click()
   await expect(modal).toHaveCount(1)
   await link2.click()
   await expect(modal).toHaveCount(2)
-  await expect(modal.last()).toHaveText(/#on-change/)
+  await expect(modal.last()).toHaveText(/#change/)
 })

package/demos/pc/app/anchor/change.vue

@@ -20,29 +20,29 @@ export default {
             {
               key: 'basic-usage',
               link: '#basic-usage',
-              title: 'Basic Usage'
+              title: '基本用法'
             },
             {
               key: 'is-affix',
               link: '#is-affix',
-              title: 'Is Affix'
+              title: '固定模式'
             },
             {
               key: 'set-container',
               link: '#set-container',
-              title: 'Set Container'
+              title: '滚动容器'
             },
             {
               key: 'on-change',
-              link: '#on-change',
-              title: 'On Change'
+              link: '#change',
+              title: 'change 事件'
             }
           ]
         },
         {
           key: 'api',
-          link: '#api',
-          title: 'Api'
+          link: '#API',
+          title: 'API'
         }
       ]
     }

package/demos/pc/app/anchor/is-affix-composition-api.vue

@@ -22,29 +22,29 @@ const links = ref([
       {
         key: 'basic-usage',
         link: '#basic-usage',
-        title: 'Basic Usage'
+        title: '基本用法'
       },
       {
         key: 'is-affix',
         link: '#is-affix',
-        title: 'Is Affix'
+        title: '固定模式'
       },
       {
         key: 'set-container',
         link: '#set-container',
-        title: 'Set Container'
+        title: '滚动容器'
       },
       {
         key: 'on-change',
-        link: '#on-change',
-        title: 'On Change'
+        link: '#change',
+        title: 'change 事件'
       }
     ]
   },
   {
     key: 'api',
-    link: '#api',
-    title: 'Api'
+    link: '#API',
+    title: 'API'
   }
 ])
 </script>

package/demos/pc/app/anchor/is-affix.vue

@@ -28,29 +28,29 @@ export default {
             {
               key: 'basic-usage',
               link: '#basic-usage',
-              title: 'Basic Usage'
+              title: '基本用法'
             },
             {
               key: 'is-affix',
               link: '#is-affix',
-              title: 'Is Affix'
+              title: '固定模式'
             },
             {
               key: 'set-container',
               link: '#set-container',
-              title: 'Set Container'
+              title: '滚动容器'
             },
             {
               key: 'on-change',
-              link: '#on-change',
-              title: 'On Change'
+              link: '#change',
+              title: 'change 事件'
             }
           ]
         },
         {
           key: 'api',
-          link: '#api',
-          title: 'Api'
+          link: '#API',
+          title: 'API'
         }
       ]
     }

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

@@ -52,7 +52,7 @@ export default {
           'defaultValue': '',
           'desc': {
             'zh-CN':
-              '用于单页面 hash 路由模式时指定滚动容器的id值，id为空时则滚动容器默认为 HTML 文档的根节点 body 元素',
+              '用于单页面 hash 路由模式时指定滚动容器的 id 值，id 为空时则滚动容器默认为 HTML 文档的根节点 body 元素',
             'en-US':
               'When used in single page hash routing mode, specify the id value of the scrolling container. If the id is empty, the scrolling container defaults to the body element of the root node of the HTML document'
           },
@@ -71,7 +71,7 @@ export default {
           'typeAnchorName': 'ILink',
           'defaultValue': '',
           'desc': {
-            'zh-CN': '导航数据配置项，可通过children嵌套',
+            'zh-CN': '导航数据配置项，可通过 children 嵌套',
             'en-US': 'Navigation data configuration items can be nested through children'
           },
           'demoId': 'basic-usage'
@@ -89,7 +89,7 @@ export default {
         {
           'name': 'type',
           'type': '"line" | "dot"',
-          'defaultValue': '"line"',
+          'defaultValue': `'line'`,
           'desc': {
             'zh-CN': '锚点类型',
             'en-US': 'Anchor type'
@@ -113,7 +113,7 @@ export default {
           'type': '(hash: string) => void',
           'defaultValue': '',
           'desc': {
-            'zh-CN': '使用change代替；[deprecated v3.12.0废弃，v3.17.0移除；移除原因：命名规范]',
+            'zh-CN': '使用 change 代替；[deprecated v3.12.0 废弃，v3.17.0 移除；移除原因：命名规范]',
             'en-US':
               'use change instead [deprecated v3.12.0 abandoned, v3.17.0 removed; reason for removal: naming convention]'
           },

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

@@ -271,14 +271,14 @@ export default {
         },
         {
           'name': 'prefix-icon',
-          'type': 'VueComponent',
+          'type': 'Component',
           'defaultValue': '',
           'desc': { 'zh-CN': '输入框头部图标', 'en-US': 'Icon on the header of the text box' },
           'demoId': 'custom-icon'
         },
         {
           'name': 'suffix-icon',
-          'type': 'VueComponent',
+          'type': 'Component',
           'defaultValue': '',
           'desc': { 'zh-CN': '输入框尾部图标', 'en-US': 'Icon at the end of the text box' },
           'demoId': 'custom-icon'

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

@@ -142,7 +142,7 @@ export default {
             'zh-CN': '指定跳转的目标页面地址',
             'en-US': 'Specify the URL of the target page.'
           },
-          'demoId': 'target'
+          'demoId': 'link'
         },
         {
           'name': 'is-dot',

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

@@ -160,7 +160,7 @@ export default {
         },
         {
           'name': 'icon',
-          'type': 'VueComponent',
+          'type': 'Component',
           'defaultValue': '--',
           'desc': {
             'zh-CN': '按钮左侧展示的图标，接收为Icon组件',

package/demos/pc/app/button-group/basic-usage.spec.ts

@@ -10,6 +10,7 @@ test('按钮组基本示例', async ({ page }) => {
   const button3 = demo.getByRole('button', { name: 'Button3' })
 
   await button3.click()
+  await demo.getByRole('button', { name: 'Button2' }).hover()
   await expect(buttonGroup.locator('li').nth(2)).toHaveClass('active')
   await expect(button3).toHaveCSS('background-color', 'rgb(94, 124, 224)')
   await expect(button3).toHaveCSS('border-bottom-color', 'rgb(94, 124, 224)')

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

@@ -0,0 +1,25 @@
+<template>
+  <div>
+    <tiny-button-group :data="groupData" v-model="checkedVal"></tiny-button-group>
+    <tiny-button-group :data="groupData" v-model="checkedVal">
+      <span class="custom-empty">自定义空数据</span>
+    </tiny-button-group>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import { ButtonGroup as TinyButtonGroup } from '@opentiny/vue'
+
+const checkedVal = ref('')
+const groupData = ref([])
+</script>
+
+<style scoped>
+.custom-empty {
+  color: #fac20a;
+}
+.tiny-button-group + .tiny-button-group {
+  margin-left: 20px;
+}
+</style>

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

@@ -0,0 +1,11 @@
+import { test, expect } from '@playwright/test'
+
+test('空数据插槽', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('button-group#slot-empty')
+
+  const demo = page.locator('#slot-empty')
+  const emptySlot = demo.locator('.tiny-button-group .tiny-button-group--empty')
+  await expect(emptySlot.first()).toHaveCSS('color', 'rgb(173, 176, 184)')
+  await expect(demo.locator('.tiny-button-group .custom-empty')).toHaveCSS('color', 'rgb(250, 194, 10)')
+})

package/demos/pc/app/button-group/slot-empty.vue

@@ -0,0 +1,33 @@
+<template>
+  <div>
+    <tiny-button-group :data="groupData" v-model="checkedVal"></tiny-button-group>
+    <tiny-button-group :data="groupData" v-model="checkedVal">
+      <span class="custom-empty">自定义空数据</span>
+    </tiny-button-group>
+  </div>
+</template>
+
+<script>
+import { ButtonGroup } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinyButtonGroup: ButtonGroup
+  },
+  data() {
+    return {
+      checkedVal: '',
+      groupData: []
+    }
+  }
+}
+</script>
+
+<style scoped>
+.custom-empty {
+  color: #fac20a;
+}
+.tiny-button-group + .tiny-button-group {
+  margin-left: 20px;
+}
+</style>

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

@@ -86,6 +86,15 @@ export default {
       },
       'codeFiles': ['slot-default.vue']
     },
+    {
+      'demoId': 'slot-empty',
+      'name': { 'zh-CN': '空数据插槽', 'en-US': 'Empty slot' },
+      'desc': {
+        'zh-CN': '<p>当数据为空时，默认会显示暂无数据，通过默认插槽自定义内容。</p>',
+        'en-US': '<p>When the data is empty, customize the content via the <code>empty</code> slot.</p>'
+      },
+      'codeFiles': ['slot-empty.vue']
+    },
     {
       'demoId': 'button-group-multiple',
       'name': { 'zh-CN': '多行按钮组', 'en-US': 'Button Group Multiple' },

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

@@ -2,6 +2,6 @@
   <tiny-calendar></tiny-calendar>
 </template>
 
-<script setup lang="jsx">
+<script setup>
 import { Calendar as TinyCalendar } from '@opentiny/vue'
 </script>

package/demos/pc/app/calendar/basic-usage.spec.ts

@@ -0,0 +1,33 @@
+import { test, expect } from '@playwright/test'
+
+test('基本用法', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('calendar#basic-usage')
+  const pcDemo = page.locator('.pc-demo')
+  const nowMonth = new Date().getMonth() + 1
+  const today = page.locator('.today')
+  const selectedDay = page.getByRole('cell', { name: '14' }).locator('div').first()
+  const selectedMonth = page.getByRole('cell', { name: '7 月' }).locator('div').first()
+  // 校验日期，查看页面显示是否是月
+  await pcDemo.getByRole('listitem').filter({ hasText: '月' }).nth(2).click()
+  await expect(pcDemo.locator('.tiny-calendar > div').last()).toHaveClass(/month/)
+  // 校验日期选择，选中的样式有selected
+  await selectedDay.click()
+  await expect(selectedDay).toHaveClass(/selected/)
+  // 校验今天按钮，选中的样式有selected today
+  await pcDemo.getByRole('button', { name: '今天' }).click()
+  await expect(today).toHaveClass(/selected/)
+
+  // 校验年里的月份代码逻辑一致
+  await pcDemo.getByRole('listitem').filter({ hasText: '年' }).nth(2).click()
+  await expect(pcDemo.locator('.tiny-calendar > div').last()).toHaveClass(/year/)
+  await selectedMonth.click()
+  await expect(selectedMonth).toHaveClass(/selected/)
+  await pcDemo.getByRole('button', { name: '本月' }).click()
+  await expect(
+    pcDemo
+      .getByRole('cell', { name: `${nowMonth}` + ' 月' })
+      .locator('div')
+      .first()
+  ).toHaveClass(/selected/)
+})

package/demos/pc/app/calendar/basic-usage.vue

@@ -2,7 +2,7 @@
   <tiny-calendar></tiny-calendar>
 </template>
 
-<script lang="jsx">
+<script>
 import { Calendar } from '@opentiny/vue'
 
 export default {

package/demos/pc/app/calendar/calendar-mode-composition-api.vue

@@ -2,6 +2,6 @@
   <tiny-calendar mode="year"></tiny-calendar>
 </template>
 
-<script setup lang="jsx">
+<script setup>
 import { Calendar as TinyCalendar } from '@opentiny/vue'
 </script>

package/demos/pc/app/calendar/calendar-mode.spec.ts

@@ -0,0 +1,33 @@
+import { test, expect } from '@playwright/test'
+
+test('显示模式', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('calendar#calendar-mode')
+  const pcDemo = page.locator('.pc-demo')
+  const nowMonth = new Date().getMonth() + 1
+  const today = page.locator('.today')
+  const selectedDay = page.getByRole('cell', { name: '14' }).locator('div').first()
+  const selectedMonth = page.getByRole('cell', { name: '7 月' }).locator('div').first()
+  // 校验日期，查看页面显示是否是月
+  await pcDemo.getByRole('listitem').filter({ hasText: '月' }).nth(2).click()
+  await expect(pcDemo.locator('.tiny-calendar > div').last()).toHaveClass(/month/)
+  // 校验日期选择，选中的样式有selected
+  await selectedDay.click()
+  await expect(selectedDay).toHaveClass(/selected/)
+  // 校验今天按钮，选中的样式有selected today
+  await pcDemo.getByRole('button', { name: '今天' }).click()
+  await expect(today).toHaveClass(/selected/)
+
+  // 校验年里的月份代码逻辑一致
+  await pcDemo.getByRole('listitem').filter({ hasText: '年' }).nth(2).click()
+  await expect(pcDemo.locator('.tiny-calendar > div').last()).toHaveClass(/year/)
+  await selectedMonth.click()
+  await expect(selectedMonth).toHaveClass(/selected/)
+  await pcDemo.getByRole('button', { name: '本月' }).click()
+  await expect(
+    pcDemo
+      .getByRole('cell', { name: `${nowMonth}` + ' 月' })
+      .locator('div')
+      .first()
+  ).toHaveClass(/selected/)
+})

package/demos/pc/app/calendar/calendar-mode.vue

@@ -2,7 +2,7 @@
   <tiny-calendar mode="year"></tiny-calendar>
 </template>
 
-<script lang="jsx">
+<script>
 import { Calendar } from '@opentiny/vue'
 
 export default {

package/demos/pc/app/calendar/custom-calendar-toolbar-composition-api.vue

@@ -6,13 +6,13 @@
   </tiny-calendar>
 </template>
 
-<script setup lang="jsx">
+<script setup>
 import { Calendar as TinyCalendar, Button as TinyButton } from '@opentiny/vue'
 
 function toToday(scope) {
   let year = new Date().getFullYear()
-  let month = new Date().getMonth() + 1
+  let month = new Date().getMonth()
   let day = new Date().getDate()
-  scope.selectedDate = new Date(year + '-' + month + '-' + day).valueOf()
+  scope.selectedDate = new Date(year, month, day).valueOf()
 }
 </script>