chore(docs): [switch] optimize switch demo and api (#782)

examples/sites/demos/pc/app/radio/webdoc/radio.js

@@ -196,7 +196,7 @@ export default {
       'events': [
         {
           'name': 'change',
-          'type': '(value) => void',
+          'type': '(value: boolean | number | string) => void',
           'defaultValue': '',
           'desc': {
             'zh-CN': '绑定值变化时触发的事件',
@@ -303,7 +303,7 @@ export default {
       'radio-group events': [
         {
           'name': 'change',
-          'type': '(value) => void',
+          'type': '(value: number[] | string[]) => void',
           'defaultValue': '',
           'desc': {
             'zh-CN': '绑定值变化时触发的事件',

examples/sites/demos/pc/app/switch/basic-usage-composition-api.vue

@@ -1,9 +1,10 @@
 <template>
-  <tiny-switch></tiny-switch>
+  <tiny-switch v-model="value"></tiny-switch>
 </template>
 
-<script setup lang="jsx">
+<script setup>
-import { Switch } from '@opentiny/vue'
+import { ref } from 'vue'
+import { Switch as TinySwitch } from '@opentiny/vue'
 
-const TinySwitch = Switch
+const value = ref(true)
 </script>

examples/sites/demos/pc/app/switch/basic-usage.vue

@@ -1,13 +1,18 @@
 <template>
-  <tiny-switch></tiny-switch>
+  <tiny-switch v-model="value"></tiny-switch>
 </template>
 
-<script lang="jsx">
+<script>
 import { Switch } from '@opentiny/vue'
 
 export default {
   components: {
     TinySwitch: Switch
+  },
+  data() {
+    return {
+      value: true
+    }
   }
 }
 </script>

examples/sites/demos/pc/app/switch/before-change-composition-api.vue

@@ -4,10 +4,9 @@
 
 <script setup>
 import { ref } from 'vue'
-import { Switch, Modal } from '@opentiny/vue'
+import { Switch as TinySwitch, Modal } from '@opentiny/vue'
 
 const value = ref(false)
-const TinySwitch = Switch
 
 function beforeChange(done) {
   Modal.message('开关切换功能已被拦截，必须调用 done 方法才能执行开关状态的切换，2s后将自动调用 done 方法切换开关状态')

examples/sites/demos/pc/app/switch/custom-open-close-composition-api.vue

@@ -1,18 +1,26 @@
 <template>
-  <tiny-switch v-model="value" show-text>
+  <div class="switch-demo">
-    <template #open>
+    <tiny-switch v-model="value1" show-text></tiny-switch>
-      <span>是</span>
+    <tiny-switch v-model="value2" show-text>
-    </template>
+      <template #open>
-    <template #close>
+        <span>是</span>
-      <span>否</span>
+      </template>
-    </template>
+      <template #close>
-  </tiny-switch>
+        <span>否</span>
+      </template>
+    </tiny-switch>
+  </div>
 </template>
 
-<script setup lang="jsx">
+<script setup>
 import { ref } from 'vue'
-import { Switch } from '@opentiny/vue'
+import { Switch as TinySwitch } from '@opentiny/vue'
 
-const value = ref(false)
+const value1 = ref(false)
-const TinySwitch = Switch
+const value2 = ref(false)
 </script>
+<style scoped>
+.switch-demo .tiny-switch + .tiny-switch {
+  margin-left: 20px;
+}
+</style>

examples/sites/demos/pc/app/switch/custom-open-close.vue

@@ -1,15 +1,18 @@
 <template>
-  <tiny-switch v-model="value" show-text>
+  <div class="switch-demo">
-    <template #open>
+    <tiny-switch v-model="value1" show-text></tiny-switch>
-      <span>是</span>
+    <tiny-switch v-model="value2" show-text>
-    </template>
+      <template #open>
-    <template #close>
+        <span>是</span>
-      <span>否</span>
+      </template>
-    </template>
+      <template #close>
-  </tiny-switch>
+        <span>否</span>
+      </template>
+    </tiny-switch>
+  </div>
 </template>
 
-<script lang="jsx">
+<script>
 import { Switch } from '@opentiny/vue'
 
 export default {
@@ -18,8 +21,14 @@ export default {
   },
   data() {
     return {
-      value: false
+      value1: false,
+      value2: false
     }
   }
 }
 </script>
+<style scoped>
+.switch-demo .tiny-switch + .tiny-switch {
+  margin-left: 20px;
+}
+</style>

examples/sites/demos/pc/app/switch/custom-true-false-value-composition-api.vue

@@ -1,21 +1,13 @@
 <template>
   <div>
-    <tiny-switch v-model="value" true-value="yes" false-value="no" show-text>
+    <tiny-switch v-model="value" true-value="yes" false-value="no"> </tiny-switch>
-      <template #open>
-        <span>是</span>
-      </template>
-      <template #close>
-        <span>否</span>
-      </template>
-    </tiny-switch>
     当前值:{{ value }}
   </div>
 </template>
 
-<script setup lang="jsx">
+<script setup>
 import { ref } from 'vue'
-import { Switch } from '@opentiny/vue'
+import { Switch as TinySwitch } from '@opentiny/vue'
 
 const value = ref('yes')
-const TinySwitch = Switch
 </script>

examples/sites/demos/pc/app/switch/custom-true-false-value.vue

@@ -1,18 +1,11 @@
 <template>
   <div>
-    <tiny-switch v-model="value" true-value="yes" false-value="no" show-text>
+    <tiny-switch v-model="value" true-value="yes" false-value="no"> </tiny-switch>
-      <template #open>
-        <span>是</span>
-      </template>
-      <template #close>
-        <span>否</span>
-      </template>
-    </tiny-switch>
     当前值:{{ value }}
   </div>
 </template>
 
-<script lang="jsx">
+<script>
 import { Switch } from '@opentiny/vue'
 
 export default {

examples/sites/demos/pc/app/switch/dynamic-disable-composition-api.vue

@@ -1,15 +1,19 @@
 <template>
-  <div>
+  <div class="switch-demo">
     <tiny-switch v-model="value1" disabled></tiny-switch>
     <tiny-switch v-model="value2" disabled></tiny-switch>
   </div>
 </template>
 
-<script setup lang="jsx">
+<script setup>
 import { ref } from 'vue'
-import { Switch } from '@opentiny/vue'
+import { Switch as TinySwitch } from '@opentiny/vue'
 
 const value1 = ref(true)
 const value2 = ref(false)
-const TinySwitch = Switch
 </script>
+<style scoped>
+.switch-demo .tiny-switch + .tiny-switch {
+  margin-left: 20px;
+}
+</style>

examples/sites/demos/pc/app/switch/dynamic-disable.vue

@@ -1,11 +1,11 @@
 <template>
-  <div>
+  <div class="switch-demo">
     <tiny-switch v-model="value1" disabled></tiny-switch>
     <tiny-switch v-model="value2" disabled></tiny-switch>
   </div>
 </template>
 
-<script lang="jsx">
+<script>
 import { Switch } from '@opentiny/vue'
 
 export default {
@@ -20,3 +20,8 @@ export default {
   }
 }
 </script>
+<style scoped>
+.switch-demo .tiny-switch + .tiny-switch {
+  margin-left: 20px;
+}
+</style>

examples/sites/demos/pc/app/switch/enent-composition-api.vue

@@ -1,13 +0,0 @@
-<template>
-  <tiny-switch @change="enent"></tiny-switch>
-</template>
-
-<script setup lang="jsx">
-import { Switch, Modal } from '@opentiny/vue'
-
-const TinySwitch = Switch
-
-function enent(val) {
-  Modal.message({ message: `${val}`, status: 'info' })
-}
-</script>

examples/sites/demos/pc/app/switch/event-change-composition-api.vue

@@ -0,0 +1,11 @@
+<template>
+  <tiny-switch @change="handleChange"></tiny-switch>
+</template>
+
+<script setup>
+import { Switch as TinySwitch, Modal } from '@opentiny/vue'
+
+function handleChange(val) {
+  Modal.message({ message: `开关值：${val}` })
+}
+</script>

examples/sites/demos/pc/app/switch/event-change.vue

@@ -1,8 +1,8 @@
 <template>
-  <tiny-switch @change="enent"></tiny-switch>
+  <tiny-switch @change="handleChange"></tiny-switch>
 </template>
 
-<script lang="jsx">
+<script>
 import { Switch, Modal } from '@opentiny/vue'
 
 export default {
@@ -10,8 +10,8 @@ export default {
     TinySwitch: Switch
   },
   methods: {
-    enent(val) {
+    handleChange(val) {
-      Modal.message({ message: `${val}`, status: 'info' })
+      Modal.message({ message: `开关值：${val}` })
     }
   }
 }

examples/sites/demos/pc/app/switch/mini-mode-composition-api.vue

@@ -2,8 +2,6 @@
   <tiny-switch mini></tiny-switch>
 </template>
 
-<script setup lang="jsx">
+<script setup>
-import { Switch } from '@opentiny/vue'
+import { Switch as TinySwitch } from '@opentiny/vue'
-
-const TinySwitch = Switch
 </script>

examples/sites/demos/pc/app/switch/mini-mode.vue

@@ -2,7 +2,7 @@
   <tiny-switch mini></tiny-switch>
 </template>
 
-<script lang="jsx">
+<script>
 import { Switch } from '@opentiny/vue'
 
 export default {

examples/sites/demos/pc/app/switch/webdoc/switch.js

@@ -5,33 +5,58 @@ export default {
     {
       'demoId': 'basic-usage',
       'name': { 'zh-CN': '基本用法', 'en-US': 'Basic Usage' },
-      'desc': { 'zh-CN': '详细用法参考如下示例', 'en-US': 'For details, see the following example.' },
+      'desc': {
+        'zh-CN': '<p>通过<code>v-model</code>绑定开关值。</p>',
+        'en-US': '<p>Bind switch values through<code>v model</code>.</p>'
+      },
       'codeFiles': ['basic-usage.vue']
     },
     {
       'demoId': 'mini-mode',
       'name': { 'zh-CN': '迷你尺寸', 'en-US': 'Mini Size' },
-      'desc': { 'zh-CN': '详细用法参考如下示例', 'en-US': 'For details, see the following example.' },
+      'desc': {
+        'zh-CN': '<p>通过<code>mini</code>设置小尺寸开关。</p>',
+        'en-US': '<p>Set small size switches through<code>mini</code>.'
+      },
       'codeFiles': ['mini-mode.vue']
     },
     {
       'demoId': 'custom-open-close',
       'name': { 'zh-CN': '自定义开关显示', 'en-US': 'Customized switch display' },
       'desc': {
-        'zh-CN': '通过具名插槽 open 和 close 自定义 Switch 显示。前提是配置<code>show-text</code>为<code>true</code>',
+        'zh-CN':
+          '<p>通过<code>show-text</code>配置是否显示开关文本，默认文本为<code>ON</code>和<code>OFF</code>。开启配置后，可以使用具名插槽<code>open</code>和<code>close</code>自定义开关内容。</p>',
         'en-US':
-          'Customize the switch display by opening and closing named slots. The prerequisite is that <code>show-text</code> is set to <code>true</code>'
+          '<p>Configure whether to display switch text through<code>show text</code>. The default text is<code>ON</code>and<code>OFF</code>. After enabling the configuration, you can customize the switch content using named slots<code>open</code>and<code>close</code>.</p>'
       },
       'codeFiles': ['custom-open-close.vue']
     },
+    {
+      'demoId': 'before-change',
+      'name': { 'zh-CN': '变更前置处理', 'en-US': 'Before change' },
+      'desc': {
+        'zh-CN': '<p>通过<code>before-change</code>设置开关变化前置处理逻辑，参数为一个回调函数，调用后完成变更。</p>',
+        'en-US':
+          '<p>By setting the pre processing logic for switch changes through<code>before change</code>, the parameter is a callback function that completes the change after being called. </p>'
+      },
+      'codeFiles': ['before-change.vue']
+    },
+    {
+      'demoId': 'event-change',
+      'name': { 'zh-CN': '变更事件', 'en-US': 'Event change' },
+      'desc': {
+        'zh-CN': '<p>当开关值变化后，会触发<code>change</code>事件。</p>',
+        'en-US': '<p>When the switch value changes, the<code>change</code>event will be triggered.</p>'
+      },
+      'codeFiles': ['event-change.vue']
+    },
     {
       'demoId': 'custom-true-false-value',
       'name': { 'zh-CN': '自定义开关取值', 'en-US': 'User-defined switch value' },
       'desc': {
-        'zh-CN':
+        'zh-CN': '<p>通过<code>true-label</code>设置开关开启时的值，<code>false-label</code>设置关闭时的值。</p>',
-          '<p><code>false-value</code> 属性表示的是关闭时取付给 <code>false-value</code> 的值。\n<code>true-value</code> 属性表示的是开启时取付给 <code>true-value</code> 的值,v-model里定义的属性名是 <code>value</code> 时就能拿的到 <code>true-value</code> 或<code>false-value</code> 里的值。</p>\n',
         'en-US':
-          'The <p><code>false-value</code> property represents the value that is paid to <code>false-value</code> when closed. \n<code>true-value</code> The attribute represents the value paid to <code>true-value</code> when enabled. If the attribute name defined in v-model is <code>value</code>, the value in <code>true-value</code> or <code>false-value</code> can be obtained. </p>\n'
+          '<p>Set the value when the switch is turned on by<code>true label</code>, and set the value when it is turned off by<code>false label</code>. </p>'
       },
       'codeFiles': ['custom-true-false-value.vue']
     },
@@ -39,9 +64,8 @@ export default {
       'demoId': 'dynamic-disable',
       'name': { 'zh-CN': '禁用状态', 'en-US': 'Disabled' },
       'desc': {
-        'zh-CN': '<p><code>disable</code> 属性表示的是当前状态是无法被使用的，默认值为false(true/false)。</p>\n',
+        'zh-CN': '<p>通过<code>disabled</code>设置开关禁用状态。</p>',
-        'en-US':
+        'en-US': '<p>Set the switch disable status through<code>disabled</code>. </p>'
-          'The <p><code>disable</code> attribute indicates that the current state cannot be used. The default value is false (true/false). </p>\n'
       },
       'codeFiles': ['dynamic-disable.vue']
     }
@@ -51,77 +75,108 @@ export default {
       'name': 'switch',
       'type': 'component',
       'properties': [
+        {
+          'name': 'before-change',
+          'type': '(done: () => void) => void',
+          'defaultValue': '',
+          'desc': {
+            'zh-CN': '开关值变化前置处理，详见demo',
+            'en-US': 'Pre processing of switch value changes, See demo for details'
+          },
+          'demoId': 'before-change'
+        },
         {
           'name': 'disabled',
           'type': 'boolean',
-          'defaultValue': '该属性的默认值为 false',
+          'defaultValue': 'false',
-          'desc': { 'zh-CN': '是否禁用', 'en-US': 'Disable' },
+          'desc': {
+            'zh-CN': '是否禁用',
+            'en-US': 'Disable'
+          },
           'demoId': 'dynamic-disable'
         },
         {
           'name': 'false-value',
-          'type': 'boolean , string , number',
+          'type': 'boolean | string | number',
-          'defaultValue': '该属性的默认值为 false',
+          'defaultValue': 'false',
-          'desc': { 'zh-CN': 'switch 关闭时的值', 'en-US': 'Value when switch is disabled' },
-          'demoId': 'custom-true-false-value'
-        },
-        {
-          'name': 'true-value',
-          'type': 'boolean , string , number',
-          'defaultValue': '该属性的默认值为 true',
-          'desc': { 'zh-CN': 'switch 打开时的值', 'en-US': 'Value when switch is enabled' },
-          'demoId': 'custom-true-false-value'
-        },
-        {
-          'name': 'show-text',
-          'type': 'boolean',
-          'defaultValue': '该属性的默认值为 false',
           'desc': {
-            'zh-CN': 'switch 是否显示内容里面的文字',
+            'zh-CN': 'switch 关闭时的值',
-            'en-US': 'Switch whether to display the text in the content.'
+            'en-US': 'Value when switch is disabled'
           },
-          'demoId': 'custom-open-close'
+          'demoId': 'custom-true-false-value'
         },
         {
           'name': 'mini',
           'type': 'boolean',
-          'defaultValue': '该属性的默认值为 false',
+          'defaultValue': 'false',
           'desc': {
-            'zh-CN': '设置是否显示为 mini 模式。mini 模式下不会显示 slot 的内容。',
+            'zh-CN': '设置是否显示为 mini 模式，mini 模式下不会显示 slot 的内容',
-            'en-US': 'Sets whether to display in mini mode. In mini mode, the content of the slot is not displayed.'
+            'en-US': 'Sets whether to display in mini mode. In mini mode, the content of the slot is not displayed'
           },
           'demoId': 'mini-mode'
         },
         {
           'name': 'modelValue / v-model',
-          'type': 'boolean , string , number',
+          'type': 'boolean | string | number',
           'defaultValue': '',
-          'desc': { 'zh-CN': '绑定值', 'en-US': 'Bound Value' },
+          'desc': {
+            'zh-CN': '开关绑定值',
+            'en-US': 'Switch bind value'
+          },
           'demoId': 'basic-usage'
+        },
+        {
+          'name': 'show-text',
+          'type': 'boolean',
+          'defaultValue': 'false',
+          'desc': {
+            'zh-CN': 'switch 是否显示内容里面的文字',
+            'en-US': 'Switch whether to display the text in the content'
+          },
+          'demoId': 'custom-open-close'
+        },
+        {
+          'name': 'true-value',
+          'type': 'boolean | string | number',
+          'defaultValue': 'true',
+          'desc': {
+            'zh-CN': 'switch 打开时的值',
+            'en-US': 'Value when switch is enabled'
+          },
+          'demoId': 'custom-true-false-value'
         }
       ],
       'events': [
         {
           'name': 'change',
-          'type': '',
+          'type': '(value: boolean | string | number) => void',
           'defaultValue': '',
-          'desc': { 'zh-CN': 'switch发生变化的回调函数', 'en-US': 'Callback function for switch changes' },
+          'desc': {
-          'demoId': 'enent'
+            'zh-CN': 'switch发生变化的回调函数',
+            'en-US': 'Callback function for switch changes'
+          },
+          'demoId': 'event-change'
         }
       ],
       'slots': [
-        {
-          'name': 'open',
-          'type': '',
-          'defaultValue': '',
-          'desc': { 'zh-CN': '开启内容', 'en-US': 'Enable Content' },
-          'demoId': 'custom-open-close'
-        },
         {
           'name': 'close',
           'type': '',
           'defaultValue': '',
-          'desc': { 'zh-CN': '关闭内容', 'en-US': 'Close Content' },
+          'desc': {
+            'zh-CN': '关闭内容',
+            'en-US': 'Close Content'
+          },
+          'demoId': 'custom-open-close'
+        },
+        {
+          'name': 'open',
+          'type': '',
+          'defaultValue': '',
+          'desc': {
+            'zh-CN': '开启内容',
+            'en-US': 'Enable Content'
+          },
           'demoId': 'custom-open-close'
         }
       ]

packages/theme/src/switch/index.less

@@ -35,13 +35,15 @@
     color: var(--ti-switch-text-color);
     font-size: var(--ti-switch-inner-font-size);
     position: absolute;
-    left: calc(var(--ti-switch-inner-position-left) + 4px);
   }
 
   &__text {
     width: var(--ti-switch-text-width);
     .@{switch-prefix-cls}-inner {
-      left: calc(var(--ti-switch-inner-position-left) + 7px);
+      left: calc(var(--ti-switch-dot-size));
+      width: calc(100% - var(--ti-switch-dot-size));
+      text-align: center;
+      overflow: hidden;
     }
   }
 
@@ -90,8 +92,9 @@
     background-color: var(--ti-switch-on-bg-color);
 
     .@{switch-prefix-cls}-inner {
-      left: 8px;
+      left: 2px;
       width: calc(100% - var(--ti-switch-dot-size));
+      text-align: center;
       overflow: hidden;
     }
 

packages/theme/src/switch/smb-theme.js

@@ -5,7 +5,6 @@ export const tinySwitchSMBTheme = {
   'ti-switch-disabled-dot-bg-color': '#ffffff',
   'ti-switch-width': 'var(--ti-common-size-10x)',
   'ti-switch-border-radius': 'calc(var(--ti-common-border-radius-3) * 2.5)',
-  'ti-switch-dot-size': '16px',
   'ti-switch-dot-position-left': '2px',
   'ti-switch-dot-position-top': '2px',
   'ti-switch-dot-offset': 'calc(var(--ti-switch-dot-size) + 2px)',

packages/theme/src/switch/vars.less

@@ -46,7 +46,7 @@
   // 开关边框厚度
   --ti-switch-border-weight: var(--ti-common-border-weight-normal);
   // 开关字号
-  --ti-switch-inner-font-size: var(--ti-common-font-size-base, 12px);
+  --ti-switch-inner-font-size: 12px;
   // 开关左侧距离(hide)
   --ti-switch-inner-position-left: var(--ti-common-space-4x);
   // 自定义文本开关宽度