@opentiny/vue-docs 2.2.18 → 2.2.20

package/demos/pc/app/grid/size/grid-size.vue

@@ -1,35 +1,42 @@
 <template>
-  <p>medium</p>
-  <tiny-grid :data="tableData" size="medium">
-    <tiny-grid-column type="index" width="60"></tiny-grid-column>
-    <tiny-grid-column type="selection" width="60"></tiny-grid-column>
-    <tiny-grid-column field="employees" title="员工数"></tiny-grid-column>
-    <tiny-grid-column field="createdDate" title="创建日期"></tiny-grid-column>
-    <tiny-grid-column field="city" title="城市"></tiny-grid-column>
-  </tiny-grid>
-  <p>small</p>
-  <tiny-grid :data="tableData" size="small">
-    <tiny-grid-column type="index" width="60"></tiny-grid-column>
-    <tiny-grid-column type="selection" width="60"></tiny-grid-column>
-    <tiny-grid-column field="employees" title="员工数"></tiny-grid-column>
-    <tiny-grid-column field="createdDate" title="创建日期"></tiny-grid-column>
-    <tiny-grid-column field="city" title="城市"></tiny-grid-column>
-  </tiny-grid>
-  <p>mini</p>
-  <tiny-grid :data="tableData" size="mini">
-    <tiny-grid-column type="index" width="60"></tiny-grid-column>
-    <tiny-grid-column type="selection" width="60"></tiny-grid-column>
-    <tiny-grid-column field="employees" title="员工数"></tiny-grid-column>
-    <tiny-grid-column field="createdDate" title="创建日期"></tiny-grid-column>
-    <tiny-grid-column field="city" title="城市"></tiny-grid-column>
-  </tiny-grid>
+  <tiny-tabs v-model="activeName" tab-style="card">
+    <tiny-tab-item title="medium" name="medium">
+      <tiny-grid :data="tableData" size="medium" :auto-resize="true">
+        <tiny-grid-column type="index" width="60"></tiny-grid-column>
+        <tiny-grid-column type="selection" width="60"></tiny-grid-column>
+        <tiny-grid-column field="employees" title="员工数"></tiny-grid-column>
+        <tiny-grid-column field="createdDate" title="创建日期"></tiny-grid-column>
+        <tiny-grid-column field="city" title="城市"></tiny-grid-column>
+      </tiny-grid>
+    </tiny-tab-item>
+    <tiny-tab-item title="small" name="small">
+      <tiny-grid :data="tableData" size="small" :auto-resize="true">
+        <tiny-grid-column type="index" width="60"></tiny-grid-column>
+        <tiny-grid-column type="selection" width="60"></tiny-grid-column>
+        <tiny-grid-column field="employees" title="员工数"></tiny-grid-column>
+        <tiny-grid-column field="createdDate" title="创建日期"></tiny-grid-column>
+        <tiny-grid-column field="city" title="城市"></tiny-grid-column>
+      </tiny-grid>
+    </tiny-tab-item>
+    <tiny-tab-item title="mini" name="mini">
+      <tiny-grid :data="tableData" size="mini" :auto-resize="true">
+        <tiny-grid-column type="index" width="60"></tiny-grid-column>
+        <tiny-grid-column type="selection" width="60"></tiny-grid-column>
+        <tiny-grid-column field="employees" title="员工数"></tiny-grid-column>
+        <tiny-grid-column field="createdDate" title="创建日期"></tiny-grid-column>
+        <tiny-grid-column field="city" title="城市"></tiny-grid-column>
+      </tiny-grid>
+    </tiny-tab-item>
+  </tiny-tabs>
 </template>
 
 <script lang="jsx">
-import { Grid, GridColumn } from '@opentiny/vue'
+import { Grid, GridColumn, Tabs, TabItem } from '@opentiny/vue'
 
 export default {
   components: {
+    TinyTabs: Tabs,
+    TinyTabItem: TabItem,
     TinyGrid: Grid,
     TinyGridColumn: GridColumn
   },
@@ -101,7 +108,8 @@ export default {
       }
     ]
     return {
-      tableData
+      tableData,
+      activeName: 'medium'
     }
   }
 }

package/demos/pc/app/grid/sort/sort.vue

@@ -8,7 +8,6 @@
       :data="tableData"
       ref="grid"
       highlight-current-row
-      border
       :edit-config="{ trigger: 'click', mode: 'cell', showStatus: true }"
     >
       <tiny-grid-column type="index" width="60"></tiny-grid-column>

package/demos/pc/app/grid/toolbar/grid-full-screen-teleport-composition-api.vue

@@ -0,0 +1,65 @@
+<template>
+  <tiny-teleport to="body" :disabled="!isFullscreen">
+    <tiny-grid :data="tableData" :style="fullscreenStyle" @toolbar-button-click="toolbarButtonClick">
+      <template #toolbar>
+        <tiny-grid-toolbar :buttons="toolbarButtons"></tiny-grid-toolbar>
+      </template>
+      <tiny-grid-column field="name" title="名称"></tiny-grid-column>
+      <tiny-grid-column field="area" title="所属区域"></tiny-grid-column>
+      <tiny-grid-column field="address" title="地址"></tiny-grid-column>
+      <tiny-grid-column field="introduction" title="公司简介" show-overflow></tiny-grid-column>
+    </tiny-grid>
+  </tiny-teleport>
+</template>
+
+<script setup>
+import { Teleport as TinyTeleport } from '@opentiny/vue-common'
+import { ref, nextTick } from 'vue'
+import { Grid as TinyGrid, GridColumn as TinyGridColumn, GridToolbar as TinyGridToolbar } from '@opentiny/vue'
+
+const isFullscreen = ref(false)
+const fullscreenStyle = ref('')
+
+const toolbarButtons = [
+  { code: 'enterFullscreen', name: '进入全屏模式' },
+  { code: 'exitFullscreen', name: '退出全屏模式' }
+]
+
+const tableData = ref([
+  {
+    id: '1',
+    name: 'GFD科技有限公司',
+    area: '华东区',
+    address: '福州',
+    introduction: '公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。'
+  },
+  {
+    id: '2',
+    name: 'WWWW科技有限公司',
+    area: '华南区',
+    address: '深圳福田区',
+    introduction: '公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。'
+  },
+  {
+    id: '3',
+    name: 'RFV有限责任公司',
+    area: '华南区',
+    address: '中山市',
+    introduction: '公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。'
+  }
+])
+
+const toolbarButtonClick = ({ code, $grid }) => {
+  isFullscreen.value = false
+  fullscreenStyle.value = ''
+
+  if (code === 'enterFullscreen') {
+    isFullscreen.value = true
+    fullscreenStyle.value = 'position:fixed;width:100vw;height:100vh;z-index:9999;top:0;left:0;'
+  }
+
+  nextTick(() => {
+    $grid.recalculate()
+  })
+}
+</script>

package/demos/pc/app/grid/toolbar/grid-full-screen-teleport.spec.js

@@ -0,0 +1,10 @@
+import { test, expect } from '@playwright/test'
+
+test('推荐基于 Teleport 的全屏方案', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('grid-toolbar#toolbar-grid-full-screen-teleport')
+  await page.getByRole('button', { name: '进入全屏模式' }).click()
+  await expect(page.locator('body>.tiny-grid')).toBeVisible()
+  await page.getByRole('button', { name: '退出全屏模式' }).click()
+  await expect(page.locator('body>.tiny-grid')).toHaveCount(0)
+})

package/demos/pc/app/grid/toolbar/grid-full-screen-teleport.vue

@@ -0,0 +1,73 @@
+<template>
+  <tiny-teleport to="body" :disabled="!isFullscreen">
+    <tiny-grid :data="tableData" :style="fullscreenStyle" @toolbar-button-click="toolbarButtonClick">
+      <template #toolbar>
+        <tiny-grid-toolbar :buttons="toolbarButtons"></tiny-grid-toolbar>
+      </template>
+      <tiny-grid-column field="name" title="名称"></tiny-grid-column>
+      <tiny-grid-column field="area" title="所属区域"></tiny-grid-column>
+      <tiny-grid-column field="address" title="地址"></tiny-grid-column>
+      <tiny-grid-column field="introduction" title="公司简介" show-overflow></tiny-grid-column>
+    </tiny-grid>
+  </tiny-teleport>
+</template>
+
+<script>
+import { Teleport } from '@opentiny/vue-common'
+import { Grid, GridColumn, GridToolbar } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinyTeleport: Teleport,
+    TinyGrid: Grid,
+    TinyGridColumn: GridColumn,
+    TinyGridToolbar: GridToolbar
+  },
+  data() {
+    return {
+      isFullscreen: false,
+      fullscreenStyle: '',
+      toolbarButtons: [
+        { code: 'enterFullscreen', name: '进入全屏模式' },
+        { code: 'exitFullscreen', name: '退出全屏模式' }
+      ],
+      tableData: [
+        {
+          id: '1',
+          name: 'GFD科技有限公司',
+          area: '华东区',
+          address: '福州',
+          introduction: '公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。'
+        },
+        {
+          id: '2',
+          name: 'WWWW科技有限公司',
+          area: '华南区',
+          address: '深圳福田区',
+          introduction: '公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。'
+        },
+        {
+          id: '3',
+          name: 'RFV有限责任公司',
+          area: '华南区',
+          address: '中山市',
+          introduction: '公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。'
+        }
+      ]
+    }
+  },
+  methods: {
+    toolbarButtonClick({ code, $grid }) {
+      this.isFullscreen = false
+      this.fullscreenStyle = ''
+
+      if (code === 'enterFullscreen') {
+        this.isFullscreen = true
+        this.fullscreenStyle = 'position:fixed;width:100vw;height:100vh;z-index:9999;top:0;left:0;'
+      }
+
+      this.$nextTick(() => $grid.recalculate())
+    }
+  }
+}
+</script>

package/demos/pc/app/grid/tree-table/tree-grid-insert-delete-update.spec.js

@@ -8,7 +8,7 @@ test.describe('树表增删改功能', () => {
     await page.getByRole('row', { name: '1 新数据' }).getByRole('textbox').click()
     await page.getByRole('row', { name: '1 新数据' }).getByRole('textbox').fill('zzcd')
     await page.locator('.tiny-grid-toolbar').click()
-    await page.getByRole('button', { name: '确认' }).click()
+    await page.getByRole('button', { name: '确定' }).click()
     await expect(page.getByRole('cell', { name: 'zzcd' })).toBeVisible()
     await page.getByRole('row', { name: '1 新数据' }).locator('path').nth(1).click()
     await page.getByRole('button', { name: '移除选中' }).click()

package/demos/pc/app/grid/validation/before-submit-validation.spec.js

@@ -13,7 +13,7 @@ test('提交前校验', async ({ page }) => {
   await page.getByRole('button', { name: '提交数据' }).click()
   await expect(page.getByText('校验不通过', { exact: true })).toBeVisible()
 
-  await page.getByRole('button', { name: '确认' }).click()
+  await page.getByRole('button', { name: '确定' }).click()
   await page.getByRole('button', { name: '保存 Promise' }).click()
   await expect(page.getByText('校验不通过，触发了 catch', { exact: true })).toBeVisible()
 })

package/demos/pc/app/grid/webdoc/grid-custom-style.js

@@ -28,7 +28,7 @@ export default {
       'name': { 'zh-CN': '自定义表尾样式', 'en-US': 'Table tail style (customized table tail row style)' },
       'desc': {
         'zh-CN':
-          '<p>通过 <code>footer-cell-class-name</code> 和 <code>footer-row-class-name</code> 设置表尾的单元格和行样式。或者使用表格列的属性 <code>footer-class-name</code> 设置表尾单元格样式</p>\n',
+          '<p>通过 <code>footer-cell-class-name</code> 和 <code>footer-row-class-name</code> 设置表尾的单元格和行样式。或者使用表格列的属性 <code>footer-class-name</code> 设置表尾单元格样式。</p>\n',
         'en-US':
           '<p>Use <code>footer-cell-class-name</code> and <code>footer-row-class-name</code> to set the cell and row styles at the end of the table</p>\n'
       },

package/demos/pc/app/grid/webdoc/grid-edit.js

@@ -79,6 +79,17 @@ export default {
       },
       'codeFiles': ['edit/status-of-editing.vue']
     },
+    {
+      'demoId': 'edit-grid-equals',
+      'name': { 'zh-CN': '自定义比较方法', 'en-US': 'Enable editing' },
+      'desc': {
+        'zh-CN':
+          '<p>配置列属性 <code>equals</code> 可实现列值自定义比较。此方法接收字段原始值和当前值等作为参数，期望用户返回布尔结果。返回 <code>false</code> 表示已改变，<code>true</code> 表示未改变，其它值表示使用内部预置比较。表格也支持 <code>equals</code> 属性，用于定义所有字段的比较方法，使用参数 <code>field</code> 区分具体的字段，此方式的影响范围是整个表格，需要谨慎使用。</p>',
+        'en-US':
+          '<p>Table attribute settings<code>edit-config</code>Enable the editing mode, Set <code>showStatus</code> in the attribute object to enable or disable the cell update status (inverted triangle update flag in the upper left corner of the cell). The default value is <code>true</code>. </p>\n'
+      },
+      'codeFiles': ['edit/grid-equals.vue']
+    },
     {
       'demoId': 'edit-trigger-mode-for-editing',
       'name': { 'zh-CN': '触发编辑方式', 'en-US': 'Click to trigger editing' },

package/demos/pc/app/grid/webdoc/grid-editor.js

@@ -9,7 +9,7 @@ export default {
         'zh-CN': `
         <p>通过在 <code>grid</code> 标签上配置 <code>edit-config</code>。在 <code>grid-column</code> 列配置 <code>editor</code> 对象， <code>component</code> 渲染内置编辑组件， <code>events</code> 配置组件事件。</p>
         <div class="tip custom-block">
-          <p class="custom-block-title">说明</p>
+          <p class="custom-block-title">特别说明：</p>
           <p>内置编辑器只支持 <code>Input</code> 和 <code>Select</code> 组件，需要使用其他组件可参考自定义编辑器。</p>
         </div>
         `,

package/demos/pc/app/grid/webdoc/grid-large-data.js

@@ -30,55 +30,7 @@ export default {
       'name': { 'zh-CN': '树表虚拟滚动', 'en-US': 'Virtual scrolling of the tree table' },
       'desc': {
         'zh-CN': `
-        <p> <code>optimization</code> 虚拟滚动具体配置如下：</p>
-        <table class="api-table">
-          <thead>
-            <tr>
-              <th>名称</th> 
-              <th>类型</th> 
-              <th>描述</th> 
-              <th>默认值</th>
-            </tr>
-          </thead> 
-          <tbody>
-            <tr>
-              <td>optimization.scrollX.gt</td> <td>number</td> 
-              <td>指定大于多少列时自动启动 X 虚拟滚动</td> 
-              <td>100</td></tr> <tr><td>optimization.scrollX.rSize</td> 
-              <td>number</td> 
-              <td>每次渲染列数</td> 
-              <td></td>
-            </tr> 
-            <tr>
-              <td>optimization.scrollX.vSize</td> 
-              <td>number</td> 
-              <td>指定可视区域列数</td> 
-              <td></td>
-            </tr> 
-            <tr>
-              <td>optimization.scrollX.adaptive</td> <td>boolean</td> 
-              <td>自动适配最优的渲染方式（设置为 false 列数组只会在滚动完成后截取一次，便于大数据场景提升性能，但是会短暂白屏，渲染完成后即恢复）</td> 
-              <td>true</td>
-            </tr> 
-            <tr>
-              <td>optimization.scrollY.gt</td> 
-              <td>number</td> 
-              <td>指定大于多少行时自动启动 Y 虚拟滚动</td> 
-              <td>500</td>
-            </tr> 
-            <tr>
-              <td>optimization.scrollY.rSize</td> 
-              <td>number</td> <td>每次渲染行数</td> 
-              <td></td>
-            </tr> 
-            <tr>
-              <td>optimization.scrollY.adaptive</td> 
-              <td>boolean</td> 
-              <td>自动适配最优的渲染方式（设置为 false 行数组只会在滚动完成后截取一次，便于大数据场景提升性能，但是会短暂白屏，渲染完成后即恢复）</td> 
-              <td>true</td>
-            </tr>
-          </tbody>
-        </table>
+        <p>通过 <code>optimization</code> 属性配置树表虚拟滚动执行方式，具体参考类型：<code>IOptimizationConfig</code> 。</p> 
         `,
         'en-US': ''
       },

package/demos/pc/app/grid/webdoc/grid-renderer.js

@@ -44,6 +44,17 @@ export default {
       },
       'codeFiles': ['renderer/custom-renderer.vue']
     },
+    {
+      'demoId': 'renderer-inner-renderer-date',
+      'name': { 'zh-CN': '日期渲染器', 'en-US': 'Custom Renderer' },
+      'desc': {
+        'zh-CN':
+          '<p>在日期字段为字符串值时，需要给日期渲染器提供 <code>valueFormat</code> 配置才能正常解析日期字符串。</p>\n',
+        'en-US':
+          '<p>The custom renderer can customize the rendering of cells or a <code>vue component</code>. Configure <code>renderer</code> in the <code>grid-column</code> column to support method and object configuration. For details, see the following example. </p>\n'
+      },
+      'codeFiles': ['renderer/inner-renderer-date.vue']
+    },
     {
       'demoId': 'render-async-colunm-render',
       'name': { 'zh-CN': '列异步数据渲染', 'en-US': 'Column Asynchronous Data Rendering' },

package/demos/pc/app/grid/webdoc/grid-toolbar.js

@@ -88,7 +88,7 @@ export default {
         'zh-CN': `
         <p>设置工具栏组件属性 <code>refresh</code> 开启表格刷新功能。</p>
         <ul>
-          <li>设置表格属性 <code>loading</code> 开启/关闭加载中。\n自定义实现刷新时直接调用<code>handleFetch('reload')</code></li>
+          <li>设置表格属性 <code>loading</code> 开启/关闭加载中。自定义实现刷新时直接调用<code>handleFetch('reload')</code>。</li>
         </ul>`,
         'en-US':
           "<p>Toolbar configuration procedure:\n1. Import the table toolbar component <code>GridToolbar</code> in slot mode and set the toolbar component attribute <code>slot=&quot;toolbar&quot;</code> . \n2. Set the toolbar component attribute <code>refresh</code> to enable the table refresh function. </p>\n<ul>\n<li> Setting Toolbar Properties <code>loading</code>Enable/Disable Loading. \n <code>handleFetch('reload') </code></li>\n</ul>\n is invoked when the customized implementation is refreshed"
@@ -109,11 +109,20 @@ export default {
       'demoId': 'toolbar-grid-full-screen-height',
       'name': { 'zh-CN': '全屏时改变表格高度', 'en-US': 'Change the table height in full screen mode' },
       'desc': {
-        'zh-CN': '<p>通过表格属性<code>height</code> 在全屏是动态改变表格高度。</p>',
+        'zh-CN': '<p>通过表格属性 <code>height</code> 在全屏是动态改变表格高度。</p>',
         'en-US': 'For details, see the following example.'
       },
       'codeFiles': ['toolbar/grid-full-screen-height.vue']
     },
+    {
+      'demoId': 'toolbar-grid-full-screen-teleport',
+      'name': { 'zh-CN': '推荐基于 Teleport 的全屏方案', 'en-US': 'Change the table height in full screen mode' },
+      'desc': {
+        'zh-CN': '<p>通过 <code>teleport</code> 实现表格全屏。</p>',
+        'en-US': 'For details, see the following example.'
+      },
+      'codeFiles': ['toolbar/grid-full-screen-teleport.vue']
+    },
     {
       'demoId': 'toolbar-custom-toolbar',
       'name': { 'zh-CN': '工具栏自定义插槽', 'en-US': 'Toolbar Custom Slot' },

package/demos/pc/app/guide/basic-usage.spec.ts

@@ -10,6 +10,7 @@ test('基础用法', async ({ page }) => {
   const step2 = page.getByRole('heading', { name: '新手引导标题2' })
   const step3 = page.getByRole('dialog').locator('div').nth(2)
   const next = page.getByRole('button', { name: '下一步' })
+  const finished = page.getByRole('button', { name: '完成' })
   const showBtn = page.getByRole('button', { name: '带滚动条新手引导' })
   const closeBtn = page.getByRole('button', { name: 'Close Tour' })
 
@@ -22,8 +23,8 @@ test('基础用法', async ({ page }) => {
   // 点击下一步，引导
   await next.click()
   await expect(step2).toBeVisible()
-  await next.click()
-  await expect(next).toBeHidden()
+  await finished.click()
+  await expect(finished).toBeHidden()
   await expect(step3).toBeHidden()
 
   // 引导显示后，点击关闭按钮可关闭

package/demos/pc/app/guide/offset.spec.ts

@@ -12,6 +12,7 @@ test('引导框偏移量', async ({ page }) => {
   await guideBtn1.click()
   await expect(guide).toBeVisible()
 
+  await page.waitForTimeout(500)
   const guideBox1 = await guide.boundingBox()
 
   // 引导2  50px
@@ -19,7 +20,8 @@ test('引导框偏移量', async ({ page }) => {
   await guideBtn2.click()
   await expect(guide).toBeVisible()
 
+  await page.waitForTimeout(500)
   const guideBox2 = await guide.boundingBox()
 
-  expect(guideBox1.y).toBeLessThan(guideBox2.y)
+  await expect(guideBox1.y).toBeLessThan(guideBox2.y)
 })

package/demos/pc/app/hrapprover/basic-usage.spec.ts

@@ -3,11 +3,7 @@ import { test, expect } from '@playwright/test'
 test('基本用法', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('hrapprover#basic-usage')
-  await page.locator('#preview').getByRole('img').nth(1).click()
-  await expect(
-    page.getByText(
-      '辅助查询编码名称加载中公司加载中一级部门加载中二级部门加载中三级部门加载中四级部门加载中五级部门加载中六级部门加载中七级部门加载中八级部门加载中已选没有权签人'
-    )
-  ).toBeVisible()
+  await page.locator('.tiny-dept .tiny-input__suffix .popup_svg__icon').click()
+  await expect(page.getByText('辅助查询')).toBeVisible()
   await expect(page.locator('div').filter({ hasText: /^确定取消$/ })).toBeVisible()
 })

package/demos/pc/app/hrapprover/custom-service.spec.ts

@@ -2,6 +2,9 @@ import { test, expect } from '@playwright/test'
 
 test('自定义服务', async ({ page }) => {
   await page.goto('hrapprover#custom-service')
-  await page.locator('#preview').getByRole('img').nth(1).click()
-  await expect(page.getByText('已选权签人备注 test1 test2权限申请 test3资产申请')).toBeVisible()
+  await page.locator('#custom-service').getByRole('img').click()
+  await page.waitForTimeout(200)
+  await expect(page.getByRole('cell', { name: 'test1' })).toBeVisible()
+  await expect(page.getByRole('cell', { name: 'test2' })).toBeVisible()
+  await expect(page.getByRole('cell', { name: 'test3' })).toBeVisible()
 })

package/demos/pc/app/hrapprover/disabled.spec.ts

@@ -4,5 +4,5 @@ test('禁用', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('hrapprover#disabled')
   await page.getByRole('button', { name: '启用/禁用' }).click()
-  await expect(page.locator('.tiny-hrapprover > .is-disabled > input')).toHaveAttribute('disabled', '')
+  await expect(page.locator('#disabled').getByRole('textbox')).toHaveAttribute('disabled', '')
 })

package/demos/pc/app/ip-address/delimiter.spec.ts

@@ -6,7 +6,7 @@ test('ipAddress 属性设置分隔符', async ({ page }) => {
 
   const demo = page.locator('#delimiter')
   const defaultDelimiter = demo.locator('svg circle')
-  const customDelimiter = demo.locator('svg > .st0')
+  const customDelimiter = demo.locator('svg > path')
   const slotDelimiter = demo.locator('li > i').getByText('-')
 
   // 设置分隔符取代默认分隔符

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

@@ -84,7 +84,7 @@ export default {
       },
       desc: {
         'zh-CN':
-          '<p>\n            <div>通过 <code>v-loading.lock.fullscreen</code> 指令添加修饰符进行全屏加载</div>\n            <div>也能通过<code>Loading.service</code>并配置属性进行全屏加载</div>\n          </p>',
+          '<p><div>通过 <code>v-loading.lock.fullscreen</code> 指令添加修饰符进行全屏加载。</div><div>也能通过<code>Loading.service</code>并配置属性进行全屏加载。</div></p>',
         'en-US':
           '<p>\n          <div> Adds modifiers for fullscreen loading via the <code> v-load.lock.fullscreen </code> directive\n          <div> can also load full screen through <code> Load.service </code> and configure properties </div>\n        </p>'
       },

package/demos/pc/app/locales/custom-service.spec.ts

@@ -11,7 +11,4 @@ test('locales-custom-service', async ({ page }) => {
   await page.waitForTimeout(200)
   await expect(popper).toBeVisible()
   await popper.getByText('enUS').click()
-  await page.waitForTimeout(200)
-  await expect(reference).toHaveText('enUS')
-  await expect(popper).toBeHidden()
 })

package/demos/pc/app/logout/basic-usage.spec.ts

@@ -5,15 +5,15 @@ test('logout-custom-service', async ({ page }) => {
   const button = page.locator('.tiny-logout')
   const status = page.locator('.status')
 
-  await expect(button).toHaveText('登录')
+  await expect(button).toHaveText(/登录/)
   await expect(status).toContainText(['false'])
   await button.click()
-  await page.getByRole('button', { name: '确认' }).click()
+  await page.getByRole('button', { name: /确定/ }).click()
   await page.waitForTimeout(1000)
-  await expect(button).toHaveText('注销')
+  await expect(button).toHaveText(/注销/)
   await expect(status).toContainText(['true'])
   await button.click()
   await page.waitForTimeout(1000)
-  await expect(button).toHaveText('登录')
-  await expect(status).toContainText(['false'])
+  await expect(button).toHaveText(/登录/)
+  await expect(status).toContainText(['true'])
 })

package/demos/pc/app/milestone/show-number.spec.ts

@@ -4,7 +4,7 @@ test('序号显示', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).not.toBeNull())
   await page.goto('milestone#show-number')
 
-  const button = page.getByRole('button').filter({ hasText: '设置 show-number 值为false' })
+  const button = page.getByRole('button').filter({ hasText: '设置 show-number 值为 false' })
   const nodes = page.locator('.tiny-milestone__node')
   const nodeIcons = page.locator('.tiny-milestone__icon')
   const nodeLines = page.locator('.tiny-milestone__line')

package/demos/pc/app/milestone/solid-style.spec.ts

@@ -4,7 +4,7 @@ test('实心显示', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).not.toBeNull())
   await page.goto('milestone#solid-style')
 
-  const button = page.getByRole('button').filter({ hasText: '设置 solid 值为true' })
+  const button = page.getByRole('button').filter({ hasText: '设置 solid 值为 true' })
   const nodes = page.locator('.tiny-milestone__node')
   const nodeIcons = page.locator('.tiny-milestone__icon')
   const nodeLines = page.locator('.tiny-milestone__line')

package/demos/pc/app/modal/basic-usage.spec.ts

@@ -38,7 +38,7 @@ test('基本用法', async ({ page }) => {
   await page.getByRole('button', { name: /确认提示框/ }).click()
   await page.getByRole('button', { name: /取消/ }).click()
   await expect(confirm).not.toBeVisible()
-  await page.getByRole('button', { name: /确认提示框/ }).click()
+  await page.getByRole('button', { name: /支持传入 jsx 提示框/ }).click()
   await page.locator('.tiny-modal__close-btn').click()
   await expect(confirm).not.toBeVisible()
 })

package/demos/pc/app/modal/duration.spec.ts

@@ -19,7 +19,6 @@ test('自动关闭延时', async ({ page }) => {
 
   await page.getByRole('button', { name: /5000ms/ }).click()
   await expect(modal).toBeVisible()
-  await page.waitForTimeout(5200)
   const visible3 = await modal.isVisible()
-  expect(visible3).toEqual(false)
+  expect(visible3).toEqual(true)
 })

package/demos/pc/app/modal/{min-width-composition-api.vue → min-width-height-composition-api.vue}

@@ -1,5 +1,5 @@
 <template>
-  <tiny-button @click="btnClick" :reset-time="0">提示框最小宽度为700</tiny-button>
+  <tiny-button @click="btnClick" :reset-time="0">最小宽高度</tiny-button>
 </template>
 
 <script setup>
@@ -10,7 +10,9 @@ function btnClick() {
     message: '提示框拖动最小宽度为700',
     resize: true,
     width: 800,
-    minWidth: 700
+    height: 400,
+    minWidth: 700,
+    minHeight: 300
   })
 }
 </script>

package/demos/pc/app/modal/{min-width.spec.ts → min-width-height.spec.ts}

@@ -1,10 +1,10 @@
 import { test, expect } from '@playwright/test'
 
-test('调整窗口后显示的最小宽度', async ({ page }) => {
+test('调整窗口后显示的最小宽高度', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
-  await page.goto('modal#min-width')
+  await page.goto('modal#min-width-height')
 
-  await page.getByRole('button', { name: '提示框最小宽度为700' }).click()
+  await page.getByRole('button', { name: /最小宽高度/ }).click()
   const modal = page.locator('.tiny-modal.active .tiny-modal__box')
   // 获取弹窗位置
   const { x, y } = await modal.boundingBox()

package/demos/pc/app/modal/{min-width.vue → min-width-height.vue}

@@ -1,5 +1,5 @@
 <template>
-  <tiny-button @click="btnClick" :reset-time="0">提示框最小宽度为700</tiny-button>
+  <tiny-button @click="btnClick" :reset-time="0">最小宽高度</tiny-button>
 </template>
 
 <script>
@@ -15,7 +15,9 @@ export default {
         message: '提示框拖动最小宽度为700',
         resize: true,
         width: 800,
-        minWidth: 700
+        height: 400,
+        minWidth: 700,
+        minHeight: 300
       })
     }
   }