🚀 [Release] { 1.3.2 } Improvements (IE10, ShortCuts, Responsive, Rang…

…e Mode & Disabled Dates) (#32) * 🎨 Fix Internet Explorer 10 visual quirks (#31) * 💊 {fix} Shortcuts : exclude today in last days filters (#40) * 🔥 [feature] Add support for shortcuts translations config (#37) * 🔥 [feature] Add support for shortcuts translations config * 📘 Update ReadME for shortcuts-translations * minor correction * minor correction * Remove useless font import * 💄 [Improvements] Responsive mobile (#39) * 💄 Improvements responsive mobile * Show component in full window on mobile * Add missing css * 🏗️ Build * 🏗️ Build * improve responsive * Resolve issue with body scroll * [fix] Disabled dates on range mode (#47) * 🏗️ Add Build for 1.3.2
chronotruck · Nov 6, 2018 · 8e189d0 · 8e189d0
1 parent e292dc2
commit 8e189d0
Show file tree

Hide file tree

Showing 32 changed files with 195 additions and 115 deletions.
diff --git a/README.md b/README.md
@@ -81,6 +81,7 @@ Vue.component('vue-ctk-date-time-picker', VueCtkDateTimePicker);
 | disabled-dates***** | Boolean | no | [] |
 | range-mode | Boolean | no | false |
 | dark | Boolean | no | false |
+| shortcuts-translation****** | Object | no | - |
 
 *hint : Is a text that replaces the label/placeholder
 
@@ -92,6 +93,18 @@ Vue.component('vue-ctk-date-time-picker', VueCtkDateTimePicker);
 
 *****Disabled-Dates is an Array of dates in 'YYYY-MM-DD' format (ex: `['2018-04-03', '2018-04-07', '2018-04-09']`)
 
+******shortcuts-translation : Must be an Object like that 
+``` 
+{
+  "this_week": "This week",
+  "last_7_days": "Last 7 days",
+  "last_30_days": "Last 30 days",
+  "this_month": "This month",
+  "last_month": "Last month",
+  "this_year": "This year",
+  "last_year": "Last year"
+}
+```
 
 ## Contribution
 

diff --git a/demo/index.html b/demo/index.html
@@ -1 +1 @@
-<!DOCTYPE html><html lang=en><head><meta charset=utf-8><meta name=viewport content="width=device-width,initial-scale=1"><title>vue-ctk-date-time-picker</title><link rel=stylesheet href=./assets/main.css><link href=./static/css/app.82ec24b8a763f7789a8bb63122344983.css rel=stylesheet></head><body><div id=app></div><script src=/build/build.js></script><script type=text/javascript src=./static/js/manifest.3ad1d5771e9b13dbdad2.js></script><script type=text/javascript src=./static/js/vendor.1eb7121699eee7ac0a43.js></script><script type=text/javascript src=./static/js/app.12e502addb1fc36b12c2.js></script></body></html>
+<!DOCTYPE html><html lang=en><head><meta charset=UTF-8><meta name=viewport content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=0"><meta http-equiv=X-UA-Compatible content="ie=edge"><title>vue-ctk-date-time-picker</title><link rel=stylesheet href=./assets/main.css><link href=./static/css/app.c2c0ebcafc67a1923d156c2a211f1ffa.css rel=stylesheet></head><body><div id=app></div><script src=/build/build.js></script><script type=text/javascript src=./static/js/manifest.3ad1d5771e9b13dbdad2.js></script><script type=text/javascript src=./static/js/vendor.1eb7121699eee7ac0a43.js></script><script type=text/javascript src=./static/js/app.2e9fdd2775161aa76725.js></script></body></html>
diff --git a/demo/static/css/app.82ec24b8a763f7789a8bb63122344983.css b/demo/static/css/app.82ec24b8a763f7789a8bb63122344983.css
diff --git a/demo/static/css/app.82ec24b8a763f7789a8bb63122344983.css.map b/demo/static/css/app.82ec24b8a763f7789a8bb63122344983.css.map
diff --git a/demo/static/css/app.c2c0ebcafc67a1923d156c2a211f1ffa.css b/demo/static/css/app.c2c0ebcafc67a1923d156c2a211f1ffa.css
diff --git a/demo/static/css/app.c2c0ebcafc67a1923d156c2a211f1ffa.css.map b/demo/static/css/app.c2c0ebcafc67a1923d156c2a211f1ffa.css.map
diff --git a/demo/static/js/app.12e502addb1fc36b12c2.js b/demo/static/js/app.12e502addb1fc36b12c2.js
diff --git a/demo/static/js/app.12e502addb1fc36b12c2.js.map b/demo/static/js/app.12e502addb1fc36b12c2.js.map
diff --git a/demo/static/js/app.2e9fdd2775161aa76725.js b/demo/static/js/app.2e9fdd2775161aa76725.js
diff --git a/demo/static/js/app.2e9fdd2775161aa76725.js.map b/demo/static/js/app.2e9fdd2775161aa76725.js.map
diff --git a/demo/static/js/manifest.3ad1d5771e9b13dbdad2.js.map b/demo/static/js/manifest.3ad1d5771e9b13dbdad2.js.map
diff --git a/dist/umd/vue-ctk-date-time-picker.min.css b/dist/umd/vue-ctk-date-time-picker.min.css
diff --git a/dist/umd/vue-ctk-date-time-picker.min.css.map b/dist/umd/vue-ctk-date-time-picker.min.css.map
diff --git a/dist/umd/vue-ctk-date-time-picker.min.js b/dist/umd/vue-ctk-date-time-picker.min.js
diff --git a/dist/umd/vue-ctk-date-time-picker.min.js.map b/dist/umd/vue-ctk-date-time-picker.min.js.map
diff --git a/dist/vue-ctk-date-time-picker.min.css b/dist/vue-ctk-date-time-picker.min.css
diff --git a/dist/vue-ctk-date-time-picker.min.css.map b/dist/vue-ctk-date-time-picker.min.css.map
diff --git a/dist/vue-ctk-date-time-picker.min.js b/dist/vue-ctk-date-time-picker.min.js
diff --git a/dist/vue-ctk-date-time-picker.min.js.map b/dist/vue-ctk-date-time-picker.min.js.map
diff --git a/index.html b/index.html
@@ -1,8 +1,9 @@
 <!DOCTYPE html>
 <html lang="en">
   <head>
-    <meta charset="utf-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
     <title>vue-ctk-date-time-picker</title>
     <link rel="stylesheet" href="./assets/main.css">
   </head>

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "vue-ctk-date-time-picker",
-  "version": "1.3.1",
+  "version": "1.3.2",
   "description": "A vue component for select date & time (by Chronotruck)",
   "author": "Louis Mazel <[email protected]>",
   "main": "dist/vue-ctk-date-time-picker.min.js",

diff --git a/src/App.vue b/src/App.vue
@@ -64,10 +64,11 @@
             <ctk-date-time-picker
               v-model="rangeValues"
               :dark="darkMode"
+              :shortcuts-translation="shortcutsTranslation"
               range-mode
               overlay-background
-              color="purple"
               enable-button-validate
+              color="purple"
               format="YYYY-MM-DD"
               formatted="ddd D MMM YYYY"
               label="Select range"
@@ -201,7 +202,7 @@
             <ctk-date-time-picker
               v-model="value"
               :dark="darkMode"
-              :disabled-dates="['2018-04-03', '2018-04-07', '2018-04-09', '2018-04-11', '2018-04-13', '2018-04-15', '2018-04-17', '2018-04-19']"
+              :disabled-dates="disabledDates"
               label="Choose date time"
               no-weekends-days
               inline
@@ -277,7 +278,14 @@
         locale: 'fr',
         minDate: '2018-04-03',
         maxDate: '2018-04-12',
-        darkMode: false
+        darkMode: false,
+        shortcutsTranslation: {
+          'this_week': 'Cette semaine',
+          'last_30_days': '30 derniers jours',
+          'last_month': 'Mois précédent',
+          'last_year': 'L\'année dernière'
+        },
+        disabledDates: ['2018-04-03', '2018-04-07', '2018-04-09', '2018-04-11', '2018-04-13', '2018-04-15', '2018-04-17', '2018-04-19']
       }
     }
   }

diff --git a/src/vue-ctk-date-time-picker/_subs/CtkDatePickerAgenda.vue b/src/vue-ctk-date-time-picker/_subs/CtkDatePickerAgenda.vue
@@ -11,7 +11,7 @@
     >
       <div
         :style="position"
-        class="datepicker">
+        class="datepicker flex flex-direction-column">
         <div
           v-if="withoutHeader"
           :style="bgStyle"
@@ -70,10 +70,8 @@
               </transition-group>
             </div>
           </div>
-
         </div>
         <div class="datetimepicker-container flex">
-
           <ctk-date-picker
             v-if="!disableDate"
             :inline="inline"
@@ -107,8 +105,9 @@
 
         </div>
         <ctk-button-validate
-          v-if="enableButtonValidate && !inline && !autoClose"
+          v-show="enableButtonValidate && !inline && !autoClose"
           :dark="dark"
+          class="button-validate flex-fixed"
           @validate="validate"
         />
       </div>
@@ -293,7 +292,7 @@
       }
     }
     &.is-dark {
-      .datetimepicker-container {
+      .datepicker, .datetimepicker-container {
         background: #424242;
       }
     }
@@ -313,9 +312,10 @@
       -webkit-box-shadow: none;
       width: 100%;
       max-width: 100%;
+      background-color: white;
     }
   }
-  @media screen and (max-width: 412px) {
+  @media screen and (max-width: 415px) {
     .datetimepicker-container {
       -webkit-flex-direction: column;
       -ms-flex-direction: column;
@@ -331,12 +331,14 @@
       right: 0;
       left: 0;
       .datepicker {
-        top: 50px !important;
-        bottom: unset !important;
-        left: 5%;
-        width: 90%;
+        bottom: 0 !important;
+        top: 0 !important;
+        left: 0 !important;
+        right: 0 !important;
+        width: 100%;
         max-width: inherit;
         position: fixed;
+        height: 100%;
         margin: 0 !important;
       }
       .datepicker-header {
Original file line number	Diff line number	Diff line change
		@@ -1 +1 @@
		<!DOCTYPE html><html lang=en><head><meta charset=utf-8><meta name=viewport content="width=device-width,initial-scale=1"><title>vue-ctk-date-time-picker</title><link rel=stylesheet href=./assets/main.css><link href=./static/css/app.82ec24b8a763f7789a8bb63122344983.css rel=stylesheet></head><body><div id=app></div><script src=/build/build.js></script><script type=text/javascript src=./static/js/manifest.3ad1d5771e9b13dbdad2.js></script><script type=text/javascript src=./static/js/vendor.1eb7121699eee7ac0a43.js></script><script type=text/javascript src=./static/js/app.12e502addb1fc36b12c2.js></script></body></html>
		<!DOCTYPE html><html lang=en><head><meta charset=UTF-8><meta name=viewport content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=0"><meta http-equiv=X-UA-Compatible content="ie=edge"><title>vue-ctk-date-time-picker</title><link rel=stylesheet href=./assets/main.css><link href=./static/css/app.c2c0ebcafc67a1923d156c2a211f1ffa.css rel=stylesheet></head><body><div id=app></div><script src=/build/build.js></script><script type=text/javascript src=./static/js/manifest.3ad1d5771e9b13dbdad2.js></script><script type=text/javascript src=./static/js/vendor.1eb7121699eee7ac0a43.js></script><script type=text/javascript src=./static/js/app.2e9fdd2775161aa76725.js></script></body></html>