@opentinyvue/vue-docs 3.22.0 → 3.22.2

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

@@ -3,33 +3,37 @@ import { test, expect } from '@playwright/test'
 test('事件', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('drawer#events')
-
-  const drawer = page.locator('.tiny-drawer__main')
+  const demo = page.locator('#events')
+  const drawer = demo.locator('.tiny-drawer__main')
 
   // 显示事件
   const showMsg = page.locator('.tiny-modal.type__message').filter({ hasText: '打开事件' }).first()
-  await page.getByRole('button', { name: '点击打开抽屉' }).click()
+  await demo.getByRole('button', { name: '点击打开抽屉' }).click()
   await expect(showMsg).toBeVisible()
-  await expect(drawer).toBeVisible()
 
   // 确定事件
   const confirmMsg = page.locator('.tiny-modal.type__message').filter({ hasText: '确定事件' }).first()
-  await page.getByRole('button', { name: '确定' }).click()
+  await demo.getByRole('button', { name: '确定' }).click()
   await expect(confirmMsg).toBeVisible()
-  await expect(drawer).not.toBeVisible()
+})
 
+test('close事件', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('drawer#events')
+  const demo = page.locator('#events')
+  const drawer = demo.locator('.tiny-drawer__main')
   // 关闭事件
   const closeMsg = page.locator('.tiny-modal.type__message').filter({ hasText: '关闭事件' }).first()
-  await page.getByRole('button', { name: '点击打开抽屉' }).click()
+  await demo.getByRole('button', { name: '点击打开抽屉' }).click()
   // 右上角关闭按钮
   await drawer.locator('.tiny-drawer__headerbtn').click()
   await expect(closeMsg).toBeVisible()
   // 底部按钮关闭
-  await page.getByRole('button', { name: '点击打开抽屉' }).click()
-  await page.getByRole('button', { name: '取消' }).click()
+  await demo.getByRole('button', { name: '点击打开抽屉' }).click()
+  await demo.getByRole('button', { name: '取消' }).click()
   await expect(closeMsg).toBeVisible()
   // 点击蒙层关闭
-  await page.getByRole('button', { name: '点击打开抽屉' }).click()
-  await page.locator('.tiny-drawer__mask').click()
+  await demo.getByRole('button', { name: '点击打开抽屉' }).click()
+  await demo.locator('.tiny-drawer__mask').click()
   await expect(closeMsg).toBeVisible()
 })

package/demos/pc/app/drawer/footer-slot.spec.ts

@@ -3,11 +3,11 @@ import { test, expect } from '@playwright/test'
 test('底部插槽', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('drawer#footer-slot')
-
-  const drawer = page.locator('.tiny-drawer')
+  const demo = page.locator('#footer-slot')
+  const drawer = demo.locator('.tiny-drawer')
   const footer = drawer.locator('.tiny-drawer__footer')
 
-  await page.getByRole('button', { name: '底部插槽示例' }).click()
+  await demo.getByRole('button', { name: '底部插槽示例' }).click()
 
   await page.waitForTimeout(300)
   await expect(footer).toBeVisible()

package/demos/pc/app/drawer/header-right-slot.spec.ts

@@ -3,11 +3,11 @@ import { test, expect } from '@playwright/test'
 test('头部右侧插槽', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('drawer#header-right-slot')
-
-  const drawer = page.locator('.tiny-drawer__main')
+  const demo = page.locator('#header-right-slot')
+  const drawer = demo.locator('.tiny-drawer__main')
   const headerRight = drawer.locator('.tiny-drawer__header-right')
 
-  await page.getByRole('button', { name: '头部右侧插槽示例' }).click()
+  await demo.getByRole('button', { name: '头部右侧插槽示例' }).click()
   await expect(headerRight).toBeVisible()
   await expect(headerRight).toContainText('自定义头部右侧')
 })

package/demos/pc/app/drawer/header-slot.spec.ts

@@ -3,10 +3,10 @@ import { test, expect } from '@playwright/test'
 test('头部插槽', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('drawer#header-slot')
-
-  const drawer = page.locator('.tiny-drawer__main')
+  const demo = page.locator('#header-slot')
+  const drawer = demo.locator('.tiny-drawer__main')
   const header = drawer.locator('.tiny-drawer__header-wrapper')
-  await page.getByRole('button', { name: '头部插槽示例' }).click()
+  await demo.getByRole('button', { name: '头部插槽示例' }).click()
   await expect(header.locator('> div')).toHaveClass('my-header')
   await expect(header).toContainText('自定义头部标题')
 })

package/demos/pc/app/drawer/mask-closable.spec.ts

@@ -3,9 +3,9 @@ import { test, expect } from '@playwright/test'
 test('点击遮罩层不关闭', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('drawer#mask-closable')
-
-  const drawer = page.locator('.tiny-drawer__main')
-  await page.getByRole('button', { name: '单击遮罩层不关闭抽屉' }).click()
-  await page.locator('.tiny-drawer__mask').click()
+  const demo = page.locator('#mask-closable')
+  const drawer = demo.locator('.tiny-drawer__main')
+  await demo.getByRole('button', { name: '单击遮罩层不关闭抽屉' }).click()
+  await demo.locator('.tiny-drawer__mask').click()
   await expect(drawer).toBeVisible()
 })

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

@@ -3,8 +3,8 @@ import { test, expect } from '@playwright/test'
 test('抽屉方向', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('drawer#placement')
-
-  const drawer = page.locator('.tiny-drawer__main')
+  const demo = page.locator('#placement')
+  const drawer = demo.locator('.tiny-drawer__main')
 
   await page.getByRole('button', { name: 'left' }).click()
   await expect(drawer).toHaveCSS('left', '0px')

package/demos/pc/app/drawer/show-footer.spec.ts

@@ -3,9 +3,8 @@ import { test, expect } from '@playwright/test'
 test('底部显示', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('drawer#show-footer')
-
-  const drawerFooter = page.locator('.tiny-drawer__header')
-
-  await page.getByRole('button', { name: '显示底部' }).click()
+  const demo = page.locator('#show-footer')
+  const drawerFooter = demo.locator('.tiny-drawer__header')
+  await demo.getByRole('button', { name: '显示底部' }).click()
   await expect(drawerFooter).toBeVisible()
 })

package/demos/pc/app/drawer/use-through-method-composition-api.vue

@@ -7,7 +7,6 @@
 <script lang="tsx" setup>
 import { ref } from 'vue'
 import { TinyDrawer, TinyButton, Notify } from '@opentiny/vue'
-import { iconHelp } from '@opentiny/vue-icon'
 
 let drawerInstance = null
 
@@ -16,7 +15,6 @@ const closeDrawer = () => {
     drawerInstance.close()
   }
 }
-const IconHelp = iconHelp()
 const config = ref({
   // props
   title: '这是一个通过方法打开的抽屉',
@@ -41,12 +39,12 @@ const config = ref({
   // 通过属性 customSlots 设置插槽，插槽内容可以是 string | VNode | ({h, $drawer}) => VNode
   customSlots: {
     // 使用 h 函数
-    default: (h) => h('p', { class: '' }, '抽屉主体内容。'),
+    default: (h) => h('div', { class: '' }, ''),
     // 返回 VNode 节点的方法，可通过参数中 $drawer 访问到组件实例
-    headerRight: () => <IconHelp style="width:20px;height:20px"></IconHelp>,
+    headerRight: '',
     // 直接赋值 VNode
     footer: (
-      <TinyButton type="primary" onClick={closeDrawer}>
+      <TinyButton type="primary" round onClick={closeDrawer}>
         点击关闭
       </TinyButton>
     )

package/demos/pc/app/drawer/use-through-method.spec.ts

@@ -3,12 +3,10 @@ import { test, expect } from '@playwright/test'
 test('通过方法调用', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('drawer#use-through-method')
-
-  const drawer = page.locator('.tiny-drawer__main')
-  await page.getByRole('button', { name: '点击打开抽屉' }).click()
-  await expect(drawer).toBeVisible()
-  await expect(drawer.locator('.tiny-drawer__header')).toHaveText('这是一个通过方法打开的抽屉')
-  await expect(drawer.locator('.tiny-drawer__body')).toHaveText('抽屉主体内容。')
-  await drawer.getByRole('button', { name: '点击关闭' }).click()
-  await expect(page.locator('.tiny-drawer__main')).not.toBeVisible()
+  const demo = page.locator('#use-through-method')
+  const notify = page.locator('.tiny-notify__title')
+  await demo.getByRole('button', { name: '点击打开抽屉' }).click()
+  await page.locator('.tiny-notify__icon-close > .tiny-svg').click()
+  await page.getByRole('button', { name: '点击关闭' }).click()
+  await expect(notify).toHaveText('close 事件')
 })

package/demos/pc/app/drawer/use-through-method.vue

@@ -6,7 +6,6 @@
 
 <script lang="tsx">
 import { TinyDrawer, TinyButton, Notify } from '@opentiny/vue'
-import { iconHelp } from '@opentiny/vue-icon'
 
 export default {
   components: {
@@ -22,7 +21,6 @@ export default {
       this.drawerInstance.close()
     },
     showDrawer() {
-      const IconHelp = iconHelp()
       const config = {
         // props
         title: '这是一个通过方法打开的抽屉',
@@ -47,12 +45,12 @@ export default {
         // 通过属性 customSlots 设置插槽，插槽内容可以是 string | VNode | ({h, $drawer}) => VNode
         customSlots: {
           // 使用 h 函数
-          default: (h) => h('p', { class: '' }, '抽屉主体内容。'),
+          default: (h) => h('div', { class: '' }, ''),
           // 返回 VNode 节点的方法，可通过参数中 $drawer 访问到组件实例
-          headerRight: () => <IconHelp style="width:20px;height:20px"></IconHelp>,
+          headerRight: '',
           // 直接赋值 VNode
           footer: (
-            <TinyButton type="primary" onClick={this.closeDrawer}>
+            <TinyButton type="primary" round onClick={this.closeDrawer}>
               点击关闭
             </TinyButton>
           )

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

@@ -1,6 +1,8 @@
 export default {
   column: '2',
   owner: '',
+  show: true,
+  cloud: true,
   demos: [
     {
       demoId: 'basic-usage',
@@ -223,5 +225,190 @@ export default {
       },
       codeFiles: ['events.vue']
     }
+  ],
+  features: [
+    {
+      id: 'service',
+      name: '方法调用',
+      support: {
+        value: true
+      },
+      description: '通过 Drawer.service 方法可配置并打开抽屉，方法返回组件实例，可调用其 close 方法关闭组件。',
+      cloud: {
+        value: true
+      },
+      apis: ['Drawer.service'],
+      demos: ['use-through-method']
+    },
+    {
+      id: 'placement',
+      name: '抽屉方向',
+      support: {
+        value: true
+      },
+      description: '通过 placement 属性设置抽屉的方向，可选值有 left、right、top、bottom，默认值为 right。',
+      cloud: {
+        value: true
+      },
+      apis: ['placement'],
+      demos: ['placement']
+    },
+    {
+      id: 'tips-props',
+      name: '帮助提示',
+      support: {
+        value: true
+      },
+      description: '通过 tips-props 属性可自定义标题帮助提示信息。',
+      cloud: {
+        value: true
+      },
+      apis: ['tips-props'],
+      demos: ['tips-props']
+    },
+    {
+      id: 'width',
+      name: '抽屉宽度',
+      support: {
+        value: true
+      },
+      description: '通过 width 属性设置抽屉的宽度，默认值为 500px。',
+      cloud: {
+        value: true
+      },
+      apis: ['width'],
+      demos: ['width']
+    },
+    {
+      id: 'dragable',
+      name: '宽高可拖拽',
+      support: {
+        value: true
+      },
+      description: '通过 dragable 属性开启抽屉宽度/高度拖拽功能。当抽屉位于左右两侧时可拖拽宽度，上下两侧可拖拽高度。',
+      cloud: {
+        value: true
+      },
+      apis: ['dragable'],
+      demos: ['dragable']
+    },
+    {
+      id: 'mask',
+      name: '遮罩层显示隐藏',
+      support: {
+        value: true
+      },
+      description: '通过 mask 属性可以控制遮罩层显示隐藏，默认值为 true。',
+      cloud: {
+        value: true
+      },
+      apis: ['mask'],
+      demos: ['mask']
+    },
+    {
+      id: 'before-close',
+      name: '拦截抽屉关闭',
+      support: {
+        value: true
+      },
+      description:
+        '通过 before-close 属性可以配置一个拦截弹窗关闭的方法。如果方法返回 false 值，则拦截弹窗关闭；否则不拦截。',
+      cloud: {
+        value: true
+      },
+      apis: ['before-close'],
+      demos: ['before-close']
+    },
+    {
+      id: 'mask-closable',
+      name: '点击遮罩层关闭',
+      support: {
+        value: true
+      },
+      description: '通过 mask-closable 属性控制是否可以通过点击遮罩层关闭抽屉，默认值为 true。',
+      cloud: {
+        value: true
+      },
+      apis: ['mask-closable'],
+      demos: ['mask-closable']
+    },
+    {
+      id: 'show-close',
+      name: '关闭图标显示',
+      support: {
+        value: true
+      },
+      description: '通过 show-close 控制是否显示关闭图标，默认值为 true。',
+      cloud: {
+        value: true
+      },
+      apis: ['show-close'],
+      demos: ['show-close']
+    },
+    {
+      id: 'show-header',
+      name: '头部显示',
+      support: {
+        value: true
+      },
+      description: '通过 show-header 控制是否显示头部，默认值为 true。',
+      cloud: {
+        value: true
+      },
+      apis: ['show-header'],
+      demos: ['show-header']
+    },
+    {
+      id: 'show-footer',
+      name: '底部显示',
+      support: {
+        value: true
+      },
+      description: '通过 show-footer 控制是否显示底部，默认值为 false。',
+      cloud: {
+        value: true
+      },
+      apis: ['show-footer'],
+      demos: ['show-footer']
+    },
+    {
+      id: 'z-index',
+      name: '自定义堆叠顺序',
+      support: {
+        value: true
+      },
+      description: '通过 z-index 属性设置自定义堆叠顺序。',
+      cloud: {
+        value: true
+      },
+      apis: ['z-index'],
+      demos: ['z-index']
+    },
+    {
+      id: 'slots',
+      name: '插槽',
+      support: {
+        value: true
+      },
+      description: '支持 header、header-right、footer 等插槽自定义内容。',
+      cloud: {
+        value: true
+      },
+      apis: ['header-slot', 'header-right-slot', 'footer-slot'],
+      demos: ['header-slot', 'header-right-slot', 'footer-slot']
+    },
+    {
+      id: 'events',
+      name: '事件',
+      support: {
+        value: true
+      },
+      description: '支持 open、confirm、close 等事件。',
+      cloud: {
+        value: true
+      },
+      apis: ['open', 'confirm', 'close'],
+      demos: ['events']
+    }
   ]
 }

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

@@ -3,8 +3,9 @@ import { test, expect } from '@playwright/test'
 test('抽屉宽度', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('drawer#width')
+  const demo = page.locator('#width')
+  const drawer = demo.locator('.tiny-drawer__main')
 
-  const drawer = page.locator('.tiny-drawer__main')
   await page.getByRole('button', { name: '设置宽度为 900px' }).click()
   const { width: width1 } = await drawer.boundingBox()
   expect(Math.round(width1)).toEqual(900)

package/demos/pc/app/drawer/z-index.spec.ts

@@ -3,8 +3,8 @@ import { test, expect } from '@playwright/test'
 test('自定义堆叠顺序', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('drawer#z-index')
-
-  const drawer = page.locator('.tiny-drawer__main')
+  const demo = page.locator('#z-index')
+  const drawer = demo.locator('.tiny-drawer__main')
   await page.getByRole('button', { name: '自定义 z-index' }).click()
   await expect(drawer).toHaveCSS('z-index', '3000')
 })

package/demos/pc/app/drop-times/webdoc/drop-times.js

@@ -1,6 +1,8 @@
 export default {
   column: '2',
   owner: '',
+  show: true,
+  cloud: true,
   demos: [
     {
       demoId: 'basic-usage',
@@ -40,5 +42,46 @@ export default {
       },
       codeFiles: ['size.vue']
     }
+  ],
+  features: [
+    {
+      id: 'time-range',
+      name: '时间区间',
+      support: {
+        value: true
+      },
+      description: '通过 start 设置区间的起始时间，默认为 0，end 设置区间的结束时间，默认为 24 * 60。',
+      cloud: {
+        value: true
+      },
+      apis: ['start', 'end'],
+      demos: ['start-end-step']
+    },
+    {
+      id: 'step',
+      name: '步长设置',
+      support: {
+        value: true
+      },
+      description: '通过 step 设置间隔的步长，默认为 15。',
+      cloud: {
+        value: true
+      },
+      apis: ['step'],
+      demos: ['start-end-step']
+    },
+    {
+      id: 'size',
+      name: '尺寸',
+      support: {
+        value: true
+      },
+      description: '可设置为 medium、small、mini。',
+      cloud: {
+        value: true
+      },
+      apis: ['size'],
+      demos: ['size']
+    }
   ]
 }

package/demos/pc/app/dropdown/inherit-width-composition-api.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="demo-drop">
     <p class="demo-dropdown">场景 1：默认</p>
-    <tiny-dropdown split-button type="success">
+    <tiny-dropdown border type="success">
       更多菜单（标题很长示例）
       <template #dropdown>
         <tiny-dropdown-menu>
@@ -15,7 +15,7 @@
     </tiny-dropdown>
     <br /><br />
     <p class="demo-dropdown">场景 2：设置 inherit-width</p>
-    <tiny-dropdown split-button type="success" :inherit-width="true">
+    <tiny-dropdown border type="success" :inherit-width="true">
       更多菜单（标题很长示例）
       <template #dropdown>
         <tiny-dropdown-menu>

package/demos/pc/app/dropdown/inherit-width.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="demo-drop">
     <p class="demo-dropdown">场景 1：默认</p>
-    <tiny-dropdown split-button type="success">
+    <tiny-dropdown border type="success">
       更多菜单（标题很长示例）
       <template #dropdown>
         <tiny-dropdown-menu>
@@ -15,7 +15,7 @@
     </tiny-dropdown>
     <br /><br />
     <p class="demo-dropdown">场景 2：设置 inherit-width</p>
-    <tiny-dropdown split-button type="success" :inherit-width="true">
+    <tiny-dropdown type="success" border :inherit-width="true">
       更多菜单（标题很长示例）
       <template #dropdown>
         <tiny-dropdown-menu>

package/demos/pc/app/dropdown/show-icon-composition-api.vue

@@ -58,14 +58,20 @@ p {
   margin-top: 30px;
 }
 
-.tiny-dropdown.only-icon {
-  :deep(.tiny-dropdown__trigger) {
-    .tiny-svg {
-      fill: #191919;
-      &:hover {
-        fill: #191919;
+.tiny-dropdown {
+  &.only-icon {
+    :deep(.tiny-dropdown__trigger) {
+      .tiny-svg {
+        fill: var(--tv-color-icon-control);
+        &:hover {
+          fill: var(--tv-color-icon-control);
+        }
       }
     }
   }
+
+  :deep(.tiny-dropdown__prefix-inner) {
+    fill: var(--tv-color-icon-control);
+  }
 }
 </style>

package/demos/pc/app/dropdown/show-icon.vue

@@ -68,14 +68,20 @@ p {
   margin-top: 30px;
 }
 
-.tiny-dropdown.only-icon {
-  :deep(.tiny-dropdown__trigger) {
-    .tiny-svg {
-      fill: #191919;
-      &:hover {
-        fill: #191919;
+.tiny-dropdown {
+  &.only-icon {
+    :deep(.tiny-dropdown__trigger) {
+      .tiny-svg {
+        fill: var(--tv-color-icon-control);
+        &:hover {
+          fill: var(--tv-color-icon-control);
+        }
       }
     }
   }
+
+  :deep(.tiny-dropdown__prefix-inner) {
+    fill: var(--tv-color-icon-control);
+  }
 }
 </style>

package/demos/pc/app/dropdown/size-composition-api.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="demo-drop">
     <p class="demo-dropdown">默认：</p>
-    <tiny-dropdown split-button type="primary">
+    <tiny-dropdown border type="primary">
       默认尺寸
       <template #dropdown>
         <tiny-dropdown-menu>
@@ -14,7 +14,7 @@
       </template>
     </tiny-dropdown>
     <p class="demo-dropdown">其他尺寸：</p>
-    <tiny-dropdown size="medium" split-button type="primary">
+    <tiny-dropdown size="medium" border type="primary">
       中等尺寸
       <template #dropdown>
         <tiny-dropdown-menu>
@@ -27,7 +27,7 @@
       </template>
     </tiny-dropdown>
 
-    <tiny-dropdown size="small" split-button type="primary">
+    <tiny-dropdown size="small" border type="primary">
       小型尺寸
       <template #dropdown>
         <tiny-dropdown-menu>
@@ -40,7 +40,7 @@
       </template>
     </tiny-dropdown>
 
-    <tiny-dropdown size="mini" split-button type="primary">
+    <tiny-dropdown size="mini" border type="primary">
       超小尺寸
       <template #dropdown>
         <tiny-dropdown-menu>

package/demos/pc/app/dropdown/size.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="demo-drop">
     <p class="demo-dropdown">默认：</p>
-    <tiny-dropdown split-button type="primary">
+    <tiny-dropdown border type="primary">
       默认尺寸
       <template #dropdown>
         <tiny-dropdown-menu>
@@ -14,7 +14,7 @@
       </template>
     </tiny-dropdown>
     <p class="demo-dropdown">其他尺寸：</p>
-    <tiny-dropdown size="medium" split-button type="primary">
+    <tiny-dropdown size="medium" border type="primary">
       中等尺寸
       <template #dropdown>
         <tiny-dropdown-menu>
@@ -27,7 +27,7 @@
       </template>
     </tiny-dropdown>
 
-    <tiny-dropdown size="small" split-button type="primary">
+    <tiny-dropdown size="small" border type="primary">
       小型尺寸
       <template #dropdown>
         <tiny-dropdown-menu>
@@ -40,7 +40,7 @@
       </template>
     </tiny-dropdown>
 
-    <tiny-dropdown size="mini" split-button type="primary">
+    <tiny-dropdown size="mini" border type="primary">
       超小尺寸
       <template #dropdown>
         <tiny-dropdown-menu>