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

<template>
    <div class="wrapper">
        <label class="input-label">{{$t('shared_form.recipients_label')}}</label>
        <div class="input-wrapper">
            <div class="email-list" v-for="(email, index) in emails" :key="index">
                <span> 
                    <p>{{email}} </p>
                    <x-icon @click="removeEmail(index)" class="icon" size="14" /> 
                </span>
            </div>
            <input@keydown.delete=removeLastEmail($event) @keyup="handleEmail()" v-model="singleEmail" class="emails" :placeholder="placeHolder" autocomplete="new-password" />
        </div>
    </div>
</template>

<script>
    import {XIcon } from 'vue-feather-icons'
    import {events} from '@/bus'
    export default {
        name: "EmailsInput",
        components: {XIcon},
        computed: {
            placeHolder() {
                if(! this.emails.length)
                    return this.$t('shared_form.email_placeholder')
            }
        },
        data () {
            return {
                emails: [],
                singleEmail: undefined
            }
        },
        methods: {
            removeEmail (email) {
                // Remove email forom array of emails 
                this.emails.shift(email)
            },
            removeLastEmail(event) {

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


                // Get index of @ and last dot 
                let lastDot = this.singleEmail.lastIndexOf('.')
                let at = this.singleEmail.indexOf('@')

                // Check if is after @ some dot, if email have @ anf if dont have more like one 
                if(lastDot < at || at === -1 || this.singleEmail.match(/@/g).length > 1 ) return
               
                
                // After come or backspace push the single email to array or emails
                if(this.singleEmail.includes(',') || this.singleEmail.includes(' ') ) {
                    
                    let email = this.singleEmail.replace(/[","," "]/, "")

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

                    this.singleEmail = ""

                    events.$emit('emailsInputValues', this.emails)
                }
            }
        }
    }
</script>

<style scoped lang="scss">
    @import "@assets/vue-file-manager/_inapp-forms.scss";
    @import '@assets/vue-file-manager/_forms';

    .wrapper {
        margin-bottom: 20px;
        padding: 0px 20px;
    }

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

    .input-wrapper   {
        background: white;
        display: flex;
        align-items: center;
        min-height: 50px;
        border-radius: 8px;
        padding: 13px 20px;
        box-shadow: 0 1px 5px rgba(0, 0, 0, 0.12);
        overflow-x: auto;
        overflow-y: none;

        &:focus-within{
            border:1px solid $theme;
            box-shadow: 0 1px 5px rgba($theme, 0.3);
        }
        .email-list {
            white-space: nowrap;
            span {
                display: flex;
                padding: 5px;
                background: rgba($theme, .1); 
                border-radius: 8px;
                margin-right: 5px;
                align-items: center;
                p {
                    color: $theme;
                    font-weight: 700;
                    @include font-size(16);
                }
                .icon {
                    cursor: pointer;
                    margin: 0px 4px;
                }
            }
        }
        .emails {
            min-width: 100px;
            border: none ;
            font-weight: 700;
            @include font-size(16);
            appearance: none;

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

     @media (prefers-color-scheme: dark) {
        .input-wrapper {
            background: $dark_mode_foreground;
            .emails {
                background: $dark_mode_foreground;
                color: $dark_mode_text_primary;

                &::placeholder {
                color:$dark_mode_text_secondary;
            }
            }
        }
    }
    


</style>