@westartcom/bread-quasar-fields 0.0.2

package/fields/NestedFieldsField.vue

@@ -0,0 +1,158 @@
+<template>
+    <model-form
+        :key="field.name + '-form'"
+        :definition="nestedDefinition"
+        :model="internalValue"
+        :errors="errors"
+        v-model:invalid="invalid">
+        <template v-for="(_, name) in $slots" #[name]="slotData"><slot :name="name" v-bind="slotData" /></template>
+    </model-form>
+</template>
+
+<script lang="ts">
+import { defineAsyncComponent, defineComponent, PropType } from 'vue';
+import forEach from 'lodash-es/forEach';
+import flatMap from 'lodash-es/flatMap';
+import find from 'lodash-es/find';
+import { ModelDefinition, ModelFieldDefinition, ModelFieldGroupDefinition } from '@westartcom/bread-quasar-fields/interfaces/ModelDefinition';
+import { FieldType } from '@westartcom/bread-quasar-fields/enums/FieldType';
+import { InputType } from '@westartcom/bread-quasar-fields/enums/InputType';
+
+interface NestedFieldsFieldDefinition extends ModelFieldDefinition<FieldType.JSON | FieldType.META, InputType.NESTED_FIELDS> {
+    extra_data: {
+        fields: ModelFieldDefinition[] | {
+            [key: string]: ModelFieldGroupDefinition;
+        }
+    }
+}
+
+export default defineComponent({
+    components: {
+        ModelForm: defineAsyncComponent(() => import('@/Components/ModelForm.vue')),
+    },
+
+    props: {
+        field: {
+            type: Object as PropType<NestedFieldsFieldDefinition>,
+            required: true
+        },
+        modelValue: [String, Object, Array],
+        errors: Object as PropType<{[key: string]: string[]}[]>
+    },
+
+    emits: [
+        'update:modelValue',
+        'update:invalid'
+    ],
+
+    data() {
+        return {
+            invalid: null as boolean | null,
+            internalValue: {},
+            internalErrors: [] as {[key: string]: string[]}[],
+            nestedDefinition: null as Pick<ModelDefinition, 'field_groups'> | null,
+            originalStringifiedValue: ''
+        };
+    },
+
+    mounted() {
+        this.internalValue = this.formatData(this.modelValue);
+        this.nestedDefinition = {
+            field_groups: (Array.isArray(this.field.extra_data.fields)) ? {
+                'general': {
+                    key: 'general',
+                    order: 0,
+                    fields: this.field.extra_data.fields
+                }
+            } : this.field.extra_data.fields
+        };
+    },
+
+    watch: {
+        modelValue: {
+            handler: function(val) {
+                const stringifiedVal = JSON.stringify(val);
+                if (stringifiedVal !== this.originalStringifiedValue) {
+                    if (val && Array.isArray(val)) {
+                        this.internalValue = this.formatData(val);
+                    } else {
+                        if (typeof val === 'object') {
+                            this.internalValue = val;
+                        }
+                    }
+                }
+            },
+            deep: true
+        },
+
+        internalValue: {
+            handler: function(val) {
+                this.$emit('update:modelValue', val);
+            },
+            deep: true
+        },
+
+        errors: {
+            handler: function(val) {
+                this.internalErrors = val;
+            },
+            deep: true
+        },
+
+        internalErrors: {
+            handler: function(val) {
+                this.invalid = !!(val && val.length);
+            },
+            deep: true
+        },
+
+        invalid: function(val) {
+            this.$emit('update:invalid', val);
+        }
+    },
+
+    methods: {
+        findDefinitionForField(fieldName): ModelFieldDefinition | undefined {
+            const fields = (Array.isArray(this.field.extra_data.fields)) ? this.field.extra_data.fields : flatMap(this.field.extra_data.fields, (group) => group.fields);
+            return find(fields, ['name', fieldName]);
+        },
+
+        formatData(nestedData) {
+            let formattedValue = {};
+
+            if (nestedData && Array.isArray(nestedData)) {
+                forEach(nestedData, (data) => {
+                    if (!data?.meta_key) {
+                        return;
+                    }
+
+                    const definition = this.findDefinitionForField(data.meta_key);
+                    if (!definition) {
+                        return;
+                    }
+
+                    if (definition.type !== 'MEDIA') {
+                        formattedValue[data.meta_key] = data.meta_value;
+                        return;
+                    }
+
+                    if (data.hasOwnProperty(definition.extra_data?.collection)) {
+                        formattedValue[data.meta_key] = data[definition.extra_data?.collection];
+                    } else {
+                        formattedValue[data.meta_key] = data.meta_value;
+                    }
+                });
+            } else {
+                formattedValue = (typeof nestedData !== 'undefined') ? nestedData : {};
+            }
+
+            this.originalStringifiedValue = JSON.stringify(formattedValue);
+
+            return formattedValue;
+        },
+    }
+});
+</script>
+
+<style scoped lang="scss">
+</style>

package/fields/NumberField.vue

@@ -0,0 +1,116 @@
+<template>
+    <div class="field-wrap" :id="id">
+        <div class="field-wrap-inner">
+            <div class="field-label-wrap">
+                <label v-if="field.label" :for="id + '-input'">{{ field.label }}<span class="required-asterix" v-if="field.required"> *</span></label>
+            </div>
+
+            <input
+                :name="field.name"
+                :id="id + '-input'"
+                :placeholder="field.placeholder"
+                :max="(field.extra_data && field.extra_data.max) ? field.extra_data.max : null"
+                :min="(field.extra_data && field.extra_data.min) ? field.extra_data.min : null"
+                type="number"
+                class="field"
+                :class="{'invalid': (invalid && internalErrors && internalErrors.length)}"
+                v-model="internalValue">
+        </div>
+
+        <div class="field-description" v-if="field.description">{{ field.description }}</div>
+
+        <div class="validation-errors" v-if="invalid && internalErrors && internalErrors.length">
+            <span class="error danger-txt-color" v-for="(error, index) in internalErrors" :key="index + 'error'">{{ error }}</span>
+        </div>
+    </div>
+</template>
+
+<script lang="ts">
+import { defineComponent, PropType } from 'vue';
+import { ModelFieldDefinition } from '@westartcom/bread-quasar-fields/interfaces/ModelDefinition';
+import { FieldType } from '@westartcom/bread-quasar-fields/enums/FieldType';
+import { InputType } from '@westartcom/bread-quasar-fields/enums/InputType';
+
+interface NumberFieldDefinition extends ModelFieldDefinition<FieldType.FLOAT | FieldType.INT, InputType.NUMBER> {
+    default: number | null;
+}
+
+export default defineComponent({
+    props: {
+        id: {
+            type: String,
+            required: true
+        },
+        field: {
+            type: Object as PropType<NumberFieldDefinition>,
+            required: true
+        },
+        modelValue: [String, Number],
+        errors: Array as PropType<string[]>
+    },
+
+    emits: [
+        'update:modelValue',
+        'update:invalid'
+    ],
+
+    data() {
+        return {
+            invalid: null as boolean | null,
+            internalValue: null as number | null,
+            internalErrors: [] as string[]
+        };
+    },
+
+    mounted() {
+        if (this.modelValue) {
+            this.internalValue = Number(this.modelValue);
+        } else if (this.field.default) {
+            this.internalValue = Number(this.field.default);
+        }
+
+        this.validate(this.internalValue);
+    },
+
+    watch: {
+        modelValue: function(val) {
+            if (val !== this.internalValue) {
+                this.internalValue = Number(val);
+            }
+        },
+
+        internalValue: function(val) {
+            this.validate(val);
+            this.$emit('update:modelValue', Number(val));
+        },
+
+        errors: {
+            handler: function(val) {
+                this.internalErrors = val;
+            },
+            deep: true
+        },
+
+        internalErrors: {
+            handler: function(val) {
+                this.invalid = !!(val && val.length);
+            },
+            deep: true
+        },
+
+        invalid: function(val) {
+            this.$emit('update:invalid', val);
+        }
+    },
+
+    methods: {
+        validate: function(val) {
+            this.invalid = ((this.field.required && !val) || (val && Number.isNaN(val)));
+        }
+    }
+});
+</script>
+
+<style scoped lang="scss">
+
+</style>

package/fields/RadioField.vue

@@ -0,0 +1,201 @@
+<template>
+    <div class="field-wrap" :id="id">
+        <div class="field-wrap-inner">
+            <div class="field-label-wrap">
+                <label v-if="field.label">
+                    {{ field.label }}<span class="required-asterix" v-if="field.required"> *</span>
+                </label>
+            </div>
+
+            <template v-if="stylingFormat === 'buttons' || stylingFormat === 'toggle'">
+                <div :class="stylingFormat">
+                    <button
+                        v-for="(label, optionValue) in allOptions"
+                        :key="id + '-' + optionValue + '-radio-input'"
+                        type="button"
+                        class="btn expand"
+                        @click="internalValue = optionValue"
+                        :class="{
+                            'normal-filled': (internalValue === optionValue && !invalid),
+                            'hollow-danger': (internalValue === optionValue && invalid),
+                            'hollow': (internalValue !== optionValue)
+                        }">
+                        {{ label }}
+                    </button>
+                </div>
+            </template>
+
+            <template v-else>
+                <div class="field">
+                    <label
+                        v-for="(label, optionValue) in allOptions"
+                        :key="id + '-' + optionValue + '-radio-input'"
+                        :for="id + '-' + optionValue + '-radio-input'">
+                        <input
+                            :id="id + '-' + optionValue + '-radio-input'"
+                            type="radio"
+                            :value="optionValue"
+                            v-model="internalValue">
+
+                        {{ label }}
+                    </label>
+                </div>
+            </template>
+        </div>
+
+        <div class="field-description" v-if="field.description">{{ field.description }}</div>
+
+        <div class="validation-errors" v-if="invalid && internalErrors && internalErrors.length">
+            <span class="error danger-txt-color" v-for="(error, index) in internalErrors" :key="index + 'error'">{{ error }}</span>
+        </div>
+    </div>
+</template>
+
+<script lang="ts">
+import { defineComponent, PropType } from 'vue';
+import { ModelFieldDefinition } from '@westartcom/bread-quasar-fields/interfaces/ModelDefinition';
+import { FieldType } from '@westartcom/bread-quasar-fields/enums/FieldType';
+import { InputType } from '@westartcom/bread-quasar-fields/enums/InputType';
+
+interface RadioFieldDefinition extends ModelFieldDefinition<FieldType.ENUM, InputType.RADIO> {
+    default: string | number;
+    extra_data: {
+        styling_format: 'radio' | 'buttons' | 'toggle';
+        options: {
+            [key: string]: string | number
+        }
+    }
+}
+
+export default defineComponent({
+    props: {
+        id: {
+            type: String,
+            required: true
+        },
+        field: {
+            type: Object as PropType<RadioFieldDefinition>,
+            required: true
+        },
+        modelValue: [String, Number],
+        errors: Array as PropType<string[]>
+    },
+
+    emits: [
+        'update:modelValue',
+        'update:invalid'
+    ],
+
+    data() {
+        return {
+            invalid: null as boolean | null,
+            internalValue: null as string | null,
+            internalErrors: [] as string[]
+        };
+    },
+
+    mounted() {
+        if (this.modelValue) {
+            this.internalValue = this.modelValue.toString();
+        } else if (this.field.default) {
+            this.internalValue = this.field.default.toString();
+        }
+
+        this.validate(this.internalValue);
+    },
+
+    computed: {
+        stylingFormat: function() {
+            return (this.field.extra_data?.styling_format) ? this.field.extra_data.styling_format : 'radio';
+        },
+
+        allOptions: function() {
+            return (this.field.extra_data?.options) ? this.field.extra_data.options : {};
+        }
+    },
+
+    watch: {
+        modelValue: function(val) {
+            if (val !== this.internalValue) {
+                this.internalValue = val;
+            }
+        },
+
+        internalValue: function(val) {
+            this.validate(val);
+            this.$emit('update:modelValue', val);
+        },
+
+        errors: {
+            handler: function(val) {
+                this.internalErrors = val;
+            },
+            deep: true
+        },
+
+        internalErrors: {
+            handler: function(val) {
+                this.invalid = !!(val && val.length);
+            },
+            deep: true
+        },
+
+        invalid: function(val) {
+            this.$emit('update:invalid', val);
+        }
+    },
+
+    methods: {
+        validate: function(val) {
+            this.invalid = this.field.required && !val;
+        }
+    }
+});
+</script>
+
+<style scoped lang="scss">
+    .toggle {
+        display: flex;
+        max-width: var(--max-input-width);
+        width: 100%;
+
+
+        .btn {
+            border-radius: 0;
+            padding-right: 0;
+            padding-left: 0;
+
+            &:not(:first-of-type) {
+                border-left: 0;
+            }
+
+            &:first-of-type {
+                border-bottom-left-radius: var(--global-radius);
+                border-top-left-radius: var(--global-radius);
+            }
+
+            &:last-of-type {
+                border-bottom-right-radius: var(--global-radius);
+                border-top-right-radius: var(--global-radius);
+            }
+        }
+    }
+
+    .buttons {
+        display: flex;
+        max-width: var(--max-input-width);
+        width: 100%;
+        justify-content: space-between;
+        flex-wrap: wrap;
+
+        .btn {
+            box-sizing: border-box;
+            width: calc(50% - 8px);
+            margin-bottom: var(--global-spacing);
+        }
+    }
+
+    .field > label {
+        margin-right: var(--global-spacing);
+    }
+</style>

package/fields/RepeatableNestedFieldsField.vue

@@ -0,0 +1,185 @@
+<template>
+    <div class="repeatable-nested-fields">
+        <div class="field-label-wrap">
+            <label v-if="field.label">{{ field.label }}<span class="required-asterix" v-if="field.required"> *</span></label>
+        </div>
+
+        <div class="field-description" v-if="field.description">{{ field.description }}</div>
+
+        <button class="add-row btn primary" type="button" @click="addRow">
+            <template v-if="field.extra_data && field.extra_data.add_label">
+                {{ field.extra_data.add_label }}
+            </template>
+            <template v-else>
+                {{ $i18n.get('actions.add') }}
+            </template>
+        </button>
+
+        <div class="repeatable-row" v-for="(row, index) in internalValue" :key="field.name + '-row-' + index">
+            <div class="actions">
+                <button type="button" class="btn remove-row" :title="$i18n.get('actions.remove')" @click="removeRow(row, index)">
+                    <delete-icon class="icon-1-5x" :title="$i18n.get('actions.remove')"></delete-icon>
+                </button>
+            </div>
+
+            <model-form
+                :key="field.name + '-form-' + index"
+                :definition="nestedDefinition"
+                :model="row"
+                :errors="internalErrors[index]"
+                v-model:invalid="invalid">
+            </model-form>
+        </div>
+    </div>
+</template>
+
+<script lang="ts">
+import { defineAsyncComponent, defineComponent, PropType } from 'vue';
+import { ModelDefinition, ModelFieldDefinition } from '@westartcom/bread-quasar-fields/interfaces/ModelDefinition';
+import { FieldType } from '@westartcom/bread-quasar-fields/enums/FieldType';
+import { InputType } from '@westartcom/bread-quasar-fields/enums/InputType';
+
+interface NestedFieldsFieldDefinition extends ModelFieldDefinition<FieldType.JSON, InputType.NESTED_FIELDS> {
+    extra_data: {
+        fields: ModelFieldDefinition[];
+        add_label?: string;
+    }
+}
+
+export default defineComponent({
+    components: {
+        DeleteIcon: defineAsyncComponent(() => import('@westartcom/bread-quasar-fields/icons/DeleteIcon.vue')),
+        ModelForm: defineAsyncComponent(() => import('@/Components/ModelForm.vue')),
+    },
+
+    props: {
+        field: {
+            type: Object as PropType<NestedFieldsFieldDefinition>,
+            required: true
+        },
+        modelValue: Array,
+        errors: Object as PropType<{[key: string]: string[]}[]>
+    },
+
+    emits: [
+        'update:modelValue',
+        'update:invalid'
+    ],
+
+    data() {
+        return {
+            invalid: null as boolean | null,
+            internalValue: {} as {[key: string]: any}[],
+            internalErrors: [] as {[key: string]: string[]}[],
+            nestedDefinition: null as Pick<ModelDefinition, 'field_groups'> | null,
+        };
+    },
+
+    mounted() {
+        this.internalValue = (this.modelValue && Array.isArray(this.modelValue)) ? this.modelValue : [];
+        this.nestedDefinition = {
+            field_groups: {
+                general: {
+                    key: 'general',
+                    order: 0,
+                    fields: this.field.extra_data.fields
+                }
+            }
+        };
+    },
+
+    watch: {
+        modelValue: {
+            handler: function(val) {
+                if (Array.isArray(val)) {
+                    const stringifiedInternal = JSON.stringify(this.internalValue);
+                    const stringifiedValue = JSON.stringify(val);
+
+                    if (stringifiedInternal !== stringifiedValue) {
+                        this.internalValue = val;
+                    }
+                }
+            },
+            deep: true
+        },
+
+        internalValue: {
+            handler: function(val) {
+                this.$emit('update:modelValue', val);
+            },
+            deep: true
+        },
+
+        errors: {
+            handler: function(val) {
+                if (val && typeof val === 'object') {
+                    const keys = Object.keys(val);
+                    for (const index in keys) {
+                        const key = keys[index];
+                        if (key.includes('.')) {
+                            const explodedKey = key.split('.');
+                            const mainKey = explodedKey[0];
+
+                            if (this.field.name === mainKey) {
+                                if (!this.internalErrors[explodedKey[1]]) {
+                                    this.internalErrors[explodedKey[1]] = {};
+                                }
+
+                                this.internalErrors[explodedKey[1]][explodedKey[2]] = val[key];
+                            }
+                        }
+                    }
+                } else {
+                    this.internalErrors = [];
+                }
+            },
+            deep: true
+        },
+
+        internalErrors: {
+            handler: function(val) {
+                this.invalid = !!(val && val.length);
+            },
+            deep: true
+        },
+
+        invalid: function(val) {
+            this.$emit('update:invalid', val);
+        }
+    },
+
+    methods: {
+        addRow() {
+            this.internalValue.push({});
+        },
+
+        removeRow(row, index) {
+            this.internalValue.splice(index, 1);
+        }
+    }
+});
+</script>
+
+<style scoped lang="scss">
+    .add-row {
+        display: block;
+        margin-bottom: var(--global-spacing);
+    }
+
+    .actions {
+        text-align: right;
+    }
+
+    .remove-row {
+        padding: var(--global-spacing-half);
+        margin: 0;
+        color: var(--color-danger);
+    }
+
+    .model-form {
+        padding-top: var(--global-spacing);
+        padding-bottom: var(--global-spacing);
+        margin-bottom: var(--global-spacing);
+        border-bottom: 1px solid var(--color-medium-tint);
+    }
+</style>