@opentiny/vue-docs 3.16.2 → 3.17.0

package/demos/pc/app/statistic/statistic-style-composition-api.vue

@@ -2,7 +2,7 @@
   <div>
     <tiny-layout>
       <tiny-row :flex="true">
-        <tiny-col :span="6">
+        <tiny-col :span="8">
           <tiny-statistic
             :value="306526"
             :value-style="{ 'color': '#3ac295' }"
@@ -10,10 +10,10 @@
           >
           </tiny-statistic>
         </tiny-col>
-        <tiny-col :span="6">
+        <tiny-col :span="8">
           <tiny-statistic
             :value="306526.23"
-            :value-style="[{ 'color': '#eb1212', 'text-align': 'center', 'width': '200px' }]"
+            :value-style="[{ 'color': '#eb1212', 'text-align': 'center' }]"
             :title="{ position: 'bottom' }"
           >
             <template #title>
@@ -32,8 +32,9 @@ import { Statistic as TinyStatistic, Layout as TinyLayout, Row as TinyRow, Col a
 
 <style scoped>
 .title-content {
-  width: 200px;
+  width: 90px;
   text-align: center;
   color: #a9a9a9;
+  font-weight: 600;
 }
 </style>

package/demos/pc/app/statistic/statistic-style.spec.ts

@@ -3,5 +3,10 @@ import { test, expect } from '@playwright/test'
 test('样式用法', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('statistic#statistic-style')
-  await expect(page.getByText('Like:306,526').first()).toHaveClass(/tiny-statistic__slots/)
+  await page
+    .locator('div')
+    .filter({ hasText: /^进行中306,526$/ })
+    .first()
+  await page.getByText('306,526失败').click()
+  await expect(page.getByText(/^进行中306,526$/).first()).toHaveClass(/tiny-statistic/)
 })

package/demos/pc/app/statistic/statistic-style.vue

@@ -2,7 +2,7 @@
   <div>
     <tiny-layout>
       <tiny-row :flex="true">
-        <tiny-col :span="6">
+        <tiny-col :span="8">
           <tiny-statistic
             :value="306526"
             :value-style="{ 'color': '#3ac295' }"
@@ -10,10 +10,10 @@
           >
           </tiny-statistic>
         </tiny-col>
-        <tiny-col :span="6">
+        <tiny-col :span="8">
           <tiny-statistic
             :value="306526.23"
-            :value-style="[{ 'color': '#eb1212', 'text-align': 'center', 'width': '200px' }]"
+            :value-style="[{ 'color': '#eb1212', 'text-align': 'center' }]"
             :title="{ position: 'bottom' }"
           >
             <template #title>
@@ -41,8 +41,9 @@ export default {
 
 <style scoped>
 .title-content {
-  width: 200px;
+  width: 90px;
   text-align: center;
   color: #a9a9a9;
+  font-weight: 600;
 }
 </style>

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

@@ -1,5 +1,5 @@
 export default {
-  column: '2',
+  column: '1',
   owner: '',
   demos: [
     {

package/demos/pc/app/steps/advanced-steps-composition-api.vue

@@ -1,8 +1,10 @@
 <template>
   <div class="demo-steps">
     <tiny-steps :data="data" :active="advancedActive" @click="advancedClick"></tiny-steps>
+    <br /><br />
 
     <p>通过 <code>advanced</code> 属性启用高级向导功能:</p>
+    <br />
     <tiny-steps advanced :data="data" :active="advancedActive" @click="advancedClick"></tiny-steps>
   </div>
 </template>

package/demos/pc/app/steps/advanced-steps.vue

@@ -1,8 +1,10 @@
 <template>
   <div class="demo-steps">
     <tiny-steps :data="data" :active="advancedActive" @click="advancedClick"></tiny-steps>
+    <br /><br />
 
     <p>通过 <code>advanced</code> 属性启用高级向导功能:</p>
+    <br />
     <tiny-steps advanced :data="data" :active="advancedActive" @click="advancedClick"></tiny-steps>
   </div>
 </template>

package/demos/pc/app/steps/node-width-composition-api.vue

@@ -1,9 +1,11 @@
 <template>
   <div class="tiny-steps-demo-space">
     <p>设置节点宽度为200像素：</p>
-    <tiny-steps space="200" :data="stepsData" :active="active" @click="onClick"></tiny-steps>
     <br />
+    <tiny-steps space="200" :data="stepsData" :active="active" @click="onClick"></tiny-steps>
+    <br /><br />
     <p>宽度自适应：</p>
+    <br />
     <tiny-steps advanced flex :data="stepsData" :active="active" @click="onClick"></tiny-steps>
   </div>
 </template>
@@ -36,3 +38,9 @@ const onClick = (index, node) => {
   node.status = 'doing'
 }
 </script>
+
+<style scoped>
+.tiny-steps-demo-space p {
+  margin: 16px 0;
+}
+</style>

package/demos/pc/app/steps/node-width.vue

@@ -1,9 +1,11 @@
 <template>
   <div class="tiny-steps-demo-space">
     <p>设置节点宽度为200像素：</p>
-    <tiny-steps space="200" :data="stepsData" :active="active" @click="onClick"></tiny-steps>
     <br />
+    <tiny-steps space="200" :data="stepsData" :active="active" @click="onClick"></tiny-steps>
+    <br /><br />
     <p>宽度自适应：</p>
+    <br />
     <tiny-steps advanced flex :data="stepsData" :active="active" @click="onClick"></tiny-steps>
   </div>
 </template>
@@ -45,3 +47,9 @@ export default {
   }
 }
 </script>
+
+<style scoped>
+.tiny-steps-demo-space p {
+  margin: 16px 0;
+}
+</style>

package/demos/pc/app/steps/size-composition-api.vue

@@ -1,20 +1,33 @@
 <template>
   <div class="demo-steps">
     <h3>单链型步骤条：</h3>
+    <br /><br />
     <p>mini 尺寸</p>
+    <br />
     <tiny-steps vertical line size="mini" :data="data" :active="active" @click="normalClick"></tiny-steps>
+    <br /><br />
     <p>small 尺寸</p>
+    <br />
     <tiny-steps vertical line size="small" :data="data" :active="active" @click="normalClick"></tiny-steps>
+    <br /><br />
     <p>medium 尺寸</p>
+    <br />
     <tiny-steps vertical line size="medium" :data="data" :active="active" @click="normalClick"></tiny-steps>
+    <br /><br />
     <p>large 尺寸</p>
+    <br />
     <tiny-steps vertical line size="large" :data="data" :active="active" @click="normalClick"></tiny-steps>
     <br />
+    <br /><br />
 
     <h3 class="title">条形步骤条：</h3>
+    <br /><br />
     <p>medium 尺寸</p>
+    <br />
     <tiny-steps vertical advanced size="medium" :data="data" :active="active" @click="normalClick"></tiny-steps>
+    <br /><br />
     <p>large 尺寸</p>
+    <br />
     <tiny-steps vertical advanced size="large" :data="data" :active="active" @click="normalClick"></tiny-steps>
   </div>
 </template>
@@ -47,6 +60,7 @@ const normalClick = (index, node) => {
 .demo-steps h3 {
   font-size: 16px;
   font-weight: bold;
+  margin-bottom: 20px;
 }
 
 .demo-steps .title {
@@ -55,5 +69,7 @@ const normalClick = (index, node) => {
 
 .demo-steps p {
   text-indent: 20px;
+  margin-top: 16px;
+  margin-bottom: 16px;
 }
 </style>

package/demos/pc/app/steps/size.vue

@@ -1,19 +1,32 @@
 <template>
   <div class="demo-steps">
     <h3>单链型步骤条：</h3>
+    <br /><br />
     <p>mini 尺寸</p>
+    <br />
     <tiny-steps vertical line size="mini" :data="data" :active="active" @click="normalClick"></tiny-steps>
+    <br /><br />
     <p>small 尺寸</p>
+    <br />
     <tiny-steps vertical line size="small" :data="data" :active="active" @click="normalClick"></tiny-steps>
+    <br /><br />
     <p>medium 尺寸</p>
+    <br />
     <tiny-steps vertical line size="medium" :data="data" :active="active" @click="normalClick"></tiny-steps>
+    <br /><br />
     <p>large 尺寸</p>
+    <br />
     <tiny-steps vertical line size="large" :data="data" :active="active" @click="normalClick"></tiny-steps>
+    <br /><br />
 
     <h3 class="title">条形步骤条：</h3>
+    <br /><br />
     <p>medium 尺寸</p>
+    <br />
     <tiny-steps advanced size="medium" :data="data" :active="active" @click="normalClick"></tiny-steps>
+    <br /><br />
     <p>large 尺寸</p>
+    <br />
     <tiny-steps advanced size="large" :data="data" :active="active" @click="normalClick"></tiny-steps>
   </div>
 </template>
@@ -55,6 +68,7 @@ export default {
 .demo-steps h3 {
   font-size: 16px;
   font-weight: bold;
+  margin-bottom: 20px;
 }
 
 .demo-steps .title {
@@ -63,5 +77,7 @@ export default {
 
 .demo-steps p {
   text-indent: 20px;
+  margin-top: 16px;
+  margin-bottom: 16px;
 }
 </style>

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

@@ -18,6 +18,6 @@ const activeName = ref('second')
 
 <style>
 .pc-demo .tiny-tabs__content {
-  line-height: 1.5;
+  line-height: 2;
 }
 </style>

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

@@ -27,6 +27,6 @@ export default {
 
 <style>
 .pc-demo .tiny-tabs__content {
-  line-height: 1.5;
+  line-height: 2;
 }
 </style>

package/demos/pc/app/tabs/custom-tab-title-composition-api.vue

@@ -5,7 +5,7 @@
       <tiny-tab-item name="first">
         <template #title>
           <div class="slot-content">
-            <tiny-icon-calendar style="vertical-align: top" class="tiny-svg-size"></tiny-icon-calendar>
+            <tiny-icon-calendar class="demp-tabs-icon"></tiny-icon-calendar>
             <span class="slot-message">表单组件</span>
           </div>
         </template>
@@ -14,7 +14,7 @@
       <tiny-tab-item name="second">
         <template #title>
           <div class="slot-content">
-            <tiny-icon-replies style="fill: red; vertical-align: top" class="tiny-svg-size"></tiny-icon-replies>
+            <tiny-icon-replies class="demp-tabs-icon icon-color"></tiny-icon-replies>
             <span class="slot-message">数据组件</span>
           </div>
         </template>
@@ -50,4 +50,11 @@ const handleClick = () => {
 .slot-message {
   display: inline-block;
 }
+.demp-tabs-icon {
+  vertical-align: top;
+  margin-right: 4px;
+}
+.icon-color {
+  fill: red;
+}
 </style>

package/demos/pc/app/tabs/custom-tab-title.vue

@@ -5,7 +5,7 @@
       <tiny-tab-item name="first">
         <template #title>
           <div class="slot-content">
-            <icon-calendar style="vertical-align: top" class="tiny-svg-size"></icon-calendar>
+            <icon-calendar class="demp-tabs-icon"></icon-calendar>
             <span class="slot-message">表单组件</span>
           </div>
         </template>
@@ -14,7 +14,7 @@
       <tiny-tab-item name="second">
         <template #title>
           <div class="slot-content">
-            <icon-replies style="fill: red; vertical-align: top" class="tiny-svg-size"></icon-replies>
+            <icon-replies class="demp-tabs-icon icon-color"></icon-replies>
             <span class="slot-message">数据组件</span>
           </div>
         </template>
@@ -61,4 +61,11 @@ export default {
 .slot-message {
   display: inline-block;
 }
+.demp-tabs-icon {
+  vertical-align: top;
+  margin-right: 4px;
+}
+.icon-color {
+  fill: red;
+}
 </style>

package/demos/pc/app/tag/color-border-composition-api.vue

@@ -0,0 +1,35 @@
+<template>
+  <div class="tiny-tag-demo">
+    <div class="mb5">hit：</div>
+    <tiny-tag hit>标签一</tiny-tag>
+    <tiny-tag type="success" hit>标签二</tiny-tag>
+    <tiny-tag type="info" hit>标签三</tiny-tag>
+    <tiny-tag type="warning" hit>标签四</tiny-tag>
+    <tiny-tag type="danger" hit>标签五</tiny-tag>
+    <div class="mb5">color 预设值：</div>
+    <tiny-tag color="red">red标签</tiny-tag>
+    <tiny-tag color="orange">orange标签</tiny-tag>
+    <tiny-tag color="green">green标签</tiny-tag>
+    <tiny-tag color="blue">blue标签</tiny-tag>
+    <tiny-tag color="purple">purple标签</tiny-tag>
+    <tiny-tag color="brown">brown标签</tiny-tag>
+    <tiny-tag color="grey">grey标签</tiny-tag>
+    <div class="mb5">自定义 color 值：</div>
+    <tiny-tag color="rgba(82,196,26,0.8)" hit>自定义背景色</tiny-tag>
+    <tiny-tag :color="['linear-gradient(to right, #e8cda4, #f8eddb)', '#8f3c00']" hit>自定义背景色和文本色</tiny-tag>
+  </div>
+</template>
+
+<script setup lang="jsx">
+import { Tag as TinyTag } from '@opentiny/vue'
+</script>
+
+<style scoped>
+.tiny-tag {
+  border-radius: 0px 8px 0px 8px;
+}
+.tiny-tag-demo > * {
+  margin-bottom: 8px;
+  margin-top: 8px;
+}
+</style>

package/demos/pc/app/tag/color-border.spec.ts

@@ -0,0 +1,16 @@
+import { test, expect } from '@playwright/test'
+
+test('边框和自定义背景色', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).not.toBeNull())
+  await page.goto('tag#color3')
+
+  const tags = page.locator('.all-demos-container').locator('.tiny-tag')
+  const first = tags.getByText('标签一')
+  const red = tags.getByText('red标签')
+  const custom = tags.getByText('自定义背景色', { exact: true })
+
+  await expect(first).toHaveClass(/is-hit/)
+  await expect(red).toHaveClass(/tiny-tag--red/)
+  await expect(custom).toHaveCSS('background-color', 'rgba(82, 196, 26, 0.8)')
+  await expect(custom).toHaveCSS('border-color', 'rgb(87, 93, 108)')
+})

package/demos/pc/app/tag/color-border.vue

@@ -0,0 +1,41 @@
+<template>
+  <div class="tiny-tag-demo">
+    <div class="mb5">hit：</div>
+    <tiny-tag hit>标签一</tiny-tag>
+    <tiny-tag type="success" hit>标签二</tiny-tag>
+    <tiny-tag type="info" hit>标签三</tiny-tag>
+    <tiny-tag type="warning" hit>标签四</tiny-tag>
+    <tiny-tag type="danger" hit>标签五</tiny-tag>
+    <div class="mb5">color 预设值：</div>
+    <tiny-tag color="red">red标签</tiny-tag>
+    <tiny-tag color="orange">orange标签</tiny-tag>
+    <tiny-tag color="green">green标签</tiny-tag>
+    <tiny-tag color="blue">blue标签</tiny-tag>
+    <tiny-tag color="purple">purple标签</tiny-tag>
+    <tiny-tag color="brown">brown标签</tiny-tag>
+    <tiny-tag color="grey">grey标签</tiny-tag>
+    <div class="mb5">自定义 color 值：</div>
+    <tiny-tag color="rgba(82,196,26,0.8)" hit>自定义背景色</tiny-tag>
+    <tiny-tag :color="['linear-gradient(to right, #e8cda4, #f8eddb)', '#8f3c00']" hit>自定义背景色和文本色</tiny-tag>
+  </div>
+</template>
+
+<script lang="jsx">
+import { Tag } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinyTag: Tag
+  }
+}
+</script>
+
+<style scoped>
+.tiny-tag {
+  border-radius: 0px 8px 0px 8px;
+}
+.tiny-tag-demo > * {
+  margin-bottom: 8px;
+  margin-top: 8px;
+}
+</style>

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

@@ -27,7 +27,7 @@ export default {
       codeFiles: ['content.vue']
     },
     {
-      demoId: 'color3',
+      demoId: 'color-border',
       name: {
         'zh-CN': '颜色与边框',
         'en-US': 'Color and border'
@@ -36,7 +36,7 @@ export default {
         'zh-CN': `通过 <code>hit</code> 设置边框；<code>color</code> 设置颜色，可使用预设值，也可自定义颜色值；当自定义颜色值为字符串则只能设置背景色；若为数组则第一个值为背景色，第二个为文本色。`,
         'en-US': `Use <code>hit</code> to set the border. <code>color</code> Set the color. You can use the preset value or customize the color value. If the value of Custom Color is a character string, only the background color can be set. If it is an array, the first value is the background color and the second is the text color.`
       },
-      codeFiles: ['color3.vue']
+      codeFiles: ['color-border.vue']
     },
     {
       demoId: 'effect',

package/demos/pc/app/time-line/custom-field-composition-api.vue

@@ -2,11 +2,12 @@
   <tiny-time-line
     :data="data"
     :active="active"
-    @click="click"
+    class="demo-timeline-custom"
     name-field="content"
     time-field="timestamp"
     auto-color-field="icon"
     vertical
+    @click="click"
   ></tiny-time-line>
 </template>
 
@@ -36,3 +37,9 @@ function click(index) {
   active.value = index
 }
 </script>
+
+<style>
+.demo-timeline-custom .tiny-timeline-item__content {
+  line-height: 28px;
+}
+</style>

package/demos/pc/app/time-line/custom-field.vue

@@ -2,11 +2,12 @@
   <tiny-time-line
     :data="data"
     :active="active"
-    @click="click"
+    class="demo-timeline-custom"
     name-field="content"
     time-field="timestamp"
     auto-color-field="icon"
     vertical
+    @click="click"
   ></tiny-time-line>
 </template>
 
@@ -45,3 +46,9 @@ export default {
   }
 }
 </script>
+
+<style>
+.demo-timeline-custom .tiny-timeline-item__content {
+  line-height: 28px;
+}
+</style>

package/demos/pc/app/time-line/custom-horizontal-timeline-composition-api.vue

@@ -34,6 +34,7 @@ function click(index, node) {
 <style scoped>
 .custom-top {
   text-align: center;
+  margin-bottom: 8px;
 }
 
 .custom-bottom {

package/demos/pc/app/time-line/custom-horizontal-timeline.vue

@@ -43,6 +43,7 @@ export default {
 <style scoped>
 .custom-top {
   text-align: center;
+  margin-bottom: 8px;
 }
 
 .custom-bottom {

package/demos/pc/app/time-line/custom-vertical-timeline-composition-api.vue

@@ -33,10 +33,12 @@ function click(index) {
 .custom-left {
   padding-right: 16px;
   text-align: right;
+  line-height: 28px;
 }
 
 .custom-right {
   margin-left: 15px;
   margin-bottom: 50px;
+  line-height: 28px;
 }
 </style>

package/demos/pc/app/time-line/custom-vertical-timeline.vue

@@ -42,10 +42,12 @@ export default {
 .custom-left {
   padding-right: 16px;
   text-align: right;
+  line-height: 28px;
 }
 
 .custom-right {
   margin-left: 15px;
   margin-bottom: 50px;
+  line-height: 28px;
 }
 </style>

package/demos/pc/app/time-line/set-node-width-composition-api.vue

@@ -49,5 +49,7 @@ code {
 .timeline-box {
   width: 800px;
   height: 100px;
+  margin-top: 16px;
+  margin-bottom: 10px;
 }
 </style>

package/demos/pc/app/time-line/set-node-width.vue

@@ -56,5 +56,7 @@ code {
 .timeline-box {
   width: 800px;
   height: 100px;
+  margin-top: 16px;
+  margin-bottom: 10px;
 }
 </style>

package/demos/pc/app/time-line/show-divider.spec.ts

@@ -5,5 +5,5 @@ test('底部分割线', async ({ page }) => {
   await page.goto('time-line#show-divider')
 
   const steps = page.locator('.pc-demo .tiny-steps')
-  await expect(steps.locator('.tiny-steps__bottom-divider')).toBeVisible()
+  await expect(steps.locator('.show-divider')).toBeVisible()
 })

package/demos/pc/app/time-line/slot-description-composition-api.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="demo-timeline">
     <tiny-time-line :active="active" text-position="right" show-divider="true" space="220px">
-      <tiny-timeline-item v-for="(item, i) in data" :key="i" :node="item" @click="normalClick(i)">
+      <tiny-timeline-item v-for="(item, i) in data" :key="i" :node="item" :nodeIndex="i" @click="normalClick(i)">
         <template #description>
           <div class="my-description">
             {{ item.description }}

package/demos/pc/app/time-line/slot-description.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="demo-timeline">
     <tiny-time-line :active="active" text-position="right" show-divider="true" space="220px">
-      <tiny-timeline-item v-for="(item, i) in data" :key="i" :node="item" @click="normalClick(i)">
+      <tiny-timeline-item v-for="(item, i) in data" :key="i" :node="item" :nodeIndex="i" @click="normalClick(i)">
         <template #description>
           <div class="my-description">
             {{ item.description }}

package/demos/pc/app/time-line/status-composition-api.vue

@@ -5,13 +5,15 @@
       <code>autoColor</code>
       可选状态值：<code>success</code>：成功；<code>warning</code>：警告；<code>error</code>：失败。
     </p>
-    <tiny-time-line :data="data1"></tiny-time-line>
     <br />
+    <tiny-time-line :data="data1"></tiny-time-line>
+    <br /><br />
 
-    <p>
+    <p class="demo-line">
       (2) 当<code>shape</code> = 'dot' 时，可以通过 <code>type</code> 属性指定节点类型，可选值有
       <code>primary</code>|<code>success</code> |<code>warning</code>|<code>danger</code>|<code>info</code>
     </p>
+    <br />
     <tiny-time-line :data="data2" vertical shape="dot"></tiny-time-line>
   </div>
 </template>
@@ -19,12 +21,14 @@
 <script setup lang="ts">
 import { reactive } from 'vue'
 import { TimeLine as TinyTimeLine } from '@opentiny/vue'
+import { IconTime } from '@opentiny/vue-icon'
 
 const data1 = reactive([
   { name: '默认状态' },
   { name: '成功状态', autoColor: 'success' },
   { name: '警告状态', autoColor: 'warning' },
   { name: '异常状态', error: true }, // 也可以使用 autoColor: 'error'
+  { name: '定义图标', autoColor: IconTime() }, // 自定义图标
   { name: '禁用状态', disabled: true }
 ])
 const data2 = reactive([
@@ -44,4 +48,7 @@ code {
   border-radius: 3px;
   background-color: rgba(27, 31, 35, 0.05);
 }
+.demo-line {
+  line-height: 24px;
+}
 </style>

package/demos/pc/app/time-line/status.spec.ts

@@ -29,9 +29,9 @@ test.describe('节点状态', () => {
     await expect(timelineItems.nth(3).locator('.icon .icon-error')).toHaveCSS('fill', 'rgb(222, 80, 78)')
 
     // 禁用状态
-    await expect(timelineItems.nth(4)).toHaveClass(/process-disabled/)
-    await expect(timelineItems.nth(4).locator('.icon')).toHaveCSS('background-color', 'rgb(245, 245, 246)')
-    await expect(timelineItems.nth(4).locator('.icon .number')).toHaveCSS('color', 'rgb(173, 176, 184)')
+    await expect(timelineItems.nth(5)).toHaveClass(/process-disabled/)
+    await expect(timelineItems.nth(5).locator('.icon')).toHaveCSS('background-color', 'rgb(245, 245, 246)')
+    await expect(timelineItems.nth(5).locator('.icon .number')).toHaveCSS('color', 'rgb(173, 176, 184)')
   })
 
   test('type属性设置节点状态', async ({ page }) => {