toggle-components-library 1.36.2 → 1.36.3-beta.1

package/package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "toggle-components-library",
-  "version": "1.36.2",
+  "version": "1.36.3-beta.1",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
@@ -3957,16 +3957,6 @@
             "@types/node": "*"
           }
         },
-        "ansi-styles": {
-          "version": "4.3.0",
-          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
-          "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "color-convert": "^2.0.1"
-          }
-        },
         "array-union": {
           "version": "1.0.2",
           "resolved": "https://registry.npmjs.org/array-union/-/array-union-1.0.2.tgz",
@@ -4005,34 +3995,6 @@
             }
           }
         },
-        "chalk": {
-          "version": "4.1.2",
-          "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
-          "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "ansi-styles": "^4.1.0",
-            "supports-color": "^7.1.0"
-          }
-        },
-        "color-convert": {
-          "version": "2.0.1",
-          "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
-          "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "color-name": "~1.1.4"
-          }
-        },
-        "color-name": {
-          "version": "1.1.4",
-          "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
-          "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
-          "dev": true,
-          "optional": true
-        },
         "dir-glob": {
           "version": "2.2.2",
           "resolved": "https://registry.npmjs.org/dir-glob/-/dir-glob-2.2.2.tgz",
@@ -4116,13 +4078,6 @@
             "slash": "^2.0.0"
           }
         },
-        "has-flag": {
-          "version": "4.0.0",
-          "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
-          "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
-          "dev": true,
-          "optional": true
-        },
         "html-webpack-plugin": {
           "version": "3.2.0",
           "resolved": "https://registry.npmjs.org/html-webpack-plugin/-/html-webpack-plugin-3.2.0.tgz",
@@ -4312,16 +4267,6 @@
           "integrity": "sha512-ZYKh3Wh2z1PpEXWr0MpSBZ0V6mZHAQfYevttO11c51CaWjGTaadiKZ+wVt1PbMlDV5qhMFslpZCemhwOK7C89A==",
           "dev": true
         },
-        "supports-color": {
-          "version": "7.2.0",
-          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
-          "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "has-flag": "^4.0.0"
-          }
-        },
         "terser-webpack-plugin": {
           "version": "1.4.5",
           "resolved": "https://registry.npmjs.org/terser-webpack-plugin/-/terser-webpack-plugin-1.4.5.tgz",
@@ -4378,39 +4323,6 @@
             "mime": "^2.4.4",
             "schema-utils": "^2.5.0"
           }
-        },
-        "vue-loader-v16": {
-          "version": "npm:vue-loader@16.8.3",
-          "resolved": "https://registry.npmjs.org/vue-loader/-/vue-loader-16.8.3.tgz",
-          "integrity": "sha512-7vKN45IxsKxe5GcVCbc2qFU5aWzyiLrYJyUuMz4BQLKctCj/fmCa0w6fGiiQ2cLFetNcek1ppGJQDCup0c1hpA==",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "chalk": "^4.1.0",
-            "hash-sum": "^2.0.0",
-            "loader-utils": "^2.0.0"
-          },
-          "dependencies": {
-            "json5": {
-              "version": "2.2.3",
-              "resolved": "https://registry.npmjs.org/json5/-/json5-2.2.3.tgz",
-              "integrity": "sha512-XmOWe7eyHYH14cLdVPoyg+GOH3rYX++KpzrylJwSW98t3Nk+U8XOl8FWKOgwtzdb8lXGf6zYwDUzeHMWfxasyg==",
-              "dev": true,
-              "optional": true
-            },
-            "loader-utils": {
-              "version": "2.0.4",
-              "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-2.0.4.tgz",
-              "integrity": "sha512-xXqpXoINfFhgua9xiqD8fPFHgkoq1mmmpE92WlDbm9rNRd/EbRb+Gqf908T2DMfuHjjJlksiK2RbHVOdD/MqSw==",
-              "dev": true,
-              "optional": true,
-              "requires": {
-                "big.js": "^5.2.2",
-                "emojis-list": "^3.0.0",
-                "json5": "^2.1.2"
-              }
-            }
-          }
         }
       }
     },
@@ -7706,6 +7618,11 @@
       "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-1.30.1.tgz",
       "integrity": "sha512-hBSVCvSmWC+QypYObzwGOd9wqdDpOt+0wl0KbU+R+uuZBS1jN8VsD1ss3irQDknRj5NvxiTF6oj/nDRnN/UQNw=="
     },
+    "date-format-parse": {
+      "version": "0.2.7",
+      "resolved": "https://registry.npmjs.org/date-format-parse/-/date-format-parse-0.2.7.tgz",
+      "integrity": "sha512-/+lyMUKoRogMuTeOVii6lUwjbVlesN9YRYLzZT/g3TEZ3uD9QnpjResujeEqUW+OSNbT7T1+SYdyEkTcRv+KDQ=="
+    },
     "de-indent": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/de-indent/-/de-indent-1.0.2.tgz",
@@ -18670,6 +18587,75 @@
         }
       }
     },
+    "vue-loader-v16": {
+      "version": "npm:vue-loader@16.8.3",
+      "resolved": "https://registry.npmjs.org/vue-loader/-/vue-loader-16.8.3.tgz",
+      "integrity": "sha512-7vKN45IxsKxe5GcVCbc2qFU5aWzyiLrYJyUuMz4BQLKctCj/fmCa0w6fGiiQ2cLFetNcek1ppGJQDCup0c1hpA==",
+      "dev": true,
+      "optional": true,
+      "requires": {
+        "chalk": "^4.1.0",
+        "hash-sum": "^2.0.0",
+        "loader-utils": "^2.0.0"
+      },
+      "dependencies": {
+        "ansi-styles": {
+          "version": "4.3.0",
+          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+          "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "color-convert": "^2.0.1"
+          }
+        },
+        "chalk": {
+          "version": "4.1.2",
+          "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
+          "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "ansi-styles": "^4.1.0",
+            "supports-color": "^7.1.0"
+          }
+        },
+        "color-convert": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+          "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "color-name": "~1.1.4"
+          }
+        },
+        "color-name": {
+          "version": "1.1.4",
+          "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+          "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
+          "dev": true,
+          "optional": true
+        },
+        "has-flag": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+          "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+          "dev": true,
+          "optional": true
+        },
+        "supports-color": {
+          "version": "7.2.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
+          "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "has-flag": "^4.0.0"
+          }
+        }
+      }
+    },
     "vue-moment": {
       "version": "4.1.0",
       "resolved": "https://registry.npmjs.org/vue-moment/-/vue-moment-4.1.0.tgz",
@@ -18742,6 +18728,14 @@
       "integrity": "sha512-4gDntzrifFnCEvyoO8PqyJDmguXgVPxKiIxrBKjIowvL9l+N66196+72XVYR8BBf1Uv1Fgt3bGevJ+sEmxfZzw==",
       "dev": true
     },
+    "vue2-datepicker": {
+      "version": "3.11.1",
+      "resolved": "https://registry.npmjs.org/vue2-datepicker/-/vue2-datepicker-3.11.1.tgz",
+      "integrity": "sha512-6PU/+pnp2mgZAfnSXmbdwj9516XsEvTiw61Q5SNrvvdy8W/FCxk1GAe9UZn/m9YfS5A47yK6XkcjMHbp7aFApA==",
+      "requires": {
+        "date-format-parse": "^0.2.7"
+      }
+    },
     "vue2-dropzone": {
       "version": "3.6.0",
       "resolved": "https://registry.npmjs.org/vue2-dropzone/-/vue2-dropzone-3.6.0.tgz",

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "toggle-components-library",
-    "version": "1.36.2",
+    "version": "1.36.3-beta.1",
     "private": false,
     "scripts": {
         "serve": "vue-cli-service serve",
@@ -38,6 +38,7 @@
         "vue-moment": "^4.1.0",
         "vue-multiselect": "^2.0.8",
         "vue-router": "^3.6.4",
+        "vue2-datepicker": "^3.11.1",
         "vue2-dropzone": "^3.6.0",
         "vuedraggable": "^2.24.3",
         "webfontloader": "^1.6.28"

package/src/components/forms/ToggleDatePicker.vue

@@ -1,167 +1,258 @@
 <template>
 
-<div class="toggle-date-container" :class="['datepicker-trigger',{'toggle-input-is-invalid':isInvalid }]">
-
-
-        <label class="toggle-input-label">{{label}}</label>
-
-        <div class="toggle-date-input-container">
-            <div class="toggle-date-input-calendar-icon">
-                <input type="text" class="toggle-input"  :name="name" ref="date-input" :id="'toggle-date-input'+_uid" :value="date"  v-on:keypress="$event.preventDefault()">
-            </div>
-            <button type="button" class="toggle-clear" v-on:click="clearDate" v-if="displayValue"></button>
-        </div>
-
-        <AirbnbStyleDatepicker
-            :trigger-element-id="'toggle-date-input'+_uid"
-            :trigger="datePickerOpen"
-            :mode="'single'"
-            :date-one="displayValue"
-            @date-one-selected="val => { displayValue = val}"
-            @closed="toggleDatePickerState(false)"
-            @cancelled="toggleDatePickerState(false)"
-            :monthsToShow="1"
-            :showShortcutsMenuTrigger="false"
-        />
-        <label
-            class="toggle-input-label-error" 
-            v-if="isInvalid"
-            :for="name ? name : 'ToggleInputText' "
-        >
-            {{ errorMessage }}
-        </label>
+  <div class="toggle-date-container" :class="[{'visible': show}, 'datepicker-trigger',{'toggle-input-is-invalid':isInvalid }, { 'toggle-input-is-disabled': disabled }]">
 
+    <label class="toggle-input-label">{{label}}</label>
+
+    <div :class="['toggle-date-input-container', 'toggle-date-input-container-' + size, {'toggle-date-input-disabled': disabled} ]">
+      <date-picker v-model="inputVal" prefix-class="toggle-mxdatepicker" :formatter="momentFormat" :range="range" :type="type" :disabled="disabled">
+      </date-picker>
     </div>
+
+    <label
+        class="toggle-input-label-error"
+        v-if="isInvalid"
+        :for="name ? name : 'ToggleInputText' "
+    >
+      {{ errorMessage }}
+    </label>
+
+  </div>
 </template>
 
 <script>
 
-    import Vue from "vue";
-    import { mixins } from '../mixins/mixins'
-    import 'vue-airbnb-style-datepicker/dist/vue-airbnb-style-datepicker.min.css'
-    import AirbnbStyleDatepicker from 'vue-airbnb-style-datepicker';
-    import variables from '../../sass/includes/_as_variables.scss';
-  
-    Vue.use(AirbnbStyleDatepicker, {
-        colors: {
-            selected     : variables.toggleblue,
-            inRange      : variables.togglelightblue,
-            selectedText : variables.togglewhite,
-            text         : variables.toggleinputcolour,
-            inRangeBorder: variables.togglewhite,
-            disabled     : variables.togglewhite,
-        },
-        texts: {
-            apply: 'Done'
-        },
-    });
+import { mixins } from '../mixins/mixins'
+import moment from 'moment';
+import DatePicker from 'vue2-datepicker';
 
 export default {
-    mixins:[mixins],
-    components:{},
-    props: {
-        value: {
-            type: [Boolean,Date]
-        },
-        
-        name: {
-            type: String,
-            default: "ToggleInputText"
-        },
-        label: {
-            type: String,
-            required: false
-        },
-        placeholder: {
-            type: String,
-            required: false
-        },
-        autocomplete: {
-            type: Boolean,
-            default: true
-        },
-        size: {
-            type: String,
-            validator: function (value) {
-                return ['extra-small', 'small', 'medium', 'large', 'full'].indexOf(value) !== -1
-            }
-        },
-        required: {
-            type: Boolean,
-            default: false
-        },
-        isInvalid: {
-            type: Boolean,
-            default: false
-        },
-        errorMessage: {
-            type: String,
-            required: false
-        },
-        maxLength:{
-            type: Number,
-            required:false
-        }
+  mixins:[mixins],
+  components:{
+    DatePicker
+  },
+  props: {
+    set_value: {
+      type: [Boolean,Date,Object]
     },
-
-    created : function(){
+    value: {},
+    // datepicker mode, see: https://www.npmjs.com/package/vue2-datepicker#props
+    type: {
+      type: String,
+      validator: function (value) {
+        return ['date', 'datetime', 'year', 'month', 'time', 'week'].indexOf(value) !== -1
+      },
+      default: "date"
     },
-    data : function(){
-        return {
-            datePickerOpen: false,
-        };
+    // singular date or range between 2 dates
+    range: {
+      type: Boolean,
+      default: false
     },
-    watch :{
-
-        datePickerOpen(newVal){
-            let state = newVal ? 'open' : 'closed';
-            this.$emit('state', state);
-        }
-       
+    name: {
+      type: String,
+      default: "ToggleInputText"
     },
-    computed: {
-        date() {
-            return this.dateRangeView(this.displayValue)
-        },
-
-        // plugin only accepts MM/DD/YYYY, so change this so that it excepts and outputs JS dates
-        displayValue: {
-            get: function() {
-                return this.formatDate(this.value)
-            },
-            set: function(modifiedValue) {
-                if(modifiedValue){
-                    modifiedValue = new Date(new Date(modifiedValue+' 00:00:00').toISOString());
-                }
-                else modifiedValue = false;
-                this.$emit('input', modifiedValue);
-            }
-        }
+    label: {
+      type: String,
+      required: false
     },
-    methods: {
-        
-        clearDate()
-        {
-            this.displayValue = '';
-        },
+    placeholder: {
+      type: String,
+      required: false
+    },
+    autocomplete: {
+      type: Boolean,
+      default: true
+    },
+    size: {
+      type: String,
+      validator: function (value) {
+        return ['small', 'medium'].indexOf(value) !== -1
+      },
+      default: 'medium'
+    },
+    displayFormat: {
+        type: String,
+        default: 'DD/MM/Y'
+    },
+    required: {
+      type: Boolean,
+      default: false
+    },
+    isInvalid: {
+      type: Boolean,
+      default: false
+    },
+    errorMessage: {
+      type: String,
+      required: false
+    },
+    maxLength:{
+      type: Number,
+      required:false
+    },
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+    // in toggle-table context, if search bar height expand transition has finished
+    searchIsOpen: {
+      type: Boolean,
+      required: false,
+      default: null
+    }
+  },
+  data : function(){
+    return {
+      show: false,
 
-        toggleDatePickerState(state){
-            this.$nextTick( () => {
-                if(typeof state === 'boolean')
-                    this.datePickerOpen = state;
-                else this.datePickerOpen = !this.datePickerOpen;
-            });
+      momentFormat: {
+        //[optional] Date to String
+        stringify: (date) => {
+          return date ? moment(date).format(this.displayFormat) : ''
         },
+        //[optional]  String to Date
+        parse: (value) => {
+          return value ? moment(value, this.displayFormat).toDate() : null
+        }
+      }
+    };
+  },
+  created : function(){
+    // in table mode, has search bar expand transition finished?
+    if(this.searchIsOpen === null || this.searchIsOpen){
+      this.show = true;
+    }
+
+  },
+  watch :{
+    // search bar expand transition / if in table context
+    searchIsOpen(new_value){
+      if(new_value){
+        this.show = true;
+      }
     }
+  },
+  computed: {
+
+    inputVal: {
+      get: function (){
+        return this.convertRangeObject(this.value);
+      },
+      set: function (value){
+        this.$emit('input', this.convertRangeObject(value));
+      }
+    },
+
+  },
+  methods: {
+    // convert singular date to range. Plugin uses array with 2 values / parents in Toggle dash expect object with start & end keys
+    convertRangeObject(input)
+    {
+      if(!this.range){
+        return input
+      }
+      return Array.isArray(input) ? {
+        start: input[0],
+        end: input[1]
+      } : [
+        input.start,
+        input.end
+      ];
+    },
+  }
 }
 
 
 </script>
 
+<style scoped lang="scss">
+.toggle-date-container {
+  display: none;
+  &.visible {
+    display: block;
+  }
+}
+</style>
+
 <style lang="scss">
+$namespace: 'toggle-mxdatepicker';
+
+@import '~vue2-datepicker/scss/index.scss';
 
-   
 
+.toggle-mxdatepicker-datepicker, .toggle-mxdatepicker-datepicker-range {
+  width: 100%;
+}
+.toggle-mxdatepicker-input {
+  padding: 0.5rem 3.5rem 0.5rem 1rem;
+  background-color: #F4F6F7 !important;
+  height: 2.8rem;
+  width: 100%;
+  box-shadow: none;
+  border: 0;
+  color: #354b64 !important;
+  font-weight: bold !important;
+  font-size: 1.2rem !important;
+}
+
+i.toggle-mxdatepicker-icon-clear {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 1.5rem;
+  height: 1.5rem;
+  &:after{
+    cursor: pointer;
+    content: url('../../assets/icons/delete.svg');
+    width: 1.5rem;
+    height: 1.5rem;
+    position: absolute;
+    pointer-events: none;
+    z-index: 2;
+  }
+}
+
+i.toggle-mxdatepicker-icon-calendar {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 1.5rem;
+  height: 1.5rem;
+  &:after{
+    cursor: pointer;
+    content: url("../../assets/icons/calendar.svg");
+    width: 1.5rem;
+    height: 1.5rem;
+    position: absolute;
+    pointer-events: none;
+    z-index: 2;
+  }
+}
+
+.toggle-date-input-container-small {
+  .toggle-mxdatepicker-input {
+    background-color: transparent;
+    margin-top: 11px;
+    padding: 1px 1.65rem 1px 3px;
+    font-size: 0.9rem !important;
+    height: 1.5rem;
+  }
+  i.toggle-mxdatepicker-icon-calendar, i.toggle-mxdatepicker-icon-clear {
+    margin-top: 6px;
+    width: 1em;
+    height: 1em;
+    &:after{
+      width: 1rem;
+      height: 1rem;
+    }
+  }
+}
+
+.toggle-mxdatepicker-calendar-content {
+  height: auto;
+}
 </style>
 
 

package/src/index.js

@@ -4,7 +4,6 @@ import ToggleInputText from "./components/forms/ToggleInputText.vue";
 import ToggleInputEditableText from "./components/forms/ToggleInputEditableText.vue";
 import ToggleInputWebsite from "./components/forms/ToggleInputWebsite.vue";
 import ToggleDatePicker from "./components/forms/ToggleDatePicker.vue";
-import ToggleDateRangePicker from "./components/forms/ToggleDateRangePicker.vue";
 import ToggleInputSelect from "./components/forms/ToggleInputSelect.vue";
 import ToggleInputPercentage from "./components/forms/ToggleInputPercentage.vue";
 import ToggleInputCurrency from "./components/forms/ToggleInputCurrency.vue";
@@ -105,14 +104,13 @@ const Components = {
     ToggleInputEditableText,
     ToggleInputWebsite,
     ToggleDatePicker,
-    ToggleDateRangePicker,
     ToggleInputSelect,
     ToggleInputPercentage,
     ToggleInputCurrency,
     ToggleInputRadioButtons,
     ToggleInputTextArea,
     ToggleInputCheckboxContainer,
-    ToggleInputCheckbox, 
+    ToggleInputCheckbox,
     ToggleInputCheckboxInline,
     ToggleFillLoader,
     ToggleProgressLoader,