fix: move sidebar element to right position

src/date-picker.vue

@@ -43,23 +43,23 @@
       :append-to-body="appendToBody"
       @clickoutside="handleClickOutSide"
     >
-      <div v-if="hasSlot('header')" class="mx-datepicker-header">
+      <div v-if="hasSlot('sidebar') || shortcuts.length" class="mx-datepicker-sidebar">
-        <slot name="header" :value="currentValue" :emit="emitValue"></slot>
+        <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"
+          @click="handleSelectShortcut(v)"
+        >
+          {{ v.text }}
+        </button>
       </div>
-      <div class="mx-datepicker-content-wrapper">
+      <div class="mx-datepicker-content">
-        <div v-if="hasSlot('sidebar') || shortcuts.length" class="mx-datepicker-sidebar">
+        <div v-if="hasSlot('header')" class="mx-datepicker-header">
-          <slot name="sidebar" :value="currentValue" :emit="emitValue"></slot>
+          <slot name="header" :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"
-            @click="handleSelectShortcut(v)"
-          >
-            {{ v.text }}
-          </button>
         </div>
-        <div class="mx-datepicker-content">
+        <div class="mx-datepicker-body">
           <slot name="content" :value="currentValue" :emit="emitValue">
             <component
               :is="currentComponent"
@@ -69,17 +69,17 @@
             ></component>
           </slot>
         </div>
-      </div>
+        <div v-if="hasSlot('footer') || confirm" class="mx-datepicker-footer">
-      <div v-if="hasSlot('footer') || confirm" class="mx-datepicker-footer">
+          <slot name="footer" :value="currentValue" :emit="emitValue"></slot>
-        <slot name="footer" :value="currentValue" :emit="emitValue"></slot>
+          <button
-        <button
+            v-if="confirm"
-          v-if="confirm"
+            type="button"
-          type="button"
+            class="mx-btn mx-datepicker-btn-confirm"
-          class="mx-btn mx-datepicker-btn-confirm"
+            @click="handleConfirmDate"
-          @click="handleConfirmDate"
+          >
-        >
+            {{ confirmText }}
-          {{ confirmText }}
+          </button>
-        </button>
+        </div>
       </div>
     </Popup>
   </div>

src/popup.js

@@ -91,12 +91,15 @@ export default {
   },
   render() {
     if (this.inline) {
-      return <div>{this.$slots.default}</div>;
+      return <div class="mx-datepicker-main">{this.$slots.default}</div>;
     }
     return (
       <transition name="mx-zoom-in-down">
         {this.visible && (
-          <div class="mx-datepicker-popup" style={{ top: this.top, left: this.left }}>
+          <div
+            class="mx-datepicker-main mx-datepicker-popup"
+            style={{ top: this.top, left: this.left }}
+          >
             {this.$slots.default}
           </div>
         )}

src/style/index.scss

@@ -8,8 +8,6 @@
   position: relative;
   display: inline-block;
   width: 210px;
-  color: $default-color;
-  font: 14px/1.5 'Helvetica Neue', Helvetica, Arial, 'Microsoft Yahei', sans-serif;
   svg {
     width: 1em;
     height: 1em;
@@ -29,8 +27,6 @@
 
 .mx-datepicker-inline {
   width: auto;
-  border: 1px solid $border-color;
-  background-color: #fff;
 }
 
 .mx-input-wrapper {
@@ -101,25 +97,20 @@
   }
 }
 
-.mx-datepicker-popup {
+.mx-datepicker-main {
-  color: $default-color;
   font: 14px/1.5 'Helvetica Neue', Helvetica, Arial, 'Microsoft Yahei', sans-serif;
-  position: absolute;
+  color: $default-color;
-  margin-top: 1px;
-  margin-bottom: 1px;
-  border: 1px solid $border-color;
   background-color: #fff;
-  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
+  border: 1px solid $border-color;
-  z-index: 1000;
-}
-
-.mx-datepicker-content-wrapper {
   display: flex;
 }
 
-.mx-datepicker-content {
+.mx-datepicker-popup {
-  position: relative;
+  position: absolute;
-  user-select: none;
+  margin-top: 1px;
+  margin-bottom: 1px;
+  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
+  z-index: 1000;
 }
 
 .mx-datepicker-sidebar {
@@ -130,6 +121,11 @@
   border-right: 1px solid $border-color;
 }
 
+.mx-datepicker-body {
+  position: relative;
+  user-select: none;
+}
+
 .mx-btn-shortcut {
   display: block;
   padding: 0 6px;
@@ -152,6 +148,8 @@
 }
 
 .mx-calendar {
+  box-sizing: border-box;
+  width: 248px;
   padding: 6px 12px;
   & + & {
     border-left: 1px solid $border-color;
@@ -166,17 +164,13 @@
   overflow: hidden;
 }
 
-.mx-btn-icon-left {
+.mx-btn-icon-left,
+.mx-btn-icon-double-left {
   float: left;
 }
-.mx-btn-icon-right {
+.mx-btn-icon-right,
-  float: right;
-}
-.mx-btn-icon-double-left {
-  @extend .mx-btn-icon-left;
-}
 .mx-btn-icon-double-right {
-  @extend .mx-btn-icon-right;
+  float: right;
 }
 
 .mx-calendar-header-label {
@@ -192,7 +186,6 @@
 
 .mx-calendar-content {
   position: relative;
-  width: 224px;
   height: 224px;
   box-sizing: border-box;
   .cell {

src/style/mixins.scss

@@ -1,20 +0,0 @@
-@import './var.scss';
-
-@mixin state {
-  cursor: pointer;
-  &:hover {
-    background-color: #eaf8fe;
-  }
-  &.active {
-    color: #fff;
-    background-color: $primary-color;
-  }
-  &.in-range {
-    background-color: #eaf8fe;
-  }
-  &.disabled {
-    cursor: not-allowed;
-    color: #ccc;
-    background-color: #f3f3f3;
-  }
-}