@farm-investimentos/front-mfe-components 15.2.2 → 15.2.3

package/package.json

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

package/src/components/Checkbox/Checkbox.vue

@@ -3,7 +3,7 @@
 		<span
 			:class="{
 				'farm-checkbox': true,
-				'farm-checkbox--checked': isChecked,
+				'farm-checkbox--checked': isChecked && (forceCheck === undefined || forceCheck),
 				'farm-checkbox--disabled': disabled,
 				'farm-checkbox--indeterminate': indeterminate,
 				'farm-checkbox--lighten': variation === 'lighten',
@@ -92,12 +92,17 @@ export default Vue.extend({
 		 * Sets an indeterminate state for the simple checkbox
 		 */
 		indeterminate: { type: Boolean, default: false },
+		/**
+		 * Control if is check by prop
+		 */
+		checked: { type: Boolean, default: undefined },
 	},
 	setup(props, { emit }) {
 		const innerValue = ref(props.modelValue);
-		const { label, disabled, rules } = toRefs(props);
+		const { label, disabled, rules, checked } = toRefs(props);
 		const { errorBucket, valid, validatable } = validateFormStateBuilder();
 		const isTouched = ref(false);
+		const forceCheck = ref(checked.value);
 		let fieldValidator = validateFormFieldBuilder(rules.value);
 
 		const toggleValue = () => {
@@ -154,6 +159,14 @@ export default Vue.extend({
 			}
 		);
 
+		watch(
+			() => props.checked,
+			newValue => {
+				forceCheck.value = newValue;
+				innerValue.value = newValue ? props.value : null;
+			}
+		);
+
 		return {
 			innerValue,
 			label,
@@ -163,6 +176,7 @@ export default Vue.extend({
 			validatable,
 			hasError,
 			isChecked,
+			forceCheck,
 			toggleValue,
 			reset,
 			validate,

package/src/examples/Table.stories.js

@@ -83,6 +83,7 @@ export const TableSampleData = () => ({
     </v-data-table>
 	</div>`,
 });
+
 export const TableSampleDataWithCheckbox = () => ({
 	components: { 'v-data-table': VDataTable },
 	data() {
@@ -93,6 +94,7 @@ export const TableSampleDataWithCheckbox = () => ({
 				{ id: 2, name: 'name 2' },
 				{ id: 3, name: 'name 3' },
 			],
+			selectedItems: [],
 		};
 	},
 	template: `<div>
@@ -102,8 +104,8 @@ export const TableSampleDataWithCheckbox = () => ({
 		:headers="headers"
         :items="items"
 		show-select
+		v-model="selectedItems"
 	>
-    
     </v-data-table>
 	</div>`,
 });
@@ -161,18 +163,43 @@ export const TableSampleLocalPagination = () => ({
 	</div>`,
 });
 
-TableNoData.story = {
-	name: 'No data',
-};
-
-TableSampleData.story = {
-	name: 'With data',
-};
-
-TableSampleDataWithCheckbox.story = {
-	name: 'With data and checkbox',
-};
-
-TableSampleLocalPagination.story = {
-	name: 'With data and local pagination',
-};
+export const TableSampleDataWithFarmCheckbox = () => ({
+	components: { 'v-data-table': VDataTable },
+	data() {
+		return {
+			headers,
+			items: [
+				{ id: 1, name: 'name 1' },
+				{ id: 2, name: 'name 2' },
+				{ id: 3, name: 'name 3' },
+			],
+			selectedItems: [],
+		};
+	},
+	methods: {
+		onSelect({ item }) {
+			if (item.id === 2)
+				this.selectedItems = [...this.selectedItems].filter(
+					innerItem => innerItem.id !== 2
+				);
+		},
+		isItemSelected(item) {
+			return this.selectedItems.some(innerItem => innerItem.id === item.id);
+		},
+	},
+	template: `<div>{{selectedItems}}
+	<v-data-table
+        hide-default-footer
+		id="v-data-table--default"
+		v-model="selectedItems"
+		show-select
+		:headers="headers"
+        :items="items"
+		@item-selected="onSelect"
+	>
+		<template v-slot:item.data-table-select="{ isSelected, select, item }">
+			<farm-checkbox :value="item.id" :checked="isItemSelected(item)" @input="select($event)"/>
+		</template>
+    </v-data-table>
+	</div>`,
+});