toggle-components-library 1.10.1

package/src/components/forms/ToggleColourPicker.vue

@@ -0,0 +1,192 @@
+<template>
+    <div class="toggle-input-container" :class="{'toggle-input-is-invalid':isInvalid }">
+
+        <div  ref="colorpicker">
+            <label class="toggle-input-label">{{label}}</label>
+            <input :name="name" type="text" class="toggle-input-colour-picker toggle-input" v-model="colorValue" @input="updateFromInput" :style="'outline-color:'+borderColour"/>
+            <span class="toggle-color-picker-current-color" :style="'background-color: ' + borderColour" @click="togglePicker()"></span>
+        </div>
+
+        <chrome-picker class="toggle-chrome-picker" :value="colors" v-if="displayPicker"  @input="updateFromPicker"/>
+
+        <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 { Chrome } from 'vue-color';
+Vue.component('chrome-picker', Chrome);
+
+export default {
+        mixins:[mixins],
+        props: {
+            value: {
+                type: [String]
+            },
+            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
+            },
+        },  
+        data : function(){
+            return {
+                displayPicker: false,
+                colorValue: '',
+                colors: {
+                    hex: '#000000',
+                },
+                borderColour: '#EAE8E8',
+            };
+        },
+        computed: {
+
+            colour:
+            {
+                get:function(){
+                    return this.value;
+                },
+                set:function(newVal){
+                    this.$emit('input', newVal)
+                }
+            },
+            
+        },
+        created : function(){
+           
+        },
+
+        beforeDestroy: function () {
+        },
+        watch:{
+
+            colorValue(val) {
+                if(val) {
+                    this.updateColors(val);
+                    this.$emit('input', val);
+                }
+                
+            }
+           
+        },
+        mounted : function ()
+        {
+            this.setColor(this.value || '#000000');
+        },
+        methods:{
+
+            setColor(color) {
+                this.updateColors(color);
+                this.colorValue = color;
+            },
+
+            setBorderColour(color, colorsRgba = ''){
+                if (colorsRgba === '') //if has only hex
+                {
+                    let isWhite = color.charAt(1) === 'F' && color.charAt(2) != 'F' ? true : false;
+                    this.borderColour = isWhite ? '#EAE8E8' : color;
+                } 
+                else if (colorsRgba != '' ) //if has rgba
+                {
+                    let hasTransparency = parseFloat(colorsRgba.a) < 0.2 ? true : false ;
+                    this.borderColour = hasTransparency ? colorsRgba.hex : color;
+                }
+            },
+
+            updateColors(color) {
+                if(color.slice(0, 1) == '#') {
+                    this.colors = {
+                        hex: color
+                    };
+                    this.setBorderColour(color);
+                }
+                else if(color.slice(0, 4) == 'rgba') {
+                    var rgba = color.replace(/^rgba?\(|\s+|\)$/g,'').split(','),
+                        hex = '#' + ((1 << 24) + (parseInt(rgba[0]) << 16) + (parseInt(rgba[1]) << 8) + parseInt(rgba[2])).toString(16).slice(1);
+                    this.colors = {
+                        hex: hex,
+                        a: rgba[3],
+                    }
+                    this.setBorderColour(color, this.colors);
+                }
+            },
+
+            updateFromInput() {
+                this.updateColors(this.colorValue);
+            },
+
+            showPicker() {
+                this.displayPicker = true;
+                document.addEventListener('click', this.documentClick);
+            },
+
+            hidePicker() {
+                this.displayPicker = false;
+                document.removeEventListener('click', this.documentClick);
+            },
+            togglePicker() {
+                this.displayPicker ? this.hidePicker() : this.showPicker();
+            },
+
+            documentClick(e) {
+                console.log('fda');
+                var el = this.$refs.colorpicker,
+                    target = e.target;
+                if(el !== target && !el.contains(target)) {
+                    this.hidePicker()
+                }
+            },
+
+            updateFromPicker(color) {
+                this.colors = color;
+                if(color.rgba.a == 1) {
+                    this.colorValue = color.hex;
+                }
+                else {
+                    this.colorValue = 'rgba(' + color.rgba.r + ', ' + color.rgba.g + ', ' + color.rgba.b + ', ' + color.rgba.a + ')';
+                }
+            }
+           
+
+        }
+    }
+
+</script>

package/src/components/forms/ToggleDatePicker.vue

@@ -0,0 +1,168 @@
+<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>
+</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: [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
+        }
+    },
+
+    created : function(){
+    },
+    data : function(){
+        return {
+            datePickerOpen: false,
+        };
+    },
+    watch :{
+
+        datePickerOpen(newVal){
+            let state = newVal ? 'open' : 'closed';
+            this.$emit('state', state);
+        }
+       
+    },
+    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);
+            }
+        }
+    },
+    methods: {
+        
+        clearDate()
+        {
+            this.displayValue = '';
+        },
+
+        toggleDatePickerState(state){
+            this.$nextTick( () => {
+                if(typeof state === 'boolean')
+                    this.datePickerOpen = state;
+                else this.datePickerOpen = !this.datePickerOpen;
+            });
+        },
+    }
+}
+
+
+</script>
+
+<style lang="scss">
+
+   
+
+</style>
+
+
+

package/src/components/forms/ToggleDateRangePicker.vue

@@ -0,0 +1,208 @@
+<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:displayValue.end }}"
+            @date-two-selected="val => { displayValue = {start:displayValue.start, end:val } }"
+            @closed="toggleDatePickerState(false)"
+            @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,
+        };
+    },
+    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){
+                    modifiedValue.start = false;
+                    modifiedValue.end   = false;
+                    this.$emit('input', modifiedValue);
+                    return;
+                }
+
+                modifiedValue.start = new Date(new Date(modifiedValue.start+' 00:00:00').toISOString());
+                if(modifiedValue.end)
+                    modifiedValue.end   = new Date(new Date(modifiedValue.end+' 00:00:00').toISOString());
+                else
+                    modifiedValue.end   = modifiedValue.start;
+
+                this.$emit('input', modifiedValue);
+            }
+        }
+    
+    },
+
+
+    methods: {
+
+
+        mirrorSingleDates(){
+
+            if(this.displayValue.start !== '' && this.displayValue.end === ''){
+                this.displayValue.end = this.displayValue.start;
+            }
+            if(this.displayValue.end !== '' && this.displayValue.start === ''){
+                this.displayValue.start = this.displayValue.end;
+            }
+        },
+
+        
+        clearDate()
+        {
+            this.displayValue = {start:'',end:''};
+        },
+
+        toggleDatePickerState(state){
+            this.mirrorSingleDates();
+            this.$nextTick( () => {
+                if(typeof state === 'boolean')
+                    this.datePickerOpen = state;
+                else this.datePickerOpen = !this.datePickerOpen;
+            });
+        },
+    }
+}
+
+
+</script>
+
+<style lang="scss">
+
+   
+
+</style>
+
+
+

package/src/components/forms/ToggleInputCheckbox.vue

@@ -0,0 +1,74 @@
+<template>
+
+        <label class="toggle-input-checkbox" >
+            <input type="checkbox" :name="name ? name : 'ToggleInputCheckbox' "  v-model="inputVal" :disabled="disabled"/>
+            <div>
+                <span class="toggle-input-checkbox-check-element "></span>
+                <span  :class="[ 'toggle-input-checkbox-label', label_style ]" >{{label}}</span>
+            </div>
+        </label>
+
+</template>
+
+<script>
+
+import { mixins } from '../mixins/mixins'
+
+export default {
+    mixins:[mixins],
+    props: {
+        value: {
+            type: Boolean
+        },
+        disabled: {
+            type: Boolean
+        },
+        name: {
+            type: String,
+            default: "ToggleInputText"
+        },
+        label_style: {
+            type: String,
+            default: ""
+        },
+        label: {
+            type: String,
+            required: false
+        },        
+        isInvalid: {
+            type: Boolean,
+            default: false
+        },
+        errorMessage: {
+            type: String,
+            required: false
+        }
+    },
+
+    created : function(){
+    },
+    computed: {
+        inputVal: {
+            get: function (){
+                return this.value;
+            },
+
+            set: function (value){
+                this.$emit('input', value);
+            }
+        }
+    },
+    methods: {
+
+        onFocus() {
+            this.$emit('onFocus');
+        },
+
+        onBlur(){
+            this.$emit('onBlur');
+        },
+    }
+}
+
+
+</script>

package/src/components/forms/ToggleInputCheckboxContainer.vue

@@ -0,0 +1,65 @@
+<template>
+
+
+
+<div class="toggle-input-container margin-bottom-0" :class="{'toggle-input-is-invalid':isInvalid }"  v-on:click="focusClosestInput">
+
+
+    <label 
+        v-if="label"
+        class="toggle-input-label"
+    > {{ label }} 
+    </label>
+
+    <div class="toggle-input-radio-container">
+        <slot></slot>
+    </div>
+
+    <label
+        class="toggle-input-label-error" 
+        v-if="isInvalid"
+    >
+        {{ errorMessage }}
+    </label>
+
+</div>
+</template>
+
+<script>
+
+import { mixins } from '../mixins/mixins'
+
+export default {
+    mixins:[mixins],
+    props: {
+        label: {
+            type: String,
+            required: false
+        },        
+        isInvalid: {
+            type: Boolean,
+            default: false
+        },
+        errorMessage: {
+            type: String,
+            required: false
+        }
+    },
+
+    created : function(){
+    },
+    computed: {
+       
+    },
+    methods: {
+        onFocus() {
+            this.$emit('onFocus');
+        },
+        onBlur(){
+            this.$emit('onBlur');
+        },
+    }
+}
+
+
+</script>