@farm-investimentos/front-mfe-components 9.2.2 → 9.2.3

package/package.json

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

package/src/components/Chip/Chip.scss

@@ -12,6 +12,12 @@
     text-align: center;
     align-items: center;
     color: white;
+    width: 100%;
+
+    &--dense {
+        min-width: auto;
+        width: max-content;
+    }
 
     .farm-typography {
         width: 100%;

package/src/components/Chip/Chip.stories.js

@@ -10,8 +10,15 @@ export default {
 };
 
 export const Primary = () => ({
-	template: `<div>
-		<farm-chip color="info">Chip</farm-chip>
+	template: `<div class="chips-container">
+		<farm-chip color="info">Chip (100% width)</farm-chip>
+	</div>`,
+});
+
+export const Dense = () => ({
+	template: `<div class="chips-container">
+		<farm-chip color="info" :dense="true">prop</farm-chip>
+		<farm-chip color="secondary" dense>attribute</farm-chip>
 	</div>`,
 });
 

package/src/components/Chip/Chip.stories.scss

@@ -1,7 +1,7 @@
 .chips-container {
     display: flex;
     flex-direction: column;
-    max-width: 160px;
+    max-width: 320px;
 
     > .farm-chip {
         margin-bottom: 16px;

package/src/components/Chip/Chip.vue

@@ -1,8 +1,6 @@
 <template>
-	<span :class="{ 'farm-chip': true }">
-		<farm-typography tag="span" size="sm">
-			<slot></slot>
-		</farm-typography>
+	<span :class="{ 'farm-chip': true, 'farm-chip--dense': dense }">
+		<farm-typography tag="span" size="sm"> <slot></slot> </farm-typography>
 	</span>
 </template>
 <script lang="ts">
@@ -11,6 +9,15 @@ import Vue from 'vue';
 export default Vue.extend({
 	name: 'farm-chip',
 	inheritAttrs: true,
+	props: {
+		/**
+		 * Is dense (not 100% width)?
+		 */
+		dense: {
+			type: Boolean,
+			default: false,
+		},
+	},
 });
 </script>
 <style lang="scss" scoped>

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

@@ -25,13 +25,13 @@ export const Primary = () => ({
 	components: { DataTablePaginator },
 	data() {
 		return {
-			totalPages: null
+			totalPages: 8
 		};
 	},
 	template: '<DataTablePaginator :totalPages="totalPages" :page="1" />',
 	mounted() {
 		setTimeout(() => {
-			this.totalPages = 2;
+			this.totalPages = 0;
 		}, 1000);
 	}
 });

package/src/components/DataTablePaginator/DataTablePaginator.vue

@@ -16,9 +16,9 @@
 			></v-select>
 		</div>
 
-		<ul :class="{ 'farm-paginator': true, 'farm-paginator--disabled': disabled }">
+		<ul :class="{ 'farm-paginator': true, 'farm-paginator--disabled': disabled || totalPages == null }">
 			<li>
-				<button :disabled="currentPage === 1 || disabled" @click="previousPage">
+				<button :disabled="currentPage === 1 || disabled || totalPages == null" @click="previousPage">
 					<farm-icon color="gray" size="sm">chevron-left</farm-icon>
 				</button>
 			</li>
@@ -37,7 +37,7 @@
 			</li>
 
 			<li>
-				<button :disabled="currentPage === totalPages || disabled" @click="nextPage">
+				<button :disabled="currentPage === totalPages || disabled || totalPages == null || totalPages === 0" @click="nextPage">
 					<farm-icon color="gray" size="sm">chevron-right</farm-icon>
 				</button>
 			</li>
@@ -70,7 +70,10 @@ export default Vue.extend({
 		/**
 		 * Total de páginas
 		 */
-		totalPages: null,
+		totalPages: {
+			type: Number,
+			default: null,
+		},
 		/**
 		 * Desabilita controles
 		 */