@qikdev/vue-ui 0.1.1 → 0.1.7

package/src/form/inputs/group.vue

@@ -1,155 +0,0 @@
-<template>
-   
-    <div class="ux-multi-group" v-if="multiValue">
-        <ux-panel ref="row" :key="entry" v-for="(entry, index) in model">
-            <ux-panel-header>
-                <flex-row>
-                    <flex-cell vcenter>
-                        <div>
-                            <strong>{{multiLabel(entry, index)}}</strong>
-                        </div>
-                    </flex-cell>
-                    <flex-cell vcenter shrink>
-                        <ux-button icon tag="a" v-if="canRemoveValue" @click="remove(entry)">
-                            <ux-icon icon="fa-times" />
-                        </ux-button>
-                    </flex-cell>
-                </flex-row>
-            </ux-panel-header>
-            <ux-panel-body @keydown.enter="enterPress($event)">
-                <ux-form ref="form" @form:state="stateChange" :parentModel="parentModel" v-model="model[index]" :flex="sameLine" :fields="field.fields" />
-            </ux-panel-body>
-        </ux-panel>
-        <ux-button v-if="canAddValue" @click="add()">{{addLabel}}
-            <ux-icon icon="fa-plus" right />
-        </ux-button>
-    </div>
-    <template v-else>
-        <ux-form ref="form" @form:state="stateChange"  :parentModel="parentModel" v-model="model" :flex="sameLine" :fields="field.fields" />
-    </template>
-
-    <!-- <pre><strong>{{field.title}}</strong>
-
-    Should be single: {{singleValue}}, {{asObject}}, {{minimum == 1}} {{maximum == 1}}
-    Multi: {{multiValue}};
-    Can Add Value: {{canAddValue}}
-    Number Values: {{numValues}}
-    Model: {{model}}
-</pre> -->
-</template>
-<script>
-import InputMixin from './input-mixin';
-
-
-export default {
-    mixins: [InputMixin],
-    props: {
-        modelValue: {
-            type: [Object, Array],
-        },
-    },
-    // created() {
-    //     // this.value = this.cleanInput(this.value, true);
-    // },
-    computed: {
-        sameLine() {
-            return this.field.sameLine;
-        }
-    },
-    methods: {
-        stateChange(details) {
-            this.$emit('form:state', details);
-        },
-        multiLabel(entry, index) {
-
-            if (entry.name) {
-                return entry.name;
-            }
-
-            if (entry.title) {
-                return entry.title;
-            }
-
-            if (entry.firstName) {
-                return entry.firstName;
-            }
-
-            return `${this.label} ${index+1}`
-        },
-        getNewDefaultEntry() {
-            return {};
-        },
-        enterPress(event) {
-            if (this.canAddValue) {
-                event.stopImmediatePropagation();
-                event.preventDefault();
-                this.add();
-            }
-        },
-        refocus() {
-            this.$nextTick(function() {
-
-                //Find the last row
-                var rows = this.$refs.row;
-                var lastRow = rows[rows.length - 1];
-
-                if (!lastRow) {
-                    return;
-                }
-                var input = lastRow.$el.querySelector('.ux-field-focus');
-
-                if (!input) {
-                    return;
-                }
-                input.focus();
-            })
-        },
-        getNewDefaultEntry() {
-            return {};
-        },
-        // cleanInput(model) {
-
-        //     var self = this;
-        //     var setDefaults = true;
-
-        //     if (self.multiValue) {
-        //         if (!model) {
-        //             model = [];
-        //         }
-
-        //         if (!Array.isArray(model)) {
-        //             model = [model];
-        //         }
-
-        //         /////////////////////////////////
-
-        //         if (self.maximum) {
-        //             if (model.length > self.maximum) {
-        //                 model.length = self.maximum;
-        //             }
-        //         }
-
-        //         var min = setDefaults ? self.ask : self.minimum;
-        //         while (model.length < min) {
-        //             model.push(self.getNewDefaultEntry())
-        //         }
-
-        //     } else {
-        //         if (!model) {
-        //             model = self.getNewDefaultEntry();
-        //         }
-        //     }
-
-        //     ///////////////////////////
-
-
-        //     return model;
-        // }
-    }
-}
-</script>
-<style lang="scss" scoped>
-.ux-multi-group {
-    margin-bottom: 1em;
-}
-</style>

package/src/form/inputs/html.vue

@@ -1,39 +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>
-    <div v-if="multiValue">
-        <flex-row class="ux-text-row">
-            <flex-cell>
-                <div v-html="field.template" :key="index" v-for="(entry, index) in model"></div>
-            </flex-cell>
-            <flex-cell shrink vcenter>
-                <ux-button tag="a" icon v-if="canRemoveValue" @click="remove(entry)">
-                    <ux-icon icon="fa-times" />
-                </ux-button>
-            </flex-cell>
-        </flex-row>
-        <ux-button v-if="canAddValue" @click="add()">{{addLabel}}</ux-button>
-    </div>
-    <template v-else>
-        <div v-html="field.template"></div>
-    </template>
-</template>
-<script>
-import InputMixin from './input-mixin';
-
-export default {
-    props: {
-        modelValue: {
-            type: [String, Array],
-        },
-    },
-    mixins: [InputMixin],
-    methods: {
-        getNewDefaultEntry() {
-            return '';
-        },
-    },
-}
-</script>
-<style lang="scss" scoped>
-</style>

package/src/form/inputs/input-mixin.js

@@ -1,440 +0,0 @@
-function isUndefined(v, type) {
-    return v === undefined ||
-        v === null || (type == 'date' && v.toString && (v.toString() === 'Invalid Date'));
-}
-
-
-
-
-
-export default {
-    props: {
-        field: {
-            type: Object,
-            default () {
-                return {}
-            },
-        },
-        parentModel: {
-            type: Object,
-        },
-    },
-    data() {
-        return {
-            value: this.modelValue,
-        }
-    },
-    watch: {
-        modelValue(val, old) {
-
-            var cleanedValue = this.cleanInput(val);
-            var cleanedModel = this.cleanInput(this.model);
-
-            if (JSON.stringify(cleanedValue) != JSON.stringify(cleanedModel)) {
-                this.model = cleanedValue
-            }
-
-        },
-    },
-    mounted() {
-        this.checkAutofocus();
-    },
-    computed: {
-        optionLookup() {
-            var self = this;
-            return self.options.reduce(function(set, option) {
-                const key = self.getValue(option);
-                set[key] = option;
-                return set;
-            }, {})
-        },
-        selectableOptions() {
-            return this.options;
-        },
-        required() {
-            return this.minimum;
-        },
-        model: {
-            get() {
-                return this.cleanOutput(this.value);
-            },
-            set(val) {
-                this.value = this.cleanInput(val);
-
-                this.checkAutofocus();
-                this.dispatch();
-            }
-        },
-        options() {
-            var self = this;
-            return (this.field.options || []).reduce(function(set, option) {
-                if (!option) {
-                    return set;
-                }
-                const value = self.getValue(option);
-                const title = option.title || option.name || option.label || value;
-
-
-                var output = {
-                    title,
-                    value,
-                    source: option,
-                }
-
-                if (self.field.type == 'reference') {
-                    output._id = value;
-                }
-
-                set.push(output);
-
-                return set;
-            }, [])
-        },
-        prefix() {
-            return this.field.suffix;
-        },
-        suffix() {
-            return this.field.suffix;
-        },
-        type() {
-            if (!this.field) {
-                console.log('TYPE', this.field)
-            }
-            return this.field.type || 'string';
-        },
-        key() {
-            return this.field.key;
-        },
-        isGroup() {
-            return this.type === 'group'
-        },
-        asObject() {
-            return this.isGroup && !!this.field.asObject;
-        },
-        layoutGroup() {
-            return this.isGroup && !this.field.asObject;
-        },
-        canAddValue() {
-
-            if (this.singleValue) {
-                return;
-            }
-
-            return this.maximum === 0 || this.numValues < this.maximum;
-        },
-        canRemoveValue() {
-            return this.numValues > this.minimum;
-        },
-        singleValue() {
-            if (this.asObject) {
-                var isSingle = this.minimum === 1 && this.maximum === 1;
-                return isSingle;
-            } else {
-                return this.maximum === 1;
-            }
-        },
-        multiValue() {
-            return !this.singleValue;
-        },
-        label() {
-            return this.field.title;
-        },
-        description() {
-            return this.field.description;
-        },
-        placeholder() {
-            return this.field.placeholder || this.field.hint;
-        },
-        addLabel() {
-            if (this.numValues) {
-                return `Add another ${this.label}`
-
-            } else {
-                return `Add ${this.label}`
-            }
-        },
-        removeLabel() {
-            return `Remove`
-        },
-        numValues() {
-            if (this.singleValue) {
-                return 1;
-            }
-            return (this.value || []).length || 0;
-        },
-
-        showLabel() {
-            return this.field.title;
-        },
-        showDescription() {
-            return this.description;
-        },
-        fields() {
-            var subFields = this.field.fields;
-
-            if (subFields && subFields.length) {
-                return subFields;
-            }
-        },
-        minimum() {
-            if (this.layoutGroup) {
-                return 1;
-            }
-
-            var int = parseInt(this.field.minimum || 0);
-            if (isNaN(int)) {
-                int = 0;
-            }
-
-            int = Math.max(int, 0)
-            int = this.maximum ? Math.min(int, this.maximum) : int;
-            return parseInt(int);
-        },
-        maximum() {
-            if (this.layoutGroup) {
-                return 1;
-            }
-
-            var int = parseInt(this.field.maximum || 0);
-            if (isNaN(int)) {
-                int = 0;
-            }
-            int = Math.max(int, 0)
-            return parseInt(int);
-        },
-        ask() {
-            var int = parseInt(this.field.ask);
-            int = Math.max(int, this.minimum);
-            if (this.maximum) {
-                int = Math.min(int, this.maximum);
-            }
-
-            return int;
-        },
-    },
-    methods: {
-        cleanTextInput(val, type, instance) {
-            switch (type) {
-                case 'url':
-                    val = instance.$qik.utils.parseURL(val);
-                    break;
-                case 'key':
-                    val = instance.$qik.utils.machineName(val);
-                    break;
-                case 'integer':
-                    val = parseInt(String(val).replace(/[^0-9-]/g, ''));
-                    if (isNaN(val)) {
-                        val = undefined;
-                    }
-                    break;
-                case 'number':
-                case 'decimal':
-                case 'float':
-                    val = Number(String(val).replace(/[^0-9.-]/g, ''));
-                    if (isNaN(val)) {
-                        val = undefined;
-                    }
-                    break;
-            }
-            return val;
-        },
-        checkAutofocus() {
-            if (this.field.autofocus) {
-
-                if (this.value) {
-                    return;
-                }
-
-                this.$nextTick(function() {
-
-
-                    this.refocus();
-                })
-            }
-        },
-        getValue(option) {
-            if (!option) {
-                return;
-            }
-
-            //Get the value of the object
-            var value = option._id || option.value;
-
-            //If we have a title but no value
-            if(!value && option.title && !this.returnObject) {
-                //user the title as the value
-                value = option.title;
-            }
-
-            //Return the value or the option itself
-            return value || option;
-        },
-        getLabel(option) {
-            if (!option) {
-                return;
-            }
-
-            var label = option.title || option.name || option.label;
-
-            if(typeof label == 'object') {
-                return '(no title)'
-            } else {
-                return label
-            }
-        },
-        touch() {
-            this.$emit('touched');
-        },
-        getNewDefaultEntry() {
-            return undefined;
-        },
-        add() {
-            if (!this.canAddValue) {
-                return;
-            }
-
-            var defaultEntry = this.cleanInputValue(this.getNewDefaultEntry());
-
-            if (!this.value || !Array.isArray(this.value)) {
-                this.value = []
-            }
-
-            this.value.push(defaultEntry);
-            this.dispatch();
-
-            this.$nextTick(function() {
-                this.refocus()
-            })
-
-            this.touch();
-        },
-        remove(entry) {
-            var index = this.model.indexOf(entry);
-            this.value.splice(index, 1);
-            this.dispatch();
-            this.touch();
-        },
-        dispatch() {
-            this.$emit('update:modelValue', this.value);
-        },
-
-        cleanInputValue(val) {
-            // if (!isUndefined(val, this.type)) {
-            //     switch (this.type) {
-            //         case 'integer':
-            //             val = parseInt(val);
-            //             break;
-            //         case 'float':
-            //         case 'decimal':
-            //         case 'number':
-            //             val = Number(val);
-            //             break;
-            //     }
-            // }
-
-            return val;
-        },
-        cleanOutputValue(val) {
-            return val;
-        },
-        cleanOutput(val) {
-
-            var self = this;
-
-
-
-
-            if (isUndefined(val, self.field.type)) {
-                if (self.multiValue) {
-                    val = [];
-                } else {
-                    val = undefined;
-                }
-            } else {
-                if (self.multiValue) {
-
-                    if (!Array.isArray(val)) {
-                        val = []
-                    }
-
-                    val.forEach(function(v, i) {
-                        val[i] = self.cleanOutputValue(v);
-                    });
-                    // val = val.map(function(i) {
-                    //     return self.cleanOutputValue(i)
-                    // })
-                } else {
-                    val = self.cleanOutputValue(val)
-                }
-            }
-
-            return val;
-        },
-
-        cleanInput(val) {
-            var input = 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;
-                    }
-                }
-
-                while (val.length < self.minimum) {
-                    val.push(self.cleanInputValue(self.getNewDefaultEntry()));
-                }
-
-                val = val.map(function(v) {
-                    var d = self.cleanInputValue(v)
-                    // toISO(v)
-                    return d;
-                })
-            } else {
-                if (val) {
-                    // val = toISO(val)
-                    val = self.cleanInputValue(val)
-                }
-            }
-
-
-            var out = val;
-            return val;
-        },
-
-
-
-        refocus() {
-            var elements = this.$refs.input;
-
-            if (!elements) {
-                return;
-            }
-
-
-            var input;
-            if (Array.isArray(elements)) {
-                input = elements[elements.length - 1];
-            } else {
-                input = elements;
-            }
-
-            if (input) {
-
-                input.focus();
-            }
-        },
-    }
-}

package/src/form/inputs/native-select-old.vue

@@ -1,43 +0,0 @@
-<template>
-    <div class="native-select">
-        <select v-model="model">
-            <option :value="option.value" v-for="option in selectableOptions">{{option.label}}</option>
-        </select>
-        <slot />
-    </div>
-</template>
-<script>
-    
-import InputMixin from './input-mixin';
-
-export default {
-    mixins:[InputMixin],
-    computed: {
-        selectableOptions() {
-            return this.options.map(function(option) {
-                const value = option.value || option;
-                const label = option.title || option.name || option.label || value;
-
-                return {
-                    label,
-                    value,
-                }
-            })
-        },
-    }
-}
-</script>
-<style lang="scss" scoped>
-.native-select {
-    position: relative;
-
-
-    select {
-        opacity: 0;
-        appearance: none;
-        width: 100%;
-        height: 100%;
-        position: absolute;
-    }
-}
-</style>