@opentinyvue/vue-docs 3.21.8 → 3.22.0

package/demos/apis/button-group.js

@@ -163,7 +163,7 @@ export default {
       code: `
 interface IButtonGroupData {
   text: string // 显示文本
-  value: number | number // 选中的值
+  value: number | string // 选中的值
   disabled?: boolean // 是否禁用
   tip?: string // 按钮悬浮提示 v3.17.0版本增加此功能
   // 配置选块角标

package/demos/apis/calendar-view.js

@@ -171,6 +171,20 @@ export default {
           mode: ['pc', 'mobile-first'],
           pcDemo: 'basic-usage',
           mfDemo: 'basic-usage'
+        },
+        {
+          name: 'show-back-today',
+          type: 'boolean',
+          defaultValue: 'true',
+          desc: {
+            'zh-CN': '是否展示左上侧按钮显示，默认展示',
+            'en-US': 'Should the upper left button be displayed, Default Display'
+          },
+          meta: {
+            stable: '3.22.0'
+          },
+          mode: ['mobile-first'],
+          mfDemo: 'calendar-mode'
         }
       ],
       events: [

package/demos/apis/date-panel.js

@@ -461,6 +461,211 @@ export default {
           mode: ['pc']
         }
       ]
+    },
+    {
+      name: 'month-range',
+      type: 'component',
+      props: [
+        {
+          name: 'modelValue / v-model',
+          type: 'Array<T>',
+          defaultValue: '[]',
+          desc: {
+            'zh-CN': '绑定值',
+            'en-US': 'Set the initial value of the calendar component. ;Bound Value'
+          },
+          mode: ['pc'],
+          pcDemo: 'basic-usage'
+        },
+        {
+          name: 'disabled-date',
+          type: '() => void',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '配置部分禁用',
+            'en-US': 'Configuration section disabled.'
+          },
+          mode: ['pc'],
+          pcDemo: 'disabled-date'
+        },
+        {
+          name: 'format',
+          type: 'string',
+          defaultValue: "'yyyy-MM'",
+          desc: {
+            'zh-CN': '显示在输入框中的格式',
+            'en-US': 'Display format in the text box'
+          },
+          mode: ['pc'],
+          pcDemo: 'format'
+        },
+        {
+          name: 'popper-class',
+          type: 'string',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '为 MonthRange 下拉弹框添加的 class 类名',
+            'en-US': 'Class name added for MonthRange.'
+          },
+          mode: ['pc'],
+          pcDemo: 'custom-suffix-icon'
+        },
+        {
+          name: 'readonly',
+          type: 'boolean',
+          defaultValue: 'false',
+          desc: {
+            'zh-CN': '设置日期是否只读',
+            'en-US': 'Set whether the calendar component is read-only.'
+          },
+          mode: ['pc'],
+          pcDemo: 'disabled'
+        },
+        {
+          name: 'shortcuts',
+          type: 'Array<T>',
+          defaultValue: '[]',
+          desc: {
+            'zh-CN': `设置快捷选项`,
+            'en-US': 'Set shortcut options'
+          },
+          mode: ['pc'],
+          pcDemo: 'shortcuts'
+        },
+        {
+          name: 'unlink-panels',
+          type: 'boolean',
+          defaultValue: 'false',
+          desc: {
+            'zh-CN': '在范围选择器里取消两个日期面板之间的联动',
+            'en-US': 'Unlink the two date panels in the range selector'
+          },
+          mode: ['pc'],
+          pcDemo: 'unlink-panels'
+        }
+      ],
+      events: [
+        {
+          name: 'select-change',
+          type: '(value: Date) => void',
+          desc: {
+            'zh-CN': '用户确认选定的值时触发',
+            'en-US': 'This event is triggered when the user confirms the selected values.'
+          },
+          mode: ['pc'],
+          pcDemo: 'events'
+        }
+      ],
+      format: [
+        {
+          name: 'M',
+          desc: {
+            'zh-CN': '月，不补0',
+            'en-US': ''
+          },
+          mode: ['pc']
+        },
+        {
+          name: 'MM',
+          desc: {
+            'zh-CN': '月',
+            'en-US': ''
+          },
+          mode: ['pc']
+        },
+        {
+          name: 'yyyy',
+          desc: {
+            'zh-CN': '年',
+            'en-US': ''
+          },
+          mode: ['pc']
+        }
+      ]
+    },
+    {
+      name: 'year-range',
+      type: 'component',
+      props: [
+        {
+          name: 'modelValue / v-model',
+          type: 'Array<T>',
+          defaultValue: '[]',
+          desc: {
+            'zh-CN': '绑定值',
+            'en-US': 'Set the initial value of the calendar component. ;Bound Value'
+          },
+          mode: ['pc'],
+          pcDemo: 'basic-usage'
+        },
+        {
+          name: 'disabled-date',
+          type: '() => void',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '配置部分禁用',
+            'en-US': 'Configuration section disabled.'
+          },
+          mode: ['pc'],
+          pcDemo: 'disabled-date'
+        },
+        {
+          name: 'popper-class',
+          type: 'string',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '为 YearRange 下拉弹框添加的 class 类名',
+            'en-US': 'Class name added for YearRange.'
+          },
+          mode: ['pc'],
+          pcDemo: 'custom-suffix-icon'
+        },
+        {
+          name: 'readonly',
+          type: 'boolean',
+          defaultValue: 'false',
+          desc: {
+            'zh-CN': '设置日期是否只读',
+            'en-US': 'Set whether the calendar component is read-only.'
+          },
+          mode: ['pc'],
+          pcDemo: 'readonly'
+        },
+        {
+          name: 'shortcuts',
+          type: 'Array<T>',
+          defaultValue: '[]',
+          desc: {
+            'zh-CN': `设置快捷选项`,
+            'en-US': 'Set shortcut options'
+          },
+          mode: ['pc'],
+          pcDemo: 'shortcuts'
+        },
+        {
+          name: 'unlink-panels',
+          type: 'boolean',
+          defaultValue: 'false',
+          desc: {
+            'zh-CN': '在范围选择器里取消两个日期面板之间的联动',
+            'en-US': 'Unlink the two date panels in the range selector'
+          },
+          mode: ['pc'],
+          pcDemo: 'unlink-panels'
+        }
+      ],
+      events: [
+        {
+          name: 'select-change',
+          type: '(value: Date) => void',
+          desc: {
+            'zh-CN': '用户确认选定的值时触发',
+            'en-US': 'This event is triggered when the user confirms the selected values.'
+          },
+          mode: ['pc'],
+          pcDemo: 'events'
+        }
+      ]
     }
   ]
 }

package/demos/apis/progress.js

@@ -140,7 +140,20 @@ export default {
       ],
       events: [],
       methods: [],
-      slots: []
+      slots: [
+        {
+          name: 'statusIcon',
+          desc: {
+            'zh-CN': '状态插槽，successIcon / exceptionIcon / warningIcon',
+            'en-US': 'Status slot, successIcon / exceptionIcon / warningIcon'
+          },
+          mode: ['pc', 'mobile-first'],
+          pcDemo: 'slot-icon-status',
+          meta: {
+            stable: '3.22.0'
+          }
+        }
+      ]
     }
   ],
   types: [

package/demos/apis/steps.js

@@ -29,6 +29,21 @@ export default {
           pcDemo: 'advanced-steps',
           mfDemo: 'advanced-steps'
         },
+        {
+          name: 'content-center',
+          type: 'string',
+          defaultValue: 'false',
+          desc: {
+            'zh-CN': '使步骤条内容默认居中显示',
+            'en-US': 'Make the step bar content appear centered by default'
+          },
+          meta: {
+            stable: '3.22.0'
+          },
+          mode: ['mobile-first', 'pc'],
+          pcDemo: 'content-center',
+          mfDemo: 'content-center'
+        },
         {
           name: 'count-field',
           type: 'string',

package/demos/mobile-first/app/calendar-view/calendar-mode.vue

@@ -1,5 +1,11 @@
 <template>
-  <tiny-calendar-view :events="eventslist" :year="2023" :month="6" :modes="['month', 'timeline', 'schedule']">
+  <tiny-calendar-view
+    :show-back-today="false"
+    :events="eventslist"
+    :year="2023"
+    :month="6"
+    :modes="['month', 'timeline', 'schedule']"
+  >
   </tiny-calendar-view>
 </template>
 

package/demos/mobile-first/app/calendar-view/webdoc/calendar-view.js

@@ -22,9 +22,9 @@ export default {
       },
       desc: {
         'zh-CN':
-          '<p>通过 <code>mode</code> 属性指定以年的形式显示，将展示当年的每个月份。可选值有 <code>month</code> / <code>timeline</code> / <code>schedule</code>。</p>\n',
+          '<p>通过 <code>mode</code> 属性指定以年的形式显示，将展示当年的每个月份。可选值有 <code>month</code> / <code>timeline</code> / <code>schedule</code>。通过<code>show-back-today</code> 属性控制左侧按钮显示。</p>\n',
         'en-US':
-          '<p>The <code>mode</code> attribute specifies that each month of the current year is displayed. The options are <code>month</code> / <code>timeline</code> / <code>schedule</code>. </p>\n'
+          '<p>The <code>mode</code> attribute specifies that each month of the current year is displayed. The options are <code>month</code> / <code>timeline</code> / <code>schedule</code>. Control the display of the left button through the<code>show back today</code>attribute.</p>\n'
       },
       codeFiles: ['calendar-mode.vue']
     },

package/demos/mobile-first/app/input/display-only-popup-more.vue

@@ -0,0 +1,27 @@
+<template>
+  <div class="demo-input">
+    <tiny-input type="textarea" v-model="input" display-only popup-more></tiny-input>
+  </div>
+</template>
+
+<script>
+import { TinyInput } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinyInput
+  },
+  data() {
+    return {
+      input:
+        '表单文本域开启只读模式，\n文本内容超过 5 行自动隐藏。\n表单文本域开启只读模式，\n文本内容超过 5 行自动隐藏。\n表单文本域开启只读模式，\n文本内容超过 5 行自动隐藏。\n表单文本域开启只读模式，\n文本内容超过 5 行自动隐藏。\n表单文本域开启只读模式，\n文本内容超过 5 行自动隐藏'
+    }
+  }
+}
+</script>
+
+<style scoped>
+.demo-input .tiny-textarea {
+  width: 260px;
+}
+</style>

package/demos/mobile-first/app/input/webdoc/input.js

@@ -508,6 +508,20 @@ export default {
         'en-US': '<p>bbutton click</p>'
       },
       codeFiles: ['display-only-content.vue']
+    },
+    {
+      demoId: 'display-only-popup-more',
+      name: {
+        'zh-CN': '文本域只读超出显示更多按钮',
+        'en-US': 'Text field read-only beyond Show more button'
+      },
+      desc: {
+        'zh-CN':
+          '在只读的基础上增加<code>popup-more</code>属性，可使文本域超出显示更多按钮，点击更多按钮可以查看详细信息。',
+        'en-US':
+          'The <code>popup-more</code> attribute is added to enable the text field to exceed the display of more buttons. You can click more buttons to view details.'
+      },
+      codeFiles: ['display-only-popup-more.vue']
     }
   ]
 }

package/demos/mobile-first/app/progress/slot-icon-status.vue

@@ -0,0 +1,35 @@
+<template>
+  <div>
+    <tiny-progress class="progress" :stroke-width="12" :percentage="100" status="success">
+      <template #successIcon>
+        <TinyIconSmile />
+      </template>
+    </tiny-progress>
+    <br />
+    <tiny-progress class="progress" :stroke-width="12" :percentage="80" status="warning">
+      <template #warningIcon>
+        <TinyIconMeh />
+      </template>
+    </tiny-progress>
+    <br />
+    <tiny-progress class="progress" :stroke-width="12" :percentage="50" status="exception">
+      <template #exceptionIcon>
+        <TinyIconFrown />
+      </template>
+    </tiny-progress>
+  </div>
+</template>
+
+<script lang="jsx">
+import { TinyProgress } from '@opentiny/vue'
+import { IconFrown, IconMeh, IconSmile } from '@opentiny/vue-icon'
+
+export default {
+  components: {
+    TinyProgress,
+    TinyIconSmile: IconSmile(),
+    TinyIconMeh: IconMeh(),
+    TinyIconFrown: IconFrown()
+  }
+}
+</script>

package/demos/mobile-first/app/steps/content-center.vue

@@ -0,0 +1,35 @@
+<template>
+  <tiny-steps ref="steps" advanced content-center flex :data="data" :active="advancedActive"></tiny-steps>
+</template>
+
+<script>
+import { TinySteps } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinySteps
+  },
+  data() {
+    return {
+      advancedActive: 2,
+      data: [
+        {
+          name: '默认',
+          status: '',
+          description:
+            'Optional Optional Optional Optional Optional Optional Optional Optional Optional Optional Optional Optional Optional Optional Optional Optional Optional Optional Optional Optional Optional Optional Optional Optional '
+        },
+        { name: '已完成', status: 'done', description: 'done 已完成' },
+        { name: '进行中', status: 'doing', description: 'doing 进行中' },
+        { name: '错误', status: 'error', description: 'error 错误' },
+        {
+          name: '已禁用',
+          status: 'disabled',
+          description:
+            'disabled 已禁用，描述内容描述内容，超出部分隐藏，描述内容，超出部分隐藏，描述内容，超出部分隐藏，描述内容，超出部分隐藏'
+        }
+      ]
+    }
+  }
+}
+</script>

package/demos/mobile-first/app/steps/webdoc/steps.js

@@ -39,6 +39,19 @@ export default {
       },
       codeFiles: ['advanced-steps.vue']
     },
+    {
+      demoId: 'content-center',
+      name: {
+        'zh-CN': '内容居中',
+        'en-US': 'Content center'
+      },
+      desc: {
+        'zh-CN': '<p>添加 <code>content-center</code> 使步骤条内容默认居中显示。</p>',
+        'en-US':
+          '<p>Adding the attribute<code>content center</code>can make the step bar content appear centered by default.</p>'
+      },
+      codeFiles: ['content-center.vue']
+    },
     {
       demoId: 'advanced-flex',
       name: {

package/demos/mobile-first/app/tabs/show-echarts.vue

@@ -10,7 +10,8 @@
 </template>
 
 <script>
-import { TinyTabs, TinyTabItem, TinyHuichartsBar, TinyHuichartsGauge } from '@opentiny/vue'
+import { TinyTabs, TinyTabItem } from '@opentiny/vue'
+import { TinyHuichartsBar, TinyHuichartsGauge } from '@opentiny/vue-huicharts'
 
 export default {
   components: {

package/demos/pc/app/card/card-select-composition-api.vue

@@ -159,10 +159,12 @@ const dataArr = ref([
 .card-stlecting {
   border-top: 1px solid rgba(0, 0, 0, 0.05);
 }
-</style>
-
-<style>
-#smb-card .tiny-card--small-padding {
+#smb-card :deep(.tiny-card--small-padding) {
   padding: 0;
 }
+.card-wrap :deep(.tiny-input__inner) {
+  border: none;
+  border-radius: 6px;
+  background-color: #fafafa;
+}
 </style>

package/demos/pc/app/card/card-select.vue

@@ -169,10 +169,12 @@ export default {
 .card-stlecting {
   border-top: 1px solid rgba(0, 0, 0, 0.05);
 }
-</style>
-
-<style>
-#smb-card .tiny-card--small-padding {
+#smb-card :deep(.tiny-card--small-padding) {
   padding: 0;
 }
+.card-wrap :deep(.tiny-input__inner) {
+  border: none;
+  border-radius: 6px;
+  background-color: #fafafa;
+}
 </style>

package/demos/pc/app/cascader/filterable-multiple.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('cascader#filterable-multiple')
-  await page.getByRole('textbox', { name: '试试搜索：安装' }).nth(1).click()
-  await page.getByRole('textbox', { name: '试试搜索：安装' }).nth(1).fill('安装')
+  await page.getByRole('textbox', { name: '试试搜索：安装' }).click()
+  await page.getByRole('textbox', { name: '试试搜索：安装' }).fill('安装')
   await page.waitForTimeout(1000)
   const text = await page.locator('.tiny-cascader__suggestion-item')
   await expect(text).toHaveText([

package/demos/pc/app/chart/amap/base-composition-api.vue

@@ -6,7 +6,7 @@
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import { TinyHuichartsAmap as TinyAutonaviMap } from '@opentiny/vue'
+import { TinyHuichartsAmap as TinyAutonaviMap } from '@opentiny/vue-huicharts'
 
 const options = ref({
   key: '4b5f2cf2cba25200cc6b68c398468899',

package/demos/pc/app/chart/amap/base.vue

@@ -5,7 +5,7 @@
 </template>
 
 <script lang="jsx">
-import { TinyHuichartsAmap } from '@opentiny/vue'
+import { TinyHuichartsAmap } from '@opentiny/vue-huicharts'
 
 export default {
   components: {

package/demos/pc/app/chart/bar/base-composition-api.vue

@@ -6,7 +6,7 @@
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import { TinyHuichartsBar as TinyChartBar } from '@opentiny/vue'
+import { TinyHuichartsBar as TinyChartBar } from '@opentiny/vue-huicharts'
 
 const options = ref({
   data: [

package/demos/pc/app/chart/bar/base.vue

@@ -5,7 +5,7 @@
 </template>
 
 <script lang="jsx">
-import { TinyHuichartsBar } from '@opentiny/vue'
+import { TinyHuichartsBar } from '@opentiny/vue-huicharts'
 
 export default {
   components: {

package/demos/pc/app/chart/bar/demo2-composition-api.vue

@@ -5,7 +5,7 @@
 </template>
 
 <script setup lang="jsx">
-import { TinyHuichartsBar as TinyChartBar } from '@opentiny/vue'
+import { TinyHuichartsBar as TinyChartBar } from '@opentiny/vue-huicharts'
 
 const options = {
   data: [

package/demos/pc/app/chart/bar/demo2.vue

@@ -5,7 +5,7 @@
 </template>
 
 <script lang="jsx">
-import { TinyHuichartsBar } from '@opentiny/vue'
+import { TinyHuichartsBar } from '@opentiny/vue-huicharts'
 
 export default {
   components: {

package/demos/pc/app/chart/bar/demo3-composition-api.vue

@@ -6,7 +6,7 @@
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import { TinyHuichartsBar as TinyChartBar } from '@opentiny/vue'
+import { TinyHuichartsBar as TinyChartBar } from '@opentiny/vue-huicharts'
 
 const options = ref({
   data: [

package/demos/pc/app/chart/bar/demo3.vue

@@ -5,7 +5,7 @@
 </template>
 
 <script lang="jsx">
-import { TinyHuichartsBar } from '@opentiny/vue'
+import { TinyHuichartsBar } from '@opentiny/vue-huicharts'
 
 export default {
   components: {

package/demos/pc/app/chart/bar/demo4-composition-api.vue

@@ -6,7 +6,7 @@
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import { TinyHuichartsBar as TinyChartBar } from '@opentiny/vue'
+import { TinyHuichartsBar as TinyChartBar } from '@opentiny/vue-huicharts'
 
 const options = ref({
   data: [

package/demos/pc/app/chart/bar/demo4.vue

@@ -5,7 +5,7 @@
 </template>
 
 <script lang="jsx">
-import { TinyHuichartsBar } from '@opentiny/vue'
+import { TinyHuichartsBar } from '@opentiny/vue-huicharts'
 
 export default {
   components: {

package/demos/pc/app/chart/bar/demo5-composition-api.vue

@@ -6,7 +6,7 @@
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import { TinyHuichartsBar as TinyChartBar } from '@opentiny/vue'
+import { TinyHuichartsBar as TinyChartBar } from '@opentiny/vue-huicharts'
 
 const options = ref({
   data: [

package/demos/pc/app/chart/bar/demo5.vue

@@ -5,7 +5,7 @@
 </template>
 
 <script lang="jsx">
-import { TinyHuichartsBar } from '@opentiny/vue'
+import { TinyHuichartsBar } from '@opentiny/vue-huicharts'
 
 export default {
   components: {

package/demos/pc/app/chart/bar/demo6-composition-api.vue

@@ -6,7 +6,7 @@
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import { TinyHuichartsBar as TinyChartBar } from '@opentiny/vue'
+import { TinyHuichartsBar as TinyChartBar } from '@opentiny/vue-huicharts'
 
 const options = ref({
   data: [

package/demos/pc/app/chart/bar/demo6.vue

@@ -5,7 +5,7 @@
 </template>
 
 <script lang="jsx">
-import { TinyHuichartsBar } from '@opentiny/vue'
+import { TinyHuichartsBar } from '@opentiny/vue-huicharts'
 
 export default {
   components: {

package/demos/pc/app/chart/bar/demo7-composition-api.vue

@@ -6,7 +6,7 @@
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import { TinyHuichartsBar as TinyChartBar } from '@opentiny/vue'
+import { TinyHuichartsBar as TinyChartBar } from '@opentiny/vue-huicharts'
 const options = ref({
   // 双向柱状图形态
   type: 'double-sides',