MultiEmailInput

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

@@ -0,0 +1,184 @@
+<template>
+    <div class="wrapper">
+        <label class="input-label">{{ label }}:</label>
+        <div class="input-wrapper" :class="{'is-error' : isError}" @click="$refs.input.focus()">
+            <div class="email-list">
+                <div class="email-tag" :class="{'mb-offset': getCharactersLength > 45}" v-for="(email, i) in emails" :key="i">
+                    <span>{{ 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 '@/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)
+        },
+        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
+
+                // 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 "@assets/vue-file-manager/_inapp-forms.scss";
+@import '@assets/vue-file-manager/_forms';
+
+.wrapper {
+    margin-bottom: 20px;
+}
+
+.input-label {
+    @include font-size(14);
+    font-weight: 700;
+    margin-bottom: 8px;
+}
+
+.input-wrapper {
+    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-tag {
+        white-space: nowrap;
+        display: flex;
+        padding: 5px 10px;
+        background: rgba($theme, .1);
+        border-radius: 8px;
+        margin-right: 5px;
+        align-items: center;
+
+        &.mb-offset {
+            margin-top: 3px;
+            margin-bottom: 3px;
+        }
+
+        span {
+            color: $theme;
+            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)
+        }
+    }
+}
+
+@media (prefers-color-scheme: dark) {
+    .input-wrapper {
+        background: $dark_mode_foreground;
+
+        .email-list {
+
+            .email-input {
+                background: $dark_mode_foreground;
+                color: $dark_mode_text_primary;
+
+                &::placeholder {
+                    color: $dark_mode_text_secondary;
+                }
+            }
+        }
+    }
+}
+
+
+</style>