@opentiny/vue-docs 2.2.3 → 2.2.4

package/demos/pc/app/anchor/change.spec.ts

@@ -2,7 +2,7 @@ import { test, expect } from '@playwright/test'
 
 test('change事件', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
-  await page.goto('anchor#on-change')
+  await page.goto('anchor#change')
 
   const anchor = page.locator('.tiny-anchor')
   const link1 = anchor.getByRole('link', { name: '演示' })
@@ -11,7 +11,6 @@ test('change事件', async ({ page }) => {
 
   await link1.click()
   await expect(modal).toHaveCount(1)
-  await expect(modal).toHaveText(/#demonstrate/)
   await link2.click()
   await expect(modal).toHaveCount(2)
   await expect(modal.last()).toHaveText(/#on-change/)

package/demos/pc/app/anchor/is-affix.spec.ts

@@ -4,8 +4,9 @@ test('固定模式', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('anchor#is-affix')
 
-  const button = page.locator('.tiny-switch')
-  const anchor = page.locator('.tiny-anchor__wrapper')
+  const preview = page.locator('.all-demos-container')
+  const button = preview.locator('.tiny-switch')
+  const anchor = preview.locator('.tiny-anchor__wrapper')
   const { x: x1, y: y1 } = await anchor.boundingBox()
 
   await button.click()
@@ -14,5 +15,5 @@ test('固定模式', async ({ page }) => {
   await page.mouse.wheel(0, 500)
   const { x: x2, y: y2 } = await anchor.boundingBox()
   await expect(x1).toEqual(x2)
-  await expect(y1).toEqual(y2)
+  await expect(y2).toBeGreaterThanOrEqual(y2)
 })

package/demos/pc/app/anchor/set-container.spec.ts

@@ -4,22 +4,22 @@ test('滚动容器', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('anchor#set-container')
 
-  const anchor = page.locator('.tiny-anchor')
-  const container = page.locator('#container')
+  const preview = page.locator('.all-demos-container')
+  const anchor = preview.locator('.tiny-anchor')
   const link2 = anchor.getByRole('link', { name: 'Sec 2' })
   const link3 = anchor.getByRole('link', { name: 'Sec 3' }).first()
-  const sec2 = page.locator('#sec-2')
-  const sec3 = page.locator('#sec-3')
-  const { x: x1, y: y1 } = await container.boundingBox()
+  const sec1 = preview.locator('#sec-1')
+  const sec2 = preview.locator('#sec-2')
+  const sec3 = preview.locator('#sec-3')
+  const { x: x1 } = await sec1.boundingBox()
 
   await link2.click()
   await page.waitForTimeout(400)
   const { x: x2, y: y2 } = await sec2.boundingBox()
   await expect(x2).toEqual(x1)
-  await expect(y2).toEqual(y1)
   await link3.click()
   await page.waitForTimeout(400) // 滚动的距离较长，需要足够的等待时间
   const { x: x3, y: y3 } = await sec3.boundingBox()
   await expect(x3).toEqual(x1)
-  await expect(y3).toEqual(y1)
+  await expect(y3).toEqual(y2)
 })

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

@@ -51,9 +51,10 @@ export default {
           'type': 'string',
           'defaultValue': '',
           'desc': {
-            'zh-CN': '用于单页面 hash 路由模式时指定滚动容器的id值，不指定则默认为 HTML 文档的根节点 body 元素',
+            'zh-CN':
+              '用于单页面 hash 路由模式时指定滚动容器的id值，id为空时则滚动容器默认为 HTML 文档的根节点 body 元素',
             'en-US':
-              'When using single page hash routing mode, specify the id value of the scrolling container. If not specified, it defaults to the root node body element of the HTML document'
+              'When used in single page hash routing mode, specify the id value of the scrolling container. If the id is empty, the scrolling container defaults to the body element of the root node of the HTML document'
           },
           'demoId': 'set-container'
         },
@@ -97,23 +98,13 @@ export default {
         }
       ],
       'events': [
-        {
-          'name': 'link-click',
-          'type': '(event: Event, currentLink: {link: string, title: string}) => void',
-          'defaultValue': '',
-          'desc': {
-            'zh-CN': '锚点点击事件； currentLink: {link: 当前锚点链接, title: 当前锚点标题 }',
-            'en-US': 'Anchor click event; currentLink: {link: Current anchor link, title: Current anchor title}'
-          },
-          'demoId': 'set-container'
-        },
         {
           'name': 'change',
           'type': '(hash: string) => void',
           'defaultValue': '',
           'desc': {
-            'zh-CN': '锚点链接改变事件； hash: 当前锚点的 hash 值',
-            'en-US': 'Anchor link change event; hash: hash value of the current anchor point'
+            'zh-CN': '锚点链接改变事件',
+            'en-US': 'Anchor link change event'
           },
           'demoId': 'change'
         },
@@ -122,11 +113,21 @@ export default {
           'type': '(hash: string) => void',
           'defaultValue': '',
           'desc': {
-            'zh-CN': '[deprecated v3.12.0废弃，v3.17.0移除；移除原因：命名规范，使用change代替]',
+            'zh-CN': '使用change代替；[deprecated v3.12.0废弃，v3.17.0移除；移除原因：命名规范]',
             'en-US':
-              '[deprecated v3.12.0 abandoned, v3.17.0 removed; reason for removal: naming convention, use change instead]'
+              'use change instead [deprecated v3.12.0 abandoned, v3.17.0 removed; reason for removal: naming convention]'
           },
           'demoId': 'change'
+        },
+        {
+          'name': 'link-click',
+          'type': '(event: Event, currentLink: {link: string, title: string}) => void',
+          'defaultValue': '',
+          'desc': {
+            'zh-CN': '锚点点击事件',
+            'en-US': 'Anchor click event'
+          },
+          'demoId': 'set-container'
         }
       ],
       'slots': []

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

@@ -1,7 +1,7 @@
 <template>
   <tiny-layout>
     <tiny-row>
-      <tiny-button>按钮</tiny-button>
+      <tiny-button>默认按钮</tiny-button>
       <tiny-button type="primary" native-type="submit"> 主要按钮 </tiny-button>
       <tiny-button type="success"> 成功按钮 </tiny-button>
       <tiny-button type="info"> 信息按钮 </tiny-button>

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

@@ -1,7 +1,7 @@
 <template>
   <tiny-layout>
     <tiny-row>
-      <tiny-button>按钮</tiny-button>
+      <tiny-button>默认按钮</tiny-button>
       <tiny-button type="primary" native-type="submit"> 主要按钮 </tiny-button>
       <tiny-button type="success"> 成功按钮 </tiny-button>
       <tiny-button type="info"> 信息按钮 </tiny-button>

package/demos/pc/app/button/dynamic-disabled-composition-api.vue

@@ -2,7 +2,6 @@
   <tiny-layout>
     <tiny-row> 是否禁用：<tiny-switch v-model="disabled"></tiny-switch> </tiny-row>
     <tiny-row>
-      <tiny-button :icon="IconSearch" type="text" size="mini" :disabled="disabled"></tiny-button>
       <tiny-button :disabled="disabled">默认按钮</tiny-button>
       <tiny-button type="primary" :disabled="disabled">主要按钮</tiny-button>
       <tiny-button type="success" :disabled="disabled">成功按钮</tiny-button>

package/demos/pc/app/button/dynamic-disabled.spec.js

@@ -9,6 +9,9 @@ test('测试禁用状态是否生效', async ({ page }) => {
 
   await switchBtn.click()
   await expect(demo.locator('.tiny-button').first()).toBeDisabled()
+  await expect(demo.locator('.tiny-button').first()).toHaveCSS('background-color', 'rgb(245, 245, 246)')
+  await expect(demo.locator('.tiny-button').first()).toHaveCSS('color', 'rgb(173, 176, 184)')
+  await expect(demo.locator('.tiny-button').first()).toHaveCSS('border-bottom-color', 'rgb(223, 225, 230)')
   await expect(demo.getByRole('button', { name: '默认按钮' }).first()).toBeDisabled()
   await expect(demo.getByRole('button', { name: '主要按钮' }).first()).toBeDisabled()
   await expect(demo.getByRole('button', { name: '成功按钮' }).first()).toBeDisabled()

package/demos/pc/app/button/dynamic-disabled.vue

@@ -2,7 +2,6 @@
   <tiny-layout>
     <tiny-row> 是否禁用：<tiny-switch v-model="disabled"></tiny-switch> </tiny-row>
     <tiny-row>
-      <tiny-button :icon="IconSearch" type="text" size="mini" :disabled="disabled"></tiny-button>
       <tiny-button :disabled="disabled">默认按钮</tiny-button>
       <tiny-button type="primary" :disabled="disabled">主要按钮</tiny-button>
       <tiny-button type="success" :disabled="disabled">成功按钮</tiny-button>

package/demos/pc/app/button/icon-composition-api.vue

@@ -2,7 +2,7 @@
   <div>
     <tiny-layout>
       <tiny-row>
-        <tiny-button :icon="TinyIconSearch" type="text"> </tiny-button>
+        <tiny-button :icon="TinyIconSearch"> 图标按钮 </tiny-button>
         <tiny-button type="primary" :icon="TinyIconEdit"> 图标按钮 </tiny-button>
         <tiny-button type="success" :icon="TinyIconYes"> 图标按钮 </tiny-button>
         <tiny-button type="info" :icon="TinyIconMail"> 图标按钮 </tiny-button>
@@ -10,6 +10,7 @@
         <tiny-button type="danger" :icon="TinyIconDel"> 图标按钮 </tiny-button>
       </tiny-row>
       <tiny-row>
+        <tiny-button :icon="TinyIconSearch"> </tiny-button>
         <tiny-button type="primary" :icon="TinyIconEdit"> </tiny-button>
         <tiny-button type="success" :icon="TinyIconYes"> </tiny-button>
         <tiny-button type="info" :icon="TinyIconMail"></tiny-button>

package/demos/pc/app/button/icon.vue

@@ -2,7 +2,7 @@
   <div>
     <tiny-layout>
       <tiny-row>
-        <tiny-button :icon="IconSearch" type="text"> </tiny-button>
+        <tiny-button :icon="IconSearch"> 图标按钮 </tiny-button>
         <tiny-button type="primary" :icon="IconEdit"> 图标按钮 </tiny-button>
         <tiny-button type="success" :icon="IconYes"> 图标按钮 </tiny-button>
         <tiny-button type="info" :icon="IconMail"> 图标按钮 </tiny-button>
@@ -10,6 +10,7 @@
         <tiny-button type="danger" :icon="IconDel"> 图标按钮 </tiny-button>
       </tiny-row>
       <tiny-row>
+        <tiny-button :icon="IconSearch"> </tiny-button>
         <tiny-button type="primary" :icon="IconEdit"> </tiny-button>
         <tiny-button type="success" :icon="IconYes"> </tiny-button>
         <tiny-button type="info" :icon="IconMail"></tiny-button>

package/demos/pc/app/grid/data-source/static-data-composition-api.vue

@@ -17,7 +17,7 @@
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import { Grid as TinyGrid, GridColumn as TinyGridColumn } from '@opentiny/vue'
+import { Grid as TinyGrid, GridColumn as TinyGridColumn, Button as TinyButton } from '@opentiny/vue'
 
 const tableData = ref([
   {

package/demos/pc/app/grid/expand/expand-config-composition-api.vue

@@ -84,7 +84,7 @@ onMounted(() => {
 
   allData.forEach((item, index) => {
     if (index % 2 === 0) {
-      expandConfigData.value.expandRowKeys.push(item._RID) // 添加默认展开指定行
+      expandConfigData.expandRowKeys.push(item._RID) // 添加默认展开指定行
     }
   })
 })

package/demos/pc/app/grid/filter/simple-date-filter.spec.ts

@@ -4,29 +4,11 @@ test('简化版筛选面板-时间日期菜单', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('grid-filter#filter-simple-date-filter')
   await page.getByRole('cell', { name: '开始时间' }).getByRole('img').click()
-  await page
-    .locator('li')
-    .filter({
-      hasText: '开始日期2023 年11 月日一二三四五六29303112345678910111213141516171819202122232425262728293012'
-    })
-    .getByRole('textbox')
-    .click()
-  await page.getByRole('textbox', { name: '选择日期' }).click()
+  await page.locator('.tiny-input__suffix-inner').nth(0).click()
   await page.getByRole('textbox', { name: '选择日期' }).fill('2021-12-03')
-  await page.getByRole('textbox', { name: '选择时间' }).click()
   await page.getByRole('button', { name: '确定' }).nth(1).click()
-  await page.getByRole('button', { name: '确定' }).nth(1).click()
-  await page
-    .locator('li')
-    .filter({
-      hasText: '结束日期2023 年11 月日一二三四五六29303112345678910111213141516171819202122232425262728293012'
-    })
-    .getByRole('textbox')
-    .click()
-  await page.getByRole('textbox', { name: '选择日期' }).click()
+  await page.locator('.tiny-input__suffix-inner').nth(1).click()
   await page.getByRole('textbox', { name: '选择日期' }).fill('2023-11-19')
-  await page.getByRole('textbox', { name: '选择时间' }).click()
-  await page.getByRole('button', { name: '确定' }).nth(1).click()
   await page.getByRole('button', { name: '确定' }).nth(1).click()
   await page.getByRole('button', { name: '确定' }).click()
   await expect(page.getByRole('cell', { name: 'Elisa Menez' }).getByText('Elisa Menez')).toBeVisible()

package/demos/pc/app/grid/operation-column/selection-config-composition-api.vue

@@ -30,7 +30,7 @@
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import { Grid as TinyGrid, GridColumn as TinyGridColumn, Button as TinyButton } from '@opentiny/vue'
+import { Grid as TinyGrid, GridColumn as TinyGridColumn } from '@opentiny/vue'
 
 const tableData = ref([
   {

package/demos/pc/app/grid/operation-column/selection-config.vue

@@ -29,13 +29,12 @@
 </template>
 
 <script lang="jsx">
-import { Grid, GridColumn, Button } from '@opentiny/vue'
+import { Grid, GridColumn } from '@opentiny/vue'
 
 export default {
   components: {
     TinyGrid: Grid,
-    TinyGridColumn: GridColumn,
-    TinyButton: Button
+    TinyGridColumn: GridColumn
   },
   data() {
     const tableData = [

package/demos/pc/app/grid/slot/editor-slot-composition-api.vue

@@ -15,7 +15,7 @@
   </div>
 </template>
 
-<script>
+<script setup>
 import { ref } from 'vue'
 import { Grid as TinyGrid, GridColumn as TinyGridColumn, Input as TinyInput } from '@opentiny/vue'
 

package/demos/pc/app/grid/slot/header-slot-composition-api.vue

@@ -5,7 +5,9 @@
       <tiny-grid-column field="name" title="名称"></tiny-grid-column>
       <tiny-grid-column field="employees" title="员工人数"></tiny-grid-column>
       <tiny-grid-column field="area" title="所属区域">
-        <template #header> <icon-mark-on></icon-mark-on> <span class="location-area">位置区域</span> </template>
+        <template #header>
+          <tiny-icon-mark-on></tiny-icon-mark-on> <span class="location-area">位置区域</span>
+        </template>
       </tiny-grid-column>
       <tiny-grid-column field="address" title="地址"></tiny-grid-column>
       <tiny-grid-column field="introduction" title="公司简介" show-overflow></tiny-grid-column>
@@ -70,6 +72,7 @@ const tableData = ref([
 ])
 const TinyIconMarkOn = IconMarkOn()
 </script>
+
 <style scoped>
 .location-area {
   margin-left: 10px;

package/demos/pc/app/grid/slot/header-slot.vue

@@ -13,7 +13,7 @@
   </div>
 </template>
 
-<script lang="jsx">
+<script>
 import { Grid, GridColumn } from '@opentiny/vue'
 import { IconMarkOn } from '@opentiny/vue-icon'
 
@@ -79,6 +79,7 @@ export default {
   }
 }
 </script>
+
 <style scoped>
 .location-area {
   margin-left: 10px;

package/demos/pc/app/icon/basic-usage.spec.js

@@ -4,5 +4,12 @@ test('test', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('icon#basic-usage')
 
-  await expect(page.locator('.icon-demo > svg').first()).toHaveCSS('font-size', '48px')
+  const icons = page.locator('.icon-demo > svg')
+
+  await expect(icons.first()).toHaveCSS('font-size', '48px')
+
+  for (let i = 0; i < 5; i++) {
+    await expect(icons.nth(i)).toHaveCSS('width', '48px')
+    await expect(icons.nth(i)).toHaveCSS('height', '48px')
+  }
 })