vuefilemanager/resources/js/components/Others/Forms/MultiEmailInput.vue

<template>
    <div class="wrapper">
		<!--<label class="input-label">{{ label }}:</label>-->
        <div class="input-wrapper focus-within-border-theme" :class="{'is-error' : isError}" @click="$refs.input.focus()">
            <div class="email-list">
                <div class="email-tag bg-theme-100" :class="{'mb-offset': getCharactersLength > 45}" v-for="(email, i) in emails" :key="i">
                    <span class="text-theme">{{ email }}</span>
                    <x-icon @click="removeEmail(email)" class="icon" size="14"/>
                </div>
                <input @keydown.delete=removeLastEmail($event) @keyup="handleEmail()" v-model="email" :size="inputSize" class="email-input" :placeholder="placeHolder" autocomplete="new-password" ref="input"/>
            </div>
        </div>
        <span class="error-message" v-if="isError">{{ isError }}</span>
    </div>
</template>

<script>
import { XIcon } from 'vue-feather-icons'
import { events } from '/resources/js/bus'

export default {
    name: 'MultiEmailInput',
    components: { XIcon },
    props: ['isError', 'label'],
    computed: {
        getCharactersLength() {
            return this.emails.join( '' ).length
        },
        placeHolder() {
            return !this.emails.length ? this.$t( 'shared_form.email_placeholder' ) : ''
        },
        inputSize() {
            return this.email && this.email.length > 14 ? this.email.length : 14
        }
    },
    data() {
        return {
            emails: [],
            email: undefined
        }
    },
    methods: {
        removeEmail( email ) {
            this.emails = this.emails.filter( item => item !== email )

            // After romove email send new emails list to parent
            events.$emit( 'emailsInputValues', this.emails )
        },
        removeLastEmail( event ) {

            // If is input empty and presse backspace remove last email from array
            if ( event.code === 'Backspace' && this.email === '' )
                this.emails.pop()
        },
        handleEmail() {

            if ( this.email.length > 0 ) {
                // Get index of @ and last dot
                let lastDot = this.email.lastIndexOf( '.' )
                let at = this.email.indexOf( '@' )

                // Check if is after @ some dot, if email have @ anf if dont have more like one
                if ( lastDot < at || at === -1 || this.email.match(/@/g).length > 1 ) return

                // First email dont need to be separated by comma or space to be sended
                if( this.emails.length === 0 ) 
                    events.$emit('emailsInputValues', [this.email])
                

                // After come or backspace push the single email to array or emails
                if ( this.email.includes(',') || this.email.includes(' ') ) {

                    let email = this.email.replace( /[","," "]/, '' )

                    this.email = ''

                    // Push single email to aray of emails
                    this.emails.push( email )

                    events.$emit( 'emailsInputValues', this.emails )
                }
            }
        }
    },
    created() {
        this.$nextTick(() => {
            this.$refs.input.focus()
        })
    }
}
</script>

<style scoped lang="scss">
@import "resources/sass/vuefilemanager/_inapp-forms.scss";
@import '/resources/sass/vuefilemanager/_forms';

.wrapper {
    margin-bottom: 20px;
}

.input-label {
    @include font-size(14);
    font-weight: 700;
    margin-bottom: 8px;
}

.input-wrapper {
    margin-bottom: 0;
    background: white;
    max-width: 100%;
    display: flex;
    min-height: 50px;
    border-radius: 8px;
    padding: 6px 10px;
    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.12);
    cursor: text;
    border: 1px solid transparent;
    @include transition(150ms);

    &.is-error {
        border: 1px solid $danger;
        box-shadow: 0 0 7px rgba($danger, 0.3);
    }

    &:focus-within {
        //border: 1px solid $theme;
        //box-shadow: 0 1px 5px rgba($theme, 0.3);
    }

    .email-list {
        display: flex;
        flex-wrap: wrap;

        .email-input {
            font-size: 14px;
        }
    }

    .email-tag {
        white-space: nowrap;
        display: flex;
        padding: 5px 10px;
        border-radius: 8px;
        margin-right: 5px;
        align-items: center;

        &.mb-offset {
            margin-top: 3px;
            margin-bottom: 3px;
        }

        span {
            font-weight: 700;
            @include font-size(14);
        }

        .icon {
            cursor: pointer;
            margin-left: 4px;
        }
    }

    .email-input {
        width: auto;
        border: none ;
        font-weight: 700;
        @include font-size(16);
        padding-left: 11px;

        &::placeholder {
            color: rgba($text-muted, .5)
        }
    }
}

.dark {
    .input-wrapper {
		background: lighten($dark_mode_foreground, 3%);

        .email-list {

            .email-input {
				background: lighten($dark_mode_foreground, 3%);
                color: $dark_mode_text_primary;

                &::placeholder {
                    color: $dark_mode_text_secondary;
                }
            }
        }
    }
}
</style>