@opentiny/vue-docs 3.16.1 → 3.17.0

package/demos/pc/app/popover/ignore-boundaries-composition-api.vue

@@ -0,0 +1,72 @@
+<template>
+  <div class="container">
+    <tiny-popover
+      placement="top"
+      title="标题"
+      :popper-options="{ ignoreBoundaries: true }"
+      width="200"
+      trigger="manual"
+      v-model="visible"
+      :append-to-body="false"
+    >
+      <tiny-popover
+        placement="top"
+        title="标题"
+        :popper-options="{ ignoreBoundaries: true }"
+        width="200"
+        trigger="manual"
+        v-model="visible1"
+        :append-to-body="false"
+      >
+        <tiny-popover
+          placement="top"
+          title="标题"
+          width="200"
+          trigger="manual"
+          v-model="visible2"
+          :append-to-body="false"
+          :popper-options="{ ignoreBoundaries: true }"
+        >
+          <template #reference>
+            <div>
+              <tiny-button @click="visible2 = !visible2">子级弹框2</tiny-button>
+            </div>
+          </template>
+        </tiny-popover>
+        <template #reference>
+          <tiny-button @click="visible1 = !visible1">子级弹框1</tiny-button>
+        </template>
+      </tiny-popover>
+      <template #reference>
+        <tiny-button class="btn-fjtc" @click="visible = !visible">父级弹框</tiny-button>
+      </template>
+    </tiny-popover>
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted } from 'vue'
+import { Popover as TinyPopover, Button as TinyButton } from '@opentiny/vue'
+
+const visible = ref(false)
+const visible1 = ref(false)
+const visible2 = ref(false)
+
+onMounted(() => {
+  setTimeout(() => {
+    visible.value = true
+    setTimeout(() => {
+      visible1.value = true
+      setTimeout(() => {
+        visible2.value = true
+      }, 1000)
+    }, 1000)
+  }, 500)
+})
+</script>
+
+<style scoped>
+.container {
+  margin: 200px;
+}
+</style>

package/demos/pc/app/popover/ignore-boundaries.spec.js

@@ -0,0 +1,15 @@
+import { test, expect } from '@playwright/test'
+
+test('忽略边界判断', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('popover#ignore-boundaries')
+
+  const title = page.locator('.tiny-popover__title').filter({ hasText: /标题/ }).first()
+  const button = page.locator('.btn-fjtc')
+
+  await page.waitForTimeout(3000)
+  const box1 = await title.boundingBox()
+  const box2 = await button.boundingBox()
+  console.log(box1, box2)
+  await expect(box1.y).toBeLessThan(box2.y)
+})

package/demos/pc/app/popover/ignore-boundaries.vue

@@ -0,0 +1,80 @@
+<template>
+  <div class="container">
+    <tiny-popover
+      placement="top"
+      title="标题"
+      :popper-options="{ ignoreBoundaries: true }"
+      width="200"
+      trigger="manual"
+      v-model="visible"
+      :append-to-body="false"
+    >
+      <tiny-popover
+        placement="top"
+        title="标题"
+        :popper-options="{ ignoreBoundaries: true }"
+        width="200"
+        trigger="manual"
+        v-model="visible1"
+        :append-to-body="false"
+      >
+        <tiny-popover
+          placement="top"
+          title="标题"
+          width="200"
+          trigger="manual"
+          v-model="visible2"
+          :append-to-body="false"
+          :popper-options="{ ignoreBoundaries: true }"
+        >
+          <template #reference>
+            <div>
+              <tiny-button @click="visible2 = !visible2">子级弹框2</tiny-button>
+            </div>
+          </template>
+        </tiny-popover>
+        <template #reference>
+          <tiny-button @click="visible1 = !visible1">子级弹框1</tiny-button>
+        </template>
+      </tiny-popover>
+      <template #reference>
+        <tiny-button class="btn-fjtc" @click="visible = !visible">父级弹框</tiny-button>
+      </template>
+    </tiny-popover>
+  </div>
+</template>
+
+<script>
+import { Popover, Button } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinyPopover: Popover,
+    TinyButton: Button
+  },
+  data() {
+    return {
+      visible: false,
+      visible1: false,
+      visible2: false
+    }
+  },
+  mounted() {
+    setTimeout(() => {
+      this.visible = true
+      setTimeout(() => {
+        this.visible1 = true
+        setTimeout(() => {
+          this.visible2 = true
+        }, 1000)
+      }, 1000)
+    }, 500)
+  }
+}
+</script>
+
+<style scoped>
+.container {
+  margin: 200px;
+}
+</style>

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

@@ -156,6 +156,24 @@ export default {
       },
       codeFiles: ['popper-options.vue']
     },
+    {
+      demoId: 'ignore-boundaries',
+      name: {
+        'zh-CN': '忽略边界判断',
+        'en-US': 'Ignore boundary judgment'
+      },
+      desc: {
+        'zh-CN': `
+          由于 Popper 会判断是否超出 offsetParent 从而调整弹框弹出的位置，有些时候并不能达到我们想要的效果。<br>
+          因此提供一个在<code>popper-options</code>上新增一个属性<code>ignoreBoundaries: true</code> ，可以让 Popper 忽略边界判断，弹出的位置始终是我们设置的 placement 值。
+        `,
+        'en-US': `
+          Because Popper determines whether the offsetParent is exceeded and adjusts the position of the pop-up dialog box, sometimes it doesn't achieve the desired effect.<br>
+          Therefore, the <code>ignoreBoundaries: true</code> attribute is added to <code>popper-options</code> so that the Popper ignores boundary judgment and the pop-up position is always the placement value.
+          `
+      },
+      codeFiles: ['ignore-boundaries.vue']
+    },
     {
       demoId: 'events',
       name: {

package/demos/pc/app/progress/custom-status-composition-api.vue

@@ -177,8 +177,9 @@ onMounted(() => {
     font-size: 12px;
   }
   .tiny-progress-demo-title {
+    width: 70px;
     display: flex;
-    margin-right: 40px;
+    margin-right: 10px;
     color: #aeaeae;
     align-items: center;
     font-size: 12px;
@@ -210,8 +211,9 @@ onMounted(() => {
     font-size: 12px;
   }
   .tiny-progress-demo-title {
+    width: 70px;
     display: flex;
-    margin-right: 40px;
+    margin-right: 10px;
     color: #aeaeae;
     align-items: center;
     font-size: 12px;
@@ -269,8 +271,9 @@ onMounted(() => {
     font-size: 12px;
   }
   .tiny-progress-demo-title {
+    width: 70px;
     display: flex;
-    margin-right: 40px;
+    margin-right: 10px;
     color: #aeaeae;
     align-items: center;
     font-size: 12px;
@@ -320,8 +323,9 @@ onMounted(() => {
     font-size: 12px;
   }
   .tiny-progress-demo-title {
+    width: 70px;
     display: flex;
-    margin-right: 40px;
+    margin-right: 10px;
     color: #aeaeae;
     align-items: center;
     font-size: 12px;

package/demos/pc/app/progress/custom-status.vue

@@ -180,8 +180,9 @@ export default {
     font-size: 12px;
   }
   .tiny-progress-demo-title {
+    width: 70px;
     display: flex;
-    margin-right: 40px;
+    margin-right: 10px;
     color: #aeaeae;
     align-items: center;
     font-size: 12px;
@@ -213,8 +214,9 @@ export default {
     font-size: 12px;
   }
   .tiny-progress-demo-title {
+    width: 70px;
     display: flex;
-    margin-right: 40px;
+    margin-right: 10px;
     color: #aeaeae;
     align-items: center;
     font-size: 12px;
@@ -272,8 +274,9 @@ export default {
     font-size: 12px;
   }
   .tiny-progress-demo-title {
+    width: 70px;
     display: flex;
-    margin-right: 40px;
+    margin-right: 10px;
     color: #aeaeae;
     align-items: center;
     font-size: 12px;
@@ -323,8 +326,9 @@ export default {
     font-size: 12px;
   }
   .tiny-progress-demo-title {
+    width: 70px;
     display: flex;
-    margin-right: 40px;
+    margin-right: 10px;
     color: #aeaeae;
     align-items: center;
     font-size: 12px;

package/demos/pc/app/radio/display-only-composition-api.vue

@@ -1,10 +1,10 @@
 <template>
   <div>
-    <span>单选组实现只读：</span>
+    <span class="demo-radio">单选组实现只读：</span>
     <tiny-radio-group display-only v-model="value1" :options="options"></tiny-radio-group>
     <br />
     <br />
-    <span>每个单选项实现只读：</span>
+    <span class="demo-radio">每个单选项实现只读：</span>
     <tiny-radio display-only v-model="value" label="1">选项一</tiny-radio>
     <tiny-radio display-only v-model="value" label="2" text="选项二"></tiny-radio>
   </div>
@@ -21,3 +21,9 @@ const options = ref([
   { label: 'B', text: '一般' }
 ])
 </script>
+
+<style scoped>
+.demo-radio {
+  font-size: 14px;
+}
+</style>

package/demos/pc/app/radio/display-only.vue

@@ -1,10 +1,10 @@
 <template>
   <div>
-    <span>单选组实现只读：</span>
+    <span class="demo-radio">单选组实现只读：</span>
     <tiny-radio-group display-only v-model="value1" :options="options"></tiny-radio-group>
     <br />
     <br />
-    <span>每个单选项实现只读：</span>
+    <span class="demo-radio">每个单选项实现只读：</span>
     <tiny-radio display-only v-model="value" label="1">选项一</tiny-radio>
     <tiny-radio display-only v-model="value" label="2" text="选项二"></tiny-radio>
   </div>
@@ -30,3 +30,9 @@ export default {
   }
 }
 </script>
+
+<style scoped>
+.demo-radio {
+  font-size: 14px;
+}
+</style>

package/demos/pc/app/rich-text-editor/basic-usage-composition-api.vue

@@ -19,7 +19,7 @@ const value = ref('你好 Opentiny!')
 .result {
   margin-top: 16px;
   font-size: 14px;
-  line-height: 1.3;
+  line-height: 1.5;
   word-break: break-all;
 }
 </style>

package/demos/pc/app/search/events-composition-api.vue

@@ -1,12 +1,19 @@
 <template>
   <div>
     <p>搜索事件</p>
+    <br />
     <tiny-search @search="search" is-enter-search></tiny-search>
+    <br /><br />
     <p>值变化事件</p>
+    <br />
     <tiny-search @change="change" @input="input"></tiny-search>
+    <br /><br />
     <p>值清空事件</p>
+    <br />
     <tiny-search @clear="clear" clearable></tiny-search>
+    <br /><br />
     <p>类型选中事件</p>
+    <br />
     <tiny-search :search-types="searchTypes" @select="select"></tiny-search>
   </div>
 </template>

package/demos/pc/app/search/events.vue

@@ -1,12 +1,19 @@
 <template>
   <div>
     <p>搜索事件</p>
+    <br />
     <tiny-search @search="search" is-enter-search></tiny-search>
+    <br /><br />
     <p>值变化事件</p>
+    <br />
     <tiny-search @change="change" @input="input"></tiny-search>
+    <br /><br />
     <p>值清空事件</p>
+    <br />
     <tiny-search @clear="clear" clearable></tiny-search>
+    <br /><br />
     <p>类型选中事件</p>
+    <br />
     <tiny-search :search-types="searchTypes" @select="select"></tiny-search>
   </div>
 </template>

package/demos/pc/app/select/all-text-composition-api.vue

@@ -1,8 +1,14 @@
 <template>
   <div>
+    <div style="margin: 16px 0">全选后，显示多个tag</div>
     <tiny-select v-model="value" multiple all-text="全部小吃">
       <tiny-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </tiny-option>
     </tiny-select>
+
+    <div style="margin: 16px 0">全选后，显示自定义的全部Tag</div>
+    <tiny-select v-model="value1" multiple all-text="全部小吃" show-all-text-tag>
+      <tiny-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </tiny-option>
+    </tiny-select>
   </div>
 </template>
 
@@ -19,6 +25,7 @@ const options = ref([
 ])
 
 const value = ref([])
+const value1 = ref([])
 </script>
 
 <style lang="less" scoped>

package/demos/pc/app/select/all-text.vue

@@ -1,8 +1,14 @@
 <template>
   <div>
+    <div style="margin: 16px 0">全选后，显示多个tag</div>
     <tiny-select v-model="value" multiple all-text="全部小吃">
       <tiny-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </tiny-option>
     </tiny-select>
+
+    <div style="margin: 16px 0">全选后，显示自定义的全部Tag</div>
+    <tiny-select v-model="value1" multiple all-text="全部小吃" show-all-text-tag>
+      <tiny-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </tiny-option>
+    </tiny-select>
   </div>
 </template>
 
@@ -17,6 +23,7 @@ export default {
   data() {
     return {
       value: [],
+      value1: [],
       options: [
         { value: '选项1', label: '黄金糕' },
         { value: '选项2', label: '双皮奶' },

package/demos/pc/app/select/automatic-dropdown-composition-api.vue

@@ -1,11 +1,14 @@
 <template>
   <div>
     <p>场景1：默认不可搜索时，获取焦点不下拉</p>
+    <br />
     <tiny-button @click="handleFocus1"> 点击获取焦点 </tiny-button>
     <tiny-select v-model="value" ref="selectOnlyFocusRef">
       <tiny-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </tiny-option>
     </tiny-select>
+    <br /><br />
     <p>场景2：设置不可搜索时，获取焦点并自动下拉</p>
+    <br />
     <tiny-button @click="handleFocus2"> 点击获取焦点 </tiny-button>
     <tiny-select v-model="value" ref="selectAutoDropRef" automatic-dropdown>
       <tiny-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </tiny-option>

package/demos/pc/app/select/automatic-dropdown.vue

@@ -1,11 +1,14 @@
 <template>
   <div>
     <p>场景1：默认不可搜索时，获取焦点不下拉</p>
+    <br />
     <tiny-button @click="handleFocus1"> 点击获取焦点 </tiny-button>
     <tiny-select v-model="value" ref="selectOnlyFocusRef">
       <tiny-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </tiny-option>
     </tiny-select>
+    <br /><br />
     <p>场景2：设置不可搜索时，获取焦点并自动下拉</p>
+    <br />
     <tiny-button @click="handleFocus2"> 点击获取焦点 </tiny-button>
     <tiny-select v-model="value" ref="selectAutoDropRef" automatic-dropdown>
       <tiny-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </tiny-option>

package/demos/pc/app/select/binding-obj-composition-api.vue

@@ -3,6 +3,7 @@
     <tiny-select v-model="value" value-key="val">
       <tiny-option v-for="(item, index) in options" :key="index" :label="item.text" :value="item.obj"> </tiny-option>
     </tiny-select>
+    <br /><br />
     <p class="value">
       {{ value }}
     </p>

package/demos/pc/app/select/binding-obj.vue

@@ -3,6 +3,7 @@
     <tiny-select v-model="value" value-key="val">
       <tiny-option v-for="(item, index) in options" :key="index" :label="item.text" :value="item.obj"> </tiny-option>
     </tiny-select>
+    <br /><br />
     <p class="value">
       {{ value }}
     </p>

package/demos/pc/app/select/clear-no-match-value-composition-api.vue

@@ -3,13 +3,16 @@
     <p>
       场景1：单选，val 找不到匹配值，val为： ,<span class="val">{{ val }}</span>
     </p>
+    <br />
     <tiny-select v-model="val" :clear-no-match-value="true">
       <tiny-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </tiny-option>
     </tiny-select>
+    <br /><br />
 
     <p>
       场景2：多选，multiVal 找不到匹配值，multiVal 为：<span class="multi-val">{{ multiVal }}</span>
     </p>
+    <br />
     <tiny-select v-model="multiVal" :clear-no-match-value="true" multiple>
       <tiny-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </tiny-option>
     </tiny-select>

package/demos/pc/app/select/clear-no-match-value.vue

@@ -3,13 +3,16 @@
     <p>
       场景1：单选，val 找不到匹配值，val为： ,<span class="val">{{ val }}</span>
     </p>
+    <br />
     <tiny-select v-model="val" :clear-no-match-value="true">
       <tiny-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </tiny-option>
     </tiny-select>
+    <br /><br />
 
     <p>
       场景2：多选，multiVal 找不到匹配值，multiVal 为：<span class="multi-val">{{ multiVal }}</span>
     </p>
+    <br />
     <tiny-select v-model="multiVal" :clear-no-match-value="true" multiple>
       <tiny-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </tiny-option>
     </tiny-select>

package/demos/pc/app/select/collapse-tags-composition-api.vue

@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div class="demo-collapse">
     <br />
     <div>场景1： collapse-tags折叠</div>
     <br />
@@ -45,4 +45,7 @@ const value3 = ref(['选项1', '选项2', '选项3', '选项4', '选项5'])
 .tiny-select {
   width: 280px;
 }
+.demo-collapse {
+  margin-bottom: 50px;
+}
 </style>

package/demos/pc/app/select/collapse-tags.spec.ts

@@ -20,13 +20,13 @@ test('collapse-tags', async ({ page }) => {
   await expect(option.filter({ hasText: '上海' })).toHaveClass(/selected/)
 
   // 取消选中一个
-  await option.filter({ hasText: '北京' }).locator('span').nth(2).click()
+  await option.filter({ hasText: '北京' }).locator('span').nth(1).click()
   await expect(tag.filter({ hasText: '+ 1' })).toBeHidden()
   await expect(tag).toHaveCount(1)
 
   // 再选中2个
-  await option.filter({ hasText: '天津' }).locator('span').nth(2).click()
-  await option.filter({ hasText: '深圳' }).locator('span').nth(2).click()
+  await option.filter({ hasText: '天津' }).locator('span').nth(1).click()
+  await option.filter({ hasText: '深圳' }).locator('span').nth(1).click()
   await expect(tag.filter({ hasText: '+ 2' })).toBeVisible()
   await expect(tag).toHaveCount(2)
 })

package/demos/pc/app/select/collapse-tags.vue

@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div class="demo-collapse">
     <br />
     <div>场景1： collapse-tags折叠</div>
     <br />
@@ -53,4 +53,7 @@ export default {
 .tiny-select {
   width: 280px;
 }
+.demo-collapse {
+  margin-bottom: 50px;
+}
 </style>

package/demos/pc/app/select/copy-multi-composition-api.vue

@@ -1,17 +1,23 @@
 <template>
   <div>
     <p>场景1：多选复制单个标签</p>
+    <br />
     <tiny-select ref="selectTagSelectable" v-model="value1" multiple tag-selectable>
       <tiny-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </tiny-option>
     </tiny-select>
+    <br /><br />
     <p>场景2：多选一键复制所有标签</p>
+    <br />
     <tiny-select ref="selectCopyable" v-model="value2" multiple copyable>
       <tiny-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </tiny-option>
     </tiny-select>
+    <br /><br />
     <p>场景3：多选设置复制文本分隔符</p>
+    <br />
     <tiny-select ref="selectCopyable" v-model="value2" multiple copyable text-split="/">
       <tiny-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </tiny-option>
     </tiny-select>
+    <br /><br />
     <p>复制到此处：</p>
     <tiny-input v-model="copyValue" class="copy-value" type="text"></tiny-input>
   </div>

package/demos/pc/app/select/copy-multi.vue

@@ -1,18 +1,25 @@
 <template>
   <div>
     <p>场景1：多选复制单个标签</p>
+    <br />
     <tiny-select ref="selectTagSelectable" v-model="value1" multiple tag-selectable>
       <tiny-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </tiny-option>
     </tiny-select>
+    <br /><br />
     <p>场景2：多选一键复制所有标签</p>
+    <br />
     <tiny-select ref="selectCopyable" v-model="value2" multiple copyable>
       <tiny-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </tiny-option>
     </tiny-select>
+    <br /><br />
     <p>场景3：多选设置复制文本分隔符</p>
+    <br />
     <tiny-select ref="selectCopyable" v-model="value2" multiple copyable text-split="/">
       <tiny-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </tiny-option>
     </tiny-select>
+    <br /><br />
     <p>复制到此处：</p>
+    <br />
     <tiny-input v-model="copyValue" class="copy-value" type="text"></tiny-input>
   </div>
 </template>

package/demos/pc/app/select/copy-single-composition-api.vue

@@ -1,12 +1,17 @@
 <template>
   <div>
     <p>场景1：单选无需配置可复制</p>
+    <br />
     <tiny-select v-model="value1" :options="options1"> </tiny-select>
+    <br /><br />
     <p>场景2：单选可搜索配置 allow-copy 可复制</p>
+    <br />
     <tiny-select ref="selectRef" v-model="value1" :options="options1" filterable :filter-method="filter" allow-copy>
     </tiny-select>
+    <br /><br />
 
     <p>场景3：单选远程搜索配置 allow-copy 可复制</p>
+    <br />
     <tiny-select
       v-model="value2"
       filterable
@@ -19,7 +24,9 @@
     >
       <tiny-option v-for="item in options2" :key="item.value" :label="item.label" :value="item.value"> </tiny-option>
     </tiny-select>
+    <br /><br />
     <p class="font-style">粘贴至此处：</p>
+    <br />
     <tiny-input v-model="inputVal" type="text" class="custom"></tiny-input>
   </div>
 </template>