npm - @opentiny/vue-docs - Versions diffs - 3.16.2 → 3.17.1 - Mend

@opentiny/vue-docs 3.16.2 → 3.17.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (1135) hide show

package/demos/pc/app/select/size.spec.ts CHANGED Viewed

@@ -9,7 +9,7 @@ test('默认尺寸', async ({ page }) => {
   const input = select.locator('.tiny-input')
   const tag = select.locator('.tiny-tag')
-  await expect(input.locator('.tiny-input__inner')).toHaveCSS('height', '30px')
+  await expect(input.locator('.tiny-input__inner')).toHaveCSS('height', '28px')
   await expect(tag.nth(0)).toHaveClass(/tiny-tag--light/)
 })

package/demos/pc/app/select/size.vue CHANGED Viewed

@@ -1,12 +1,22 @@
 <template>
   <div>
     <p>默认</p>
+    <br />
     <tiny-select v-model="value1" multiple :options="options"></tiny-select>
+    <br />
+    <br />
     <p>medium</p>
+    <br />
     <tiny-select v-model="value2" size="medium" multiple :options="options"></tiny-select>
+    <br />
+    <br />
     <p>small</p>
+    <br />
     <tiny-select v-model="value3" size="small" multiple :options="options"> </tiny-select>
+    <br />
+    <br />
     <p>mini</p>
+    <br />
     <tiny-select v-model="value4" size="mini" multiple :options="options"> </tiny-select>
   </div>
 </template>

package/demos/pc/app/select/slot-default-composition-api.vue CHANGED Viewed

@@ -1,6 +1,7 @@
 <template>
   <div>
     <p>场景1：带标签和提示信息</p>
+    <br />
     <tiny-select v-model="value1" popper-class="slot-default">
       <template v-for="item in options1">
         <tiny-tooltip v-if="item.tip" :content="item.tip" placement="right" effect="light" :key="item.value">
@@ -15,8 +16,10 @@
         </tiny-option>
       </template>
     </tiny-select>
+    <br /><br />
     <p>场景2：选项双行</p>
+    <br />
     <tiny-select v-model="value2" popper-class="double-row">
       <tiny-option v-for="item in options2" :key="item.value" :label="item.label" :value="item.value">
         <div>

package/demos/pc/app/select/slot-default.vue CHANGED Viewed

@@ -1,6 +1,7 @@
 <template>
   <div>
     <p>场景1：带标签和提示信息</p>
+    <br />
     <tiny-select v-model="value1" popper-class="slot-default">
       <template v-for="item in options1">
         <tiny-tooltip v-if="item.tip" :content="item.tip" placement="right" effect="light" :key="item.value">
@@ -15,8 +16,10 @@
         </tiny-option>
       </template>
     </tiny-select>
+    <br /><br />
     <p>场景2：选项双行</p>
+    <br />
     <tiny-select v-model="value2" popper-class="double-row">
       <tiny-option v-for="item in options2" :key="item.value" :label="item.label" :value="item.value">
         <div>

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

@@ -524,6 +524,19 @@ export default {
       },
       codeFiles: ['nest-radio-grid-much-data.vue']
     },
+    {
+      demoId: 'init-label',
+      name: {
+        'zh-CN': '远程搜索设置初始化 label 值',
+        'en-US': 'Initialize the label value for remote search settings.'
+      },
+      desc: {
+        'zh-CN': `通过<code>init-label</code>属性设置远程搜索或者嵌套树懒加载数据未获取到时显示的初始化 label 值。`,
+        'en-US':
+          'Use the <code>init-label</code> attribute to set the initial label value displayed when remote search or nested sloth loading data is not obtained.'
+      },
+      codeFiles: ['init-label.vue']
+    },
     {
       demoId: 'slot-default',
       name: {
@@ -606,9 +619,14 @@ export default {
         'en-US': 'Custom All Text'
       },
       desc: {
-        'zh-CN': '当下拉中显示全部时，通过<code>all-text</code> 属性自定义全部的显示文本',
-        'en-US':
-          'Use the <code>all-text</code> attribute to customize all displayed text when all is displayed in the drop-down list box.'
+        'zh-CN': `
+          通过<code>all-text</code> 属性自定义下拉面板中，全部选中的自定义文字。<br>
+          通过<code>show-all-text-tag</code> 属性设置为 <code> true </code> 时，勾选全部后，输入框只显示 <code>all-text</code> 属性的指定的 Tag。该属性默认为 <code>false</code>。
+        `,
+        'en-US': `
+          Use the <code>all-text</code> attribute to customize all the selected customized text in the drop-down panel.<br>
+          If <code>show-all-text-tag</code> is set to <code>true</code> and all is selected, only the tag specified by <code>all-text</code> is displayed in the text box. The default value is <code>false</code>.
+        `
       },
       codeFiles: ['all-text.vue']
     },

package/demos/pc/app/split/basic-usage-composition-api.vue CHANGED Viewed

@@ -25,6 +25,10 @@ const split1 = ref(0.5)
 }
 .demo-split-pane {
-  padding: 10px;
+  width: 100%;
+  justify-content: center;
+  align-items: center;
+  display: flex;
+  height: 100%;
 }
 </style>

package/demos/pc/app/split/basic-usage.vue CHANGED Viewed

@@ -33,6 +33,10 @@ export default {
 }
 .demo-split-pane {
-  padding: 10px;
+  width: 100%;
+  justify-content: center;
+  align-items: center;
+  display: flex;
+  height: 100%;
 }
 </style>

package/demos/pc/app/split/disabled-drag-composition-api.vue CHANGED Viewed

@@ -25,6 +25,10 @@ const split1 = ref(0.5)
 }
 .demo-split-pane {
-  padding: 10px;
+  width: 100%;
+  justify-content: center;
+  align-items: center;
+  display: flex;
+  height: 100%;
 }
 </style>

package/demos/pc/app/split/disabled-drag.vue CHANGED Viewed

@@ -33,6 +33,10 @@ export default {
 }
 .demo-split-pane {
-  padding: 10px;
+  width: 100%;
+  justify-content: center;
+  align-items: center;
+  display: flex;
+  height: 100%;
 }
 </style>

package/demos/pc/app/split/event-click-composition-api.vue CHANGED Viewed

@@ -39,7 +39,10 @@ function rightBottomClick() {
 }
 .demo-split-pane {
-  padding: 10px;
+  width: 100%;
+  justify-content: center;
+  align-items: center;
+  display: flex;
+  height: 100%;
 }
 </style>
-s

package/demos/pc/app/split/event-click.vue CHANGED Viewed

@@ -48,7 +48,10 @@ export default {
 }
 .demo-split-pane {
-  padding: 10px;
+  width: 100%;
+  justify-content: center;
+  align-items: center;
+  display: flex;
+  height: 100%;
 }
 </style>
-s

package/demos/pc/app/split/horizontal-collapse-composition-api.vue CHANGED Viewed

@@ -25,7 +25,10 @@ const split1 = ref(0.5)
 }
 .demo-split-pane {
-  padding: 10px;
+  width: 100%;
+  justify-content: center;
+  align-items: center;
+  display: flex;
+  height: 100%;
 }
 </style>
-s

package/demos/pc/app/split/horizontal-collapse-left-top-composition-api.vue CHANGED Viewed

@@ -25,6 +25,10 @@ const split1 = ref(0.5)
 }
 .demo-split-pane {
-  padding: 10px;
+  width: 100%;
+  justify-content: center;
+  align-items: center;
+  display: flex;
+  height: 100%;
 }
 </style>

package/demos/pc/app/split/horizontal-collapse-left-top.vue CHANGED Viewed

@@ -33,6 +33,10 @@ export default {
 }
 .demo-split-pane {
-  padding: 10px;
+  width: 100%;
+  justify-content: center;
+  align-items: center;
+  display: flex;
+  height: 100%;
 }
 </style>

package/demos/pc/app/split/horizontal-collapse.vue CHANGED Viewed

@@ -33,7 +33,10 @@ export default {
 }
 .demo-split-pane {
-  padding: 10px;
+  width: 100%;
+  justify-content: center;
+  align-items: center;
+  display: flex;
+  height: 100%;
 }
 </style>
-s

package/demos/pc/app/split/left-right-slot-composition-api.vue CHANGED Viewed

@@ -26,6 +26,10 @@ const split2 = ref(0.4)
 }
 .demo-split-pane {
-  padding: 10px;
+  width: 100%;
+  justify-content: center;
+  align-items: center;
+  display: flex;
+  height: 100%;
 }
 </style>

package/demos/pc/app/split/left-right-slot.vue CHANGED Viewed

@@ -34,6 +34,10 @@ export default {
 }
 .demo-split-pane {
-  padding: 10px;
+  width: 100%;
+  justify-content: center;
+  align-items: center;
+  display: flex;
+  height: 100%;
 }
 </style>

package/demos/pc/app/split/moveend-event-composition-api.vue CHANGED Viewed

@@ -30,6 +30,10 @@ function moveend() {
 }
 .demo-split-pane {
-  padding: 10px;
+  width: 100%;
+  justify-content: center;
+  align-items: center;
+  display: flex;
+  height: 100%;
 }
 </style>

package/demos/pc/app/split/moveend-event.vue CHANGED Viewed

@@ -39,6 +39,10 @@ export default {
 }
 .demo-split-pane {
-  padding: 10px;
+  width: 100%;
+  justify-content: center;
+  align-items: center;
+  display: flex;
+  height: 100%;
 }
 </style>

package/demos/pc/app/split/movestart-event-composition-api.vue CHANGED Viewed

@@ -30,6 +30,10 @@ function movestart() {
 }
 .demo-split-pane {
-  padding: 10px;
+  width: 100%;
+  justify-content: center;
+  align-items: center;
+  display: flex;
+  height: 100%;
 }
 </style>

package/demos/pc/app/split/movestart-event.vue CHANGED Viewed

@@ -39,6 +39,10 @@ export default {
 }
 .demo-split-pane {
-  padding: 10px;
+  width: 100%;
+  justify-content: center;
+  align-items: center;
+  display: flex;
+  height: 100%;
 }
 </style>

package/demos/pc/app/split/moving-event-composition-api.vue CHANGED Viewed

@@ -30,6 +30,10 @@ function moving() {
 }
 .demo-split-pane {
-  padding: 10px;
+  width: 100%;
+  justify-content: center;
+  align-items: center;
+  display: flex;
+  height: 100%;
 }
 </style>

package/demos/pc/app/split/moving-event.vue CHANGED Viewed

@@ -39,6 +39,10 @@ export default {
 }
 .demo-split-pane {
-  padding: 10px;
+  width: 100%;
+  justify-content: center;
+  align-items: center;
+  display: flex;
+  height: 100%;
 }
 </style>

package/demos/pc/app/split/nested-use-composition-api.vue CHANGED Viewed

@@ -35,7 +35,11 @@ const split4 = ref(0.5)
 }
 .demo-split-pane {
-  padding: 10px;
+  width: 100%;
+  justify-content: center;
+  align-items: center;
+  display: flex;
+  height: 100%;
 }
 .demo-split-pane.no-padding {

package/demos/pc/app/split/nested-use.vue CHANGED Viewed

@@ -43,7 +43,11 @@ export default {
 }
 .demo-split-pane {
-  padding: 10px;
+  width: 100%;
+  justify-content: center;
+  align-items: center;
+  display: flex;
+  height: 100%;
 }
 .demo-split-pane.no-padding {

package/demos/pc/app/split/split-mode-composition-api.vue CHANGED Viewed

@@ -39,7 +39,11 @@ function moveend() {
 }
 .demo-split-pane {
-  padding: 10px;
+  width: 100%;
+  justify-content: center;
+  align-items: center;
+  display: flex;
+  height: 100%;
 }
 .line {

package/demos/pc/app/split/split-mode.vue CHANGED Viewed

@@ -46,7 +46,11 @@ export default {
 }
 .demo-split-pane {
-  padding: 10px;
+  width: 100%;
+  justify-content: center;
+  align-items: center;
+  display: flex;
+  height: 100%;
 }
 .line {

package/demos/pc/app/split/split-threshold-composition-api.vue CHANGED Viewed

@@ -26,6 +26,10 @@ const split1 = ref(0.3)
 }
 .demo-split-pane {
-  padding: 10px;
+  width: 100%;
+  justify-content: center;
+  align-items: center;
+  display: flex;
+  height: 100%;
 }
 </style>

package/demos/pc/app/split/split-threshold.vue CHANGED Viewed

@@ -34,6 +34,10 @@ export default {
 }
 .demo-split-pane {
-  padding: 10px;
+  width: 100%;
+  justify-content: center;
+  align-items: center;
+  display: flex;
+  height: 100%;
 }
 </style>

package/demos/pc/app/split/top-bottom-slot-composition-api.vue CHANGED Viewed

@@ -26,6 +26,10 @@ const split1 = ref(0.3)
 }
 .demo-split-pane {
-  padding: 10px;
+  width: 100%;
+  justify-content: center;
+  align-items: center;
+  display: flex;
+  height: 100%;
 }
 </style>

package/demos/pc/app/split/top-bottom-slot.vue CHANGED Viewed

@@ -34,6 +34,10 @@ export default {
 }
 .demo-split-pane {
-  padding: 10px;
+  width: 100%;
+  justify-content: center;
+  align-items: center;
+  display: flex;
+  height: 100%;
 }
 </style>

package/demos/pc/app/split/trigger-simple-composition-api.vue CHANGED Viewed

@@ -25,6 +25,10 @@ const split1 = ref(0.5)
 }
 .demo-split-pane {
-  padding: 10px;
+  width: 100%;
+  justify-content: center;
+  align-items: center;
+  display: flex;
+  height: 100%;
 }
 </style>

package/demos/pc/app/split/trigger-simple.vue CHANGED Viewed

@@ -33,6 +33,10 @@ export default {
 }
 .demo-split-pane {
-  padding: 10px;
+  width: 100%;
+  justify-content: center;
+  align-items: center;
+  display: flex;
+  height: 100%;
 }
 </style>

package/demos/pc/app/split/trigger-slot-composition-api.vue CHANGED Viewed

@@ -29,7 +29,11 @@ const split2 = ref(0.4)
 }
 .demo-split-pane {
-  padding: 10px;
+  width: 100%;
+  justify-content: center;
+  align-items: center;
+  display: flex;
+  height: 100%;
 }
 .trigger-line {

package/demos/pc/app/split/trigger-slot.vue CHANGED Viewed

@@ -37,7 +37,11 @@ export default {
 }
 .demo-split-pane {
-  padding: 10px;
+  width: 100%;
+  justify-content: center;
+  align-items: center;
+  display: flex;
+  height: 100%;
 }
 .trigger-line {

package/demos/pc/app/statistic/basic-usage.spec.ts CHANGED Viewed

@@ -3,18 +3,6 @@ import { test, expect } from '@playwright/test'
 test('基本用法', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('statistic#basic-usage')
-  await page
-    .locator('div')
-    .filter({ hasText: /123\/100$/ })
-    .first()
-    .click()
-  await page
-    .locator('div')
-    .filter({ hasText: /^基本用法$/ })
-    .first()
-    .click()
-  await page
-    .locator('div')
-    .filter({ hasText: /^306,526\.23$/ })
-    .click()
+  await page.locator('#basic-usage').getByText('306,526', { exact: true })
+  await page.getByText('306,526.23')
 })

package/demos/pc/app/statistic/prefix-suffix-slot-composition-api.vue CHANGED Viewed

@@ -2,15 +2,21 @@
   <div>
     <tiny-layout>
       <tiny-row :flex="true">
-        <tiny-col :span="8">
-          <tiny-statistic :value="300" prefix="存储平均值" suffix="GB"></tiny-statistic>
-        </tiny-col>
-        <tiny-col :span="8">
+        <tiny-col :span="4">
           <tiny-statistic :value="306">
-            <template #prefix>已使用容量(GB)</template>
-            <template #suffix><span style="font-size: 32px">GB</span></template>
+            <template #prefix><div style="margin-right: 15px">已使用容量(GB)</div></template>
+            <template #suffix><div style="font-size: 24px">GB</div></template>
+          </tiny-statistic>
+        </tiny-col>
+        <tiny-col :span="4">
+          <tiny-statistic :value="1280" :precision="2">
+            <template #prefix><div style="font-size: 24px; font-weight: 600">￥</div></template>
+            <template #suffix><div>/年</div></template>
           </tiny-statistic>
         </tiny-col>
+        <tiny-col :span="4">
+          <tiny-statistic suffix="GB"></tiny-statistic>
+        </tiny-col>
       </tiny-row>
     </tiny-layout>
   </div>

package/demos/pc/app/statistic/prefix-suffix-slot.spec.ts ADDED Viewed

@@ -0,0 +1,19 @@
+import { test, expect } from '@playwright/test'
+test('前后缀', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('statistic#prefix-suffix-slot')
+  await page
+    .locator('div')
+    .filter({ hasText: /^已使用容量\(GB\)306GB$/ })
+    .first()
+  await page
+    .locator('div')
+    .filter({ hasText: /^￥1,280\.00\/年$/ })
+    .first()
+  await page
+    .locator('div')
+    .filter({ hasText: /^300GB$/ })
+    .first()
+  await expect(page.getByText(/^￥1,280\.00\/年$/)).toHaveClass(/tiny-statistic__slots/)
+})

package/demos/pc/app/statistic/prefix-suffix-slot.vue CHANGED Viewed

@@ -2,15 +2,21 @@
   <div>
     <tiny-layout>
       <tiny-row :flex="true">
-        <tiny-col :span="8">
-          <tiny-statistic :value="300" prefix="存储平均值" suffix="GB"></tiny-statistic>
-        </tiny-col>
-        <tiny-col :span="8">
+        <tiny-col :span="4">
           <tiny-statistic :value="306">
-            <template #prefix>已使用容量(GB)</template>
-            <template #suffix><span style="font-size: 32px">GB</span></template>
+            <template #prefix><div style="margin-right: 15px">已使用容量(GB)</div></template>
+            <template #suffix><div style="font-size: 24px">GB</div></template>
+          </tiny-statistic>
+        </tiny-col>
+        <tiny-col :span="4">
+          <tiny-statistic :value="1280" :precision="2">
+            <template #prefix><div style="font-size: 24px; font-weight: 600">￥</div></template>
+            <template #suffix><div>/年</div></template>
           </tiny-statistic>
         </tiny-col>
+        <tiny-col :span="4">
+          <tiny-statistic :value="300" suffix="GB"></tiny-statistic>
+        </tiny-col>
       </tiny-row>
     </tiny-layout>
   </div>

package/demos/pc/app/statistic/statistic-slot-composition-api.vue CHANGED Viewed

@@ -3,7 +3,10 @@
     <tiny-layout>
       <tiny-row :flex="true">
         <tiny-col :span="8">
-          <tiny-statistic :value="10010258" :title="{ value: '存储总量', position: 'top' }"> </tiny-statistic>
+          <tiny-statistic :value="10010258" :title="{ value: '存储总量', position: 'top' }">
+            <template #prefix>已使用容量(GB)</template>
+            <template #suffix><span style="font-size: 24px">GB</span></template>
+          </tiny-statistic>
         </tiny-col>
         <tiny-col :span="8">
           <tiny-statistic :value="306526.23" :title="{ position: 'bottom' }">

package/demos/pc/app/statistic/statistic-slot.spec.ts CHANGED Viewed

@@ -3,11 +3,9 @@ import { test, expect } from '@playwright/test'
 test('插槽用法', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('statistic#statistic-slot')
-  await page.locator('div').filter({ hasText: /^10,010,258$/ })
   await page
     .locator('div')
-    .filter({ hasText: /^306,526\.23$/ })
+    .filter({ hasText: /^存储总量已使用容量\(GB\)10,010,258GB$/ })
     .first()
-  await page.getByText('Like:306,526').click()
-  await page.getByText('600/').click()
+  await page.getByText('306,526存储平均值').click()
 })

package/demos/pc/app/statistic/statistic-slot.vue CHANGED Viewed

@@ -3,7 +3,10 @@
     <tiny-layout>
       <tiny-row :flex="true">
         <tiny-col :span="8">
-          <tiny-statistic :value="10010258" :title="{ value: '存储总量', position: 'top' }"> </tiny-statistic>
+          <tiny-statistic :value="10010258" :title="{ value: '存储总量', position: 'top' }">
+            <template #prefix>已使用容量(GB)</template>
+            <template #suffix><span style="font-size: 24px">GB</span></template>
+          </tiny-statistic>
         </tiny-col>
         <tiny-col :span="8">
           <tiny-statistic :value="306526.23" :title="{ position: 'bottom' }">