@burh/nuxt-core 1.0.244 → 1.0.245

package/components/argon-core/Inputs/DropzoneFileUpload.vue

@@ -85,7 +85,6 @@
           previewsContainer: preview,
           previewTemplate: preview.innerHTML,
           maxFiles: (!this.multiple) ? 1 : null,
-          acceptedFiles: (!this.multiple) ? 'image/*' : null,
           init: function () {
             this.on("addedfile", function (file) {
               if (!self.multiple && self.currentFile) {

package/components/burh-ds/Cards/RecruitmentUserCard.vue

@@ -3,7 +3,7 @@
 		<div class="recruitment__user__card__header">
 			<div class="recruitment__user__card__header__actions">
 				<div class="left">
-					<input type="checkbox" name="" id="">
+					<el-checkbox v-model="isChecked" />
 				</div>
 				<div class="right">
 					<el-tooltip placement="top" content="Anotações">
@@ -64,11 +64,16 @@
 </template>
 
 <script>
+import { Checkbox } from 'element-ui';
+
 export default {
 	name: 'recruitment-user-card',
+	components: {
+		ElCheckbox: Checkbox
+	},
 	data() {
 		return {
-			checked: false
+			isChecked: false,
 		};
 	}
 };

package/components/burh-ds/Curriculum/UserCurriculum/UserCvRightSide.vue

@@ -1,355 +1,581 @@
-<template>
-	<div class="bg-white content-right tabs ">
-		<el-tabs
-			:class="active"
-			class="mt-3 ml-4 handle-icon-color"
-			v-model="active"
-		>
-			<el-tab-pane class="history" name="history">
-				<span class="tab__icon-pane" slot="label">
-					<img
-						class="img__icon-pane img__icon--history"
-						src="../../../../assets/images/icons/historicCv.svg"
-					/>
-				</span>
-				<p class="notes-title mb-0">Histórico com sua empresa</p>
-				<div class="line mb-3"></div>
-
-				<div
-					class="mt-3"
-					v-for="(item, index) in orderByDate(companyHistory())"
-					:key="index"
-				>
-					<p class="history-text mb-0">
-						{{ item.text }}
-					</p>
-					<span>{{ item.date | convertDate }}</span>
-				</div>
-				<p v-show="companyHistory().length === 0" class="history-text">
-					Histórico vazio.
-				</p>
-			</el-tab-pane>
-
-			<el-tab-pane name="notes" v-if="isNotesActived">
-				<span class="tab__icon-pane" slot="label">
-					<img
-						class="img__icon-pane img__icon--notes"
-						src="../../../../assets/images/icons/notesCv.svg"
-					/>
-				</span>
-				<p class="notes-title mb-0">Notas da equipe</p>
-				<div class="line mb-3"></div>
-				<div
-					v-show="notes.length > 0"
-					v-for="(note, index) in notes.slice(0, 5)"
-					:key="index"
-				>
-					<div class="notes-baloon">
-						<div class="notes-text ml-3 pt-1">
-							<p class="mt-3">{{ note.text }}</p>
-						</div>
-						<div
-							class="d-flex justify-content-end align-items-center mr-3"
-						>
-							<p class="notes-date">
-								{{ note.created_at | convertDate }}
-							</p>
-						</div>
-					</div>
-					<div class="notes-owner d-flex mt-2">
-						<img
-							v-show="note.user.urlAvatar"
-							:src="note.user.urlAvatar"
-							:alt="note.user.name"
-						/>
-						<div
-							v-show="!note.user.urlAvatar"
-							class="notes-avatar"
-						></div>
-						<p class="ml-1">
-							{{ note.user.name }}
-						</p>
-					</div>
-				</div>
-				<div class="notes-text" v-show="notes.length === 0">
-					<p>Nenhuma nota criada.</p>
-				</div>
-
-				<div class="input-container">
-					<input
-						class="notes-new pl-4 mt-3 mb-3 form-rounded"
-						type="text"
-						placeholder="Escrever anotação"
-						v-model="newNote"
-						@change="$emit('new-note', newNote, userData.id)"
-						v-on:change="cleatInput()"
-					/>
-					<i
-						@click="
-							newNote.length > 0 &&
-								$emit('new-note', newNote, userData.id)
-						"
-						class="fas fa-paper-plane input-icon"
-					></i>
-				</div>
-			</el-tab-pane>
-
-			<el-tab-pane :disabled="true">
-				<span class="tab__icon-pane cursor-disabled" slot="label">
-					<img
-						class="img__icon-pane"
-						src="../../../../assets/images/icons/icon3.svg"
-					/>
-				</span>
-			</el-tab-pane>
-
-			<el-tab-pane :disabled="true">
-				<span class="tab__icon-pane cursor-disabled" slot="label">
-					<img
-						class="img__icon-pane"
-						src="../../../../assets/images/icons/icon4.svg"
-					/>
-				</span>
-			</el-tab-pane>
-		</el-tabs>
-	</div>
-</template>
-
-<script>
-import { Tabs, TabPane } from 'element-ui';
-
-export default {
-	name: 'user-cv-left-side',
-	filters: {
-		convertDate(data) {
-			let d = new Date(data);
-			let options = { hour: '2-digit', minute: '2-digit' };
-			return d.toLocaleDateString('pt-BR', options);
-		}
-	},
-	components: {
-		[Tabs.name]: Tabs,
-		[TabPane.name]: TabPane
-	},
-	props: {
-		userData: Object,
-		notes: Array,
-		activeName: String,
-		isNotesActived: {
-			type: Boolean,
-			default: true
-		}
-	},
-	mounted() {
-		this.companyHistory();
-	},
-	methods: {
-		cleatInput() {
-			this.newNote = '';
-		},
-		companyHistory() {
-			let sms = this.userData.company_sms.map(x => ({
-				date: x.created_at,
-				text: 'Recebeu um SMS'
-			}));
-			let tests = this.userData.tests.map(x => ({
-				date: x.finished_at,
-				text: `Finalizou o teste ${x.test.name.toUpperCase()}`
-			}));
-			let discs = this.userData.solides.map(x => ({
-				date: x.end,
-				text: 'Realizou um teste DISC'
-			}));
-
-			return sms.concat(tests, discs);
-		},
-		orderByDate(data) {
-			let sortedArray = data.sort((a, b) => {
-				a = [a.date || '2020/01/01'];
-
-				b = [b.date || '2020/01/01'];
-
-				return new Date(b) - new Date(a);
-			});
-
-			return sortedArray;
-		}
-	},
-	data() {
-		return {
-			newNote: '',
-			active: this.activeName
-		};
-	}
-};
-</script>
-<style>
-    .el-tabs__nav-wrap::after {
-	background: #fff !important;
-}
-
-    .el-tabs__active-bar {
-        width: 34px !important;
-        height: 4px !important;
-        border-radius: 10px 10px 0px 0px;
-    }
-</style>
-
-<style lang="scss" scoped>
-@import '@burh/nuxt-core/assets/sass/burh-ds/variables/_colors.scss';
-
-/deep/ .el-tab-pane {
-    max-height: 700px;
-    overflow: hidden;
-    overflow-y: auto;
-    position: relative;
-
-    > .notes-title {
-        position: sticky;
-        position: -webkit-sticky;
-        top: 0;
-        background: white;
-        padding: 10px 0;
-    }
-
-    > .input-container {
-        position: sticky;
-        position: -webkit-sticky;
-        bottom: 0;
-        background: white;
-        width: 231px;
-        > .input-icon {
-            cursor: pointer;
-            position: absolute;
-            top: 50%;
-            right: 15px;
-            transform: translateY(-50%);
-            color: #c8c8c8;
-        }
-    }
-
-    &::-webkit-scrollbar {
-        width: 8px;
-    }
-
-    &::-webkit-scrollbar-track {
-        background: #f5f5f5;
-    }
-
-    &::-webkit-scrollbar-thumb {
-        background: #e9e8e8;
-        border-radius: 10px;
-    }
-}
-
-.readmore {
-    overflow: hidden;
-    text-overflow: ellipsis;
-    display: -webkit-box;
-    -webkit-line-clamp: 3;
-    -webkit-box-orient: vertical;
-}
-
-.tab__icon-pane {
-    .img__icon-pane {
-        background-color: #f5f5f5 !important;
-        border-radius: 30%;
-        padding: 7px;
-        margin-bottom: 1rem;
-    }
-}
-
-.content-right {
-    width: 25%;
-}
-
-.notes-title {
-    font-size: 14px;
-    color: #1d364b;
-    font-weight: bold;
-}
-
-.notes-baloon {
-    width: 231px;
-    height: auto;
-
-    background: #eff5fd;
-    border-radius: 10px 10px 10px 0px;
-}
-
-.notes-text {
-    p {
-        font-size: 13px;
-        color: #62778c;
-    }
-}
-
-.notes-date {
-    font-size: 11px;
-    text-align: right;
-
-    color: #8da2b5;
-    top: calc(50% - 17px / 2 - 444.5px);
-}
-
-.notes-owner {
-    img {
-        width: 23px;
-        height: 23px;
-        border-radius: 50%;
-    }
-
-    .notes-avatar {
-        width: 23px;
-        height: 23px;
-        border-radius: 50%;
-        background-color: #adb5bd;
-    }
-
-    p {
-        font-size: 13px;
-        font-weight: 600;
-        text-transform: uppercase;
-
-        color: #62778c;
-    }
-}
-
-.notes-new {
-    width: 231px;
-    height: 33px;
-
-    background: #f5f5f5;
-    border-radius: 16.5px;
-    border: none;
-
-    outline: 0;
-}
-
-.line {
-    width: 221px;
-    height: 0px;
-
-    border: 1px solid #ececec5c;
-}
-
-.history {
-    word-break: break-word;
-
-    .history-text {
-        font-size: 13px;
-        color: #62778c;
-    }
-
-    span {
-        font-size: 11px;
-        line-height: 16px;
-
-        color: #8da2b5;
-    }
-}
-
-.cursor-disabled {
-    cursor: no-drop;
-}
-</style>
+<template>
+	<div class="bg-white content-right tabs ">
+		<el-tabs
+			:class="active"
+			class="mt-3 ml-4 handle-icon-color"
+			v-model="active"
+		>
+			<el-tab-pane class="history" name="history">
+				<span class="tab__icon-pane" slot="label">
+					<img
+						class="img__icon-pane img__icon--history"
+						src="../../../../assets/images/icons/historicCv.svg"
+					/>
+				</span>
+				<p class="notes-title mb-0">Histórico com sua empresa</p>
+				<div class="line mb-3"></div>
+
+				<div
+					class="mt-3"
+					v-for="(item, index) in orderByDate(companyHistory())"
+					:key="index"
+				>
+					<p class="history-text mb-0">
+						{{ item.text }}
+					</p>
+					<span>{{ item.date | convertDate }}</span>
+				</div>
+				<p v-show="companyHistory().length === 0" class="history-text">
+					Histórico vazio.
+				</p>
+			</el-tab-pane>
+
+			<el-tab-pane name="notes" v-if="isNotesActived">
+				<span class="tab__icon-pane" slot="label">
+					<img
+						class="img__icon-pane img__icon--notes"
+						src="../../../../assets/images/icons/notesCv.svg"
+					/>
+				</span>
+				<p class="notes-title mb-0">Notas da equipe</p>
+				<div class="line mb-3"></div>
+				<div
+					v-show="notes.length > 0"
+					v-for="(note, index) in notes.slice(0, 5)"
+					:key="index"
+				>
+					<div class="notes-baloon">
+						<div class="notes-text ml-3 pt-1">
+							<p class="mt-3">{{ note.text }}</p>
+						</div>
+						<div
+							class="d-flex justify-content-end align-items-center mr-3"
+						>
+							<p class="notes-date">
+								{{ note.created_at | convertDate }}
+							</p>
+						</div>
+					</div>
+					<div class="notes-owner d-flex mt-2">
+						<img
+							v-show="note.user.urlAvatar"
+							:src="note.user.urlAvatar"
+							:alt="note.user.name"
+						/>
+						<div
+							v-show="!note.user.urlAvatar"
+							class="notes-avatar"
+						></div>
+						<p class="ml-1">
+							{{ note.user.name }}
+						</p>
+					</div>
+				</div>
+				<div class="notes-text" v-show="notes.length === 0">
+					<p>Nenhuma nota criada.</p>
+				</div>
+
+				<div class="input-container">
+					<input
+						class="notes-new pl-4 mt-3 mb-3 form-rounded"
+						type="text"
+						placeholder="Escrever anotação"
+						v-model="newNote"
+						@change="$emit('new-note', newNote, userData.id)"
+						v-on:change="cleatInput()"
+					/>
+					<i
+						@click="
+							newNote.length > 0 &&
+								$emit('new-note', newNote, userData.id)
+						"
+						class="fas fa-paper-plane input-icon"
+					></i>
+				</div>
+			</el-tab-pane>
+
+			<el-tab-pane name="documents">
+				<span class="tab__icon-pane" slot="label">
+					<img
+						class="img__icon-pane img__icon--documents"
+						src="../../../../assets/images/icons/icon3.svg"
+					/>
+				</span>
+				<p class="notes-title mb-0">Documentos anexados</p>
+				<div class="line mb-3"></div>
+
+				<div class="archive-content">
+					<div v-for="(item, index) in archives" :key="index">
+						<div @click="openArchive(item)" class="archive-container">
+							<div>
+								<img class="archive-img" src="../../../../assets/images/icons/icon3.svg" >
+							</div>
+							<div class="archive-name">
+								<p>
+									<span>{{item.name}}</span>
+								<div class="archive-icon">
+									<i @click.stop.prevent="openRemoveSection(item, (index+1))" class="far fa-trash-alt"></i>
+								</div>
+								</p>
+							</div>
+						</div>
+						<div v-if="hasRemove && hasRemove == (index+1)" class="archive-remove">
+							<p>Você tem certeza que deseja apagar este arquivo?</p>
+							<div class="d-flex">
+								<base-button
+									@click="removeArchive(currentRemoveItem, index)" 
+									size="sm" 
+									class="btn-outline-primary col-6 p-1"
+								>
+									Apagar
+								</base-button>
+								<base-button 
+									@click="hasRemove = false" 
+									size="sm" 
+									class="btn-outline-danger col-6 p-1"
+								>
+									Cancelar
+								</base-button>
+							</div>
+						</div>
+					</div>
+					
+				</div>
+				<div class="notes-text" v-show="archives == null">
+					<p>Nenhum arquvio anexado.</p>
+				</div>
+
+				<div class="input-container">
+					<div class="mt-5">
+						
+						<dropzone-file-upload
+							disabled
+							@error="showMessageError"
+							ref="Mydropzone"
+							:options="dropzoneOptions"
+							v-model="fileToUpload"
+						/>
+					</div>
+
+					<div class="archive-buttons">
+						<base-button @click="saveImage" size="sm" class="btn-outline-primary btn-rounded col-12">Salvar</base-button>
+					</div>
+				</div>
+			</el-tab-pane>
+
+			<el-tab-pane :disabled="true">
+				<span class="tab__icon-pane cursor-disabled" slot="label">
+					<img
+						class="img__icon-pane"
+						src="../../../../assets/images/icons/icon4.svg"
+					/>
+				</span>
+			</el-tab-pane>
+		</el-tabs>
+	</div>
+</template>
+
+<script>
+import { Tabs, TabPane } from 'element-ui';
+import DropzoneFileUpload from '@burh/nuxt-core/components/argon-core/Inputs/DropzoneFileUpload.vue';
+import swal from 'sweetalert2';
+
+export default {
+	name: 'user-cv-right-side',
+	filters: {
+		convertDate(data) {
+			let d = new Date(data);
+			let options = { hour: '2-digit', minute: '2-digit' };
+			return d.toLocaleDateString('pt-BR', options);
+		}
+	},
+	watch:{
+		fileToUpload(value){
+			if(value.length > 0 && value[0].accepted) {
+				this.isError = false;
+			}
+		}
+	},
+	components: {
+		[Tabs.name]: Tabs,
+		[TabPane.name]: TabPane,
+		DropzoneFileUpload,
+	},
+	data(){
+		return {
+			newNote: '',
+			active: this.activeName,
+			hasRemove: null,
+			isError: true,
+			currentRemoveItem: null,
+			fileToUpload: [],
+			dropzoneOptions: { 
+				maxFilesize: 0.2,
+				dictFileTooBig:'Seu arquivo é poderoso demais (Máximo 200kb).',
+				dictDefaultMessage: 'Clique ou arraste seu arquivo aqui.',
+				dictInvalidFileType: 'Arquivo invalido.',
+				dictMaxFilesExceeded: 'Não é permitido mais de um arquivo por vez.',
+				acceptedFiles: 'image/*, application/pdf',
+			}
+		};
+	},
+	props: {
+		archives: Array,
+		userData: Object,
+		notes: Array,
+		activeName: String,
+		isNotesActived: {
+			type: Boolean,
+			default: true
+		},
+	},
+	mounted() {
+		this.companyHistory();
+	},
+	methods: {
+		openRemoveSection(item, index) {
+			this.hasRemove = index;
+			this.currentRemoveItem = item;
+		},
+
+		showToast(type, title){
+			const Toast = swal.mixin({
+				toast: true,
+				position: 'top-end',
+				showConfirmButton: false,
+				timer: 3100,
+			});
+
+			return Toast.fire({
+				type: type,
+				title: title
+			});
+		},
+
+		showMessageError(file, message) {
+			this.isError = true;
+			this.$refs.Mydropzone.removeAllFiles();
+
+			if (file.status !== 'canceled'){
+				this.showToast('error', message);
+			}
+		},
+
+		openArchive(item) {
+			window.open(item.annex_url, '_blank');
+		},
+
+		saveImage(){
+			if (!this.isError) {
+				this.$emit('save-archive', this.fileToUpload[0], this.userData.id);
+				this.$refs.Mydropzone.removeAllFiles();
+				this.showToast('success', 'Arquivo enviado com sucesso.');
+
+			} else {
+				if (this.fileToUpload.length > 0) {
+					this.showToast('error', 'Arquivo invalido.');	
+				} else {
+					this.showToast('warning', 'Selecione um arquivo.');
+				}
+			}
+		},
+
+		removeArchive(archive, index){
+			this.$emit('remove-archive', archive, archive.id, index);
+			this.hasRemove = null;
+		},
+
+		cleatInput() {
+			this.newNote = '';
+		},
+		companyHistory() {
+			let sms = this.userData.company_sms.map(x => ({
+				date: x.created_at,
+				text: 'Recebeu um SMS'
+			}));
+			let tests = this.userData.tests.map(x => ({
+				date: x.finished_at,
+				text: `Finalizou o teste ${x.test.name.toUpperCase()}`
+			}));
+			let discs = this.userData.solides.map(x => ({
+				date: x.end,
+				text: 'Realizou um teste DISC'
+			}));
+
+			return sms.concat(tests, discs);
+		},
+		orderByDate(data) {
+			let sortedArray = data.sort((a, b) => {
+				a = [a.date || '2020/01/01'];
+
+				b = [b.date || '2020/01/01'];
+
+				return new Date(b) - new Date(a);
+			});
+
+			return sortedArray;
+		},
+	},
+};
+</script>
+<style>
+    .el-tabs__nav-wrap::after {
+	background: #fff !important;
+}
+
+    .el-tabs__active-bar {
+        width: 34px !important;
+        height: 4px !important;
+        border-radius: 10px 10px 0px 0px;
+    }
+</style>
+
+<style lang="scss">
+.swal2-title {
+	font-size: 1rem !important;
+}
+.swal2-container {
+	z-index: 5000 !important;
+}
+</style>
+
+<style lang="scss" scoped>
+@import '@burh/nuxt-core/assets/sass/burh-ds/variables/_colors.scss';
+
+/deep/.dropzone {
+	width: 95%;
+
+	.dz-message {
+		padding: 2rem 1rem !important;
+	}
+
+    button.dz-button {
+        background-color: transparent;
+        border: 0;
+    }
+}
+
+/deep/ .el-tab-pane {
+    max-height: 760px;
+    overflow: hidden;
+    overflow-y: auto;
+    position: relative;
+
+    > .notes-title {
+        position: sticky;
+        position: -webkit-sticky;
+        top: 0;
+        background: white;
+        padding: 10px 0;
+    }
+
+    > .input-container {
+        position: sticky;
+        position: -webkit-sticky;
+        bottom: 0;
+        background: white;
+        > .input-icon {
+            cursor: pointer;
+            position: absolute;
+            top: 50%;
+            right: 30px;
+            transform: translateY(-50%);
+            color: #c8c8c8;
+        }
+    }
+
+    &::-webkit-scrollbar {
+        width: 8px;
+    }
+
+    &::-webkit-scrollbar-track {
+        background: #f5f5f5;
+    }
+
+    &::-webkit-scrollbar-thumb {
+        background: #e9e8e8;
+        border-radius: 10px;
+    }
+	
+	.archive-content {
+		width: 95%;
+
+		p {
+			margin-bottom: 0;
+			font-size: 0.875rem;
+			padding: .3rem .6rem 0 .6rem;
+		}
+
+		.archive-container {
+			display: flex;
+			align-items: center;
+			padding: 0.5rem 0.5rem 0.438rem;
+			cursor: pointer;
+			user-select: none;
+
+			&:hover{
+				background-color: #f6f9fc;
+    			border-radius: 5px;
+			}
+
+			.archive-img {
+				background-color: #f5f5f5;
+				border-radius: 6px;
+				padding: 7px;
+			}
+
+			.archive-name {
+				display: flex;
+				margin-left: .8rem;
+				width: 145%;
+				justify-content: space-between !important;
+
+				.archive-icon {
+					margin-left: 1.5rem;
+				}
+
+				p {
+					margin: 0;
+					padding: 0;
+					width: 13rem;
+					white-space: nowrap;
+					overflow: hidden;
+					text-overflow: ellipsis;
+				}
+			}
+
+			.upload-container {
+				position: sticky;
+				position: -webkit-sticky;
+				bottom: 0;
+				background: white;
+				width: 231px;
+			}
+		}
+	}
+
+	.archive-buttons {
+		display: flex;
+		margin-top: -1rem;
+		width: 95%;
+	}
+
+	.archive-remove {
+		width: 90%;
+		word-break: break-word;
+	}
+}
+
+.readmore {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    display: -webkit-box;
+    -webkit-line-clamp: 3;
+    -webkit-box-orient: vertical;
+}
+
+.tab__icon-pane {
+    .img__icon-pane {
+        background-color: #f5f5f5 !important;
+        border-radius: 30%;
+        padding: 7px;
+        margin-bottom: 1rem;
+    }
+}
+
+.content-right {
+    width: 25%;
+}
+
+.notes-title {
+    font-size: 14px;
+    color: #1d364b;
+    font-weight: bold;
+	background-color: white;
+	z-index: 500;
+}
+
+.notes-baloon {
+    width: 231px;
+    height: auto;
+
+    background: #eff5fd;
+    border-radius: 10px 10px 10px 0px;
+}
+
+.notes-text {
+    p {
+        font-size: 13px;
+        color: #62778c;
+    }
+}
+
+.notes-date {
+    font-size: 11px;
+    text-align: right;
+
+    color: #8da2b5;
+    top: calc(50% - 17px / 2 - 444.5px);
+}
+
+.notes-owner {
+    img {
+        width: 23px;
+        height: 23px;
+        border-radius: 50%;
+    }
+
+    .notes-avatar {
+        width: 23px;
+        height: 23px;
+        border-radius: 50%;
+        background-color: #adb5bd;
+    }
+
+    p {
+        font-size: 13px;
+        font-weight: 600;
+        text-transform: uppercase;
+
+        color: #62778c;
+    }
+}
+
+.notes-new {
+    width: 95%;
+    height: 33px;
+
+    background: #f5f5f5;
+    border-radius: 16.5px;
+    border: none;
+
+    outline: 0;
+}
+
+.line {
+    width: 221px;
+    height: 0px;
+
+    border: 1px solid #ececec5c;
+}
+
+.history {
+    word-break: break-word;
+
+    .history-text {
+        font-size: 13px;
+        color: #62778c;
+    }
+
+    span {
+        font-size: 11px;
+        line-height: 16px;
+
+        color: #8da2b5;
+    }
+}
+
+.cursor-disabled {
+    cursor: no-drop;
+}
+</style>

package/components/burh-ds/Modals/DropzoneModal.vue

@@ -1,111 +1,116 @@
 <template>
-    <modal
-        :show.sync="openModal"
-        v-on:close="$emit('close-modal-video')"
-        modalContentClasses="container-fluid"
-        class="modal"
-    >
-        <template slot="header">
-            <div class="">
-                <h2 class="display-4">Editar capa do treinamento</h2>
-            </div>
-        </template>
+	<modal
+		:show.sync="openModal"
+		v-on:close="$emit('close-modal-video')"
+		modalContentClasses="container-fluid"
+		class="modal"
+	>
+		<template slot="header">
+			<div class="">
+				<h2 class="display-4">{{modalTitle}}</h2>
+			</div>
+		</template>
 
-        <dropzone-file-upload
-            v-if="image == null"
-            v-on:error="showError"
-            ref="Mydropzone"
-            :options="dropzoneOptions"
-            v-model="fileToUpload"
-            class=""
-        />
+		<dropzone-file-upload
+			v-if="image == null"
+			v-on:error="showError"
+			ref="Mydropzone"
+			:options="dropzoneOptions"
+			v-model="fileToUpload"
+			class=""
+			:multiple="multiple"
+		/>
 
-        <div class="row mb-4" v-if="image != null">
-            <img class="col-12" :src="image" alt="Cover" />
-        </div>
+		<div class="row mb-4" v-if="image != null">
+			<img class="col-12" :src="image" alt="Cover" />
+		</div>
 
-        <template slot="footer">
-            <base-button type="link" @click="removeImage"
-                >Remover Imagem
-            </base-button>
-            <base-button
-                type="primary"
-                class="ml-auto"
-                role="button"
-                @click="saveImage"
-                >Salvar Imagem
-            </base-button>
-        </template>
-    </modal>
+		<template slot="footer">
+			<base-button type="link" @click="removeImage"
+			>Remover
+			</base-button>
+			<base-button
+				type="primary"
+				class="ml-auto"
+				role="button"
+				@click="saveImage"
+			>Salvar
+			</base-button>
+		</template>
+	</modal>
 </template>
 <script>
 import DropzoneFileUpload from '@burh/nuxt-core/components/argon-core/Inputs/DropzoneFileUpload.vue';
 import swal from 'sweetalert2';
 
 export default {
-    components: {
-        DropzoneFileUpload
-    },
-    props: {
-        show: false,
-        image: {
-            type: String,
-            default: null
-        }
-    },
-    data() {
-        return {
-            fileToUpload: null,
-            dropzoneOptions: {
-                maxFiles: 1,
-                maxFilesize: 0.2, // ESTÁ DEFINIDO TAMANHO MÁXIMO DE 20 KB NA FOTO
-                dictFileTooBig:
+	name: 'dropzone-modal',
+	components: {
+		DropzoneFileUpload
+	},
+	props: {
+		show: false,
+		image: {
+			type: String,
+			default: null
+		},
+		modalTitle: String,
+		multiple: Boolean
+	},
+	data() {
+		return {
+			fileToUpload: null,
+			dropzoneOptions: {
+				maxFiles: 1,
+				maxFilesize: 0.2, // ESTÁ DEFINIDO TAMANHO MÁXIMO DE 20 KB NA FOTO
+				dictFileTooBig:
                     'A imagem que você tentou inserir é maior que 200KB',
-                dictDefaultMessage: 'Clique ou arraste seu arquivo aqui'
-            }
-        };
-    },
-    model: {
-        prop: 'show'
-    },
-    computed: {
-        openModal: {
-            get() {
-                return this.show;
-            },
-            set(show) {
-                this.$emit('input', show);
-            }
-        }
-    },
-    methods: {
-        showError(file, message) {
-            return swal.fire({
-                title: 'Erro',
-                text: message,
-                type: 'error',
-                buttonsStyling: false,
-                confirmButtonText: 'Ok, fechar!',
-                confirmButtonClass: 'btn btn-primary btn-fill'
-            });
-        },
-        removeImage() {
-            if (!this.image) {
-                this.$refs.Mydropzone.removeAllFiles();
-            }
-            this.$emit('remove-image');
-        },
-        async saveImage() {
-            if (this.fileToUpload != null) {
-                let image = this.fileToUpload;
-                if (image[0].size <= 200000) {
-                    this.$emit('save-img', image);
-                }
-            }
+				dictDefaultMessage: 'Clique ou arraste seu arquivo aqui',
+				acceptedFiles: 'image/*',
+			}
+		};
+	},
+	model: {
+		prop: 'show'
+	},
+	computed: {
+		openModal: {
+			get() {
+				return this.show;
+			},
+			set(show) {
+				this.$emit('input', show);
+			}
+		}
+	},
+	methods: {
+		showError(file, message) {
+			return swal.fire({
+				title: 'Erro',
+				text: message,
+				type: 'error',
+				buttonsStyling: false,
+				confirmButtonText: 'Ok, fechar!',
+				confirmButtonClass: 'btn btn-primary btn-fill'
+			});
+		},
+		removeImage() {
+			if (!this.image) {
+				this.$refs.Mydropzone.removeAllFiles();
+			}
+			this.$emit('remove-image');
+		},
+		async saveImage() {
+			if (this.fileToUpload != null) {
+				let image = this.fileToUpload;
+				if (image[0].size <= 200000) {
+					this.$emit('save-img', image);
+				}
+			}
 
-            this.$emit('close-modal-video');
-        }
-    }
+			this.$emit('close-modal-video');
+		}
+	}
 };
 </script>
 <style lang="scss" scoped>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@burh/nuxt-core",
-  "version": "1.0.244",
+  "version": "1.0.245",
   "description": "Design System and Components.",
   "author": "Burh",
   "scripts": {