toggle-components-library 1.33.0-beta.5 → 1.33.0-beta.7

package/src/components/forms/ToggleDateRangePicker.vue

@@ -1,199 +0,0 @@
-<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>
-
-
-