fix: move sidebar element to right position

Author: mengxiong10

src/date-picker.vue

@@ -43,23 +43,23 @@
       :append-to-body="appendToBody"
       @clickoutside="handleClickOutSide"
     >
-      <div v-if="hasSlot('header')" class="mx-datepicker-header">
-        <slot name="header" :value="currentValue" :emit="emitValue"></slot>
+      <div v-if="hasSlot('sidebar') || shortcuts.length" class="mx-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"
+          @click="handleSelectShortcut(v)"
+        >
+          {{ v.text }}
+        </button>
       </div>
-      <div class="mx-datepicker-content-wrapper">
-        <div v-if="hasSlot('sidebar') || shortcuts.length" class="mx-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"
-            @click="handleSelectShortcut(v)"
-          >
-            {{ v.text }}
-          </button>
+      <div class="mx-datepicker-content">
+        <div v-if="hasSlot('header')" class="mx-datepicker-header">
+          <slot name="header" :value="currentValue" :emit="emitValue"></slot>
         </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">
-        <slot name="footer" :value="currentValue" :emit="emitValue"></slot>
-        <button
-          v-if="confirm"
-          type="button"
-          class="mx-btn mx-datepicker-btn-confirm"
-          @click="handleConfirmDate"
-        >
-          {{ confirmText }}
-        </button>
+        <div v-if="hasSlot('footer') || confirm" class="mx-datepicker-footer">
+          <slot name="footer" :value="currentValue" :emit="emitValue"></slot>
+          <button
+            v-if="confirm"
+            type="button"
+            class="mx-btn mx-datepicker-btn-confirm"
+            @click="handleConfirmDate"
+          >
+            {{ confirmText }}
+          </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,27 +97,22 @@
   }
 }
 
-.mx-datepicker-popup {
-  color: $default-color;
+.mx-datepicker-main {
   font: 14px/1.5 'Helvetica Neue', Helvetica, Arial, 'Microsoft Yahei', sans-serif;
+  color: $default-color;
+  background-color: #fff;
+  border: 1px solid $border-color;
+  display: flex;
+}
+
+.mx-datepicker-popup {
   position: absolute;
   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);
   z-index: 1000;
 }
 
-.mx-datepicker-content-wrapper {
-  display: flex;
-}
-
-.mx-datepicker-content {
-  position: relative;
-  user-select: none;
-}
-
 .mx-datepicker-sidebar {
   box-sizing: border-box;
   width: 100px;
@@ -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 {
-  float: left;
-}
-.mx-btn-icon-right {
-  float: right;
-}
+.mx-btn-icon-left,
 .mx-btn-icon-double-left {
-  @extend .mx-btn-icon-left;
+  float: left;
 }
+.mx-btn-icon-right,
 .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 {