toggle-components-library 1.10.1

package/src/components/forms/ToggleInputSearch.vue

@@ -0,0 +1,235 @@
+<template>
+
+<div class="toggle-input-container" :class="{'toggle-input-is-invalid':isInvalid, 'toggle-input-is-disabled':disabled  }"  v-on:click="focusClosestInput" ref="toggle-input-search">
+    <label 
+        v-if="label"
+        :for="name ? name : 'InputText' " 
+        class="toggle-input-label"
+    > {{ label }} 
+    </label>
+    <span class="toggle-input-counter" v-if="maxLength">{{messageLength(inputVal, maxLength)}}</span>
+    <input
+        :type="type"
+        :name="name ? name : 'ToggleInputText' " 
+        :class="[ 'toggle-input']"
+        :placeholder="placeholder ? placeholder : '' "
+        :autocomplete="'off' "
+        :required="required"
+        v-model="searchModel"
+        :maxlength="maxLength"
+        :disabled="disabled"
+    />
+    <div class="toggle-input-search-options-container">
+        <ul class="toggle-input-search-options" v-if="showOptions">
+            <li v-if="showAddButton" @click="addOption(searchModel)">
+                <ToggleButton buttonStyle="neutral" :buttonText="'Add ' + '<strong>\'' +searchModel + '\'</strong>'" /> 
+            </li>
+            <li v-for="option in filteredOptions" :key="option.value" @click="selectOption(option)">
+                {{option.label}}
+            </li>
+        </ul>
+    </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 ToggleButton from '../buttons/ToggleButton.vue';
+
+export default {
+    mixins:[mixins],
+    props: {
+        value: {
+            type: [
+                Object, 
+                null
+            ]
+        },
+        allowAddValue:{
+            type: Boolean,
+            required:false,
+            default:false
+        },
+        options:{
+            type: Array
+        },
+        type: {
+            type: String,
+            required: true,
+            validator: function (value) {
+                return ['text', 'email', 'number'].indexOf(value) !== -1
+            }
+        },
+        name: {
+            type: String,
+            default: "ToggleInputText"
+        },
+        label: {
+            type: String,
+            required: false
+        },
+        placeholder: {
+            type: String,
+            required: false
+        },
+        autocomplete: {
+            type: Boolean,
+            default: true
+        },
+        required: {
+            type: Boolean,
+            default: false
+        },
+        isInvalid: {
+            type: Boolean,
+            default: false
+        },
+        errorMessage: {
+            type: String,
+            required: false
+        },
+        maxLength:{
+            type: Number,
+            required:false
+        },
+        disabled: {
+            type: Boolean,
+            default: false
+        }
+    },
+
+    created : function(){
+        window.addEventListener('click', this.windowClick, true); 
+    },
+    beforeDestroy(){
+        window.removeEventListener('click', this.windowClick, true); 
+    },
+
+    components: {
+        ToggleButton
+    },
+    data : function(){
+        return {
+            savedSearchModel:'',
+            inputFocussed:false
+        };
+    },
+    computed: {
+
+        searchModel:
+        {
+            get: function (){
+                if(this.inputFocussed && !this.disabled)
+                    return this.savedSearchModel;
+                else
+                    return this.value !== null ? this.value.label : '';
+            },
+            set: function (value){
+                return this.savedSearchModel = value;
+            }
+        },
+
+        // should the add option show?
+        showAddButton()
+        {
+            return (!this.filteredOptions.length || !this.exactMatch) && this.allowAddValue && this.searchModel
+        },
+
+        // should options dropdown show?
+        showOptions()
+        {
+            return !this.disabled && this.inputFocussed && 
+            (
+                (
+                    this.searchModel && 
+                    (
+                        this.value == null || this.searchModel != this.value.label)
+                    ) || 
+                    !this.searchModel
+            );
+        },
+
+        /* 
+        * does the search query exactly match an option?
+        * returns bool
+        */
+        exactMatch()
+        {
+            return this.options.filter(option => option.label.toLowerCase() == this.searchModel.toLowerCase()).length != 0;
+        },
+
+        /* 
+        * Returns options that contain the search query
+        * returns array
+        */
+        filteredOptions()
+        {
+            return this.options.filter(option => option.label.toLowerCase().includes(this.searchModel.toLowerCase()));
+        },
+
+        // the input model
+        inputVal: {
+            get: function (){
+                return this.value;
+            },
+            set: function (value){
+                this.$emit('input', value);
+            }
+        }
+    },
+    methods: {
+
+        // select an option from the options list
+        selectOption(option)
+        {
+            this.searchModel = option.label;
+            this.inputVal = option;
+        },
+
+        // add option to options list
+        addOption(option)
+        {
+            this.searchModel = option;
+            this.inputVal = {value:'', label:option};
+        },
+
+        /*
+        * Concat message for count characters
+        * @return string
+        */
+        messageLength(count, maxLenght)
+        {
+            let mcount = count ? count.length : 0;
+            return mcount+' / '+maxLenght;
+        },
+
+        windowClick(e)
+        {          
+
+            var element = this.$refs["toggle-input-search"];
+
+            if (e.target !== element && !element.contains(e.target)) {
+               this.inputFocussed = false;
+            }else{
+               this.inputFocussed = true;
+            }
+
+        }
+
+        
+
+       
+    }
+}
+
+
+</script>

package/src/components/forms/ToggleInputSelect.vue

@@ -0,0 +1,109 @@
+<template>
+
+<div class="toggle-input-container" :class="{'toggle-input-is-invalid':isInvalid }"  v-on:click="focusClosestInput">
+    <label 
+        v-if="label"
+        :for="name ? name : 'ToggleInputSelect' " 
+        class="toggle-input-label"
+    > {{ label }} 
+    </label>
+
+    <div class="toggle-input-select-container">
+        <select 
+            :name="name ? name : 'ToggleInputSelect' " 
+            :class="[ 'toggle-input-select', size]"
+            v-model="inputVal" 
+            :autocomplete="autocomplete ? 'on' : 'off' "
+            :required="required"
+            >
+                <option value="">Select an option</option>
+                <option :value="option.value" v-for="(option, key) in options" v-bind:key="key">{{option.label}}</option>
+        </select>
+    </div>
+
+    <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: {},
+        name: {
+            type: String,
+            default: "ToggleInputText"
+        },
+        options: {
+            type: Array,
+            required: true
+        },
+        label: {
+            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(){
+    },
+    computed: {
+        inputVal: {
+            get: function (){
+                return this.value;
+            },
+
+            set: function (value){
+                this.$emit('input', value);
+            }
+        }
+    },
+    methods: {
+        onFocus() {
+            this.$emit('onFocus');
+        },
+
+        onBlur(){
+            this.$emit('onBlur');
+        },
+    },
+    watch: {
+        options(options) {
+            if (options.filter( option =>  option.value == this.inputVal).length == 0)
+                this.inputVal = "";
+        }
+    }
+}
+
+
+</script>

package/src/components/forms/ToggleInputText.vue

@@ -0,0 +1,130 @@
+<template>
+
+<div class="toggle-input-container" :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>
+    <span class="toggle-input-counter" v-if="maxLength">{{messageLength(inputVal, maxLength)}}</span>
+    <input
+        :type="type"
+        :name="name ? name : 'ToggleInputText' " 
+        :class="[ 'toggle-input', size]"
+        :placeholder="placeholder ? placeholder : '' "
+        :autocomplete="autocomplete ? 'on' : 'off' "
+        :required="required"
+        v-model="inputVal"
+        :maxlength="maxLength"
+        :disabled="disabled"
+    />
+    <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,String]
+        },
+        type: {
+            type: String,
+            required: true,
+            validator: function (value) {
+                return ['text', 'email', 'number', 'password'].indexOf(value) !== -1
+            }
+        },
+        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
+        },
+        disabled: {
+          type: Boolean,
+          required: false,
+          default: false
+        }
+    },
+
+    created : function(){
+    },
+    computed: {
+        inputVal: {
+            get: function (){
+                return this.value;
+            },
+
+            set: function (value){
+                this.$emit('input', value);
+            }
+        }
+    },
+    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/ToggleInputTextArea.vue

@@ -0,0 +1,123 @@
+<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>
+    <span class="toggle-input-counter" v-if="maxLength">{{messageLength(inputVal, maxLength)}}</span>
+    <textarea
+        :name="name ? name : 'ToggleInputText' " 
+        :class="['toggle-input', height ? 'height-'+height : '', size]"
+        :placeholder="placeholder ? placeholder : '' "
+        :autocomplete="autocomplete ? 'on' : 'off' "
+        :required="required"
+        v-model="inputVal"
+        :maxlength="maxLength"
+    />
+    <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,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
+            }
+        },
+        height: {
+            type: String,
+            validator: function (value) {
+                return ['medium', 'large', 'extra-large'].indexOf(value) !== -1
+            },
+            required: false
+        },
+        required: {
+            type: Boolean,
+            default: false
+        },
+        isInvalid: {
+            type: Boolean,
+            default: false
+        },
+        errorMessage: {
+            type: String,
+            required: false
+        },
+        maxLength:{
+            type: Number,
+            required:false
+        }
+    },
+
+    created : function(){
+    },
+    computed: {
+        inputVal: {
+            get: function (){
+                return this.value;
+            },
+
+            set: function (value){
+                this.$emit('input', value);
+            }
+        }
+    },
+    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>