MultiEmailInput

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

@@ -82,6 +82,7 @@ export default {
         display: flex;
         align-items: center;
         border-left: 1px solid $light_mode_border_darken;
+        cursor: pointer;
 
         &:hover {
             background: $text;
@@ -144,6 +145,10 @@ export default {
 
 @media (prefers-color-scheme: dark) {
 
+    .copy-input {
+        border-color: #333333;
+    }
+
     .multi-icon {
         background: $dark_mode_foreground;
         box-shadow: 0 1px 5px rgba(0, 0, 0, 0.12);
@@ -154,8 +159,8 @@ export default {
             stroke: $dark_mode_text_primary !important;
         }
 
-        & > * {
+        .icon-item {
-            border-left: 1px solid $dark_mode_background;
+            border-color: #333333;
 
             &:hover {
                 background: rgba($theme, 0.1);

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

@@ -1,185 +0,0 @@
-<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" 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" 
-                    :size="inputSize"
-                    autocomplete="new-password"
-                    ref="input" />
-        </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: "EmailsInput",
-        components: {XIcon},
-        props: ["isError", 'label'],
-        computed: {
-            placeHolder() {
-                if(! this.emails.length)
-                    return this.$t('shared_form.email_placeholder')
-            },
-            inputSize() {
-                if(this.singleEmail !== undefined || this.singleEmail !== undefined ) {
-                    if(this.singleEmail === "" && this.emails.length > 0) {
-                        return 1
-                    }else {
-                        return this.singleEmail.length
-                    }
-                }
-            },
-        },
-        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() {
-
-                if(this.singleEmail.length > 0) {
-                    // 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(/[","," "]/, "")
-
-                        this.singleEmail = ""
-
-                        // 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;
-        flex-direction: row;
-        flex-wrap: wrap;
-        min-height: 50px;
-        border-radius: 8px;
-        padding: 6px 20px;
-        box-shadow: 0 1px 5px rgba(0, 0, 0, 0.12);
-        cursor: text;
-
-        &.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 {
-            white-space: nowrap;
-            margin: 4px 0px;
-
-            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 {
-            width: auto;
-            height: 32px ;
-            border: none ;
-            font-weight: 700;
-            @include font-size(16);
-            margin: 6px 0px;
-
-            &::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>

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>

resources/js/components/Others/ShareCreate.vue

@@ -26,7 +26,7 @@
                     <!-- Share via Email -->
                     <TabOption :title="$t('shared_form.share_by_email')" icon="email">
                         <ValidationProvider tag="div" mode="passive" name="Email" rules="required" v-slot="{ errors }">
-                            <EmailsInput  rules="required" v-model="shareOptions.emails" :label="$t('shared_form.recipients_label')" :isError="errors[0]" />
+                            <MultiEmailInput  rules="required" v-model="shareOptions.emails" :label="$t('shared_form.recipients_label')" :isError="errors[0]" />
                         </ValidationProvider>
                     </TabOption>
 
@@ -103,7 +103,7 @@
     import PopupActions from '@/components/Others/Popup/PopupActions'
     import PopupContent from '@/components/Others/Popup/PopupContent'
     import PopupHeader from '@/components/Others/Popup/PopupHeader'
-    import EmailsInput from '@/components/Others/Forms/EmailsInput'
+    import MultiEmailInput from '@/components/Others/Forms/MultiEmailInput'
     import SwitchInput from '@/components/Others/Forms/SwitchInput'
     import SelectInput from '@/components/Others/Forms/SelectInput'
     import ThumbnailItem from '@/components/Others/ThumbnailItem'
@@ -133,7 +133,7 @@
             TabOption,
             PopupContent,
             PopupHeader,
-            EmailsInput,
+            MultiEmailInput,
             SelectInput,
             SwitchInput,
             ButtonBase,

resources/js/components/Others/ShareEdit.vue

@@ -22,7 +22,7 @@
             <ValidationObserver v-if="sendToRecipientsMenu && !isEmailSended" v-slot="{ invalid }" ref="shareEmail" tag="form" class="form-wrapper">
 
                 <ValidationProvider tag="div" mode="passive" name="Email" rules="required" v-slot="{ errors }">
-                    <EmailsInput  rules="required" v-model="emails" :label="$t('shared_form.label_send_to_recipients')" :isError="errors[0]" />
+                    <MultiEmailInput  rules="required" v-model="emails" :label="$t('shared_form.label_send_to_recipients')" :isError="errors[0]" />
                 </ValidationProvider>
 
             </ValidationObserver>
@@ -99,7 +99,7 @@
     import PopupHeader from '@/components/Others/Popup/PopupHeader'
     import SwitchInput from '@/components/Others/Forms/SwitchInput'
     import SelectInput from '@/components/Others/Forms/SelectInput'
-    import EmailsInput from '@/components/Others/Forms/EmailsInput'
+    import MultiEmailInput from '@/components/Others/Forms/MultiEmailInput'
     import ThumbnailItem from '@/components/Others/ThumbnailItem'
     import ActionButton from '@/components/Others/ActionButton'
     import CopyInput from '@/components/Others/Forms/CopyInput'
@@ -123,7 +123,7 @@
             PopupContent,
             PopupHeader,
             SelectInput,
-            EmailsInput,
+            MultiEmailInput,
             SwitchInput,
             ButtonBase,
             CopyInput,