toggle-components-library 1.10.1

package/src/components/forms/ToggleInputGrid.vue

@@ -0,0 +1,409 @@
+<template>
+
+<div class="toggle-grid-input-container">
+
+    <div v-for="(row, rowindex) in inputVal" class="toggle-grid-input-row" :key="rowindex" >
+        <div class="toggle-grid-input-row-preview">
+
+            <div class="toggle-grid-input-row-column"  draggable="true" v-on:dragstart="drag(rowindex,columnindex)" v-on:drop="drop(rowindex,columnindex)" v-on:dragover="allowDrop" :style="{width:getColumnWidth(column)+'%'}" v-for="(column, columnindex) in row.layout" :key="columnindex">
+                <div class="toggle-grid-input-row-column-content" >
+                    <slot class="content" name="column" :gridReference="[rowindex,columnindex]" :contentData="row.content[columnindex]"></slot>
+                </div>
+            </div>
+
+        </div>
+
+        <div class="toggle-grid-input-row-remove">
+            <ToggleButton  
+                buttonStyle="mini_delete" 
+                @click="removeRow(rowindex)" 
+            />
+        </div>
+            
+        <!-- row column layout selector -->
+        <div class="toggle-grid-input-column-layout-input">
+            <label :class="['toggle-grid-input-column-layout-option']" v-for="(layout, layoutindex) in columnConfigurations" :key="layoutindex">
+                <input  type="radio" :value="layout.layout" :name="'layout_'+rowindex"  v-model="inputVal[rowindex].layout" />
+                <div class='toggle-grid-input-column-layout-option-custom-radio'>
+                    <span class="toggle-grid-input-column-layout-option-column" v-for="(columnWidth, columnwidthindex) in layout.layout" :style="{width:getColumnWidth(columnWidth)+'%'}" :key="columnwidthindex">
+                        <span></span>
+                    </span>
+                </div>
+            </label>
+        </div>
+
+       
+
+
+    </div>
+    <div class="toggle-grid-input-add-row" >
+        <button 
+            class="toggle-grid-input-add-row-button"
+            buttonStyle="mini_add" 
+            @click="addRow" 
+        />
+    </div>
+
+</div>
+</template>
+
+<script>
+
+import { mixins } from '../mixins/mixins'
+import ToggleButton from '../buttons/ToggleButton.vue';
+
+
+export default {
+    mixins:[mixins],
+    components:{ToggleButton},
+    props: {
+        value: {
+            type: [Array]
+        },
+        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
+        }
+    },
+
+    data : function(){
+        return {
+            draggingIndex:null,
+            /*rowModel:[
+                {
+                    layout:[12]
+                }
+            ],*/
+            columnConfigurations: [
+                {
+                    layout:[12]
+                },
+                {
+                    layout:[4,4,4]
+                },
+                {
+                    layout:[6,6]
+                },
+                {
+                    layout:[9,3]
+                },
+                {
+                    layout:[3,9]
+                },
+            ],
+            
+        };
+    },
+
+    created : function(){
+    },
+    computed: {
+        inputVal: {
+            get: function (){
+                return this.value;
+            },
+
+            set: function (value){
+                this.$emit('input', value);
+            }
+        }
+    },
+    watch:{
+
+        inputVal:  {
+            handler: function(newVal){
+                for (let rowindex = 0; rowindex < newVal.length; rowindex++) {
+                    // if a row has more column content than columns, we need to make room
+                    if(newVal[rowindex].content.length > newVal[rowindex].layout.length)
+                    {               
+                        this.updateGridLayout();
+                    }else if(newVal[rowindex].content.length < newVal[rowindex].layout.length){
+                        // If we've added more columns to a row 
+                        // ensure the content length is always the same as the layout length
+                        this.inputVal[rowindex].content.length = this.inputVal[rowindex].layout.length;
+                    }
+
+                    
+
+                }
+            },
+            deep: true // watches changes within an array of objects
+        },
+      
+    },
+    methods: {
+
+        allowDrop(ev) {
+          ev.preventDefault();
+        },
+
+
+        /**
+         * Drag handler
+         * @param {Number} [row] [row dropped into]
+         * @param {Number} [column] [column dropped into]
+         * @return Void
+        */
+
+        drag(row, column) {
+            this.draggingIndex = [row, column];
+        },
+
+
+        /**
+         * Updates the layout of the grid and content automatically to the most logical position
+         * Can be called without params, if no content is being added to the grid
+         *
+         * @param {Number} [row] [the row content is to be added to ]
+         * @param {Number} [column] [the column content is to be added to ]
+         * @param {Object} [dropped_content] Content to add to the given grid reference
+         */
+        updateGridLayout(row, column, dropped_content)
+        {
+            // if row is undefined, we're not adding a new column
+            let built_content = this.buildContentArray(row, column, dropped_content);
+            this.setGridContent(built_content.column_array);
+           // this.removeEmptyRows();
+        },
+
+
+        /*
+        * Returns the grid index of a column if columns are numbered left to right
+        * 
+        * @param {Number} [column_number] Position of column in an array
+        *
+        * @return Array [row, column]
+        */
+        getGridReferenceOfColumn(column_number)
+        {
+            let column_count = 0;
+            for (let rowindex = 0; rowindex < this.inputVal.length; rowindex++) {
+                for (let columnindex = 0; columnindex < this.inputVal[rowindex].content.length; columnindex++) {
+                    if(column_number == column_count)
+                        return [rowindex, columnindex];
+                    column_count++;
+                }
+            }
+        },
+
+        /*
+        * Remove a row from the grid
+        * 
+        * @param {Number} [row_index] row index
+        *
+        * @return void
+        */
+        removeRow(row_index){
+            this.$delete( this.inputVal, row_index);
+        },
+
+        /*
+        * Adds the array of content to the grid layout
+        * 
+        * @param {Array} [content] [array of content]
+        *
+        * @return Void
+        */
+
+        setGridContent(content)
+        {
+
+            // set the new content to the grid layout
+            for (let rowindex = 0; rowindex < this.inputVal.length; rowindex++) {
+                let old_number_of_columns =  this.inputVal[rowindex].content.length;
+                this.inputVal[rowindex].content.length = this.inputVal[rowindex].layout.length;
+                for (let columnindex = 0; columnindex < this.inputVal[rowindex].content.length; columnindex++) {
+                    old_number_of_columns--;
+                    this.$set( this.inputVal[rowindex].content, columnindex, content.shift());
+                } 
+
+                // If we're reducing the number of columns in a row, remove any of the extra blank columns that were in that row
+                while(old_number_of_columns > 0){
+                    old_number_of_columns--;
+                    if(!content[0]){
+                        content.shift();
+                    }
+                }
+            }
+
+            // Add new rows for any fields that no longer fit in the grid
+            while(content.length){
+                let value = content.shift();
+                if(value){
+                    this.addRow();
+                    this.$set( this.inputVal[this.inputVal.length-1].content, 0, value);
+                }
+            }
+
+        },
+
+
+        /*
+        * Build a row agnostic array of content
+        * Can be called without params, if no content is being added to the grid
+        * 
+        * @param {Number} [row] [the row content is to be added to ]
+        * @param {Number} [column] [the column content is to be added to ]
+        * @param {Object} [dropped_content] Content to add to the given grid reference
+        *
+        * @return { {Array} [column_array] [Array of columns],{Number} [content_inserted_at] [Index of inserted content] }
+        */
+
+
+        buildContentArray(row, column, dropped_content)
+        {
+            let column_array = []; // the array to return
+            let content_inserted_at = false; // have we reached the index that the new content has been added to?
+            let spaceMadeUp = false; // have we managed to make up space for the extra content?
+
+            for (let rowindex = 0; rowindex < this.inputVal.length; rowindex++) {
+                for (let columnindex = 0; columnindex < this.inputVal[rowindex].content.length; columnindex++) {
+
+                    // if we're adding a new column at this grid co-ordinate, add it in here
+                    if(rowindex == row && columnindex == column){
+                        column_array.push(dropped_content); // add in our extra index
+                        content_inserted_at = column_array.length-1;
+                    }
+
+                    // if there's a free space after inserting a new grid content, we remove this to compensate for adding one higher up in the grid
+                    if(content_inserted_at !== false && !this.inputVal[rowindex].content[columnindex] && !spaceMadeUp){
+                        spaceMadeUp = true;
+                    }else{
+                        // the first column in the row doesn't have any content, then don't add to that, so that content always left aligns by default
+                        column_array.push(this.inputVal[rowindex].content[columnindex]);
+                    }
+                }
+            }
+
+            return { column_array:column_array, content_inserted_at: content_inserted_at};
+
+        },
+
+
+        /**
+         * Checks if a given row index has content set
+         * 
+         * @param {Number} [row_index] [index of row to check]
+         * @return Bool
+        */
+        rowHasContent(row_index)
+        {
+            let row_content_found = false;
+            for (let columnindex = 0; columnindex < this.inputVal[row_index].content.length; columnindex++) 
+                if(this.inputVal[row_index].content[columnindex])
+                    row_content_found = true; 
+            return row_content_found;
+        },
+
+
+        /**
+         * Removes excess row content. For example if a layout is [3,3,3] and content is 
+         * [true,false,true,true] then it sets the content to [true, false, true]
+         * 
+         * @return Void
+        */
+        removeExcessContent()
+        {
+            for (let row_index = 0; row_index < this.inputVal.length; row_index++)
+                this.inputVal[row_index].content.length = this.inputVal[row_index].layout.length;    
+        },
+
+        /**
+         * Removes empty rows from the grid
+         * 
+         * @return Void
+        */
+        removeEmptyRows()
+        {
+            this.removeExcessContent();
+            for (let rowindex = 0; rowindex < this.inputVal.length; rowindex++) 
+                if(!this.rowHasContent(rowindex))
+                    this.inputVal.splice(rowindex, 1);
+        },
+
+        /**
+         * Drop content handler 
+         * @param {Number} [row] [row dropped into]
+         * @param {Number} [column] [column dropped into]
+         * @return Void
+        */
+
+        drop(row, column) {
+
+            let dropped_content = this.inputVal[this.draggingIndex[0]].content[this.draggingIndex[1]];
+
+            this.$set( 
+                this.inputVal[this.draggingIndex[0]].content, 
+                this.draggingIndex[1], 
+                null
+            );
+
+            this.updateGridLayout(row, column, dropped_content);
+        
+        },
+
+        /**
+         * Add a blank row to the grid
+        */
+        addRow()
+        {
+            this.inputVal.push({layout:[12], content:[null]});
+        },
+
+        /**
+         * Get a column percentage width
+         * @param {Nunber} [columns] [number of columns (out of 12) the column takes up]
+         * @returns {number} [percentage width]
+        */
+        getColumnWidth(columns)
+        {
+            return 100/(12/columns);
+        }
+
+       
+    }
+}
+
+
+</script>

package/src/components/forms/ToggleInputGroup.vue

@@ -0,0 +1,48 @@
+<template>
+    <div>
+        <ToggleHeaderTextLarge v-if="label">{{label}}</ToggleHeaderTextLarge>
+        <div class="toggle-input-group" >
+            <slot></slot>
+        </div>
+    </div>
+</template>
+
+<script>
+
+import { mixins } from '../mixins/mixins'
+import ToggleHeaderTextLarge from '../text/ToggleHeaderTextLarge.vue';
+
+export default {
+    mixins:[mixins],
+    props: {
+        label: {
+            type: [String,Boolean],
+            required: false
+        }
+    },
+
+    components: {
+
+        ToggleHeaderTextLarge
+
+    },
+
+    data : function(){
+        return {}; 
+    },
+
+    created : function(){
+    },
+    computed: {
+       
+    },
+    methods: {
+
+      
+
+       
+    }
+}
+
+
+</script>

package/src/components/forms/ToggleInputImage.vue

@@ -0,0 +1,168 @@
+<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-image-holder">
+        <div>
+        <draggable
+            class="toggle-draggable-group"
+            tag="ul"
+            v-model="inputVal"
+            v-bind="dragOptions"
+     
+        >
+            <transition-group type="transition" >
+            <li
+                class="toggle-draggable-group-item toggle-dark-grey"
+                v-for="image in images"
+                :key="image.id"
+                :style="{marginRight:thumbnailWidth / 8 + 'px'}"
+
+            >
+                <div class="toggle-item-img toggle-dark-grey toggle-center"
+                     :style="{  background: `rgb(243, 237, 237) url(${image.url}) no-repeat center top`,
+                                height: previewRatio == 'letterbox' ? thumbnailWidth / 2 + 'px': thumbnailWidth+'px',
+                                width: thumbnailWidth+'px'}"
+                >
+                </div>
+                <div class="toggle-center" :style="{height:'35px',margin:'5px'}">
+                <ToggleButton @click="() => removeImage(image.id)"  buttonStyle="mini_delete"  />
+                </div>
+            </li>
+            </transition-group>
+        </draggable>
+        </div>
+        <div v-if="images.length < maxFiles">
+            <div class="toggle-dropzone-container" 
+            :style="{ height: previewRatio == 'letterbox' ? thumbnailWidth / 2 + 'px': thumbnailWidth+'px',
+                      width: thumbnailWidth+'px'}">
+                <ToggleFillLoader  v-if="loading"/>
+                <vue-dropzone 
+                    :ref="_uid" 
+                    class="dropzone"
+                    :id="'dropzone'+_uid" 
+                    :options="dropzoneOptions" 
+                    @vdropzone-file-added="fileAdded" 
+                
+                />
+            </div>
+        </div>
+    </div>
+ 
+    <ToggleHelperTextSmall>{{helperText}}</ToggleHelperTextSmall>
+    <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 ToggleHelperTextSmall from '../text/ToggleHelperTextSmall';
+import ToggleFillLoader from '../loaders/ToggleFillLoader.vue';
+import draggable from "vuedraggable";
+import vue2Dropzone from 'vue2-dropzone';
+import 'vue2-dropzone/dist/vue2Dropzone.min.css'
+
+export default {
+    mixins:[mixins],
+    props: {
+       
+        thumbnailWidth:{
+            type:Number,
+            default:100
+        },
+        fileAdded:{ // function to call when file added to dropzone
+
+        },
+        removeImage:{ // function to call when image 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
+        },
+        images:{
+            type:Array,
+            required:true
+        },
+        maxFiles:{
+            type:Number,
+            default:5
+        },
+        previewRatio:{
+            type:String,
+            default:'letterbox'
+        }
+    },
+
+    components: {
+        vueDropzone: vue2Dropzone,
+        ToggleButton,
+        ToggleFillLoader,
+        draggable,
+        ToggleHelperTextSmall
+    },
+
+
+    created : function(){
+    },
+    computed: {
+         dragOptions() {
+            return {
+                animation: 200,
+                group: "images",
+            };
+        },
+          inputVal: {
+            get: function (){
+                return this.images;
+            },
+
+            set: function (images){
+                this.$emit('orderChanged', images);
+            }
+        }
+    },
+    methods: {
+
+   
+       
+    }
+}
+
+
+</script>
+<style lang="scss">
+
+
+</style>