feat(switch): [switch] Adapting to the SMB theme (#2112)

* feat(switch): [switch] Adapting to the SMB theme

* feat(switch): [switch] Adapting to the SMB theme

* feat(switch): [switch] Adapting to the SMB theme

examples/sites/demos/apis/switch.js

@@ -29,6 +29,20 @@ export default {
           mobileDemo: 'disabled',
           mfDemo: ''
         },
+        {
+          name: 'loading',
+          type: 'boolean',
+          defaultValue: 'false',
+          desc: {
+            'zh-CN': '是否加载中状态',
+            'en-US': 'Loading status'
+          },
+          meta: {
+            stable: '3.19.0'
+          },
+          mode: ['pc'],
+          pcDemo: 'loading'
+        },
         {
           name: 'false-value',
           type: 'boolean | string | number',

examples/sites/demos/pc/app/switch/basic-usage.spec.ts

@@ -7,9 +7,9 @@ test('基本用法', async ({ page }) => {
   const demo = page.locator('#basic-usage')
   const switchBtn = demo.locator('.tiny-switch')
 
-  await expect(switchBtn).toHaveCSS('background-color', 'rgb(94, 124, 224)')
-  await expect(switchBtn).toHaveCSS('border-top-color', 'rgb(94, 124, 224)')
+  await expect(switchBtn).toHaveCSS('background-color', 'rgb(20, 118, 255)')
+  await expect(switchBtn).toHaveCSS('border-top-color', 'rgb(20, 118, 255)')
   await switchBtn.click()
-  await expect(switchBtn).toHaveCSS('background-color', 'rgb(173, 176, 184)')
-  await expect(switchBtn).toHaveCSS('border-top-color', 'rgb(173, 176, 184)')
+  await expect(switchBtn).toHaveCSS('background-color', 'rgb(194, 194, 194)')
+  await expect(switchBtn).toHaveCSS('border-top-color', 'rgb(194, 194, 194)')
 })

examples/sites/demos/pc/app/switch/dynamic-disable.spec.ts

@@ -7,8 +7,6 @@ test('禁用状态', async ({ page }) => {
   const demo = page.locator('#dynamic-disable')
   const switchBtn = demo.locator('.tiny-switch')
 
-  await expect(switchBtn.first()).toHaveCSS('background-color', 'rgb(190, 204, 250)')
-  await expect(switchBtn.first()).toHaveCSS('background-color', 'rgb(190, 204, 250)')
-  await expect(switchBtn.nth(1)).toHaveCSS('background-color', 'rgb(223, 225, 230)')
-  await expect(switchBtn.nth(1)).toHaveCSS('background-color', 'rgb(223, 225, 230)')
+  await expect(switchBtn.first()).toHaveCSS('background-color', 'rgb(179, 214, 255)')
+  await expect(switchBtn.nth(1)).toHaveCSS('background-color', 'rgb(219, 219, 219)')
 })

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

@@ -0,0 +1,24 @@
+<template>
+  <tiny-switch v-model="value" :loading="loading"></tiny-switch>
+  <tiny-switch v-model="value2" class="demo-switch" :loading="loading"></tiny-switch>
+  <tiny-button size="mini" @click="change()"> changeValue </tiny-button>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import { Switch as TinySwitch, Button as TinyButton } from '@opentiny/vue'
+
+const value = ref(true)
+const value2 = ref(false)
+const loading = ref(true)
+
+function change() {
+  loading.value = !loading.value
+}
+</script>
+
+<style scoped>
+.demo-switch {
+  margin: 0 40px;
+}
+</style>

examples/sites/demos/pc/app/switch/loading.spec.ts

@@ -0,0 +1,13 @@
+import { test, expect } from '@playwright/test'
+
+test('加载状态', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('switch#loading')
+
+  const demo = page.locator('#loading')
+  const switchBtn = demo.locator('.tiny-switch__button').first().locator('svg')
+  const switchBtn2 = demo.locator('span:nth-child(2) > .tiny-switch__button').locator('svg')
+
+  await expect(switchBtn).toHaveClass(/tiny-switch__on-loading/)
+  await expect(switchBtn2).toHaveClass(/tiny-switch__off-loading/)
+})

examples/sites/demos/pc/app/switch/loading.vue

@@ -0,0 +1,34 @@
+<template>
+  <tiny-switch v-model="value" :loading="loading"></tiny-switch>
+  <tiny-switch v-model="value2" class="demo-switch" :loading="loading"></tiny-switch>
+  <tiny-button size="mini" @click="change()"> changeValue </tiny-button>
+</template>
+
+<script>
+import { Switch, Button } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinySwitch: Switch,
+    TinyButton: Button
+  },
+  data() {
+    return {
+      value: true,
+      value2: false,
+      loading: true
+    }
+  },
+  methods: {
+    change() {
+      this.loading = !this.loading
+    }
+  }
+}
+</script>
+
+<style scoped>
+.demo-switch {
+  margin: 0 40px;
+}
+</style>

examples/sites/demos/pc/app/switch/mini-mode.spec.ts

@@ -7,5 +7,5 @@ test('迷你尺寸', async ({ page }) => {
   const demo = page.locator('#mini-mode')
   const switchBtn = demo.locator('.tiny-switch')
 
-  await expect(switchBtn).toHaveCSS('width', '34px')
+  await expect(switchBtn).toHaveCSS('width', '32px')
 })

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

@@ -26,6 +26,18 @@ export default {
       },
       codeFiles: ['mini-mode.vue']
     },
+    {
+      demoId: 'loading',
+      name: {
+        'zh-CN': '加载中状态',
+        'en-US': 'Loading status'
+      },
+      desc: {
+        'zh-CN': '<p>通过 <code>loading</code> 设置开关显示加载状态。</p>',
+        'en-US': '<p>Set the switch to display the loading status through<code>loading</code>.'
+      },
+      codeFiles: ['loading.vue']
+    },
     {
       demoId: 'custom-open-close',
       name: {

packages/theme/src/switch/index.less

@@ -54,6 +54,18 @@
     }
   }
 
+  &__on-loading {
+    font-size: var(--ti-switch-on-loading-font-size);
+    fill: var(--ti-switch-on-loading-fill);
+  }
+  &__off-loading {
+    font-size: var(--ti-switch-off-loading-font-size);
+    fill: var(--ti-switch-off-loading-fill);
+  }
+  &__loading-mini {
+    font-size: var(--ti-switch-loading-mini-font-size);
+  }
+
   &.mini {
     width: var(--ti-switch-mini-width);
     height: var(--ti-switch-mini-height);

packages/theme/src/switch/vars.less

@@ -58,4 +58,10 @@
   --ti-switch-mini-button-height: calc(var(--ti-common-size-height-small)/2);
   --ti-switch-mini-button-width: calc(var(--ti-common-size-width-mini)/2);
   --ti-switch-mini-button-left: calc(var(--ti-common-space-4x) + 2px);
+  // 加载ICON样式
+  --ti-switch-on-loading-font-size: var(--ti-common-font-size-0);
+  --ti-switch-on-loading-fill: var(--ti-common-color-bg-light-emphasize);
+  --ti-switch-off-loading-font-size: var(--ti-common-font-size-0);
+  --ti-switch-off-loading-fill: #DBDBDB;
+  --ti-switch-loading-mini-font-size: 8px;
 }

packages/vue/src/switch/src/pc.vue

@@ -19,14 +19,21 @@
     @keydown.enter="toggle"
   >
     <span :class="state.innerClasses">
-      <div v-if="!mini && state.showText">
+      <div v-if="!mini && state.showText && !loading">
         <slot v-if="state.currentValue === trueValue" name="open">ON</slot>
         <slot v-if="state.currentValue === falseValue" name="close">OFF</slot>
       </div>
     </span>
     <span class="tiny-switch__button">
-      <slot v-if="state.currentValue === trueValue" name="active-icon"></slot>
-      <slot v-if="state.currentValue === falseValue" name="inactive-icon"></slot>
+      <icon-loading
+        v-if="loading"
+        :class="[
+          state.currentValue === trueValue ? 'tiny-switch__on-loading' : 'tiny-switch__off-loading',
+          mini ? 'tiny-switch__loading-size' : ''
+        ]"
+      />
+      <slot v-if="state.currentValue === trueValue && !loading" name="active-icon"></slot>
+      <slot v-if="state.currentValue === falseValue && !loading" name="inactive-icon"></slot>
     </span>
   </span>
   <span v-else>
@@ -40,6 +47,7 @@ import { renderless, api } from '@opentiny/vue-renderless/switch/vue'
 import { props, setup, defineComponent } from '@opentiny/vue-common'
 import '@opentiny/vue-theme/switch/index.less'
 import type { ISwitchApi } from '@opentiny/vue-renderless/types/switch.type'
+import { IconLoadingShadow } from '@opentiny/vue-icon'
 
 export default defineComponent({
   emits: ['change', 'update:modelValue'],
@@ -53,8 +61,10 @@ export default defineComponent({
     'tabindex',
     'showText',
     'beforeChange',
-    'displayOnly'
+    'displayOnly',
+    'loading'
   ],
+  components: { IconLoading: IconLoadingShadow() },
   setup(props, context) {
     return setup({ props, context, renderless, api }) as unknown as ISwitchApi
   }