@opentiny/vue-docs 2.1.8 → 2.1.10

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

@@ -5,7 +5,10 @@ export default {
     {
       'demoId': 'basic-usage',
       'name': { 'zh-CN': '基本用法', 'en-US': 'Basic Usage' },
-      'desc': { 'zh-CN': '<p>详细用法参考如下示例。</p>', 'en-US': '<p>For details, see the following example.</p>' },
+      'desc': {
+        'zh-CN': '<p>通过 <code>v-model</code> 设置绑定值，<code>name</code> 设置原生属性。</p>',
+        'en-US': '<p>For details, see the following example.</p>'
+      },
       'codeFiles': ['basic-usage.vue']
     },
     {
@@ -13,9 +16,9 @@ export default {
       'name': { 'zh-CN': '复选框组', 'en-US': 'Checkbox group' },
       'desc': {
         'zh-CN':
-          '<p> <code>checkbox-group</code> 可以将多个 <code>checkbox</code> 元素管理为一组，在 <code>checkbox-group</code> 中使用 <code>v-model</code> 绑定 Array 类型的变量即可实现双向绑定。 <code>checkbox</code> 的 <code>label</code> 属性是其对应的值，若该标签中无内容，则该属性也充当 <code>checkbox</code> 的描述文本。 <code>label</code> 与数组中的元素值相对应，如果存在指定的值则为选中状态，否则为不选中。</p>\n',
+          '<p><code>checkbox-group</code> 可以将多个 <code>checkbox</code> 元素管理为一组，在 <code>checkbox-group</code> 中使用 <code>v-model</code> 绑定选中值。<code>checkbox</code> 的 <code>label</code> 与 <code>checkbox-group</code> 的绑定值相对应，如果存在指定的值则为选中状态，否则为不选中。</p>',
         'en-US':
-          '<p>Manages multiple <code>checkbox</code> elements into a group through the <code>checkbox-group</code> element. In <code>checkbox-group</code> , use <code>v-model</code> to bind variables of the Array type to implement bidirectional binding. The <code>label</code> attribute of the <code>checkbox</code> is its corresponding value. If there is no content in the tag, the attribute also serves as the introduction after the checkbox. <code>label</code> corresponds to the element value in the array. If the specified value exists, the value is selected. Otherwise, the value is not selected. </p>\n'
+          '<p><code>checkbox-group</code> can manage multiple<code>checkbox</code>elements into a group and use<code>v model</code>to bind selected values in<code>checkbox group</code>< The<code>label</code>of code>checkbox</code>corresponds to the binding value of<code>checkbox group</code>. If a specified value exists, it is selected, otherwise it is not selected.</p>'
       },
       'codeFiles': ['checkbox-group.vue']
     },
@@ -23,30 +26,20 @@ export default {
       'demoId': 'checkbox-button',
       'name': { 'zh-CN': '复选框按钮', 'en-US': 'Checkbox button' },
       'desc': {
-        'zh-CN':
-          '<p>通过 <code>checkbox-button</code> 以按钮的形式展示复选框,用法与 <code>checkbox</code> 相似。复选框按钮组可以通过 <code>fill</code> 自定义选中时背景颜色。</p>\n',
+        'zh-CN': '<p>通过 <code>checkbox-button</code> 以按钮的形式展示复选框，用法与 <code>checkbox</code> 相似。</p>',
         'en-US':
-          '<p> <code>checkbox button</code> Display checkboxes in the form of buttons, similar in usage to <code>checkbox</code> .The checkbox button group can customize the background color when selected through <code>fill</code> .</p>\n'
+          '<p> <code>checkbox button</code> Display checkboxes in the form of buttons, similar in usage to <code>checkbox</code> .</p>'
       },
       'codeFiles': ['checkbox-button.vue']
     },
-    {
-      'demoId': 'checkbox-events',
-      'name': { 'zh-CN': '事件', 'en-US': 'Event' },
-      'desc': {
-        'zh-CN': '<p>勾选值改变后将触发 <code>change</code> 事件。</p>\n',
-        'en-US': '<p>The <code>change</code> event is triggered when the value of the check box is changed. </p>\n'
-      },
-      'codeFiles': ['checkbox-events.vue']
-    },
     {
       'demoId': 'group-options',
       'name': { 'zh-CN': '配置式复选框组', 'en-US': 'Profile Checkbox Group' },
       'desc': {
         'zh-CN':
-          '<p>通过 <code>options</code> 配置显示多选框组。使用该属性后，可以不用再在标签中以插槽的形式插入 <code>checkbox</code> 或 <code>checkbox-button</code> 元素。 <code>options</code> 的类型为<a href="#ICheckboxGroupOptions">ICheckboxGroupOptions[]</a>。 <code>type</code> 属性配合 <code>options</code> 属性一起使用，将 <code>type</code> 配置为 <code>button</code> ，复选框组将以按钮的形式展示。</p>\n',
+          '<p>通过 <code>options</code> 配置显示多选框组。使用该属性后，可以不用再在标签中以插槽的形式插入 <code>checkbox</code> 或 <code>checkbox-button</code> 元素。 <code>options</code> 的类型为 <a href="#ICheckboxGroupOptions">ICheckboxGroupOptions[]</a> 。 <code>type</code> 属性配合 <code>options</code> 属性一起使用，将 <code>type</code> 配置为 <code>button</code> ，复选框组将以按钮的形式展示。</p>',
         'en-US':
-          '<p>Configure the display of multiple selection box groups through <code>options</code> . After using this attribute, you no longer need to insert <code>checkbox</code> or <code>checkbox button</code> elements in the label as slots. The type of <code>options</code> is<a="# ICheckboxGroupOptions">ICheckboxGroupOptions[]</a>< The code>type</code> attribute is used in conjunction with the <code>options</code> attribute to configure the <code>type</code> as <code>button</code> , and the checkbox group will be displayed in the form of a button.</p>\n'
+          '<p>Configure the display of multiple selection box groups through <code>options</code> . After using this attribute, you no longer need to insert <code>checkbox</code> or <code>checkbox button</code> elements in the label as slots. The type of <code>options</code> is <a="# ICheckboxGroupOptions">ICheckboxGroupOptions[]</a> .The <code>type</code> attribute is used in conjunction with the <code>options</code> attribute to configure the <code>type</code> as <code>button</code> , and the checkbox group will be displayed in the form of a button.</p>'
       },
       'codeFiles': ['group-options.vue']
     },
@@ -55,7 +48,7 @@ export default {
       'name': { 'zh-CN': '描述文本', 'en-US': 'Description text' },
       'desc': {
         'zh-CN':
-          '<p>复选框和复现框按钮的描述文本，有三种方式可以提供，优先级依次为 <code>默认插槽</code> 、 <code>text</code> 、 <code>label</code> 。</p>',
+          '<p>复选框或复现框按钮的描述文本，有三种方式可以提供，优先级依次为 <code>默认插槽</code> 、<code>text</code> 、<code>label</code> 。</p>',
         'en-US':
           '<p>There are three ways to provide the description text for the checkbox or checkbox button, with priority being <code>default slot</code> , <code>text</code> , and <code>label</code> .<p>'
       },
@@ -66,9 +59,9 @@ export default {
       'name': { 'zh-CN': '全选与半选', 'en-US': 'All and Half' },
       'desc': {
         'zh-CN':
-          '<p>在 <code>checkbox</code> 元素中配置 <code>indeterminate</code> 属性为 true 后，勾选框将展示为半选的样式。</p>\n',
+          '<p>在 <code>checkbox</code> 元素中配置 <code>indeterminate</code> 属性为 true 后，勾选框将展示为半选的样式。</p>',
         'en-US':
-          '<p>After the <code>indeterminate</code> attribute is set to true in the <code>checkbox</code> element, the check box is displayed as half-selected. </p>\n'
+          '<p>After the <code>indeterminate</code> attribute is set to true in the <code>checkbox</code> element, the check box is displayed as half-selected. </p>'
       },
       'codeFiles': ['indeterminate.vue']
     },
@@ -77,9 +70,9 @@ export default {
       'name': { 'zh-CN': '可选数量限制', 'en-US': 'Quantity Limit' },
       'desc': {
         'zh-CN':
-          '<p>在 <code>checkbox-group</code> 上可通过 <code>min</code> 、 <code>max</code> 属性指定可勾选项目的最小、最大值。</p>\n',
+          '<p>在 <code>checkbox-group</code> 上可通过 <code>min</code> 、 <code>max</code> 属性指定可勾选项目的最小、最大值。</p>',
         'en-US':
-          '<p>On the <code>checkbox-group</code> , the <code>min</code> and <code>max</code> attributes can be used to specify the minimum and maximum values of the options that can be selected. </p>\n'
+          '<p>On the <code>checkbox-group</code> , the <code>min</code> and <code>max</code> attributes can be used to specify the minimum and maximum values of the options that can be selected. </p>'
       },
       'codeFiles': ['min-max.vue']
     },
@@ -88,9 +81,9 @@ export default {
       'name': { 'zh-CN': '是否默认勾选', 'en-US': 'Default selected' },
       'desc': {
         'zh-CN':
-          '<p> <code>check-group</code> 上绑定的v-model可以配置默认选中， <code>checked</code> 同样可以配置默认选中。</p>\n',
+          '<p> <code>checkbox-group</code> 上绑定的 <code>v-model</code> 可以配置默认选中， <code>checked</code> 同样可以配置默认选中。</p>',
         'en-US':
-          '<p>The v-model bound on <code>check group</code> can be configured with default selection, and <code>checked</code> can also be configured with default selection.</p>\n'
+          '<p>The v-model bound on <code>check group</code> can be configured with default selection, and <code>checked</code> can also be configured with default selection.</p>'
       },
       'codeFiles': ['checked.vue']
     },
@@ -99,9 +92,9 @@ export default {
       'name': { 'zh-CN': '垂直布局', 'en-US': 'vertical layout' },
       'desc': {
         'zh-CN':
-          '<p>在 <code>checkbox-group</code> 元素上设置 <code>vertical</code> 为 true，则其管理的 <code>checkbox-button</code> 或 <code>checkbox</code> 将展示为垂直布局。</p>\n',
+          '<p>在 <code>checkbox-group</code> 元素上设置 <code>vertical</code> 为 true，则其管理的 <code>checkbox-button</code> 或 <code>checkbox</code> 将展示为垂直布局。</p>',
         'en-US':
-          '<p>Set <code>vertical</code> to true on the <code>checkbox-group</code> element, The <code>checkbox-button</code> or <code>checkbox</code> managed by it is displayed as a vertical layout. </p>\n'
+          '<p>Set <code>vertical</code> to true on the <code>checkbox-group</code> element, The <code>checkbox-button</code> or <code>checkbox</code> managed by it is displayed as a vertical layout. </p>'
       },
       'codeFiles': ['vertical-checkbox.vue']
     },
@@ -110,9 +103,9 @@ export default {
       'name': { 'zh-CN': '带边框复选框', 'en-US': 'Checkbox border' },
       'desc': {
         'zh-CN':
-          '<p> <code>checkbox</code> 上配置 <code>border</code> ，可显示边框。若复选框后的描述文本超出时，可以通过 Tooltip 组件增加提示信息，鼠标悬停时可提示所有内容。</p>\n',
+          '<p> <code>checkbox</code> 上配置 <code>border</code> ，可显示边框。若复选框后的描述文本超出时，可以通过 <code>tooltip</code> 组件增加提示信息，鼠标悬停时可提示所有内容。</p>',
         'en-US':
-          '<p>Configure <code>border</code> on <code>checkbox</code> to display borders. If the description text after the check box exceeds, a prompt message can be added through the Tooltip component, and all content can be prompted when the mouse hovers.</p>\n'
+          '<p>Configure <code>border</code> on <code>checkbox</code> to display borders. If the description text after the check box exceeds, a prompt message can be added through the Tooltip component, and all content can be prompted when the mouse hovers.</p>'
       },
       'codeFiles': ['border.vue']
     },
@@ -120,9 +113,9 @@ export default {
       'demoId': 'text',
       'name': { 'zh-CN': '状态对应的值', 'en-US': 'Text' },
       'desc': {
-        'zh-CN': '<p>通过 <code>true-label</code> 设置选中的值， <code>false-label</code> 设置未选中的值。</p>\n',
+        'zh-CN': '<p>通过 <code>true-label</code> 设置选中的值， <code>false-label</code> 设置未选中的值。</p>',
         'en-US':
-          '<p>Use <code>true-label</code> to set the selected value, and <code>false-label</code> to set the unselected value. </p>\n'
+          '<p>Use <code>true-label</code> to set the selected value, and <code>false-label</code> to set the unselected value. </p>'
       },
       'codeFiles': ['text.vue']
     },
@@ -131,18 +124,29 @@ export default {
       'name': { 'zh-CN': '尺寸', 'en-US': 'Dimension' },
       'desc': {
         'zh-CN':
-          '<p>当复选框为按钮形式时， <code>size</code> 属性可以设置尺寸，可选项有 <code>medium、small、mini</code> 不设置则为默认样式。</p>',
+          '<p>当复选框为按钮形式时， <code>size</code> 属性可以设置尺寸，可选项有 <code>medium</code> 、<code>small</code> 、<code>mini</code>，不设置则为默认样式。</p>',
         'en-US':
-          '<p>When the check box is a button, you can set the size of the button through the <code>size</code> attribute. The options are medium, small, and mini. \n\n Setting the <code>disabled</code> property on <code>checkbox-button</code> will disable a check button. If the <code>disabled</code> attribute is configured on the <code>checkbox-group</code> tab, all check buttons are disabled. </p>\n'
+          '<p>When the check box is a button, you can set the size of the button through the <code>size</code> attribute. The options are medium, small, and mini. \n\n Setting the <code>disabled</code> property on <code>checkbox-button</code> will disable a check button. If the <code>disabled</code> attribute is configured on the <code>checkbox-group</code> tab, all check buttons are disabled. </p>'
       },
       'codeFiles': ['size.vue']
     },
+    {
+      'demoId': 'custom-color',
+      'name': { 'zh-CN': '自定义颜色', 'en-US': 'Custom color' },
+      'desc': {
+        'zh-CN':
+          '<p>通过 <code>fill</code> 自定义选中时背景和边框颜色，通过 <code>text-color</code> 自定义选中时的文本颜色。</p>',
+        'en-US':
+          '<p>Customize the background and border color when selected through<code>fill</code>, and customize the text color when selected through<code>text color</code>.</p>'
+      },
+      'codeFiles': ['custom-color.vue']
+    },
     {
       'demoId': 'checkbox-slot',
       'name': { 'zh-CN': '默认插槽', 'en-US': 'Slot' },
       'desc': {
-        'zh-CN': '<p>通过 <code>default slot</code> 自定义文本内容。</p>\n',
-        'en-US': '<p>Customize text content through <code>default slot</code> .</p>\n'
+        'zh-CN': '<p>通过 <code>default slot</code> 自定义文本内容。</p>',
+        'en-US': '<p>Customize text content through <code>default slot</code> .</p>'
       },
       'codeFiles': ['checkbox-slot.vue']
     },
@@ -150,8 +154,8 @@ export default {
       'demoId': 'checkbox-button-multiple',
       'name': { 'zh-CN': '多行按钮', 'en-US': 'Checkbox Button Multiple' },
       'desc': {
-        'zh-CN': '<p>多行按钮组，超出最大宽度后，换行显示。</p>\n',
-        'en-US': '<p>Multi line button group, displayed as a new line after exceeding the maximum width.</p>\n'
+        'zh-CN': '<p>多行按钮组，超出最大宽度后，换行显示。</p>',
+        'en-US': '<p>Multi line button group, displayed as a new line after exceeding the maximum width.</p>'
       },
       'codeFiles': ['checkbox-button-multiple.vue']
     },
@@ -159,11 +163,20 @@ export default {
       'demoId': 'dynamic-create-checkbox',
       'name': { 'zh-CN': '动态生成复选框组', 'en-US': 'Dynamic generate check box groups' },
       'desc': {
-        'zh-CN': '<p>复选框组所需数据可通过请求服务从后台取得，然后动态生成。</p>\n',
+        'zh-CN': '<p>复选框组所需数据可通过请求服务从后台取得，然后动态生成。</p>',
         'en-US':
-          '<p>The data required by the check box group can be obtained from the background through the request service and then dynamically generated. </p>\n'
+          '<p>The data required by the check box group can be obtained from the background through the request service and then dynamically generated. </p>'
       },
       'codeFiles': ['dynamic-create-checkbox.vue']
+    },
+    {
+      'demoId': 'checkbox-events',
+      'name': { 'zh-CN': '事件', 'en-US': 'Event' },
+      'desc': {
+        'zh-CN': '<p>勾选值改变后将触发 <code>change</code> 事件。</p>',
+        'en-US': '<p>The <code>change</code> event is triggered when the value of the check box is changed. </p>'
+      },
+      'codeFiles': ['checkbox-events.vue']
     }
   ],
   apis: [
@@ -204,7 +217,7 @@ export default {
         {
           'name': 'false-label',
           'type': 'string | number',
-          'defaultValue': '',
+          'defaultValue': '--',
           'desc': {
             'zh-CN': '没有选中时的值',
             'en-US': 'Value when no option is selected'
@@ -224,9 +237,9 @@ export default {
         {
           'name': 'label',
           'type': 'string | number | boolean',
-          'defaultValue': '',
+          'defaultValue': '--',
           'desc': {
-            'zh-CN': '选中状态的值（只有在checkbox-group或者绑定对象类型为array时有效）',
+            'zh-CN': '选中状态的值（只有在 checkbox-group 中或者绑定对象类型为 array 时有效）',
             'en-US':
               'Selected value (This parameter is valid only when checkbox-group or the bound object type is array)'
           },
@@ -235,7 +248,7 @@ export default {
         {
           'name': 'modelValue / v-model',
           'type': 'string | number | boolean',
-          'defaultValue': '',
+          'defaultValue': '--',
           'desc': {
             'zh-CN': '绑定值',
             'en-US': 'Bound Value'
@@ -245,7 +258,7 @@ export default {
         {
           'name': 'name',
           'type': 'string',
-          'defaultValue': '',
+          'defaultValue': '--',
           'desc': {
             'zh-CN': '原生 name 属性',
             'en-US': 'Native name attribute'
@@ -254,8 +267,8 @@ export default {
         },
         {
           'name': 'size',
-          'type': 'medium | small | mini',
-          'defaultValue': '',
+          'type': "'medium' | 'small' | 'mini'",
+          'defaultValue': '--',
           'desc': {
             'zh-CN': 'checkbox 的尺寸，仅在 border 为真时有效',
             'en-US': 'Checkbox size. This parameter is valid only when border is set to true'
@@ -265,7 +278,7 @@ export default {
         {
           'name': 'text',
           'type': 'string',
-          'defaultValue': '',
+          'defaultValue': '--',
           'desc': {
             'zh-CN': '复选框显示的文本',
             'en-US': 'Text displayed in the check box'
@@ -275,7 +288,7 @@ export default {
         {
           'name': 'true-label',
           'type': 'string | number',
-          'defaultValue': '',
+          'defaultValue': '--',
           'desc': {
             'zh-CN': '选中时的值',
             'en-US': 'Value when selected'
@@ -287,7 +300,7 @@ export default {
         {
           'name': 'change',
           'type': '(value: string | number | boolean) => void',
-          'defaultValue': '',
+          'defaultValue': '--',
           'desc': {
             'zh-CN': '当绑定值变化时触发的事件',
             'en-US': 'This event is triggered when the binding value changes'
@@ -299,7 +312,7 @@ export default {
         {
           'name': 'default',
           'type': '',
-          'defaultValue': '',
+          'defaultValue': '--',
           'desc': {
             'zh-CN': 'checkbox的内容',
             'en-US': 'Checkbox content'
@@ -325,7 +338,7 @@ export default {
         {
           'name': 'fill',
           'type': 'string',
-          'defaultValue': '',
+          'defaultValue': '--',
           'desc': {
             'zh-CN': '按钮形式的 checkbox 激活时的填充色和边框色',
             'en-US': 'Fill color and border color when the checkbox in button mode is activated'
@@ -335,7 +348,7 @@ export default {
         {
           'name': 'max',
           'type': 'number',
-          'defaultValue': '',
+          'defaultValue': '--',
           'desc': {
             'zh-CN': '可被勾选的 checkbox 的最大数量',
             'en-US': 'Maximum number of checkboxes that can be selected'
@@ -345,7 +358,7 @@ export default {
         {
           'name': 'min',
           'type': 'number',
-          'defaultValue': '',
+          'defaultValue': '--',
           'desc': {
             'zh-CN': '可被勾选的 checkbox 的最小数量',
             'en-US': 'Minimum number of checkboxes that can be selected'
@@ -355,7 +368,7 @@ export default {
         {
           'name': 'modelValue / v-model',
           'type': 'string[] | number[]',
-          'defaultValue': '',
+          'defaultValue': '--',
           'desc': {
             'zh-CN': '绑定值',
             'en-US': 'Bound Value'
@@ -366,17 +379,17 @@ export default {
           'name': 'options',
           'type': 'ICheckboxGroupOptions[]',
           'typeAnchorName': 'ICheckboxGroupOptions',
-          'defaultValue': '',
+          'defaultValue': '--',
           'desc': {
-            'zh-CN': 'checkbox组件列表',
+            'zh-CN': 'checkbox-group 子项配置列表',
             'en-US': 'Checkbox component list'
           },
           'demoId': 'group-options'
         },
         {
           'name': 'size',
-          'type': 'medium | small | mini',
-          'defaultValue': '',
+          'type': "'medium' | 'small' | 'mini'",
+          'defaultValue': '--',
           'desc': {
             'zh-CN': '多选框组尺寸，仅对按钮形式的 checkbox 或带有边框的 checkbox 有效',
             'en-US':
@@ -387,20 +400,20 @@ export default {
         {
           'name': 'text-color',
           'type': 'string',
-          'defaultValue': '',
+          'defaultValue': '--',
           'desc': {
             'zh-CN': '按钮形式的 checkbox 激活时的文本颜色',
             'en-US': 'Text color when the checkbox in button mode is activated'
           },
-          'demoId': 'vertical-checkbox'
+          'demoId': 'custom-color'
         },
         {
           'name': 'type',
-          'type': 'button | checkbox',
-          'defaultValue': 'checkbox',
+          'type': "'button' | 'checkbox'",
+          'defaultValue': "'checkbox'",
           'desc': {
-            'zh-CN': ' checkbox组件类型，需配和options使用（button/checkbox）',
-            'en-US': 'Checkbox component type (button/checkbox)'
+            'zh-CN': ' 复选框组子项组件类型，需配合 options 属性使用',
+            'en-US': 'Checkbox component type'
           },
           'demoId': 'group-options'
         },
@@ -409,9 +422,8 @@ export default {
           'type': 'boolean',
           'defaultValue': 'false',
           'desc': {
-            'zh-CN': '设置组件排列方式;设置复选框是否垂直排列;该属性的可选值为 true / false',
-            'en-US':
-              'Set the component arrangement mode. Sets whether the check boxes are arranged vertically. The value of this attribute can be true or false'
+            'zh-CN': '设置组件排列方式，设置复选框是否垂直排列',
+            'en-US': 'Set the component arrangement mode. Sets whether the check boxes are arranged vertically'
           },
           'demoId': 'vertical-checkbox'
         }
@@ -420,9 +432,9 @@ export default {
         {
           'name': 'default',
           'type': '',
-          'defaultValue': '',
+          'defaultValue': '--',
           'desc': {
-            'zh-CN': 'checkbox选项组',
+            'zh-CN': 'checkbox-group 选项组',
             'en-US': 'Checkbox Option Group'
           },
           'demoId': 'checkbox-group'
@@ -431,8 +443,8 @@ export default {
       'events': [
         {
           'name': 'change',
-          'type': '(value: string[] | number[]) => void',
-          'defaultValue': '',
+          'type': '(value: string[] |number[]) => void',
+          'defaultValue': '--',
           'desc': {
             'zh-CN': '当绑定值变化时触发的事件',
             'en-US': 'This event is triggered when the binding value changes.'
@@ -450,7 +462,7 @@ export default {
           'type': 'boolean',
           'defaultValue': 'false',
           'desc': {
-            'zh-CN': '当前是否勾选',
+            'zh-CN': '是否默认勾选',
             'en-US': 'Currently selected'
           },
           'demoId': 'checked'
@@ -469,7 +481,7 @@ export default {
           'name': 'events',
           'type': 'ICheckboxGroupOptions.events',
           'typeAnchorName': 'ICheckboxGroupOptions',
-          'defaultValue': '',
+          'defaultValue': '--',
           'desc': {
             'zh-CN': '原生事件',
             'en-US': 'Native event'
@@ -479,7 +491,7 @@ export default {
         {
           'name': 'false-label',
           'type': 'string | number',
-          'defaultValue': '',
+          'defaultValue': '--',
           'desc': {
             'zh-CN': '没有选中时的值',
             'en-US': 'Value when no option is selected'
@@ -489,9 +501,9 @@ export default {
         {
           'name': 'label',
           'type': 'string | number | boolean',
-          'defaultValue': '',
+          'defaultValue': '--',
           'desc': {
-            'zh-CN': '选中状态的值（只有在checkbox-group或者绑定对象类型为array时有效）;该属性的可选值为 medium-',
+            'zh-CN': '选中状态的值（只有在 checkbox-group 中或者绑定对象类型为array时有效）',
             'en-US':
               'Value in the selected state (This parameter is valid only when checkbox-group or the bound object type is array.) The optional value of this attribute is medium-'
           },
@@ -500,7 +512,7 @@ export default {
         {
           'name': 'modelValue / v-model',
           'type': 'string | number | boolean',
-          'defaultValue': '',
+          'defaultValue': '--',
           'desc': {
             'zh-CN': '绑定值',
             'en-US': 'Bound Value'
@@ -510,7 +522,7 @@ export default {
         {
           'name': 'name',
           'type': 'string',
-          'defaultValue': '',
+          'defaultValue': '--',
           'desc': {
             'zh-CN': '原生 name 属性',
             'en-US': 'Native name attribute'
@@ -520,7 +532,7 @@ export default {
         {
           'name': 'text',
           'type': 'string',
-          'defaultValue': '',
+          'defaultValue': '--',
           'desc': {
             'zh-CN': '复选框文本',
             'en-US': 'Text'
@@ -530,7 +542,7 @@ export default {
         {
           'name': 'true-label',
           'type': 'string | number',
-          'defaultValue': '',
+          'defaultValue': '--',
           'desc': {
             'zh-CN': '选中时的值',
             'en-US': 'Value when selected'
@@ -542,9 +554,9 @@ export default {
         {
           'name': 'default',
           'type': '',
-          'defaultValue': '',
+          'defaultValue': '--',
           'desc': {
-            'zh-CN': 'checkbox-button的内容',
+            'zh-CN': 'checkbox-button 的内容',
             'en-US': 'Checkbox-button content'
           },
           'demoId': 'description'

package/demos/pc/app/color-select-panel/webdoc/color-select-panel.js

@@ -117,6 +117,15 @@ export default {
             'en-US': 'When click cancel or click out-side will trigger cancel event'
           },
           demoId: 'event'
+        },
+        {
+          name: 'color-update',
+          type: '(color:Color) => void',
+          defaultValue: '',
+          desc:{
+            'zh-cn': '当颜色更新的时候会触发该事件，包括：点击预定义颜色、点击历史记录',
+            'en-US': 'when click predefine color or history, will trigger color-update event'
+          }
         }
       ],
       'slots': []

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

@@ -6,8 +6,14 @@ export default {
       'demoId': 'basic-usage',
       'name': { 'zh-CN': '基础用法', 'en-US': 'Basic Usage' },
       'desc': {
-        'zh-CN': '通过<code> pattern </code> 来设置版型组件的布局。',
-        'en-US': 'Set the layout of the template component with <code> pattern </code>.'
+        'zh-CN': `
+          组件接受<code>header</code>、<code> aside </code>、<code> footer </code>、<code> default </code> 四种插槽。<br>
+          通过<code> pattern </code> 来设置预定好的组件版型,版型决定了插槽是否显示以及显示位置。<br>
+        `,
+        'en-US': `
+          The component accepts <code>header</code>, <code>aside</code>, <code>footer</code>, and <code>default</code>. <br>
+          The predefined component pattern is set by <code> pattern </code>. The pattern determines whether and where the slots are displayed. <br>
+        `
       },
       'codeFiles': ['basic-usage.vue']
     },
@@ -15,12 +21,18 @@ export default {
       'demoId': 'custom-with-height',
       'name': { 'zh-CN': '自定义宽度和高度', 'en-US': 'Custom width and height' },
       'desc': {
-        'zh-CN': `<p>
-            Container 布局容器支持用户通过设置 <code>headerHeight</code>、<code>footerHeight</code>、<code>asideWidth</code> 等属性来控制 <code>header（头部区域）</code>、<code>footer（底部区域）</code> 的高度和 <code>aside(左侧区域)</code> 的宽度。<code>main（主体区域）</code> 的宽度和高度是自适应的。
-          </p>`,
-        'en-US': `<p>
-            Container layout container allows users to control <code>header by setting attributes such as <code>headerHeight</code>, <code>footerHeight</code>, and <code>asideWidth</code> (Header area)</code>, <code>footer (bottom area)</code>, and <code>aside (left area)</code>. The width and height of <code>main (main area)</code> are adaptive. 
-          </p>`
+        'zh-CN': `
+          通过 <code>headerHeight</code> 控制 <code>header（头部区域）</code>高度。<br>
+          通过 <code>footerHeight</code> 控制 <code>footer（底部区域）</code>高度。<br>
+          通过 <code>asideWidth</code> 控制 <code>aside(左侧区域)</code>高度。<br>
+          而<code>default（主体区域）</code> 的宽度和高度是自适应的。
+        `,
+        'en-US': `
+          The <code>header (header area) </code> height is controlled by <code>headerHeight</code>. <br>
+          Control the height of <code>footer (bottom area) </code> by <code>footerHeight</code>. <br>
+          Control the <code>aside(left area)</code> height using <code>asideWidth</code>. <br>
+          The width and height of <code>main </code> are adaptive.
+        `
       },
       'codeFiles': ['custom-with-height.vue']
     }
@@ -30,6 +42,16 @@ export default {
       'name': 'container',
       'type': 'component',
       'properties': [
+        {
+          'name': 'pattern',
+          'type': `'default' | 'simple' | 'legend' | 'classic' | 'fashion'`,
+          'defaultValue': '"default"',
+          'desc': {
+            'zh-CN': '版型类型',
+            'en-US': 'Measurement type'
+          },
+          'demoId': 'custom-container'
+        },
         {
           'name': 'aside-width',
           'type': 'number | string',
@@ -50,17 +72,6 @@ export default {
           'defaultValue': '60',
           'desc': { 'zh-CN': '头部高度', 'en-US': 'Head height' },
           'demoId': 'custom-with-height'
-        },
-        {
-          'name': 'pattern',
-          'type': 'string',
-          'defaultValue': 'default',
-          'desc': {
-            'zh-CN': '版型类型;该属性的可选值为 default / simple / legend / classic / fashion',
-            'en-US':
-              'Measurement type; The optional values of this attribute are default / simple / legend / classic / fashion'
-          },
-          'demoId': 'custom-container'
         }
       ],
       'events': [],

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

@@ -2,7 +2,11 @@
   <div>
     <tiny-button @click="fn" type="primary"> 抽屉组件 </tiny-button>
     <tiny-drawer title="标题" :visible="visible" @update:visible="visible = $event">
-      <div>内容区域</div>
+      <div>
+        <br />
+        <br />
+        <span>内容区域</span>
+      </div>
     </tiny-drawer>
   </div>
 </template>

package/demos/pc/app/drawer/basic-usage.spec.ts

@@ -10,5 +10,5 @@ test('基本用法', async ({ page }) => {
   await expect(drawer.locator('.tiny-drawer__header')).toHaveText('标题')
   await expect(drawer.locator('.tiny-drawer__body')).toHaveText('内容区域')
   await drawer.getByRole('button', { name: 'Close' }).click()
-  await expect(drawer).not.toBeVisible()
+  await expect(page.locator('.tiny-drawer__main')).not.toBeVisible()
 })

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

@@ -2,7 +2,11 @@
   <div>
     <tiny-button @click="fn" type="primary"> 抽屉组件 </tiny-button>
     <tiny-drawer title="标题" :visible="visible" @update:visible="visible = $event">
-      <div>内容区域</div>
+      <div>
+        <br />
+        <br />
+        <span>内容区域</span>
+      </div>
     </tiny-drawer>
   </div>
 </template>