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

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@farm-investimentos/front-mfe-components",
-	"version": "15.2.1",
+	"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/components/Select/Select.stories.js

@@ -284,7 +284,42 @@ export const MultipleInitValue = () => ({
 	</div>`,
 });
 
-export const ChangeEvennt = () => ({
+export const MultipleResetByValue = () => ({
+	data() {
+		return {
+			filters: {
+				v: [2, 3],
+			},
+			items: [
+				{ id: 0, label: 'value 0' },
+				{ id: 1, label: 'value 1' },
+				{ id: 2, label: 'value 2' },
+				{ id: 3, label: 'value 3' },
+			],
+		};
+	},
+	methods: {
+		click() {
+			this.filters.v = [1];
+		},
+	},
+	template: `<div style="width: 400px">
+		<farm-select
+			v-model="filters.v"
+			item-value="id"
+			item-text="label"
+			ref="select"
+			multiple
+			:items="items"
+		/>
+		v-model: {{ filters.v }}
+		<farm-btn @click="click">
+			reset
+		</farm-btn>
+	</div>`,
+});
+
+export const ChangeEvent = () => ({
 	data() {
 		return {
 			v: null,

package/src/components/Select/Select.vue

@@ -264,12 +264,16 @@ export default Vue.extend({
 			newValue => {
 				innerValue.value = newValue;
 				errorBucket.value = [];
+
 				if (
 					(multiple.value && newValue === null) ||
 					(Array.isArray(newValue) && newValue.length === 0)
 				) {
 					multipleValues.value = [];
 				}
+				if (Array.isArray(newValue) && newValue.length > 0) {
+					multipleValues.value = [...newValue];
+				}
 				validate(newValue);
 				updateSelectedTextValue();
 				emit('input', newValue);

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>`,
+});