@westartcom/bread-quasar-fields 0.0.2

package/fields/TextField.vue

@@ -0,0 +1,119 @@
+<template>
+    <div class="q-mb-md" :id="id">
+        <div class="field-wrap-inner">
+            <q-input
+                :label="field.label + ((field.required) ? ' *' : '')"
+                :name="field.name"
+                :id="id + '-input'"
+                :placeholder="field.placeholder"
+                type="text"
+                class="field"
+                :class="{'invalid': (invalid && internalErrors && internalErrors.length)}"
+                :maxlength="(field.extra_data && field.extra_data.max) ? field.extra_data.max : null"
+                :minlength="(field.extra_data && field.extra_data.min) ? field.extra_data.min : null"
+                v-model="internalValue"
+                :rules="(field.required) ? [val => !!val || 'Field is required'] : []"
+                :hint="field.description"
+                outlined>
+            </q-input>
+        </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 TextFieldDefinition extends ModelFieldDefinition<FieldType.TEXT, InputType.TEXT> {
+    default: string | null;
+    extra_data?: {
+        max?: number;
+        min?: number;
+    }
+}
+
+export default defineComponent({
+    props: {
+        id: {
+            type: String,
+            required: true
+        },
+        field: {
+            type: Object as PropType<TextFieldDefinition>,
+            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 = this.modelValue;
+        } else if (this.field.default) {
+            this.internalValue = this.field.default;
+        }
+
+        this.validate(this.internalValue);
+    },
+
+    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">
+
+</style>

package/fields/TextareaField.vue

@@ -0,0 +1,120 @@
+<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>
+
+            <textarea
+                :name="field.name"
+                :id="id + '-input'"
+                :placeholder="field.placeholder"
+                :maxlength="(field.extra_data && field.extra_data.max) ? field.extra_data.max : null"
+                :minlength="(field.extra_data && field.extra_data.min) ? field.extra_data.min : null"
+                rows="5"
+                class="field"
+                :class="{'invalid': (invalid && internalErrors && internalErrors.length)}"
+                v-model="internalValue">
+            </textarea>
+        </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 TextareaFieldDefinition extends ModelFieldDefinition<FieldType.TEXT, InputType.TEXTAREA> {
+    default: string | null;
+    extra_data?: {
+        max?: number;
+        min?: number;
+    }
+}
+
+export default defineComponent({
+    props: {
+        id: {
+            type: String,
+            required: true
+        },
+        field: {
+            type: Object as PropType<TextareaFieldDefinition>,
+            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 = this.modelValue;
+        } else if (this.field.default) {
+            this.internalValue = this.field.default;
+        }
+
+        this.validate(this.internalValue);
+    },
+
+    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">
+</style>

package/fields/WysiwygDisplayField.vue

@@ -0,0 +1,53 @@
+<template>
+    <div class="wysiwyg-display" v-html="output"></div>
+</template>
+
+<script lang="ts">
+import { generateHTML } from '@tiptap/html';
+import { JSONContent } from '@tiptap/core';
+import StarterKit from '@tiptap/starter-kit';
+import { defineComponent } from 'vue';
+
+export default defineComponent({
+    props: {
+        modelValue: String
+    },
+
+    mounted() {
+        if (this.modelValue) {
+            this.internalValue = JSON.parse(this.modelValue);
+        }
+    },
+
+    data() {
+        return {
+            internalValue: null as JSONContent | null
+        };
+    },
+
+    computed: {
+        output() {
+            if (this.internalValue) {
+                return generateHTML(this.internalValue, [
+                    StarterKit
+                ]);
+            }
+
+            return '';
+        }
+    },
+
+    watch: {
+        modelValue: function(val) {
+            const stringRepVal = (this.internalValue) ? JSON.stringify(this.internalValue) : '';
+            if (val !== stringRepVal) {
+                this.internalValue = (val ? JSON.parse(val) : null);
+            }
+        }
+    }
+});
+</script>
+
+<style lang="scss">
+
+</style>

package/fields/WysiwygField.vue

@@ -0,0 +1,263 @@
+<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>
+
+            <div class="editor-wrap">
+                <div class="menubar" v-if="editor">
+                    <button
+                        type="button"
+                        :class="{ 'is-active': editor.isActive('bold') }"
+                        @click="editor.chain().focus().toggleBold().run()">
+                        <bold-icon class="icon-1-5x"></bold-icon>
+                    </button>
+
+                    <button
+                        type="button"
+                        :class="{ 'is-active': editor.isActive('italic') }"
+                        @click="editor.chain().focus().toggleItalic().run()">
+                        <italic-icon class="icon-1-5x"></italic-icon>
+                    </button>
+
+                    <button
+                        type="button"
+                        :class="{ 'is-active': editor.isActive('heading', { level: 2 }) }"
+                        @click="editor.chain().focus().toggleHeading({ level: 2 }).run()">
+                        H2
+                    </button>
+
+                    <button
+                        type="button"
+                        :class="{ 'is-active': editor.isActive('heading', { level: 3 }) }"
+                        @click="editor.chain().focus().toggleHeading({ level: 3 }).run()">
+                        H3
+                    </button>
+
+                    <button
+                        type="button"
+                        :class="{ 'is-active': editor.isActive('heading', { level: 4 }) }"
+                        @click="editor.chain().focus().toggleHeading({ level: 4 }).run()">
+                        H4
+                    </button>
+
+                    <button
+                        type="button"
+                        :class="{ 'is-active': editor.isActive('bulletList') }"
+                        @click="editor.chain().focus().toggleBulletList().run()">
+                        <bullet-list-icon class="icon-1-5x"></bullet-list-icon>
+                    </button>
+
+                    <button
+                        type="button"
+                        :class="{ 'is-active': editor.isActive('orderedList') }"
+                        @click="editor.chain().focus().toggleOrderedList().run()">
+                        <ordered-list-icon class="icon-1-5x"></ordered-list-icon>
+                    </button>
+
+                    <button
+                        type="button"
+                        :class="{ 'is-active': editor.isActive('blockquote') }"
+                        @click="editor.chain().focus().toggleBlockquote().run()">
+                        <quote-icon class="icon-1-5x"></quote-icon>
+                    </button>
+                </div>
+                <editor-content :editor="editor" />
+            </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 debounce from 'lodash-es/debounce';
+import { Editor, EditorContent } from '@tiptap/vue-3';
+import StarterKit from '@tiptap/starter-kit';
+import { JSONContent } from '@tiptap/core';
+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 TextareaFieldDefinition extends ModelFieldDefinition<FieldType.JSON, InputType.WYSIWYG> {
+    default: JSONContent | null;
+}
+
+export default defineComponent({
+    components: {
+        EditorContent,
+        BoldIcon: defineAsyncComponent(() => import('@westartcom/bread-quasar-fields/icons/BoldIcon.vue')),
+        ItalicIcon: defineAsyncComponent(() => import('@westartcom/bread-quasar-fields/icons/ItalicIcon.vue')),
+        BulletListIcon: defineAsyncComponent(() => import('@westartcom/bread-quasar-fields/icons/BulletListIcon.vue')),
+        OrderedListIcon: defineAsyncComponent(() => import('@westartcom/bread-quasar-fields/icons/OrderedListIcon.vue')),
+        QuoteIcon: defineAsyncComponent(() => import('@westartcom/bread-quasar-fields/icons/QuoteIcon.vue')),
+    },
+
+    props: {
+        id: {
+            type: String,
+            required: true
+        },
+        field: {
+            type: Object as PropType<TextareaFieldDefinition>,
+            required: true
+        },
+        modelValue: [String, Object],
+        errors: Array as PropType<string[]>
+    },
+
+    emits: [
+        'update:modelValue',
+        'update:invalid'
+    ],
+
+    data() {
+        return {
+            editor: null as Editor | null,
+            invalid: null as boolean | null,
+            internalValue: null as JSONContent | null,
+            internalErrors: [] as string[]
+        };
+    },
+
+    mounted() {
+        if (this.modelValue) {
+            this.internalValue = (typeof this.modelValue === 'string') ? JSON.parse(this.modelValue) : this.modelValue;
+        } else if (this.field.default) {
+            this.internalValue = this.field.default;
+        }
+
+        this.setupEditor(this.internalValue);
+        this.validate(this.internalValue);
+    },
+
+    beforeUnmount()
+    {
+        this.editor?.destroy();
+    },
+
+    watch: {
+        modelValue: function(val) {
+            const stringRepInternalVal = (this.internalValue) ? JSON.stringify(this.internalValue) : '';
+            const stringRepVal = (typeof val === 'string') ? val : ((val) ? JSON.stringify(val) : '');
+            if (stringRepVal !== stringRepInternalVal) {
+                this.editor?.commands.setContent(val ? JSON.parse(val) : null, false);
+            }
+        },
+
+        internalValue: function(val) {
+            this.validate(val);
+            this.$emit('update:modelValue', (val) ? JSON.stringify(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: {
+        setupEditor(content) {
+            this.editor = new Editor({
+                content,
+                extensions: [
+                    StarterKit
+                ],
+                onUpdate: debounce(this.onUpdate, 300)
+            });
+        },
+
+        onUpdate() {
+            if (!this.editor) {
+                return;
+            }
+
+            this.internalValue = this.editor.getJSON();
+        },
+
+        validate(val) {
+            if (!this.editor) {
+                return;
+            }
+
+            const hasContent = this.editor.state &&
+                               this.editor.state.doc &&
+                               this.editor.state.doc.textContent &&
+                               this.editor.state.doc.textContent.length;
+
+            this.invalid = (this.field.required && !hasContent);
+        }
+    }
+});
+</script>
+
+<style lang="scss">
+    .editor-wrap {
+        max-width: var(--max-content-width);
+        width: 100%;
+    }
+
+    [contenteditable] {
+        border: 2px solid var(--color-medium);
+        border-radius: var(--global-radius);
+        -webkit-user-select: text;
+        user-select: text;
+        padding: var(--global-spacing-half)  var(--global-spacing);
+        outline: none;
+        min-height: 100px;
+        line-height: 1.1;
+        max-height: 900px;
+        overflow-y: auto;
+
+        &:focus {
+            border-color: var(--color-primary);
+        }
+    }
+
+    .menubar {
+        display: flex;
+        align-items: stretch;
+        margin-bottom: var(--global-spacing-half);
+
+        button {
+            display: inline-flex;
+            align-items: center;
+            background: none;
+            border: 2px solid transparent;
+            outline: none;
+            padding: var(--global-spacing-half);
+            border-radius: calc(var(--global-radius) / 2);
+            margin-right: var(--global-spacing-half);
+            transition: all 0.1s ease;
+
+            &:hover {
+                border-color: var(--color-primary);
+            }
+
+            &.is-active {
+                background-color: var(--color-primary);
+                color: var(--color-light-txt);
+                box-shadow: var(--global-radius);
+            }
+        }
+    }
+</style>

package/icons/CheckboxBlankOutlineIcon.vue

@@ -0,0 +1,20 @@
+<template>
+    <svg-icon type="fa" :path="iconPath"></svg-icon>
+</template>
+
+<script lang="ts">
+import SvgIcon from '@westartcom/bread-quasar-fields/icons/SvgBaseIcon.vue';
+import { defineComponent } from 'vue';
+import {farSquare} from '@quasar/extras/fontawesome-v6';
+
+export default defineComponent({
+    components: {
+        SvgIcon
+    },
+    data() {
+        return {
+            iconPath: farSquare
+        };
+    }
+});
+</script>

package/icons/CheckboxMarkedIcon.vue

@@ -0,0 +1,20 @@
+<template>
+    <svg-icon type="fa" :path="iconPath"></svg-icon>
+</template>
+
+<script lang="ts">
+import SvgIcon from '@westartcom/bread-quasar-fields/icons/SvgBaseIcon.vue';
+import { defineComponent } from 'vue';
+import {farSquareCheck} from '@quasar/extras/fontawesome-v6';
+
+export default defineComponent({
+    components: {
+        SvgIcon
+    },
+    data() {
+        return {
+            iconPath: farSquareCheck
+        };
+    }
+});
+</script>

package/icons/SvgBaseIcon.vue

@@ -0,0 +1,70 @@
+<template>
+    <svg
+        :width="sizeValue"
+        :height="sizeValue"
+        :viewBox="viewboxValue"
+        :style="styles">
+        <path :d="path" />
+    </svg>
+</template>
+
+<script lang="ts">
+import { defineComponent, PropType } from 'vue';
+
+const types = {
+    mdi: {
+        size: 24,
+        viewbox: '0 0 24 24',
+    },
+    default: {
+        size: 0,
+        viewbox: '0 0 0 0',
+    },
+    fa: {
+        size: 24,
+        viewbox: '0 0 24 24',
+    }
+};
+
+export default defineComponent({
+    props: {
+        type: String,
+        path: { type: String, required: true },
+        size: { type: [String, Number], default: 24 },
+        viewbox: String,
+        flip: {
+            type: String as PropType<'horizontal' | 'vertical' | 'both' | 'none'>,
+            validator: (value: string) =>
+                ['horizontal', 'vertical', 'both', 'none'].includes(value),
+        },
+        rotate: { type: Number, default: 0 },
+    },
+    computed: {
+        styles() {
+            return {
+                '--sx': this.flip && ['both', 'horizontal'].includes(this.flip) ? '-1' : '1',
+                '--sy': this.flip && ['both', 'vertical'].includes(this.flip) ? '-1' : '1',
+                '--r': isNaN(this.rotate) ? this.rotate : this.rotate + 'deg',
+            };
+        },
+        defaults() {
+            return (this.type && types[this.type]) ? types[this.type] : types.default;
+        },
+        sizeValue() {
+            return this.size || this.defaults.size;
+        },
+        viewboxValue() {
+            return this.viewbox || this.defaults.viewbox;
+        },
+    },
+});
+</script>
+
+<style scoped lang="scss">
+svg {
+    transform: rotate(var(--r, 0deg)) scale(var(--sx, 1), var(--sy, 1));
+}
+path {
+    fill: currentColor;
+}
+</style>