@opentiny/vue-docs 3.26.8 → 3.27.1

package/demos/pc/app/date-picker/slot.vue

@@ -0,0 +1,119 @@
+<template>
+  <div class="demo-footer-slot">
+    <tiny-date-picker v-model="value" type="date" placeholder="请选择日期">
+      <template #footer="{ confirm }">
+        <div class="custom-footer">
+          <tiny-button type="primary" @click="confirm">自定义按钮</tiny-button>
+        </div>
+      </template>
+    </tiny-date-picker>
+    <tiny-date-picker v-model="dateTimeValue" type="datetime" placeholder="请选择日期时间">
+      <template #footer="{ confirm, changeToNow }">
+        <div class="custom-footer">
+          <tiny-button type="default" @click="changeToNow">自定义此刻</tiny-button>
+          <tiny-button type="primary" @click="confirm">自定义按钮</tiny-button>
+        </div>
+      </template>
+    </tiny-date-picker>
+    <tiny-date-picker v-model="weekValue" type="week" placeholder="请选择周">
+      <template #footer="{ confirm }">
+        <div class="custom-footer end">
+          <tiny-button type="primary" @click="confirm">自定义按钮</tiny-button>
+        </div>
+      </template>
+    </tiny-date-picker>
+    <tiny-date-picker v-model="monthValue" type="month" placeholder="请选择月份">
+      <template #footer="{ confirm }">
+        <div class="custom-footer end">
+          <tiny-button type="primary" @click="confirm">自定义按钮</tiny-button>
+        </div>
+      </template>
+    </tiny-date-picker>
+    <tiny-date-picker v-model="yearValue" type="year" placeholder="请选择年份">
+      <template #footer="{ confirm }">
+        <div class="custom-footer end">
+          <tiny-button type="primary" @click="confirm">自定义按钮</tiny-button>
+        </div>
+      </template>
+    </tiny-date-picker>
+    <tiny-date-picker v-model="valueRange" type="daterange" start-placeholder="开始日期" end-placeholder="结束日期">
+      <template #footer="{ confirm, clear }">
+        <div class="custom-footer">
+          <tiny-button type="default" @click="clear">自定义清空</tiny-button>
+          <tiny-button type="primary" @click="confirm">自定义按钮</tiny-button>
+        </div>
+      </template>
+    </tiny-date-picker>
+    <tiny-date-picker
+      v-model="valueDateTimeRange"
+      type="datetimerange"
+      start-placeholder="开始日期时间"
+      end-placeholder="结束日期时间"
+    >
+      <template #footer="{ confirm, clear }">
+        <div class="custom-footer">
+          <tiny-button type="default" @click="clear">自定义清空</tiny-button>
+          <tiny-button type="primary" @click="confirm">自定义按钮</tiny-button>
+        </div>
+      </template>
+    </tiny-date-picker>
+    <tiny-date-picker
+      v-model="valueMonthRange"
+      type="monthrange"
+      start-placeholder="开始月份"
+      end-placeholder="结束月份"
+    >
+      <template #footer>
+        <div class="custom-footer end">
+          <tiny-button type="primary">自定义按钮</tiny-button>
+        </div>
+      </template>
+    </tiny-date-picker>
+    <tiny-date-picker v-model="valueYearRange" type="yearrange" start-placeholder="开始年份" end-placeholder="结束年份">
+      <template #footer>
+        <div class="custom-footer end">
+          <tiny-button type="primary">自定义按钮</tiny-button>
+        </div>
+      </template>
+    </tiny-date-picker>
+  </div>
+</template>
+
+<script>
+import { TinyDatePicker, TinyButton } from '@opentiny/vue'
+
+export default {
+  components: { TinyDatePicker, TinyButton },
+  data() {
+    return {
+      value: '',
+      dateTimeValue: '',
+      weekValue: '',
+      monthValue: '',
+      quarterValue: '',
+      yearValue: '',
+      valueRange: [],
+      valueDateTimeRange: [],
+      valueMonthRange: [],
+      valueYearRange: []
+    }
+  }
+}
+</script>
+
+<style scoped lang="less">
+.demo-footer-slot {
+  width: 360px;
+  gap: 10px;
+  display: flex;
+  flex-direction: column;
+}
+.custom-footer {
+  display: flex;
+  width: 100%;
+  justify-content: space-between;
+}
+.end {
+  justify-content: flex-end;
+}
+</style>

package/demos/pc/app/date-picker/webdoc/date-picker.js

@@ -272,6 +272,18 @@ export default {
         'en-US': '<p>The main events are focus, blur and change.</p>'
       },
       codeFiles: ['events.vue']
+    },
+    {
+      demoId: 'slot',
+      name: {
+        'zh-CN': '插槽',
+        'en-US': 'Slot'
+      },
+      desc: {
+        'zh-CN': '<p>通过 `#footer` 作用域插槽自定义显示内容。</p>',
+        'en-US': '<p>Through the `#footer` scope slot to customize the display content.</p>'
+      },
+      codeFiles: ['slot.vue']
     }
   ],
   features: [

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

@@ -0,0 +1,65 @@
+<template>
+  <div>
+    <tiny-button @click="box1 = true" title="属性拦截 Dialog示例">属性拦截 Dialog</tiny-button>
+    <tiny-button @click="box2 = true" title="事件拦截 Dialog示例">事件拦截 Dialog</tiny-button>
+
+    <tiny-dialog-box ref="box1Ref" v-model:visible="box1" title="消息" width="30%" :before-close="beforeCloseProp">
+      <span>当前窗口有50%的概率关闭</span>
+      <template #footer>
+        <tiny-button @click="handleBox1Close">取 消</tiny-button>
+        <tiny-button type="primary" @click="handleBox1Close">确 定</tiny-button>
+      </template>
+    </tiny-dialog-box>
+
+    <tiny-dialog-box ref="box2Ref" v-model:visible="box2" title="消息" width="30%" @before-close="onBeforeClose">
+      <span>当前窗口有50%的概率关闭</span>
+      <template #footer>
+        <tiny-button @click="handleBox2Close">取 消</tiny-button>
+        <tiny-button type="primary" @click="handleBox2Close">确 定</tiny-button>
+      </template>
+    </tiny-dialog-box>
+  </div>
+</template>
+
+<script setup lang="jsx">
+import { ref } from 'vue'
+import { TinyButton, TinyDialogBox, Modal } from '@opentiny/vue'
+
+const box1 = ref(false)
+const box2 = ref(false)
+const box1Ref = ref()
+const box2Ref = ref()
+
+function beforeCloseProp(type) {
+  // 模拟异步校验，是否需要手动关闭
+  setTimeout(() => {
+    if (Math.random() > 0.5) {
+      box1Ref.value.hide(type) // 手动关闭，使用 box1.value = false 同样效果
+    } else {
+      Modal.alert('随机值过小，校验失败')
+    }
+  }, 1000)
+
+  return false // 拦截关闭
+}
+function onBeforeClose(event, hideFn) {
+  // 模拟异步校验，是否需要手动关闭
+  setTimeout(() => {
+    if (Math.random() > 0.5) {
+      hideFn() // 手动关闭，使用 box2.value = false 同样效果
+    } else {
+      Modal.alert('随机值过小，校验失败')
+    }
+  }, 1000)
+
+  event.preventDefault() // 拦截关闭
+}
+
+function handleBox1Close() {
+  box1Ref.value.handleClose()
+}
+
+function handleBox2Close() {
+  box2Ref.value.handleClose()
+}
+</script>

package/demos/pc/app/dialog-box/before-close.spec.ts

@@ -0,0 +1,6 @@
+import { test, expect } from '@playwright/test'
+
+test('dialogBox 基础用法', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('dialog-box#before-close')
+})

package/demos/pc/app/dialog-box/before-close.vue

@@ -0,0 +1,71 @@
+<template>
+  <div>
+    <tiny-button @click="box1 = true" title="属性拦截 Dialog示例">属性拦截 Dialog</tiny-button>
+    <tiny-button @click="box2 = true" title="事件拦截 Dialog示例">事件拦截 Dialog</tiny-button>
+
+    <tiny-dialog-box ref="box1Ref" v-model:visible="box1" title="消息" width="30%" :before-close="beforeCloseProp">
+      <span>当前窗口有50%的概率关闭</span>
+      <template #footer>
+        <tiny-button @click="handleBox1Close">取 消</tiny-button>
+        <tiny-button type="primary" @click="handleBox1Close">确 定</tiny-button>
+      </template>
+    </tiny-dialog-box>
+
+    <tiny-dialog-box ref="box2Ref" v-model:visible="box2" title="消息" width="30%" @before-close="onBeforeClose">
+      <span>当前窗口有50%的概率关闭</span>
+      <template #footer>
+        <tiny-button @click="handleBox2Close">取 消</tiny-button>
+        <tiny-button type="primary" @click="handleBox2Close">确 定</tiny-button>
+      </template>
+    </tiny-dialog-box>
+  </div>
+</template>
+
+<script lang="jsx">
+import { TinyButton, TinyDialogBox, Modal } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinyButton,
+    TinyDialogBox
+  },
+  data() {
+    return {
+      box1: false,
+      box2: false
+    }
+  },
+  methods: {
+    beforeCloseProp(type) {
+      // 模拟异步校验，是否需要手动关闭
+      setTimeout(() => {
+        if (Math.random() > 0.5) {
+          this.$refs.box1Ref.hide(type) // 手动关闭，使用 box1.value = false 同样效果
+        } else {
+          Modal.alert('随机值过小，校验失败')
+        }
+      }, 1000)
+
+      return false // 拦截关闭
+    },
+    onBeforeClose(event, hideFn) {
+      // 模拟异步校验，是否需要手动关闭
+      setTimeout(() => {
+        if (Math.random() > 0.5) {
+          hideFn() // 手动关闭，使用 box2.value = false 同样效果
+        } else {
+          Modal.alert('随机值过小，校验失败')
+        }
+      }, 1000)
+
+      event.preventDefault() // 拦截关闭
+    },
+    handleBox1Close() {
+      this.$refs.box1Ref.handleClose()
+    },
+    handleBox2Close() {
+      this.$refs.box2Ref.handleClose()
+    }
+  }
+}
+</script>

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

@@ -294,6 +294,22 @@ export default {
       },
       codeFiles: ['open-close-events.vue']
     },
+    {
+      demoId: 'before-close',
+      name: {
+        'zh-CN': '关闭前拦截',
+        'en-US': 'before close blocking'
+      },
+      desc: {
+        'zh-CN': `
+          可通过设置属性<code>before-close</code>,设置对话框关闭前时触发的拦截函数。
+          也可以通过绑定事件<code>before-close</code>,但它们的用法有细微差异，详见下面示例`,
+        'en-US': `
+          You can set the <code>before-close</code> property to define a function that triggers before the dialog box closes.
+          You can also bind the <code>before-close</code> event, but their usage differs slightly. See the example below.`
+      },
+      codeFiles: ['before-close.vue']
+    },
     {
       demoId: 'transition-effect',
       name: {

package/demos/pc/app/dialog-select/nest-tree-single.spec.ts

@@ -13,13 +13,10 @@ test('dialogSelect 树单选', async ({ page }) => {
   expect(iconNode?.includes('tiny-checkbox')).toBe(false)
 
   let current
-  current = await page.getByText('201一级')
+  current = await page.getByRole('treeitem', { name: '二级 4' }).locator('label')
   await current.click()
-  expect(await current.locator('input[type="radio"]').isChecked()).toBe(true)
+  expect(current).toHaveClass(/is-checked/)
 
-  current = await page.getByRole('treeitem', { name: '二级 6' }).locator('label')
-  await current.click()
-  expect(await current.locator('input[type="radio"]').isChecked()).toBe(true)
-  current = await page.getByText('201一级')
-  expect(await current.locator('input[type="radio"]').isChecked()).toBe(false)
+  current = await page.getByText('二级 5')
+  await expect(current).not.toHaveClass(/is-checked/)
 })

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

@@ -47,7 +47,8 @@ export default {
           '<p>通过 <code>tips-props</code> 属性可自定义标题帮助提示信息，具体属性配置参考 <a href="tooltip#tooltip">ToolTip 组件</a> 的 props 说明。</p>',
         'en-US': ''
       },
-      codeFiles: ['tips-props.vue']
+      codeFiles: ['tips-props.vue'],
+      hideSaas: true
     },
     {
       demoId: 'width',

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

@@ -0,0 +1,15 @@
+<template>
+  <div class="exception-demo">
+    <tiny-exception type="nodata"></tiny-exception>
+  </div>
+</template>
+
+<script setup>
+import { TinyException } from '@opentiny/vue'
+</script>
+
+<style scoped>
+.exception-demo {
+  padding: 20px;
+}
+</style>

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

@@ -0,0 +1,21 @@
+<template>
+  <div class="exception-demo">
+    <tiny-exception type="nodata"></tiny-exception>
+  </div>
+</template>
+
+<script>
+import { TinyException } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinyException
+  }
+}
+</script>
+
+<style scoped>
+.exception-demo {
+  padding: 20px;
+}
+</style>

package/demos/pc/app/exception/button-text-composition-api.vue

@@ -0,0 +1,13 @@
+<template>
+  <tiny-exception type="pagenoperm">
+    <tiny-button type="primary" @click="test">自定义按钮</tiny-button>
+  </tiny-exception>
+</template>
+
+<script setup>
+import { TinyException, TinyModal, TinyButton } from '@opentiny/vue'
+
+const test = () => {
+  TinyModal.message({ status: 'info', message: '自定义按钮被点击' })
+}
+</script>

package/demos/pc/app/exception/button-text.vue

@@ -0,0 +1,21 @@
+<template>
+  <tiny-exception type="pagenoperm">
+    <tiny-button type="primary" @click="test">立即新建</tiny-button>
+  </tiny-exception>
+</template>
+
+<script>
+import { TinyException, TinyModal, TinyButton } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinyException,
+    TinyButton
+  },
+  methods: {
+    test() {
+      TinyModal.message({ status: 'info', message: '自定义按钮被点击' })
+    }
+  }
+}
+</script>

package/demos/pc/app/exception/component-page-composition-api.vue

@@ -0,0 +1,44 @@
+<template>
+  <div>
+    <tiny-grid :data="tableData" height="300">
+      <tiny-grid-column type="index" width="5%"></tiny-grid-column>
+      <tiny-grid-column field="name" title="名称"></tiny-grid-column>
+      <tiny-grid-column field="area" title="区域"></tiny-grid-column>
+      <tiny-grid-column field="address" title="地址"></tiny-grid-column>
+      <tiny-grid-column field="introduction" title="公司简介" show-overflow></tiny-grid-column>
+      <template #empty>
+        <tiny-exception component-page type="nodata"></tiny-exception>
+      </template>
+    </tiny-grid>
+    <div class="demo-split">
+      <tiny-split v-model="split2">
+        <template #left>
+          <tiny-exception component-page type="nodata"></tiny-exception>
+        </template>
+        <template #right>
+          <tiny-exception component-page type="nodata"></tiny-exception>
+        </template>
+      </tiny-split>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { TinyGrid, TinyGridColumn, TinyException, TinySplit } from '@opentiny/vue'
+import { ref } from 'vue'
+
+const tableData = ref([])
+const split2 = ref(0.4)
+</script>
+
+<style scoped>
+.demo-split {
+  height: 200px;
+  border: 1px solid #d9d9d9;
+  margin-bottom: 20px;
+}
+
+.demo-split-pane {
+  padding: 10px;
+}
+</style>

package/demos/pc/app/exception/component-page.vue

@@ -0,0 +1,55 @@
+<template>
+  <div>
+    <tiny-grid :data="tableData" height="300">
+      <tiny-grid-column type="index" width="5%"></tiny-grid-column>
+      <tiny-grid-column field="name" title="名称"></tiny-grid-column>
+      <tiny-grid-column field="area" title="区域"></tiny-grid-column>
+      <tiny-grid-column field="address" title="地址"></tiny-grid-column>
+      <tiny-grid-column field="introduction" title="公司简介" show-overflow></tiny-grid-column>
+      <template #empty>
+        <tiny-exception component-page type="nodata"></tiny-exception>
+      </template>
+    </tiny-grid>
+    <div class="demo-split">
+      <tiny-split v-model="split2">
+        <template #left>
+          <tiny-exception component-page type="nodata"></tiny-exception>
+        </template>
+        <template #right>
+          <tiny-exception component-page type="nodata"></tiny-exception>
+        </template>
+      </tiny-split>
+    </div>
+  </div>
+</template>
+
+<script>
+import { TinyGrid, TinyGridColumn, TinyException, TinySplit } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinyGrid,
+    TinyGridColumn,
+    TinyException,
+    TinySplit
+  },
+  data() {
+    return {
+      tableData: [],
+      split2: 0.4
+    }
+  }
+}
+</script>
+
+<style scoped>
+.demo-split {
+  height: 200px;
+  border: 1px solid #d9d9d9;
+  margin-bottom: 20px;
+}
+
+.demo-split-pane {
+  padding: 10px;
+}
+</style>

package/demos/pc/app/exception/page-empty-composition-api.vue

@@ -0,0 +1,7 @@
+<template>
+  <tiny-exception page-empty type="pageservererror" sub-message="服务器错误" />
+</template>
+
+<script setup>
+import { TinyException } from '@opentiny/vue'
+</script>

package/demos/pc/app/exception/page-empty.vue

@@ -0,0 +1,13 @@
+<template>
+  <tiny-exception page-empty type="pageservererror" sub-message="服务器错误" />
+</template>
+
+<script>
+import { TinyException } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinyException
+  }
+}
+</script>

package/demos/pc/app/exception/slot-composition-api.vue

@@ -0,0 +1,29 @@
+<template>
+  <tiny-exception type="pagenoperm">
+    <template #icon>
+      <TinyIconSuccess class="custom-icon" />
+    </template>
+    <template #content>
+      <div class="content">content插槽</div>
+      <tiny-button type="primary">自定义按钮</tiny-button>
+    </template>
+  </tiny-exception>
+</template>
+
+<script setup>
+import { TinyException, TinyButton } from '@opentiny/vue'
+import { IconSuccess } from '@opentiny/vue-icon'
+
+const TinyIconSuccess = IconSuccess()
+</script>
+
+<style scoped>
+.content {
+  padding-bottom: 15px;
+  font-size: 16px;
+}
+.custom-icon {
+  width: 50px;
+  height: 50px;
+}
+</style>

package/demos/pc/app/exception/slot.vue

@@ -0,0 +1,23 @@
+<template>
+  <tiny-exception>
+    <template #icon>
+      <IconSuccess />
+    </template>
+    <template #content>
+      <div>content插槽</div>
+    </template>
+    <tiny-button type="primary">立即新建</tiny-button>
+  </tiny-exception>
+</template>
+
+<script>
+import { TinyException } from '@opentiny/vue'
+import { IconSuccess } from '@opentiny/vue-icon'
+
+export default {
+  components: {
+    TinyException,
+    IconSuccess: IconSuccess()
+  }
+}
+</script>

package/demos/pc/app/exception/sub-message-composition-api.vue

@@ -0,0 +1,7 @@
+<template>
+  <tiny-exception type="pageservererror" sub-message="自定义副文本内容"></tiny-exception>
+</template>
+
+<script setup>
+import { TinyException } from '@opentiny/vue'
+</script>

package/demos/pc/app/exception/sub-message.vue

@@ -0,0 +1,13 @@
+<template>
+  <tiny-exception type="pageservererror" sub-message="自定义副文本内容"></tiny-exception>
+</template>
+
+<script>
+import { TinyException } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinyException
+  }
+}
+</script>

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

@@ -0,0 +1,5 @@
+---
+title: Exception 缺省页
+---
+
+# Exception 缺省页

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

@@ -0,0 +1,5 @@
+---
+title: Exception
+---
+
+# Exception