From 88180209b7f6297ed9eba161a85aac1962ff5e7d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=B8=9C=E9=A3=8E=E4=BD=BF=E5=91=BD=E5=BF=85=E8=BE=BE?=
<1664677472@qq.com>
Date: Fri, 13 Sep 2024 18:39:11 -0700
Subject: [PATCH] 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 | 14 ++++++++
.../demos/pc/app/switch/basic-usage.spec.ts | 8 ++---
.../pc/app/switch/dynamic-disable.spec.ts | 6 ++--
.../pc/app/switch/loading-composition-api.vue | 24 +++++++++++++
.../sites/demos/pc/app/switch/loading.spec.ts | 13 +++++++
.../sites/demos/pc/app/switch/loading.vue | 34 +++++++++++++++++++
.../demos/pc/app/switch/mini-mode.spec.ts | 2 +-
.../demos/pc/app/switch/webdoc/switch.js | 12 +++++++
packages/theme/src/switch/index.less | 12 +++++++
packages/theme/src/switch/vars.less | 6 ++++
packages/vue/src/switch/src/pc.vue | 18 +++++++---
11 files changed, 136 insertions(+), 13 deletions(-)
create mode 100644 examples/sites/demos/pc/app/switch/loading-composition-api.vue
create mode 100644 examples/sites/demos/pc/app/switch/loading.spec.ts
create mode 100644 examples/sites/demos/pc/app/switch/loading.vue
diff --git a/examples/sites/demos/apis/switch.js b/examples/sites/demos/apis/switch.js
index 1626bbdc2..e7b5f638a 100644
--- a/examples/sites/demos/apis/switch.js
+++ b/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',
diff --git a/examples/sites/demos/pc/app/switch/basic-usage.spec.ts b/examples/sites/demos/pc/app/switch/basic-usage.spec.ts
index 84351ea35..f8372d663 100644
--- a/examples/sites/demos/pc/app/switch/basic-usage.spec.ts
+++ b/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)')
})
diff --git a/examples/sites/demos/pc/app/switch/dynamic-disable.spec.ts b/examples/sites/demos/pc/app/switch/dynamic-disable.spec.ts
index f9e86d4c3..fdefcc84d 100644
--- a/examples/sites/demos/pc/app/switch/dynamic-disable.spec.ts
+++ b/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)')
})
diff --git a/examples/sites/demos/pc/app/switch/loading-composition-api.vue b/examples/sites/demos/pc/app/switch/loading-composition-api.vue
new file mode 100644
index 000000000..31d68b7ca
--- /dev/null
+++ b/examples/sites/demos/pc/app/switch/loading-composition-api.vue
@@ -0,0 +1,24 @@
+
+
通过 loading
设置开关显示加载状态。
Set the switch to display the loading status throughloading
.'
+ },
+ codeFiles: ['loading.vue']
+ },
{
demoId: 'custom-open-close',
name: {
diff --git a/packages/theme/src/switch/index.less b/packages/theme/src/switch/index.less
index b7a730105..c92fb6b84 100644
--- a/packages/theme/src/switch/index.less
+++ b/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);
diff --git a/packages/theme/src/switch/vars.less b/packages/theme/src/switch/vars.less
index a7a866ab3..5111215a3 100644
--- a/packages/theme/src/switch/vars.less
+++ b/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;
}
diff --git a/packages/vue/src/switch/src/pc.vue b/packages/vue/src/switch/src/pc.vue
index f368df920..ba20f2be9 100644
--- a/packages/vue/src/switch/src/pc.vue
+++ b/packages/vue/src/switch/src/pc.vue
@@ -19,14 +19,21 @@
@keydown.enter="toggle"
>
-