@opentiny/vue-docs 2.2.10 → 2.2.12

package/demos/mobile/app/numeric/webdoc/numeric.js

@@ -98,18 +98,6 @@ export default {
       },
       codeFiles: ['precision.vue']
     },
-    {
-      demoId: 'size',
-      name: {
-        'zh-CN': '尺寸',
-        'en-US': 'size'
-      },
-      desc: {
-        'zh-CN': '<p>尺寸</p>',
-        'en-US': '<p>bbutton click</p>'
-      },
-      codeFiles: ['size.vue']
-    },
     {
       demoId: 'step',
       name: {
@@ -218,16 +206,6 @@ export default {
           },
           demoId: 'precision'
         },
-        {
-          name: 'size',
-          type: 'Number | String',
-          defaultValue: '',
-          desc: {
-            'zh-CN': '<p>计数器尺寸，可选值：larger</p>',
-            'en-US': 'display different button'
-          },
-          demoId: 'precision'
-        },
         {
           name: 'step',
           type: 'Number',
@@ -248,16 +226,6 @@ export default {
           },
           demoId: 'step'
         },
-        {
-          name: 'theme',
-          type: 'String',
-          defaultValue: '',
-          desc: {
-            'zh-CN': '<p>设置圆角风格按钮</p>',
-            'en-US': 'display different button'
-          },
-          demoId: ''
-        },
 
         {
           name: 'value',

package/demos/mobile/app/timeline/different-data.vue

@@ -1,5 +1,5 @@
 <template>
-  <tiny-time-line :data="data" name-field="statusText" time-field="date"></tiny-time-line>
+  <tiny-time-line :data="data" name-field="statusText" :active="active" @click="click"></tiny-time-line>
 </template>
 
 <script lang="jsx">
@@ -15,48 +15,28 @@ export default {
       data: [
         {
           status: 'current',
-          date: '2019-11-12 14:20:15',
-          statusText: '筛选中',
+          statusText: '企业资料',
           personInfo: '张三',
           cycle: '周期：2天',
           overdue: '已超期 1 天'
         },
         {
           status: 'success',
-          date: '2019-11-12 14:20:15',
-          statusText: '筛选中',
-          personInfo: '张三',
-          cycle: '周期：2天',
-          overdue: '已超期 1 天'
-        },
-        {
-          status: 'fail',
-          date: '2019-11-12 14:20:15',
-          statusText: '筛选中',
-          personInfo: '张三',
-          cycle: '周期：2天',
-          overdue: '已超期 1 天'
-        },
-        {
-          status: 'complete',
-          date: '2019-11-12 14:20:15',
-          statusText: '筛选中',
+          statusText: '法人资料',
           personInfo: '张三',
           cycle: '周期：2天',
           overdue: '已超期 1 天'
         },
         {
           status: 'complete',
-          date: '2019-11-12 14:20:15',
-          statusText: '筛选中',
+          statusText: '校验身份',
           personInfo: '张三',
           cycle: '周期：2天',
           overdue: '已超期 1 天'
         },
         {
           status: 'complete',
-          date: '2019-11-11 00:01:30',
-          statusText: '筛选中',
+          statusText: '提交资料',
           personInfo: '张三',
           cycle: '周期：2天',
           overdue: '已超期 1 天'

package/demos/pc/app/anchor/change-composition-api.vue

@@ -42,6 +42,6 @@ const links = ref([
 ])
 
 function handleChange(link) {
-  Modal.message(`change${link}`)
+  Modal.message({ message: `change${link}`, status: 'info' })
 }
 </script>

package/demos/pc/app/anchor/change.vue

@@ -49,7 +49,7 @@ export default {
   },
   methods: {
     handleChange(link) {
-      Modal.message(`change${link}`)
+      Modal.message({ message: `change${link}`, status: 'info' })
     }
   }
 }

package/demos/pc/app/anchor/is-affix-composition-api.vue

@@ -2,7 +2,7 @@
   <div class="wrap">
     <div class="demo-top mb10">
       <tiny-switch v-model="isAffix"></tiny-switch>
-      <span>{{ isAffix ? '关闭固定模式' : '打开固定模式' }}</span>
+      <span>{{ isAffix ? '打开固定模式' : '关闭固定模式' }}</span>
     </div>
     <tiny-anchor :links="links" :is-affix="isAffix"></tiny-anchor>
   </div>

package/demos/pc/app/anchor/is-affix.vue

@@ -2,7 +2,7 @@
   <div class="wrap">
     <div class="demo-top mb10">
       <tiny-switch v-model="isAffix"></tiny-switch>
-      <span>{{ isAffix ? '关闭固定模式' : '打开固定模式' }}</span>
+      <span>{{ isAffix ? '打开固定模式' : '关闭固定模式' }}</span>
     </div>
     <tiny-anchor :links="links" :is-affix="isAffix"></tiny-anchor>
   </div>

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

@@ -88,7 +88,7 @@ export default {
         },
         {
           'name': 'type',
-          'type': '"line" | "dot"',
+          'type': `'line' | 'dot'`,
           'defaultValue': `'line'`,
           'desc': {
             'zh-CN': '锚点类型',

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

@@ -14,7 +14,7 @@ export default {
     },
     {
       'demoId': 'type',
-      'name': { 'zh-CN': '主題样式', 'en-US': 'Theme Style' },
+      'name': { 'zh-CN': '主题样式', 'en-US': 'Theme Style' },
       'desc': {
         'zh-CN':
           '<p>通过 <code>type</code> 设置显示主题，可选值： <code>primary</code> 、<code>success</code> 、<code>warning</code> 、<code>danger</code> 、<code>info</code>。</p>\n',
@@ -160,7 +160,7 @@ export default {
           'defaultValue': '--',
           'desc': {
             'zh-CN':
-              "指定徽章显示的最大值,如果实际获取的徽章值超过该最大值，则以最大值后接一个 '+' 的形式显示徽章数，要求 value 是 number 类型",
+              "指定徽章显示的最大值，如果实际获取的徽章值超过该最大值，则以最大值后接一个 '+' 的形式显示徽章数，要求 value 是 number 类型",
             'en-US':
               'Specifies the maximum number of badges to be displayed. If the actual badge value exceeds the maximum value, the number of badges is displayed in the format of "+". The value must be of the number type.'
           },
@@ -189,7 +189,8 @@ export default {
         },
         {
           'name': 'type',
-          'type': "'primary' | 'success' | 'warning' | 'danger' | 'info'",
+          'type': 'IPtype',
+          'typeAnchorName': 'IPtype',
           'defaultValue': "'danger'",
           'desc': {
             'zh-CN': '标记的类型',
@@ -232,5 +233,12 @@ export default {
         }
       ]
     }
+  ],
+  types: [
+    {
+      name: 'IPtype',
+      type: 'type',
+      code: "type IPtype = 'primary' | 'success' | 'warning' | 'danger' | 'info'"
+    }
   ]
 }

package/demos/pc/app/calendar-view/calendar-disabled-day.spec.ts

@@ -3,7 +3,7 @@ import { test, expect } from '@playwright/test'
 test('日期禁用', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('calendar-view#calendar-disabled-day')
-  const day10 = page.getByText('10').nth(1)
+  const day10 = page.getByText('10').nth(2)
   const day14 = page.getByText('14').nth(1)
   const day15 = page.getByText('15').nth(1)
   await expect(day10).toHaveClass(/is-disabled/)

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

@@ -6,8 +6,10 @@ export default {
       'demoId': 'basic-usage',
       'name': { 'zh-CN': '基本用法', 'en-US': 'Basic Usage' },
       'desc': {
-        'zh-CN': '<p>配置 <code>name</code> 属性作为每个 <code>collapse-item</code> 的唯一标志符，配置 <code>v-model</code> 设置当前激活的面板。默认情况下可以同时展开多个面板，这个例子默认展开了第一和第三个面板。</p>',
-        'en-US': '<p>For details, see the following example.<br/>Configure the <code>name</code> attribute as the unique identifier for each collapse-item.</p>'
+        'zh-CN':
+          '<p>配置 <code>name</code> 属性作为每个 <code>collapse-item</code> 的唯一标志符，配置 <code>v-model</code> 设置当前激活的面板。默认情况下可以同时展开多个面板，这个例子默认展开了第一和第三个面板。</p>',
+        'en-US':
+          '<p>For details, see the following example.<br/>Configure the <code>name</code> attribute as the unique identifier for each collapse-item.</p>'
       },
       'codeFiles': ['basic-usage.vue']
     },
@@ -15,8 +17,10 @@ export default {
       'demoId': 'accordion',
       'name': { 'zh-CN': '手风琴效果', 'en-US': 'Accordion Effect' },
       'desc': {
-        'zh-CN': '<p>配置 <code>accordion</code> 属性为 <code>true</code>  后，折叠面板将展示手风琴效果，一次只允许展开一个面板。</p>',
-        'en-US': '<p>After <code>accordion</code> is set to true, the collapsed panel displays the accordion effect. <br/>Configure <code>v-model</code> to set the currently active panel. (In accordion mode, the binding value type must be string. Otherwise, the binding value type is array.) </p>'
+        'zh-CN':
+          '<p>配置 <code>accordion</code> 属性为 <code>true</code>  后，折叠面板将展示手风琴效果，一次只允许展开一个面板。</p>',
+        'en-US':
+          '<p>After <code>accordion</code> is set to true, the collapsed panel displays the accordion effect. <br/>Configure <code>v-model</code> to set the currently active panel. (In accordion mode, the binding value type must be string. Otherwise, the binding value type is array.) </p>'
       },
       'codeFiles': ['accordion.vue']
     },
@@ -24,8 +28,10 @@ export default {
       'demoId': 'disable',
       'name': { 'zh-CN': '禁用状态', 'en-US': 'Disabled' },
       'desc': {
-        'zh-CN': '<p>在 <code>collapse-item</code> 元素上配置 <code>disabled</code> 属性为 true 后，将禁用指定的折叠面板项。</p>',
-        'en-US': '<p>When the <code>disabled</code> attribute is set to true on the <code>collapse-item</code> element, the specified collapse panel item is disabled. </p>'
+        'zh-CN':
+          '<p>在 <code>collapse-item</code> 元素上配置 <code>disabled</code> 属性为 true 后，将禁用指定的折叠面板项。</p>',
+        'en-US':
+          '<p>When the <code>disabled</code> attribute is set to true on the <code>collapse-item</code> element, the specified collapse panel item is disabled. </p>'
       },
       'codeFiles': ['disable.vue']
     },
@@ -33,8 +39,10 @@ export default {
       'demoId': 'title',
       'name': { 'zh-CN': '面板标题', 'en-US': 'Custom Panel Title' },
       'desc': {
-        'zh-CN': '<p>在 <code>collapse-item</code> 元素上配置 <code>title</code> 属性可以指定每个折叠面板项的标题。也可以通过 <code>title</code> 插槽的方式自定义面板标题，比如在标题后增加图标。<br/>在 <code>collapse-item</code> 元素上配置 <code>title-right</code> 属性可以指定每个折叠面板项标题的右侧内容。也可以通过 <code>title-right</code> 插槽的方式自定义面板标题右侧内容，比如在标题右侧增加图标。</p>',
-        'en-US': '<p>Configure the <code>title</code> attribute on the <code>collapse-item</code> element to specify the title of each collapse panel item. However, you can also customize the panel title by using the <code>title</code> slot, for example, adding an icon before the title. <br/>Configure the <code>title-right</code> attribute on the <code>collapse-item</code> element to specify the right side of each collapse panel item title. However, you can also customize the content on the right of the panel title by using the <code>title-right</code> slot, for example, adding an icon to the right of the title.</p>'
+        'zh-CN':
+          '<p>在 <code>collapse-item</code> 元素上配置 <code>title</code> 属性可以指定每个折叠面板项的标题。也可以通过 <code>title</code> 插槽的方式自定义面板标题，比如在标题后增加图标。<br/>在 <code>collapse-item</code> 元素上配置 <code>title-right</code> 属性可以指定每个折叠面板项标题的右侧内容。也可以通过 <code>title-right</code> 插槽的方式自定义面板标题右侧内容，比如在标题右侧增加图标。</p>',
+        'en-US':
+          '<p>Configure the <code>title</code> attribute on the <code>collapse-item</code> element to specify the title of each collapse panel item. However, you can also customize the panel title by using the <code>title</code> slot, for example, adding an icon before the title. <br/>Configure the <code>title-right</code> attribute on the <code>collapse-item</code> element to specify the right side of each collapse panel item title. However, you can also customize the content on the right of the panel title by using the <code>title-right</code> slot, for example, adding an icon to the right of the title.</p>'
       },
       'codeFiles': ['title.vue']
     },
@@ -42,8 +50,10 @@ export default {
       'demoId': 'icon',
       'name': { 'zh-CN': '展开/折叠图标', 'en-US': 'Customize the expansion and collapse icon' },
       'desc': {
-        'zh-CN': '<p>在 <code>collapse-item</code> 元素上可以通过 <code>icon</code> 插槽的方式自定义展开折叠 icon 图标。</p>',
-        'en-US': '<p>On the <code>collapse-item</code> element, you can customize the folding icon icon by using the <code>icon</code> slot. </p>'
+        'zh-CN':
+          '<p>在 <code>collapse-item</code> 元素上可以通过 <code>icon</code> 插槽的方式自定义展开折叠 icon 图标。</p>',
+        'en-US':
+          '<p>On the <code>collapse-item</code> element, you can customize the folding icon icon by using the <code>icon</code> slot. </p>'
       },
       'codeFiles': ['icon.vue']
     },
@@ -52,7 +62,8 @@ export default {
       'name': { 'zh-CN': '阻止切换', 'en-US': 'Prevent the event of closing the folding panel' },
       'desc': {
         'zh-CN': '<p>设置 before-close 属性，如果返回 false，将阻止面板的切换。</p>',
-        'en-US': '<p>:before-close event before closing the folding panel. In the method, return true/false indicates whether the folding panel can be closed.</p>'
+        'en-US':
+          '<p>:before-close event before closing the folding panel. In the method, return true/false indicates whether the folding panel can be closed.</p>'
       },
       'codeFiles': ['before-close.vue']
     },
@@ -92,7 +103,7 @@ export default {
         },
         {
           'name': 'before-close',
-          'type': '(item: object, activeNames: string | number | Array) => boolean',
+          'type': '(item: Component, activeNames: string | number | Array) => boolean',
           'defaultValue': '--',
           'desc': {
             'zh-CN': '阻止折叠面板切换',
@@ -106,7 +117,8 @@ export default {
           'defaultValue': '--',
           'desc': {
             'zh-CN': '当前激活的面板。如果是手风琴模式，绑定值类型需要为 string | number，否则为 Array',
-            'en-US': 'Currently activated panel (In accordion mode, the binding value type must be string. Otherwise, the binding value type is array.)'
+            'en-US':
+              'Currently activated panel (In accordion mode, the binding value type must be string. Otherwise, the binding value type is array.)'
           },
           'demoId': 'basic-usage'
         }
@@ -130,7 +142,8 @@ export default {
           'defaultValue': '--',
           'desc': {
             'zh-CN': '当前激活面板改变时触发。如果是手风琴模式，参数 activeNames 类型为 string | number，否则为 Array',
-            'en-US': 'Triggered when the current active panel changes. (In accordion mode, the type of activeNames is string. Otherwise, the type of activeNames is array.)'
+            'en-US':
+              'Triggered when the current active panel changes. (In accordion mode, the type of activeNames is string. Otherwise, the type of activeNames is array.)'
           },
           'demoId': 'events'
         }
@@ -156,7 +169,7 @@ export default {
           'defaultValue': '--',
           'desc': {
             'zh-CN': '唯一标志符',
-            'en-US': 'Unique identifier' 
+            'en-US': 'Unique identifier'
           },
           'demoId': 'basic-usage'
         },

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

@@ -44,7 +44,8 @@ export default {
       'props': [
         {
           'name': 'pattern',
-          'type': `'default' | 'simple' | 'legend' | 'classic' | 'fashion'`,
+          'type': 'IContainerPattern',
+          'typeAnchorName': 'IContainerPattern',
           'defaultValue': '"default"',
           'desc': {
             'zh-CN': '版型类型',
@@ -106,5 +107,12 @@ export default {
         }
       ]
     }
+  ],
+  types: [
+    {
+      name: 'IContainerPattern',
+      type: 'interface',
+      code: `type IContainerPattern = 'default' | 'simple' | 'legend' | 'classic' | 'fashion'`
+    }
   ]
 }

package/demos/pc/app/date-picker/clear-composition-api.vue

@@ -1,16 +1,16 @@
 <template>
   <div>
-    <p>默认显示清除按钮</p>
+    <p>默认显示清除按钮：</p>
     <div class="demo-date-picker-wrap">
       <tiny-date-picker v-model="value"></tiny-date-picker>
     </div>
-  
-    <p>隐藏清除按钮</p>
+
+    <p>隐藏清除按钮：</p>
     <div class="demo-date-picker-wrap">
       <tiny-date-picker v-model="value" :clearable="false"></tiny-date-picker>
     </div>
 
-    <p>自定义清除图标</p>
+    <p>自定义清除图标：</p>
     <div class="demo-date-picker-wrap">
       <tiny-date-picker v-model="value" :clear-icon="IconClose"></tiny-date-picker>
     </div>

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

@@ -1,16 +1,16 @@
 <template>
   <div>
-    <p>默认显示清除按钮</p>
+    <p>默认显示清除按钮：</p>
     <div class="demo-date-picker-wrap">
       <tiny-date-picker v-model="value"></tiny-date-picker>
     </div>
-  
-    <p>隐藏清除按钮</p>
+
+    <p>隐藏清除按钮：</p>
     <div class="demo-date-picker-wrap">
       <tiny-date-picker v-model="value" :clearable="false"></tiny-date-picker>
     </div>
 
-    <p>自定义清除图标</p>
+    <p>自定义清除图标：</p>
     <div class="demo-date-picker-wrap">
       <tiny-date-picker v-model="value" :clear-icon="IconClose"></tiny-date-picker>
     </div>

package/demos/pc/app/date-picker/date-range-composition-api.vue

@@ -1,9 +1,33 @@
 <template>
   <div class="demo-date-picker-wrap">
-    <tiny-date-picker v-model="value" type="daterange" start-placeholder="开始日期" end-placeholder="结束日期" range-separator="至"></tiny-date-picker>
-    <tiny-date-picker v-model="dateTimeValue" type="datetimerange" start-placeholder="开始日期" end-placeholder="结束日期" range-separator="至"></tiny-date-picker>
-    <tiny-date-picker v-model="monthValue" type="monthrange" start-placeholder="开始月份" end-placeholder="结束月份" range-separator="至"></tiny-date-picker>
-    <tiny-date-picker v-model="yearValue" type="yearrange" start-placeholder="开始年份" end-placeholder="结束年份" range-separator="至"></tiny-date-picker>
+    <tiny-date-picker
+      v-model="value"
+      type="daterange"
+      start-placeholder="开始日期"
+      end-placeholder="结束日期"
+      range-separator="至"
+    ></tiny-date-picker>
+    <tiny-date-picker
+      v-model="dateTimeValue"
+      type="datetimerange"
+      start-placeholder="开始日期"
+      end-placeholder="结束日期"
+      range-separator="至"
+    ></tiny-date-picker>
+    <tiny-date-picker
+      v-model="monthValue"
+      type="monthrange"
+      start-placeholder="开始月份"
+      end-placeholder="结束月份"
+      range-separator="至"
+    ></tiny-date-picker>
+    <tiny-date-picker
+      v-model="yearValue"
+      type="yearrange"
+      start-placeholder="开始年份"
+      end-placeholder="结束年份"
+      range-separator="至"
+    ></tiny-date-picker>
   </div>
 </template>
 
@@ -21,6 +45,10 @@ const yearValue = ref('')
 .demo-date-picker-wrap {
   width: 350px;
 
+  :deep(.tiny-date-editor--datetimerange.tiny-input__inner) {
+    width: 350px;
+  }
+
   & > * {
     margin-top: 12px;
   }

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

@@ -1,9 +1,33 @@
 <template>
   <div class="demo-date-picker-wrap">
-    <tiny-date-picker v-model="value" type="daterange" start-placeholder="开始日期" end-placeholder="结束日期" range-separator="至"></tiny-date-picker>
-    <tiny-date-picker v-model="dateTimeValue" type="datetimerange" start-placeholder="开始日期" end-placeholder="结束日期" range-separator="至"></tiny-date-picker>
-    <tiny-date-picker v-model="monthValue" type="monthrange" start-placeholder="开始月份" end-placeholder="结束月份" range-separator="至"></tiny-date-picker>
-    <tiny-date-picker v-model="yearValue" type="yearrange" start-placeholder="开始年份" end-placeholder="结束年份" range-separator="至"></tiny-date-picker>
+    <tiny-date-picker
+      v-model="value"
+      type="daterange"
+      start-placeholder="开始日期"
+      end-placeholder="结束日期"
+      range-separator="至"
+    ></tiny-date-picker>
+    <tiny-date-picker
+      v-model="dateTimeValue"
+      type="datetimerange"
+      start-placeholder="开始日期"
+      end-placeholder="结束日期"
+      range-separator="至"
+    ></tiny-date-picker>
+    <tiny-date-picker
+      v-model="monthValue"
+      type="monthrange"
+      start-placeholder="开始月份"
+      end-placeholder="结束月份"
+      range-separator="至"
+    ></tiny-date-picker>
+    <tiny-date-picker
+      v-model="yearValue"
+      type="yearrange"
+      start-placeholder="开始年份"
+      end-placeholder="结束年份"
+      range-separator="至"
+    ></tiny-date-picker>
   </div>
 </template>
 
@@ -29,6 +53,10 @@ export default {
 .demo-date-picker-wrap {
   width: 350px;
 
+  :deep(.tiny-date-editor--datetimerange.tiny-input__inner) {
+    width: 350px;
+  }
+
   & > * {
     margin-top: 12px;
   }

package/demos/pc/app/date-picker/default-value-composition-api.vue

@@ -1,13 +1,17 @@
 <template>
   <div>
-    <p>打开日期面板，默认显示的日期</p>
+    <p>打开日期面板，默认显示的日期：</p>
     <div class="demo-date-picker-wrap">
       <tiny-date-picker v-model="value" :default-value="defaultDate"></tiny-date-picker>
     </div>
-    <p>日期时间(范围)，选择日期之后默认显示的时间(范围)</p>
+    <p>日期时间(范围)，选择日期之后默认显示的时间(范围)：</p>
     <div class="demo-date-picker-wrap">
       <tiny-date-picker v-model="dateTimeValue" type="datetime" :default-time="defaultTime"></tiny-date-picker>
-      <tiny-date-picker v-model="dateTimeRangeValue" type="datetimerange" :default-time="defaultTimeRange"></tiny-date-picker>
+      <tiny-date-picker
+        v-model="dateTimeRangeValue"
+        type="datetimerange"
+        :default-time="defaultTimeRange"
+      ></tiny-date-picker>
     </div>
   </div>
 </template>
@@ -28,6 +32,10 @@ const defaultTimeRange = ref(['09:00:00', '18:00:00'])
 .demo-date-picker-wrap {
   width: 280px;
 
+  :deep(.tiny-date-editor--datetimerange.tiny-input__inner) {
+    width: 280px;
+  }
+
   & > * {
     margin-top: 12px;
   }

package/demos/pc/app/date-picker/default-value.vue

@@ -1,13 +1,17 @@
 <template>
   <div>
-    <p>打开日期面板，默认显示的日期</p>
+    <p>打开日期面板，默认显示的日期：</p>
     <div class="demo-date-picker-wrap">
       <tiny-date-picker v-model="value" :default-value="defaultDate"></tiny-date-picker>
     </div>
-    <p>日期时间(范围)，选择日期之后默认显示的时间(范围)</p>
+    <p>日期时间(范围)，选择日期之后默认显示的时间(范围)：</p>
     <div class="demo-date-picker-wrap">
       <tiny-date-picker v-model="dateTimeValue" type="datetime" :default-time="defaultTime"></tiny-date-picker>
-      <tiny-date-picker v-model="dateTimeRangeValue" type="datetimerange" :default-time="defaultTimeRange"></tiny-date-picker>
+      <tiny-date-picker
+        v-model="dateTimeRangeValue"
+        type="datetimerange"
+        :default-time="defaultTimeRange"
+      ></tiny-date-picker>
     </div>
   </div>
 </template>
@@ -36,6 +40,10 @@ export default {
 .demo-date-picker-wrap {
   width: 280px;
 
+  :deep(.tiny-date-editor--datetimerange.tiny-input__inner) {
+    width: 280px;
+  }
+
   & > * {
     margin-top: 12px;
   }

package/demos/pc/app/date-picker/disabled-composition-api.vue

@@ -52,6 +52,10 @@ const pickerOptions = {
 .demo-date-picker-wrap {
   width: 280px;
 
+  :deep(.tiny-date-editor--daterange.tiny-input__inner) {
+    width: 280px;
+  }
+
   & > * {
     margin-top: 12px;
   }

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

@@ -59,6 +59,10 @@ export default {
 .demo-date-picker-wrap {
   width: 280px;
 
+  :deep(.tiny-date-editor--daterange.tiny-input__inner) {
+    width: 280px;
+  }
+
   & > * {
     margin-top: 12px;
   }

package/demos/pc/app/date-picker/label-inside-composition-api.vue

@@ -17,6 +17,10 @@ const dateRangeValue = ref([])
 .demo-date-picker-wrap {
   width: 280px;
 
+  :deep(.tiny-date-editor--daterange.tiny-input__inner) {
+    width: 280px;
+  }
+
   & > * {
     margin-top: 12px;
   }

package/demos/pc/app/date-picker/label-inside.vue

@@ -25,6 +25,10 @@ export default {
 .demo-date-picker-wrap {
   width: 280px;
 
+  :deep(.tiny-date-editor--daterange.tiny-input__inner) {
+    width: 280px;
+  }
+
   & > * {
     margin-top: 12px;
   }