Skip to content

Commit

Permalink
refactor(components): [switch] switch to script-setup syntax
Browse files Browse the repository at this point in the history
  • Loading branch information
@chenxch
chenxch committed Jun 21, 2022
1 parent 786360b commit f9a9ac8
Show file tree
Hide file tree
Showing 2 changed files with 157 additions and 139 deletions.
37 changes: 34 additions & 3 deletions ...omponents/switch/__tests__/switch.test.ts → ...mponents/switch/__tests__/switch.test.tsx
View file
Expand Up @@ -5,6 +5,8 @@ import { debugWarn } from '@element-plus/utils'
import { Checked, CircleClose } from '@element-plus/icons-vue'
import { ElFormItem } from '@element-plus/components/form'
import Switch from '../src/switch.vue'
import type { VueWrapper } from '@vue/test-utils'
import type { SwitchInstance } from '../src/switch'

vi.mock('@element-plus/utils/error', () => ({
debugWarn: vi.fn(),
Expand Down Expand Up @@ -142,7 +144,7 @@ describe('Switch.vue', () => {
</div>
`,
methods: {
handleChange(val) {
handleChange(val: boolean) {
this.target = val
},
},
Expand Down Expand Up @@ -214,6 +216,33 @@ describe('Switch.vue', () => {
expect(vm.value).toEqual('100')
})

test('default switch active-value is false', async () => {
const wrapper = mount({
components: {
'el-switch': Switch,
},
template: `
<div>
<el-switch v-model="value" :active-value="onValue" :inactive-value="offValue"></el-switch>
</div>
`,
data() {
return {
value: false,
onValue: false,
offValue: true,
}
},
})
const vm = wrapper.vm

const coreWrapper = wrapper.find('.el-switch__core')
await coreWrapper.trigger('click')
expect(vm.value).toEqual(true)
await coreWrapper.trigger('click')
expect(vm.value).toEqual(false)
})

test('value is the single source of truth', async () => {
const wrapper = mount({
components: {
Expand All @@ -227,7 +256,8 @@ describe('Switch.vue', () => {
})
const vm = wrapper.vm
const coreWrapper = wrapper.find('.el-switch__core')
const switchWrapper = wrapper.findComponent(Switch)
const switchWrapper: VueWrapper<SwitchInstance> =
wrapper.findComponent(Switch)
const switchVm = switchWrapper.vm
const inputEl = vm.$el.querySelector('input')

Expand All @@ -253,7 +283,8 @@ describe('Switch.vue', () => {
})
const vm = wrapper.vm
const coreWrapper = wrapper.find('.el-switch__core')
const switchWrapper = wrapper.findComponent(Switch)
const switchWrapper: VueWrapper<SwitchInstance> =
wrapper.findComponent(Switch)
const switchVm = switchWrapper.vm
const inputEl = vm.$el.querySelector('input')

Expand Down
259 changes: 123 additions & 136 deletions packages/components/switch/src/switch.vue
View file
Expand Up @@ -82,10 +82,9 @@
</div>
</template>

<script lang="ts">
<script lang="ts" setup>
import {
computed,
defineComponent,
getCurrentInstance,
nextTick,
onMounted,
Expand All @@ -110,167 +109,155 @@ import {
useSize,
} from '@element-plus/hooks'
import { switchEmits, switchProps } from './switch'
import type { CSSProperties } from 'vue'
const COMPONENT_NAME = 'ElSwitch'
export default defineComponent({
name: COMPONENT_NAME,
components: { ElIcon, Loading },
defineOptions({
name: 'ElSwitch',
})
props: switchProps,
emits: switchEmits,
const props = defineProps(switchProps)
const emit = defineEmits(switchEmits)
setup(props, { emit }) {
const vm = getCurrentInstance()!
const { formItem } = useFormItem()
const switchSize = useSize()
const switchDisabled = useDisabled(computed(() => props.loading))
const ns = useNamespace('switch')
const vm = getCurrentInstance()!
const { formItem } = useFormItem()
const switchSize = useSize()
const ns = useNamespace('switch')
useDeprecated(
{
from: '"value"',
replacement: '"model-value" or "v-model"',
scope: COMPONENT_NAME,
version: '2.3.0',
ref: 'https://element-plus.org/en-US/component/switch.html#attributes',
type: 'Attribute',
},
computed(() => !!vm.vnode.props?.value)
)
const { inputId } = useFormItemInputId(props, {
formItemContext: formItem,
})
useDeprecated(
{
from: '"value"',
replacement: '"model-value" or "v-model"',
scope: COMPONENT_NAME,
version: '2.3.0',
ref: 'https://element-plus.org/en-US/component/switch.html#attributes',
type: 'Attribute',
},
computed(() => !!vm.vnode.props?.value)
)
const isModelValue = ref(props.modelValue !== false)
const input = ref<HTMLInputElement>()
const core = ref<HTMLSpanElement>()
const { inputId } = useFormItemInputId(props, {
formItemContext: formItem,
})
const switchKls = computed(() => [
ns.b(),
ns.m(switchSize.value),
ns.is('disabled', switchDisabled.value),
ns.is('checked', checked.value),
])
const switchDisabled = useDisabled(computed(() => props.loading))
const isControlled = ref(props.modelValue !== false)
const input = ref<HTMLInputElement>()
const core = ref<HTMLSpanElement>()
const coreStyle = computed<CSSProperties>(() => ({
width: addUnit(props.width),
}))
const switchKls = computed(() => [
ns.b(),
ns.m(switchSize.value),
ns.is('disabled', switchDisabled.value),
ns.is('checked', checked.value),
])
watch(
() => props.modelValue,
() => {
isModelValue.value = true
}
)
const coreStyle = computed<CSSProperties>(() => ({
width: addUnit(props.width),
}))
watch(
() => props.value,
() => {
isModelValue.value = false
}
)
watch(
() => props.modelValue,
() => {
isControlled.value = true
}
)
const actualValue = computed(() => {
return isModelValue.value ? props.modelValue : props.value
})
watch(
() => props.value,
() => {
isControlled.value = false
}
)
const checked = computed(() => actualValue.value === props.activeValue)
const actualValue = computed(() => {
return isControlled.value ? props.modelValue : props.value
})
if (![props.activeValue, props.inactiveValue].includes(actualValue.value)) {
emit(UPDATE_MODEL_EVENT, props.inactiveValue)
emit(CHANGE_EVENT, props.inactiveValue)
emit(INPUT_EVENT, props.inactiveValue)
}
const checked = computed(() => actualValue.value === props.activeValue)
watch(checked, () => {
input.value!.checked = checked.value
if (![props.activeValue, props.inactiveValue].includes(actualValue.value)) {
emit(UPDATE_MODEL_EVENT, props.inactiveValue)
emit(CHANGE_EVENT, props.inactiveValue)
emit(INPUT_EVENT, props.inactiveValue)
}
if (props.validateEvent) {
formItem?.validate?.('change').catch((err) => debugWarn(err))
}
})
watch(checked, (val) => {
input.value!.checked = val
const handleChange = (): void => {
const val = checked.value ? props.inactiveValue : props.activeValue
emit(UPDATE_MODEL_EVENT, val)
emit(CHANGE_EVENT, val)
emit(INPUT_EVENT, val)
nextTick(() => {
input.value!.checked = checked.value
})
}
if (props.validateEvent) {
formItem?.validate?.('change').catch((err) => debugWarn(err))
}
})
const switchValue = (): void => {
if (switchDisabled.value) return
const handleChange = () => {
const val = checked.value ? props.inactiveValue : props.activeValue
emit(UPDATE_MODEL_EVENT, val)
emit(CHANGE_EVENT, val)
emit(INPUT_EVENT, val)
nextTick(() => {
input.value!.checked = checked.value
})
}
const { beforeChange } = props
if (!beforeChange) {
handleChange()
return
}
const switchValue = () => {
if (switchDisabled.value) return
const shouldChange = beforeChange()
const { beforeChange } = props
if (!beforeChange) {
handleChange()
return
}
const isExpectType = [
isPromise(shouldChange),
isBoolean(shouldChange),
].some((i) => i)
if (!isExpectType) {
throwError(
COMPONENT_NAME,
'beforeChange must return type `Promise<boolean>` or `boolean`'
)
}
const shouldChange = beforeChange()
if (isPromise(shouldChange)) {
shouldChange
.then((result) => {
if (result) {
handleChange()
}
})
.catch((e) => {
debugWarn(COMPONENT_NAME, `some error occurred: ${e}`)
})
} else if (shouldChange) {
handleChange()
}
}
const isPromiseOrBool = [
isPromise(shouldChange),
isBoolean(shouldChange),
].includes(true)
if (!isPromiseOrBool) {
throwError(
COMPONENT_NAME,
'beforeChange must return type `Promise<boolean>` or `boolean`'
)
}
const styles = computed(() => {
return ns.cssVarBlock({
...(props.activeColor ? { 'on-color': props.activeColor } : null),
...(props.inactiveColor ? { 'off-color': props.inactiveColor } : null),
...(props.borderColor ? { 'border-color': props.borderColor } : null),
if (isPromise(shouldChange)) {
shouldChange
.then((result) => {
if (result) {
handleChange()
}
})
.catch((e) => {
debugWarn(COMPONENT_NAME, `some error occurred: ${e}`)
})
})
} else if (shouldChange) {
handleChange()
}
}
const focus = (): void => {
input.value?.focus?.()
}
const styles = computed(() => {
return ns.cssVarBlock({
...(props.activeColor ? { 'on-color': props.activeColor } : null),
...(props.inactiveColor ? { 'off-color': props.inactiveColor } : null),
...(props.borderColor ? { 'border-color': props.borderColor } : null),
})
})
onMounted(() => {
input.value!.checked = checked.value
})
const focus = (): void => {
input.value?.focus?.()
}
return {
ns,
input,
inputId,
core,
switchDisabled,
checked,
switchKls,
coreStyle,
handleChange,
switchValue,
focus,
styles,
}
},
onMounted(() => {
input.value!.checked = checked.value
})
defineExpose({
/**
* @description manual focus to the switch component
**/
focus,
})
</script>

0 comments on commit f9a9ac8

Please sign in to comment.