@qikdev/vue-ui 0.0.5 → 0.1.6

package/src/content/render/field.vue

@@ -1,423 +0,0 @@
-<template>
-    <div class="ux-field-render" v-if="visible" :class="classes">
-        <label class="ux-field-title">{{title}}</label>
-        <div class="ux-field-description">{{field.description}}</div>
-        <template v-if="type == 'reference'">
-            <template v-if="multiValue">
-                <item :key="item._id" :item="item" v-for="(item, index) in fieldModel" />
-            </template>
-            <template v-else>
-                <item :item="fieldModel" />
-            </template>
-        </template>
-        <template v-if="widget == 'group'">
-            <template v-if="asObject">
-                <field-group :field="field" :parentModel="parentModel" v-model="fieldModel" />
-            </template>
-            <template v-else>
-                <field-group :field="field" :parentModel="parentModel" v-model="sourceModel" />
-            </template>
-        </template>
-        <!-- <template v-if="type == 'group'">
-            <template v-if="multiValue">
-                <item :key="item._id" :item="item" v-for="(item, index) in fieldModel" />
-            </template>
-            <template v-else>
-                <item :item="fieldModel" />
-            </template>
-        </template> -->
-        <template v-if="type == 'string'">
-            <template v-if="multiValue">
-                <div v-for="(value, index) in fieldModel">
-                    {{value}}
-                </div>
-            </template>
-            <template v-else>
-                <div>{{fieldModel}}</div>
-            </template>
-        </template>
-        <template v-if="type == 'date'">
-            <template v-if="multiValue">
-                <div v-for="(value, index) in fieldModel">
-                    {{value}}
-                </div>
-            </template>
-            <template v-else>
-                <div>
-                    {{fieldModel}}
-                </div>
-            </template>
-        </template>
-        <template v-if="type == 'email'">
-            <template v-if="multiValue">
-                <div v-for="(value, index) in fieldModel">
-                    <a :href="`mailto:${value}`">{{value}}</a>
-                </div>
-            </template>
-            <template v-else>
-                <div>
-                    <a :href="`mailto:${fieldModel}`">{{fieldModel}}</a>
-                </div>
-            </template>
-        </template>
-        <template v-if="type == 'url'">
-            <template v-if="multiValue">
-                <div v-for="(value, index) in fieldModel">
-                    <a :href="value">{{value}}</a>
-                </div>
-            </template>
-            <template v-else>
-                <div>
-                    <a :href="fieldModel">{{fieldModel}}</a>
-                </div>
-            </template>
-        </template>
-        <template v-if="isNumber">
-            <template v-if="multiValue">
-                <div v-for="(value, index) in fieldModel">
-                    {{value}}
-                </div>
-            </template>
-            <template v-else>
-                <div>{{fieldModel}}</div>
-            </template>
-        </template>
-        <!-- <pre>{{fieldModel}}</pre> -->
-        <!-- <template v-if="widget == 'group'">
-            <template v-if="asObject">
-                <field-group :field="actualField" :parentModel="parentModel" v-model="fieldModel" />
-            </template>
-            <template v-else>
-                <field-group :field="actualField" :parentModel="parentModel" v-model="sourceModel" />
-            </template>
-        </template> -->
-        <!-- <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 == 'select'">
-            <native-select @touched="touch" :field="actualField" v-model="fieldModel" />
-        </template>
-        <template v-if="widget == 'buttons'">
-            <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 == 'richtext'">
-            <text-area @touched="touch" :field="actualField" v-model="fieldModel" />
-        </template>
-        <template v-if="widget == 'longtext'">
-            <text-area @touched="touch" :field="actualField" v-model="fieldModel" />
-        </template>
-        <template v-if="widget == 'value'">
-        </template>
-        <div v-if="error && validateResults.message" class="ux-field-message">
-            {{validateResults.message}}
-        </div> -->
-    </div>
-</template>
-<script>
-import Item from '../item.vue';
-
-//Inputs
-// import ContentSelect from './inputs/content-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 './group.vue';
-// import NativeSelect from './inputs/select.vue';
-// import ButtonSelect from './inputs/button-select.vue';
-
-import Expressions from '../../form/expressions';
-
-////////////////////////////////////////
-
-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: {
-        Item,
-        FieldGroup,
-        // ButtonSelect,
-        // NativeSelect,
-        // DateField,
-        // TextField,
-        // CurrencyField,
-        // TextArea,
-        // Checkbox,
-        // BooleanSwitch: Switch,
-        // FieldGroup,
-        // ContentSelect,
-        // Upload,
-    },
-    props: {
-        field: {
-            type: Object,
-            required: true,
-        },
-        parentModel: {
-            type: Object,
-        },
-        modelValue: {
-            type: Object,
-            required: true,
-        },
-    },
-    data() {
-        return {
-            model: this.modelValue,
-        }
-    },
-    // created() {
-    //     // if (this.visible) {
-    //     //     var currentValue = this.fieldModel;
-    //     //     var defaultValue = this.fieldModel || this.expressions && this.expressions.defaultValue ? this.getExpressionDefaultValue : getDefaultValue(this.actualField);
-    //     //     if (!currentValue) {
-    //     //         // console.log(this.actualField.key, this.actualField.title, defaultValue);
-    //     //         if (this.fieldModel != defaultValue) {
-    //     //             this.fieldModel = defaultValue;
-    //     //         }
-    //     //     }
-    //     // }
-
-    // },
-    methods: {
-        cleanInput(val) {
-            return val;
-        },
-        cleanOutput(val) {
-            return val;
-        }
-    },
-    watch: {
-        modelValue(val, old) {
-            this.model = val;
-        },
-    },
-    computed: {
-        type() {
-            return this.field.type || 'string';
-        },
-        isGroup() {
-            return this.type === 'group'
-        },
-        asObject() {
-            return this.isGroup && this.field.asObject;
-        },
-        isNumber() {
-            switch (this.type) {
-                case 'integer':
-                case 'number':
-                case 'float':
-                case 'decimal':
-                    return true;
-                    break;
-            }
-        },
-        multiValue() {
-            return this.field.maximum != 1;
-        },
-        title() {
-            return this.field.title;
-        },
-        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);
-            }
-        },
-        expressions() {
-            return this.field.expressions;
-        },
-        expressionsContext() {
-            return {
-                this: this.model,
-                model: this.model,
-                data: this.parentModel,
-            }
-        },
-        hidden() {
-            return this.getExpressionHide;
-        },
-        visible() {
-            return !this.hidden && this.fieldModel;
-        },
-        type() {
-            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;
-        },
-        fieldModel: {
-            get() {
-                return this.cleanOutput(this.model[this.key]);
-            },
-            set(value) {
-                // this.model[this.key] = this.cleanInput(value);
-                // 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-render-${this.type}`)
-
-            if (this.layoutGroup) {
-                array.push('ux-layout-only');
-            }
-
-            return array;
-        },
-        widget() {
-
-            //We're a group
-            if (this.type == 'group') {
-                return this.type;
-            }
-
-            //Get the widget
-            var widget = this.field.widget;
-
-            ///////////////////////////////
-
-
-            ///////////////////////////////
-
-            switch (widget) {
-                case 'content-select':
-                case 'select':
-                case 'checkbox':
-                case 'datefield':
-                case 'richtext':
-                case 'longtext':
-                case 'buttons':
-                case 'switch':
-                case 'email':
-                case 'url':
-                case 'currency':
-                case 'timezone':
-                case 'country':
-                case 'typeselect':
-                case 'upload':
-                    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;
-                    }
-                    break;
-            }
-
-            return widget;
-
-        },
-    },
-
-}
-</script>
-<style lang="scss" scoped>
-.ux-field-render {
-    margin-bottom: 1.5em;
-
-    &.ux-layout-only {
-        margin-bottom: 0;
-    }
-}
-
-
-
-: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: 0.8em;
-    opacity: 0.5;
-    margin-bottom: 0.5em;
-
-}
-
-:deep(.ux-form-flex .ux-field-description) {
-    // min-height: 2.6em;
-}
-</style>

package/src/content/render/group.vue

@@ -1,65 +0,0 @@
-<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-row>
-            </panel-header>
-            <panel-body>
-                <ux-render :fields="fields" :flex="sameLine" :parentModel="parentModel" v-model="model[index]" />
-            </panel-body>
-        </panel>
-    </div>
-    <template v-else>
-        <ux-render :fields="fields" :flex="sameLine" :parentModel="parentModel" v-model="model" />
-        <!-- <ux-form ref="form" @form:state="stateChange"  :parentModel="parentModel" v-model="model" :flex="sameLine" :fields="field.fields" /> -->
-    </template>
-</template>
-<script>
-import RenderMixin from './render-mixin.js';
-
-export default {
-    mixins: [RenderMixin],
-    props: {
-        modelValue: {
-            type: [Object, Array],
-        },
-    },
-    // created() {
-    //     // this.value = this.cleanInput(this.value, true);
-    // },
-    computed: {
-        sameLine() {
-            return this.field.sameLine;
-        }
-    },
-    methods: {
-        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}`
-        },
-    }
-}
-</script>
-<style lang="scss" scoped>
-.ux-multi-group {
-    margin-bottom: 1em;
-}
-</style>

package/src/content/render/render-mixin.js

@@ -1,101 +0,0 @@
-
-export default {
-    props: {
-        field: {
-            type: Object,
-            default () {
-                return {}
-            },
-        },
-        parentModel: {
-            type: Object,
-        },
-    },
-    data() {
-        return {
-            model: this.modelValue,
-        }
-    },
-    methods: {
-        getValue(option) {
-            if (!option) {
-                return;
-            }
-
-            return option._id || option.value || option;
-        },
-        getLabel(option) {
-            if (!option) {
-                return;
-            }
-
-            return option.title || option.name || option.label || option;
-        },
-    },
-    computed:{
-        label() {
-            return this.field.title;
-        },
-        description() {
-            return this.field.description;
-        },
-        singleValue() {
-            return this.maximum == 1;
-        },
-        multiValue() {
-            return this.maximum != 1;
-        },
-        key() {
-            return this.field.key;
-        },
-        isGroup() {
-            return this.type === 'group'
-        },
-        asObject() {
-            return this.isGroup && !!this.field.asObject;
-        },
-        layoutGroup() {
-            return this.isGroup && !this.field.asObject;
-        },
-        numValues() {
-            if (!this.multiValue) {
-                return 1;
-            }
-
-            return (this.model || []).length;
-        },
-        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);
-        },
-    }
-}

package/src/content/render/render.vue

@@ -1,86 +0,0 @@
-<template>
-    <div class="ux-render" :class="renderClass">
-        <slot name="render" :fields="fields">
-            <ux-field-render :field="field" v-model="model" :parentModel="parentModel || model" :key="`ux-render-field-${field.key}-${index}`" :class="fieldClass" v-for="(field, index) in renderFields" />
-        </slot>
-    </div>
-</template>
-<script>
-import UXFieldRender from './field.vue';
-
-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() {
-        return {
-            model: this.modelValue,
-        }
-    },
-    components: {
-        UxFieldRender: UXFieldRender,
-    },
-    computed: {
-        renderClass() {
-            var array = [];
-
-            if (this.flex) {
-                array.push('ux-render-flex');
-            }
-            return array;
-        },
-
-        fieldClass() {
-            var array = [];
-
-            if (this.flex) {
-                array.push('ux-field-render-flex');
-            }
-            return array;
-        },
-        renderFields() {
-            return this.fields;
-        }
-    }
-}
-</script>
-<style lang="scss" scoped>
-.ux-render-flex {
-    display: flex;
-    flex: 1;
-    gap: 2em;
-
-    .ux-field-render-flex {
-        flex: 1;
-        // display: flex;
-        // align-items: flex-end;
-
-        // & > .ux-field {
-        // flex:1;
-        // }
-    }
-}
-</style>