@opentiny/vue-docs 2.2.23 → 3.16.1

package/demos/pc/app/config-provider/webdoc/config-provider.cn.md

@@ -1,7 +1,7 @@
 ---
-title: ConfigProvider 组件
+title: ConfigProvider 全局配置
 ---
 
-# ConfigProvider 组件
+# ConfigProvider 全局配置
 
 <div></div>

package/demos/pc/app/config-provider/webdoc/config-provider.en.md

@@ -1,7 +1,7 @@
 ---
-title: ConfigProvide Assembly
+title: ConfigProvider
 ---
 
-# ConfigProvide Assembly
+# ConfigProvider
 
 <div></div>

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

@@ -1,7 +1,7 @@
 ---
-title: Container 版型
+title: Container 容器布局
 ---
 
-# Container 版型
+# Container 容器布局
 
 <div> 内置5种常见布局版型，方便快速搭建页面。</div>

package/demos/pc/app/container/webdoc/container.en.md

@@ -1,7 +1,7 @@
 ---
-title: Container dimension
+title: Container
 ---
 
-# Container dimension
+# Container
 
 <div>Container component for layout, which facilitates page layout creation.</div>

package/demos/pc/app/dialog-box/dialog-top-height.spec.ts

@@ -4,7 +4,6 @@ test('dialogBox 弹窗距离顶部的高度', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('dialog-box#dialog-top-height')
   const dialogBox = page.locator('.tiny-dialog-box')
-  await page.getByRole('link', { name: '弹窗距离顶部的高度' }).click()
   await page.getByRole('button', { name: '显示在顶部' }).click()
   // 默认弹窗距离顶部的高度
   await expect(dialogBox.nth(0)).toHaveCSS('top', '0px')
@@ -12,5 +11,4 @@ test('dialogBox 弹窗距离顶部的高度', async ({ page }) => {
   await page.getByRole('button', { name: /300px/ }).click()
   // 自定义弹窗距离顶部的高度
   await expect(dialogBox.nth(1)).toHaveCSS('top', '300px')
-  await page.getByRole('button', { name: 'Close' }).nth(1).click()
 })

package/demos/pc/app/dialog-box/dialog-width.spec.ts

@@ -9,5 +9,4 @@ test('dialogBox 弹窗的宽度', async ({ page }) => {
   await page.getByRole('button', { name: 'Close' }).click()
   await page.getByRole('button', { name: /60%/ }).click()
   await expect(dialogBox.nth(1)).toBeVisible()
-  await page.getByRole('button', { name: '确 定' }).nth(1).click()
 })

package/demos/pc/app/dialog-box/fullscreen-composition-api.vue

@@ -1,7 +1,7 @@
 <template>
   <div>
     <tiny-button @click="boxVisibility = true">全屏弹窗</tiny-button>
-    <tiny-dialog-box fullscreen v-model:visible="boxVisibility" title="消息">
+    <tiny-dialog-box fullscreen v-model:visible="boxVisibility" title="消息" resize @resize="onResize">
       <span>弹窗适应整个窗口大小</span>
       <template #footer>
         <tiny-button type="primary" @click="boxVisibility = false">确 定</tiny-button>
@@ -15,4 +15,8 @@ import { ref } from 'vue'
 import { Button as TinyButton, DialogBox as TinyDialogBox } from '@opentiny/vue'
 
 const boxVisibility = ref(false)
+
+function onResize(event) {
+  console.log('触发了resize事件', event)
+}
 </script>

package/demos/pc/app/dialog-box/fullscreen.vue

@@ -1,7 +1,7 @@
 <template>
   <div>
     <tiny-button @click="boxVisibility = true">全屏弹窗</tiny-button>
-    <tiny-dialog-box fullscreen v-model:visible="boxVisibility" title="消息">
+    <tiny-dialog-box fullscreen v-model:visible="boxVisibility" title="消息" resize @resize="onResize">
       <span>弹窗适应整个窗口大小</span>
       <template #footer>
         <tiny-button type="primary" @click="boxVisibility = false">确 定</tiny-button>
@@ -22,6 +22,11 @@ export default {
     return {
       boxVisibility: false
     }
+  },
+  methods: {
+    onResize(event) {
+      console.log('触发了resize事件', event)
+    }
   }
 }
 </script>

package/demos/pc/app/dialog-box/transition-effect-composition-api.vue

@@ -0,0 +1,25 @@
+<template>
+  <div>
+    <tiny-button @click="boxVisibility = true"> 启动弹窗 </tiny-button>
+    <tiny-dialog-box
+      dialog-transition="enlarge"
+      :visible="boxVisibility"
+      @update:visible="boxVisibility = $event"
+      title="消息"
+      width="30%"
+    >
+      <span>启动弹窗动效</span>
+      <template #footer>
+        <tiny-button @click="boxVisibility = false">取消</tiny-button>
+        <tiny-button type="primary" @click="boxVisibility = false"> 确定 </tiny-button>
+      </template>
+    </tiny-dialog-box>
+  </div>
+</template>
+
+<script setup lang="jsx">
+import { ref } from 'vue'
+import { Button as TinyButton, DialogBox as TinyDialogBox } from '@opentiny/vue'
+
+const boxVisibility = ref(false)
+</script>

package/demos/pc/app/dialog-box/transition-effect.spec.ts

@@ -0,0 +1,12 @@
+import { test, expect } from '@playwright/test'
+
+test('启动弹出动效', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  const dialogBox = page.locator('.tiny-dialog-box')
+  await page.goto('dialog-box#transition-effect')
+  await page.getByRole('button', { name: '启动弹窗' }).click()
+  await page.waitForTimeout(400)
+  await page.locator('div').filter({ hasText: /^启动弹窗动效$/ })
+  await page.getByLabel('Close').click()
+  await expect(dialogBox).toBeHidden()
+})

package/demos/pc/app/dialog-box/transition-effect.vue

@@ -0,0 +1,34 @@
+<template>
+  <div>
+    <tiny-button @click="boxVisibility = true"> 启动弹窗 </tiny-button>
+    <tiny-dialog-box
+      dialog-transition="enlarge"
+      :visible="boxVisibility"
+      @update:visible="boxVisibility = $event"
+      title="消息"
+      width="30%"
+    >
+      <span>>启动弹窗动效</span>
+      <template #footer>
+        <tiny-button @click="boxVisibility = false"> 取消 </tiny-button>
+        <tiny-button type="primary" @click="boxVisibility = false"> 确定 </tiny-button>
+      </template>
+    </tiny-dialog-box>
+  </div>
+</template>
+
+<script>
+import { Button, DialogBox } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinyButton: Button,
+    TinyDialogBox: DialogBox
+  },
+  data() {
+    return {
+      boxVisibility: false
+    }
+  }
+}
+</script>

package/demos/pc/app/dialog-box/webdoc/dialog-box.js

@@ -220,9 +220,16 @@ export default {
         'en-US': 'Full-screen pop-up window'
       },
       desc: {
-        'zh-CN': '<p>可通过<code>fullscreen</code>属性设置<code>true</code>显示全屏弹窗。</p>\n',
-        'en-US':
-          '<p>Display full screen pop ups by setting the<code>fullscreen</code>attribute to<code>true</code>.</p>\n'
+        'zh-CN': `
+          可通过<code>fullscreen</code>属性设置弹窗是否为全屏状态, 默认值 为 <code>false</code>。<br>
+          可通过<code>resize</code>属性设置弹窗是否有切换全屏的功能, 默认值 为 <code>false</code>。<br>
+          可通过<code>resize</code>事件，监听弹窗切换全屏的事件。<br>
+          `,
+        'en-US': `
+          You can use the <code>fullscreen</code> property to set <code>true</code> to display the full-screen pop-up window.<br>
+          You can use the <code>resize</code> attribute to set whether the pop-up window has the full-screen switch function. The default value is <code>false</code>.<br>
+          The <code>resize</code> event can be used to listen to the event of switching the full screen in the pop-up window.<br>
+          `
       },
       codeFiles: ['fullscreen.vue']
     },
@@ -267,6 +274,20 @@ export default {
           '<p>By setting the event<code>@open</code>: triggered when the dialog box is opened<code>@opened</code>: triggered when the animation ends when the dialog box is opened<code>@close</code>: triggered when the dialog box is closed<code>@closed</code>: triggered when the animation ends when the dialog box is closed.</p>\n'
       },
       codeFiles: ['open-close-events.vue']
+    },
+    {
+      demoId: 'transition-effect',
+      name: {
+        'zh-CN': '启用弹出动效',
+        'en-US': 'Enable Pop-Up Effects'
+      },
+      desc: {
+        'zh-CN':
+          '<p>可通过配置 <code>dialog-transition</code> 属性为 <code>enlarge</code>，可启用 <code>DialogBox</code> 打开时逐渐放大的动效。</p>',
+        'en-US':
+          'You can set the <code>dialog-transition</code> attribute to <code>enlarge</code> to enable the zoom-in effect when the <code>DialogBox</code> is opened.'
+      },
+      codeFiles: ['transition-effect.vue']
     }
   ]
 }

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

@@ -1,7 +1,7 @@
 ---
-title: Divider 分隔线
+title: Divider 分割线
 ---
 
-# Divider 分隔线
+# Divider 分割线
 
-<div>Divider 分隔线组件，用于对不同内容的分隔。</div>
+<div>Divider 分割线组件，用于对不同内容的分隔。</div>

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

@@ -1,12 +1,8 @@
 <template>
   <div>
-    <tiny-button @click="fn" type="primary"> 抽屉组件 </tiny-button>
-    <tiny-drawer title="标题" :visible="visible" @update:visible="visible = $event">
-      <div>
-        <br />
-        <br />
-        <span>内容区域</span>
-      </div>
+    <tiny-button @click="openDrawer" type="primary"> 抽屉组件 </tiny-button>
+    <tiny-drawer title="标题" :visible="visible" @update:visible="visible = $event" @confirm="confirm">
+      <div style="padding: 32px">内容区域</div>
     </tiny-drawer>
   </div>
 </template>
@@ -17,7 +13,11 @@ import { Drawer as TinyDrawer, Button as TinyButton } from '@opentiny/vue'
 
 const visible = ref(false)
 
-function fn() {
+function openDrawer() {
   visible.value = true
 }
+
+function confirm() {
+  visible.value = false
+}
 </script>

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

@@ -1,12 +1,8 @@
 <template>
   <div>
-    <tiny-button @click="fn" type="primary"> 抽屉组件 </tiny-button>
-    <tiny-drawer title="标题" :visible="visible" @update:visible="visible = $event">
-      <div>
-        <br />
-        <br />
-        <span>内容区域</span>
-      </div>
+    <tiny-button @click="openDrawer" type="primary"> 抽屉组件 </tiny-button>
+    <tiny-drawer title="标题" :visible="visible" @update:visible="visible = $event" @confirm="confirm">
+      <div style="padding: 32px">内容区域</div>
     </tiny-drawer>
   </div>
 </template>
@@ -25,8 +21,11 @@ export default {
     }
   },
   methods: {
-    fn() {
+    openDrawer() {
       this.visible = true
+    },
+    confirm() {
+      this.visible = false
     }
   }
 }

package/demos/pc/app/drawer/before-close-composition-api.vue

@@ -1,7 +1,13 @@
 <template>
   <div class="demo-drawer">
     <tiny-button @click="toggleDrawer(true)" type="primary"> 点击展开 Drawer </tiny-button>
-    <tiny-drawer title="抽屉关闭将会被拦截" v-model:visible="visible" :before-close="onBeforeClose" show-footer>
+    <tiny-drawer
+      title="抽屉关闭将会被拦截"
+      v-model:visible="visible"
+      :before-close="onBeforeClose"
+      show-footer
+      @confirm="confirm"
+    >
       <tiny-button @click="toggleDrawer(false)" type="primary"> 关闭 Drawer </tiny-button>
     </tiny-drawer>
   </div>
@@ -21,4 +27,8 @@ const onBeforeClose = (type) => {
   Modal.message({ message: `beforeClose 回调参数 type =  ${type}`, status: 'info', duration: 5000 })
   return false
 }
+
+const confirm = () => {
+  visible.value = false
+}
 </script>

package/demos/pc/app/drawer/before-close.vue

@@ -5,6 +5,7 @@
       title="抽屉关闭将会被拦截"
       :visible="visible"
       @update:visible="visible = $event"
+      @confirm="confirm"
       show-footer
       :before-close="onBeforeClose"
     >
@@ -33,6 +34,9 @@ export default {
     onBeforeClose(type) {
       Modal.message({ message: `beforeClose 回调参数 type =  ${type}`, status: 'info', duration: 5000 })
       return false
+    },
+    confirm() {
+      this.visible = false
     }
   }
 }

package/demos/pc/app/drawer/close-event-composition-api.vue

@@ -1,12 +1,15 @@
 <template>
   <div>
-    <tiny-button @click="fn" type="primary"> 关闭事件示例 </tiny-button>
-    <tiny-drawer title="标题" :show-footer="true" :visible="visible" @update:visible="visible = $event" @close="close">
-      <div style="height: 200px; text-align: center">
-        <br />
-        <br />
-        <span>内容区域</span>
-      </div>
+    <tiny-button @click="openDrawer" type="primary"> 关闭事件示例 </tiny-button>
+    <tiny-drawer
+      title="标题"
+      :show-footer="true"
+      :visible="visible"
+      @update:visible="visible = $event"
+      @close="close"
+      @confirm="confirm"
+    >
+      <div style="padding: 32px">内容区域</div>
     </tiny-drawer>
   </div>
 </template>
@@ -17,11 +20,16 @@ import { Drawer as TinyDrawer, Button as TinyButton, Modal } from '@opentiny/vue
 
 const visible = ref(false)
 
-function fn() {
+function openDrawer() {
   visible.value = true
 }
 
 function close() {
   Modal.message('关闭事件')
 }
+
+function confirm() {
+  Modal.message({ message: '确认事件', status: 'success' })
+  visible.value = false
+}
 </script>

package/demos/pc/app/drawer/close-event.vue

@@ -1,12 +1,15 @@
 <template>
   <div>
-    <tiny-button @click="fn" type="primary"> 关闭事件示例 </tiny-button>
-    <tiny-drawer title="标题" :show-footer="true" :visible="visible" @update:visible="visible = $event" @close="close">
-      <div style="height: 200px; text-align: center">
-        <br />
-        <br />
-        <span>内容区域</span>
-      </div>
+    <tiny-button @click="openDrawer" type="primary"> 关闭事件示例 </tiny-button>
+    <tiny-drawer
+      title="标题"
+      :show-footer="true"
+      :visible="visible"
+      @update:visible="visible = $event"
+      @close="close"
+      @confirm="confirm"
+    >
+      <div style="padding: 32px">内容区域</div>
     </tiny-drawer>
   </div>
 </template>
@@ -25,11 +28,15 @@ export default {
     }
   },
   methods: {
-    fn() {
+    openDrawer() {
       this.visible = true
     },
     close() {
       Modal.message('关闭事件')
+    },
+    confirm() {
+      Modal.message({ message: '确认事件', status: 'success' })
+      this.visible = false
     }
   }
 }

package/demos/pc/app/drawer/confirm-event-composition-api.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <tiny-button @click="fn" type="primary"> 确认事件示例 </tiny-button>
+    <tiny-button @click="openDrawer" type="primary"> 确认事件示例 </tiny-button>
     <tiny-drawer
       title="标题"
       :show-footer="true"
@@ -8,11 +8,7 @@
       @update:visible="visible = $event"
       @confirm="confirm"
     >
-      <div style="height: 200px; text-align: center">
-        <br />
-        <br />
-        <span>内容区域</span>
-      </div>
+      <div style="padding: 32px">内容区域</div>
     </tiny-drawer>
   </div>
 </template>
@@ -23,11 +19,11 @@ import { Drawer as TinyDrawer, Button as TinyButton, Modal } from '@opentiny/vue
 
 const visible = ref(false)
 
-function fn() {
+function openDrawer() {
   visible.value = true
 }
 
 function confirm() {
-  Modal.message({ message: '确认事件', status: 'info' })
+  Modal.message({ message: '确认事件', status: 'success' })
 }
 </script>

package/demos/pc/app/drawer/confirm-event.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <tiny-button @click="fn" type="primary"> 确认事件示例 </tiny-button>
+    <tiny-button @click="openDrawer" type="primary"> 确认事件示例 </tiny-button>
     <tiny-drawer
       title="标题"
       :show-footer="true"
@@ -8,11 +8,7 @@
       @update:visible="visible = $event"
       @confirm="confirm"
     >
-      <div style="height: 200px; text-align: center">
-        <br />
-        <br />
-        <span>内容区域</span>
-      </div>
+      <div style="padding: 32px">内容区域</div>
     </tiny-drawer>
   </div>
 </template>
@@ -31,11 +27,12 @@ export default {
     }
   },
   methods: {
-    fn() {
+    openDrawer() {
       this.visible = true
     },
     confirm() {
-      Modal.message({ message: '确认事件', status: 'info' })
+      Modal.message({ message: '确认事件', status: 'success' })
+      this.visible = false
     }
   }
 }

package/demos/pc/app/drawer/dragable-composition-api.vue

@@ -1,8 +1,13 @@
 <template>
   <div>
-    <tiny-button @click="fn" type="primary"> 宽度拖拽 </tiny-button>
-    <tiny-drawer title="标题" dragable :visible="visible" @update:visible="visible = $event">
-      横向拖拽左边框可改变抽屉主体宽度
+    <tiny-button @click="openDrawer('width')" type="primary"> 宽度拖拽 </tiny-button>
+    <tiny-button @click="openDrawer('height')" type="primary"> 高度拖拽 </tiny-button>
+
+    <tiny-drawer :placement="placement" title="标题" dragable :visible="visible" @update:visible="visible = $event">
+      <div class="content">
+        <p v-if="placement === 'right'">横向拖拽左边框可改变抽屉主体宽度。</p>
+        <p v-else>竖向拖拽上边框可改变抽屉主体高度。</p>
+      </div>
     </tiny-drawer>
   </div>
 </template>
@@ -12,8 +17,17 @@ import { ref } from 'vue'
 import { Drawer as TinyDrawer, Button as TinyButton } from '@opentiny/vue'
 
 const visible = ref(false)
+const placement = ref('right')
 
-function fn() {
+function openDrawer(target) {
   visible.value = true
+  placement.value = target === 'width' ? 'right' : 'bottom'
 }
 </script>
+
+<style scoped>
+.content {
+  height: 300px;
+  padding: 16px 0;
+}
+</style>

package/demos/pc/app/drawer/dragable.spec.ts

@@ -1,23 +1,47 @@
 import { test, expect } from '@playwright/test'
 
-test('宽度拖拽功能', async ({ page }) => {
-  page.on('pageerror', (exception) => expect(exception).toBeNull())
-  await page.goto('drawer#dragable')
-
-  const drawer = page.locator('.tiny-drawer__main')
-  await page.getByRole('button', { name: '宽度拖拽' }).click()
-  await page.waitForTimeout(500)
-
-  // 获取拖拽元素的位置
-  const { x, y } = await drawer.boundingBox()
-
-  // 开始拖拽
-  await page.mouse.move(x + 2, y + 2)
-  await page.mouse.down()
-  await page.mouse.move(x - 300, y)
-  await page.mouse.up()
-
-  // 判断宽度是否变大
-  const { width } = await drawer.boundingBox()
-  expect(width).toBeGreaterThan(500)
+test.describe('可拖拽', () => {
+  test('宽度拖拽功能', async ({ page }) => {
+    page.on('pageerror', (exception) => expect(exception).toBeNull())
+    await page.goto('drawer#dragable')
+
+    const drawer = page.locator('.tiny-drawer__main')
+    await page.getByRole('button', { name: '宽度拖拽' }).click()
+    await page.waitForTimeout(500)
+
+    // 获取拖拽元素的位置
+    const { x, y, width: originWidth } = await drawer.boundingBox()
+
+    // 开始拖拽
+    await page.mouse.move(x + 2, y + 2)
+    await page.mouse.down()
+    await page.mouse.move(x - 300, y)
+    await page.mouse.up()
+
+    // 判断宽度是否变大
+    const { width } = await drawer.boundingBox()
+    expect(width).toBeGreaterThan(originWidth)
+  })
+
+  test('高度拖拽功能', async ({ page }) => {
+    page.on('pageerror', (exception) => expect(exception).toBeNull())
+    await page.goto('drawer#dragable')
+
+    const drawer = page.locator('.tiny-drawer__main')
+    await page.getByRole('button', { name: '高度拖拽' }).click()
+    await page.waitForTimeout(500)
+
+    // 获取拖拽元素的位置
+    const { x, y, height: initHeight } = await drawer.boundingBox()
+
+    // 开始拖拽
+    await page.mouse.move(x + 2, y + 2)
+    await page.mouse.down()
+    await page.mouse.move(x, y - 100)
+    await page.mouse.up()
+
+    // 判断宽度是否变大
+    const { height } = await drawer.boundingBox()
+    expect(height).toBeGreaterThan(initHeight)
+  })
 })

package/demos/pc/app/drawer/dragable.vue

@@ -1,8 +1,13 @@
 <template>
   <div>
-    <tiny-button @click="fn" type="primary"> 宽度拖拽 </tiny-button>
-    <tiny-drawer title="标题" dragable :visible="visible" @update:visible="visible = $event">
-      横向拖拽左边框可改变抽屉主体宽度
+    <tiny-button @click="openDrawer('width')" type="primary"> 宽度拖拽 </tiny-button>
+    <tiny-button @click="openDrawer('height')" type="primary"> 高度拖拽 </tiny-button>
+
+    <tiny-drawer :placement="placement" title="标题" dragable :visible="visible" @update:visible="visible = $event">
+      <div class="content">
+        <p v-if="placement === 'right'">横向拖拽左边框可改变抽屉主体宽度。</p>
+        <p v-else>竖向拖拽上边框可改变抽屉主体高度。</p>
+      </div>
     </tiny-drawer>
   </div>
 </template>
@@ -17,13 +22,22 @@ export default {
   },
   data() {
     return {
-      visible: false
+      visible: false,
+      placement: 'right'
     }
   },
   methods: {
-    fn() {
+    openDrawer(target) {
       this.visible = true
+      this.placement = target === 'width' ? 'right' : 'bottom'
     }
   }
 }
 </script>
+
+<style scoped>
+.content {
+  height: 300px;
+  padding: 16px 0;
+}
+</style>