@opentinyvue/vue-docs 3.22.0 → 3.22.2

package/demos/pc/app/select/slot-empty.vue

@@ -29,15 +29,14 @@ export default {
 .tiny-select {
   width: 280px;
 }
+
 .custom-empty {
-  padding: 87px 0;
   text-align: center;
 
   p {
-    font-size: 12px;
-    color: #595959;
-    line-height: 1.5;
+    color: var(--tv-color-text-secondary);
   }
+
   .tiny-button {
     margin-top: 8px;
   }

package/demos/pc/app/select/{slot-footer-composition-api.vue → slot-header-footer-composition-api.vue}

@@ -1,6 +1,11 @@
 <template>
   <tiny-select v-model="value">
     <tiny-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </tiny-option>
+    <template #dropdown>
+      <div class="select-header">
+        <tiny-button type="success" round> 顶部插槽 </tiny-button>
+      </div>
+    </template>
     <template #footer>
       <div class="select-footer">
         <tiny-button type="success" round> 底部插槽 </tiny-button>
@@ -29,7 +34,12 @@ const value = ref('')
 }
 .select-footer {
   text-align: center;
-  background-color: #cff3e8;
+  background-color: rgb(207, 243, 232, 0.3);
+  padding: 8px;
+}
+.select-header {
+  text-align: center;
+  background-color: rgb(207, 243, 232, 0.3);
   padding: 8px;
 }
 </style>

package/demos/pc/app/select/{slot-footer.spec.ts → slot-header-footer.spec.ts}

@@ -2,9 +2,9 @@ import { expect, test } from '@playwright/test'
 
 test('底部插槽', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
-  await page.goto('select#slot-footer')
+  await page.goto('select#slot-header-footer')
 
-  const wrap = page.locator('#slot-footer')
+  const wrap = page.locator('#slot-header-footer')
   const select = wrap.locator('.tiny-select')
   const input = select.locator('.tiny-input__inner')
   const dropdown = page.locator('body > .tiny-select-dropdown')
@@ -12,5 +12,6 @@ test('底部插槽', async ({ page }) => {
 
   await input.click()
   await expect((await option.all()).length).toEqual(5)
+  await expect(page.locator('.select-header')).toHaveText('顶部插槽')
   await expect(page.locator('.select-footer')).toHaveText('底部插槽')
 })

package/demos/pc/app/select/{slot-footer.vue → slot-header-footer.vue}

@@ -1,6 +1,11 @@
 <template>
   <tiny-select v-model="value">
     <tiny-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </tiny-option>
+    <template #dropdown>
+      <div class="select-header">
+        <tiny-button type="success" round> 顶部插槽 </tiny-button>
+      </div>
+    </template>
     <template #footer>
       <div class="select-footer">
         <tiny-button type="success" round> 底部插槽 </tiny-button>
@@ -33,13 +38,18 @@ export default {
 }
 </script>
 
-<style lang="less" scoped>
+<style scoped>
 .tiny-select {
   width: 280px;
 }
 .select-footer {
   text-align: center;
-  background-color: #cff3e8;
+  background-color: rgb(207, 243, 232, 0.3);
+  padding: 8px;
+}
+.select-header {
+  text-align: center;
+  background-color: rgb(207, 243, 232, 0.3);
   padding: 8px;
 }
 </style>

package/demos/pc/app/select/slot-reference-composition-api.vue

@@ -23,3 +23,11 @@ const options = ref([
 ])
 const value = ref('')
 </script>
+
+<style scoped>
+.custom-reference {
+  font-size: 24px;
+  fill: #8b949e;
+  cursor: pointer;
+}
+</style>

package/demos/pc/app/select/slot-reference.vue

@@ -31,3 +31,11 @@ export default {
   }
 }
 </script>
+
+<style scoped>
+.custom-reference {
+  font-size: 24px;
+  fill: #8b949e;
+  cursor: pointer;
+}
+</style>

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

@@ -1,6 +1,8 @@
 export default {
   column: '2',
   owner: '',
+  show: true,
+  cloud: true,
   demos: [
     {
       demoId: 'basic-usage',
@@ -566,17 +568,18 @@ export default {
       codeFiles: ['slot-default.vue']
     },
     {
-      demoId: 'slot-footer',
+      demoId: 'slot-header-footer',
       name: {
-        'zh-CN': '底部插槽',
-        'en-US': 'Footer slot'
+        'zh-CN': '下拉框顶部和底部插槽',
+        'en-US': 'Dropdown top and bottom slots'
       },
       desc: {
-        'zh-CN': '<p>通过 <code>footer</code> 插槽自定义下拉弹框底部的 HTML 模板。</p>\n',
+        'zh-CN':
+          '<p>通过 <code>footer</code> 插槽自定义下拉弹框底部的 HTML 模板。通过 <code>dropdown</code> 插槽自定义下拉弹框顶部的 HTML 模板。</p>\n',
         'en-US':
-          '<p>Customize the HTML template at the bottom of the dropdown pop-up box through the <code>footer</code> slot.</p>'
+          '<p>Customize the HTML template at the bottom of the dropdown pop-up box through the <code>footer</code> slot. Customize the HTML template at the top of the dropdown pop-up box through the <code>dropdown</code> slot.</p>'
       },
-      codeFiles: ['slot-footer.vue']
+      codeFiles: ['slot-header-footer.vue']
     },
     {
       demoId: 'slot-empty',
@@ -660,5 +663,59 @@ export default {
       },
       codeFiles: ['events.vue']
     }
+  ],
+  features: [
+    {
+      id: 'basic',
+      name: '基本用法',
+      support: {
+        value: true
+      },
+      description: '通过 v-model 绑定变量，placeholder 设置占位符文本。',
+      cloud: {
+        value: true
+      },
+      apis: ['v-model', 'placeholder'],
+      demos: ['basic-usage']
+    },
+    {
+      id: 'options',
+      name: '选项配置',
+      support: {
+        value: true
+      },
+      description: '通过 options 属性配置选项数据，支持禁用、分组等配置。',
+      cloud: {
+        value: true
+      },
+      apis: ['options'],
+      demos: ['options']
+    },
+    {
+      id: 'multiple',
+      name: '多选',
+      support: {
+        value: true
+      },
+      description: '通过 multiple 属性启用多选模式，可设置最大选择数量。',
+      cloud: {
+        value: true
+      },
+      apis: ['multiple', 'max-collapse-tags'],
+      demos: ['multiple']
+    },
+    {
+      id: 'filterable',
+      name: '可搜索',
+      support: {
+        value: true
+      },
+      description: '通过 filterable 属性启用搜索功能，可自定义搜索方法。',
+      cloud: {
+        value: true
+      },
+      apis: ['filterable', 'filter-method'],
+      demos: ['filterable']
+    }
   ]
 }

package/demos/pc/app/skeleton/animation.spec.ts

@@ -3,6 +3,7 @@ import { expect, test } from '@playwright/test'
 test('动画效果', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('skeleton#animation')
+  const demo = page.locator('#animation')
 
   const square = page.locator('.tiny-skeleton-item--square')
   const image = page.locator('.tiny-skeleton-item--image')
@@ -11,7 +12,7 @@ test('动画效果', async ({ page }) => {
   await expect(square).toHaveClass(/tiny-skeleton-item--active/)
   await expect(image).toHaveClass(/tiny-skeleton-item--active/)
 
-  const button = page.locator('.tiny-button')
+  const button = demo.locator('.tiny-button')
   await button.click()
   await page.waitForTimeout(500)
   await expect(square).toHaveClass(/tiny-skeleton-item/)

package/demos/pc/app/skeleton/loading-completed.spec.ts

@@ -3,9 +3,10 @@ import { expect, test } from '@playwright/test'
 test('加载完成', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('skeleton#loading-completed')
+  const demo = page.locator('#loading-completed')
 
   const square = page.locator('.tiny-skeleton-item--square')
-  const button = page.locator('.tiny-button')
+  const button = demo.locator('.tiny-button')
 
   await button.click()
   await page.waitForTimeout(500)

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

@@ -1,6 +1,8 @@
 export default {
   column: '2',
   owner: '',
+  show: true,
+  cloud: true,
   demos: [
     {
       demoId: 'base',
@@ -118,5 +120,59 @@ export default {
       },
       codeFiles: ['fine-grained-mode.vue']
     }
+  ],
+  features: [
+    {
+      id: 'basic',
+      name: '基本用法',
+      support: {
+        value: true
+      },
+      description: '基础的骨架效果。',
+      cloud: {
+        value: true
+      },
+      apis: [],
+      demos: ['base']
+    },
+    {
+      id: 'size',
+      name: '尺寸',
+      support: {
+        value: true
+      },
+      description: '通过 size 属性可以控制骨架屏的尺寸。',
+      cloud: {
+        value: true
+      },
+      apis: ['size'],
+      demos: ['size']
+    },
+    {
+      id: 'avatar',
+      name: '头像模式',
+      support: {
+        value: true
+      },
+      description: '通过 avatar 属性控制骨架段落左侧出现头像占位。',
+      cloud: {
+        value: true
+      },
+      apis: ['avatar'],
+      demos: ['complex-demo']
+    },
+    {
+      id: 'rows',
+      name: '段落行数',
+      support: {
+        value: true
+      },
+      description: '段落默认渲染 4 行，通过 rows 属性控制段落行数。',
+      cloud: {
+        value: true
+      },
+      apis: ['rows'],
+      demos: ['custom-rows']
+    }
   ]
 }

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

@@ -1,6 +1,8 @@
 export default {
   column: '2',
   owner: '',
+  show: true,
+  cloud: true,
   demos: [
     {
       demoId: 'basic-usage',
@@ -165,5 +167,59 @@ export default {
       },
       codeFiles: ['slider-event.vue']
     }
+  ],
+  features: [
+    {
+      id: 'basic',
+      name: '基本用法',
+      support: {
+        value: true
+      },
+      description: '基础的滑块效果。',
+      cloud: {
+        value: true
+      },
+      apis: [],
+      demos: ['basic-usage']
+    },
+    {
+      id: 'vertical',
+      name: '竖向模式',
+      support: {
+        value: true
+      },
+      description: '通过设置 vertical 属性来展示滑块竖向模式。',
+      cloud: {
+        value: true
+      },
+      apis: ['vertical'],
+      demos: ['vertical-mode']
+    },
+    {
+      id: 'marks',
+      name: '标记',
+      support: {
+        value: true
+      },
+      description: '使用 marks 属性，给滑杆的值添加标记。',
+      cloud: {
+        value: true
+      },
+      apis: ['marks'],
+      demos: ['marks']
+    },
+    {
+      id: 'range',
+      name: '范围选择',
+      support: {
+        value: true
+      },
+      description: '通过 v-model 为数组设定初始范围选择。',
+      cloud: {
+        value: true
+      },
+      apis: ['v-model'],
+      demos: ['range-select']
+    }
   ]
 }

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

@@ -1,6 +1,8 @@
 export default {
   column: '2',
   owner: '',
+  show: true,
+  cloud: false,
   demos: [
     {
       demoId: 'basic-usage',
@@ -201,5 +203,59 @@ export default {
       },
       codeFiles: ['three-areas.vue']
     }
+  ],
+  features: [
+    {
+      id: 'basic',
+      name: '基本用法',
+      support: {
+        value: true
+      },
+      description: '支持左右或上下分割面板，可设置最小高度和宽度。',
+      cloud: {
+        value: false
+      },
+      apis: ['left-top-min', 'right-bottom-min'],
+      demos: ['basic-usage', 'split-threshold']
+    },
+    {
+      id: 'mode',
+      name: '分割方式',
+      support: {
+        value: true
+      },
+      description: '支持横向和纵向两种分割方式，默认为横向。',
+      cloud: {
+        value: false
+      },
+      apis: ['mode'],
+      demos: ['split-mode']
+    },
+    {
+      id: 'event',
+      name: '事件',
+      support: {
+        value: true
+      },
+      description: '支持移动开始、移动中、移动结束等事件。',
+      cloud: {
+        value: false
+      },
+      apis: ['movestart', 'moving', 'moveend'],
+      demos: ['movestart-event', 'moving-event', 'moveend-event']
+    },
+    {
+      id: 'custom',
+      name: '自定义',
+      support: {
+        value: true
+      },
+      description: '支持自定义左右面板、拖拽区域和折叠按钮。',
+      cloud: {
+        value: false
+      },
+      apis: ['slots'],
+      demos: ['left-right-slot', 'trigger-slot', 'trigger-simple']
+    }
   ]
 }

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

@@ -1,6 +1,8 @@
 export default {
   column: '1',
   owner: '',
+  show: true,
+  cloud: false,
   demos: [
     {
       demoId: 'basic-usage',
@@ -50,5 +52,59 @@ export default {
       },
       codeFiles: ['statistic-style.vue']
     }
+  ],
+  features: [
+    {
+      id: 'basic',
+      name: '基本用法',
+      support: {
+        value: true
+      },
+      description: '通过 value 设置数字内容，precision 设置数字精度值。',
+      cloud: {
+        value: false
+      },
+      apis: ['value', 'precision'],
+      demos: ['basic-usage']
+    },
+    {
+      id: 'prefix-suffix',
+      name: '前后缀',
+      support: {
+        value: true
+      },
+      description: 'prefix 设置前缀，suffix 设置后缀。',
+      cloud: {
+        value: false
+      },
+      apis: ['prefix', 'suffix'],
+      demos: ['prefix-suffix-slot']
+    },
+    {
+      id: 'title',
+      name: '标题',
+      support: {
+        value: true
+      },
+      description: '通过 title 设置标题。',
+      cloud: {
+        value: false
+      },
+      apis: ['title'],
+      demos: ['statistic-slot']
+    },
+    {
+      id: 'style',
+      name: '样式',
+      support: {
+        value: true
+      },
+      description: '通过 value-style 设置数字样式。',
+      cloud: {
+        value: false
+      },
+      apis: ['value-style'],
+      demos: ['statistic-style']
+    }
   ]
 }

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

@@ -1,6 +1,8 @@
 export default {
   column: '1',
   owner: '',
+  show: true,
+  cloud: true,
   demos: [
     {
       demoId: 'line-horizontal',
@@ -157,5 +159,60 @@ export default {
       },
       codeFiles: ['click.vue']
     }
+  ],
+  features: [
+    {
+      id: 'line',
+      name: '单链型',
+      support: {
+        value: true
+      },
+      description: '通过添加 line 用作横向单链型步骤条，visible-num 控制信息可见的节点数。',
+      cloud: {
+        value: true
+      },
+      apis: ['line', 'visible-num'],
+      demos: ['line-horizontal']
+    },
+    {
+      id: 'vertical',
+      name: '垂直布局',
+      support: {
+        value: true
+      },
+      description: '使用 line 与 vertical 设置为条形步骤条。',
+      cloud: {
+        value: true
+      },
+      apis: ['vertical'],
+      demos: ['line-vertical']
+    },
+    {
+      id: 'dot',
+      name: '点状型',
+      support: {
+        value: true
+      },
+      description: '使用 dot 与 vertical 设置为垂直点状形。',
+      cloud: {
+        value: true
+      },
+      apis: ['dot'],
+      demos: ['line-dot']
+    },
+    {
+      id: 'size',
+      name: '尺寸',
+      support: {
+        value: true
+      },
+      description:
+        '步骤条两种模式支持 size 设置尺寸：line 单链型模式支持 mini、small、medium、large 4 种尺寸，advanced 高级向导模式支持 medium、large 2 种尺寸。',
+      cloud: {
+        value: true
+      },
+      apis: ['size'],
+      demos: ['size']
+    }
   ]
 }

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

@@ -1,6 +1,8 @@
 export default {
   column: '2',
   owner: '',
+  show: true,
+  cloud: false,
   meta: {
     stable: '3.19.0'
   },
@@ -74,5 +76,60 @@ export default {
       },
       codeFiles: ['events.vue']
     }
+  ],
+  features: [
+    {
+      id: 'basic',
+      name: '基本用法',
+      support: {
+        value: true
+      },
+      description:
+        '将需要粘性布局的标签或者组件放入 sticky 组件的默认插槽中，则组件滚出屏幕范围时，始终会固定在屏幕顶部。',
+      cloud: {
+        value: false
+      },
+      apis: [],
+      demos: ['basic-usage']
+    },
+    {
+      id: 'offset',
+      name: '偏移距离',
+      support: {
+        value: true
+      },
+      description: '通过设置 offset 属性来改变吸顶或吸底距离，默认值为 0。',
+      cloud: {
+        value: false
+      },
+      apis: ['offset'],
+      demos: ['offset']
+    },
+    {
+      id: 'position',
+      name: '固定位置',
+      support: {
+        value: true
+      },
+      description: '通过设置 position 属性来改变固定位置，可选值有 top 和 bottom，默认值为 top。',
+      cloud: {
+        value: false
+      },
+      apis: ['position'],
+      demos: ['position']
+    },
+    {
+      id: 'target',
+      name: '目标容器',
+      support: {
+        value: true
+      },
+      description: '通过 target 属性可以指定组件的容器，页面滚动时，组件会始终保持在容器范围内。',
+      cloud: {
+        value: false
+      },
+      apis: ['target'],
+      demos: ['target']
+    }
   ]
 }