@farm-investimentos/front-mfe-components 10.1.3 → 10.1.4

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@farm-investimentos/front-mfe-components",
-	"version": "10.1.3",
+	"version": "10.1.4",
 	"author": "farm investimentos",
 	"private": false,
 	"main": "./dist/front-mfe-components.common.js",

package/src/components/DataTableEmptyWrapper/DataTableEmptyWrapper.scss

@@ -0,0 +1,20 @@
+div {
+    border-top: 1px solid var(--farm-stroke-divider);
+    padding: 64px 24px 32px;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    text-align: center;
+
+    p:first-of-type {
+        margin: 24px auto 16px;
+    }
+
+    p:last-child {
+        color: var(--farm-text-secondary);
+    }
+
+    .farm-icon.farm-icon--primary {
+        color: var(--farm-text-disabled);
+    }
+}

package/src/components/DataTableEmptyWrapper/DataTableEmptyWrapper.stories.js

@@ -3,13 +3,24 @@ import DataTableEmptyWrapper from './DataTableEmptyWrapper.vue';
 export default {
 	title: 'Display/Table/DataTableEmptyWrapper',
 	component: DataTableEmptyWrapper,
+	parameters: {
+		docs: {
+			description: {
+				component: `Message for empty list/data<br />
+				selector: <em>farm-emptywrapper</em><br />
+				<span style="color: var(--farm-primary-base);">ready for use</span>
+				`,
+			},
+		},
+		viewMode: 'docs',
+	},
 };
 
 export const Primary = () => ({
-	template: '<DataTableEmptyWrapper />',
+	template: '<farm-emptywrapper />',
 });
 
 export const CustomTitles = () => ({
 	template:
-		'<DataTableEmptyWrapper title="Título customizado" subtitle="Subtítulo customizado" />',
+		'<farm-emptywrapper title="Título customizado" subtitle="Subtítulo customizado" />',
 });

package/src/components/DataTableEmptyWrapper/DataTableEmptyWrapper.vue

@@ -1,27 +1,25 @@
 <template>
-	<div align="center">
-		<v-icon>mdi-magnify</v-icon>
-		<p>{{ title }}</p>
-		<p>{{ subtitle }}</p>
+	<div>
+		<farm-icon size="lg">magnify</farm-icon>
+		<farm-caption bold>{{ title }}</farm-caption>
+		<farm-caption variation="regular" v-if="subtitle">{{ subtitle }}</farm-caption>
 	</div>
 </template>
-<script>
-import { VIcon } from 'vuetify/lib/components/VIcon';
-/**
- * Componente de lista vazia
- */
-export default {
-	name: 'DataTableEmptyWrapper',
+<script lang="ts">
+import Vue from 'vue';
+
+export default Vue.extend({
+	name: 'farm-emptywrapper',
 	props: {
 		/**
-		 * Título
+		 * Title
 		 */
 		title: {
 			type: String,
 			default: 'Nenhuma informação para exibir aqui',
 		},
-        /**
-		 * Subtítulo
+		/**
+		 * Subtitle
 		 */
 		subtitle: {
 			type: String,
@@ -29,31 +27,8 @@ export default {
 				'Tente filtrar novamente sua pesquisa ou faça uma importação para ver mais resultados',
 		},
 	},
-	components: {
-		VIcon,
-	},
-};
+});
 </script>
 <style scoped lang="scss">
-div {
-	border-top: 1px solid var(--v-gray-lighten2);
-	padding: 3rem 1rem;
-	.v-icon {
-		margin-top: 1rem;
-		font-size: 2.625rem;
-		color: var(--v-gray-lighten2);
-	}
-	p:nth-child(2) {
-		color: var(--v-primary-base);
-		font-weight: 700;
-		font-size: 0.75rem;
-		margin-top: 1rem;
-	}
-	p:nth-child(3) {
-		color: var(--v-gray-base);
-		font-weight: 400;
-		font-size: 0.625rem;
-		margin-bottom: 1rem;
-	}
-}
+@import './DataTableEmptyWrapper';
 </style>

package/src/components/DataTablePaginator/DataTablePaginator.stories.js

@@ -9,7 +9,8 @@ export default {
 		docs: {
 			description: {
 				component: `Paginator with items per page select<br />
-				selector: <em>farm-datatable-paginator</em>
+				selector: <em>farm-datatable-paginator</em><br />
+				<span style="color: var(--farm-primary-base);">ready for use</span>
 				`,
 			},
 		},
@@ -22,10 +23,9 @@ export default {
 };
 
 export const Primary = () => ({
-	components: { DataTablePaginator },
 	data() {
 		return {
-			totalPages: 8
+			totalPages: 8,
 		};
 	},
 	template: '<DataTablePaginator :totalPages="totalPages" :page="1" />',
@@ -33,46 +33,18 @@ export const Primary = () => ({
 		setTimeout(() => {
 			this.totalPages = 0;
 		}, 1000);
-	}
+	},
 });
 
 export const Secondary = () => ({
-	components: { DataTablePaginator },
 	template: '<DataTablePaginator :hidePerPageOptions="true" :totalPages="190000" :page="1" />',
 });
 
 export const Disabled = () => ({
-	components: { DataTablePaginator },
 	template: '<DataTablePaginator :disabled="true":totalPages="19" :page="1" />',
 });
 
 export const CustomPerPage = () => ({
-	components: { DataTablePaginator },
 	template:
 		'<DataTablePaginator :perPageOptions="[1, 2, 4, 12, 27]" :totalPages="19" :page="1" />',
 });
-
-const parameters = {
-	design: {
-		type: 'figma',
-		url: 'https://www.figma.com/file/1f84J4m1IBghWhozQvdyyt/%E2%9C%8D---Design-System?node-id=1503%3A921',
-	},
-};
-
-Primary.story = {
-	name: 'Básico',
-	parameters,
-};
-Secondary.story = {
-	name: 'Sem limite por páginas',
-	parameters,
-};
-Disabled.story = {
-	name: 'Desabilitado',
-	parameters,
-};
-CustomPerPage.story = {
-	name: 'Lista de registros por página customizada',
-	parameters,
-};
-

package/src/components/IdCaption/IdCaption.vue

@@ -4,7 +4,7 @@
 		<div
 			:class="{ idcaption__body: true, 'idcaption__body--single': !hasTitle || !hasSubtitle }"
 		>
-			<farm-caption bold variation="medium" v-if="hasTitle">
+			<farm-caption variation="medium" v-if="hasTitle">
 				<span>
 					{{ $slots.title ? $slots.title[0].text : null }}
 					<farm-btn icon color="gray" v-if="link" @click="$emit('onLinkClick')">