@westartcom/bread-quasar-fields 0.0.2

package/fields/SelectField.vue

@@ -0,0 +1,485 @@
+<template>
+    <div class="field-wrap" :id="id" :class="{'disabled': (isDisabled)}">
+        <div class="field-wrap-inner">
+            <q-select
+                :rules="(field.required) ? [val => !!val || 'Field is required'] : []"
+                :options="qFilteredOptions"
+                @filter="qFilter"
+                map-options
+                dropdown-icon="fa-solid fa-angle-down"
+                use-input
+                outlined
+                :disable="isDisabled"
+                input-debounce="100"
+                :label="field.label + ((field.required) ? ' *' : '')"
+                emit-value
+                v-model="internalValue">
+                <template #selected-item="scope">
+                    <q-chip
+                        removable
+                        icon-remove="fa-solid fa-remove"
+                        @remove="scope.removeAtIndex(scope.index)">
+                        {{ scope.opt.label }}
+                    </q-chip>
+                </template>
+            </q-select>
+
+            <!--            <div class="select">-->
+            <!--                <div class="selected" @click="toggleOptions">-->
+            <!--                    <span class="label" :class="{'placeholder': (!allOptions[internalValue] && field.placeholder || field.extra_data.multiple)}">-->
+            <!--                        <template v-if="(!allOptions[internalValue] || field.extra_data.multiple) && field.placeholder">-->
+            <!--                            {{ field.placeholder }}-->
+            <!--                        </template>-->
+            <!--                        <template v-else-if="field.extra_data.multiple">-->
+            <!--                            {{ $i18n.get('actions.add') }}-->
+            <!--                        </template>-->
+            <!--                        <template v-else>-->
+            <!--                            {{ allOptions[internalValue] }}-->
+            <!--                        </template>-->
+            <!--                    </span>-->
+            <!--                    <span class="toggle-button">-->
+            <!--                        <chevron-down-icon v-if="!select.visible" />-->
+            <!--                        <chevron-up-icon v-else />-->
+            <!--                    </span>-->
+            <!--                </div>-->
+
+            <!--                <div class="options" v-if="select.visible">-->
+            <!--                    <div class="search" v-if="Object.keys(allOptions).length > 20">-->
+            <!--                        <input type="text" :placeholder="$i18n.get('actions.search')" v-model="select.searchQuery">-->
+            <!--                    </div>-->
+
+            <!--                    <div v-if="!field.required && !field.extra_data.multiple" class="option" @click="selectOption(null)">-->
+            <!--                        <slot name="no-option-label">-->
+            <!--                            {{ $i18n.get('generic.no_option') }}-->
+            <!--                        </slot>-->
+            <!--                    </div>-->
+
+            <!--                    <div-->
+            <!--                        v-for="(label, optionValue) in filteredOptions"-->
+            <!--                        :key="optionValue + '-option'"-->
+            <!--                        class="option"-->
+            <!--                        :class="{'selected-option': (internalValue && internalValue.includes(optionValue))}"-->
+            <!--                        @click="selectOption(optionValue)">-->
+            <!--                        <slot name="option" :option-value="optionValue" :label="label">-->
+            <!--                            {{ label }}-->
+            <!--                        </slot>-->
+            <!--                    </div>-->
+
+            <!--                    <div class="no-result" v-if="!Object.keys(filteredOptions).length">-->
+            <!--                        {{ $i18n.get('generic.no_result') }}-->
+            <!--                    </div>-->
+            <!--                </div>-->
+            <!--            </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 class="selected-options-multiple table-list" v-if="multiValueStyle === 'table' && internalValue.length && field.extra_data.multiple">-->
+        <!--            <div class="selected-option-row table-row" v-for="(option, index) in internalValue" :key="index">-->
+        <!--                <div class="selected-option-label column">-->
+        <!--                    <slot name="selected-option-label" :option="option" :all-options="allOptions">-->
+        <!--                        {{ allOptions[option] }}-->
+        <!--                    </slot>-->
+        <!--                </div>-->
+        <!--                <div class="column actions">-->
+        <!--                    <slot name="selected-option-actions" :option="option" :all-options="allOptions" />-->
+        <!--                    <button class="btn action delete" type="button" @click="removeOption(option)" :title="$i18n.get('actions.remove')">-->
+        <!--                        <link-variant-off-icon :title="$i18n.get('actions.remove')" />-->
+        <!--                    </button>-->
+        <!--                </div>-->
+        <!--            </div>-->
+        <!--        </div>-->
+        <!--        <div class="selected-options-multiple tags" v-else-if="multiValueStyle === 'tags' && internalValue.length && field.extra_data.multiple">-->
+        <!--            <div class="selected-option-tag" v-for="(option, index) in internalValue" :key="index">-->
+        <!--                <slot name="selected-option-tag" :option="option">-->
+        <!--                    <div class="selected-option-label">-->
+        <!--                        <slot name="selected-option-tag-label" :option="option" :all-options="allOptions">-->
+        <!--                            {{ allOptions[option] }}-->
+        <!--                        </slot>-->
+        <!--                    </div>-->
+        <!--                    <slot name="selected-option-actions" :option="option" :all-options="allOptions" />-->
+        <!--                    <button class="btn action delete" type="button" @click="removeOption(option)" :title="$i18n.get('actions.remove')">-->
+        <!--                        <close-icon :title="$i18n.get('actions.remove')" />-->
+        <!--                    </button>-->
+        <!--                </slot>-->
+        <!--            </div>-->
+        <!--        </div>-->
+    </div>
+</template>
+
+<script lang="ts">
+import { defineComponent, PropType } from 'vue';
+import escapeRegExp from 'lodash-es/escapeRegExp';
+import pickBy from 'lodash-es/pickBy';
+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 SelectFieldDefinition extends ModelFieldDefinition<FieldType.ENUM, InputType.SELECT> {
+    default: string;
+    disabled?: boolean;
+    extra_data: {
+        multiple?: boolean;
+        styling_format: 'select' | 'tags' | 'table';
+        options: {
+            [key: string]: string;
+        };
+    };
+}
+
+export default defineComponent({
+    props: {
+        id: {
+            type: String,
+            required: true
+        },
+        field: {
+            type: Object as PropType<SelectFieldDefinition>,
+            required: true
+        },
+        disabled: Boolean,
+        modelValue: [String, Number, Array],
+        errors: Array as PropType<string[]>,
+        hiddenOptionValues: {
+            type: Array as PropType<string[]>,
+            default: () => []
+        }
+    },
+
+    emits: [
+        'update:modelValue',
+        'update:invalid'
+    ],
+
+    components: {
+
+    },
+
+    data() {
+        return {
+            invalid: null as boolean | null,
+            internalValue: [] as string[],
+            internalErrors: [] as string[],
+            select: {
+                visible: false,
+                showSearch: false,
+                searchQuery: ''
+            }
+        };
+    },
+
+    mounted() {
+        if (this.modelValue) {
+            this.internalValue = (Array.isArray(this.modelValue) ? this.modelValue : [this.modelValue]) as string[];
+        } else if (this.field.default) {
+            this.internalValue = Array.isArray(this.field.default) ? this.field.default : [this.field.default];
+        }
+
+        // document.addEventListener('click', this.onOutsideClick);
+
+        this.validate(this.internalValue);
+    },
+
+    // beforeUnmount() {
+    //     document.removeEventListener('click', this.onOutsideClick);
+    // },
+
+    computed: {
+        // allOptions: function() {
+        //     return (this.field?.extra_data?.options) ? this.field.extra_data.options : {};
+        // },
+        qFilteredOptions: function() {
+            const filteredOptions = this.filteredOptions;
+            let qOptions = [];
+            Object.keys(filteredOptions).forEach((key) => {
+                qOptions.push({
+                    label: filteredOptions[key],
+                    value: key
+                });
+            });
+
+            return qOptions;
+        },
+        /**
+         * Filters available options
+         * (eg. when searching or passing hidden options)
+         *
+         * @returns {*}
+         */
+        filteredOptions: function(): {[key: string]: string} {
+            const options = (this.field?.extra_data?.options) ? this.field.extra_data.options : {};
+            const pattern = new RegExp(escapeRegExp(this.select.searchQuery), 'i');
+
+            return (this.select.searchQuery || this.hiddenOptionValues.length) ? pickBy(options, (label, value) => {
+                return !this.hiddenOptionValues.includes(value) && (this.select.searchQuery && pattern.test(label) || !this.select.searchQuery);
+            }) : options;
+        },
+
+        isDisabled: function(): boolean {
+            return !!(this.disabled || this.field.disabled);
+        },
+
+        // multiValueStyle: function(): 'select' | 'tags' | 'table' {
+        //     return this.field?.extra_data?.styling_format || 'table';
+        // }
+    },
+
+    watch: {
+        modelValue: {
+            handler: function(val) {
+                if (val !== this.internalValue) {
+                    if (Array.isArray(val)) {
+                        if (
+                            (!this.internalValue || !Array.isArray(this.internalValue)) ||
+                            (val.toString() !== this.internalValue.toString())
+                        ) {
+                            this.internalValue = val;
+                        }
+                    } else {
+                        if (
+                            !this.internalValue ||
+                            this.internalValue[0] !== val
+                        ) {
+                            this.internalValue = [val];
+                        }
+                    }
+                }
+            },
+            deep: true
+        },
+
+        // 'select.visible': function(val) {
+        //     // Reset searchQuery on close
+        //     if (!val) {
+        //         this.select.searchQuery = '';
+        //     }
+        // },
+
+        internalValue: {
+            handler: function(val) {
+                this.validate(val);
+
+                if(!Array.isArray(val)) {
+                    val = [val];
+                }
+
+                if (this.field.extra_data.multiple) {
+                    this.$emit('update:modelValue', val);
+                } else {
+                    this.$emit('update:modelValue', (Array.isArray(val) && val.length) ? val[0] : null);
+                }
+            },
+            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: {
+        qFilter(val, update) {
+            this.select.searchQuery = val;
+            update(() => {
+                return this.qFilteredOptions;
+            });
+        },
+
+        // onOutsideClick: function(event) {
+        //     if (this.select.visible && !this.$el.querySelector('.select').contains(event.target)) {
+        //         this.toggleOptions();
+        //     }
+        // },
+        //
+        // toggleOptions: function(event?: any) {
+        //     if (this.isDisabled) {
+        //         this.select.visible = false;
+        //         return;
+        //     }
+        //
+        //     this.select.visible = !(this.select.visible);
+        //
+        //     if (this.select.visible && this.select.showSearch) {
+        //         nextTick(() => {
+        //             const searchInput = this.$el.querySelector('.select .search > input');
+        //             if (searchInput) {
+        //                 searchInput.focus();
+        //             }
+        //         });
+        //     }
+        // },
+        //
+        // selectOption: function(option) {
+        //     if (option === null && !this.field.extra_data.multiple) {
+        //         this.internalValue = [];
+        //     }
+        //
+        //     // Only add if it's not added already
+        //     if (option !== null && !this.internalValue.includes(option)) {
+        //         if (this.field.extra_data.multiple) {
+        //             this.internalValue.push(option);
+        //         } else {
+        //             this.internalValue = [option];
+        //         }
+        //     }
+        //
+        //     this.select.visible = false;
+        // },
+        //
+        // removeOption(option) {
+        //     this.internalValue = this.internalValue.filter((selectedOption) => selectedOption !== option);
+        // },
+
+        validate(val) {
+            this.invalid = (this.field.required && (!val || !val.length));
+        }
+    }
+});
+</script>
+
+<style scoped lang="scss">
+    //.select {
+    //    display: block;
+    //    position: relative;
+    //    user-select: none;
+    //    width: 100%;
+    //    max-width: var(--max-input-width);
+    //
+    //    > .selected {
+    //        display: flex;
+    //        align-items: center;
+    //        cursor: pointer;
+    //        border: 2px solid var(--color-medium);
+    //        border-radius: var(--input-radius);
+    //        width: 100%;
+    //        line-height: 1.3;
+    //
+    //        .label {
+    //            flex-grow: 1;
+    //            padding: var(--global-spacing);
+    //            overflow: hidden;
+    //            white-space: nowrap;
+    //            text-overflow: ellipsis;
+    //
+    //            &.placeholder {
+    //                color: var(--color-medium-txt);
+    //            }
+    //        }
+    //
+    //        .toggle-button {
+    //            flex-shrink: 1;
+    //            padding: var(--global-spacing);
+    //            border-left: 2px solid var(--color-medium);
+    //        }
+    //    }
+    //
+    //    .options {
+    //        position: absolute;
+    //        display: block;
+    //        width: 100%;
+    //        background-color: #fff;
+    //        border: 2px solid var(--color-dark-txt);
+    //        border-radius: var(--input-radius);
+    //        box-shadow: var(--global-shadow);
+    //        z-index: 9999;
+    //        max-width: var(--max-input-width);
+    //        max-height: 300px;
+    //        overflow-y: auto;
+    //        margin-top: -5px;
+    //
+    //        .search {
+    //            input {
+    //                display: block;
+    //                width: 100%;
+    //                padding: var(--global-spacing);
+    //                border: none;
+    //                border-bottom: 2px solid var(--color-medium);
+    //                outline: none;
+    //                font-size: var(--font-size-base);
+    //
+    //                &:focus {
+    //                    border-color: var(--color-primary);
+    //                }
+    //            }
+    //        }
+    //
+    //        .no-result {
+    //            color: var(--color-medium);
+    //            padding: var(--global-spacing);
+    //        }
+    //
+    //        .option {
+    //            display: block;
+    //            padding: var(--global-spacing);
+    //            overflow: hidden;
+    //            white-space: nowrap;
+    //            text-overflow: ellipsis;
+    //            cursor: pointer;
+    //
+    //            &.selected-option {
+    //                font-weight: bold;
+    //                cursor: default;
+    //                text-decoration: underline;
+    //                text-decoration-color: var(--color-primary);
+    //            }
+    //
+    //            &:hover:not(.selected-option) {
+    //                background-color: var(--color-dark-txt);
+    //                color: var(--color-light-txt);
+    //            }
+    //        }
+    //    }
+    //}
+    //
+    //.selected-options-multiple {
+    //    max-width: var(--max-content-width);
+    //    margin-top: var(--global-spacing);
+    //    margin-bottom: var(--global-spacing);
+    //
+    //    &.tags {
+    //        display: flex;
+    //        flex-wrap: wrap;
+    //
+    //        .selected-option-tag {
+    //            display: flex;
+    //            align-items: center;
+    //            background-color: var(--color-dark-txt);
+    //            border-radius: var(--global-radius);
+    //            color: var(--color-light-txt);
+    //            margin-right: var(--global-spacing);
+    //            margin-bottom: var(--global-spacing-half);
+    //
+    //            .selected-option-label {
+    //                padding: var(--global-spacing-half);
+    //                line-height: 1;
+    //                margin-top: 2px;
+    //            }
+    //
+    //            button.delete {
+    //                border: 0;
+    //                padding: var(--global-spacing-half);
+    //                margin: 0;
+    //                color: var(--color-light-txt);
+    //            }
+    //        }
+    //    }
+    //}
+</style>

package/fields/TelField.vue

@@ -0,0 +1,130 @@
+<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'"
+                maxlength="255"
+                :placeholder="field.placeholder"
+                type="tel"
+                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 { E164Number, parsePhoneNumberFromString } from 'libphonenumber-js';
+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 TelFieldDefinition extends ModelFieldDefinition<FieldType.TEXT, InputType.TEL> {
+    default: string | null;
+}
+
+export default defineComponent({
+    props: {
+        id: {
+            type: String,
+            required: true
+        },
+        field: {
+            type: Object as PropType<TelFieldDefinition>,
+            required: true
+        },
+        modelValue: String,
+        errors: Array as PropType<string[]>
+    },
+
+    emits: [
+        'update:modelValue',
+        'update:invalid'
+    ],
+
+    data() {
+        return {
+            invalid: null as boolean | null,
+            internalValue: null as E164Number | null,
+            internalErrors: [] as string[]
+        };
+    },
+
+    mounted() {
+        if (this.modelValue) {
+            let phoneNumber = parsePhoneNumberFromString(this.modelValue);
+            this.internalValue = (phoneNumber) ? phoneNumber.number : null;
+        } else if (this.field.default) {
+            let phoneNumber = parsePhoneNumberFromString(this.field.default);
+            this.internalValue = (phoneNumber) ? phoneNumber.number : null;
+        }
+
+        this.validate(this.internalValue);
+    },
+
+    watch: {
+        modelValue: function(val) {
+            if (val !== this.internalValue) {
+                this.internalValue = val;
+            }
+        },
+
+        internalValue: function(val) {
+            this.validate(val);
+
+            let phoneNumber = (val && typeof val === 'string') ? parsePhoneNumberFromString(val) : null;
+            this.$emit('update:modelValue', (phoneNumber) ? phoneNumber.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) {
+            if (this.field.required && !val) {
+                this.invalid = true;
+            } else {
+                const phoneNumber = (val && typeof val === 'string') ? parsePhoneNumberFromString(val) : null;
+                this.internalErrors = [];
+                this.invalid = (val && !(phoneNumber && phoneNumber.isValid()));
+
+                if (this.invalid) {
+                    this.internalErrors.push(this.$i18n.get('validation.phone', {attribute: this.field.label}));
+                }
+            }
+        }
+    }
+});
+</script>
+
+<style scoped lang="scss">
+
+</style>