From 3e52e3ff72b17c36b8e684a083a916bfffea81d8 Mon Sep 17 00:00:00 2001
From: chenjie <540053866@qq.com>
Date: Sun, 3 Apr 2022 17:30:32 +0800
Subject: [PATCH 1/6] perf(ui/inpuit): add class

---
 packages/varlet-ui/src/form/Form.vue   |   6 +-
 packages/varlet-ui/src/input/Input.vue | 105 +++++++++++++------------
 2 files changed, 59 insertions(+), 52 deletions(-)

diff --git a/packages/varlet-ui/src/form/Form.vue b/packages/varlet-ui/src/form/Form.vue
index 3d216459a88..221325ab6fb 100644
--- a/packages/varlet-ui/src/form/Form.vue
+++ b/packages/varlet-ui/src/form/Form.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="var-form">
+  <div :class="n()">
     <slot />
   </div>
 </template>
@@ -10,6 +10,9 @@ import { props } from './props'
 import { useFormItems } from './provide'
 import type { ComputedRef } from 'vue'
 import type { FormProvider } from './provide'
+import { createNamespace } from '../utils/components'
+
+const { n } = createNamespace('form')
 
 export default defineComponent({
   name: 'VarForm',
@@ -40,6 +43,7 @@ export default defineComponent({
     bindFormItems(formProvider)
 
     return {
+      n,
       validate,
       reset,
       resetValidation,
diff --git a/packages/varlet-ui/src/input/Input.vue b/packages/varlet-ui/src/input/Input.vue
index d8d89c941b1..394fb09fbb2 100644
--- a/packages/varlet-ui/src/input/Input.vue
+++ b/packages/varlet-ui/src/input/Input.vue
@@ -1,24 +1,33 @@
 <template>
-  <div class="var-input var--box" :class="[disabled ? 'var-input--disabled' : null]" @click="handleClick">
+  <div :class="classes(n(), 'var--box', [disabled, n('--disabled')])" @click="handleClick">
     <div
-      class="var-input__controller"
-      :class="[
-        isFocus ? 'var-input--focus' : null,
-        errorMessage ? 'var-input--error' : null,
-        formDisabled || disabled ? 'var-input--disabled' : null,
-      ]"
+      :class="
+        classes(
+          n('controller'),
+          [isFocus, n('--focus')],
+          [errorMessage, n('--error')],
+          [formDisabled || disabled, n('--disabled')]
+        )
+      "
       :style="{
         color: !errorMessage ? (isFocus ? focusColor : blurColor) : undefined,
       }"
     >
-      <div class="var-input__icon" :class="[!hint ? 'var-input--non-hint' : null]">
+      <div :class="classes(n('icon'), [!hint, n('--non-hint')])">
         <slot name="prepend-icon" />
       </div>
 
-      <div class="var-input__wrap" :class="[!hint ? 'var-input--non-hint' : null]">
+      <div :class="classes(n('wrap'), [!hint, n('--non-hint')])">
         <input class="var-input__autocomplete" v-if="type === 'password'" />
         <textarea
-          class="var-input__input var-input--textarea"
+          :class="
+            classes(
+              n('input'),
+              n('--textarea'),
+              [formDisabled || disabled, n('--disabled')],
+              [errorMessage, n('--caret-error')]
+            )
+          "
           ref="el"
           autocomplete="new-password"
           :id="id"
@@ -27,10 +36,6 @@
           :value="modelValue"
           :maxlength="maxlength"
           :rows="rows"
-          :class="[
-            formDisabled || disabled ? 'var-input--disabled' : null,
-            errorMessage ? 'var-input--caret-error' : null,
-          ]"
           :style="{
             color: textColor,
             caretColor: !errorMessage ? focusColor : null,
@@ -44,7 +49,7 @@
         >
         </textarea>
         <input
-          class="var-input__input"
+          :class="classes(n('input'), [formDisabled || disabled, n('--disabled')], [errorMessage, n('--caret-error')])"
           ref="el"
           autocomplete="new-password"
           :id="id"
@@ -52,10 +57,6 @@
           :type="type"
           :value="modelValue"
           :maxlength="maxlength"
-          :class="[
-            formDisabled || disabled ? 'var-input--disabled' : null,
-            errorMessage ? 'var-input--caret-error' : null,
-          ]"
           :style="{
             color: textColor,
             caretColor: !errorMessage ? focusColor : null,
@@ -67,14 +68,16 @@
           v-else
         />
         <label
-          class="var--ellipsis"
-          :class="[
-            isFocus ? 'var-input--focus' : null,
-            errorMessage ? 'var-input--error' : null,
-            textarea ? 'var-input__textarea-placeholder' : 'var-input__placeholder',
-            computePlaceholderState(),
-            !hint ? 'var-input--placeholder-non-hint' : null,
-          ]"
+          :class="
+            classes(
+              'var--ellipsis',
+              [isFocus, n('--focus')],
+              [errorMessage, n('--error')],
+              [textarea, n('textarea-placeholder'), n('placeholder')],
+              computePlaceholderState(),
+              [!hint, n('--placeholder-non-hint')]
+            )
+          "
           :style="{
             color: !errorMessage ? (isFocus ? focusColor : blurColor) : undefined,
           }"
@@ -84,7 +87,7 @@
         </label>
       </div>
 
-      <div class="var-input__icon" :class="[!hint ? 'var-input--non-hint' : null]">
+      <div :class="classes(n('icon'), [!hint, n('--non-hint')])">
         <slot name="append-icon">
           <var-icon
             class="var-input__clear-icon"
@@ -99,21 +102,19 @@
     </div>
 
     <div
-      class="var-input__line"
-      :class="[
-        formDisabled || disabled ? 'var-input--line-disabled' : null,
-        errorMessage ? 'var-input--line-error' : null,
-      ]"
+      :class="classes(n('line'), [formDisabled || disabled, n('--line-disabled')], [errorMessage, n('--line-error')])"
       :style="{ background: !errorMessage ? blurColor : undefined }"
       v-if="line"
     >
       <div
-        class="var-input__dot"
-        :class="[
-          isFocus ? 'var-input--spread' : null,
-          formDisabled || disabled ? 'var-input--line-disabled' : null,
-          errorMessage ? 'var-input--line-error' : null,
-        ]"
+        :class="
+          classes(
+            n('dot'),
+            [isFocus, n('--spread')],
+            [formDisabled || disabled, n('--line-disabled')],
+            [errorMessage, n('--line-error')]
+          )
+        "
         :style="{ background: !errorMessage ? focusColor : undefined }"
       ></div>
     </div>
@@ -128,12 +129,13 @@ import VarIcon from '../icon'
 import { defineComponent, getCurrentInstance, ref, computed, nextTick } from 'vue'
 import { props } from './props'
 import { isEmpty } from '../utils/shared'
-import { useValidation } from '../utils/components'
+import { useValidation, createNamespace, call } from '../utils/components'
 import { useForm } from '../form/provide'
 import type { Ref, ComputedRef } from 'vue'
 import type { ValidateTriggers } from './props'
 import type { InputProvider } from './provide'
 
+const { n, classes } = createNamespace('input')
 export default defineComponent({
   name: 'VarInput',
   components: {
@@ -188,29 +190,29 @@ export default defineComponent({
     const handleFocus = (e: FocusEvent) => {
       isFocus.value = true
 
-      props.onFocus?.(e)
+      call(props.onFocus, e)
       validateWithTrigger('onFocus')
     }
 
     const handleBlur = (e: FocusEvent) => {
       isFocus.value = false
 
-      props.onBlur?.(e)
+      call(props.onBlur, e)
       validateWithTrigger('onBlur')
     }
 
     const handleInput = (e: Event) => {
       const { value } = e.target as HTMLInputElement
 
-      props['onUpdate:modelValue']?.(value)
-      props.onInput?.(value, e)
+      call(props['onUpdate:modelValue'], value)
+      call(props.onInput, value, e)
       validateWithTrigger('onInput')
     }
 
     const handleChange = (e: Event) => {
       const { value } = e.target as HTMLInputElement
 
-      props.onChange?.(value, e)
+      call(props.onChange, value, e)
       validateWithTrigger('onChange')
     }
 
@@ -221,9 +223,8 @@ export default defineComponent({
         return
       }
 
-      props['onUpdate:modelValue']?.('')
-      onClear?.('')
-
+      call(props['onUpdate:modelValue'], '')
+      call(onClear, '')
       validateWithTrigger('onClear')
     }
 
@@ -234,14 +235,13 @@ export default defineComponent({
         return
       }
 
-      onClick?.(e)
-
+      call(onClick, e)
       validateWithTrigger('onClick')
     }
 
     // expose
     const reset = () => {
-      props['onUpdate:modelValue']?.('')
+      call(props['onUpdate:modelValue'], '')
       resetValidation()
     }
 
@@ -274,6 +274,9 @@ export default defineComponent({
       maxlengthText,
       formDisabled: form?.disabled,
       formReadonly: form?.readonly,
+      n,
+      classes,
+      call,
       isEmpty,
       computePlaceholderState,
       handleFocus,

From 44b72480d3e43eceac86f13d217499a1f29441ab Mon Sep 17 00:00:00 2001
From: chenjie <540053866@qq.com>
Date: Mon, 4 Apr 2022 01:50:13 +0800
Subject: [PATCH 2/6] perf(ui/select): add class and call function

---
 packages/varlet-ui/src/input/Input.vue   |  4 ++--
 packages/varlet-ui/src/select/Select.vue | 24 ++++++------------------
 2 files changed, 8 insertions(+), 20 deletions(-)

diff --git a/packages/varlet-ui/src/input/Input.vue b/packages/varlet-ui/src/input/Input.vue
index 3b3ac332c81..eca57c261f7 100644
--- a/packages/varlet-ui/src/input/Input.vue
+++ b/packages/varlet-ui/src/input/Input.vue
@@ -18,7 +18,7 @@
       </div>
 
       <div :class="classes(n('wrap'), [!hint, n('--non-hint')])">
-        <input :class="classes(n('autocomplete'))" v-if="type === 'password'" />
+        <input :class="n('autocomplete')" v-if="type === 'password'" />
         <textarea
           :class="
             classes(
@@ -90,7 +90,7 @@
       <div :class="classes(n('icon'), [!hint, n('--non-hint')])">
         <slot name="append-icon">
           <var-icon
-            :class="classes(n('clear-icon'))"
+            :class="n('clear-icon')"
             var-input-cover
             name="close-circle"
             size="14px"
diff --git a/packages/varlet-ui/src/select/Select.vue b/packages/varlet-ui/src/select/Select.vue
index 1be55430cf3..01ffe58f8ad 100644
--- a/packages/varlet-ui/src/select/Select.vue
+++ b/packages/varlet-ui/src/select/Select.vue
@@ -17,13 +17,7 @@
         <slot name="prepend-icon" />
       </div>
 
-      <var-menu
-        :class="classes(n('menu'))"
-        var-select-cover
-        :offset-y="offsetY"
-        v-model:show="isFocus"
-        @close="handleBlur"
-      >
+      <var-menu :class="n('menu')" var-select-cover :offset-y="offsetY" v-model:show="isFocus" @close="handleBlur">
         <div :class="classes(n('wrap'), [!hint, n('--non-hint')])" ref="wrapEl" @click="handleFocus">
           <div
             :class="classes(n('select'), [errorMessage, n('--error')], [formDisabled || disabled, n('--disabled')])"
@@ -33,9 +27,9 @@
             }"
           >
             <div v-if="multiple">
-              <div :class="classes(n('chips'))" v-if="chip">
+              <div :class="n('chips')" v-if="chip">
                 <var-chip
-                  :class="classes(n('chip'))"
+                  :class="n('chip')"
                   var-select-cover
                   closable
                   size="small"
@@ -48,7 +42,7 @@
                   {{ l }}
                 </var-chip>
               </div>
-              <div :class="classes(n('values'))" v-else>
+              <div :class="n('values')" v-else>
                 {{ labels.join(separator) }}
               </div>
             </div>
@@ -83,7 +77,7 @@
         </div>
 
         <template #menu>
-          <div :class="classes(n('scroller'))">
+          <div :class="n('scroller')">
             <slot />
           </div>
         </template>
@@ -91,13 +85,7 @@
 
       <div :class="classes(n('icon'), [!hint, n('--non-hint')])">
         <slot name="append-icon">
-          <var-icon
-            :class="classes(n('clear-icon'))"
-            name="close-circle"
-            size="14px"
-            v-if="clearable"
-            @click="handleClear"
-          />
+          <var-icon :class="n('clear-icon')" name="close-circle" size="14px" v-if="clearable" @click="handleClear" />
         </slot>
       </div>
     </div>

From 426a2dcef1e18aa8d2b5f47065c295efc0b5be9e Mon Sep 17 00:00:00 2001
From: chenjie <540053866@qq.com>
Date: Mon, 4 Apr 2022 14:06:17 +0800
Subject: [PATCH 3/6] perf(ui/radio): add class and call function

---
 packages/varlet-ui/src/radio/Radio.vue | 55 ++++++++++++++------------
 1 file changed, 30 insertions(+), 25 deletions(-)

diff --git a/packages/varlet-ui/src/radio/Radio.vue b/packages/varlet-ui/src/radio/Radio.vue
index f806cbbcbc2..eb0ddc868bd 100644
--- a/packages/varlet-ui/src/radio/Radio.vue
+++ b/packages/varlet-ui/src/radio/Radio.vue
@@ -1,41 +1,43 @@
 <template>
-  <div class="var-radio__wrap">
-    <div class="var-radio" @click="handleClick" v-bind="$attrs">
+  <div :class="n('wrap')">
+    <div :class="n()" @click="handleClick" v-bind="$attrs">
       <div
-        class="var-radio__action"
+        :class="
+          classes(
+            n('action'),
+            [checked, n('--checked'), n('--unchecked')],
+            [errorMessage || radioGroupErrorMessage, n('--error')],
+            [formDisabled || disabled, n('--disabled')]
+          )
+        "
         v-ripple="{ disabled: formReadonly || readonly || formDisabled || disabled || !ripple }"
-        :class="[
-          checked ? 'var-radio--checked' : 'var-radio--unchecked',
-          errorMessage || radioGroupErrorMessage ? 'var-radio--error' : null,
-          formDisabled || disabled ? 'var-radio--disabled' : null,
-        ]"
         :style="{ color: checked ? checkedColor : uncheckedColor }"
       >
         <slot name="checked-icon" v-if="checked">
           <var-icon
-            class="var-radio__icon"
+            :class="classes(n('icon'), [withAnimation, n('--with-animation')])"
             var-radio-cover
             name="radio-marked"
-            :class="[withAnimation ? 'var-radio--with-animation' : null]"
             :size="iconSize"
           />
         </slot>
         <slot name="unchecked-icon" v-else>
           <var-icon
-            class="var-radio__icon"
+            :class="classes(n('icon'), [withAnimation, n('--with-animation')])"
             var-radio-cover
             name="radio-blank"
-            :class="[withAnimation ? 'var-radio--with-animation' : null]"
             :size="iconSize"
           />
         </slot>
       </div>
       <div
-        class="var-radio__text"
-        :class="[
-          errorMessage || radioGroupErrorMessage ? 'var-radio--error' : null,
-          formDisabled || disabled ? 'var-radio--disabled' : null,
-        ]"
+        :class="
+          classes(
+            n('text'),
+            [errorMessage || radioGroupErrorMessage, n('--error')],
+            [formDisabled || disabled, n('--disabled')]
+          )
+        "
       >
         <slot />
       </div>
@@ -51,13 +53,14 @@ import VarFormDetails from '../form-details'
 import Ripple from '../ripple'
 import { computed, defineComponent, nextTick, ref, watch } from 'vue'
 import { props } from './props'
-import { useValidation } from '../utils/components'
+import { useValidation, createNamespace, call } from '../utils/components'
 import { useRadioGroup } from './provide'
 import { useForm } from '../form/provide'
 import type { Ref, ComputedRef } from 'vue'
 import type { ValidateTriggers } from './props'
 import type { RadioProvider } from './provide'
 
+const { n, classes } = createNamespace('radio')
 export default defineComponent({
   name: 'VarRadio',
   directives: { Ripple },
@@ -97,8 +100,8 @@ export default defineComponent({
 
       value.value = changedValue
 
-      props['onUpdate:modelValue']?.(value.value)
-      onChange?.(value.value)
+      call(props['onUpdate:modelValue'], value.value)
+      call(onChange, value.value)
       radioGroup?.onToggle(checkedValue)
       validateWithTrigger('onChange')
     }
@@ -110,8 +113,7 @@ export default defineComponent({
         return
       }
 
-      onClick?.(e)
-
+      call(onClick, e)
       if (form?.readonly.value || readonly) {
         return
       }
@@ -127,7 +129,7 @@ export default defineComponent({
 
     // expose
     const reset = () => {
-      props['onUpdate:modelValue']?.(props.uncheckedValue)
+      call(props['onUpdate:modelValue'], props.uncheckedValue)
       resetValidation()
     }
 
@@ -161,8 +163,8 @@ export default defineComponent({
       reset,
     }
 
-    bindRadioGroup?.(radioProvider)
-    bindForm?.(radioProvider)
+    call(bindRadioGroup, radioProvider)
+    call(bindForm, radioProvider)
 
     return {
       withAnimation,
@@ -171,6 +173,9 @@ export default defineComponent({
       radioGroupErrorMessage: radioGroup?.errorMessage,
       formDisabled: form?.disabled,
       formReadonly: form?.readonly,
+      n,
+      classes,
+      call,
       handleClick,
       toggle,
       reset,

From b36b5d7107c3e1101480afcb253b463185b1515c Mon Sep 17 00:00:00 2001
From: chenjie <540053866@qq.com>
Date: Mon, 4 Apr 2022 14:37:28 +0800
Subject: [PATCH 4/6] perf(ui/checkbox): add class and call function

---
 .../src/checkbox-group/CheckboxGroup.vue      | 22 ++++----
 packages/varlet-ui/src/checkbox/Checkbox.vue  | 54 ++++++++++---------
 2 files changed, 43 insertions(+), 33 deletions(-)

diff --git a/packages/varlet-ui/src/checkbox-group/CheckboxGroup.vue b/packages/varlet-ui/src/checkbox-group/CheckboxGroup.vue
index 95fdcb9c773..e85e3dcc44a 100644
--- a/packages/varlet-ui/src/checkbox-group/CheckboxGroup.vue
+++ b/packages/varlet-ui/src/checkbox-group/CheckboxGroup.vue
@@ -1,6 +1,6 @@
 <template>
-  <div class="var-checkbox-group__wrap">
-    <div class="var-checkbox-group" :class="[`var-checkbox-group--${direction}`]">
+  <div :class="n('wrap')">
+    <div :class="classes(n(), n(`--${direction}`))">
       <slot />
     </div>
     <var-form-details :error-message="errorMessage" />
@@ -11,7 +11,7 @@
 import VarFormDetails from '../form-details'
 import { defineComponent, computed, watch, nextTick } from 'vue'
 import { props } from './props'
-import { useValidation } from '../utils/components'
+import { useValidation, createNamespace, call } from '../utils/components'
 import { useCheckboxes } from './provide'
 import { useForm } from '../form/provide'
 import { uniq } from '../utils/shared'
@@ -19,6 +19,7 @@ import type { ComputedRef } from 'vue'
 import type { ValidateTriggers } from './props'
 import type { CheckboxGroupProvider } from './provide'
 
+const { n, classes } = createNamespace('checkbox-group')
 export default defineComponent({
   name: 'VarCheckboxGroup',
   components: { VarFormDetails },
@@ -45,8 +46,8 @@ export default defineComponent({
     }
 
     const change = (changedModelValue: any) => {
-      props['onUpdate:modelValue']?.(changedModelValue)
-      props.onChange?.(changedModelValue)
+      call(props['onUpdate:modelValue'], changedModelValue)
+      call(props.onChange, changedModelValue)
       validateWithTrigger('onChange')
     }
 
@@ -81,7 +82,7 @@ export default defineComponent({
 
       resetWithAnimation()
 
-      props['onUpdate:modelValue']?.(changedModelValue)
+      call(props['onUpdate:modelValue'], changedModelValue)
 
       return changedModelValue
     }
@@ -95,14 +96,14 @@ export default defineComponent({
 
       resetWithAnimation()
 
-      props['onUpdate:modelValue']?.(changedModelValue)
+      call(props['onUpdate:modelValue'], changedModelValue)
 
       return changedModelValue
     }
 
     // expose
     const reset = () => {
-      props['onUpdate:modelValue']?.([])
+      call(props['onUpdate:modelValue'], [])
       resetValidation()
     }
 
@@ -125,10 +126,13 @@ export default defineComponent({
     }
 
     bindCheckboxes(checkboxGroupProvider)
-    bindForm?.(checkboxGroupProvider)
+    call(bindForm, checkboxGroupProvider)
 
     return {
       errorMessage,
+      n,
+      classes,
+      call,
       checkAll,
       inverseAll,
       reset,
diff --git a/packages/varlet-ui/src/checkbox/Checkbox.vue b/packages/varlet-ui/src/checkbox/Checkbox.vue
index 9de0076d78e..95a7e6b8317 100644
--- a/packages/varlet-ui/src/checkbox/Checkbox.vue
+++ b/packages/varlet-ui/src/checkbox/Checkbox.vue
@@ -1,30 +1,30 @@
 <template>
-  <div class="var-checkbox__wrap" @click="handleClick">
-    <div class="var-checkbox">
+  <div :class="n('wrap')" @click="handleClick">
+    <div :class="n()">
       <div
-        class="var-checkbox__action"
-        :class="[
-          checked ? 'var-checkbox--checked' : 'var-checkbox--unchecked',
-          errorMessage || checkboxGroupErrorMessage ? 'var-checkbox--error' : null,
-          formDisabled || disabled ? 'var-checkbox--disabled' : null,
-        ]"
+        :class="
+          classes(
+            n('action'),
+            [checked, n('--checked'), n('--unchecked')],
+            [errorMessage || checkboxGroupErrorMessage, n('--error')],
+            [formDisabled || disabled, n('--disabled')]
+          )
+        "
         :style="{ color: checked ? checkedColor : uncheckedColor }"
         v-ripple="{ disabled: formReadonly || readonly || formDisabled || disabled || !ripple }"
       >
         <slot name="checked-icon" v-if="checked">
           <var-icon
-            class="var-checkbox__icon"
+            :class="classes(n('icon'), [withAnimation, n('--with-animation')])"
             name="checkbox-marked"
-            :class="[withAnimation ? 'var-checkbox--with-animation' : null]"
             :size="iconSize"
             var-checkbox-cover
           />
         </slot>
         <slot name="unchecked-icon" v-else>
           <var-icon
-            class="var-checkbox__icon"
+            :class="classes(n('icon'), [withAnimation, n('--with-animation')])"
             name="checkbox-blank-outline"
-            :class="[withAnimation ? 'var-checkbox--with-animation' : null]"
             :size="iconSize"
             var-checkbox-cover
           />
@@ -32,11 +32,13 @@
       </div>
 
       <div
-        class="var-checkbox__text"
-        :class="[
-          errorMessage || checkboxGroupErrorMessage ? 'var-checkbox--error' : null,
-          formDisabled || disabled ? 'var-checkbox--disabled' : null,
-        ]"
+        :class="
+          classes(
+            n('text'),
+            [errorMessage || checkboxGroupErrorMessage, n('--error')],
+            [formDisabled || disabled, n('--disabled')]
+          )
+        "
       >
         <slot />
       </div>
@@ -52,13 +54,14 @@ import VarFormDetails from '../form-details'
 import Ripple from '../ripple'
 import { defineComponent, ref, computed, watch, nextTick } from 'vue'
 import { props } from './props'
-import { useValidation } from '../utils/components'
+import { useValidation, createNamespace, call } from '../utils/components'
 import { useCheckboxGroup } from './provide'
 import { useForm } from '../form/provide'
 import type { Ref, ComputedRef } from 'vue'
 import type { ValidateTriggers } from './props'
 import type { CheckboxProvider } from './provide'
 
+const { n, classes } = createNamespace('checkbox')
 export default defineComponent({
   name: 'VarCheckbox',
   directives: { Ripple },
@@ -94,8 +97,8 @@ export default defineComponent({
 
       const { checkedValue, onChange } = props
 
-      props['onUpdate:modelValue']?.(value.value)
-      onChange?.(value.value)
+      call(props['onUpdate:modelValue'], value.value)
+      call(onChange, value.value)
       validateWithTrigger('onChange')
 
       changedValue === checkedValue ? checkboxGroup?.onChecked(checkedValue) : checkboxGroup?.onUnchecked(checkedValue)
@@ -108,7 +111,7 @@ export default defineComponent({
         return
       }
 
-      onClick?.(e)
+      call(onClick, e)
 
       if (form?.readonly.value || readonly) {
         return
@@ -135,7 +138,7 @@ export default defineComponent({
 
     // expose
     const reset = () => {
-      props['onUpdate:modelValue']?.(props.uncheckedValue)
+      call(props['onUpdate:modelValue'], props.uncheckedValue)
       resetValidation()
     }
 
@@ -172,8 +175,8 @@ export default defineComponent({
       resetWithAnimation,
     }
 
-    bindCheckboxGroup?.(checkboxProvider)
-    bindForm?.(checkboxProvider)
+    call(bindCheckboxGroup, checkboxProvider)
+    call(bindForm, checkboxProvider)
 
     return {
       withAnimation,
@@ -182,6 +185,9 @@ export default defineComponent({
       checkboxGroupErrorMessage: checkboxGroup?.errorMessage,
       formDisabled: form?.disabled,
       formReadonly: form?.readonly,
+      n,
+      classes,
+      call,
       handleClick,
       toggle,
       reset,

From c874378e34d538758a1a4b959767a1ae6f2e75ca Mon Sep 17 00:00:00 2001
From: chenjie <540053866@qq.com>
Date: Mon, 4 Apr 2022 18:46:15 +0800
Subject: [PATCH 5/6] perf(ui/radioGroup): add class and call function

---
 .../varlet-ui/src/radio-group/RadioGroup.vue   | 18 +++++++++++-------
 1 file changed, 11 insertions(+), 7 deletions(-)

diff --git a/packages/varlet-ui/src/radio-group/RadioGroup.vue b/packages/varlet-ui/src/radio-group/RadioGroup.vue
index d6fd6ad0906..184adee149c 100644
--- a/packages/varlet-ui/src/radio-group/RadioGroup.vue
+++ b/packages/varlet-ui/src/radio-group/RadioGroup.vue
@@ -1,6 +1,6 @@
 <template>
-  <div class="var-radio-group__wrap">
-    <div class="var-radio-group" :class="[`var-radio-group--${direction}`]">
+  <div :class="n('wrap')">
+    <div :class="classes(n(), n(`--${direction}`))">
       <slot />
     </div>
 
@@ -12,13 +12,14 @@
 import VarFormDetails from '../form-details'
 import { computed, defineComponent, nextTick, watch } from 'vue'
 import { props } from './props'
-import { useValidation } from '../utils/components'
+import { useValidation, createNamespace, call } from '../utils/components'
 import { useRadios } from './provide'
 import { useForm } from '../form/provide'
 import type { ComputedRef } from 'vue'
 import type { ValidateTriggers } from './props'
 import type { RadioGroupProvider } from './provide'
 
+const { n, classes } = createNamespace('radio-group')
 export default defineComponent({
   name: 'VarRadioGroup',
   components: { VarFormDetails },
@@ -45,8 +46,8 @@ export default defineComponent({
     const syncRadios = () => radios.forEach(({ sync }) => sync(props.modelValue))
 
     const onToggle = (changedValue: any) => {
-      props['onUpdate:modelValue']?.(changedValue)
-      props.onChange?.(changedValue)
+      call(props['onUpdate:modelValue'], changedValue)
+      call(props.onChange, changedValue)
       validateWithTrigger('onChange')
     }
 
@@ -55,7 +56,7 @@ export default defineComponent({
 
     // expose
     const reset = () => {
-      props['onUpdate:modelValue']?.(undefined)
+      call(props['onUpdate:modelValue'], undefined)
       resetValidation()
     }
 
@@ -71,11 +72,14 @@ export default defineComponent({
       errorMessage: radioGroupErrorMessage,
     }
 
-    bindForm?.(radioGroupProvider)
+    call(bindForm, radioGroupProvider)
     bindRadios(radioGroupProvider)
 
     return {
       errorMessage,
+      n,
+      classes,
+      call,
       reset,
       validate,
       resetValidation,

From 7f684afbf381375c80330408e2b894232c731128 Mon Sep 17 00:00:00 2001
From: chenjie <540053866@qq.com>
Date: Tue, 5 Apr 2022 00:15:02 +0800
Subject: [PATCH 6/6] perf(ui/form): delete call

---
 packages/varlet-ui/src/checkbox-group/CheckboxGroup.vue | 1 -
 packages/varlet-ui/src/checkbox/Checkbox.vue            | 1 -
 packages/varlet-ui/src/input/Input.vue                  | 1 -
 packages/varlet-ui/src/radio-group/RadioGroup.vue       | 1 -
 packages/varlet-ui/src/radio/Radio.vue                  | 1 -
 packages/varlet-ui/src/select/Select.vue                | 1 -
 6 files changed, 6 deletions(-)

diff --git a/packages/varlet-ui/src/checkbox-group/CheckboxGroup.vue b/packages/varlet-ui/src/checkbox-group/CheckboxGroup.vue
index e85e3dcc44a..d8fc3bb6f21 100644
--- a/packages/varlet-ui/src/checkbox-group/CheckboxGroup.vue
+++ b/packages/varlet-ui/src/checkbox-group/CheckboxGroup.vue
@@ -132,7 +132,6 @@ export default defineComponent({
       errorMessage,
       n,
       classes,
-      call,
       checkAll,
       inverseAll,
       reset,
diff --git a/packages/varlet-ui/src/checkbox/Checkbox.vue b/packages/varlet-ui/src/checkbox/Checkbox.vue
index 95a7e6b8317..f95902a1538 100644
--- a/packages/varlet-ui/src/checkbox/Checkbox.vue
+++ b/packages/varlet-ui/src/checkbox/Checkbox.vue
@@ -187,7 +187,6 @@ export default defineComponent({
       formReadonly: form?.readonly,
       n,
       classes,
-      call,
       handleClick,
       toggle,
       reset,
diff --git a/packages/varlet-ui/src/input/Input.vue b/packages/varlet-ui/src/input/Input.vue
index eca57c261f7..00570c8d056 100644
--- a/packages/varlet-ui/src/input/Input.vue
+++ b/packages/varlet-ui/src/input/Input.vue
@@ -275,7 +275,6 @@ export default defineComponent({
       formReadonly: form?.readonly,
       n,
       classes,
-      call,
       isEmpty,
       computePlaceholderState,
       handleFocus,
diff --git a/packages/varlet-ui/src/radio-group/RadioGroup.vue b/packages/varlet-ui/src/radio-group/RadioGroup.vue
index 184adee149c..0f46ff4e5a0 100644
--- a/packages/varlet-ui/src/radio-group/RadioGroup.vue
+++ b/packages/varlet-ui/src/radio-group/RadioGroup.vue
@@ -79,7 +79,6 @@ export default defineComponent({
       errorMessage,
       n,
       classes,
-      call,
       reset,
       validate,
       resetValidation,
diff --git a/packages/varlet-ui/src/radio/Radio.vue b/packages/varlet-ui/src/radio/Radio.vue
index eb0ddc868bd..bbb1b35df66 100644
--- a/packages/varlet-ui/src/radio/Radio.vue
+++ b/packages/varlet-ui/src/radio/Radio.vue
@@ -175,7 +175,6 @@ export default defineComponent({
       formReadonly: form?.readonly,
       n,
       classes,
-      call,
       handleClick,
       toggle,
       reset,
diff --git a/packages/varlet-ui/src/select/Select.vue b/packages/varlet-ui/src/select/Select.vue
index 01ffe58f8ad..3366f42d3ea 100644
--- a/packages/varlet-ui/src/select/Select.vue
+++ b/packages/varlet-ui/src/select/Select.vue
@@ -375,7 +375,6 @@ export default defineComponent({
       labels,
       n,
       classes,
-      call,
       computePlaceholderState,
       handleFocus,
       handleBlur,