@qikdev/vue-ui 0.0.5 → 0.1.6

package/src/form/inputs/type-select.vue

@@ -1,247 +0,0 @@
-<template>
-    <div class="native-select" :class="classes">
-        <label class="ux-field-title" v-if="showLabel">{{label}} <span class="ux-required-marker" v-if="required">*</span></label>
-        <div class="ux-field-description" v-if="showDescription">{{description}}</div>
-        <div class="ui-select-button" v-if="singleValue">
-            <slot>
-                <ux-button tag="div">
-                    {{summary}}
-                </ux-button>
-            </slot>
-        </div>
-        <select @focus="touch" :multiple="multiValue" v-model="model">
-            <option value="" v-if="singleValue && !minimum">None</option>
-            <option :value="option.value" v-for="option in selectableOptions">{{option.title}}</option>
-        </select>
-    </div>
-</template>
-<script>
-import InputMixin from './input-mixin';
-
-
-
-function isUndefined(entry) {
-    return entry === undefined || typeof entry === 'undefined' || entry === null || String(entry) === 'null' || String(entry) === 'undefined';
-}
-
-//////////////////////////
-
-export default {
-    props: {
-        title: {
-            type: String,
-        },
-        modelValue: {
-            // type: [Object, Array],
-        },
-    },
-    mixins: [InputMixin],
-    async created() {
-        this.model = this.model;
-
-        var glossary = await this.$qik.content.glossary();
-
-
-        var typeList = glossary;
-
-        if (this.field.basicTypes === false) {
-            typeList = typeList.filter(function(definition) {
-                return !!definition.definesType
-            })
-        }
-
-        if (this.field.definedTypes === false) {
-            typeList = typeList.filter(function(definition) {
-                return !definition.definesType
-            })
-        }
-
-        ////////////////////////////
-
-        typeList = typeList.map(function(definition) {
-                return {
-                    title: definition.title,
-                    value: definition.key,
-                }
-            })
-            .sort((a, b) => a.title > b.title ? 1 : -1);
-
-        ////////////////////////////
-
-        this.types = typeList;
-    },
-    data() {
-        return {
-            types: [],
-        }
-    },
-    methods: {
-        cleanOutput(val) {
-            var self = this;
-
-            if (isUndefined(val)) {
-                if (self.multiValue) {
-                    val = [];
-                } else {
-                    val = undefined;
-                }
-            } else {
-                if (self.multiValue) {
-                    val = (val || []).filter(Boolean).map(function(i) {
-                        return self.getValue(i);
-                    })
-                } else {
-                    val = self.getValue(val);
-                }
-            }
-
-            return val;
-        },
-        cleanInput(val) {
-
-            var self = this;
-
-            if (self.multiValue) {
-                if (!val) {
-                    val = [];
-                }
-
-                if (!Array.isArray(val)) {
-                    val = [val];
-                }
-
-                /////////////////////////////////
-
-                if (self.maximum) {
-                    if (val.length > self.maximum) {
-                        val.length = self.maximum;
-                    }
-                }
-
-
-                val = val.filter(Boolean).map(function(v) {
-                    var valueKey = self.getValue(v);
-                    return self.returnObject ? self.optionLookup[valueKey] : valueKey;
-                })
-
-            } else {
-                var valueKey = self.getValue(val);
-                val = self.returnObject ? self.optionLookup[valueKey] : valueKey;
-            }
-
-            return val;
-        },
-    },
-    computed: {
-        returnObject() {
-            return false;
-        },
-        classes() {
-            var array = []
-
-            if (this.multiValue) {
-                array.push('multiple');
-            } else {
-                array.push('single');
-            }
-
-            return array;
-        },
-        // model: {
-        //     get() {
-        //         let val = this.cleanOutput(this.value);
-        //         return val;
-        //     },
-        //     set(val) {
-        //         val = this.cleanInput(val);
-        //         // // var val = this.cleanOutput(newValue);
-        //         // // var existing = this.cleanOutput(this.value);
-
-        //         // if (newValue != existing) {
-        //         //     newValue = this.cleanInput(val);
-        //         //     this.value = newValue;
-        //         //     this.dispatch();
-        //         // }
-
-        //         this.value = val;
-        //         this.dispatch();
-
-        //     }
-        // },
-        optionLookup() {
-            var self = this;
-            return self.types.reduce(function(set, option) {
-                const key = self.getValue(option);
-                set[key] = option;
-                return set;
-            }, {})
-        },
-        summary() {
-            return this.model ? this.getLabel(this.optionLookup[this.model]) : this.title || 'Click to select';
-        },
-
-        selectableOptions() {
-
-            return this.types;
-            // return this.options
-            // .sort(function(option) {
-            //     return option.title;
-            // });
-            // if(this.type == 'reference') {
-
-            // } else {
-
-            // }
-
-        },
-    }
-}
-</script>
-<style lang="scss" scoped>
-.native-select {
-
-    cursor: pointer;
-
-    &.multiple {
-        select {
-            width: 100%;
-            font-size: 1em;
-            border: 1px solid rgba(#000, 0.1);
-            appearance: none;
-
-            &:focus {
-                border: 1px solid $primary;
-            }
-        }
-    }
-
-    &.single {
-        position: relative;
-
-        .ui-select-button {
-            position: relative;
-            width: 100%;
-
-            &>.ux-btn {
-                display: block;
-                text-align: left;
-            }
-        }
-
-        select {
-            cursor: pointer;
-            opacity: 0;
-            appearance: none;
-            width: 100%;
-            height: 100%;
-            position: absolute;
-            top: 0;
-            left: 0;
-            bottom: 0;
-            right: 0;
-        }
-    }
-
-
-}
-</style>

package/src/form/inputs/upload/filedrop.vue

@@ -1,72 +0,0 @@
-<template>
-    <label class="file-drop" @dragover.prevent.stop="fileover" @drop.prevent.stop="filedrop">
-        <input ref="file" type="file" :multiple="multiple" @change="filesSelected($event.target.files)">
-        <div class="file-drop-ux" @click="clicked">
-            <slot>
-                <ux-button>Select Files</ux-button>
-            </slot>
-        </div>
-    </label>
-    
-</template>
-<script>
-
-////////////////////////////////////
-
-export default {
-    props:{
-        multiple:{
-            type:Boolean,
-        }
-    },
-    methods: {
-        clicked() {
-            if(!this.multiple) {
-                this.$refs.file.value = null;
-            }
-            this.$refs.file.click();
-        },
-        fileover(event) {
-
-        },
-        filedrop(event) {
-
-        },
-        filesSelected(files) {
-            console.log('FILES SELECTED', files);
-            var mapped = [];
-
-            for (var f in [...files]) {
-                var file = files[f];
-                mapped.push({
-                    file,
-                    data: {},
-                    name: file.name,
-                    size: file.size,
-                    state: '',
-                })
-            }
-
-            this.$emit('files', mapped);
-        }
-    }
-}
-</script>
-<style lang="scss" scoped>
-.file-drop {
-    // display: block;
-    // border: 2px solid green;
-    // position:relative;
-
-    input {
-        // position:absolute;
-        // left:0;
-        // top:0;
-        // right:0;
-        // bottom:0;
-        // width:100%;
-        // height:100%;
-        display: none;
-    }
-}
-</style>

package/src/form/inputs/upload/upload.vue

@@ -1,323 +0,0 @@
-<template>
-    <label class="ux-field-title" v-if="showLabel">{{label}} <span class="ux-required-marker" v-if="required">*</span></label>
-    <div class="ux-field-description" v-if="showDescription">{{description}}</div>
-    <!--     <template v-if="multiValue">
-        <div class="items" v-if="model && model.length">
-            <div v-for="(item, index) in model">
-                {{item.title}}
-                    <ux-button icon @click="remove(item)">
-                        <ux-icon icon="fa-times" />
-                    </ux-button>
-               
-            </div>
-        </div>
-    </template> -->
-    <!-- <template v-else-if="model">
-        <div class="items">
-            <item :item="model">
-                <template #actions>
-                    <ux-button icon @click="clear">
-                        <ux-icon icon="fa-times" />
-                    </ux-button>
-                </template>
-            </item>
-        </div>
-    </template> -->
-    <div class="files" v-if="files && files.length">
-        <div class="file-item" :key="index" v-for="(file, index) in files">
-            <flex-row>
-                <flex-cell>
-                    <strong>{{file.name}}</strong>
-                    <div class="size">{{filesize(file.size)}}</div>
-                    <progress-bar :value="file.progress" />
-                </flex-cell>
-                <flex-cell shrink>
-                    <ux-button icon @click="remove(index)">
-                        <ux-icon icon="fa-times" />
-                    </ux-button>
-                </flex-cell>
-            </flex-row>
-        </div>
-    </div>
-    <template v-if="multiValue">
-        <template v-if="canAddValue">
-            <file-drop :multiple="multiValue" @files="filesSelected">
-                <ux-button>Select Files</ux-button>
-            </file-drop>
-        </template>
-    </template>
-    <template v-else>
-        <file-drop @files="filesSelected">
-            <ux-button>Select File</ux-button>
-        </file-drop>
-    </template>
-    <!-- <label class="file-drop" v-if="canAddValue" @dragover.prevent.stop="fileover" @drop.prevent.stop="filedrop">
-        <input ref="file" type="file" :multiple="multiValue" @change="filesSelected($event.target.files)">
-    </label>
-    <ux-button @click="selectFiles">Select Files</ux-button> -->
-</template>
-<script>
-import InputMixin from '../input-mixin';
-import FileDrop from './filedrop.vue';
-// import _values from 'lodash/values';
-// import _get from 'lodash/get';
-
-////////////////////////////////////
-
-// function uniq(array, field) {
-
-//     var set = {};
-
-//     for(var i in array) {
-//         var item = array[i];
-//         var pluckedValue = _get(item, field);
-//         set[pluckedValue] = item;
-//     }
-
-//     return _values(set)
-// }
-
-////////////////////////////////////
-
-export default {
-    mixins: [InputMixin],
-    components: {
-        FileDrop,
-    },
-    props: {
-        // modelValue: {
-        //     type: [Object, Array],
-        //     default () {
-        //         return [];
-        //     },
-        // },
-    },
-    data() {
-        return {
-            files: [],
-            bytesUploaded: 0,
-            state: 'ready',
-        }
-    },
-    methods: {
-        filesize(size) {
-            return this.$qik.files.filesize(size);
-        },
-        remove(index) {
-
-            var self = this;
-            var fileItem = self.files[index];
-
-            //Cancel the upload
-            // fileItem.cancel();
-            if (fileItem.cancelToken) {
-                fileItem.cancelToken.cancel('Operation canceled by the user.');
-            }
-
-            self.files.splice(index, 1);
-            console.log('Map to values', self.files)
-            self.mapFilesToValues();
-        },
-        upload(fileItem) {
-            var self = this;
-
-            switch (fileItem.state) {
-                case 'complete':
-                case 'processing':
-                    return;
-                    break;
-            }
-
-            fileItem.state = 'processing';
-
-            //Create a new form object
-            var body = new FormData();
-            var jsonData = {};
-
-            /////////////////////////////////////////////
-
-            //Add the JSON data 
-
-
-            var allScopeIDs = self.user ? Object.keys(self.user.permissions) : [];
-
-            jsonData.meta = {
-                scopes: allScopeIDs
-            }
-
-            body.append('json', JSON.stringify(jsonData));
-            body.append('file', fileItem.file, fileItem.name)
-
-            var config = {
-                headers: {
-                    'Content-Type': 'multipart/form-data'
-                },
-                onUploadProgress: progressEvent => {
-
-                    let percentCompleted = Math.floor((progressEvent.loaded * 100) / progressEvent.total);
-                    fileItem.progress = percentCompleted;
-                    fileItem.bytesUploaded = progressEvent.loaded;
-                    fileItem.bytesTotal = progressEvent.total;
-
-                    ///////////////////////////////////////////////////
-
-                    //Update the bytes loaded from all the files in the array
-                    self.bytesUploaded = self.files.reduce(function(set, file) {
-                        if (file.state == 'complete') {
-                            set += file.size || file.bytesTotal || 0;
-                        } else {
-                            set += file.bytesUploaded || 0;
-                        }
-                        return set;
-                    }, 0)
-                }
-            }
-
-            ///////////////////////////////////////////////////
-
-            const CancelToken = self.$qik.api.CancelToken;
-            const source = CancelToken.source();
-            config.cancelToken = source.token;
-            fileItem.cancelToken = source;
-
-            //Set headers to undefined content type
-            config.headers = {
-                'Content-Type': undefined
-            }
-
-            ///////////////////////////////////////////////////
-
-            return self.$qik.api.post(`/file/upload`, body, config)
-                .then(function(res) {
-                    fileItem.state = 'complete';
-                    fileItem.result = res.data;
-                    // fileItem.attachmentID = res.data._id;
-                    fileItem.cancelToken = null;
-                    self.uploadNextFile();
-                })
-                .catch(function(err) {
-                    fileItem.state = 'error';
-                    fileItem.cancelToken = null;
-                    self.uploadNextFile();
-                });
-
-        },
-
-        uploadNextFile() {
-            var self = this;
-            self.state = 'uploading';
-
-            ///////////////////////////////////////////
-
-            var nextFile = self.files.find(function(fileItem) {
-                switch (fileItem.state) {
-                    case 'complete':
-                    case 'error':
-                        return;
-                        break;
-                    default:
-                        return true;
-                        break;
-                }
-            })
-
-            ///////////////////////////////////////////
-
-            if (nextFile) {
-                self.upload(nextFile);
-            } else {
-                self.state = 'ready';
-            }
-
-            ///////////////////////////////////////////
-
-            self.mapFilesToValues();
-        },
-
-        mapFilesToValues() {
-            var self = this;
-
-            if (self.multiValue) {
-                self.model = self.files.map(function(item) {
-                    return item.result;
-                });
-            } else {
-
-                var first = self.files[0];
-                if (!first) {
-                    return self.model = undefined;
-                }
-
-                self.model = first.result;
-            }
-
-            console.log('NEW MODEL', self.model)
-        },
-
-
-        fileover(event) {
-
-        },
-        filedrop(event) {
-
-        },
-        filesSelected(files) {
-            this.touch();
-
-            console.log('FILES SELECTED', files);
-            if(this.multiValue) {
-                this.files = [...this.files, ...files];
-            } else {
-                this.files = files;
-            }
-
-            
-            return this.uploadNextFile();
-
-            // var mapped = [];
-
-            // for (var f in [...files]) {
-            //     var file = files[f];
-            //     mapped.push({
-            //         file,
-            //         data: {},
-            //         name: file.name,
-            //         size: file.size,
-            //         state: '',
-            //     })
-            // }
-
-            // this.files = mapped; //uniq([...this.files, mapped], 'name');
-            // // console.log('FILES YO', this.files)
-
-            // 
-        }
-    },
-    computed: {
-
-    }
-}
-</script>
-<style lang="scss" scoped>
-.files {
-    border: 1px solid rgba(#000, 0.1);
-
-    .file-item {
-        padding: 0.5em;
-        border-bottom: 1px solid rgba(#000, 0.1);
-
-        .size {
-            font-size: 0.8em;
-            opacity: 0.5;
-        }
-        
-        .ux-progress {
-            margin:0 !important;
-        }
-
-        &:last-child {
-            border-bottom: none;
-        }
-    }
-}
-</style>

package/src/form/parseBoolean.js

@@ -1,24 +0,0 @@
-export default function(value) {
-    switch (String(value).toLowerCase()) {
-        case 'true':
-        case 'y':
-        case 'yes':
-        case '1':
-        case 't':
-            value = true;
-            break;
-        case 'false':
-        case 'n':
-        case 'no':
-        case '0':
-        case 'f':
-        case 'undefined':
-        case 'null':
-        case '':
-        case '-1':
-            value = false;
-            break;
-    }
-
-    return !!value;
-}

package/src/layout/flex-body.vue

@@ -1,23 +0,0 @@
-<template>
-    <div class="flex-column-body">
-        <slot></slot>
-    </div>
-</template>
-<script>
-export default {
-}
-</script>
-
-
-<style scoped lang="scss">
-.flex-column-body {
-    overflow-y: auto;
-    overflow-x: hidden;
-    -webkit-overflow-scrolling: touch;
-    flex: 1;
-
-    overscroll-behavior-x: none !important;
-    // overscroll-behavior-y: none !important;
-    // overscroll-behavior: none !important;
-}
-</style>