nexus/vuefilemanager
2
0
Fork 0
mirror of https://github.com/VueFileManager/vuefilemanager.git synced 2026-04-18 08:12:15 +00:00
Code Issues Packages Projects Releases Wiki Activity

MultiEmailInput

Browse Source
This commit is contained in:
Peter Papp
2021-01-30 11:52:38 +01:00
parent a5dd0e0d30
commit 58ae75ecc9
5 changed files with 197 additions and 193 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
resources/js/components/Others/Forms/CopyInput.vue
View File

@@ -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;
}
& > * {
border-left: 1px solid $dark_mode_background;
.icon-item {
border-color: #333333;
&:hover {
background: rgba($theme, 0.1);

185
resources/js/components/Others/Forms/EmailsInput.vue
View File

@@ -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>

184
resources/js/components/Others/Forms/MultiEmailInput.vue Normal file
View File

@@ -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>

6
resources/js/components/Others/ShareCreate.vue
View File

@@ -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,

6
resources/js/components/Others/ShareEdit.vue
View File

@@ -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,