toggle-components-library 1.33.0-beta.12 → 1.33.0-beta.13

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "toggle-components-library",
-    "version": "1.33.0-beta.12",
+    "version": "1.33.0-beta.13",
     "private": false,
     "scripts": {
         "serve": "vue-cli-service serve",
@@ -38,7 +38,6 @@
         "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,158 @@
 <template>
 
-  <div class="toggle-date-container" :class="[{'visible': show}, 'datepicker-trigger',{'toggle-input-is-invalid':isInvalid }, { 'toggle-input-is-disabled': disabled }]">
+<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, {'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 { 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 ['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
+    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
-      ];
+        // 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;
+            });
+        },
+    }
 }
 
 
@@ -169,88 +160,7 @@ export default {
 
 <style lang="scss">
 
-$namespace: 'toggle-mxdatepicker';
-
-@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 !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/components/forms/ToggleInputSelect.vue

@@ -1,18 +1,18 @@
 <template>
 
 <div class="toggle-input-container" :class="{'toggle-input-is-invalid':isInvalid, 'toggle-input-is-disabled':disabled}"  v-on:click="focusClosestInput">
-    <label 
+    <label
         v-if="label"
-        :for="name ? name : 'ToggleInputSelect' " 
+        :for="name ? name : 'ToggleInputSelect' "
         class="toggle-input-label"
-    > {{ label }} 
+    > {{ label }}
     </label>
 
     <div class="toggle-input-select-container">
-        <select 
-            :name="name ? name : 'ToggleInputSelect' " 
+        <select
+            :name="name ? name : 'ToggleInputSelect' "
             :class="[ 'toggle-input-select', size]"
-            v-model="inputVal" 
+            v-model="inputVal"
             :autocomplete="autocomplete ? 'on' : 'off' "
             :required="required"
             :disabled="disabled"
@@ -24,7 +24,7 @@
     </div>
 
     <label
-        class="toggle-input-label-error" 
+        class="toggle-input-label-error"
         v-if="isInvalid"
         :for="name ? name : 'ToggleInputText' "
     >
@@ -39,6 +39,11 @@ import { mixins } from '../mixins/mixins'
 
 export default {
     mixins:[mixins],
+    data() {
+        return {
+          show: false
+        }
+    },
     props: {
         value: {},
         name: {
@@ -87,6 +92,7 @@ export default {
     },
 
     created : function(){
+
     },
     computed: {
         inputVal: {

package/src/components/forms/ToggleInputText.vue

@@ -1,16 +1,16 @@
 <template>
 
 <div class="toggle-input-container" :class="{'toggle-input-is-invalid':isInvalid, 'toggle-input-is-disabled':disabled}"  v-on:click="focusClosestInput">
-    <label 
+    <label
         v-if="label"
-        :for="name ? name : 'InputText' " 
+        :for="name ? name : 'InputText' "
         class="toggle-input-label"
-    > {{ label }} 
+    > {{ label }}
     </label>
     <span class="toggle-input-counter" v-if="maxLength">{{messageLength(inputVal, maxLength)}}</span>
     <input
         :type="type"
-        :name="name ? name : 'ToggleInputText' " 
+        :name="name ? name : 'ToggleInputText' "
         :class="[ 'toggle-input', size]"
         :placeholder="placeholder ? placeholder : '' "
         :autocomplete="autocomplete ? 'on' : 'off' "
@@ -19,9 +19,11 @@
         :maxlength="maxLength"
         :disabled="disabled"
         :readonly="readonly"
+        :ref="'input_ele'"
+        @keyup.esc="handleEscPress"
     />
     <label
-        class="toggle-input-label-error" 
+        class="toggle-input-label-error"
         v-if="isInvalid"
         :for="name ? name : 'ToggleInputText' "
     >
@@ -103,7 +105,9 @@ export default {
         }
     },
 
-    created : function(){
+    created : function()
+    {
+        this.$nextTick(() => this.$refs['input_ele'].focus());
     },
     computed: {
         inputVal: {
@@ -118,6 +122,11 @@ export default {
     },
     methods: {
 
+        handleEscPress()
+        {
+            this.$emit('bail');
+        },
+
         /*
         * Concat message for count characters
         * @return string