toggle-components-library 1.10.1

package/src/components/forms/ToggleInputNumber.vue

@@ -0,0 +1,164 @@
+<template>
+
+
+
+
+<div class="toggle-input-container" :class="{'toggle-input-is-invalid':isInvalid }"  v-on:click="focusClosestInput">
+    <label 
+        v-if="label"
+        :for="name ? name : 'ToggleInputNumber' " 
+        class="toggle-input-label"
+    > {{ label }} 
+    </label>
+    <input
+        :name="name ? name : 'ToggleInputNumber' " 
+        :class="[ 'toggle-input', size]"
+        :placeholder="placeholder ? placeholder : '' "
+        :autocomplete="autocomplete ? 'on' : 'off' "
+        :required="required"
+        v-model="inputVal"
+        @blur="isInputActive = false" 
+        @focus="isInputActive = true" 
+        :pattern="pattern"
+    />
+    <label
+        class="toggle-input-label-error" 
+        v-if="isInvalid"
+        :for="name ? name : 'ToggleInputNumber' "
+    >
+        {{ errorMessage }}
+    </label>
+</div>
+</template>
+
+<script>
+
+import { mixins } from '../mixins/mixins'
+
+export default {
+    mixins:[mixins],
+    props: {
+        value: {
+            type: [Number, String]
+        },
+        name: {
+            type: String,
+            default: "ToggleInputNumber"
+        },
+        label: {
+            type: String,
+            required: false
+        },
+        inlineLabel: {
+            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
+        },
+        currencySymbol:{
+            type: String,
+            default: '£'
+        },
+        currencyDenomination:{
+            type:Number,
+            default:100
+        },
+        pattern: {
+            type:String,
+            default:"\\d*"
+        }
+    },
+
+    created : function(){
+    },
+    data : function(){       
+        return {
+            isInputActive: false
+        };
+    },
+    computed: {
+        inputVal: {
+
+
+            get: function() {
+                if (this.isInputActive) {
+                    // Cursor is inside the input field. unformat display value for user
+                    return this.value;
+                } else {
+                    // User is not modifying now. Format display value for user interface
+                    if(this.value === '')
+                        return '';
+
+                    return this.value + ( this.inlineLabel ? ' ' + this.inlineLabel : '');
+                }
+            },
+            set: function(modifiedValue) {
+
+                if(modifiedValue === ''){
+                    this.$emit('input', modifiedValue);
+                }else{
+
+                    let newValue = parseFloat(modifiedValue)
+                    // Ensure that it is not NaN
+
+                    if (isNaN(newValue)) 
+                        newValue = 0;
+
+                    this.$emit('input', newValue);
+                }
+            }
+
+
+
+
+        }
+    },
+    methods: {
+
+        /*
+        * Concat message for count characters
+        * @return string
+        */
+        messageLength(count, maxLenght)
+        {
+            let mcount = count ? count.length : 0;
+            return mcount+' / '+maxLenght;
+        },
+
+        onFocus() {
+            this.$emit('onFocus');
+        },
+
+        onBlur(){
+            this.$emit('onBlur');
+        },
+    }
+}
+
+
+
+</script>

package/src/components/forms/ToggleInputPercentage.vue

@@ -0,0 +1,142 @@
+<template>
+
+<div class="toggle-input-container" :class="{'toggle-input-is-invalid':isInvalid }"  v-on:click="focusClosestInput">
+
+    <label 
+        v-if="label"
+        :for="name ? name : 'InputText' " 
+        class="toggle-input-label"
+    > {{ label }} 
+    </label>
+    <input
+        :name="name ? name : 'ToggleInputPercentage' " 
+        :class="[ 'toggle-input', size]"
+        :placeholder="placeholder ? placeholder : '' "
+        :autocomplete="autocomplete ? 'on' : 'off' "
+        :required="required"
+        v-model="inputVal"
+        @blur="isInputActive = false" 
+        @focus="isInputActive = true" 
+    />
+    <label
+        class="toggle-input-label-error" 
+        v-if="isInvalid"
+        :for="name ? name : 'ToggleInputText' "
+    >
+        {{ errorMessage }}
+    </label>
+</div>
+</template>
+
+<script>
+
+import { mixins } from '../mixins/mixins'
+
+
+
+export default {
+    mixins:[mixins],
+    props: {
+        value: {
+            type: [Number]
+        },
+        name: {
+            type: String,
+            default: "ToggleInputPercentage"
+        },
+        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
+        }
+    },
+
+    created : function(){
+    },
+    data : function(){       
+        return {
+            isInputActive: false
+        };
+    },
+    watch :{
+
+        inputVal(newVal){
+            if(newVal > 100){
+                this.inputVal = '100';
+            }
+        }
+       
+    },
+    computed: {
+        inputVal: {
+
+             get: function() {
+                if (this.isInputActive) {
+                    // Cursor is inside the input field. unformat display value for user
+                    return this.value.toString()
+                } else {
+                    // User is not modifying now. Format display value for user interface
+                    return this.value + '%';
+                }
+            },
+            set: function(modifiedValue) {
+                // Recalculate value after ignoring "%" and "," in user input
+                let newValue = parseFloat(modifiedValue.replace(/[^\d.]/g, ""));
+                if(newValue)
+                    newValue = parseInt(newValue);
+                else
+                    newValue = 0;
+                
+                this.$emit('input', newValue);
+            }
+        }
+    },
+    methods: {
+
+        /*
+        * Concat message for count characters
+        * @return string
+        */
+        messageLength(count, maxLenght)
+        {
+            let mcount = count ? count.length : 0;
+            return mcount+' / '+maxLenght;
+        },
+
+        onFocus() {
+            this.$emit('onFocus');
+        },
+
+        onBlur(){
+            this.$emit('onBlur');
+        },
+    }
+}
+
+
+</script>

package/src/components/forms/ToggleInputRadioButtonGroup.vue

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

package/src/components/forms/ToggleInputRadioButtons.vue

@@ -0,0 +1,136 @@
+<template>
+
+
+
+<div ref="toggle-input-container" class="toggle-input-container margin-bottom-0" :class="{'toggle-input-is-invalid':isInvalid, 'toggle-input-is-disabled':disabled }"  v-on:click="focusClosestInput">
+    <label 
+        v-if="label && !inGroup"
+        :for="name ? name : 'InputText' " 
+        class="toggle-input-label"
+    > {{ label }} 
+    </label>
+
+    <ToggleInputCheckbox  v-model="checkboxModel" :label="label" label_style="" v-if="inGroup" /> 
+
+    <div class="toggle-input-radio-container" v-if="!inGroup || (inGroup && checkboxModel)">
+        <label class="toggle-input-radio"  v-for="(option, key) in options" v-bind:key="key">
+            <input type="radio" :value="option.value" :name="name ? name : 'ToggleInputRadio' "  v-model="inputVal" :disabled="disabled" />
+            <div>
+                <span class="toggle-input-radio-check-element "></span>
+                <span  :class="[ 'toggle-input-radio-label', option.style ]" >{{option.label}}</span>
+                <span v-if="option.label_image"><img class="toggle-input-radio-button-img" :style="{width:option.label_image.width,height:option.label_image.height}" :src="option.label_image.url"/></span>
+            </div>
+        </label>
+    </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 ToggleInputCheckbox from '../forms/ToggleInputCheckbox.vue';
+
+export default {
+    mixins:[mixins],
+    components: {
+        ToggleInputCheckbox: ToggleInputCheckbox
+    },
+    props: {
+        value: {
+            type: [String, Number, Boolean]
+        },
+        options: {
+            type: Array,
+            required: true
+        },
+        name: {
+            type: String,
+            default: "ToggleInputText"
+        },
+        label: {
+            type: String,
+            required: false
+        },        
+        isInvalid: {
+            type: Boolean,
+            default: false
+        },
+        errorMessage: {
+            type: String,
+            required: false
+        },
+        disabled: {
+            type: Boolean,
+            default: false
+        }       
+    },
+
+    mounted : function(){
+        this.inGroup = this.$refs["toggle-input-container"].parentElement.classList.contains('toggle-input-radio-group-container');
+    },
+    data : function(){
+        return {
+            previousValue: '',
+            checkboxModel: this.value ? true : false,
+            inGroup: false
+        };
+    },
+    computed: {
+
+        
+        inputVal: {
+            get: function (){
+                return this.value;
+            },
+
+            set: function (value){
+                this.$emit('input', value);
+            }
+        }
+
+      
+    },
+    watch :{
+
+        inputVal(newVal)
+        {
+            if(newVal != '')
+                this.checkboxModel = true;
+
+            this.previousValue = newVal;
+        },
+
+        checkboxModel(newVal){
+            if(!newVal)
+                this.inputVal = '';
+            /*else if(this.inputVal == ''){
+                this.$nextTick( () => {
+                    this.checkboxModel = false;
+                });
+            }*/
+
+        }
+       
+    },
+    methods: {
+
+        onFocus() {
+            this.$emit('onFocus');
+        },
+
+        onBlur(){
+            this.$emit('onBlur');
+        },
+    }
+}
+
+
+</script>