perf(time-picker): add class

varletjs · Apr 4, 2022 · b2f458e · b2f458e
1 parent 95a9f25
commit b2f458e
Show file tree

Hide file tree

Showing 6 changed files with 372 additions and 382 deletions.
diff --git a/packages/varlet-ui/src/rate/Rate.vue b/packages/varlet-ui/src/rate/Rate.vue
@@ -27,7 +27,7 @@ import VarFormDetails from '../form-details'
 import Ripple from '../ripple'
 import { defineComponent, nextTick } from 'vue'
 import { useForm } from '../form/provide'
-import { useValidation, call, createNamespace} from '../utils/components'
+import { useValidation, call, createNamespace } from '../utils/components'
 import { toSizeUnit } from '../utils/elements'
 import { toNumber } from '../utils/shared'
 import { props } from './props'
@@ -102,7 +102,7 @@ export default defineComponent({
         if (event.offsetX <= Math.floor(offsetWidth / 2)) score -= 0.5
       }
 
-      call(props['onUpdate:modelValue'],score)
+      call(props['onUpdate:modelValue'], score)
     }
 
     const validate = () => v(props.rules, toNumber(props.modelValue))

diff --git a/packages/varlet-ui/src/time-picker/TimePicker.vue b/packages/varlet-ui/src/time-picker/TimePicker.vue
@@ -1,58 +1,34 @@
 <template>
-  <div class="var-time-picker" ref="picker" :class="[shadow ? 'var-elevation--2' : null]">
-    <div class="var-time-picker-title" :style="{ background: headerColor || color }">
-      <div class="var-time-picker-title__time">
-        <div
-          class="var-time-picker-title__btn"
-          :class="type === 'hour' ? 'var-time-picker-title__btn--active' : null"
-          @click="checkPanel('hour')"
-        >
+  <div :class="classes(n(), [shadow, 'var-elevation--2'])" ref="picker">
+    <div :class="n('title')" :style="{ background: headerColor || color }">
+      <div :class="n('title-time')">
+        <div :class="classes(n('title-btn'), [type === 'hour', n('title-btn--active')])" @click="checkPanel('hour')">
           {{ time.hour }}
         </div>
         <span>:</span>
         <div
-          class="var-time-picker-title__btn"
-          :class="type === 'minute' ? 'var-time-picker-title__btn--active' : null"
+          :class="classes(n('title-btn'), [type === 'minute', n('title-btn--active')])"
           @click="checkPanel('minute')"
         >
           {{ time.minute }}
         </div>
         <span v-if="useSeconds">:</span>
         <div
           v-if="useSeconds"
-          class="var-time-picker-title__btn"
-          :class="type === 'second' ? 'var-time-picker-title__btn--active' : null"
+          :class="classes(n('title-btn'), [type === 'second', n('title-btn--active')])"
           @click="checkPanel('second')"
         >
           {{ time.second }}
         </div>
       </div>
-      <div class="var-time-picker-title__ampm" v-if="format === 'ampm'">
-        <div
-          class="var-time-picker-title__btn"
-          :class="ampm === 'am' ? 'var-time-picker-title__btn--active' : null"
-          @click="checkAmpm('am')"
-        >
-          AM
-        </div>
-        <div
-          class="var-time-picker-title__btn"
-          :class="ampm === 'pm' ? 'var-time-picker-title__btn--active' : null"
-          @click="checkAmpm('pm')"
-        >
-          PM
-        </div>
+      <div :class="n('title-ampm')" v-if="format === 'ampm'">
+        <div :class="classes(n('title-btn'), [ampm === 'am', n('title-btn--active')])" @click="checkAmpm('am')">AM</div>
+        <div :class="classes(n('title-btn'), [ampm === 'pm', n('title-btn--active')])" @click="checkAmpm('pm')">PM</div>
       </div>
     </div>
-    <div class="var-time-picker-body">
-      <div
-        class="var-time-picker-clock__container"
-        @touchstart="moveHand"
-        @touchmove="moveHand"
-        @touchend="end"
-        ref="container"
-      >
-        <transition name="var-time-picker-panel-fade">
+    <div :class="n('body')">
+      <div :class="n('clock-container')" @touchstart="moveHand" @touchmove="moveHand" @touchend="end" ref="container">
+        <transition :name="`${n()}-panel-fade`">
           <clock
             :key="type"
             ref="inner"
@@ -83,10 +59,13 @@ import dayjs from 'dayjs/esm'
 import Clock from './clock.vue'
 import { props, hoursAmpm, hours24 } from './props'
 import { toNumber } from '../utils/shared'
+import { createNamespace, call } from '../utils/components'
 import { getNumberTime, getIsDisableMinute, getIsDisableSecond } from './utils'
 import type { ComputedRef, Ref, DefineComponent, UnwrapRef } from 'vue'
 import type { Time, AmPm } from './props'
 
+const { n, classes } = createNamespace('time-picker')
+
 export default defineComponent({
   name: 'VarTimePicker',
   components: {
@@ -132,8 +111,8 @@ export default defineComponent({
     })
 
     const update = (newTime: string) => {
-      props['onUpdate:modelValue']?.(newTime)
-      props.onChange?.(newTime)
+      call(props['onUpdate:modelValue'], newTime)
+      call(props.onChange, newTime)
     }
 
     const rad2deg = (rad: number): number => {
@@ -350,6 +329,8 @@ export default defineComponent({
     )
 
     return {
+      n,
+      classes,
       getRad,
       time,
       container,