toggle-components-library 1.10.1

package/src/components/forms/ToggleInputCheckboxInline.vue

@@ -0,0 +1,74 @@
+<template>
+
+        <label class="toggle-input-checkbox-inline" >
+            <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/ToggleInputCrudField.vue

@@ -0,0 +1,95 @@
+<template>
+
+<div class="toggle-input-crud-container" :class="{'toggle-input-is-invalid':isInvalid, 'toggle-input-crud-container-empty':empty }"  @click="clickEmpty">
+    <label 
+        v-if="label && !empty"
+        class="toggle-input-crud-container-label"
+    > {{ label }} 
+    </label>
+    <button 
+        v-if="label && empty"
+        @click="$emit('add')" 
+        :class="['toggle-input-crud-container-label',{'toggle-input-crud-container-label-vertical-center':!description}]"
+    > {{ label }} 
+    </button>
+     <label 
+        class="toggle-input-crud-container-description"
+    > {{ description ? description : '&nbsp;' }} 
+    </label>
+
+    <div class="toggle-input-crud-container-buttons">
+        <ToggleButton 
+            v-if="!empty"
+            buttonStyle="mini_edit" 
+            @click="$emit('edit')" 
+        />
+        <ToggleButton 
+            v-if="!empty"
+            buttonStyle="mini_delete" 
+            @click="$emit('delete')" 
+        />
+    </div>
+    
+    <label
+        class="toggle-input-label-error" 
+        v-if="isInvalid"
+    >
+        {{ errorMessage }}
+    </label>
+</div>
+</template>
+
+<script>
+
+import { mixins } from '../mixins/mixins'
+import ToggleButton from '../buttons/ToggleButton.vue';
+
+export default {
+    mixins:[mixins],
+    components:{ToggleButton},
+    props: {
+        value: {
+            type: [Number,String]
+        },
+        label: {
+            type: String,
+            required: false
+        },
+        description: {
+            type: String,
+            required: false
+        },
+        isInvalid: {
+            type: Boolean,
+            default: false
+        },
+        errorMessage: {
+            type: String,
+            required: false
+        },
+        empty:{
+            type: Boolean,
+            default: false
+        }
+    },
+
+    created : function(){
+    },
+    computed: {
+        
+    },
+    methods: {
+
+        clickEmpty(e)
+        {
+            if(this.empty && e.target.nodeName !== 'BUTTON'){
+                this.$emit('add');
+            }
+        }
+
+        
+    }
+}
+
+
+</script>

package/src/components/forms/ToggleInputCurrency.vue

@@ -0,0 +1,198 @@
+<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 : 'ToggleInputCurrency' " 
+        :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 : 'ToggleInputCurrency' "
+    >
+        {{ errorMessage }}
+    </label>
+</div>
+</template>
+
+<script>
+
+import { mixins } from '../mixins/mixins'
+
+export default {
+    mixins:[mixins],
+    props: {
+        value: {
+            type: [Number, String]
+        },
+        allowBlank:{
+            type:Boolean,
+            default:false
+        },
+        name: {
+            type: String,
+            default: "ToggleInputCurrency"
+        },
+        label: {
+            type: String,
+            required: false
+        },
+        currencyCode:{
+            type:String,
+            required:false,
+            default:'GBP'
+        },
+        currencyLocale:{
+            type:String,
+            required:false,
+            default:'en-GB'
+        },
+        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
+        },
+        currencyDenomination: {
+            type: Number,
+            default: 100
+        }
+       
+    },
+
+    created : function(){
+    },
+
+    data : function(){       
+        return {
+            isInputActive: false 
+        };
+    },
+    computed: {
+
+        inputVal: {
+
+
+            get: function() {
+
+                if (this.isInputActive) {     
+                    if((this.value === '' || this.value === null) && this.allowBlank)
+                        return '';               
+                    // Cursor is inside the input field. unformat display value for user
+                    return (this.value/this.currencyDenomination).toLocaleString(this.currencyLocale);
+                } else {
+                    if(this.value === '' || this.value == null)
+                        return '';
+                    // User is not modifying now. Format display value for user interface
+                                        
+                    return (this.value/this.currencyDenomination).toLocaleString(this.currencyLocale, {style: 'currency', currency: this.currencyCode});
+
+                   
+                }
+            },
+            set: function(modifiedValue) {
+
+                // if the decimal seperator is a comma replace any inputted commas to periods
+                let newValue = this.unformatString(modifiedValue);
+
+                // Recalculate value after ignoring "$" and "," in user input
+               // let newValue = parseFloat(modifiedValue.replace(/[^\d.]/g, ""));
+                // Ensure that it is not NaN
+                if (isNaN(newValue)){
+                    if(this.allowBlank)
+                        newValue = '';
+                    else
+                        newValue = 0;
+                }
+                // Note: we cannot set this.value as it is a "prop". It needs to be passed to parent component
+                // $emit the event so that parent component gets it
+                if(newValue !== '')
+                   newValue = Math.round(newValue*this.currencyDenomination);
+              
+
+                this.$emit('input', newValue);
+
+            }
+
+
+
+
+        }
+    },
+    methods: {
+
+
+        /**
+         * Unformats from locale currency to float
+         */
+
+        unformatString(string) {
+
+            var parts = (1234.5).toLocaleString(this.currencyLocale).match(/(\D+)/g);
+            var unformatted = string;
+
+            unformatted = unformatted.split(parts[0]).join("");
+            unformatted = unformatted.split(parts[1]).join(".");
+
+            return parseFloat(unformatted);
+
+        },
+
+        /*
+        * 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/ToggleInputFile.vue

@@ -0,0 +1,101 @@
+<template>
+
+<div class="toggle-input-container" :class="{'toggle-input-is-invalid':isInvalid }"  v-on:click="focusClosestInput">
+    <label 
+        v-if="label"
+        class="toggle-input-label"
+    > {{ label }} 
+    </label>
+    <div class="toggle-dropzone-container toggle-dropzone-file-container" :class="fileExists ? 'toggle-input-file-background' : ''" >
+        <ToggleFillLoader  v-if="loading"/>
+        <vue-dropzone 
+            ref="dropzone" 
+            class="dropzone"
+            :id="'dropzone'+_uid" 
+            :options="dropzoneOptions" 
+            @vdropzone-file-added="fileAdded" 
+            v-show="!fileExists" 
+        />
+    </div>
+    <p class="toggle-helper-text" v-if="helperText"> {{helperText}} </p>
+    <ToggleButton class="toggle-button-float-left" buttonStyle="abort" buttonText="Remove file" v-if="fileExists" @click="removeFile" />
+    <label
+        class="toggle-input-label-error" 
+        v-if="isInvalid"
+    >
+        {{ errorMessage }}
+    </label>
+</div>
+</template>
+
+<script>
+
+import { mixins } from '../mixins/mixins'
+import ToggleButton from '../buttons/ToggleButton.vue';
+import ToggleFillLoader from '../loaders/ToggleFillLoader.vue';
+
+import vue2Dropzone from 'vue2-dropzone';
+import 'vue2-dropzone/dist/vue2Dropzone.min.css'
+
+export default {
+    mixins:[mixins],
+    props: {
+        fileExists:{
+            type: [Boolean]
+        },
+        fileAdded:{ // function to call when file added to dropzone
+
+        },
+        removeFile:{ // function to call when file is removed
+
+        },
+        helperText:{
+            type:String
+        },
+        label: {
+            type: String,
+            required: false
+        },
+        isInvalid: {
+            type: Boolean,
+            default: false
+        },
+        errorMessage: {
+            type: String,
+            required: false
+        },
+        dropzoneOptions:{
+            type: Object,
+            required:true
+        },
+        loading:{
+            type:Boolean,
+            default:false
+        }
+    },
+
+    components: {
+        vueDropzone: vue2Dropzone,
+        ToggleButton,
+        ToggleFillLoader
+    },
+
+    data : function(){
+        return {}; 
+    },
+
+    created : function(){
+    },
+    computed: {
+       
+    },
+    methods: {
+
+      
+
+       
+    }
+}
+
+
+</script>