npm - @opentiny/vue-docs - Versions diffs - 2.2.5 → 2.2.7 - Mend

@opentiny/vue-docs 2.2.5 → 2.2.7

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 (973) hide show

package/demos/pc/app/popover/basic-usage.spec.js CHANGED Viewed

@@ -4,9 +4,12 @@ test('基本用法', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('popover#basic-usage')
-  let button = page.getByRole('button', { name: '悬浮我提示' })
+  let button = page.getByRole('button', { name: '点击我提示' })
   let pop = page.getByRole('tooltip', { name: /这是一段内容/ })
+  let title = pop.locator('.tiny-popover__title')
   await button.click()
   await expect(pop).toBeVisible()
+  await expect(pop).toHaveCSS('width', '200px')
+  await expect(title).toHaveText('标题')
 })

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

@@ -1,7 +1,7 @@
 <template>
   <tiny-popover placement="top-start" title="标题" content="这是一段内容。" width="200">
     <template #reference>
-      <tiny-button>悬浮我提示</tiny-button>
+      <tiny-button>点击我提示</tiny-button>
     </template>
   </tiny-popover>
 </template>

package/demos/pc/app/popover/content.spec.js CHANGED Viewed

@@ -4,9 +4,13 @@ test('添加内容', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('popover#content')
-  let button = page.getByRole('button', { name: '通过插槽' })
-  let redSpan = page.getByText('tooltip', { name: '红色的' })
+  let button = page.getByRole('button', { name: '通过属性' })
+  let span = page.getByText('tooltip', { name: '这是一段内容' })
+  let button1 = page.getByRole('button', { name: '通过插槽' })
+  let redSpan1 = page.getByText('tooltip', { name: '红色的' })
   await button.click()
-  await expect(redSpan).toBeVisible()
+  await expect(span).toBeVisible()
+  await button1.click()
+  await expect(redSpan1).toBeVisible()
 })

package/demos/pc/app/popover/custom-popper.spec.js CHANGED Viewed

@@ -4,9 +4,30 @@ test('延迟隐藏', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('popover#custom-popper')
-  const button = page.getByRole('button', { name: '覆盖字体样式' })
-  const pop = page.locator('.custom-popover-demo-cls')
+  const button1 = page.getByRole('button', { name: '左侧位置弹出' })
+  const pop1 = page.getByRole('tooltip', { name: '我是一段内容' })
-  await button.hover()
-  await expect(pop).toBeVisible()
+  const button2 = page.getByRole('button', { name: '没有弹窗小箭头' })
+  const pop2 = page.getByRole('tooltip', { name: '我是一段内容' })
+  const button3 = page.getByRole('button', { name: '覆盖字体样式' })
+  const pop3 = page.locator('.custom-popover-demo-cls')
+  // 测试左侧弹出
+  await button1.hover()
+  await expect(pop1).toBeVisible()
+  let box1 = await button1.boundingBox()
+  let box2 = await pop1.boundingBox()
+  expect(box1.x > box2.x + box2.width)
+  await page.mouse.move(0, 0)
+  await page.waitForTimeout(20)
+  // 测试无箭头
+  await button2.hover()
+  await expect(pop2.locator('.popper__arrow')).toHaveCount(0)
+  // 测试字体
+  await button3.hover()
+  await expect(pop3).toBeVisible()
+  await expect(pop3).toHaveCSS('font-size', '16px')
 })

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

@@ -21,10 +21,11 @@
 <script setup lang="jsx">
 import { ref } from 'vue'
-import { Popover as TinyPopover, Button as TinyButton } from '@opentiny/vue'
+import { Popover as TinyPopover, Button as TinyButton, Switch as TinySwitch } from '@opentiny/vue'
 const disabled = ref(false)
 </script>
 <style scoped>
 .container {
   display: flex;

package/demos/pc/app/popover/events-composition-api.vue CHANGED Viewed

@@ -4,8 +4,8 @@
     width="200"
     @show="show"
     @hide="hide"
-    :after-leave="leave"
-    :after-enter="enter"
+    @after-leave="leave"
+    @after-enter="enter"
     trigger="hover"
     content="这是一段内容"
   >

package/demos/pc/app/popover/events.spec.js CHANGED Viewed

@@ -7,8 +7,12 @@ test('事件', async ({ page }) => {
   let button = page.getByRole('button', { name: '悬浮我触发' })
   let pop = page.getByRole('tooltip', { name: /这是一段内容/ })
   let notify1 = page.locator('.tiny-notify__content').filter({ hasText: /显示时触发/ })
+  let notify2 = page.locator('.tiny-notify__content').filter({ hasText: /隐藏时触发/ })
   await button.hover()
   await expect(pop).toBeVisible()
   await expect(notify1).toBeVisible()
+  await page.mouse.move(0, 0)
+  await expect(notify2).toBeVisible()
 })

package/demos/pc/app/popover/offset-composition-api.vue CHANGED Viewed

@@ -1,11 +1,11 @@
 <template>
   <div>
-    <div class="row">
+    <div class="row arrow-row">
       <h1>箭头偏移：</h1>
-      <tiny-slider v-model="arrowOffset" :min="0" :max="100"></tiny-slider>
+      <tiny-slider v-model="arrowOffset" :min="0" :max="100" show-input></tiny-slider>
       <tiny-popover
         placement="bottom"
-        content="这是一段内容"
+        content="箭头偏移的内容"
         :arrow-offset="arrowOffset"
         trigger="manual"
         v-model="show"
@@ -17,12 +17,12 @@
       </tiny-popover>
     </div>
-    <div class="row">
+    <div class="row panel-row">
       <h1>面板偏移：</h1>
-      <tiny-slider v-model="offset" :min="-100" :max="100"></tiny-slider>
+      <tiny-slider v-model="offset" :min="-100" :max="100" show-input></tiny-slider>
       <tiny-popover
         placement="bottom"
-        content="这是一段内容"
+        content="面板偏移的内容"
         :offset="offset"
         trigger="manual"
         v-model="show"

package/demos/pc/app/popover/offset.spec.js CHANGED Viewed

@@ -4,7 +4,35 @@ test('箭头偏移', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('popover#offset')
-  // 默认偏移和50偏移
-  await expect(page.locator('.popper__arrow').nth(0)).toBeVisible()
-  await expect(page.locator('.popper__arrow').nth(1)).toBeVisible()
+  const preview = page.locator('.pc-demo-container')
+  const input1 = preview.locator('.tiny-slider__input input').nth(0)
+  const input2 = preview.locator('.tiny-slider__input input').nth(1)
+  const arrow = page.getByText('箭头偏移的内容').locator('.popper__arrow')
+  const panel = page.getByText('面板偏移的内容')
+  // 箭头偏移
+  await expect(arrow).toBeVisible()
+  let middle = await arrow.boundingBox()
+  await input1.fill('8')
+  await page.waitForTimeout(1000)
+  let left = await arrow.boundingBox()
+  await input1.fill('100')
+  await page.waitForTimeout(1000)
+  let right = await arrow.boundingBox()
+  expect(left.x < middle.x)
+  expect(middle.x < right.x)
+  // 面板偏移
+  await expect(panel).toBeVisible()
+  middle = await panel.boundingBox()
+  await input2.fill('-100')
+  await page.waitForTimeout(1000)
+  left = await panel.boundingBox()
+  await input2.fill('100')
+  await page.waitForTimeout(1000)
+  right = await panel.boundingBox()
+  expect(left.x < middle.x)
+  expect(middle.x < right.x)
 })

package/demos/pc/app/popover/offset.vue CHANGED Viewed

@@ -1,11 +1,11 @@
 <template>
   <div>
-    <div class="row">
+    <div class="row arrow-row">
       <h1>箭头偏移：</h1>
-      <tiny-slider v-model="arrowOffset" :min="0" :max="100"></tiny-slider>
+      <tiny-slider v-model="arrowOffset" :min="0" :max="100" show-input></tiny-slider>
       <tiny-popover
         placement="bottom"
-        content="这是一段内容"
+        content="箭头偏移的内容"
         :arrow-offset="arrowOffset"
         trigger="manual"
         v-model="show"
@@ -17,12 +17,12 @@
       </tiny-popover>
     </div>
-    <div class="row">
+    <div class="row panel-row">
       <h1>面板偏移：</h1>
-      <tiny-slider v-model="offset" :min="-100" :max="100"></tiny-slider>
+      <tiny-slider v-model="offset" :min="-100" :max="100" show-input></tiny-slider>
       <tiny-popover
         placement="bottom"
-        content="这是一段内容"
+        content="面板偏移的内容"
         :offset="offset"
         trigger="manual"
         v-model="show"

package/demos/pc/app/popover/trigger.spec.js CHANGED Viewed

@@ -21,9 +21,9 @@ test('触发方式', async ({ page }) => {
   await expect(pop2).toBeVisible()
   await page.waitForTimeout(100)
-  // await page.keyboard.press('Tab')
-  // await expect(pop3).toBeVisible()
-  // await page.waitForTimeout(100)
+  await button3.focus()
+  await expect(pop3).toBeVisible()
+  await page.waitForTimeout(100)
   await button4.click()
   await expect(pop4).toBeVisible()

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

@@ -194,7 +194,8 @@ export default {
         {
           'name': 'placement',
-          'type': `'top' | 'top-start' | 'top-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'left' | 'left-start' | 'left-end' | 'right' | 'right-start' | 'right-end'`,
+          'type': 'IPopperPlacement',
+          'typeAnchorName': 'IPopperPlacement',
           'defaultValue': '"bottom"',
           'desc': {
             'zh-CN': '弹出层出现的位置',
@@ -217,7 +218,7 @@ export default {
             'zh-CN': '弹出层高度',
             'en-US': 'Layer height'
           },
-          'demoId': 'basic-usage'
+          'demoId': ''
         },
         {
           'name': 'disabled',
@@ -237,7 +238,7 @@ export default {
           'demoId': 'trigger'
         },
         {
-          'name': 'modelValue',
+          'name': 'v-model / modelValue',
           'type': 'boolean',
           'defaultValue': 'false',
           'desc': {
@@ -393,6 +394,13 @@ interface IPopperOption {
   removeOnDestroy: boolean // 弹出层消失后，是否移除弹出层的DOM元素，布尔false
 }
       `
+    },
+    {
+      name: 'IPopperPlacement',
+      type: 'type',
+      code: `
+type IPopperPlacement = 'top' | 'top-start' | 'top-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'left' | 'left-start' | 'left-end' | 'right' | 'right-start' | 'right-end'
+      `
     }
   ]
 }

package/demos/pc/app/qr-code/basic-usage.spec.ts ADDED Viewed

@@ -0,0 +1,9 @@
+import { test, expect } from '@playwright/test'
+test('基本用法', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('qr-code#basic-usage')
+  const canvas = page.locator('.tiny-qr-code-container canvas')
+  await expect(canvas).toBeVisible()
+})

package/demos/pc/app/qr-code/icon.spec.ts ADDED Viewed

@@ -0,0 +1,11 @@
+import { test, expect } from '@playwright/test'
+test('自定义icon', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('qr-code#icon')
+  const canvas = page.locator('.tiny-qr-code-container canvas')
+  const canvasImg = page.locator('.tiny-qr-code-container .mask-icon img')
+  await expect(canvas).toBeVisible()
+  await expect(canvasImg).toBeVisible()
+})

package/demos/pc/app/qr-code/level.spec.ts ADDED Viewed

@@ -0,0 +1,15 @@
+import { test, expect } from '@playwright/test'
+test('二维码纠错等级', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('qr-code#level')
+  const canvas = page.locator('.tiny-qr-code-container canvas')
+  await expect(canvas).toBeVisible()
+  const button = page.locator('.tiny-radio-button--small')
+  await expect(button.nth(0).locator('.tiny-radio-button__inner')).toHaveText('Low')
+  await expect(button.nth(1).locator('.tiny-radio-button__inner')).toHaveText('Medium')
+  await expect(button.nth(2).locator('.tiny-radio-button__inner')).toHaveText('Quality')
+  await expect(button.nth(3).locator('.tiny-radio-button__inner')).toHaveText('High')
+})

package/demos/pc/app/qr-code/style.spec.ts ADDED Viewed

@@ -0,0 +1,9 @@
+import { test, expect } from '@playwright/test'
+test('自定义样式', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('qr-code#style')
+  const canvas = page.locator('.tiny-qr-code-container canvas')
+  await expect(canvas).toBeVisible()
+})

package/demos/pc/app/qr-code/webdoc/qr-code.js CHANGED Viewed

@@ -37,10 +37,11 @@ export default {
     {
       'name': 'qr-code',
       'type': 'component',
-      'properties': [
+      'props': [
         {
           'name': 'value',
-          'type': 'String',
+          'type': 'string',
+          'defaultValue': '',
           'desc': {
             'zh-CN': '扫描后的文本',
             'en-US': 'scanned text'
@@ -49,7 +50,7 @@ export default {
         },
         {
           'name': 'size',
-          'type': 'Number',
+          'type': 'number',
           'defaultValue': '200',
           'desc': {
             'zh-CN': '二维码大小',
@@ -59,7 +60,7 @@ export default {
         },
         {
           'name': 'color',
-          'type': 'String',
+          'type': 'string',
           'defaultValue': '#000',
           'desc': {
             'zh-CN': '二维码颜色, 仅支持十六进制',
@@ -69,17 +70,18 @@ export default {
         },
         {
           'name': 'bordered',
-          'type': 'Boolean',
+          'type': 'boolean',
           'defaultValue': 'true',
           'desc': {
             'zh-CN': '是否有边框',
             'en-US': 'Whether has border style'
           },
-          'demoId': 'basic-usage'
+          'demoId': ''
         },
         {
           'name': 'icon',
-          'type': 'String',
+          'type': 'string',
+          'defaultValue': '',
           'desc': {
             'zh-CN': '二维码中图片的地址（目前只支持图片地址）',
             'en-US': 'include image url (only image link are supported)'
@@ -87,8 +89,8 @@ export default {
           'demoId': 'icon'
         },
         {
-          'name': 'iconSize',
-          'type': 'Number',
+          'name': 'icon-size',
+          'type': 'number',
           'defaultValue': '50',
           'desc': {
             'zh-CN': '二维码中图片的大小，icon 覆盖面积不能超过 30%， 否则影响扫码',
@@ -98,10 +100,10 @@ export default {
         },
         {
           'name': 'level',
-          'type': "'Low' | 'Medium' | 'Quality' | 'High'",
+          'type': 'string',
           'defaultValue': 'Medium',
           'desc': {
-            'zh-CN': '二维码纠错等级',
+            'zh-CN': "二维码纠错等级, 可选 'Low' | 'Medium' | 'Quality' | 'High'",
             'en-US': 'Error Code Level'
           },
           'demoId': 'level'

package/demos/pc/app/rich-text-editor/webdoc/rich-text-editor.js CHANGED Viewed

@@ -40,7 +40,7 @@ export default {
     {
       'name': 'rich-text-editor',
       'type': 'component',
-      'properties': [
+      'props': [
         {
           'name': 'modelValue',
           'type': 'string',

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

@@ -29,7 +29,7 @@ export default {
     {
       'name': 'roles',
       'type': 'component',
-      'properties': [
+      'props': [
         {
           'name': 'fetch-role',
           'type': 'Function',

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

@@ -1,5 +1,5 @@
 <template>
-  <tiny-scroll-text></tiny-scroll-text>
+  <tiny-scroll-text text="设置 text 自定义滚动的文本内容"></tiny-scroll-text>
 </template>
 <script setup lang="jsx">

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

@@ -3,5 +3,5 @@ import { test, expect } from '@playwright/test'
 test('基本用法', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('scroll-text#basic-usage')
-  await expect(page.locator('.tiny-scroll-text__content')).toHaveCSS('animation-name', 'moveLeft')
+  await expect(page.getByText('设置 text 自定义滚动的文本内容')).toBeVisible()
 })

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

@@ -1,5 +1,5 @@
 <template>
-  <tiny-scroll-text></tiny-scroll-text>
+  <tiny-scroll-text text="设置 text 自定义滚动的文本内容"></tiny-scroll-text>
 </template>
 <script lang="jsx">

package/demos/pc/app/scroll-text/custom-text-style-composition-api.vue CHANGED Viewed

@@ -2,7 +2,7 @@
   <tiny-scroll-text class="scrollclass"></tiny-scroll-text>
 </template>
-<script setup lang="jsx">
+<script setup>
 import { ScrollText as TinyScrollText } from '@opentiny/vue'
 </script>

package/demos/pc/app/scroll-text/custom-text-style.vue CHANGED Viewed

@@ -2,7 +2,7 @@
   <tiny-scroll-text class="scrollclass"></tiny-scroll-text>
 </template>
-<script lang="jsx">
+<script>
 import { ScrollText } from '@opentiny/vue'
 export default {

package/demos/pc/app/scroll-text/hover-stop-composition-api.vue CHANGED Viewed

@@ -2,6 +2,6 @@
   <tiny-scroll-text :hover-stop="true">设置 hover-stop 为 false 鼠标悬停后不会停止滚动</tiny-scroll-text>
 </template>
-<script setup lang="jsx">
+<script setup>
 import { ScrollText as TinyScrollText } from '@opentiny/vue'
 </script>

package/demos/pc/app/scroll-text/hover-stop.spec.ts CHANGED Viewed

@@ -4,5 +4,5 @@ test('鼠标悬停时文本停止滚动', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('scroll-text#hover-stop')
   await page.locator('.tiny-scroll-text__content').dispatchEvent('mouseenter')
-  await expect(page.locator('.tiny-scroll-text__content')).toHaveCSS('animation-play-state', 'paused')
+  await expect(page.locator('.tiny-scroll-text__content > div')).toHaveCSS('animation-play-state', 'paused')
 })

package/demos/pc/app/scroll-text/hover-stop.vue CHANGED Viewed

@@ -2,7 +2,7 @@
   <tiny-scroll-text :hover-stop="true">设置 hover-stop 为 false 鼠标悬停后不会停止滚动</tiny-scroll-text>
 </template>
-<script lang="jsx">
+<script>
 import { ScrollText } from '@opentiny/vue'
 export default {

package/demos/pc/app/scroll-text/scroll-direction-composition-api.vue CHANGED Viewed

@@ -10,6 +10,6 @@
   </div>
 </template>
-<script setup lang="jsx">
+<script setup>
 import { ScrollText as TinyScrollText } from '@opentiny/vue'
 </script>

package/demos/pc/app/scroll-text/scroll-direction.spec.ts CHANGED Viewed

@@ -3,8 +3,8 @@ import { test, expect } from '@playwright/test'
 test('文字滚动方向', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('scroll-text#scroll-direction')
-  await expect(page.locator('.tiny-scroll-text__content').nth(0)).toHaveCSS('animation-name', 'moveLeft')
-  await expect(page.locator('.tiny-scroll-text__content').nth(1)).toHaveCSS('animation-name', 'moveRight')
-  await expect(page.locator('.tiny-scroll-text__content').nth(2)).toHaveCSS('animation-name', 'moveUp')
-  await expect(page.locator('.tiny-scroll-text__content').nth(3)).toHaveCSS('animation-name', 'moveDown')
+  await expect(page.locator('.tiny-scroll-text__content > div').nth(0)).toHaveCSS('animation-name', 'moveLeft')
+  await expect(page.locator('.tiny-scroll-text__content > div').nth(1)).toHaveCSS('animation-name', 'moveRight')
+  await expect(page.locator('.tiny-scroll-text__content > div').nth(2)).toHaveCSS('animation-name', 'moveUp')
+  await expect(page.locator('.tiny-scroll-text__content > div').nth(3)).toHaveCSS('animation-name', 'moveDown')
 })

package/demos/pc/app/scroll-text/scroll-direction.vue CHANGED Viewed

@@ -10,7 +10,7 @@
   </div>
 </template>
-<script lang="jsx">
+<script>
 import { ScrollText } from '@opentiny/vue'
 export default {

package/demos/pc/app/scroll-text/scroll-time-composition-api.vue CHANGED Viewed

@@ -2,6 +2,6 @@
   <tiny-scroll-text :time="10">设置 time 自定义滚动所用的时间为 10s</tiny-scroll-text>
 </template>
-<script setup lang="jsx">
+<script setup>
 import { ScrollText as TinyScrollText } from '@opentiny/vue'
 </script>

package/demos/pc/app/scroll-text/scroll-time.spec.ts CHANGED Viewed

@@ -3,5 +3,5 @@ import { test, expect } from '@playwright/test'
 test('滚动时间间隔', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('scroll-text#scroll-time')
-  await expect(page.locator('.tiny-scroll-text__content')).toHaveCSS('animation-duration', '10s')
+  await expect(page.locator('.tiny-scroll-text__content > div')).toHaveCSS('animation-duration', '10s')
 })

package/demos/pc/app/scroll-text/scroll-time.vue CHANGED Viewed

@@ -2,7 +2,7 @@
   <tiny-scroll-text :time="10">设置 time 自定义滚动所用的时间为 10s</tiny-scroll-text>
 </template>
-<script lang="jsx">
+<script>
 import { ScrollText } from '@opentiny/vue'
 export default {

package/demos/pc/app/scroll-text/slots-composition-api.vue CHANGED Viewed

@@ -6,6 +6,6 @@
   </div>
 </template>
-<script setup lang="jsx">
+<script setup>
 import { ScrollText as TinyScrollText } from '@opentiny/vue'
 </script>

package/demos/pc/app/scroll-text/slots.vue CHANGED Viewed

@@ -6,7 +6,7 @@
   </div>
 </template>
-<script lang="jsx">
+<script>
 import { ScrollText } from '@opentiny/vue'
 export default {