@westartcom/bread-quasar-fields 0.0.2

package/enums/FieldType.ts

@@ -0,0 +1,17 @@
+export enum FieldType {
+    BOOL = 'BOOL',
+    ENUM = 'ENUM',
+    TIMESTAMP = 'TIMESTAMP',
+    DATE = 'DATE',
+    TEXT = 'TEXT',
+    MEDIA = 'MEDIA',
+    FLOAT = 'FLOAT',
+    INT = 'INT',
+    JSON = 'JSON',
+    META = 'META',
+    RELATION = 'RELATION',
+    HASMANY = 'HASMANY',
+    HASONE = 'HASONE',
+    MANYTOMANY = 'MANYTOMANY',
+    SLOTTED = 'SLOTTED'
+}

package/enums/InputType.ts

@@ -0,0 +1,23 @@
+export enum InputType {
+    BOOL = 'boolean',
+    CHECKBOX = 'checkbox',
+    DATE = 'date',
+    DATETIME = 'datetime',
+    TIME = 'time',
+    NUMBER = 'number',
+    RELATION_LIST = 'relation-list',
+    MODEL_SEARCH = 'model-search',
+    IMAGE_UPLOAD = 'image-upload',
+    FILE_UPLOAD = 'file-upload',
+    NESTED_FIELDS = 'nested-fields',
+    REPEATABLE_NESTED_FIELDS = 'repeatable-nested-fields',
+    PASSWORD = 'password',
+    PASSWORD_CONFIRMATION = 'password-confirmation',
+    RADIO = 'radio',
+    SELECT = 'select',
+    EMAIL = 'email',
+    TEL = 'tel',
+    TEXT = 'text',
+    TEXTAREA = 'textarea',
+    WYSIWYG = 'wysiwyg'
+}

package/fields/BooleanField.vue

@@ -0,0 +1,176 @@
+<template>
+    <div class="field-wrap" :id="id">
+        <div class="field-wrap-inner">
+            <template v-if="stylingFormat === 'toggle'">
+                <q-toggle
+                    size="lg"
+                    color="positive"
+                    :label="field.label"
+                    left-label
+                    unchecked-icon="fa-solid fa-xmark"
+                    checked-icon="fa-solid fa-check"
+                    v-model="internalValue" />
+            </template>
+
+            <template v-else>
+                <div class="field-label-wrap">
+                    <div class="field">
+                        <label v-if="field.label" :for="id + '-input'">
+                            <checkbox-marked-icon class="icon-2x" v-if="internalValue"></checkbox-marked-icon>
+                            <checkbox-blank-outline-icon class="icon-2x" v-else></checkbox-blank-outline-icon>
+
+                            <input
+                                :name="field.name"
+                                :id="id + '-input'"
+                                type="checkbox"
+                                style="display: none;"
+                                :class="{'invalid': (invalid && internalErrors && internalErrors.length)}"
+                                v-model="internalValue">
+
+                            {{ field.label }}<span class="required-asterix" v-if="field.required"> *</span>
+                        </label>
+                    </div>
+                </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 { defineAsyncComponent, 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 BoolFieldDefinition extends ModelFieldDefinition<FieldType.BOOL, InputType.BOOL> {
+    default: boolean;
+    extra_data: {
+        styling_format: 'checkbox' | 'toggle'
+    }
+}
+
+export default defineComponent({
+    props: {
+        id: {
+            type: String,
+            required: true
+        },
+        field: {
+            type: Object as PropType<BoolFieldDefinition>,
+            required: true
+        },
+        modelValue: [Boolean, Number, String],
+        errors: Array as PropType<string[]>
+    },
+
+    emits: [
+        'update:modelValue',
+        'update:invalid'
+    ],
+
+    components: {
+        CheckboxBlankOutlineIcon: defineAsyncComponent(() => import('@westartcom/bread-quasar-fields/icons/CheckboxBlankOutlineIcon.vue')),
+        CheckboxMarkedIcon: defineAsyncComponent(() => import('@westartcom/bread-quasar-fields/icons/CheckboxMarkedIcon.vue'))
+    },
+
+    data() {
+        return {
+            invalid: null as boolean | null,
+            internalValue: false,
+            internalErrors: [] as string[]
+        };
+    },
+
+    mounted() {
+        if (this.modelValue !== null && typeof this.modelValue !== 'undefined') {
+            this.internalValue = (!(!this.modelValue || this.modelValue === '0'));
+        } else if (this.field.default) {
+            this.internalValue = this.field.default;
+        }
+
+        this.validate(this.internalValue);
+    },
+
+    computed: {
+        stylingFormat: function(): 'checkbox' | 'toggle' {
+            return (this.field?.extra_data?.styling_format) ? this.field.extra_data.styling_format : 'checkbox';
+        }
+    },
+
+    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;
+
+            &: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);
+            }
+        }
+    }
+
+    .field > label {
+        margin-right: var(--global-spacing);
+        user-select: none;
+        cursor: pointer;
+        display: inline-flex;
+        align-items: flex-end;
+
+        :deep(svg) {
+            margin-right: var(--global-spacing-half);
+        }
+    }
+</style>

package/fields/CheckboxField.vue

@@ -0,0 +1,163 @@
+<template>
+    <div class="field-wrap checkbox" :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>
+
+            <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="checkbox"
+                        hidden="true"
+                        :value="optionValue"
+                        v-model="internalValue">
+
+                    <checkbox-marked-icon class="icon-2x" v-if="internalValue && internalValue.includes(optionValue)"></checkbox-marked-icon>
+                    <checkbox-blank-outline-icon class="icon-2x" v-if="!internalValue || !internalValue.includes(optionValue)"></checkbox-blank-outline-icon>
+
+                    {{ label }}
+                </label>
+            </div>
+        </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 { defineAsyncComponent, 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 CheckboxFieldDefinition extends ModelFieldDefinition<FieldType.ENUM, InputType.CHECKBOX> {
+    default: string | string[];
+    extra_data: {
+        styling_format: 'checkbox';
+        options: {
+            [key: string]: string
+        }
+    }
+}
+
+export default defineComponent({
+    props: {
+        id: {
+            type: String,
+            required: true
+        },
+        field: {
+            type: Object as PropType<CheckboxFieldDefinition>,
+            required: true
+        },
+        modelValue: [String, Array],
+        errors: Array as PropType<string[]>
+    },
+
+    emits: [
+        'update:modelValue',
+        'update:invalid'
+    ],
+
+    components: {
+        CheckboxBlankOutlineIcon: defineAsyncComponent(() => import('@westartcom/bread-quasar-fields/icons/CheckboxBlankOutlineIcon.vue')),
+        CheckboxMarkedIcon: defineAsyncComponent(() => import('@westartcom/bread-quasar-fields/icons/CheckboxMarkedIcon.vue'))
+    },
+
+    data() {
+        return {
+            invalid: null as boolean | null,
+            internalValue: [] as string[],
+            internalErrors: [] as string[]
+        };
+    },
+
+    mounted() {
+        if (this.modelValue) {
+            this.internalValue = (Array.isArray(this.modelValue)) ? (this.modelValue as string[]) : this.modelValue.split(';');
+        } else if (this.field.default) {
+            this.internalValue = (Array.isArray(this.field.default)) ? this.field.default : this.field.default.split(';');
+        }
+
+        this.validate(this.internalValue);
+    },
+
+    computed: {
+        stylingFormat: function() {
+            return (this.field?.extra_data?.styling_format) ? this.field.extra_data.styling_format : 'checkbox';
+        },
+
+        allOptions: function() {
+            return (this.field?.extra_data?.options) ? this.field.extra_data.options : {};
+        }
+    },
+
+    watch: {
+        modelValue: {
+            handler: function(val) {
+                if (val !== this.internalValue) {
+                    this.internalValue = val;
+                }
+            },
+            deep: true
+        },
+
+        internalValue: {
+            handler: function(val) {
+                this.validate(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: {
+        validate: function(val) {
+            this.invalid = this.field.required && (!val || !val.length);
+        }
+    }
+});
+</script>
+
+<style scoped lang="scss">
+    .field > label {
+        margin-right: var(--global-spacing);
+        user-select: none;
+        cursor: pointer;
+        display: inline-flex;
+        align-items: flex-end;
+
+        :deep(svg) {
+            margin-right: var(--global-spacing-half);
+        }
+    }
+</style>

package/fields/DateField.vue

@@ -0,0 +1,124 @@
+<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"
+                type="date"
+                class="field"
+                :class="{'invalid': (invalid && internalErrors && internalErrors.length)}"
+                :max="formatDate(((field.extra_data?.max) ? field.extra_data.max : null), 'yyyy-MM-dd')"
+                :min="formatDate(((field.extra_data?.min) ? field.extra_data.min : null), 'yyyy-MM-dd')"
+                v-model="internalValue">
+        </div>
+        <em class="field-description" v-if="field.description">{{ field.description }}</em>
+
+        <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 formatDate from '.@westartcom/bread-quasar-fields/.@westartcom/bread-quasar-fields/Helpers/formatDate';
+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 DateFieldDefinition extends ModelFieldDefinition<FieldType.TIMESTAMP, InputType.DATE> {
+    default: string | null;
+    extra_data: {
+        timezone: string;
+        max?: string;
+        min?: string;
+    }
+}
+
+
+export default defineComponent({
+    props: {
+        id: {
+            type: String,
+            required: true
+        },
+        field: {
+            type: Object as PropType<DateFieldDefinition>,
+            required: true
+        },
+        modelValue: String,
+        errors: Array as PropType<string[]>
+    },
+
+    emits: [
+        'update:modelValue',
+        'update:invalid'
+    ],
+
+    data() {
+        return {
+            invalid: null as boolean | null,
+            internalValue: '',
+            internalErrors: [] as string[]
+        };
+    },
+
+    mounted() {
+        if (this.modelValue) {
+            this.internalValue = formatDate(this.modelValue, 'yyyy-MM-dd');
+        } else if (this.field.default) {
+            this.internalValue = formatDate(this.field.default, 'yyyy-MM-dd');
+        }
+
+        this.validate(this.internalValue);
+    },
+
+    watch: {
+        modelValue: function(val) {
+            if (val !== this.internalValue) {
+                this.internalValue = formatDate(val, 'yyyy-MM-dd');
+            }
+        },
+
+        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: {
+        formatDate,
+
+        validate: function(val) {
+            this.invalid = (this.field.required && !val);
+        }
+    }
+});
+</script>
+
+<style scoped lang="scss">
+
+</style>

package/fields/DateTimeField.vue

@@ -0,0 +1,110 @@
+<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"
+                type="datetime-local"
+                class="field"
+                :class="{'invalid': (invalid && internalErrors && internalErrors.length)}"
+                :max="formatDate(((field.extra_data && field.extra_data.max) ? field.extra_data.max : null), 'YYYY-MM-DDTHH:mm')"
+                :min="formatDate(((field.extra_data && field.extra_data.min) ? field.extra_data.min : null), 'YYYY-MM-DDTHH:mm')"
+                v-model="internalValue">
+        </div>
+        <em class="field-description" v-if="field.description">{{ field.description }}</em>
+
+        <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>
+import formatDate from '@westartcom/bread-quasar-fields/Helpers/formatDate';
+import moment from 'moment';
+
+export default {
+    props: {
+        id: String,
+        field: Object,
+        modelValue: String,
+        errors: Array
+    },
+
+    emits: [
+        'update:modelValue',
+        'update:invalid'
+    ],
+
+    data() {
+        return {
+            invalid: null,
+            internalValue: '',
+            internalErrors: []
+        };
+    },
+
+    mounted() {
+        if (this.modelValue) {
+            this.internalValue = moment.utc(this.modelValue).local().format('YYYY-MM-DDTHH:mm');
+        } else if (this.field.default) {
+            this.internalValue = moment.utc(this.field.default).local().format('YYYY-MM-DDTHH:mm');
+        }
+
+        this.validate(this.internalValue);
+    },
+
+    watch: {
+        modelValue: function(val) {
+            if (val !== this.internalValue) {
+                this.internalValue = moment.utc(val).local().format('YYYY-MM-DDTHH:mm');
+            }
+        },
+
+        internalValue: function(val) {
+            this.validate(val);
+            const date = moment(val);
+            if (date.isValid()) {
+                this.$emit('update:modelValue', date.utc().format('YYYY-MM-DDTHH:mm'));
+            } else {
+                this.$emit('update:modelValue', null);
+            }
+        },
+
+        errors: {
+            handler(val) {
+                this.internalErrors = val;
+            },
+            deep: true
+        },
+
+        internalErrors: {
+            handler(val) {
+                this.invalid = !!(val && val.length);
+            },
+            deep: true
+        },
+
+        invalid: function(val) {
+            this.$emit('update:invalid', val);
+        }
+    },
+
+    methods: {
+        formatDate,
+
+        validate: function(val) {
+            this.invalid = !!(this.field.required && !val);
+        }
+    }
+};
+</script>
+
+<style scoped lang="scss">
+
+</style>