toggle-components-library 1.33.0-beta.8 → 1.33.0-beta.9

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "toggle-components-library",
-    "version": "1.33.0-beta.8",
+    "version": "1.33.0-beta.9",
     "private": false,
     "scripts": {
         "serve": "vue-cli-service serve",
@@ -31,13 +31,13 @@
         "storybook-vue-router": "^1.0.7",
         "swiper": "^10.3.0",
         "vue": "^2.7.10",
+        "vue-airbnb-style-datepicker": "^2.7.1",
         "vue-apexcharts": "^1.6.2",
         "vue-awesome-swiper": "^4.1.1",
         "vue-color": "^2.7.1",
         "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,177 +1,158 @@
 <template>
 
-  <div class="toggle-date-container" :class="[{'visible': show}, 'datepicker-trigger',{'toggle-input-is-invalid':isInvalid }]">
+<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>
 
-    <label class="toggle-input-label">{{label}}</label>
-
-    <div :class="['toggle-date-input-container', 'toggle-date-input-container-' + size ]">
-      <date-picker v-model="inputVal" prefix-class="toggle-mxdatepicker" :formatter="momentFormat" :range="range" :type="type" :disabled="disabled" @change="changeDate()">
-        <template v-slot:icon-calendar>
-          <span class="toggle-icon-calendar"></span>
-        </template>
-        <template v-slot:icon-clear>
-          <span class="toggle-icon-clear-calendar"></span>
-        </template>
-      </date-picker>
     </div>
-
-    <label
-        class="toggle-input-label-error"
-        v-if="isInvalid"
-        :for="name ? name : 'ToggleInputText' "
-    >
-      {{ errorMessage }}
-    </label>
-
-  </div>
 </template>
 
 <script>
 
-import { mixins } from '../mixins/mixins'
-import moment from 'moment';
-import DatePicker from 'vue2-datepicker';
+    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'
+        },
+    });
 
 export default {
-  mixins:[mixins],
-  components:{
-    DatePicker
-  },
-  props: {
-    set_value: {
-      type: [Boolean,Date,Object]
-    },
-    value: {},
-    // datepicker mode, see: https://www.npmjs.com/package/vue2-datepicker#props
-    type: {
-      type: String,
-      required: true,
-      validator: function (value) {
-        return ['date', 'datetime', 'year', 'month', 'time', 'week'].indexOf(value) !== -1
-      }
-    },
-    // singular date or range between 2 dates
-    range: {
-      type: Boolean,
-      default: false
-    },
-    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
-      },
-      default: 'medium'
-    },
-    displayFormat: {
-        type: String,
-        default: 'DD/MM/Y'
-    },
-    required: {
-      type: Boolean,
-      default: false
-    },
-    isInvalid: {
-      type: Boolean,
-      default: false
-    },
-    errorMessage: {
-      type: String,
-      required: false
+    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
+        }
     },
-    maxLength:{
-      type: Number,
-      required:false
+
+    created : function(){
     },
-    disabled: {
-      type: Boolean,
-      default: false
+    data : function(){
+        return {
+            datePickerOpen: 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,
+    watch :{
 
-      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
+        datePickerOpen(newVal){
+            let state = newVal ? 'open' : 'closed';
+            this.$emit('state', state);
         }
-      }
-    };
-  },
-  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));
-      }
+       
     },
+    computed: {
+        date() {
+            return this.dateRangeView(this.displayValue)
+        },
 
-  },
-  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
-      ];
-    },
-    changeDate()
-    {
-        // console.log('value changed!');
+        // 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);
+            }
+        }
     },
-  }
+    methods: {
+        
+        clearDate()
+        {
+            this.displayValue = '';
+        },
+
+        toggleDatePickerState(state){
+            this.$nextTick( () => {
+                if(typeof state === 'boolean')
+                    this.datePickerOpen = state;
+                else this.datePickerOpen = !this.datePickerOpen;
+            });
+        },
+    }
 }
 
 
@@ -179,88 +160,7 @@ export default {
 
 <style lang="scss">
 
-$namespace: 'toggle-mxdatepicker';
-
-$default-color: #555;
-$primary-color: #1284e7;
-
-@import '~vue2-datepicker/scss/index.scss';
-
-.toggle-date-container {
-  display: none;
-  &.visible {
-    display: block;
-  }
-}
-
-.toggle-mxdatepicker-datepicker, .toggle-mxdatepicker-datepicker-range {
-  width: 100%;
-}
-.toggle-mxdatepicker-input {
-  padding: 0.5rem 3.5rem 0.5rem 1rem;
-  background-color: #F4F6F7;
-  height: 2.8rem;
-  width: 100%;
-  box-shadow: none;
-}
-
-i.toggle-mxdatepicker-icon-clear {
-  //margin-right: 1em;
-  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: 14px;
-    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/components/forms/ToggleDateRangePicker.vue

@@ -0,0 +1,199 @@
+<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="dateRange"  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="'range'"
+            :date-one="displayValue.start"
+            :date-two="displayValue.end"
+            @date-one-selected="val => { displayValue = {start:val, end:null }}"
+            @date-two-selected="val => { displayValue = {start:null, end:val } }"
+            @closed="toggleDatePickerState(false,true)"
+            @cancelled="toggleDatePickerState(false)"
+            :showShortcutsMenuTrigger="false"
+        />
+        <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'
+        },
+    });
+
+export default {
+    mixins:[mixins],
+    components:{},
+    props: {
+        value: {
+            type: Object
+        },
+        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
+        },
+       
+    },
+
+    created : function(){
+   
+    },
+    data : function(){
+        return {
+            datePickerOpen: false,
+            selectedDateToEmit:{}
+        };
+    },
+    watch :{
+
+        datePickerOpen(newVal){
+            let state = newVal ? 'open' : 'closed';
+            this.$emit('state', state);
+        }
+       
+    },
+    computed: {
+
+    
+        dateRange() {
+          let formattedDates = ''
+          if (this.displayValue.start) {
+            formattedDates = this.dateRangeView(this.displayValue.start);
+          }
+          if (this.displayValue.end) {
+            formattedDates += ' - ' + this.dateRangeView(this.displayValue.end);
+          }
+
+          return formattedDates
+        },
+
+
+        displayValue: {
+            get: function() {
+                return {start:this.formatDate(this.value.start), end:this.formatDate(this.value.end)}
+            },
+            set: function(modifiedValue) {
+                if(modifiedValue.start) {
+
+                    //if modifiedValue.start is present, set selectedDateToEmit.start to it. If there is already an end date stored, 
+                    // set selectedDateToEmit.end to it, otherwise use the start date.
+                    let isoDate = new Date(new Date(modifiedValue.start+' 00:00:00').toISOString())
+                    this.selectedDateToEmit = {start: isoDate,end: this.selectedDateToEmit.end? this.selectedDateToEmit.end : isoDate};
+                }
+                if(modifiedValue.end){
+                    //if modifiedValue.end is present, set selectedDateToEmit.end to it. If there is already a start date stored,
+                    // set selectedDateToEmit.start to it, otherwise use the end date.
+                    let isoDate = new Date(new Date(modifiedValue.end+' 00:00:00').toISOString())
+                    this.selectedDateToEmit = {start: this.selectedDateToEmit.start ? this.selectedDateToEmit.start : isoDate, end:isoDate};
+                } 
+                // If the start date is more recent than the end date, set the end date to the start date.
+                if(new Date(this.selectedDateToEmit.start).getTime() > new Date(this.selectedDateToEmit.end).getTime())
+                    this.selectedDateToEmit.end = this.selectedDateToEmit.start;         
+            }
+        }
+    
+    },
+
+
+    methods: {
+        
+        clearDate() {
+            let blankDate = {start: '', end: ''};
+            this.$emit('input', blankDate);
+        },
+
+        toggleDatePickerState(state,emit){
+            this.$nextTick( () => {
+                 this.displayValue = {start:'',end:''};
+                if(typeof state === 'boolean'){
+                    //if done is clicked, emit
+                    if(emit) this.$emit('input', this.selectedDateToEmit);  
+                    this.datePickerOpen = state;
+                }
+                else this.datePickerOpen = !this.datePickerOpen;
+            });
+        },
+    }
+}
+
+
+</script>
+
+<style lang="scss">
+
+   
+
+</style>
+
+
+

package/src/components/forms/ToggleInputCurrency.vue

@@ -3,7 +3,7 @@
 
 
 
-<div class="toggle-input-container" :class="{'toggle-input-is-invalid':isInvalid, 'toggle-input-is-disabled': disabled }"  v-on:click="focusClosestInput">
+<div class="toggle-input-container" :class="{'toggle-input-is-invalid':isInvalid }"  v-on:click="focusClosestInput">
     <label 
         v-if="label"
         :for="name ? name : 'InputText' " 
@@ -12,12 +12,10 @@
     </label>
     <input
         :name="name ? name : 'ToggleInputCurrency' " 
-        :class="[ 'toggle-input', {'toggle-input-is-readonly':readonly, size}]"
+        :class="[ 'toggle-input', size]"
         :placeholder="placeholder ? placeholder : '' "
         :autocomplete="autocomplete ? 'on' : 'off' "
         :required="required"
-        :disabled="disabled"
-        :readonly="readonly"
         v-model="inputVal"
         @blur="isInputActive = false" 
         @focus="isInputActive = true" 
@@ -93,17 +91,8 @@ export default {
         currencyDenomination: {
             type: Number,
             default: 100
-        },
-        disabled: {
-            type: Boolean,
-            required: false,
-            default: false
-        },
-        readonly: {
-            type: Boolean,
-            required: false,
-            default: false
-        },  
+        }
+       
     },
 
     created : function(){
@@ -121,7 +110,7 @@ export default {
 
             get: function() {
 
-                if (this.isInputActive && !this.readonly) {     
+                if (this.isInputActive) {     
                     if((this.value === '' || this.value === null) && this.allowBlank)
                         return '';               
                     // Cursor is inside the input field. unformat display value for user