@qikdev/vue-ui 0.0.1 → 0.0.2

package/src/form/inputs/group.vue

@@ -0,0 +1,155 @@
+<template>
+   
+    <div class="ux-multi-group" v-if="multiValue">
+        <panel ref="row" :key="entry" v-for="(entry, index) in model">
+            <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>
+            </panel-header>
+            <panel-body @keydown.enter="enterPress($event)">
+                <ux-form ref="form" @form:state="stateChange" :parentModel="parentModel" v-model="model[index]" :flex="sameLine" :fields="field.fields" />
+            </panel-body>
+        </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/input-mixin.js

@@ -0,0 +1,440 @@
+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

@@ -0,0 +1,43 @@
+<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>

package/src/form/inputs/object-field.vue

@@ -0,0 +1,50 @@
+<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" :key="index" v-for="(entry, index) in model">
+            <flex-cell>
+                <pre>{{entry}}</pre>
+            </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-icon icon="fa-plus" right/></ux-button>
+    </div>
+    <template v-else>
+        <pre>{{model}}</pre>
+    </template>
+</template>
+<script>
+import InputMixin from './input-mixin';
+
+export default {
+    props: {
+        modelValue: {
+            type:Object,
+        },
+    },
+    mixins: [InputMixin],
+    computed: {
+
+    },
+    methods: {
+        getNewDefaultEntry() {
+            return {};
+        },
+    },
+}
+</script>
+<style lang="scss" scoped>
+ pre {
+    border-radius:0.5em;
+    background: #222;
+    font-size: 0.8em;
+    color: #ddd;
+    padding: 1em;
+    display: block;
+ }
+</style>

package/src/form/inputs/option.vue

@@ -0,0 +1,19 @@
+<template>
+    <slot :plainValue="plainValue">
+        <pre>{{option}}</pre>
+    </slot>
+</template>
+<script>
+export default {
+    props: {
+        option: {
+            required:true,
+        }
+    },
+    computed: {
+        plainValue() {
+            return this.option._id || this.option.value || this.option;
+        },
+    }
+}
+</script>