@burh/nuxt-core 1.0.237 → 1.0.239

package/components/argon-core/BasePagination.vue

@@ -159,6 +159,9 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+.pagination{
+    margin-bottom: 0rem !important;
+}
 @media (min-height: 667.59px) {
     .card-footer-bottom {
         bottom: 5px;

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

@@ -12,14 +12,9 @@
 				</div>
 			</div>
 
-			<h5 class="mb-0 text-wrap" :class="{ 'mt-5': !userData.urlAvatar }">
-				{{ userData.name }} {{ userData.last_name }}
-			</h5>
+			<h5 class="mb-0 text-wrap" :class="{ 'mt-5': !userData.urlAvatar }" v-html="highlightText(search, `${userData.name} ${userData.last_name}`)"></h5>
 
-			<p class="user-info" v-if="userData.user_experience.length > 0">
-				{{ userData.user_experience[0].job_title }} em
-				{{ userData.user_experience[0].company }}
-			</p>
+			<p class="user-info" v-if="userData.user_experience.length > 0" v-html="highlightText(search, `${userData.user_experience[0].job_title} em ${userData.user_experience[0].company}`)"></p>
 
 			<span v-if="userData.user_address">
 				<i class="fas fa-map-marker-alt"></i>
@@ -41,9 +36,8 @@
 				v-for="(skill, index) in userData.user_skill"
 				:key="`skill-${index}`"
 				class="ml-1 mt-1 mb-0 text-capitalize"
-			>
-				{{ skill.skill_word }}
-			</p>
+				v-html="highlightText(search, skill.skill_word)"
+			></p>
 		</div>
 
 		<div
@@ -57,9 +51,8 @@
 				class="mb-1 text-capitalize"
 				v-for="(lan, index) in userData.user_language"
 				:key="index"
-			>
-				{{ lan.language[0].name }} {{ languageLevel(lan.level) }}
-			</p>
+				v-html="highlightText(search, `${lan.language[0].name} ${languageLevel(lan.level)}`)"
+			></p>
 		</div>
 
 		<div
@@ -73,9 +66,8 @@
 				v-for="(des, index) in userData.user_desired_job"
 				:key="`skill-${index}`"
 				class="ml-1 mt-1 mb-0 text-capitalize"
-			>
-				{{ des.occupation }}
-			</p>
+				v-html="highlightText(search, des.occupation)"
+			></p>
 		</div>
 
 		<div
@@ -198,9 +190,19 @@ export default {
 	},
 	props: {
 		userData: Object,
-		baseUrl: String
+		baseUrl: String,
+		search: {
+			type: String,
+			default: ''
+		}
 	},
 	methods: {
+		highlightText(search, text) {
+			if (search.length < 2) return text;
+
+			const regex = new RegExp(search.toLowerCase(), 'gmi');
+			return String(text || '').replace(regex, `<span class="search-highlight">${search}</span>`);
+		},
 		getTime(
 			{ start_year = null, end_year = null, start_month, end_month },
 			textHappening = 'Cursando'
@@ -303,6 +305,11 @@ export default {
 <style lang="scss" scoped>
 @import '@burh/nuxt-core/assets/sass/burh-ds/variables/_colors.scss';
 
+/deep/ .search-highlight {
+	background: rgb(255, 252, 61);
+	color: #000;
+}
+
 .qr-id {
     color: #32325d !important;
 }

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

@@ -23,9 +23,13 @@
 						userData.user_complementary_information.about
 					) && 'readmore'
 				"
-			>
-				{{ userData.user_complementary_information.about }}
-			</p>
+				v-html="
+					highlightText(
+						search,
+						userData.user_complementary_information.about
+					)
+				"
+			></p>
 			<a
 				href="#"
 				aria-label="expandir conteudo"
@@ -57,7 +61,10 @@
 			v-for="(edu, index) in userData.user_education"
 			:key="index"
 		>
-			<p class="sub-title">{{ edu.formation }}</p>
+			<p
+				class="sub-title"
+				v-html="highlightText(search, edu.formation)"
+			></p>
 			<p class="info-text">{{ edu.institution }}</p>
 			<span class="info-text">
 				{{ edu.start_month }}/{{ edu.start_year }} -
@@ -69,9 +76,15 @@
 						: ''
 				}} </span
 			><br />
-			<span class="info-text">{{
-				edu.formation_level_id | formationLevel
-			}}</span>
+			<span
+				class="info-text"
+				v-html="
+					highlightText(
+						search,
+						edu.formation_level_id | formationLevel
+					)
+				"
+			></span>
 		</div>
 
 		<!-- EXPERIÊNCIAS -->
@@ -90,8 +103,16 @@
 			v-for="(exp, index) in userData.user_experience"
 			:key="`experience-${index}`"
 		>
-			<p class="sub-title">{{ exp.job_title }}</p>
-			<p class="info-text">{{ exp.company }}, {{ exp.location }}</p>
+			<p
+				class="sub-title"
+				v-html="highlightText(search, exp.job_title)"
+			></p>
+			<p
+				class="info-text"
+				v-html="
+					highlightText(search, `${exp.company}, ${exp.location}`)
+				"
+			></p>
 			<span class="info-text">
 				{{ exp.start_month }}/{{ exp.start_year }} -
 				{{ treatEndDate(exp.end_month, exp.end_year) }}
@@ -102,9 +123,8 @@
 				:id="`USER_EXPERIENCE-${index}`"
 				class="description mt-4 mb-0"
 				:class="!wordIsLesserThan(exp.description) && 'readmore'"
-			>
-				{{ exp.description }}
-			</p>
+				v-html="highlightText(search, exp.description)"
+			></p>
 
 			<a
 				href="#"
@@ -130,8 +150,22 @@
 			v-for="(cou, index) in userData.user_course"
 			:key="`course-${index}`"
 		>
-			<p class="sub-title">{{ cou.institution }}</p>
-			<p class="info-text mb-3">
+			<p
+				class="sub-title"
+				v-html="highlightText(search, cou.institution)"
+			></p>
+			<p
+				class="info-text mb-3"
+				v-html="
+					highlightText(
+						search,
+						`${cou.name} - ${cou.end_year || ''} ${getTime(
+							false,
+							cou
+						)}`
+					)
+				"
+			>
 				{{ cou.name }} - {{ cou.end_year }}
 				{{ getTime(false, cou) }}
 			</p>
@@ -143,29 +177,33 @@
 import getPrefixes from '~/util/getPrefixes.js';
 
 export default {
-    name: 'user-cv-middle',
-    props: {
-        userData: Object,
-        tools: {
-            type: Array,
-            default: () => []
-        }
-    },
-    filters: {
-        formationLevel(id) {
-            const typeFormation = {
-                1: 'Ensino Médio',
-                2: 'Ensino Técnico',
-                3: 'Graduação',
-                4: 'Pós-Graduação',
-                5: 'Mestrado',
-                6: 'Doutorado'
-            };
-
-            return typeFormation[id] || '-';
-        }
-    },
-    mounted() {
+	name: 'user-cv-middle',
+	props: {
+		userData: Object,
+		tools: {
+			type: Array,
+			default: () => []
+		},
+		search: {
+			type: String,
+			default: ''
+		}
+	},
+	filters: {
+		formationLevel(id) {
+			const typeFormation = {
+				1: 'Ensino Médio',
+				2: 'Ensino Técnico',
+				3: 'Graduação',
+				4: 'Pós-Graduação',
+				5: 'Mestrado',
+				6: 'Doutorado'
+			};
+
+			return typeFormation[id] || '-';
+		}
+	},
+	mounted() {
 		this.userData.user_experience = this.filterByDate(
 			this.userData.user_experience,
 			'old'
@@ -175,54 +213,61 @@ export default {
 			'old'
 		);
 		this.userData.user_course = this.filterByDate(
-            this.userData.user_course,	
+			this.userData.user_course,
 			'old'
-             
-        );
-    },
-    watch: {
-        userData() {
-            this.userData.user_experience = this.filterByDate(
-                this.userData.user_experience,
+		);
+	},
+	watch: {
+		userData() {
+			this.userData.user_experience = this.filterByDate(
+				this.userData.user_experience,
 				'old'
-            );
+			);
 			this.userData.user_education = this.filterByDate(
 				this.userData.user_education,
 				'old'
 			);
-            this.userData.user_course = this.filterByDate(
-                this.userData.user_course,
+			this.userData.user_course = this.filterByDate(
+				this.userData.user_course,
 				'old'
-
-            );
-        }
-    },
-    methods: {
-        filterByDate(data, by = 'new') {
-            let sortedArray = data.sort((a, b) => {
-                a = [
-                    a.start_month,
-                    a.start_year,
-                    a.end_month || 12,
-                    a.end_year || 9999
-                ];
-
-                b = [
-                    b.start_month,
-                    b.start_year,
-                    b.end_month || 12,
-                    b.end_year || 9999
-                ];
-
-                // Primeiro filtro -> chaves: 0 e 1 -> Filtro por data de inicio
-                // Segundo filtro -> chaves: 2 e 3 -> Filtro por data de termino (subir não concluídos para primeiros)
-
-                let byStart;
-                let byEnd;
-
-                switch (by) {
-                    case 'old':
-                        byStart =
+			);
+		}
+	},
+	methods: {
+		highlightText(search, text) {
+			if (search.length < 2) return text;
+
+			const regex = new RegExp(search.toLowerCase(), 'gmi');
+			return String(text || '').replace(
+				regex,
+				`<span class="search-highlight">${search}</span>`
+			);
+		},
+		filterByDate(data, by = 'new') {
+			let sortedArray = data.sort((a, b) => {
+				a = [
+					a.start_month,
+					a.start_year,
+					a.end_month || 12,
+					a.end_year || 9999
+				];
+
+				b = [
+					b.start_month,
+					b.start_year,
+					b.end_month || 12,
+					b.end_year || 9999
+				];
+
+				// Primeiro filtro -> chaves: 0 e 1 -> Filtro por data de inicio
+				// Segundo filtro -> chaves: 2 e 3 -> Filtro por data de termino (subir não concluídos para primeiros)
+
+				let byStart;
+				let byEnd;
+
+				switch (by) {
+				case 'old':
+					byStart =
                             new Date(a[1], a[0], 1).getTime() -
                             new Date(b[1], b[0], 1).getTime();
 					byEnd =
@@ -343,6 +388,12 @@ export default {
 
 <style lang="scss" scoped>
 @import '@burh/nuxt-core/assets/sass/burh-ds/variables/_colors.scss';
+
+/deep/ .search-highlight {
+    background: rgb(255, 252, 61);
+    color: #000;
+}
+
 .content-middle {
     width: 50%;
     border-right: 1px solid #ececec5c;

package/package.json

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