@qikdev/vue-ui 0.1.2 → 0.1.8

package/src/form/form.vue

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

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

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