forked from opentiny/tiny-vue
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
This commit is contained in:
parent
9100eb93c7
commit
88180209b7
|
@ -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',
|
||||
|
|
|
@ -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)')
|
||||
})
|
||||
|
|
|
@ -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)')
|
||||
})
|
||||
|
|
|
@ -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>
|
|
@ -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/)
|
||||
})
|
|
@ -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>
|
|
@ -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')
|
||||
})
|
||||
|
|
|
@ -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: {
|
||||
|
|
|
@ -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);
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
|
|
|
@ -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
|
||||
}
|
||||
|
|
Loading…
Reference in New Issue