@opentiny/vue-docs 2.2.18 → 2.2.19

package/demos/pc/app/modal/{showHeader.spec.ts → show-header-footer.spec.ts}

@@ -1,10 +1,10 @@
 import { test, expect } from '@playwright/test'
 
-test('不显示头部', async ({ page }) => {
+test('控制显示头部及底部', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
-  await page.goto('modal#showHeader')
+  await page.goto('modal#show-header-footer')
 
   const modal = page.locator('.tiny-modal.active')
-  await page.getByRole('button', { name: '不显示头部' }).click()
+  await page.getByRole('button', { name: /控制显示头部及底部/ }).click()
   await expect(modal.locator('.tiny-modal__header')).not.toBeVisible()
 })

package/demos/pc/app/modal/{showHeader.vue → show-header-footer.vue}

@@ -1,5 +1,5 @@
 <template>
-  <tiny-button @click="btnClick" :reset-time="0">不显示头部</tiny-button>
+  <tiny-button @click="btnClick" :reset-time="0">控制显示头部及底部</tiny-button>
 </template>
 
 <script>
@@ -11,7 +11,7 @@ export default {
   },
   methods: {
     btnClick() {
-      Modal.alert({ message: '不显示头部', showHeader: false })
+      Modal.alert({ message: '控制显示头部及底部', showHeader: false, showFooter: true })
     }
   }
 }

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

@@ -161,56 +161,32 @@ export default {
       codeFiles: ['resize.vue']
     },
     {
-      demoId: 'min-width',
+      demoId: 'min-width-height',
       name: {
-        'zh-CN': '调整窗口后的最小宽度',
-        'en-US': 'The Minimum Width Of The Window Displayed After Adjusting Its Size'
+        'zh-CN': '调整窗口后的最小宽高度',
+        'en-US': 'Minimum width and height after adjusting the window'
       },
       desc: {
         'zh-CN':
-          '<p>可通过<code>resize</code>属性设置可拖拽属性为<code>true</code>后，<code>min-width</code>属性设置拖拽后窗口的最小宽度。</p>',
+          '<p>可通过<code>resize</code>属性设置可拖拽属性为<code>true</code>后，<code>min-height</code>属性设置拖拽后窗口的最小高度，<code>min-width</code>属性设置拖拽后窗口的最小宽度。</p>',
         'en-US':
-          '<p>By setting the<code>resize</code>drag property to<code>true</code>, the minimum width of the window after dragging can be set through the<code>min-width</code>property.</p>'
+          'The<code>resize</code>property can be used to set the drag property to<code>true</code>. The<code>min-height</code>property sets the minimum height of the window after dragging, and the<code>min-width</code>property sets the minimum width of the window after dragging.'
       },
-      codeFiles: ['min-width.vue']
+      codeFiles: ['min-width-height.vue']
     },
     {
-      demoId: 'min-height',
+      demoId: 'show-header-footer',
       name: {
-        'zh-CN': '调整窗口后的最小高度',
-        'en-US': 'The Minimum Height Displayed By The Window After Adjusting Its Size'
+        'zh-CN': '控制显示头部及底部',
+        'en-US': 'Do Not Display Header and Bottom'
       },
       desc: {
         'zh-CN':
-          '<p>可通过<code>resize</code>属性设置可拖拽属性为<code>true</code>后，<code>min-height</code>属性设置拖拽后窗口的最小高度。</p>',
+          '<p>可通过<code>show-footer</code>属性设置是否显示底部,<code>show-header</code>属性设置是否显示头部。</p>',
         'en-US':
-          '<p>By setting the<code>resize</code>drag property to<code>true</code>, the minimum height of the window after dragging can be set through the<code>min-height</code>property.</p>'
+          'Set whether to display the bottom through the<code>show-footer</code>attribute, and whether to display the head through the<code>show-header</code>attribute.'
       },
-      codeFiles: ['min-height.vue']
-    },
-    {
-      demoId: 'showFooter',
-      name: {
-        'zh-CN': '不显示底部',
-        'en-US': 'Do Not Display Bottom'
-      },
-      desc: {
-        'zh-CN': '<p>可通过<code>show-footer</code>属性设置是否显示底部。</p>',
-        'en-US': '<p>Set whether to display the bottom through<code>show-root</code>.</p>'
-      },
-      codeFiles: ['showFooter.vue']
-    },
-    {
-      demoId: 'showHeader',
-      name: {
-        'zh-CN': '不显示头部',
-        'en-US': 'Do Not Display The Head'
-      },
-      desc: {
-        'zh-CN': '<p>可通过<code>show-header</code>属性设置是否显示头部。</p>',
-        'en-US': '<p>Set whether to display the header through<code>show-header</code>.</p>'
-      },
-      codeFiles: ['showHeader.vue']
+      codeFiles: ['show-header-footer.vue']
     },
     {
       demoId: 'status',

package/demos/pc/app/notify/closeIcon.spec.ts

@@ -4,7 +4,7 @@ test('自定义关闭图标', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('notify#closeIcon')
   await page.getByRole('button', { name: '自定义关闭图标' }).click()
-  const svg = page.locator('.tiny-notify__icon-close > .tiny-svg > .st0')
+  const svg = page.locator('.tiny-notify__icon-close > .tiny-svg > path')
   await expect(svg).toHaveAttribute(
     'd',
     'M3 1h18c.9 0 2 1.1 2 2v18c0 .9-1 2-2 2H3c-.9 0-2-1.1-2-2V3c0-.9 1.1-2 2-2zm0 2v18h18V3H3zm13.8 4.2c.3.3.3.9 0 1.2L13.2 12l3.6 3.6c.3.3.3.9 0 1.2-.2.2-.4.2-.6.2-.2 0-.4-.1-.6-.2L12 13.2l-3.6 3.6c-.1.1-.4.2-.6.2s-.4-.1-.6-.2c-.3-.3-.3-.9 0-1.2l3.6-3.6-3.6-3.6c-.3-.3-.3-.9 0-1.2.3-.3.9-.3 1.2 0l3.6 3.6 3.6-3.6c.3-.3.8-.3 1.2 0z'

package/demos/pc/app/numeric/change-event-composition-api.vue

@@ -1,10 +1,13 @@
 <template>
-  <tiny-numeric v-model="value" @change="onChange"></tiny-numeric>
+  <div style="display: flex">
+    <tiny-numeric :change-compat="false" v-model="value" @change="onChange"></tiny-numeric>
+    <tiny-button @click="clickChange">修改</tiny-button>
+  </div>
 </template>
 
 <script setup lang="ts">
 import { ref } from 'vue'
-import { Numeric as TinyNumeric, Modal } from '@opentiny/vue'
+import { Numeric as TinyNumeric, Modal, Button as TinyButton } from '@opentiny/vue'
 
 const value = ref(1)
 
@@ -14,4 +17,8 @@ const onChange = (newVal: number, oldVal: number) => {
     status: 'info'
   })
 }
+
+const clickChange = () => {
+  value.value = 22
+}
 </script>

package/demos/pc/app/numeric/change-event.vue

@@ -1,13 +1,17 @@
 <template>
-  <tiny-numeric v-model="value" @change="onChange"></tiny-numeric>
+  <div style="display: flex">
+    <tiny-numeric :change-compat="false" v-model="value" @change="onChange"></tiny-numeric>
+    <tiny-button @click="clickChange">修改</tiny-button>
+  </div>
 </template>
 
 <script lang="ts">
-import { Numeric, Modal } from '@opentiny/vue'
+import { Numeric, Modal, Button } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyNumeric: Numeric
+    TinyNumeric: Numeric,
+    TinyButton: Button
   },
   data() {
     return {
@@ -20,6 +24,9 @@ export default {
         message: '新值：' + newVal + '，旧值：' + oldVal,
         status: 'info'
       })
+    },
+    clickChange() {
+      this.value = 22
     }
   }
 }

package/demos/pc/app/numeric/dynamic-disabled-composition-api.vue

@@ -1,11 +1,19 @@
 <template>
-  <tiny-numeric v-model="value" :disabled="disabled"></tiny-numeric>
+  <div class="f-r f-box-center">
+    <span>全部禁用：</span>
+    <tiny-numeric v-model="value1" :disabled="disabled" class="mr20"></tiny-numeric>
+    <span>部分禁用：</span>
+    <tiny-numeric v-model="value2" :min="min" :max="max"></tiny-numeric>
+  </div>
 </template>
 
 <script setup lang="ts">
 import { ref } from 'vue'
 import { Numeric as TinyNumeric } from '@opentiny/vue'
 
-const value = ref(1)
+const value1 = ref(1)
+const value2 = ref(0)
 const disabled = ref(true)
+const min = ref(0)
+const max = ref(10)
 </script>

package/demos/pc/app/numeric/dynamic-disabled.spec.ts

@@ -4,7 +4,7 @@ test('禁用', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('numeric#dynamic-disabled')
 
-  const numeric = page.locator('.tiny-numeric')
+  const numeric = page.locator('.tiny-numeric').first()
   const numericInput = numeric.locator('.tiny-numeric__input-inner')
   await expect(numeric).toHaveClass(/is-disabled/)
   await expect(numericInput).toBeDisabled()

package/demos/pc/app/numeric/dynamic-disabled.vue

@@ -1,5 +1,10 @@
 <template>
-  <tiny-numeric v-model="value" :disabled="disabled"></tiny-numeric>
+  <div class="f-r f-box-center">
+    <span>全部禁用：</span>
+    <tiny-numeric v-model="value1" :disabled="disabled" class="mr20"></tiny-numeric>
+    <span>部分禁用：</span>
+    <tiny-numeric v-model="value2" :min="min" :max="max"></tiny-numeric>
+  </div>
 </template>
 
 <script lang="ts">
@@ -11,8 +16,11 @@ export default {
   },
   data() {
     return {
-      value: 1,
-      disabled: true
+      value1: 1,
+      value2: 0,
+      disabled: true,
+      min: 0,
+      max: 10
     }
   }
 }

package/demos/pc/app/numeric/precision-composition-api.vue

@@ -1,6 +1,6 @@
 <template>
   <p>1、数值精度</p>
-  <tiny-numeric v-model="value" :precision="precision" :format="format"></tiny-numeric>
+  <tiny-numeric v-model="value" :precision="precision"></tiny-numeric>
   <p>2、数值格式</p>
   <tiny-numeric style="width: 300px" v-model="value1" :format="format"></tiny-numeric>
 </template>

package/demos/pc/app/numeric/precision.spec.ts

@@ -4,19 +4,18 @@ test('数值精度', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('numeric#precision')
 
-  const numericInput = page.getByRole('spinbutton')
-  await numericInput.fill('2.2222')
-  await numericInput.blur()
+  const numericInput = page.getByRole('spinbutton').first()
   let actualValue = await numericInput.inputValue()
-  expect(actualValue).toEqual('2.22')
 
-  await numericInput.fill('8.88888')
+  await page.locator('#precision').getByRole('button').nth(1).click()
+  await page.locator('#precision').getByRole('button').first().click()
   await numericInput.blur()
-  actualValue = await numericInput.inputValue()
-  expect(actualValue).toEqual('8.89')
+  expect(actualValue).toEqual('1.00')
 
-  await numericInput.fill('6.66')
-  await numericInput.blur()
-  actualValue = await numericInput.inputValue()
-  expect(actualValue).toEqual('6.66')
+  const numericFormatInput = page.getByRole('spinbutton').nth(1)
+  let actualFormatValue = await numericFormatInput.inputValue()
+  await page.locator('#precision').getByRole('button').nth(3).click()
+  await page.locator('#precision').getByRole('button').nth(2).click()
+  await numericFormatInput.blur()
+  expect(actualFormatValue).toEqual('$12,34,56,879.4455@')
 })

package/demos/pc/app/pager/before-page-change.spec.ts

@@ -9,7 +9,7 @@ test('分页变更前置处理', async ({ page }) => {
   const prev = pager.locator('.tiny-pager__btn-prev')
   const next = pager.locator('.tiny-pager__btn-next')
   const tipModal = page.locator('.tiny-modal__box').filter({ hasText: '消息提示' })
-  const confirmBtn = tipModal.getByRole('button', { name: '确认' })
+  const confirmBtn = tipModal.getByRole('button', { name: '确定' })
 
   await pager.locator('li').getByText('6').click()
   await expect(tipModal).toBeVisible()

package/demos/pc/app/pager/disabled-and-size.spec.ts

@@ -13,7 +13,7 @@ test('禁用和尺寸', async ({ page }) => {
 
   await demo.locator('.tiny-switch').click()
   await expect(sizeChange).toHaveCSS('color', 'rgb(138, 142, 153)')
-  await expect(sizeChange).toHaveCSS('border-top-color', 'rgb(223, 225, 230)')
+  await expect(sizeChange).toHaveCSS('border-top-color', 'rgba(0, 0, 0, 0)')
   await expect(prev).toBeDisabled()
   await expect(next).toBeDisabled()
   await expect(pageItem.first()).toHaveCSS('cursor', 'not-allowed')

package/demos/pc/app/pop-upload/basic-usage.spec.ts

@@ -45,7 +45,7 @@ test('PopUpload 基本用法', async ({ page }) => {
 
   // 上传时附带的额外参数: 获取请求体
   const body = await request.postData()
-  await expect(body).toBeNull()
+  await expect(body).not.toBeNull()
 
   // 点击取消按钮，上传弹窗消失
   await cancelBtn.click()

package/demos/pc/app/pop-upload/custom-request-headers.spec.ts

@@ -21,5 +21,5 @@ test('PopUpload 自定义请求头', async ({ page }) => {
   const { authorization } = await request.headers()
 
   await expect(request.headers()).not.toBeNull()
-  await expect(authorization).toEqual('Basic QWxhZGRpbjpvcGVuIHNlc2FtZQ==')
+  await expect(authorization).toBeUndefined()
 })

package/demos/pc/app/popeditor/condition-form-composition-api.vue

@@ -160,7 +160,6 @@ const rules = ref({
     { required: true, message: '必填', trigger: 'blur' },
     { min: 2, max: 11, message: '长度必须不小于2', trigger: 'change' }
   ],
-  datepicker: { type: 'date' },
   email: { type: 'email' }
 })
 const ruleFormRef = ref()

package/demos/pc/app/popeditor/condition-form.vue

@@ -162,7 +162,6 @@ export default {
           { required: true, message: '必填', trigger: 'blur' },
           { min: 2, max: 11, message: '长度必须不小于2', trigger: 'change' }
         ],
-        datepicker: { type: 'date' },
         email: { type: 'email' }
       }
     }

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

@@ -124,10 +124,16 @@ function handlePageChange(val) {
 }
 
 function handlePopup() {
-  Modal.message('popup 弹窗打开事件')
+  Modal.message({
+    message: 'popup 弹窗打开事件',
+    status: 'info'
+  })
 }
 
 function handleClose() {
-  Modal.message('close 弹窗关闭事件')
+  Modal.message({
+    message: 'close 弹窗关闭事件',
+    status: 'info'
+  })
 }
 </script>

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

@@ -130,10 +130,16 @@ export default {
       this.gridOp.data = dataset.slice(offset, offset + this.pagerOp.pageSize)
     },
     handlePopup() {
-      Modal.message('popup 弹窗打开事件')
+      Modal.message({
+        message: 'popup 弹窗打开事件',
+        status: 'info'
+      })
     },
     handleClose() {
-      Modal.message('close 弹窗关闭事件')
+      Modal.message({
+        message: 'close 弹窗关闭事件',
+        status: 'info'
+      })
     }
   }
 }

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

@@ -31,7 +31,7 @@ export default {
     {
       demoId: 'condition-layout',
       name: {
-        'zh-CN': '布局与配置',
+        'zh-CN': '布局',
         'en-US': 'Layout and Configuration'
       },
       desc: {
@@ -115,7 +115,7 @@ export default {
         'zh-CN':
           '<p>grid-op 当 popseletor 为 grid 时生效，目前支持配置 columns 表格列 和 data 数据源，详细配置项参考 Grid 表格组件，需同时配置 textField、valueField 字段。</p>',
         'en-US':
-          '<p>gridOp: This parameter is valid only when popseletor is set to grid. Currently, columns and data data sources can be configured. For details about the configuration items, see the Grid table component. The textField and valueField fields must be configured at the same time. </p>'
+          '<p>grid-op: This parameter is valid only when popseletor is set to grid. Currently, columns and data data sources can be configured. For details about the configuration items, see the Grid table component. The textField and valueField fields must be configured at the same time. </p>'
       },
       codeFiles: ['grid.vue']
     },
@@ -206,7 +206,7 @@ export default {
         'en-US': 'Reset'
       },
       desc: {
-        'zh-CN': '<p>通过 <code>readonly</code> 属性设置为是否只读。</p>',
+        'zh-CN': '<p>通过 <code>readonly</code> 属性设置为是否禁用。</p>',
         'en-US': '<p>Use the <code>before-reset</code> attribute to set the hook function before reset. </p>'
       },
       codeFiles: ['readonly.vue']
@@ -309,7 +309,7 @@ export default {
       desc: {
         'zh-CN': '<p>通过 <code>value-field</code> 属性设置组件提交给后台的字段。</p>',
         'en-US':
-          'The <p><code>showPager</code> attribute is valid only when <code>popseletor</code> is set to <code>grid</code>. The default value is <code>false</code>. Pagination is not enabled. If this parameter is set to <code>true</code>, you need to configure the <code>pagerOp</code> attribute. In addition, you need to listen to the <code>page-change</code> event to change the <code>data</code> data source</p>\n of the <code>gridOp</code>'
+          'The <p><code>showPager</code> attribute is valid only when <code>popseletor</code> is set to <code>grid</code>. The default value is <code>false</code>. Pagination is not enabled. If this parameter is set to <code>true</code>, you need to configure the <code>pager-op</code> attribute. In addition, you need to listen to the <code>page-change</code> event to change the <code>data</code> data source</p>\n of the <code>grid-op</code>'
       },
       codeFiles: ['title.vue']
     },
@@ -348,7 +348,7 @@ export default {
       },
       desc: {
         'zh-CN':
-          '<p><code>showPager</code> 属性只有当 <code>popseletor</code> 为 <code>grid</code> 时才能生效，默认值为 <code>false</code> 不启用分页，配置为 <code>true</code> 后还需配置 <code>pagerOp</code> 属性；并且需要监听 <code>page-change</code> 事件改变 <code>gridOp</code> 的 <code>data</code> 数据源。</p>',
+          '<p><code>showPager</code> 属性只有当 <code>popseletor</code> 为 <code>grid</code> 时才能生效，默认值为 <code>false</code> 不启用分页，配置为 <code>true</code> 后还需配置 <code>pager-op</code> 属性；并且需要监听 <code>page-change</code> 事件改变 <code>grid-op</code> 的 <code>data</code> 数据源。</p>',
         'en-US':
           '<p>Enable the tree mode through the <code>popseletor</code> attribute. Then the <code>tree-op</code> attribute is the <code>op configuration mode</code> of the <code>Tree</code> component. </p>'
       },
@@ -376,7 +376,7 @@ export default {
       },
       desc: {
         'zh-CN':
-          '<p>通过 <code>popseletor</code> 属性开启树模式，然后 <code>tree-op</code> 属性是 <code>Tree</code> 组件的 <code>op 配置方式</code>。</p>',
+          '<p>通过 <code>popseletor</code> 属性开启树模式，然后 <code>tree-op</code> 属性是 <code>Tree</code> 组件的 <code>op</code>配置方式。</p>',
         'en-US':
           '<p>Configure the <code>showOverflow</code> attribute on the data column to set the display and hiding of the data when the data exceeds the column width. Values can be of type boolean or string, with three values to choose from, as shown below. By default, all content is displayed in a new line. </p>\n<div class="tip custom-block"><p class="custom-block-title"> optional value description</p>\n<p>tooltip: The extra part is displayed...., and all information is displayed on the left or right. \ntitle: The value is the same as the title attribute of the native tag. \nellipsis: \'...\' is displayed, and no message is displayed. \ntrue: If the value is true, the effect is the same as that of the tooltip. </p>\n</div>'
       },
@@ -390,7 +390,7 @@ export default {
       },
       desc: {
         'zh-CN':
-          '<p>通过 <code>popseletor</code> 属性开启树模式，然后 <code>tree-op</code> 属性是 <code>Tree</code> 组件的 <code>op 配置方式</code>。</p>',
+          '<p>通过 <code>popseletor</code> 属性开启树模式，然后 <code>tree-op</code> 属性是 <code>Tree</code> 组件的 <code>op</code>配置方式。</p>',
         'en-US':
           '<p>When a single option is selected, you can only click the option button to select it by default. You can also set <code>trigger</code> to <code>row</code> to select any position in the row. Alternatively, set <code>trigger</code> to <code>cell</code> and click any position in the Operation column to select it. </p>'
       },
@@ -418,7 +418,7 @@ export default {
       },
       desc: {
         'zh-CN':
-          "\n          <p>在数据的列上配置 <code>showOverflow</code> 属性用于设置数据超出列宽时的显示和隐藏。值的类型可以为 boolean 和 string，有三个值可以选择，如下所示。默认为换行显示全部内容。</p>\n          <div class=\"tip custom-block\">\n            <p class=\"custom-block-title\">可选值说明</p>\n            <p>'tooltip'：内容超出部分显示 ...，左侧/右侧弹出提示层显示全部信息。\n            <p>'title'：和原生标签的 title 属性一致。</p>\n            <p>'ellipsis'：内容超出部分显示 ...，没有提示。</p>\n            <p>boolean：为 true 时，效果和 'tooltip' 一致。</p>\n          </div>\n        ",
+          "<p>在数据列上配置 <code>showOverflow</code> 属性用于设置数据超出列宽时的显示和隐藏。值的类型可以为 boolean 和 string，有三个值可以选择，如下所示。默认为换行显示全部内容。</p>\n          <div class=\"tip custom-block\">\n            <p class=\"custom-block-title\">可选值说明</p>\n            <p>'tooltip'：内容超出部分显示 ...，左侧/右侧弹出提示层显示全部信息。\n            <p>'title'：和原生标签的 title 属性一致。</p>\n            <p>'ellipsis'：内容超出部分显示 ...，没有提示。</p>\n            <p>boolean：为 true 时，效果和 'tooltip' 一致。</p>\n          </div>\n        ",
         'en-US':
           '<p>Configure the <code>auto-lookup</code> to false, set initialization to not request data, or call this $ref.popuptor.handleSearch() Proactively calls the request method</p>'
       },
@@ -441,7 +441,7 @@ export default {
     {
       demoId: 'show-history',
       name: {
-        'zh-CN': '设置历史记录标签页',
+        'zh-CN': '历史记录标签页',
         'en-US': ''
       },
       desc: {

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

@@ -9,10 +9,18 @@ export default {
         'en-US': 'Basic Usage'
       },
       desc: {
-        'zh-CN':
-          '\n          通过 <code>reference</code>  插槽来指定一个触发源，通过 <code>content</code> 属性来指定提示内容，点击触发源会弹出内容面板。<br>\n          通过 <code>title</code> 属性来指定标题。<br>\n          通过 <code>width</code>  属性来指定一个弹出面板的宽度。<br>\n          <div class="tip custom-block">reference 插槽是必传插槽，没有它时组件渲染不出来。</div>\n        ',
-        'en-US':
-          '\n          Specify a trigger source through the <code>reference</code> slot, specify the prompt content through the <code>content</code> property, click the trigger source will pop up the content panel. <br>\n          The title is specified by the <code>title</code> attribute. <br>\n          Use the <code>width</code> property to specify the width of a pop-up panel. <br>\n          The <div class="tip custom-block">reference slot is a required slot without which the component cannot be rendered. </div>\n        '
+        'zh-CN': `
+          通过 <code>reference</code>  插槽来指定一个触发源，通过 <code>content</code> 属性来指定提示内容，点击触发源会弹出内容面板。<br>
+          通过 <code>title</code> 属性来指定标题。<br>
+          通过 <code>width</code>  属性来指定一个弹出面板的宽度。<br>
+          <div class="tip custom-block">reference 插槽是必传插槽，没有它时组件渲染不出来。</div>
+          `,
+        'en-US': `
+          Specify a trigger source through the <code>reference</code> slot, specify the prompt content through the <code>content</code> property, click the trigger source will pop up the content panel. <br>
+          The title is specified by the <code>title</code> attribute. <br>
+          Use the <code>width</code> property to specify the width of a pop-up panel. <br>
+          The <div class="tip custom-block">reference slot is a required slot without which the component cannot be rendered. </div>
+          `
       },
       codeFiles: ['basic-usage.vue']
     },
@@ -23,10 +31,14 @@ export default {
         'en-US': 'Trigger Mode'
       },
       desc: {
-        'zh-CN':
-          '\n          通过<code>trigger</code> 属性设定弹出框的4种触发方式， 默认值为 <code> click </code>。<br>\n          当触发方式为<code> manual</code>时，通过设置<code>v-model</code> 属性，动态控制显示和隐藏弹出框。\n        ',
-        'en-US':
-          '\n          The <code>trigger</code> property is used to set the triggering mode of the pop-up box. The optional value of the property is <code>click/hover/manual/focus</code>, and the default value is <code>click </code>. <br>\n          When the trigger mode is <code> manual</code>, you can set the <code>v-model</code> property to dynamically display and hide pop-ups.\n        '
+        'zh-CN': `
+          通过<code>trigger</code> 属性设定弹出框的4种触发方式， 默认值为 <code> click </code>。<br>
+          当触发方式为<code> manual</code>时，通过设置<code>v-model</code> 属性，动态控制显示和隐藏弹出框。
+          `,
+        'en-US': `
+          The <code>trigger</code> property is used to set the triggering mode of the pop-up box. The optional value of the property is <code>click/hover/manual/focus</code>, and the default value is <code>click </code>. <br>
+          When the trigger mode is <code> manual</code>, you can set the <code>v-model</code> property to dynamically display and hide pop-ups.
+          `
       },
       codeFiles: ['trigger.vue']
     },
@@ -37,10 +49,14 @@ export default {
         'en-US': 'Pop-up layer content'
       },
       desc: {
-        'zh-CN':
-          '\n          通过 <code>content</code> 属性设置要显示的字符串内容。<br>\n          通过 <code>default</code> 插槽，支持自定义复杂的内容结构。<br>\n        ',
-        'en-US':
-          '\n          The <code>content</code> property sets the string content to be displayed.\n          Support for custom complex content structures through the <code>default</code> slot.\n        '
+        'zh-CN': `
+          通过 <code>content</code> 属性设置要显示的字符串内容。<br>
+          通过 <code>default</code> 插槽，支持自定义复杂的内容结构。<br>
+          `,
+        'en-US': `
+          The <code>content</code> property sets the string content to be displayed.
+          Support for custom complex content structures through the <code>default</code> slot.
+          `
       },
       codeFiles: ['content.vue']
     },
@@ -63,10 +79,14 @@ export default {
         'en-US': 'Custom Offset'
       },
       desc: {
-        'zh-CN':
-          '\n          通过<code>arrow-offset</code> 设置箭头的在弹窗层上的偏移量。箭头默认至少会保留8px的空间， 以保证箭头不会贴在弹窗层两边。<br>\n          通过<code> offset</code> 设置弹框的偏移量，来改变弹框的位置。\n        ',
-        'en-US':
-          '\n          Use <code>arrow-offset</code> to set the offset of the arrow on the popup layer. Arrows are left at least 8px by default to ensure that they are not stuck on either side of the popup layer. <br>\n          Change the position of the springboard by setting the offset</code> of the springboard\n        '
+        'zh-CN': `
+          通过<code>arrow-offset</code> 设置箭头的在弹窗层上的偏移量。箭头默认至少会保留8px的空间， 以保证箭头不会贴在弹窗层两边。<br>
+          通过<code> offset</code> 设置弹框的偏移量，来改变弹框的位置。
+          `,
+        'en-US': `
+          Use <code>arrow-offset</code> to set the offset of the arrow on the popup layer. Arrows are left at least 8px by default to ensure that they are not stuck on either side of the popup layer. <br>
+          Change the position of the springboard by setting the offset</code> of the springboard
+          `
       },
       codeFiles: ['offset.vue']
     },
@@ -77,10 +97,16 @@ export default {
         'en-US': 'Customize the pop-up panel'
       },
       desc: {
-        'zh-CN':
-          '\n          通过<code>placement</code> 设置弹出框的的位置。<br>\n          通过<code>visible-arrow</code> 设定是否显示提示框的箭头，默认值为 <code>true</code>。<br>\n          通过<code>popper-class</code> 可配置单个或多个类名，通过类名可以控制弹窗样式。\n        ',
-        'en-US':
-          '\n          By <code>placement</code> Set the location of the pop-up box.  <br>\n          Set whether the arrow of the prompt box is displayed by <code>visible-arrow</code>. The default value is true. <br>\n          You can run the <code>popper-class</code> command to configure one or more classes. You can control the popup style by class name.\n        '
+        'zh-CN': `
+          通过<code>placement</code> 设置弹出框的的位置。<br>
+          通过<code>visible-arrow</code> 设定是否显示提示框的箭头，默认值为 <code>true</code>。<br>
+          通过<code>popper-class</code> 可配置单个或多个类名，通过类名可以控制弹窗样式。
+          `,
+        'en-US': `
+          By <code>placement</code> Set the location of the pop-up box.  <br>
+          Set whether the arrow of the prompt box is displayed by <code>visible-arrow</code>. The default value is true. <br>
+          You can run the <code>popper-class</code> command to configure one or more classes. You can control the popup style by class name.
+          `
       },
       codeFiles: ['custom-popper.vue']
     },
@@ -91,10 +117,16 @@ export default {
         'en-US': 'Delay control'
       },
       desc: {
-        'zh-CN':
-          '\n          通过 <code>open-delay</code> 弹出框打开时延迟的时长，默认值为0，单位为毫秒。<br>\n          通过 <code>close-delay</code> 弹出框关闭时延迟的时长，默认值为200，单位为毫秒。<br>\n          <div class="tip custom-block">只有在触发方式为 hover 时，延迟控制功能才生效。</div>\n        ',
-        'en-US':
-          '\n          Run the <code>open-delay</code> command to open a pop-up. The default value is 0, in milliseconds. <br>\n          Run the <code>close-delay</code> command to close the pop-up. The default value is 200, in milliseconds. <br>\n          <div class="tip custom-block"> Delay control takes effect only if the trigger mode is hover. </div>\n        '
+        'zh-CN': `
+          通过 <code>open-delay</code> 弹出框打开时延迟的时长，默认值为0，单位为毫秒。<br>
+          通过 <code>close-delay</code> 弹出框关闭时延迟的时长，默认值为200，单位为毫秒。<br>
+          <div class="tip custom-block">只有在触发方式为 hover 时，延迟控制功能才生效。</div>
+          `,
+        'en-US': `
+          Run the <code>open-delay</code> command to open a pop-up. The default value is 0, in milliseconds. <br>
+          Run the <code>close-delay</code> command to close the pop-up. The default value is 200, in milliseconds. <br>
+          <div class="tip custom-block"> Delay control takes effect only if the trigger mode is hover. </div>
+          `
       },
       codeFiles: ['delay.vue']
     },
@@ -131,10 +163,19 @@ export default {
         'en-US': 'Event'
       },
       desc: {
-        'zh-CN':
-          '\n          组件支持以下事件：<br>\n          <code>hide</code> 隐藏时触发回调；<br>\n          <code>show</code> 显示时触发回调；<br>\n          <code>after-leave</code> 进入的动画结束后触发回调；<br>\n          <code>after-enter</code> 离开的动画播结束后触发回调；<br>',
-        'en-US':
-          '\n          The component supports the following events: <br>\n          <code>hide</code> Trigger callback when hiding <br>\n          <code>show</code> callback triggered when displayed <br>\n          <code>after-leave</code> Triggers callback after entering animation <br>\n          <code>after-enter</code> Trigger callback after the leaving animation ends <br>\n          '
+        'zh-CN': `
+          组件支持以下事件：<br>
+          <code>hide</code> 隐藏时触发回调；<br>
+          <code>show</code> 显示时触发回调；<br>
+          <code>after-leave</code> 进入的动画结束后触发回调；<br>
+          <code>after-enter</code> 离开的动画播结束后触发回调；<br>`,
+        'en-US': `
+          The component supports the following events: <br>
+          <code>hide</code> Trigger callback when hiding <br>
+          <code>show</code> callback triggered when displayed <br>
+          <code>after-leave</code> Triggers callback after entering animation <br>
+          <code>after-enter</code> Trigger callback after the leaving animation ends <br>
+          `
       },
       codeFiles: ['events.vue']
     }

package/demos/pc/app/radio/group-options-composition-api.vue

@@ -10,7 +10,7 @@ import { ref } from 'vue'
 import { RadioGroup as TinyRadioGroup, Modal } from '@opentiny/vue'
 
 function handleClick() {
-  Modal.message({ message: 'click' })
+  Modal.message({ message: 'click', status: 'info' })
 }
 const value = ref('A')
 const options = ref([