perf(date-picker): add class

varletjs · Apr 4, 2022 · 7cfd233 · 7cfd233
1 parent dc5b23e
commit 7cfd233
Show file tree

Hide file tree

Showing 8 changed files with 113 additions and 108 deletions.
diff --git a/packages/varlet-ui/src/date-picker/DatePicker.vue b/packages/varlet-ui/src/date-picker/DatePicker.vue
@@ -1,25 +1,17 @@
 <template>
-  <div class="var-date-picker" :class="[shadow ? 'var-elevation--2' : null]">
-    <div class="var-date-picker-title" :style="{ background: headerColor || color }">
-      <div
-        class="var-date-picker-title__year"
-        :class="[isYearPanel ? 'var-date-picker-title__year--active' : null]"
-        @click="clickEl('year')"
-      >
+  <div :class="classes(n(), [shadow, 'var-elevation--2'])">
+    <div :class="n('title')" :style="{ background: headerColor || color }">
+      <div :class="classes(n('title-year'), [isYearPanel, n('title-year--active')])" @click="clickEl('year')">
         <slot name="year" :year="previewYear">
           {{ previewYear }}
         </slot>
       </div>
 
       <div
-        class="var-date-picker-title__date"
-        :class="[
-          !isYearPanel ? 'var-date-picker-title__date--active' : null,
-          range ? 'var-date-picker-title__date--range' : null,
-        ]"
+        :class="classes(n('title-date'), [!isYearPanel, n('title-date--active')], [range, n('title-date--range')])"
         @click="clickEl('date')"
       >
-        <transition :name="multiple ? '' : `var-date-picker${reverse ? '-reverse' : ''}-translatey`">
+        <transition :name="multiple ? '' : `${n()}${reverse ? '-reverse' : ''}-translatey`">
           <div :key="`${chooseYear}${chooseMonth?.index}`" v-if="type === 'month'">
             <slot name="range" :choose="getChoose.chooseRangeMonth" v-if="range">
               {{ getMonthTitle }}
@@ -45,13 +37,8 @@
         </transition>
       </div>
     </div>
-    <div
-      class="var-date-picker-body"
-      @touchstart="handleTouchstart"
-      @touchmove="handleTouchmove"
-      @touchend="handleTouchend"
-    >
-      <transition name="var-date-picker-panel-fade">
+    <div :class="n('body')" @touchstart="handleTouchstart" @touchmove="handleTouchmove" @touchend="handleTouchend">
+      <transition :name="`${n()}-panel-fade`">
         <year-picker-panel
           :component-props="componentProps"
           :preview="previewYear"
@@ -94,10 +81,13 @@ import DayPickerPanel from './src/day-picker-panel.vue'
 import { props, MONTH_LIST, WEEK_HEADER } from './props'
 import { isArray, toNumber } from '../utils/shared'
 import { nextTickFrame } from '../utils/elements'
+import { createNamespace, call } from '../utils/components'
 import { pack } from '../locale'
 import type { Ref, ComputedRef, UnwrapRef, RendererNode } from 'vue'
 import type { MonthDict, Choose, Preview, WeekDict, ComponentProps, TouchDirection } from './props'
 
+const { n, classes } = createNamespace('date-picker')
+
 export default defineComponent({
   name: 'VarDatePicker',
   components: {
@@ -278,8 +268,8 @@ export default defineComponent({
         const isChangeOrder = dayjs(rangeDate.value[0]).isAfter(rangeDate.value[1])
         const date = isChangeOrder ? [rangeDate.value[1], rangeDate.value[0]] : [...rangeDate.value]
 
-        props['onUpdate:modelValue']?.(date)
-        props.onChange?.(date)
+        call(props['onUpdate:modelValue'], date)
+        call(props.onChange, date)
       }
     }
 
@@ -293,8 +283,8 @@ export default defineComponent({
       if (index === -1) formatDates.push(date)
       else formatDates.splice(index, 1)
 
-      props['onUpdate:modelValue']?.(formatDates)
-      props.onChange?.(formatDates)
+      call(props['onUpdate:modelValue'], formatDates)
+      call(props.onChange, formatDates)
     }
 
     const getReverse = (dateType: string, date: MonthDict | number) => {
@@ -320,8 +310,8 @@ export default defineComponent({
       if (range) updateRange(formatDate, 'day')
       else if (multiple) updateMultiple(formatDate, 'day')
       else {
-        updateModelValue?.(formatDate)
-        onChange?.(formatDate)
+        call(updateModelValue, formatDate)
+        call(onChange, formatDate)
       }
     }
 
@@ -335,8 +325,8 @@ export default defineComponent({
         if (range) updateRange(date, 'month')
         else if (multiple) updateMultiple(date, 'month')
         else {
-          updateModelValue?.(date)
-          onChange?.(date)
+          call(updateModelValue, date)
+          call(onChange, date)
         }
       } else {
         previewMonth.value = month
@@ -469,6 +459,8 @@ export default defineComponent({
     watch(getPanelType, resetState)
 
     return {
+      n,
+      classes,
       monthPanelEl,
       dayPanelEl,
       reverse,

diff --git a/packages/varlet-ui/src/date-picker/__tests__/__snapshots__/index.spec.js.snap b/packages/varlet-ui/src/date-picker/__tests__/__snapshots__/index.spec.js.snap
@@ -2,17 +2,17 @@
 
 exports[`test allowedDates prop 1`] = `
 "<div class=\\"var-date-picker\\">
-  <div class=\\"var-date-picker-title\\">
-    <div class=\\"var-date-picker-title__year\\">2021</div>
-    <div class=\\"var-date-picker-title__date var-date-picker-title__date--active\\">
+  <div class=\\"var-date-picker__title\\">
+    <div class=\\"var-date-picker__title-year\\">2021</div>
+    <div class=\\"var-date-picker__title-date var-date-picker__title-date--active\\">
       <transition-stub>
         <div>03-01 星期一</div>
       </transition-stub>
     </div>
   </div>
-  <div class=\\"var-date-picker-body\\">
+  <div class=\\"var-date-picker__body\\">
     <transition-stub>
-      <div class=\\"var-day-picker__panel\\">
+      <div class=\\"var-day-picker\\">
         <div class=\\"var-day-picker__content\\">
           <div class=\\"var-picker-header\\"><button class=\\"var-button var--box var-button--normal var--inline-flex var-button--text-default var-button--text var-button--round\\" style=\\"filter: opacity(0.54);\\">
               <!--v-if-->
@@ -50,17 +50,17 @@ exports[`test allowedDates prop 1`] = `
 
 exports[`test datePicker style and type 1`] = `
 "<div class=\\"var-date-picker var-elevation--2\\">
-  <div class=\\"var-date-picker-title\\" style=\\"background: purple;\\">
-    <div class=\\"var-date-picker-title__year\\">2021</div>
-    <div class=\\"var-date-picker-title__date var-date-picker-title__date--active\\">
+  <div class=\\"var-date-picker__title\\" style=\\"background: purple;\\">
+    <div class=\\"var-date-picker__title-year\\">2021</div>
+    <div class=\\"var-date-picker__title-date var-date-picker__title-date--active\\">
       <transition-stub>
         <div>五月</div>
       </transition-stub>
     </div>
   </div>
-  <div class=\\"var-date-picker-body\\">
+  <div class=\\"var-date-picker__body\\">
     <transition-stub>
-      <div class=\\"var-month-picker__panel\\">
+      <div class=\\"var-month-picker\\">
         <div class=\\"var-month-picker__content\\">
           <div class=\\"var-picker-header\\"><button class=\\"var-button var--box var-button--normal var--inline-flex var-button--text-default var-button--text var-button--round\\" style=\\"filter: opacity(0.54);\\">
               <!--v-if-->
@@ -136,17 +136,17 @@ exports[`test datePicker style and type 1`] = `
 
 exports[`test datePicker style and type 2`] = `
 "<div class=\\"var-date-picker var-elevation--2\\">
-  <div class=\\"var-date-picker-title\\" style=\\"background: purple;\\">
-    <div class=\\"var-date-picker-title__year\\">2021</div>
-    <div class=\\"var-date-picker-title__date var-date-picker-title__date--active\\">
+  <div class=\\"var-date-picker__title\\" style=\\"background: purple;\\">
+    <div class=\\"var-date-picker__title-year\\">2021</div>
+    <div class=\\"var-date-picker__title-date var-date-picker__title-date--active\\">
       <transition-stub>
         <div>05-19 星期三</div>
       </transition-stub>
     </div>
   </div>
-  <div class=\\"var-date-picker-body\\">
+  <div class=\\"var-date-picker__body\\">
     <transition-stub>
-      <div class=\\"var-day-picker__panel\\">
+      <div class=\\"var-day-picker\\">
         <div class=\\"var-day-picker__content\\">
           <div class=\\"var-picker-header\\"><button class=\\"var-button var--box var-button--normal var--inline-flex var-button--text-default var-button--text var-button--round\\" style=\\"filter: opacity(0.54);\\">
               <!--v-if-->
@@ -333,17 +333,17 @@ exports[`test datePicker style and type 2`] = `
 
 exports[`test datePicker style and type test datePicker style and date 1`] = `
 "<div class=\\"var-date-picker var-elevation--2\\">
-  <div class=\\"var-date-picker-title\\" style=\\"background: purple;\\">
-    <div class=\\"var-date-picker-title__year\\">2021</div>
-    <div class=\\"var-date-picker-title__date var-date-picker-title__date--active\\">
+  <div class=\\"var-date-picker__title\\" style=\\"background: purple;\\">
+    <div class=\\"var-date-picker__title-year\\">2021</div>
+    <div class=\\"var-date-picker__title-date var-date-picker__title-date--active\\">
       <transition-stub>
         <div>04-08 星期四</div>
       </transition-stub>
     </div>
   </div>
-  <div class=\\"var-date-picker-body\\">
+  <div class=\\"var-date-picker__body\\">
     <transition-stub>
-      <div class=\\"var-day-picker__panel\\">
+      <div class=\\"var-day-picker\\">
         <div class=\\"var-day-picker__content\\">
           <div class=\\"var-picker-header\\"><button class=\\"var-button var--box var-button--normal var--inline-flex var-button--text-default var-button--text var-button--round\\" style=\\"filter: opacity(0.54);\\">
               <!--v-if-->
@@ -518,17 +518,17 @@ exports[`test datePicker style and type test datePicker style and date 1`] = `
 
 exports[`test datePicker style and type test datePicker style and month 1`] = `
 "<div class=\\"var-date-picker var-elevation--2\\">
-  <div class=\\"var-date-picker-title\\" style=\\"background: purple;\\">
-    <div class=\\"var-date-picker-title__year\\">2021</div>
-    <div class=\\"var-date-picker-title__date var-date-picker-title__date--active\\">
+  <div class=\\"var-date-picker__title\\" style=\\"background: purple;\\">
+    <div class=\\"var-date-picker__title-year\\">2021</div>
+    <div class=\\"var-date-picker__title-date var-date-picker__title-date--active\\">
       <transition-stub>
         <div>四月</div>
       </transition-stub>
     </div>
   </div>
-  <div class=\\"var-date-picker-body\\">
+  <div class=\\"var-date-picker__body\\">
     <transition-stub>
-      <div class=\\"var-month-picker__panel\\">
+      <div class=\\"var-month-picker\\">
         <div class=\\"var-month-picker__content\\">
           <div class=\\"var-picker-header\\"><button class=\\"var-button var--box var-button--normal var--inline-flex var-button--text-default var-button--text var-button--round\\" style=\\"filter: opacity(0.54);\\">
               <!--v-if-->

diff --git a/packages/varlet-ui/src/date-picker/__tests__/index.spec.js b/packages/varlet-ui/src/date-picker/__tests__/index.spec.js
@@ -150,7 +150,7 @@ test('test max and min', async () => {
   await wrapper.find('.var-picker-header__value').trigger('click')
   await delay(200)
 
-  expect(wrapper.find('.var-year-picker__panel').findAll('li').length).toBe(1)
+  expect(wrapper.find('.var-year-picker').findAll('li').length).toBe(1)
 })
 
 test('test datePicker v-model', async () => {
@@ -177,7 +177,7 @@ test('test datePicker v-model', async () => {
 
   await wrapper.find('.var-picker-header__value').trigger('click')
   await delay(200)
-  await wrapper.find('.var-year-picker__panel').find('li').trigger('click')
+  await wrapper.find('.var-year-picker').find('li').trigger('click')
   await delay(200)
   await wrapper.find('.var-month-picker__content').find('ul').find('button').trigger('click')
   expect(wrapper.vm.date).not.toBe('2021-01')
@@ -305,7 +305,7 @@ test('test datePicker touchable prop', async () => {
     template: `<var-date-picker v-model="date" :type="type" />`,
   })
 
-  const pickBodyEl = wrapper.find('.var-date-picker-body')
+  const pickBodyEl = wrapper.find('.var-date-picker__body')
   const headerEl = wrapper.find('.var-picker-header__value')
 
   await triggerDrag(pickBodyEl, 0, 100)

diff --git a/packages/varlet-ui/src/date-picker/date-picker.less b/packages/varlet-ui/src/date-picker/date-picker.less
@@ -92,7 +92,7 @@
     padding: 0;
   }
 
-  &-title {
+  &__title {
     padding: var(--date-picker-title-padding);
     color: var(--date-picker-title-color);
     background: var(--date-picker-title-background);
@@ -101,7 +101,7 @@
     flex-direction: column;
     flex-wrap: wrap;
 
-    &__year {
+    &-year {
       opacity: 0.6;
       cursor: pointer;
       -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
@@ -117,7 +117,7 @@
       }
     }
 
-    &__date {
+    &-date {
       height: var(--date-picker-title-date-height);
       overflow: hidden;
       font-size: var(--date-picker-title-date-font-size);
@@ -141,7 +141,7 @@
     }
   }
 
-  &-body {
+  &__body {
     flex: 1;
     position: relative;
     overflow: auto;
@@ -198,28 +198,26 @@
       color: var(--date-picker-main-color);
     }
 
-    &__button-disabled {
+    &__button--disabled {
       color: var(--color-text-disabled) !important;
       cursor: not-allowed;
     }
   }
 
   .var-year-picker {
-    &__panel {
-      width: 100%;
-      height: 100%;
-      font-weight: var(--year-picker-font-weight);
-      padding: 0;
-      margin: 0;
-      list-style-type: none;
-      overflow: auto;
-      text-align: center;
+    width: 100%;
+    height: 100%;
+    font-weight: var(--year-picker-font-weight);
+    padding: 0;
+    margin: 0;
+    list-style-type: none;
+    overflow: auto;
+    text-align: center;
 
-      li {
-        padding: var(--year-picker-item-padding);
-        cursor: pointer;
-        -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-      }
+    &__item {
+      padding: var(--year-picker-item-padding);
+      cursor: pointer;
+      -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
 
       &--active {
         font-size: var(--year-picker-item-active-font-size);
@@ -261,11 +259,15 @@
       font-size: var(--day-picker-content-item-button-font-size);
     }
 
+    &__button:not(.var-day-picker__button--usable) {
+      cursor: unset;
+    }
+
     &__button[var-date-picker-color-cover='true'] {
       color: var(--date-picker-main-color);
     }
 
-    &__button-disabled {
+    &__button--disabled {
       color: var(--color-text-disabled) !important;
       cursor: not-allowed;
     }