perf(ui/counter&slider): add class&call

packages/varlet-ui/src/counter/Counter.vue

@@ -1,16 +1,22 @@
 <template>
-  <div class="var-counter var--box">
+  <div :class="classes(n(), 'var--box')">
     <div
-      class="var-counter__controller var-elevation--2"
-      :class="[disabled || formDisabled ? 'var-counter--disabled' : null, errorMessage ? 'var-counter--error' : null]"
+      :class="classes(
+        n('controller'),
+        'var-elevation--2',
+        [disabled || formDisabled, n('--disabled')],
+        [errorMessage, n('--error')]
+      )"
       :style="{ background: color ? color : undefined }"
       v-bind="$attrs"
     >
       <var-icon
-        class="var-counter__decrement-button"
         var-counter-cover
         name="minus"
-        :class="[!decrementButton ? 'var-counter--hidden' : null]"
+        :class="classes(
+          n('decrement-button'),
+          [!decrementButton, n('--hidden')]
+        )"
         :style="{
           width: toSizeUnit(buttonSize),
           height: toSizeUnit(buttonSize),
@@ -24,7 +30,7 @@
         @touchcancel="releaseDecrement"
       />
       <input
-        class="var-counter__input"
+        :class="n('input')"
         :style="{
           width: toSizeUnit(inputWidth),
           fontSize: toSizeUnit(inputTextSize),
@@ -36,10 +42,12 @@
         @change="handleChange"
       />
       <var-icon
-        class="var-counter__increment-button"
         var-counter-cover
         name="plus"
-        :class="[!incrementButton ? 'var-counter--hidden' : null]"
+        :class="classes(
+          n('increment-button'),
+          [!incrementButton, n('--hidden')]
+        )"
         :style="{
           width: toSizeUnit(buttonSize),
           height: toSizeUnit(buttonSize),
@@ -68,11 +76,12 @@ import { props } from './props'
 import { toNumber } from '../utils/shared'
 import { toSizeUnit } from '../utils/elements'
 import { useForm } from '../form/provide'
-import { useValidation } from '../utils/components'
+import { useValidation, createNamespace, call } from '../utils/components'
 import type { Ref, ComputedRef } from 'vue'
 import type { ValidateTriggers } from './props'
 import type { CounterProvider } from './provide'
 
+const { n, classes } = createNamespace('counter')
 const SPEED = 100
 const DELAY = 600
 
@@ -115,7 +124,7 @@ export default defineComponent({
     const reset = () => {
       const { min } = props
 
-      props['onUpdate:modelValue']?.(min != null ? toNumber(min) : 0)
+      call(props['onUpdate:modelValue'], min != null ? toNumber(min) : 0)
       resetValidation()
     }
 
@@ -161,7 +170,7 @@ export default defineComponent({
       const { value } = event.target as HTMLInputElement
       const normalizedValue = normalizeValue(value)
 
-      lazyChange ? onBeforeChange?.(toNumber(normalizedValue), change) : setNormalizedValue(normalizedValue)
+      lazyChange ? call(onBeforeChange, toNumber(normalizedValue), change) : setNormalizedValue(normalizedValue)
 
       validateWithTrigger('onInputChange')
     }
@@ -191,10 +200,10 @@ export default defineComponent({
       const normalizedValue = normalizeValue(value)
       const normalizedValueNum = toNumber(normalizedValue)
 
-      onDecrement?.(normalizedValueNum)
+      call(onDecrement, normalizedValueNum)
 
       if (lazyChange) {
-        onBeforeChange?.(normalizedValueNum, change)
+        call(onBeforeChange, normalizedValueNum, change)
       } else {
         setNormalizedValue(normalizedValue)
         validateWithTrigger('onDecrement')
@@ -226,10 +235,10 @@ export default defineComponent({
       const normalizedValue = normalizeValue(value)
       const normalizedValueNum = toNumber(normalizedValue)
 
-      onIncrement?.(normalizedValueNum)
+      call(onIncrement, normalizedValueNum)
 
       if (lazyChange) {
-        onBeforeChange?.(normalizedValueNum, change)
+        call(onBeforeChange, normalizedValueNum, change)
       } else {
         setNormalizedValue(normalizedValue)
         validateWithTrigger('onIncrement')
@@ -289,27 +298,29 @@ export default defineComponent({
 
       const normalizedValueNum = toNumber(normalizedValue)
 
-      props['onUpdate:modelValue']?.(normalizedValueNum)
+      call(props['onUpdate:modelValue'], normalizedValueNum)
     }
 
     const change = (value: string | number) => {
       setNormalizedValue(normalizeValue(String(value)))
       validateWithTrigger('onLazyChange')
     }
 
-    bindForm?.(counterProvider)
+    call(bindForm, counterProvider)
 
     watch(
       () => props.modelValue,
       (newValue) => {
         setNormalizedValue(normalizeValue(String(newValue)))
-        props.onChange?.(toNumber(newValue))
+        call(props.onChange, toNumber(newValue))
       }
     )
 
     setNormalizedValue(normalizeValue(String(props.modelValue)))
 
     return {
+      n,
+      classes,
       inputValue,
       errorMessage,
       formDisabled,

packages/varlet-ui/src/form/__tests__/__snapshots__/index.spec.js.snap

@@ -434,7 +434,7 @@ exports[`test form with select 4`] = `
 exports[`test form with slider 1`] = `
 "<div class=\\"var-form\\">
   <div class=\\"var-slider\\">
-    <div class=\\"var-slider-block var-slider__disable\\">
+    <div class=\\"var-slider__block var-slider--disabled\\">
       <div class=\\"var-slider__track\\">
         <div class=\\"var-slider__track-background\\"></div>
         <div class=\\"var-slider__track-fill\\" style=\\"width: 5%; left: 0%;\\"></div>
@@ -455,7 +455,7 @@ exports[`test form with slider 1`] = `
 exports[`test form with slider 2`] = `
 "<div class=\\"var-form\\">
   <div class=\\"var-slider\\">
-    <div class=\\"var-slider-block var-slider__error\\">
+    <div class=\\"var-slider__block var-slider--error\\">
       <div class=\\"var-slider__track\\">
         <div class=\\"var-slider__track-background\\"></div>
         <div class=\\"var-slider__track-fill\\" style=\\"width: 5%; left: 0%;\\"></div>
@@ -479,7 +479,7 @@ exports[`test form with slider 2`] = `
 exports[`test form with slider 3`] = `
 "<div class=\\"var-form\\">
   <div class=\\"var-slider\\">
-    <div class=\\"var-slider-block\\">
+    <div class=\\"var-slider__block\\">
       <div class=\\"var-slider__track\\">
         <div class=\\"var-slider__track-background\\"></div>
         <div class=\\"var-slider__track-fill\\" style=\\"width: 0%; left: 0%;\\"></div>

packages/varlet-ui/src/slider/Slider.vue

@@ -1,28 +1,31 @@
 <template>
-  <div class="var-slider">
+  <div :class="n()">
     <div
-      class="var-slider-block"
-      :class="[isDisabled ? 'var-slider__disable' : null, errorMessage ? 'var-slider__error' : null]"
+      :class="classes(
+        n('block'),
+        [isDisabled, n('--disabled')],
+        [errorMessage, n('--error')]
+      )"
       :style="{
         height: thumbSize === undefined ? thumbSize : `${3 * toNumber(thumbSize)}px`,
         margin: thumbSize === undefined ? thumbSize : `0 ${toNumber(thumbSize) / 2}px`,
       }"
       ref="sliderEl"
       @click="click"
     >
-      <div class="var-slider__track">
+      <div :class="n('track')">
         <div
-          class="var-slider__track-background"
+          :class="n('track-background')"
           :style="{
             background: trackColor,
             height: trackHeight + 'px',
           }"
         ></div>
-        <div class="var-slider__track-fill" :style="getFillStyle"></div>
+        <div :class="n('track-fill')" :style="getFillStyle"></div>
       </div>
       <div
         v-for="item in thumbList"
-        class="var-slider__thumb"
+        :class="n('thumb')"
         :key="item.enumValue"
         :style="{
           left: `${item.value}%`,
@@ -35,24 +38,28 @@
       >
         <slot name="button" :current-value="item.value">
           <div
-            class="var-slider__thumb-block"
+            :class="n('thumb-block')"
             :style="{
               background: thumbColor,
               height: thumbSize + 'px',
               width: thumbSize + 'px',
             }"
           ></div>
           <div
-            class="var-slider__thumb-ripple"
-            :class="[thumbsProps[item.enumValue].active ? 'var-slider__thumb-ripple-active' : null]"
+            :class="classes(
+              n('thumb-ripple'),
+              [thumbsProps[item.enumValue].active, n('thumb-ripple-active')]
+            )"
             :style="{
               background: thumbColor,
               ...getRippleSize(item),
             }"
           ></div>
           <div
-            class="var-slider__thumb-label"
-            :class="[showLabel(item.enumValue) ? 'var-slider__thumb-label-active' : null]"
+            :class="classes(
+              n('thumb-label'),
+              [showLabel(item.enumValue), n('thumb-label-active')]
+            )"
             :style="{
               background: labelColor,
               color: labelTextColor,
@@ -65,13 +72,13 @@
         </slot>
       </div>
     </div>
-    <var-form-details :error-message="errorMessage" class="var-slider__form" var-slider-cover />
+    <var-form-details :error-message="errorMessage" :class="n('form')" var-slider-cover />
   </div>
 </template>
 
 <script lang="ts">
 import { defineComponent, ref, onMounted, computed, reactive, nextTick, watch } from 'vue'
-import { useValidation } from '../utils/components'
+import { useValidation, createNamespace, call } from '../utils/components'
 import { useForm } from '../form/provide'
 import { getLeft } from '../utils/elements'
 import { isArray, isNumber, toNumber } from '../utils/shared'
@@ -80,6 +87,8 @@ import VarFormDetails from '../form-details'
 import type { Ref, ComputedRef, UnwrapRef } from 'vue'
 import type { SliderProvider } from './provide'
 
+const { n, classes } = createNamespace('slider')
+
 enum Thumbs {
   First = '1',
   Second = '2',
@@ -199,8 +208,8 @@ export default defineComponent({
 
       if (prevValue !== curValue) {
         const value = range ? rangeValue : curValue
-        onChange?.(value)
-        props['onUpdate:modelValue']?.(value)
+        call(onChange, value)
+        call(props['onUpdate:modelValue'], value)
         validateWithTrigger()
       }
     }
@@ -218,7 +227,7 @@ export default defineComponent({
     const start = (event: TouchEvent, type: keyof ThumbsProps) => {
       if (!maxWidth.value) maxWidth.value = (sliderEl.value as HTMLDivElement).offsetWidth
       if (isDisabled.value || isReadonly.value) return
-      props.onStart?.()
+      call(props.onStart)
       isScroll.value = true
       thumbsProps[type].startPosition = event.touches[0].clientX
     }
@@ -248,7 +257,7 @@ export default defineComponent({
         rangeValue = type === Thumbs.First ? [curValue, modelValue[1]] : [modelValue[0], curValue]
       }
 
-      onEnd?.(range ? rangeValue : curValue)
+      call(onEnd, range ? rangeValue : curValue)
       isScroll.value = false
     }
 
@@ -322,7 +331,7 @@ export default defineComponent({
 
     const reset = () => {
       const resetValue = props.range ? [0, 0] : 0
-      props['onUpdate:modelValue']?.(resetValue)
+      call(props['onUpdate:modelValue'], resetValue)
       resetValidation()
     }
 
@@ -332,9 +341,11 @@ export default defineComponent({
       resetValidation,
     }
 
-    bindForm?.(sliderProvider)
+    call(bindForm, sliderProvider)
 
     return {
+      n,
+      classes,
       Thumbs,
       sliderEl,
       getFillStyle,