@qikdev/vue-ui 0.0.5 → 0.1.6

package/src/form/field.vue

@@ -1,634 +0,0 @@
-<template>
-    <div class="ux-field" @focusin="focus" @focusout="blur" v-if="visible" :class="classes">
-        <template v-if="widget == 'checkbox'">
-            <checkbox @touched="touch" :field="actualField" v-model="fieldModel" />
-        </template>
-        <template v-if="widget == 'switch'">
-            <boolean-switch @touched="touch" :field="actualField" v-model="fieldModel" />
-        </template>
-        <template v-if="widget == 'upload'">
-            <upload @touched="touch" :field="actualField" v-model="fieldModel" />
-        </template>
-        <template v-if="widget == 'group'">
-            <template v-if="asObject">
-                <field-group @form:state="groupStateAltered" ref="group" @touched="touch" :field="actualField" :parentModel="parentModel" v-model="fieldModel" />
-            </template>
-            <template v-else>
-                <field-group @form:state="groupStateAltered" ref="group" @touched="touch" :field="actualField" :parentModel="parentModel" v-model="sourceModel" />
-            </template>
-        </template>
-        <template v-if="widget == 'select'">
-            <native-select @touched="touch" :field="actualField" v-model="fieldModel" />
-        </template>
-        <template v-if="widget == 'button'">
-            <button-select @touched="touch" :field="actualField" v-model="fieldModel" />
-        </template>
-        <template v-if="widget == 'textfield'">
-            <text-field @touched="touch" :field="actualField" v-model="fieldModel" />
-        </template>
-        <template v-if="widget == 'currency'">
-            <currency-field @touched="touch" :field="actualField" v-model="fieldModel" />
-        </template>
-        <template v-if="widget == 'datefield'">
-            <date-field @touched="touch" :field="actualField" v-model="fieldModel" />
-        </template>
-        <template v-if="widget == 'content-select'">
-            <content-select @touched="touch" :field="actualField" v-model="fieldModel" />
-        </template>
-
-        <template v-if="widget == 'type-select'">
-            <type-select @touched="touch" :field="actualField" v-model="fieldModel" />
-        </template>
-        <template v-if="widget == 'richtext'">
-            <text-area @touched="touch" :field="actualField" v-model="fieldModel" />
-        </template>
-        <template v-if="widget == 'textarea'">
-            <text-area @touched="touch" :field="actualField" v-model="fieldModel" />
-        </template>
-        <template v-if="widget == 'timezone'">
-            <timezone-select @touched="touch" :field="actualField" v-model="fieldModel" />
-        </template>
-        <template v-if="widget == 'phone'">
-            <phone-number-input @touched="touch" :field="actualField" v-model="fieldModel" />
-        </template>
-        <template v-if="widget == 'value'">
-        </template>
-        <template v-if="widget == 'object'">
-            <object-field @touched="touch" :field="actualField" v-model="fieldModel" />
-        </template>
-        <template v-if="widget == 'options'">
-            <options-manager @touched="touch" :field="actualField" v-model="fieldModel" />
-        </template>
-        <div v-if="error && validateResults.message" class="ux-field-message">
-            {{validateResults.message}}
-        </div>
-        <!-- <pre>Has Data: {{hasData}}</pre>
-        <pre>Dirty: {{dirty}}</pre>
-        <pre>Dirty Before: {{isDirtyBeforeInput}}</pre>
-        <pre>Touched: {{touched}}</pre>
-        <pre>DEFAULT VALUE: {{fieldDefaultValue}}</pre> -->
-    </div>
-</template>
-<script>
-//Inputs
-import PhoneNumberInput from './inputs/phone-number-input.vue';
-import TimezoneSelect from './inputs/timezone.vue';
-import ContentSelect from './inputs/content-select.vue';
-import TypeSelect from './inputs/type-select.vue';
-import CurrencyField from './inputs/currency.vue';
-import TextField from './inputs/textfield.vue';
-import TextArea from './inputs/textarea.vue';
-import DateField from './inputs/datefield.vue';
-import Checkbox from './inputs/checkbox.vue';
-import Switch from './inputs/switch.vue';
-import Upload from './inputs/upload/upload.vue';
-import FieldGroup from './inputs/group.vue';
-import NativeSelect from './inputs/select.vue';
-import ButtonSelect from './inputs/button-select.vue';
-import ObjectField from './inputs/object-field.vue';
-import OptionsManager from './inputs/options-manager.vue';
-
-////////////////
-
-import Expressions from './expressions';
-import getDefaultValue from './getDefaultValue';
-import parseBoolean from './parseBoolean';
-
-////////////////////////////////////////
-
-function hasExpression(key) {
-    return function() {
-        var self = this;
-        if (!self.expressions) {
-            return;
-        }
-
-        let expression = self.expressions[key];
-        if (expression) {
-            return true;
-        }
-    }
-}
-
-////////////////////////////////////////
-
-function computedExpression(key) {
-    return function() {
-        var self = this;
-        if (!self.expressions) {
-            return;
-        }
-
-        let expression = self.expressions[key];
-        if (!expression) {
-            return;
-        }
-
-        let context = self.expressionsContext;
-        return Expressions.evaluateExpression(expression, context);
-    }
-}
-
-
-export default {
-    components: {
-        ButtonSelect,
-        NativeSelect,
-        DateField,
-        TextField,
-        CurrencyField,
-        TextArea,
-        Checkbox,
-        BooleanSwitch: Switch,
-        FieldGroup,
-        ContentSelect,
-        TypeSelect,
-        TimezoneSelect,
-        PhoneNumberInput,
-        Upload,
-        ObjectField,
-        OptionsManager,
-    },
-    props: {
-        field: {
-            type: Object,
-            required: true,
-        },
-        parentModel: {
-            type: Object,
-        },
-        modelValue: {
-            type: Object,
-            required: true,
-        },
-    },
-    data() {
-
-
-        return {
-            defaultValue: null,
-            model: this.modelValue,
-            touched: false,
-            focussed: false,
-            validateResults: { valid: true },
-            mounted: false,
-            subFormState: {},
-            isDirty: false,
-            isDirtyBeforeInput: false,
-        }
-    },
-
-    created() {
-        this.checkDirtyState();
-    },
-    mounted() {
-        this.mounted = true;
-    },
-    beforeUnmount() {
-        this.mounted = false;
-    },
-    methods: {
-        checkDirtyState() {
-
-            //What is the value for this field right now?
-            var existingData = this.fieldModel;
-            var proposedDefaultValue = this.fieldDefaultValue;
-
-            ///////////////////////////////////////////
-
-            var existingString = JSON.stringify(this.cleanOutput(existingData));
-            var proposedString = JSON.stringify(this.cleanOutput(proposedDefaultValue));
-
-            //We already have data
-
-
-            if (existingData && (existingString != proposedString)) {
-                this.isDirty = true;
-                this.isDirtyBeforeInput = true;
-                //May as well put it in anyway so it can clean itself if need be
-                this.fieldModel = existingData;
-            } else {
-                //The field is untouched
-                this.isDirty = false;
-                this.isDirtyBeforeInput = false;
-
-                //Use the default
-                this.fieldModel = proposedDefaultValue;
-            }
-
-            // ///////////////////////////////////////////
-
-            // var defaultValue = currentValue || proposedDefaultValue
-            // if (!currentValue) {
-            //     currentValue = defaultValue;
-            // }
-
-            // ///////////////////////////////////////////
-
-            // this.fieldModel = currentValue;
-
-        },
-        groupStateAltered(details) {
-            this.subFormState = details;
-        },
-        focus() {
-            this.focussed = true;
-        },
-        blur() {
-            this.focussed = false;
-            if (this.expressions && this.expressions.value) {
-                //Reset the value after we blur out
-                this.fieldModel = this.getExpressionValue;
-            }
-        },
-        reset() {
-            // var defaultValue = this.expressions && this.expressions.defaultValue ? this.getExpressionDefaultValue : getDefaultValue(this.actualField);
-            // this.fieldModel = defaultValue;
-            this.touched = false;
-        },
-        touch() {
-            this.touched = true;
-        },
-        cleanInput(val) {
-            return val;
-        },
-        cleanOutput(val) {
-            return val;
-        }
-    },
-    watch: {
-        mounted(val) {
-            if (val) {
-                this.$emit('field:mount', this);
-            } else {
-                this.$emit('field:unmount', this);
-            }
-        },
-        visible(now) {
-            //Remove and clear all data
-            if (!now) {
-                this.touched = false;
-                if (this.expressions && this.expressions.value) {
-                    this.fieldModel = this.getExpressionValue
-                } else {
-                    this.fieldModel = undefined;
-                }
-
-            } else {
-                this.reset();
-            }
-
-        },
-        focussed(val) {
-            if (val) {
-                this.$emit('field:focus', this);
-            } else {
-                this.$emit('field:blur', this);
-            }
-        },
-        invalid(val) {
-            this.$emit('field:invalid', this);
-        },
-        valid(val) {
-            this.$emit('field:valid', this);
-        },
-        error(val) {
-            this.$emit('field:error', this);
-        },
-        touched(val) {
-            this.$emit('field:touched', this);
-        },
-        dirty(val) {
-            this.$emit('field:dirty', this);
-        },
-        changeString(v) {
-            this.validateResults = this.$qik.content.validateField(this.fieldModel, this.actualField);
-        },
-        modelValue(val, old) {
-            this.model = val;
-            this.touched = false;
-            this.checkDirtyState();
-        },
-        getExpressionHide(result) {
-
-        },
-        getExpressionDefaultValue(result) {
-
-            //If this already had data, or has been touched and now has data
-            if (this.isDirtyBeforeInput || (this.touched && this.dirty)) {
-                //Don't update it
-            } else {
-                this.fieldModel = result;
-            }
-
-        },
-        getExpressionValue(result) {
-            this.fieldModel = result;
-        },
-    },
-    computed: {
-        fieldDefaultValue() {
-            return this.cleanInput(this.expressions && this.expressions.defaultValue ? this.getExpressionDefaultValue : getDefaultValue(this.actualField));
-        },
-        title() {
-            return this.field.title;
-        },
-        actualField() {
-
-            var field = this.field;
-            if (this.getExpressionRequired) {
-                return Object.assign({}, field, { minimum: 1 });
-            }
-
-            return field;
-        },
-        changeString() {
-            return `${JSON.stringify(this.fieldModel)}-${this.actualField.minimum}`;
-        },
-        valid() {
-            return !this.invalid;
-        },
-        error() {
-            return !this.focussed && this.touched && this.invalid;
-        },
-        invalid() {
-            //Check the subform
-            var invalidSubForm = this.subFormState && this.subFormState.invalid;
-            if (invalidSubForm) {
-
-                return { invalidSubForm: this.subFormState, mounted: this.mounted };
-            }
-
-            //Check if our validator says this field is valid
-            var isInvalid = !this.validateResults.valid;
-            // if (isInvalid) {
-
-            // }
-
-
-
-            return isInvalid;
-        },
-        dirty() {
-
-            return this.isDirty;
-
-        },
-        hasData() {
-
-            if (typeof this.fieldModel === 'undefined') {
-                return false;
-            }
-
-            if (this.multiValue) {
-                if (!this.fieldModel || !this.fieldModel.length) {
-                    return false;
-                }
-            }
-
-            if (this.fieldModel == '') {
-                return false;
-            }
-
-            // if (this.hasExpressionDefaultValue) {
-            //     return this.touched && (this.fieldModel != this.getExpressionDefaultValue);
-            // }
-
-            return true;
-        },
-        getExpressionHide() {
-            if (!this.expressions) {
-                return;
-            }
-
-            let showExpression = this.expressions.show;
-            let hideExpression = this.expressions.hide;
-            let context = this.expressionsContext;
-
-            if (showExpression) {
-                return !!!Expressions.evaluateExpression(showExpression, context);
-            } else if (hideExpression) {
-                return Expressions.evaluateExpression(hideExpression, context);
-            }
-        },
-        getExpressionRequired: computedExpression('required'),
-        getExpressionDefaultValue: computedExpression('defaultValue'),
-        getExpressionValue: computedExpression('value'),
-        hasExpressionDefaultValue: hasExpression('defaultValue'),
-        expressions() {
-            return this.field.expressions;
-        },
-        expressionsContext() {
-            return {
-                this: this.model,
-                model: this.model,
-                data: this.parentModel,
-            }
-        },
-        hidden() {
-            if (this.actualField.readOnly) {
-                return true;
-            }
-            return this.getExpressionHide;
-        },
-        visible() {
-            return this.mounted && !this.hidden;
-        },
-        type() {
-            return this.actualField.type || 'string';
-        },
-        key() {
-            return this.actualField.key;
-        },
-        isGroup() {
-            return this.type === 'group'
-        },
-        asObject() {
-            return this.isGroup && this.actualField.asObject;
-        },
-        layoutGroup() {
-            return this.isGroup && !this.actualField.asObject;
-        },
-        fieldModel: {
-            get() {
-                return this.cleanOutput(this.model[this.key]);
-            },
-            set(value) {
-
-                var cleaned = this.cleanInput(value);
-
-                if (this.model[this.key] != cleaned) {
-                    this.model[this.key] = cleaned
-                    this.isDirty = true;
-                    this.$emit('update:modelValue', this.model);
-                }
-            }
-        },
-        sourceModel: {
-            get() {
-                return this.model;
-            },
-            set(value) {
-                this.model = value;
-                this.$emit('update:modelValue', this.model);
-            }
-        },
-        classes() {
-            var array = [];
-            array.push(`ux-field-${this.type}`)
-
-            if (this.layoutGroup) {
-                array.push('ux-layout-only');
-            }
-
-            if (this.touched) {
-                array.push('ux-field-touched');
-            }
-
-            if (this.dirty) {
-                array.push('ux-field-dirty');
-            }
-
-            if (this.valid) {
-                array.push('ux-field-valid');
-            }
-
-            if (this.invalid) {
-                array.push('ux-field-invalid');
-            }
-
-            if (this.error) {
-                array.push('ux-field-error');
-            }
-
-            return array;
-        },
-        widget() {
-
-            //We're a group
-            if (this.type == 'group') {
-                return this.type;
-            }
-
-            //Get the widget
-            var widget = this.actualField.widget;
-
-            ///////////////////////////////
-
-
-            ///////////////////////////////
-
-            switch (widget) {
-                case 'content-select':
-                case 'select':
-                case 'checkbox':
-                case 'datefield':
-                case 'richtext':
-                case 'textarea':
-                case 'switch':
-                case 'email':
-                case 'url':
-                case 'currency':
-                case 'timezone':
-                case 'country':
-                case 'typeselect':
-                case 'upload':
-                case 'options':
-                case 'button':
-                case 'type-select':
-                    break;
-                case 'password':
-                    return 'textfield';
-                    break;
-                case 'phone':
-                case 'phonenumber':
-                    return 'phone'
-                    break;
-
-                default:
-                    switch (this.type) {
-                        case 'date':
-                            widget = 'datefield';
-                            break;
-                        case 'reference':
-                            widget = 'content-select';
-                            break;
-                        case 'boolean':
-                            widget = 'checkbox';
-                            break;
-                        default:
-                        case 'string':
-                            widget = 'textfield';
-                            break;
-                        case 'object':
-                            widget = 'object';
-                            break;
-                    }
-                    break;
-            }
-
-            return widget;
-
-        },
-    },
-
-}
-</script>
-<style lang="scss" scoped>
-.ux-field {
-    margin-bottom: 1.5em;
-
-    &.ux-layout-only {
-        margin-bottom: 0;
-    }
-
-    .ux-field-message {
-        border: red;
-        background: rgba(red, 0.1);
-        color: red;
-        font-size: 0.7em;
-        padding: 0.3em 0.5em;
-        border-radius: 0 1em 1em;
-        margin: 0.3em 0;
-        display: inline-block;
-    }
-
-    // &.ux-field-error {
-    // .ux-field-message {
-    // visibility: visible;
-    // }
-    // }
-
-
-
-}
-
-
-
-:deep(.ux-field-title) {
-    // .ux-field-title {
-    margin-top: 0.5em;
-    display: block;
-    margin-bottom: 0.2em;
-    font-size: 0.9em;
-    font-weight: bold;
-}
-
-
-:deep(.ux-field-description) {
-    // .ux-field-description {
-
-    font-size: clamp(12px, 0.8em, 16px);
-    opacity: 0.5;
-    margin-bottom: 0.5em;
-
-}
-
-.ux-field.ux-field-error> :deep(.ux-field-title) {
-    color: red;
-}
-
-:deep(.ux-form-flex .ux-field-description) {
-    // min-height: 2.6em;
-}
-</style>