@opentinyvue/vue-docs 3.22.0 → 3.22.2

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

@@ -1,6 +1,8 @@
 export default {
   column: '2',
   owner: '',
+  show: true,
+  cloud: true,
   demos: [
     {
       demoId: 'base',
@@ -70,5 +72,72 @@ export default {
       },
       codeFiles: ['options.vue']
     }
+  ],
+  features: [
+    {
+      id: 'basic',
+      name: '基本功能',
+      support: {
+        value: true
+      },
+      description: '通过 select 监听面包屑选中事件，通过 to 设置选项路由跳转对象，通过 label 设置选项名称。',
+      cloud: {
+        value: true
+      },
+      apis: ['select', 'to', 'label'],
+      demos: ['base']
+    },
+    {
+      id: 'size',
+      name: '尺寸设置',
+      support: {
+        value: true
+      },
+      description: '通过 size 自定义尺寸，仅支持 medium 尺寸。',
+      cloud: {
+        value: true
+      },
+      apis: ['size'],
+      demos: ['size']
+    },
+    {
+      id: 'separator',
+      name: '分隔符',
+      support: {
+        value: true
+      },
+      description: '通过 separator 或 separator-icon 自定义分隔符。',
+      cloud: {
+        value: true
+      },
+      apis: ['separator', 'separator-icon'],
+      demos: ['separator']
+    },
+    {
+      id: 'options',
+      name: '配置式',
+      support: {
+        value: true
+      },
+      description: '通过 options 配置每个 BreadcrumbItem，通过 text-field 指定显示键值，默认显示键值为 label。',
+      cloud: {
+        value: true
+      },
+      apis: ['options', 'text-field'],
+      demos: ['options']
+    },
+    {
+      id: 'slot',
+      name: '插槽功能',
+      support: {
+        value: true
+      },
+      description: '通过默认插槽自定义节点内容，支持 replace 设置不向浏览器历史添加新记录。',
+      cloud: {
+        value: true
+      },
+      apis: ['slot-default', 'replace'],
+      demos: ['slot-default']
+    }
   ]
 }

package/demos/pc/app/bulletin-board/webdoc/bulletin-board.js

@@ -1,6 +1,8 @@
 export default {
   column: '2',
   owner: '',
+  show: true,
+  cloud: false,
   demos: [
     {
       demoId: 'base',
@@ -117,5 +119,124 @@ export default {
       },
       codeFiles: ['events.vue']
     }
+  ],
+  features: [
+    {
+      id: 'basic',
+      name: '基本功能',
+      support: {
+        value: true
+      },
+      description: '通过 data 设置公告牌公告信息数据，tab-title 属性设置每个公告牌标题。',
+      cloud: {
+        value: false
+      },
+      apis: ['data', 'tab-title'],
+      demos: ['base']
+    },
+    {
+      id: 'title',
+      name: '公告牌标题',
+      support: {
+        value: true
+      },
+      description: '通过 title 设置公告牌标题。',
+      cloud: {
+        value: false
+      },
+      apis: ['title'],
+      demos: ['title']
+    },
+    {
+      id: 'active-name',
+      name: '默认激活选项卡',
+      support: {
+        value: true
+      },
+      description: '通过 active-name 设置默认激活的选项卡，从 1 开始计算。',
+      cloud: {
+        value: false
+      },
+      apis: ['active-name'],
+      demos: ['active-name']
+    },
+    {
+      id: 'tab-title',
+      name: '选项卡标题',
+      support: {
+        value: true
+      },
+      description: '通过 tab-title 设置自定义选项卡标题。',
+      cloud: {
+        value: false
+      },
+      apis: ['tab-title'],
+      demos: ['tab-title']
+    },
+    {
+      id: 'url',
+      name: 'URL跳转',
+      support: {
+        value: true
+      },
+      description: '基于 Url 的跳转是通过数据中的 url 和 target 字段进行设置的。',
+      cloud: {
+        value: false
+      },
+      apis: ['url', 'target'],
+      demos: ['url']
+    },
+    {
+      id: 'route',
+      name: '路由跳转',
+      support: {
+        value: true
+      },
+      description: '基于 Route 的跳转是通过数据中的 route 字段进行设置的。',
+      cloud: {
+        value: false
+      },
+      apis: ['route'],
+      demos: ['route']
+    },
+    {
+      id: 'more-link',
+      name: '更多链接',
+      support: {
+        value: true
+      },
+      description: '通过 more-link 显示并设置更多链接，show-more 设置是否显示更多按钮。',
+      cloud: {
+        value: false
+      },
+      apis: ['more-link', 'show-more'],
+      demos: ['more-link']
+    },
+    {
+      id: 'icon',
+      name: '公告前缀',
+      support: {
+        value: true
+      },
+      description: '通过 icon 自定义新公告前缀图标。',
+      cloud: {
+        value: false
+      },
+      apis: ['icon'],
+      demos: ['icon']
+    },
+    {
+      id: 'events',
+      name: '事件处理',
+      support: {
+        value: true
+      },
+      description: '当点击内容后会触发 contentClick 事件。',
+      cloud: {
+        value: false
+      },
+      apis: ['contentClick'],
+      demos: ['events']
+    }
   ]
 }

package/demos/pc/app/button/dynamic-disabled.spec.ts

@@ -12,7 +12,7 @@ test('测试禁用状态是否生效', async ({ page }) => {
   await expect(demo.locator('.tiny-button').first()).toBeDisabled()
   await expect(demo.locator('.tiny-button').first()).toHaveCSS('background-color', 'rgb(240, 240, 240)')
   await expect(demo.locator('.tiny-button').first()).toHaveCSS('color', 'rgb(194, 194, 194)')
-  await expect(demo.locator('.tiny-button').first()).toHaveCSS('border-bottom-color', 'rgb(240, 240, 240)')
+  await expect(demo.locator('.tiny-button').first()).toHaveCSS('border-bottom-color', 'rgb(219, 219, 219)')
   await expect(demo.getByRole('button', { name: '次要按钮' }).first()).toBeDisabled()
   await expect(demo.getByRole('button', { name: '主要按钮' }).first()).toBeDisabled()
   await expect(demo.getByRole('button', { name: '成功按钮' }).first()).toBeDisabled()

package/demos/pc/app/button/ghost-composition-api.vue

@@ -15,7 +15,7 @@ import { TinyButton } from '@opentiny/vue'
 
 <style scoped>
 .gray-bg {
-  background: #fafafa;
+  background-color: rgba(0, 0, 0, 0.2);
   padding: 20px 10px 10px;
 }
 .tiny-button {

package/demos/pc/app/button/ghost.vue

@@ -21,7 +21,7 @@ export default {
 
 <style scoped>
 .gray-bg {
-  background: #fafafa;
+  background-color: rgba(0, 0, 0, 0.2);
   padding: 20px 10px 10px;
 }
 .tiny-button {

package/demos/pc/app/button/loading-composition-api.vue

@@ -1,6 +1,9 @@
 <template>
   <div>
     <tiny-button type="primary" loading>加载中</tiny-button>
+    <br />
+    <br />
+    <tiny-button loading>加载中</tiny-button>
   </div>
 </template>
 

package/demos/pc/app/button/loading.vue

@@ -1,6 +1,9 @@
 <template>
   <div>
     <tiny-button type="primary" loading>加载中</tiny-button>
+    <br />
+    <br />
+    <tiny-button loading>加载中</tiny-button>
   </div>
 </template>
 

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

@@ -143,5 +143,145 @@ export default {
       },
       codeFiles: ['click.vue']
     }
+  ],
+  show: true,
+  cloud: true,
+  features: [
+    {
+      id: 'type',
+      name: '按钮类型',
+      support: {
+        value: true
+      },
+      description: '支持主要按钮、次要按钮、成功按钮、警告按钮、危险按钮、信息按钮、文字按钮7种类型。',
+      cloud: {
+        value: true,
+        remark: '规范只支持主要按钮、次要按钮、危险按钮、文本按钮4种，不支持成功按钮、警告按钮、信息按钮。'
+      },
+      'e2e-test': true,
+      'unit-test': true,
+      apis: ['type'],
+      demos: ['basic-usage']
+    },
+    {
+      id: 'round',
+      name: '圆角按钮',
+      support: {
+        value: true
+      },
+      description: '按钮两边都是半圆形。',
+      cloud: {
+        value: true
+      },
+      'e2e-test': true,
+      'unit-test': true,
+      apis: ['round'],
+      demos: ['round']
+    },
+    {
+      id: 'circle',
+      name: '圆形按钮',
+      support: {
+        value: true
+      },
+      description: '整个按钮是圆形，一般在里面放一个图标。',
+      cloud: {
+        value: false
+      },
+      'e2e-test': true,
+      'unit-test': true,
+      apis: ['circle'],
+      demos: ['circle']
+    },
+    {
+      id: 'ghost',
+      name: '幽灵按钮',
+      support: {
+        value: true
+      },
+      description: '幽灵按钮的背景色跟随背景变化。',
+      cloud: {
+        value: true
+      },
+      'e2e-test': true,
+      'unit-test': false,
+      apis: ['ghost'],
+      demos: ['ghost']
+    },
+    {
+      id: 'disabled',
+      name: '禁用状态',
+      support: {
+        value: true
+      },
+      description: '禁用状态下的按钮不可点击。',
+      cloud: {
+        value: true
+      },
+      'e2e-test': true,
+      'unit-test': true,
+      apis: ['disabled'],
+      demos: ['dynamic-disabled']
+    },
+    {
+      id: 'icon',
+      name: '图标按钮',
+      support: {
+        value: true
+      },
+      description: '给按钮加个小图标。',
+      cloud: {
+        value: true
+      },
+      'e2e-test': true,
+      'unit-test': true,
+      apis: ['icon'],
+      demos: ['icon']
+    },
+    {
+      id: 'loading',
+      name: '加载中状态',
+      support: {
+        value: true
+      },
+      description: '禁用状态和图标按钮的组合特性。',
+      cloud: {
+        value: true
+      },
+      'e2e-test': true,
+      'unit-test': true,
+      apis: ['loading'],
+      demos: ['loading']
+    },
+    {
+      id: 'size',
+      name: '尺寸',
+      support: {
+        value: true
+      },
+      description: '支持超大、大、常规(默认)、小、迷你5种尺寸。',
+      cloud: {
+        value: true
+      },
+      'e2e-test': true,
+      'unit-test': true,
+      apis: ['size'],
+      demos: ['size']
+    },
+    {
+      id: 'prevent-duplicate-click',
+      name: '防止重复点击',
+      support: {
+        value: true
+      },
+      description: '点击之后按钮变成禁用态，无法连续点击，可以设置点击之后按钮禁用的时长',
+      cloud: {
+        value: false
+      },
+      'e2e-test': true,
+      'unit-test': false,
+      apis: ['reset-time'],
+      demos: ['reset-time']
+    }
   ]
 }

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

@@ -1,6 +1,8 @@
 export default {
   column: '2',
   owner: '',
+  show: true,
+  cloud: true,
   demos: [
     {
       demoId: 'basic-usage',
@@ -148,5 +150,152 @@ export default {
       },
       codeFiles: ['change-event.vue']
     }
+  ],
+  features: [
+    {
+      id: 'basic',
+      name: '基本功能',
+      support: {
+        value: true
+      },
+      description: '通过 data 设置按钮组数据，v-model 设置绑定值。',
+      cloud: {
+        value: true
+      },
+      apis: ['data', 'v-model'],
+      demos: ['basic-usage']
+    },
+    {
+      id: 'size',
+      name: '尺寸设置',
+      support: {
+        value: true
+      },
+      description: '通过 size 设置尺寸大小，可选值有 medium、small、mini。',
+      cloud: {
+        value: true
+      },
+      apis: ['size'],
+      demos: ['size']
+    },
+    {
+      id: 'disabled',
+      name: '禁用状态',
+      support: {
+        value: true
+      },
+      description:
+        '通过 disabled 设置按钮组是否禁用，数据项设置 disabled 属性可以禁用单个按钮，数据项设置 tip 属性增加按钮悬浮提示功能。',
+      cloud: {
+        value: true
+      },
+      apis: ['disabled', 'tip'],
+      demos: ['disabled']
+    },
+    {
+      id: 'plain',
+      name: '朴素按钮',
+      support: {
+        value: true
+      },
+      description: '通过 plain 设置是否为朴素按钮。',
+      cloud: {
+        value: true
+      },
+      apis: ['plain'],
+      demos: ['plain']
+    },
+    {
+      id: 'text-value-field',
+      name: '数据字段映射',
+      support: {
+        value: true
+      },
+      description: '若按钮组数据对象中的字段不是默认的 text 和 value，则可通过 text-field、value-field 属性进行映射。',
+      cloud: {
+        value: true
+      },
+      apis: ['text-field', 'value-field'],
+      demos: ['text-value-field']
+    },
+    {
+      id: 'show-more',
+      name: '显示更多按钮',
+      support: {
+        value: true
+      },
+      description: '通过 show-more 设置显示更多按钮，当按钮数量大于设置值时，将显示更多按钮。',
+      cloud: {
+        value: true
+      },
+      apis: ['show-more'],
+      demos: ['show-more']
+    },
+    {
+      id: 'slot-default',
+      name: '默认插槽',
+      support: {
+        value: true
+      },
+      description:
+        '使用默认插槽自定义按钮组，使用默认插槽后，button-group 的 data、text-field、value-field、value/v-model、size 属性对插槽中的按钮将不再生效。',
+      cloud: {
+        value: true
+      },
+      apis: ['slot-default'],
+      demos: ['slot-default']
+    },
+    {
+      id: 'slot-empty',
+      name: '空数据',
+      support: {
+        value: true
+      },
+      description: '当数据为空时，默认会显示"暂无数据"，通过 empty 插槽自定义内容。',
+      cloud: {
+        value: true
+      },
+      apis: ['slot-empty'],
+      demos: ['slot-empty']
+    },
+    {
+      id: 'button-group-multiple',
+      name: '多行按钮组',
+      support: {
+        value: true
+      },
+      description: '多行按钮组，当超出最大宽度后，换行显示。',
+      cloud: {
+        value: true
+      },
+      apis: [],
+      demos: ['button-group-multiple']
+    },
+    {
+      id: 'sup',
+      name: '选块角标',
+      support: {
+        value: true
+      },
+      description: '通过 data 的 sup 属性配置选块角标。',
+      cloud: {
+        value: true
+      },
+      apis: ['sup'],
+      demos: ['sup']
+    },
+    {
+      id: 'events',
+      name: '事件处理',
+      support: {
+        value: true
+      },
+      description: '当选中按钮发生改变时触发 change 事件。',
+      cloud: {
+        value: true
+      },
+      apis: ['change'],
+      demos: ['change-event']
+    }
   ]
 }

package/demos/pc/app/calendar/calendar-year-month-composition-api.vue

@@ -0,0 +1,7 @@
+<template>
+  <tiny-calendar :year="2000" :month="5" />
+</template>
+
+<script setup>
+import { TinyCalendar } from '@opentiny/vue'
+</script>

package/demos/pc/app/calendar/calendar-year-month.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('calendar#calendar-year-month')
+  const pcDemo = page.locator('.pc-demo')
+
+  // 验证初始化年月是否正确（2000年5月）
+  await expect(pcDemo.locator('.tiny-calendar__tool input').first()).toHaveValue('2000年')
+  await expect(pcDemo.locator('.tiny-calendar__tool input').nth(1)).toHaveValue('5 月')
+
+  // 验证年份视图下的月份显示
+  await pcDemo.locator('.tiny-calendar__tabs').getByText('年').click()
+  await expect(pcDemo.locator('.tiny-calendar__tool input').first()).toHaveValue('2000年')
+  await expect(pcDemo.getByRole('cell', { name: '5 月' }).locator('div').first()).toHaveClass(/selected/)
+})

package/demos/pc/app/calendar/calendar-year-month.vue

@@ -0,0 +1,13 @@
+<template>
+  <tiny-calendar :year="2000" :month="5" />
+</template>
+
+<script>
+import { TinyCalendar } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinyCalendar
+  }
+}
+</script>