@qikdev/vue-ui 0.0.1 → 0.0.2

package/src/form/form.vue

@@ -0,0 +1,280 @@
+<template>
+    <div class="ux-form" :class="formClass">
+        <slot name="fields" :fields="renderFields" :hash="fieldHash">
+            <ux-field ref="field" @field:mount="fieldMounted" @field:unmount="fieldUnmounted" @field:dirty="fieldDirty" @field:invalid="fieldInvalid" @field:valid="fieldValid" @field:error="fieldError" @field:focus="fieldFocus" @field:blur="fieldBlur" @field:touched="fieldTouch" :field="field" v-model="formModel" :parentModel="parentModel || formModel" :class="fieldClass" :key="`ux-form-field-${field.key}-${index}`" v-for="(field, index) in renderFields" />
+        </slot>
+    </div>
+</template>
+<script>
+import UXField from './field.vue';
+import debounce from 'lodash/debounce';
+
+export default {
+    props: {
+        parentModel: {
+            type: Object,
+        },
+        fields: {
+            type: Array,
+            default () {
+                return []
+            }
+        },
+        modelValue: {
+            type: Object,
+            default () {
+                return {}
+            }
+        },
+        flex: {
+            type: Boolean,
+            default: false,
+        },
+    },
+    watch: {
+        modelValue(val, old) {
+            this.model = val;
+        },
+    },
+    data() {
+
+        // console.log('start', JSON.parse(JSON.stringify(this.modelValue)));
+
+        return {
+            mounted: false,
+            model: this.modelValue,
+            touched: false,
+            invalid: false,
+            error: false,
+            dirty: false,
+            focussed: false,
+        }
+    },
+    mounted() {
+        this.mounted = true;
+    },
+    beforeUnmount() {
+        this.mounted = false;
+    },
+
+    methods: {
+        reset() {
+
+        },
+        fieldUnmounted(field) {
+            this.fieldStateChange(field, 'unmount');
+            this.$emit('field:unmount', this);
+        },
+        fieldMounted(field) {
+            this.fieldStateChange(field, 'unmount');
+            this.$emit('field:mount', this);
+        },
+        fieldDirty(field) {
+            this.fieldStateChange(field, 'dirty');
+            this.$emit('field:dirty', this);
+        },
+        fieldInvalid(field) {
+            this.fieldStateChange(field, 'invalid');
+            this.$emit('field:invalid', this);
+        },
+        fieldValid(field) {
+            this.fieldStateChange(field, 'valid');
+            this.$emit('field:valid', this);
+        },
+        fieldError(field) {
+            this.fieldStateChange(field, 'error');
+            this.$emit('field:error', this);
+        },
+        fieldFocus(field) {
+            this.fieldStateChange(field, 'focus');
+            this.$emit('field:focus', this);
+        },
+        fieldBlur(field) {
+            this.fieldStateChange(field, 'blur');
+            this.$emit('field:blur', this);
+        },
+        fieldTouch(field) {
+            this.fieldStateChange(field, 'touch');
+            this.$emit('field:touch', this);
+        },
+        fieldStateChange(triggerField, event) {
+            var self = this;
+
+
+            self.$nextTick(function() {
+                var dirty = false;
+                var invalid = false;
+                var error = false;
+                var touched = false;
+                var focussed = false;
+                var invalidFields = [];
+
+                //If we are actually on the screen
+
+                self.childFields.forEach(function(field) {
+
+                    if (field.dirty) {
+                        dirty = true;
+                    }
+
+                    if (field.invalid) {
+                        invalid = true;
+                        invalidFields.push({
+                            title:field.field.title,
+                            key:field.field.key,
+                        });
+                    }
+
+                    if (field.error) {
+                        error = true;
+                    }
+
+                    if (field.touched) {
+                        touched = true;
+                    }
+
+                    if (field.focussed) {
+                        focussed = true;
+                    }
+
+                })
+
+
+
+                self.dirty = dirty;
+                self.error = error;
+                self.touched = touched;
+                self.focussed = focussed;
+                self.invalid = invalid;
+                self.$emit('form:state', {
+                    dirty,
+                    error,
+                    focussed,
+                    touched,
+                    invalid,
+                    valid: !invalid,
+                    invalidFields,
+                });
+            })
+
+
+        },
+
+    },
+    components: {
+        UxField: UXField,
+    },
+    computed: {
+        fieldHash() {
+            return this.renderFields.reduce(function(set,field) {
+                set[field.key] = field;
+                return set;
+            }, {});
+        },
+        valid() {
+            return !this.invalid;
+        },
+        childFields() {
+            var self = this;
+
+            var directRefs = [];
+
+            if (!self.mounted) {
+                return [];
+            }
+
+            findRecursive(this.$refs, directRefs);
+
+            function findRecursive($refs, collection) {
+
+                var fields = $refs.field ? $refs.field : [];
+                var groups = $refs.group ? $refs.group : [];
+                var forms = $refs.form ? $refs.form : [];
+
+                ////////////////////////////////////////
+
+                if (fields && !Array.isArray(fields)) {
+                    fields = [fields];
+                }
+
+                if (groups && !Array.isArray(groups)) {
+                    groups = [groups];
+                }
+
+                if (forms && !Array.isArray(forms)) {
+                    forms = [forms];
+                }
+
+                ////////////////////////////////////////
+
+                fields.forEach(function(field) {
+                    if (field.visible) {
+                        collection.push(field);
+                        findRecursive(field.$refs, collection);
+                    }
+                })
+
+                groups.forEach(function(group) {
+                    findRecursive(group.$refs, collection);
+                })
+
+                forms.forEach(function(form) {
+                    findRecursive(form.$refs, collection);
+                })
+            }
+
+            return directRefs;
+
+        },
+
+
+        formClass() {
+            var array = [];
+
+            if (this.flex) {
+                array.push('ux-form-flex');
+            }
+            return array;
+        },
+
+        fieldClass() {
+            var array = [];
+
+            if (this.flex) {
+                array.push('ux-field-flex');
+            }
+            return array;
+        },
+        formModel: {
+            get() {
+                return this.model;
+            },
+            set(value) {
+                this.model = value;
+                this.$emit('update:modelValue', this.model);
+
+            },
+        },
+        renderFields() {
+            return this.fields;
+        }
+    }
+}
+</script>
+<style lang="scss" scoped>
+.ux-form-flex {
+    display: flex;
+    flex: 1;
+    gap: 2em;
+
+    .ux-field-flex {
+        flex: 1;
+        // display: flex;
+        // align-items: flex-end;
+
+        // & > .ux-field {
+        // flex:1;
+        // }
+    }
+}
+</style>

package/src/form/getDefaultValue.js

@@ -0,0 +1,224 @@
+import parseBoolean from './parseBoolean';
+
+
+function ensureMinimum(field, array, min, ask, max, func) {
+
+    array = array || [];
+
+
+    min = Math.max(min, ask);
+
+    var length = array.length;
+    var meetsMinimum = length >= min;
+    var meetsMaximum = length <= max;
+
+    if (!meetsMinimum) {
+        if (field.key == 'multiNumber') {
+            console.log(field.key, min)
+        }
+        var difference = min - length;
+        var extras = Array(difference).fill().map(func);
+        return [...array, ...extras];
+    }
+
+    return array;
+
+}
+
+//////////////
+
+export default function getDefaultValue(fieldData, currentValue) {
+
+    if (currentValue) {
+        return currentValue;
+    }
+
+    function isUndefined(entry) {
+        return entry === undefined || typeof entry === 'undefined' || entry === null;
+    }
+
+    /////////////////////////////////////
+
+    var minimum = parseInt(fieldData.minimum);
+    var maximum = parseInt(fieldData.maximum);
+    var ask = parseInt(fieldData.ask || 0);
+
+    //Ensure that the ask is always at least the minimum
+    ask = Math.max(ask, minimum);
+    //Ensure that if there is a maximum set it's never more than the maximum
+    ask = maximum ? Math.min(ask, maximum) : ask;
+
+    var singleValue = (maximum == 1);
+    var multiValue = !singleValue;
+    var defaultValues = (fieldData.type === 'reference' ? fieldData.defaultReferences : fieldData.defaultValues) || [];
+    var firstDefaultValue = defaultValues[0];
+
+    /////////////////////////////////////
+
+    var output;
+
+
+
+    switch (fieldData.type) {
+        case 'date':
+
+            function getDate(v) {
+
+                switch (String(v).toLowerCase()) {
+                    case 'now':
+                        return new Date();
+                        break;
+                }
+
+                return new Date(v);
+            }
+
+            if (multiValue) {
+                if (defaultValues.length) {
+                    if (maximum) {
+                        output = defaultValues.slice(0, maximum).map(function(v) {
+                            return getDate(v)
+                        });
+                    } else {
+                        output = defaultValues.slice().map(function(v) {
+                            return getDate(v)
+                        });
+                    }
+                }
+
+                output = ensureMinimum(fieldData, output, minimum, ask, maximum, function() {
+                    return getDate(new Date());
+                })
+            } else {
+                output = isUndefined(firstDefaultValue) ? undefined : getDate(firstDefaultValue);
+            }
+
+            break;
+        case 'integer':
+            // if (multiValue) {
+
+            //     if (defaultValues.length) {
+            //         if (maximum) {
+            //             output = defaultValues.slice(0, maximum).map(function(val) {
+            //                 return parseInt(val);
+            //             });
+
+            //         } else {
+            //             output = defaultValues.slice().map(function(val) {
+            //                 return parseInt(val);
+            //             });
+            //         }
+            //     }
+
+            //     output = ensureMinimum(fieldData, output, minimum, ask, maximum, function() {
+            //         return 0;
+            //     })
+            // } else {
+            //     output = isUndefined(firstDefaultValue) ? undefined : parseInt(firstDefaultValue);
+            // }
+            // break;
+        case 'decimal':
+        case 'number':
+        case 'float':
+            if (multiValue) {
+                if (defaultValues.length) {
+                    if (maximum) {
+                        output = defaultValues.slice(0, maximum).map(function(val) {
+                            return Number(val);
+                        });
+                    } else {
+                        output = defaultValues.slice().map(function(val) {
+                            return Number(val);
+                        });
+                    }
+                }
+
+                output = ensureMinimum(fieldData, output, minimum, ask, maximum, function() {
+                    return '';
+                })
+            } else {
+                output = isUndefined(firstDefaultValue) ? undefined : Number(firstDefaultValue);
+            }
+            break;
+        case 'group':
+            if (fieldData.asObject) {
+                var number = ask;
+                if (multiValue) {
+                    if (number > 0) {
+                        output = Array(number).fill().map(function() {
+                            return {}
+                        });
+                    } else {
+                        output = [];
+                    }
+
+                } else {
+                    output = isUndefined(firstDefaultValue) ? {} : firstDefaultValue;
+                }
+            }
+            break;
+        case 'boolean':
+
+            if (multiValue) {
+                if (defaultValues.length) {
+                    if (maximum) {
+                        output = defaultValues.slice(0, maximum).map(function(val) {
+                            return parseBoolean(val);
+                        });
+                    } else {
+                        output = defaultValues.slice().map(function(val) {
+                            return parseBoolean(val);
+                        });
+                    }
+                }
+
+                output = ensureMinimum(fieldData, output, minimum, ask, maximum, function() {
+                    return;
+                })
+            } else {
+                output = isUndefined(firstDefaultValue) ? false : parseBoolean(firstDefaultValue);
+            }
+
+            break;
+        case 'reference':
+            if (multiValue) {
+                if (defaultValues.length) {
+                    output = defaultValues.slice(0, maximum);
+                } else {
+                    output = [];
+                }
+            } else {
+                output = isUndefined(firstDefaultValue) ? undefined : firstDefaultValue;
+            }
+            break;
+        case 'string':
+            if (multiValue) {
+                if (defaultValues.length) {
+                    output = defaultValues.slice(0, maximum);
+                }
+
+                output = ensureMinimum(fieldData, output, minimum, ask, maximum, function() {
+                    return '';
+                })
+            } else {
+                output = isUndefined(firstDefaultValue) ? '' : firstDefaultValue;
+            }
+            break;
+        default:
+            if (multiValue) {
+                if (defaultValues.length) {
+                    output = defaultValues.slice(0, maximum);
+                }
+
+                output = ensureMinimum(fieldData, output, minimum, ask, maximum, function() {
+                    return;
+                })
+            } else {
+                output = isUndefined(firstDefaultValue) ? '' : firstDefaultValue;
+            }
+            break;
+    }
+
+    return output;
+
+}

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

@@ -0,0 +1,208 @@
+<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 class="buttons">
+        <option-slot :option="option" v-slot="{plainValue}" v-for="option in selectableOptions">
+            <ux-button :class="{active:selectionHash[plainValue]}" @click="toggle(plainValue)">
+                {{getLabel(option)}}
+                <ux-icon icon="fa-check" right />
+            </ux-button>
+        </option-slot>
+    </div>
+</template>
+<script>
+import InputMixin from './input-mixin';
+import OptionSlot from './option.vue';
+
+
+function isUndefined(entry) {
+    return entry === undefined || typeof entry === 'undefined' || entry === null || String(entry) === 'null' || String(entry) === 'undefined';
+}
+
+//////////////////////////
+
+export default {
+    components: {
+        OptionSlot,
+    },
+    props: {
+        modelValue: {
+            // type: [Object, Array],
+        },
+    },
+    mixins: [InputMixin],
+    created() {
+        this.model = this.model;
+    },
+    methods: {
+        select(val) {
+
+            var self = this;
+            if (self.multiValue) {
+                self.model = [...self.model, val];
+            } else {
+                self.model = val;
+            }
+
+        },
+        deselect(val) {
+            var self = this;
+            // var val = self.getValue(option);
+
+            if (this.multiValue) {
+                var sliced = this.model.slice();
+                var index = sliced.indexOf(val)
+
+                if (index != -1) {
+                    sliced.splice(index, 1);
+                    this.model = sliced
+                }
+            } else {
+                if (self.getValue(this.model) == val) {
+                    this.model = undefined;
+                } else {
+                    this.model = val;
+                }
+            }
+
+        },
+        toggle(plainValue) {
+
+            if (this.selectionHash[plainValue]) {
+                this.deselect(plainValue);
+            } else {
+                this.select(plainValue);
+            }
+
+            this.touch();
+        },
+
+        model: {
+            get() {
+                return this.cleanOutput(this.value);
+            },
+            set(val) {
+                this.value = this.cleanInput(val);
+                this.dispatch();
+            }
+        },
+
+        cleanOutput(val) {
+            var self = this;
+
+            if (isUndefined(val)) {
+                if (self.multiValue) {
+                    val = [];
+                } else {
+                    val = undefined;
+                }
+            } else {
+                if (self.multiValue) {
+                    val = (val || []).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.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: {
+        selectionHash() {
+
+            var hash = {};
+
+            if (this.model) {
+                if (this.multiValue) {
+                    this.model.forEach(function(val) {
+                        hash[val] = true;
+                    })
+                } else {
+                    hash[this.model] = true;
+                }
+            }
+
+            console.log('change hash')
+            return hash;
+        },
+        returnObject() {
+            return this.type == 'reference';
+        },
+        summary() {
+            return this.getLabel(this.optionLookup[this.model]) || 'Click to select';
+        },
+
+    }
+}
+</script>
+<style lang="scss" scoped>
+// :deep(.buttons) {
+.buttons {
+    display: flex;
+    gap: 0.2em;
+    flex-wrap: wrap;
+
+
+
+    .ux-btn {
+
+        margin: 0;
+
+        .ux-icon {
+            opacity: 0;
+        }
+
+        &:hover {
+            .ux-icon {
+                opacity: 0.5;
+            }
+        }
+
+        &.active {
+            background: $primary;
+            color: #fff;
+
+            .ux-icon {
+                opacity: 1;
+            }
+        }
+    }
+
+}
+</style>