Skip to content

Commit

Permalink
fix(switch): support dimension units (#556)
Browse files Browse the repository at this point in the history
* fix(switch): support dimension units

* fix(switch): add dimension units for radius
  • Loading branch information
BeADre authored May 13, 2022
1 parent c8028fe commit 73bec2b
Show file tree
Hide file tree
Showing 10 changed files with 176 additions and 147 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -500,10 +500,10 @@ exports[`test form with slider 3`] = `
exports[`test form with switch 1`] = `
"<div class=\\"var-form\\">
<div class=\\"var-switch\\">
<div class=\\"var-switch__block var-switch--disable\\" style=\\"height: 24px; width: 40px;\\">
<div style=\\"height: 14.399999999999999px; width: 38px; border-radius: 13.333333333333334px; filter: brightness(.6);\\" class=\\"var-switch__track\\"></div>
<div class=\\"var-switch__ripple\\" style=\\"left: -10px; color: rgb(153, 153, 153); width: 40px; height: 40px;\\">
<div style=\\"width: 20px; height: 20px;\\" class=\\"var-switch__handle var-elevation--2\\">
<div class=\\"var-switch__block var-switch--disable\\">
<div style=\\"filter: brightness(.6);\\" class=\\"var-switch__track\\"></div>
<div class=\\"var-switch__ripple\\" style=\\"color: rgb(153, 153, 153);\\">
<div class=\\"var-switch__handle var-elevation--2\\">
<!--v-if-->
</div>
</div>
Expand All @@ -518,10 +518,10 @@ exports[`test form with switch 1`] = `
exports[`test form with switch 2`] = `
"<div class=\\"var-form\\">
<div class=\\"var-switch\\">
<div class=\\"var-switch__block\\" style=\\"height: 24px; width: 40px;\\">
<div style=\\"height: 14.399999999999999px; width: 38px; border-radius: 13.333333333333334px; filter: opacity(.6);\\" class=\\"var-switch__track var-switch__track-error\\"></div>
<div class=\\"var-switch__ripple\\" style=\\"left: -10px; color: rgb(153, 153, 153); width: 40px; height: 40px;\\">
<div style=\\"width: 20px; height: 20px;\\" class=\\"var-switch__handle var-elevation--2 var-switch__handle-error\\">
<div class=\\"var-switch__block\\">
<div style=\\"filter: opacity(.6);\\" class=\\"var-switch__track var-switch__track-error\\"></div>
<div class=\\"var-switch__ripple\\" style=\\"color: rgb(153, 153, 153);\\">
<div class=\\"var-switch__handle var-elevation--2 var-switch__handle-error\\">
<!--v-if-->
</div>
</div>
Expand All @@ -539,10 +539,10 @@ exports[`test form with switch 2`] = `
exports[`test form with switch 3`] = `
"<div class=\\"var-form\\">
<div class=\\"var-switch\\">
<div class=\\"var-switch__block\\" style=\\"height: 24px; width: 40px;\\">
<div style=\\"height: 14.399999999999999px; width: 38px; border-radius: 13.333333333333334px; filter: brightness(.6);\\" class=\\"var-switch__track\\"></div>
<div class=\\"var-switch__ripple\\" style=\\"left: -10px; color: rgb(153, 153, 153); width: 40px; height: 40px;\\">
<div style=\\"width: 20px; height: 20px;\\" class=\\"var-switch__handle var-elevation--2\\">
<div class=\\"var-switch__block\\">
<div style=\\"filter: brightness(.6);\\" class=\\"var-switch__track\\"></div>
<div class=\\"var-switch__ripple\\" style=\\"color: rgb(153, 153, 153);\\">
<div class=\\"var-switch__handle var-elevation--2\\">
<!--v-if-->
</div>
</div>
Expand Down
4 changes: 2 additions & 2 deletions packages/varlet-ui/src/rate/example/index.vue
Original file line number Diff line number Diff line change
Expand Up @@ -47,7 +47,7 @@ watchDarkMode(dark)
<var-rate v-model="scores.score2" color="#3f51b5" empty-color="#9fa8da" />

<app-type>{{ pack.customizeRatingIconStyles }}</app-type>
<var-rate v-model="scores.score3" icon="heart" empty-icon="heart-outline" color="red"></var-rate>
<var-rate v-model="scores.score3" icon="heart" empty-icon="heart-outline" color="red" />

<app-type>{{ pack.customizeRatingIconSize }}</app-type>
<var-rate v-model="scores.score4" :size="16" />
Expand All @@ -71,7 +71,7 @@ watchDarkMode(dark)
empty-icon="heart-outline"
color="red"
half
></var-rate>
/>

<app-type>{{ pack.disableTheRating }}</app-type>
<var-rate v-model="scores.score7" disabled />
Expand Down
46 changes: 25 additions & 21 deletions packages/varlet-ui/src/switch/Switch.vue
Original file line number Diff line number Diff line change
Expand Up @@ -7,10 +7,12 @@
>
<div
:style="styleComputed.track"
:class="classes(n('track'), [modelValue === activeValue, n('track-active')], [errorMessage, n('track-error')])"
:class="
classes(n('track'), [modelValue === activeValue, n('track--active')], [errorMessage, n('track--error')])
"
></div>
<div
:class="n('ripple')"
:class="classes(n('ripple'), [modelValue === activeValue, n('ripple--active')])"
:style="styleComputed.ripple"
v-ripple="{
disabled: !ripple || disabled || loading || formDisabled,
Expand All @@ -22,12 +24,12 @@
classes(
n('handle'),
'var-elevation--2',
[modelValue === activeValue, n('handle-active')],
[errorMessage, n('handle-error')]
[modelValue === activeValue, n('handle--active')],
[errorMessage, n('handle--error')]
)
"
>
<var-loading v-if="loading" :radius="toNumber(size) / 2 - 2" />
<var-loading v-if="loading" :radius="radius" />
</div>
</div>
</div>
Expand All @@ -38,7 +40,7 @@
<script lang="ts">
import { defineComponent, computed, nextTick } from 'vue'
import { useValidation, createNamespace, call } from '../utils/components'
import { toNumber } from '../utils/shared'
import { multiplySizeUnit } from '../utils/elements'
import { useForm } from '../form/provide'
import { props } from './props'
import VarFormDetails from '../form-details'
Expand Down Expand Up @@ -77,37 +79,39 @@ export default defineComponent({
const styleComputed: ComputedRef<Record<string, Partial<StyleProps>>> = computed(() => {
const { size, modelValue, color, closeColor, loadingColor, activeValue } = props
const sizeNum = toNumber(size)
const switchWidth = sizeNum * 2
const switchHeight = sizeNum * 1.2
return {
handle: {
width: `${size}px`,
height: `${size}px`,
width: multiplySizeUnit(size),
height: multiplySizeUnit(size),
backgroundColor: modelValue === activeValue ? color || '' : closeColor || '',
color: loadingColor && loadingColor,
},
ripple: {
left: modelValue === activeValue ? `${sizeNum / 2}px` : `-${sizeNum / 2}px`,
left: modelValue === activeValue ? multiplySizeUnit(size, 0.5) : `-${multiplySizeUnit(size, 0.5)}`,
color: modelValue === activeValue ? color || '' : closeColor || '#999',
width: `${sizeNum * 2}px`,
height: `${sizeNum * 2}px`,
width: multiplySizeUnit(size, 2),
height: multiplySizeUnit(size, 2),
},
track: {
height: `${switchHeight * 0.6}px`,
width: `${switchWidth - 2}px`,
borderRadius: `${switchWidth / 3}px`,
height: multiplySizeUnit(size, 0.72),
width: multiplySizeUnit(size, 1.9),
borderRadius: multiplySizeUnit(size, 2 / 3),
filter: modelValue === activeValue || errorMessage?.value ? 'opacity(.6)' : 'brightness(.6)',
backgroundColor: modelValue === activeValue ? color || '' : closeColor || '',
},
switch: {
height: `${switchHeight}px`,
width: `${switchWidth}px`,
height: multiplySizeUnit(size, 1.2),
width: multiplySizeUnit(size, 2),
},
}
})
const radius: ComputedRef<string> = computed(() => {
const { size = '20px' } = props
return multiplySizeUnit(size, 0.4) as string
})
const switchActive = (event: MouseEvent) => {
const {
onClick,
Expand Down Expand Up @@ -145,7 +149,7 @@ export default defineComponent({
n,
classes,
switchActive,
toNumber,
radius,
styleComputed,
errorMessage,
formDisabled: form?.disabled,
Expand Down
Loading

0 comments on commit 73bec2b

Please sign in to comment.