[feature] Add 'right' attribute option

chronotruck · Mar 14, 2019 · 6a31cda · 6a31cda
1 parent 50a88c6
commit 6a31cda
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 5 deletions.
diff --git a/src/App.vue b/src/App.vue
@@ -64,6 +64,7 @@
                 input-size="lg"
                 color="purple"
                 :dark="darkMode"
+                right
               />
             </div>
           </div>
@@ -208,6 +209,7 @@
                 :no-keyboard="demo.options.noKeyboard"
                 :no-value-to-custom-elem="demo.options.noValueToCustomElem"
                 :disabled-weekly="demo.options.disabledWeekly"
+                :right="demo.options.right"
               >
                 <input
                   v-if="demo.options && demo.options.slot && demo.options.slot.type === 'input'"
@@ -243,7 +245,7 @@
         booleanOptions: [
           'noHeader', 'autoClose', 'error', 'dark', 'overlay', 'noWeekendDays', 'noShortcuts',
           'noButton', 'onlyDate', 'range', 'onlyTime', 'inline', 'persistent', 'disabled', 'noButtonNow', 'noValueToCustomElem',
-          'noKeyboard'
+          'noKeyboard', 'right'
         ],
         stringOptions: [
           'id', 'label', 'hint', 'color', 'buttonColor', 'position', 'format', 'formatted', 'outputFormat',
@@ -298,7 +300,7 @@
           {
             id: '3',
             title: 'Date Picker',
-            description: 'Date selector - With large input (input-size="lg") - format: "MM-DD-YYYY" - formatted: "ll"',
+            description: 'Date selector - right position - With large input (input-size="lg") - format: "MM-DD-YYYY" - formatted: "ll"',
             editOption: false,
             initial: '14-01-2019',
             value: '14-01-2019',
@@ -310,7 +312,8 @@
               buttonNowTranslation: 'Maintenant',
               id: 'DatePicker',
               format: 'DD-MM-YYYY',
-              formatted: 'll'
+              formatted: 'll',
+              right: true
             }
           },
           {

diff --git a/src/VueCtkDateTimePicker/_subs/PickersContainer/index.vue b/src/VueCtkDateTimePicker/_subs/PickersContainer/index.vue
@@ -12,6 +12,7 @@
       <div
         :style="[responsivePosition, width]"
         class="datepicker flex flex-direction-column"
+        :class="{ 'right': right }"
       >
         <HeaderPicker
           v-if="!noHeader"
@@ -129,7 +130,8 @@
       noButtonNow: { type: Boolean, default: false },
       firstDayOfWeek: { type: Number, default: Number },
       customShortcuts: { type: Array, default: Array },
-      noKeyboard: { type: Boolean, default: false }
+      noKeyboard: { type: Boolean, default: false },
+      right: { type: Boolean, default: false }
     },
     data () {
       return {
@@ -291,6 +293,7 @@
   .datetimepicker {
     position: absolute;
     z-index: 9;
+    width: 100%;
     &.visible {
       z-index: 999;
     }
@@ -308,6 +311,9 @@
         border-bottom-left-radius: 4px;
         border-bottom-right-radius: 4px;
       }
+      &.right {
+        right: 0;
+      }
     }
     &.is-dark {
       .datepicker, .pickers-container {

diff --git a/src/VueCtkDateTimePicker/index.vue b/src/VueCtkDateTimePicker/index.vue
@@ -58,6 +58,7 @@
       :first-day-of-week="firstDayOfWeek"
       :custom-shortcuts="customShortcuts"
       :no-keyboard="noKeyboard"
+      :right="right"
       @validate="validate"
       @close="toggleDatePicker(false)"
     />
@@ -144,7 +145,8 @@
       firstDayOfWeek: { type: Number, default: null },
       customShortcuts: { type: Array, default: Array },
       noValueToCustomElem: { type: Boolean, default: false },
-      noKeyboard: { type: Boolean, default: false }
+      noKeyboard: { type: Boolean, default: false },
+      right: { type: Boolean, default: false }
     },
     data () {
       return {