feat: add prefixClass prop (#401)

mengxiong10 · Dec 17, 2019 · a756753 · a756753
1 parent bb0255f
commit a756753
Show file tree

Hide file tree

Showing 20 changed files with 229 additions and 130 deletions.
diff --git a/src/calendar/calendar-panel.vue b/src/calendar/calendar-panel.vue
@@ -1,54 +1,54 @@
 <template>
   <div
     :class="[
-      'mx-calendar',
-      `mx-calendar-panel-${panel}`,
-      { 'mx-calendar-week-mode': type === 'week' },
+      `${prefixClass}-calendar`,
+      `${prefixClass}-calendar-panel-${panel}`,
+      { [`${prefixClass}-calendar-week-mode`]: type === 'week' },
     ]"
   >
-    <div class="mx-calendar-header">
+    <div :class="`${prefixClass}-calendar-header`">
       <button
         v-show="showIconDoubleArrow"
         type="button"
-        class="mx-btn mx-btn-text mx-btn-icon-double-left"
+        :class="`${prefixClass}-btn ${prefixClass}-btn-text ${prefixClass}-btn-icon-double-left`"
         @click="handleIconDoubleLeftClick"
       >
-        <i class="mx-icon-double-left"></i>
+        <i :class="`${prefixClass}-icon-double-left`"></i>
       </button>
       <button
         v-show="showIconArrow"
         type="button"
-        class="mx-btn mx-btn-text mx-btn-icon-left"
+        :class="`${prefixClass}-btn ${prefixClass}-btn-text ${prefixClass}-btn-icon-left`"
         @click="handleIconLeftClick"
       >
-        <i class="mx-icon-left"></i>
+        <i :class="`${prefixClass}-icon-left`"></i>
       </button>
       <button
         v-show="showIconDoubleArrow"
         type="button"
-        class="mx-btn mx-btn-text mx-btn-icon-double-right"
+        :class="`${prefixClass}-btn ${prefixClass}-btn-text ${prefixClass}-btn-icon-double-right`"
         @click="handleIconDoubleRightClick"
       >
-        <i class="mx-icon-double-right"></i>
+        <i :class="`${prefixClass}-icon-double-right`"></i>
       </button>
       <button
         v-show="showIconArrow"
         type="button"
-        class="mx-btn mx-btn-text mx-btn-icon-right"
+        :class="`${prefixClass}-btn ${prefixClass}-btn-text ${prefixClass}-btn-icon-right`"
         @click="handleIconRightClick"
       >
-        <i class="mx-icon-right"></i>
+        <i :class="`${prefixClass}-icon-right`"></i>
       </button>
-      <span class="mx-calendar-header-label">
+      <span :class="`${prefixClass}-calendar-header-label`">
         <template v-if="panel === 'year'">
           <span>{{ calendarDecade }}</span>
-          <span class="mx-calendar-decade-separator"></span>
+          <span :class="`${prefixClass}-calendar-decade-separator`"></span>
           <span>{{ calendarDecade + 9 }}</span>
         </template>
         <button
           v-else-if="panel === 'month'"
           type="button"
-          class="mx-btn mx-btn-text"
+          :class="`${prefixClass}-btn ${prefixClass}-btn-text`"
           @click="handelPanelChange('year')"
         >
           {{ calendarYear }}
@@ -58,15 +58,17 @@
             v-for="item in dateHeader"
             :key="item.panel"
             type="button"
-            :class="`mx-btn mx-btn-text mx-btn-current-${item.panel}`"
+            :class="
+              `${prefixClass}-btn ${prefixClass}-btn-text ${prefixClass}-btn-current-${item.panel}`
+            "
             @click="handelPanelChange(item.panel)"
           >
             {{ item.label }}
           </button>
         </template>
       </span>
     </div>
-    <div class="mx-calendar-content">
+    <div :class="`${prefixClass}-calendar-content`">
       <table-year
         v-show="panel === 'year'"
         :decade="calendarDecade"
@@ -124,6 +126,9 @@ export default {
     t: {
       default: () => getLocaleFieldValue,
     },
+    prefixClass: {
+      default: 'mx',
+    },
   },
   props: {
     value: {},
@@ -356,7 +361,7 @@ export default {
         const time = v.getTime();
         return time >= start && time <= end;
       });
-      return active ? 'mx-active-week' : '';
+      return active ? `${this.prefixClass}-active-week` : '';
     },
   },
 };

diff --git a/src/calendar/calendar-range.js b/src/calendar/calendar-range.js
@@ -5,6 +5,11 @@ import { getValidDate, isValidDate, isValidRangeDate } from '../util/date';
 export default {
   name: 'CalendarRange',
   components: { CalendarPanel },
+  inject: {
+    prefixClass: {
+      default: 'mx',
+    },
+  },
   props: {
     ...CalendarPanel.props,
   },
@@ -124,6 +129,9 @@ export default {
       };
       return <calendar-panel {...{ props, on }}></calendar-panel>;
     });
-    return <div class="mx-range-wrapper">{calendarRange}</div>;
+
+    const { prefixClass } = this;
+
+    return <div class={`${prefixClass}-range-wrapper`}>{calendarRange}</div>;
   },
 };
diff --git a/src/calendar/table-date.vue b/src/calendar/table-date.vue
@@ -1,14 +1,18 @@
 <template>
-  <table class="mx-table mx-table-date">
+  <table :class="`${prefixClass}-table ${prefixClass}-table-date`">
     <thead>
       <tr>
-        <th v-if="showWeekNumber" class="mx-week-number-header"></th>
+        <th v-if="showWeekNumber" :class="`${prefixClass}-week-number-header`"></th>
         <th v-for="day in days" :key="day">{{ day }}</th>
       </tr>
     </thead>
     <tbody @click="handleCellClick">
-      <tr v-for="(row, i) in dates" :key="i" class="mx-date-row" :class="getRowClasses(row)">
-        <td v-if="showWeekNumber" class="mx-week-number">
+      <tr
+        v-for="(row, i) in dates"
+        :key="i"
+        :class="[`${prefixClass}-date-row`, getRowClasses(row)]"
+      >
+        <td v-if="showWeekNumber" :class="`${prefixClass}-week-number`">
           {{ getWeekNumber(row[0].day) }}
         </td>
         <td
@@ -41,6 +45,9 @@ export default {
     getWeek: {
       default: () => getWeek,
     },
+    prefixClass: {
+      default: 'mx',
+    },
   },
   props: {
     calendarYear: {

diff --git a/src/calendar/table-month.vue b/src/calendar/table-month.vue
@@ -1,5 +1,5 @@
 <template>
-  <table class="mx-table mx-table-month" @click="handleClick">
+  <table :class="`${prefixClass}-table ${prefixClass}-table-month`" @click="handleClick">
     <tr v-for="(row, i) in months" :key="i">
       <td
         v-for="(cell, j) in row"
@@ -24,6 +24,9 @@ export default {
     t: {
       default: () => getLocaleFieldValue,
     },
+    prefixClass: {
+      default: 'mx',
+    },
   },
   props: {
     getCellClasses: {

diff --git a/src/calendar/table-year.vue b/src/calendar/table-year.vue
@@ -1,5 +1,5 @@
 <template>
-  <table class="mx-table mx-table-year" @click="handleClick">
+  <table :class="`${prefixClass}-table ${prefixClass}-table-year`" @click="handleClick">
     <tr v-for="(row, i) in years" :key="i">
       <td
         v-for="(cell, j) in row"
@@ -19,6 +19,11 @@ import { chunk } from '../util/base';
 
 export default {
   name: 'TableYear',
+  inject: {
+    prefixClass: {
+      default: 'mx',
+    },
+  },
   props: {
     decade: Number,
     getCellClasses: {

diff --git a/src/date-picker.vue b/src/date-picker.vue
@@ -1,13 +1,18 @@
 <template>
   <div
     :class="{
-      'mx-datepicker': true,
-      'mx-datepicker-range': range,
-      'mx-datepicker-inline': inline,
+      [`${prefixClass}-datepicker`]: true,
+      [`${prefixClass}-datepicker-range`]: range,
+      [`${prefixClass}-datepicker-inline`]: inline,
       disabled: disabled,
     }"
   >
-    <div v-if="!inline" class="mx-input-wrapper" @mousedown="openPopup" @touchstart="openPopup">
+    <div
+      v-if="!inline"
+      :class="`${prefixClass}-input-wrapper`"
+      @mousedown="openPopup"
+      @touchstart="openPopup"
+    >
       <slot name="input">
         <input
           ref="input"
@@ -23,12 +28,12 @@
           @change="handleInputChange"
         />
       </slot>
-      <i v-if="showClearIcon" class="mx-icon-clear" @mousedown.stop="handleClear">
+      <i v-if="showClearIcon" :class="`${prefixClass}-icon-clear`" @mousedown.stop="handleClear">
         <slot name="icon-clear">
           <icon-close></icon-close>
         </slot>
       </i>
-      <i class="mx-icon-calendar">
+      <i :class="`${prefixClass}-icon-calendar`">
         <slot name="icon-calendar">
           <icon-calendar></icon-calendar>
         </slot>
@@ -43,23 +48,26 @@
       :append-to-body="appendToBody"
       @clickoutside="handleClickOutSide"
     >
-      <div v-if="hasSlot('sidebar') || shortcuts.length" class="mx-datepicker-sidebar">
+      <div
+        v-if="hasSlot('sidebar') || shortcuts.length"
+        :class="`${prefixClass}-datepicker-sidebar`"
+      >
         <slot name="sidebar" :value="currentValue" :emit="emitValue"></slot>
         <button
           v-for="(v, i) in shortcuts"
           :key="i"
           type="button"
-          class="mx-btn mx-btn-text mx-btn-shortcut"
+          :class="`${prefixClass}-btn ${prefixClass}-btn-text ${prefixClass}-btn-shortcut`"
           @click="handleSelectShortcut(v)"
         >
           {{ v.text }}
         </button>
       </div>
-      <div class="mx-datepicker-content">
-        <div v-if="hasSlot('header')" class="mx-datepicker-header">
+      <div :class="`${prefixClass}-datepicker-content`">
+        <div v-if="hasSlot('header')" :class="`${prefixClass}-datepicker-header`">
           <slot name="header" :value="currentValue" :emit="emitValue"></slot>
         </div>
-        <div class="mx-datepicker-body">
+        <div :class="`${prefixClass}-datepicker-body`">
           <slot name="content" :value="currentValue" :emit="emitValue">
             <component
               :is="currentComponent"
@@ -69,12 +77,12 @@
             ></component>
           </slot>
         </div>
-        <div v-if="hasSlot('footer') || confirm" class="mx-datepicker-footer">
+        <div v-if="hasSlot('footer') || confirm" :class="`${prefixClass}-datepicker-footer`">
           <slot name="footer" :value="currentValue" :emit="emitValue"></slot>
           <button
             v-if="confirm"
             type="button"
-            class="mx-btn mx-datepicker-btn-confirm"
+            :class="`${prefixClass}-btn ${prefixClass}-datepicker-btn-confirm`"
             @click="handleConfirmDate"
           >
             {{ confirmText }}
@@ -122,6 +130,7 @@ export default {
     return {
       t: this.getLocaleFieldValue,
       getWeek: this.getWeek,
+      prefixClass: this.prefixClass,
     };
   },
   props: {
@@ -176,8 +185,14 @@ export default {
       type: Boolean,
       default: true,
     },
+    prefixClass: {
+      type: String,
+      default: 'mx',
+    },
     inputClass: {
-      default: 'mx-input',
+      default() {
+        return `${this.prefixClass}-input`;
+      },
     },
     inputAttr: {
       type: Object,

diff --git a/src/datetime/datetime-panel.js b/src/datetime/datetime-panel.js
@@ -5,6 +5,11 @@ import { pick } from '../util/base';
 
 export default {
   name: 'DatetimePanel',
+  inject: {
+    prefixClass: {
+      default: 'mx',
+    },
+  },
   props: {
     ...CalendarPanel.props,
     ...TimePanel.props,
@@ -78,10 +83,13 @@ export default {
         'title-click': this.closeTimePanel,
       },
     };
+
+    const { prefixClass } = this;
+
     return (
       <div>
         <CalendarPanel {...calendarProps} />
-        {this.timeVisible && <TimePanel class="mx-calendar-time" {...timeProps} />}
+        {this.timeVisible && <TimePanel class={`${prefixClass}-calendar-time`} {...timeProps} />}
       </div>
     );
   },

diff --git a/src/datetime/datetime-range.js b/src/datetime/datetime-range.js
@@ -5,6 +5,11 @@ import { isValidRangeDate, assignTime } from '../util/date';
 
 export default {
   name: 'DatetimeRange',
+  inject: {
+    prefixClass: {
+      default: 'mx',
+    },
+  },
   props: {
     ...CalendarRange.props,
     ...TimeRange.props,
@@ -85,10 +90,13 @@ export default {
         'title-click': this.closeTimePanel,
       },
     };
+
+    const { prefixClass } = this;
+
     return (
       <div>
         <CalendarRange {...calendarProps} />
-        {this.timeVisible && <TimeRange class="mx-calendar-time" {...timeProps} />}
+        {this.timeVisible && <TimeRange class={`${prefixClass}-calendar-time`} {...timeProps} />}
       </div>
     );
   },

diff --git a/src/popup.js b/src/popup.js
@@ -3,6 +3,11 @@ import { getPopupElementSize, getRelativePosition, getScrollParent } from './uti
 
 export default {
   name: 'Popup',
+  inject: {
+    prefixClass: {
+      default: 'mx',
+    },
+  },
   props: {
     visible: {
       type: Boolean,
@@ -90,15 +95,17 @@ export default {
     },
   },
   render() {
+    const { prefixClass } = this;
+
     if (this.inline) {
-      return <div class="mx-datepicker-main">{this.$slots.default}</div>;
+      return <div class={`${prefixClass}-datepicker-main`}>{this.$slots.default}</div>;
     }
     return (
-      <transition name="mx-zoom-in-down">
+      <transition name={`${prefixClass}-zoom-in-down`}>
         {this.visible && (
           <div
-            class="mx-datepicker-main mx-datepicker-popup"
-            style={{ top: this.top, left: this.left }}
+            class={`${prefixClass}-datepicker-main ${prefixClass}-datepicker-popup`}
+            style={{ top: this.top, left: this.left, position: 'absolute' }}
           >
             {this.$slots.default}
           </div>