@opentiny/vue-docs 2.2.23 → 3.16.0

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

@@ -1,20 +1,24 @@
 <template>
   <div>
     <tiny-layout>
-      <tiny-row :flex="true" class="row-bg">
+      <tiny-row :flex="true">
         <tiny-col :span="6">
-          <tiny-statistic :value="num" :value-style="{ color: '#b12220' }" :precision="0" title="点赞数量">
-            <template #prefix> Like:</template>
+          <tiny-statistic
+            :value="306526"
+            :value-style="{ 'color': '#3ac295' }"
+            :title="{ value: '进行中', position: 'top' }"
+          >
           </tiny-statistic>
         </tiny-col>
         <tiny-col :span="6">
-          <tiny-statistic :value="num" :value-style="{ 'color': '#3ac295' }" :precision="0" title="点赞数量">
-            <template #prefix> Like:</template>
-          </tiny-statistic>
-        </tiny-col>
-        <tiny-col :span="6">
-          <tiny-statistic :value="num" :value-style="[{ 'color': '#e37d29' }]" :precision="0" title="点赞数量">
-            <template #prefix> Like:</template>
+          <tiny-statistic
+            :value="306526.23"
+            :value-style="[{ 'color': '#eb1212', 'text-align': 'center', 'width': '200px' }]"
+            :title="{ position: 'bottom' }"
+          >
+            <template #title>
+              <div class="title-content">失败</div>
+            </template>
           </tiny-statistic>
         </tiny-col>
       </tiny-row>
@@ -31,11 +35,14 @@ export default {
     TinyLayout: Layout,
     TinyRow: Row,
     TinyCol: Col
-  },
-  data() {
-    return {
-      num: 306526.23
-    }
   }
 }
 </script>
+
+<style scoped>
+.title-content {
+  width: 200px;
+  text-align: center;
+  color: #a9a9a9;
+}
+</style>

package/demos/pc/app/statistic/webdoc/statistic.cn.md

@@ -4,4 +4,4 @@ title: Statistic 统计组件
 
 # Statistic 统计组件
 
-显示统计。
+显示统计数据。

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

@@ -9,31 +9,39 @@ export default {
         'en-US': 'Basic Usage'
       },
       desc: {
-        'zh-CN':
-          '通过<code>value</code>设置数字内容，<code>precision</code>设置数字精度值，<code>title</code>设置数字内容标题，<code>prefix</code>设置数字内容前置插槽，<code>suffix</code>设置数字内容后置插槽。',
-        'en-US':
-          'Set digital content through<code>value</code>,<code>precision</code>set digital precision value,<code>title</code>set digital content title,<code>prefix</code>set digital content front slot, and<code>suffix</code>set digital content rear slot.'
+        'zh-CN': '通过<code>value</code>设置数字内容，<code>precision</code>设置数字精度值。',
+        'en-US': 'Set digital content through<code>value</code>,<code>precision</code>set digital precision value.'
       },
       codeFiles: ['basic-usage.vue']
     },
+    {
+      demoId: 'prefix-suffix-slot',
+      name: {
+        'zh-CN': '前后缀',
+        'en-US': 'Usage of Prefix and Suffix'
+      },
+      desc: {
+        'zh-CN': '<code>prefix</code>设置前缀，<code>suffix</code>设置后缀。',
+        'en-US': 'Set the prefix through<code>prefix</code>, and set the number suffix through<code>suffix</code>.'
+      },
+      codeFiles: ['prefix-suffix-slot.vue']
+    },
     {
       demoId: 'statistic-slot',
       name: {
-        'zh-CN': '插槽用法',
-        'en-US': 'Slot Usage'
+        'zh-CN': '标题',
+        'en-US': 'Title Usage'
       },
       desc: {
-        'zh-CN':
-          '通过<code>title</code>设置标题插槽，<code>prefix</code>设置数字前缀插槽，<code>suffix</code>设置数字后缀插槽。',
-        'en-US':
-          'Set the title slot through<code>title</code>, set the number prefix slot through<code>prefix</code>, and set the number suffix slot through<code>suffix</code>.'
+        'zh-CN': '通过<code>title</code>设置标题。',
+        'en-US': 'Set the title through<code>title</code>.'
       },
       codeFiles: ['statistic-slot.vue']
     },
     {
       demoId: 'statistic-style',
       name: {
-        'zh-CN': '样式用法',
+        'zh-CN': '样式',
         'en-US': 'Style Usage'
       },
       desc: {

package/demos/pc/app/tabs/custom-more-icon-composition-api.vue

@@ -10,52 +10,20 @@
 </template>
 
 <script setup lang="jsx">
-import { ref } from 'vue'
+import { reactive } from 'vue'
 import { Tabs as TinyTabs, TabItem as TinyTabItem } from '@opentiny/vue'
 import { iconPopup } from '@opentiny/vue-icon'
 
-const Tabs = ref([
-  {
-    title: 'Tab 1',
-    name: '1',
-    content: 'Tab 1 content '
-  },
-  {
-    title: 'Tab 2',
-    name: '2',
-    content: 'Tab 2 content'
-  },
-  {
-    title: 'Tab 3',
-    name: '3',
-    content: 'Tab 3 content'
-  },
-  {
-    title: 'Tab 4',
-    name: '4',
-    content: 'Tab 4 content'
-  },
-  {
-    title: 'Tab 5',
-    name: '5',
-    content: 'Tab 5 content'
-  },
-  {
-    title: 'Tab 6',
-    name: '6',
-    content: 'Tab 6 content'
-  },
-  {
-    title: 'Tab 7',
-    name: '7',
-    content: 'Tab 7 content'
-  },
-  {
-    title: 'Tab 8',
-    name: '8',
-    content: 'Tab 8 content'
-  }
-])
-
+const Tabs = reactive([])
 const TinyIconPopup = iconPopup()
+
+// 创建tabs
+for (let i = 1; i < 9; i++) {
+  const title = `Tab ${i}`
+  Tabs.push({
+    title,
+    name: i + '',
+    content: `${title} content `
+  })
+}
 </script>

package/demos/pc/app/tabs/custom-more-icon.vue

@@ -1,7 +1,7 @@
 <template>
   <tiny-tabs style="width: 400px" show-more-tabs popper-class="custom-class">
     <template #moreIcon>
-      <icon-popup />
+      <tiny-icon-popup />
     </template>
     <tiny-tab-item :key="item.name" v-for="item in Tabs" :title="item.title" :name="item.name">
       {{ item.content }}
@@ -17,52 +17,22 @@ export default {
   components: {
     TinyTabs: Tabs,
     TinyTabItem: TabItem,
-    IconPopup: iconPopup()
+    TinyIconPopup: iconPopup()
   },
   data() {
     return {
-      Tabs: [
-        {
-          title: 'Tab 1',
-          name: '1',
-          content: 'Tab 1 content '
-        },
-        {
-          title: 'Tab 2',
-          name: '2',
-          content: 'Tab 2 content'
-        },
-        {
-          title: 'Tab 3',
-          name: '3',
-          content: 'Tab 3 content'
-        },
-        {
-          title: 'Tab 4',
-          name: '4',
-          content: 'Tab 4 content'
-        },
-        {
-          title: 'Tab 5',
-          name: '5',
-          content: 'Tab 5 content'
-        },
-        {
-          title: 'Tab 6',
-          name: '6',
-          content: 'Tab 6 content'
-        },
-        {
-          title: 'Tab 7',
-          name: '7',
-          content: 'Tab 7 content'
-        },
-        {
-          title: 'Tab 8',
-          name: '8',
-          content: 'Tab 8 content'
-        }
-      ]
+      Tabs: []
+    }
+  },
+  created() {
+    // 创建tabs
+    for (let i = 1; i < 9; i++) {
+      const title = `Tab ${i}`
+      this.Tabs.push({
+        title,
+        name: i + '',
+        content: `${title} content `
+      })
     }
   }
 }

package/demos/pc/app/tabs/more-show-all-composition-api.vue

@@ -0,0 +1,29 @@
+<template>
+  <tiny-tabs style="width: 400px" show-more-tabs more-show-all panel-max-height="300px" panel-width="150px">
+    <template #moreIcon>
+      <tiny-icon-popup />
+    </template>
+    <tiny-tab-item :key="item.name" v-for="item in Tabs" :title="item.title" :name="item.name">
+      {{ item.content }}
+    </tiny-tab-item>
+  </tiny-tabs>
+</template>
+
+<script setup lang="jsx">
+import { reactive } from 'vue'
+import { Tabs as TinyTabs, TabItem as TinyTabItem } from '@opentiny/vue'
+import { iconPopup } from '@opentiny/vue-icon'
+
+const Tabs = reactive([])
+const TinyIconPopup = iconPopup()
+
+// 创建tabs
+for (let i = 1; i < 101; i++) {
+  const title = `Tab ${i}`
+  Tabs.push({
+    title,
+    name: i + '',
+    content: `${title} content `
+  })
+}
+</script>

package/demos/pc/app/tabs/more-show-all.spec.ts

@@ -0,0 +1,53 @@
+import { test, expect } from '@playwright/test'
+
+test('超长数据下拉展示全部，面板长宽可控', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('tabs#more-show-all')
+
+  const tabNav = page.locator('.tiny-tabs__nav.is-top.is-show-active-bar')
+  const showMoreBtn = page.locator('#more-show-all').getByRole('button')
+  const triggerBtn = page.locator('.tiny-tabs__more-container .tiny-dropdown__trigger.tiny-dropdown-trigger')
+  const panel = page.locator('.tiny-tabs__more-dropdown')
+
+  await showMoreBtn.hover()
+  await showMoreBtn.click()
+  await triggerBtn.click()
+  await page.waitForTimeout(200)
+  await panel.isVisible()
+  await expect(panel).toHaveCSS('width', '150px')
+  await expect(panel).toHaveCSS('max-height', '300px')
+
+  await showMoreBtn.click()
+  await triggerBtn.click()
+  await page
+    .locator('div')
+    .filter({ hasText: /^Tab 100$/ })
+    .nth(1)
+    .scrollIntoViewIfNeeded()
+  await page.waitForTimeout(200)
+  await page
+    .locator('div')
+    .filter({ hasText: /^Tab 100$/ })
+    .nth(1)
+    .click()
+  const tab100 = page.getByRole('tab', { name: 'Tab 100' })
+  await tab100.isVisible()
+  await expect(tab100).toHaveClass(/is-active/)
+
+  await showMoreBtn.click()
+  await triggerBtn.click()
+  await page
+    .locator('div')
+    .filter({ hasText: /^Tab 1$/ })
+    .nth(1)
+    .scrollIntoViewIfNeeded()
+  await page.waitForTimeout(200)
+  await page
+    .locator('div')
+    .filter({ hasText: /^Tab 1$/ })
+    .nth(1)
+    .click()
+  const tab1 = page.getByRole('tab', { name: 'Tab 1', exact: true })
+  await tab1.isVisible()
+  await expect(tab1).toHaveClass(/is-active/)
+})

package/demos/pc/app/tabs/more-show-all.vue

@@ -0,0 +1,39 @@
+<template>
+  <tiny-tabs style="width: 400px" show-more-tabs more-show-all panel-max-height="300px" panel-width="150px">
+    <template #moreIcon>
+      <tiny-icon-popup />
+    </template>
+    <tiny-tab-item :key="item.name" v-for="item in Tabs" :title="item.title" :name="item.name">
+      {{ item.content }}
+    </tiny-tab-item>
+  </tiny-tabs>
+</template>
+
+<script lang="jsx">
+import { Tabs, TabItem } from '@opentiny/vue'
+import { iconPopup } from '@opentiny/vue-icon'
+
+export default {
+  components: {
+    TinyTabs: Tabs,
+    TinyTabItem: TabItem,
+    TinyIconPopup: iconPopup()
+  },
+  data() {
+    return {
+      Tabs: []
+    }
+  },
+  created() {
+    // 创建tabs
+    for (let i = 1; i < 101; i++) {
+      const title = `Tab ${i}`
+      this.Tabs.push({
+        title,
+        name: i + '',
+        content: `${title} content `
+      })
+    }
+  }
+}
+</script>

package/demos/pc/app/tabs/stretch-wh.spec.ts

@@ -4,7 +4,8 @@ test('自动撑宽', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('tabs#stretch-wh')
 
-  const { width } = await page.getByRole('tab', { name: '表单组件，测试标签页宽度根据标题长度自动撑开' }).boundingBox()
+  const tabItem = page.getByRole('tab', { name: '表单组件，测试标签页宽度根据标题长度自动撑开' })
 
-  await expect(width).toBeGreaterThanOrEqual(360)
+  await tabItem.isVisible()
+  await expect(tabItem).toHaveCSS('flex-grow', '1')
 })

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

@@ -91,9 +91,9 @@ export default {
       },
       desc: {
         'zh-CN': `通过 <code>with-close</code> 打开关闭按钮，并监听 <code>close</code> 事件自定义实现删除页签项的逻辑。
-          通过 <code>beforeClose</code> 函数属性，在关闭前回调该函数，其类型声明为：<code>(name: string)=> boolean | Promise&lt;boolean&gt;</code>`,
-        'en-US': `Use <code>with-close</code> to enable the close button and listen to the <code>close</code> event to customize the logic for deleting tab items.
-          The <code>beforeClose</code> function attribute is used to call back the function before the function is closed. The type of the function is declared as <code>(name: string)=> boolean | Promise<boolean></code>.`
+          <code>beforeClose</code> 设置删除前的操作，返回为false则取消删除，反之则执行删除。`,
+        'en-US': `Use <code>with-close</code> to open the close button and listen to the <code>close</code> event to customize the logic for deleting tab items.
+          <code>beforeClose</code> sets the operation before the deletion. If the return value is false, the deletion is canceled. Otherwise, the deletion is performed.`
       },
       codeFiles: ['tabs-events-close.vue']
     },
@@ -150,6 +150,20 @@ export default {
       },
       codeFiles: ['stretch-wh.vue']
     },
+    {
+      demoId: 'more-show-all',
+      name: {
+        'zh-CN': '超长数据下拉展示',
+        'en-US': 'Drop-down display of ultra-long data'
+      },
+      desc: {
+        'zh-CN':
+          '通过 <code>more-show-all</code> 设置下拉面板展示全部页签项，<code>panel-max-height</code> 设置面板最大高度； <code>panel-width</code> 设置面板宽度。',
+        'en-US':
+          'Use <code>more-show-all</code> to set the drop-down panel to display all tab items and <code>panel-max-height</code> to set the maximum height of the panel. <code>panel-width</code> sets the width of the panel.'
+      },
+      codeFiles: ['more-show-all.vue']
+    },
     {
       demoId: 'custom-tab-title',
       name: {
@@ -244,14 +258,14 @@ export default {
     {
       demoId: 'overflow-title',
       name: {
-        'zh-CN': '标题超出显示 tooltip',
-        'en-US': 'The title exceeds the displayed tooltip.'
+        'zh-CN': '超出显示 tooltip',
+        'en-US': 'Out of Display tooltip'
       },
       desc: {
         'zh-CN':
-          '设置<code>overflow-title</code>属性可让标题超出一定长度（默认 256px）时隐藏并显示...，鼠标移到标题上可显示 tooltip，<code>title-width</code>属性可设置标题超出的长度。',
+          '通过 <code>overflow-title</code> 设置标题超出一定长度（默认 256px）时隐藏并显示...，鼠标移到标题上可显示 tooltip，<code>title-width</code>设置标题超出的长度。',
         'en-US':
-          'Set the <code>overflow-title</code> attribute to hide and display the title when the title exceeds a certain length (256px by default). Move the cursor to the title to display the tooltip. Set the <code>title-width</code> attribute to set the length of the title.'
+          'Use <code>overflow-title</code> to set the title to hide and show when it exceeds a certain length (default 256px)... , move the cursor to the title to display the tooltip, and set <code>title-width</code> to the excess length of the title.'
       },
       codeFiles: ['overflow-title.vue']
     }

package/demos/pc/app/time-line/shape.vue

@@ -38,7 +38,7 @@ export default {
 }
 </script>
 
-<style>
+<style scoped>
 .tiny-button {
   margin-bottom: 24px;
 }

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

@@ -44,7 +44,7 @@ export default {
 }
 </script>
 
-<style>
+<style scoped>
 code {
   color: #476582;
   padding: 2px 8px;

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

@@ -45,7 +45,10 @@ const data = ref([
   {
     id: '1',
     label: '数据 1',
-    children: [{ id: '1-1', label: '数据 1-1', children: [{ id: '1-1-1', label: '数据 1-1-1' }] }]
+    children: [
+      { id: '1-1', label: '数据 1-1', children: [{ id: '1-1-1', label: '数据 1-1-1' }] },
+      { id: '1-2', label: '数据 1-2' }
+    ]
   },
   {
     id: '2',

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

@@ -52,7 +52,10 @@ export default {
         {
           id: '1',
           label: '数据 1',
-          children: [{ id: '1-1', label: '数据 1-1', children: [{ id: '1-1-1', label: '数据 1-1-1' }] }]
+          children: [
+            { id: '1-1', label: '数据 1-1', children: [{ id: '1-1-1', label: '数据 1-1-1' }] },
+            { id: '1-2', label: '数据 1-2' }
+          ]
         },
         {
           id: '2',

package/demos/pc/app/tree/check-op-composition-api.vue

@@ -30,7 +30,10 @@ const data = ref([
   {
     id: '1',
     label: '数据 1',
-    children: [{ id: '1-1', label: '数据 1-1', children: [{ id: '1-1-1', label: '数据 1-1-1' }] }]
+    children: [
+      { id: '1-1', label: '数据 1-1', children: [{ id: '1-1-1', label: '数据 1-1-1' }] },
+      { id: '1-2', label: '数据 1-2' }
+    ]
   },
   {
     id: '2',
@@ -64,6 +67,7 @@ function getChecks() {
   const checkedHalfNodes = treeRef.value.getHalfCheckedNodes()
 
   console.log('当前组件的勾选状态为： ', treeRef.value, {
+    currentKey,
     checkedKeys,
     checkedKeysOnlyLeaf,
     checkedNodes,
@@ -93,10 +97,10 @@ function setCheckedNodes() {
   treeRef.value.setCheckedNodes([{ id: '1-1' }, { id: '2-1' }, { id: '3-1' }], true)
 }
 function check(data, currentChecked) {
-  console.log('check事件：', arguments)
+  console.log('check事件：', data, currentChecked)
 }
 function checkChange(data, checked, indeterminate) {
-  console.log('checkChange事件：', arguments)
+  console.log('checkChange事件：', data, checked, indeterminate)
 }
 </script>
 

package/demos/pc/app/tree/check-op.spec.ts

@@ -18,7 +18,7 @@ test('测试多选勾选 ', async ({ page }) => {
   await expect(treeChecked).toHaveCount(0)
 
   await btn3.click()
-  await expect(treeChecked).toHaveCount(4)
+  await expect(treeChecked).toHaveCount(3)
   await page.waitForTimeout(20)
 
   await btn4.click()
@@ -26,7 +26,7 @@ test('测试多选勾选 ', async ({ page }) => {
   await page.waitForTimeout(20)
 
   await btn5.click()
-  await expect(treeChecked).toHaveCount(6)
+  await expect(treeChecked).toHaveCount(5)
   await page.waitForTimeout(20)
 
   await btn6.click()

package/demos/pc/app/tree/check-op.vue

@@ -35,7 +35,10 @@ export default {
         {
           id: '1',
           label: '数据 1',
-          children: [{ id: '1-1', label: '数据 1-1', children: [{ id: '1-1-1', label: '数据 1-1-1' }] }]
+          children: [
+            { id: '1-1', label: '数据 1-1', children: [{ id: '1-1-1', label: '数据 1-1-1' }] },
+            { id: '1-2', label: '数据 1-2' }
+          ]
         },
         {
           id: '2',
@@ -71,6 +74,7 @@ export default {
       const checkedHalfNodes = this.$refs.treeRef.getHalfCheckedNodes()
 
       console.log('当前组件的勾选状态为： ', this.$refs.treeRef, {
+        currentKey,
         checkedKeys,
         checkedKeysOnlyLeaf,
         checkedNodes,
@@ -100,10 +104,10 @@ export default {
       this.$refs.treeRef.setCheckedNodes([{ id: '1-1' }, { id: '2-1' }, { id: '3-1' }], true)
     },
     check(data, currentChecked) {
-      console.log('check事件：', arguments)
+      console.log('check事件：', data, currentChecked)
     },
     checkChange(data, checked, indeterminate) {
-      console.log('checkChange事件：', arguments)
+      console.log('checkChange事件：', data, checked, indeterminate)
     }
   }
 }

package/demos/pc/app/tree/checkbox-composition-api.vue

@@ -37,7 +37,10 @@ const data = ref([
     id: '1',
     label: '数据 1',
     disabled: true,
-    children: [{ id: '1-1', label: '数据 1-1', children: [{ id: '1-1-1', label: '数据 1-1-1' }] }]
+    children: [
+      { id: '1-1', label: '数据 1-1', children: [{ id: '1-1-1', label: '数据 1-1-1' }] },
+      { id: '1-2', label: '数据 1-2' }
+    ]
   },
   {
     id: '2',
@@ -62,6 +65,7 @@ const data = ref([
 }
 .checkbox-demo .tiny-tree {
   flex: 1;
+  min-width: 300px;
 }
 .checkbox-demo div {
   margin-bottom: 8px;

package/demos/pc/app/tree/checkbox.vue

@@ -42,7 +42,10 @@ export default {
           id: '1',
           label: '数据 1',
           disabled: true,
-          children: [{ id: '1-1', label: '数据 1-1', children: [{ id: '1-1-1', label: '数据 1-1-1' }] }]
+          children: [
+            { id: '1-1', label: '数据 1-1', children: [{ id: '1-1-1', label: '数据 1-1-1' }] },
+            { id: '1-2', label: '数据 1-2' }
+          ]
         },
         {
           id: '2',
@@ -70,6 +73,7 @@ export default {
 }
 .checkbox-demo .tiny-tree {
   flex: 1;
+  min-width: 300px;
 }
 .checkbox-demo div {
   margin-bottom: 8px;

package/demos/pc/app/tree/contextmenu-composition-api.vue

@@ -1,3 +1,4 @@
+<!-- eslint-disable vue/no-template-shadow -->
 <template>
   <div>
     <tiny-tree
@@ -26,7 +27,10 @@ const data = ref([
   {
     id: '1',
     label: '数据 1',
-    children: [{ id: '1-1', label: '数据 1-1', children: [{ id: '1-1-1', label: '数据 1-1-1' }] }]
+    children: [
+      { id: '1-1', label: '数据 1-1', children: [{ id: '1-1-1', label: '数据 1-1-1' }] },
+      { id: '1-2', label: '数据 1-2' }
+    ]
   },
   {
     id: '2',

package/demos/pc/app/tree/contextmenu.vue

@@ -1,3 +1,4 @@
+<!-- eslint-disable vue/no-template-shadow -->
 <template>
   <div>
     <tiny-tree
@@ -31,7 +32,10 @@ export default {
         {
           id: '1',
           label: '数据 1',
-          children: [{ id: '1-1', label: '数据 1-1', children: [{ id: '1-1-1', label: '数据 1-1-1' }] }]
+          children: [
+            { id: '1-1', label: '数据 1-1', children: [{ id: '1-1-1', label: '数据 1-1-1' }] },
+            { id: '1-2', label: '数据 1-2' }
+          ]
         },
         {
           id: '2',