@farm-investimentos/front-mfe-components 11.8.4 → 11.9.1

package/package.json

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

package/src/components/Checkbox/Checkbox.scss

@@ -37,6 +37,10 @@
     }
 
     @include activateRipple;
+
+    .farm-checkbox.farm-checkbox--error {
+        border-color: themeColor('error');
+    }
 }
 
 @include rippleStyles;

package/src/components/Checkbox/Checkbox.stories.js

@@ -23,22 +23,24 @@ export default {
 export const Primary = () => ({
 	data() {
 		return {
-			isChecked: false,
+			isChecked: null,
 		};
 	},
 	template: `<div>
-		<farm-checkbox v-model="isChecked" />
+		<farm-checkbox v-model="isChecked" value="1" />
+		isChecked (value): {{ isChecked }}
 	</div>`,
 });
 
-export const DefaultTrue = () => ({
+export const DefaultCheck = () => ({
 	data() {
 		return {
 			isChecked: true,
 		};
 	},
 	template: `<div>
-		<farm-checkbox v-model="isChecked" />
+		<farm-checkbox v-model="isChecked" :value="true" />
+		isChecked (value): {{ isChecked }}
 	</div>`,
 });
 
@@ -49,7 +51,7 @@ export const WithLabel = () => ({
 		};
 	},
 	template: `<div>
-		<farm-checkbox v-model="isChecked" label="custom label" />
+		<farm-checkbox v-model="isChecked" value="1" label="custom label" />
 	</div>`,
 });
 
@@ -61,8 +63,8 @@ export const Disabled = () => ({
 		};
 	},
 	template: `<div>
-		<farm-checkbox v-model="isChecked" :disabled="true" /><br />
-		<farm-checkbox v-model="notIsChecked" :disabled="true" />
+		<farm-checkbox v-model="isChecked" :value="true" :disabled="true" /><br />
+		<farm-checkbox v-model="notIsChecked" value="" :disabled="true" />
 	</div>`,
 });
 
@@ -84,6 +86,7 @@ export const Colors = () => ({
 		>
 			<farm-checkbox
 				v-model="isChecked"
+				:value="true"
 				:color="color"
 				:variation="variation"
 				:label="variation || 'Base'"			
@@ -102,7 +105,7 @@ export const Sizes = () => ({
 	},
 	template: `<div style="display: flex; flex-direction: column; flex-wrap: wrap;">
         <div v-for="size of sizes">
-			<farm-checkbox v-model="isChecked" :size="size" :label="size" /><br />
+			<farm-checkbox v-model="isChecked" :size="size" :value="true" :label="size" /><br />
         </div>
 	</div>`,
 });
@@ -115,6 +118,6 @@ export const Indeterminate = () => ({
 		};
 	},
 	template: `<div>
-		<farm-checkbox :indeterminate="true" v-model="isChecked"  />
+		<farm-checkbox :indeterminate="true" v-model="isChecked" :value="true"  />
 	</div>`,
 });

package/src/components/Checkbox/Checkbox.vue

@@ -3,11 +3,12 @@
 		<span
 			:class="{
 				'farm-checkbox': true,
-				'farm-checkbox--checked': innerValue,
+				'farm-checkbox--checked': isChecked,
 				'farm-checkbox--disabled': disabled,
 				'farm-checkbox--indeterminate': indeterminate,
 				'farm-checkbox--lighten': variation === 'lighten',
 				'farm-checkbox--darken': variation === 'darken',
+				'farm-checkbox--error': showError,
 			}"
 			:size="$props.size"
 			@click="toggleValue"
@@ -30,11 +31,18 @@ import deepEqual from '../../composition/deepEqual';
 
 export default Vue.extend({
 	name: 'farm-checkbox',
+	model: {
+		prop: 'modelValue',
+	},
 	props: {
 		/**
 		 * v-model binding
 		 */
-		value: { type: Boolean, required: true },
+		modelValue: {},
+		/**
+		 * Value to be set to v-model
+		 */
+		value: { type: [String, Number, Boolean], default: undefined },
 		/**
 		 * Label
 		 */
@@ -85,28 +93,40 @@ export default Vue.extend({
 		indeterminate: { type: Boolean, default: false },
 	},
 	setup(props, { emit }) {
-		const innerValue = ref(props.value);
+		const innerValue = ref(props.modelValue);
 		const { label, disabled, rules } = toRefs(props);
 		const { errorBucket, valid, validatable } = validateFormStateBuilder();
-
+		const isTouched = ref(false);
 		let fieldValidator = validateFormFieldBuilder(rules.value);
 
 		const toggleValue = () => {
 			if (disabled.value) {
 				return false;
 			}
-			innerValue.value = !innerValue.value;
+			isTouched.value = true;
+			if (isChecked.value) {
+				innerValue.value = null;
+			} else {
+				innerValue.value = props.value;
+			}
 			emit('input', innerValue.value);
 			validate(innerValue.value);
 		};
 
+		const isChecked = computed(() => {
+			return innerValue.value == props.value;
+		});
+
 		const hasError = computed(() => {
 			return errorBucket.value.length > 0;
 		});
 
+		const showError = computed(() => hasError.value && isTouched.value);
+
 		watch(
 			() => props.value,
 			() => {
+				isTouched.value = true;
 				innerValue.value = props.value;
 				validate(innerValue.value);
 			}
@@ -126,7 +146,9 @@ export default Vue.extend({
 			if (disabled.value) {
 				return false;
 			}
-			innerValue.value = false;
+			isTouched.value = true;
+			innerValue.value = null;
+			validate(innerValue.value);
 			emit('input', innerValue.value);
 		};
 
@@ -144,9 +166,11 @@ export default Vue.extend({
 			valid,
 			validatable,
 			hasError,
+			isChecked,
 			toggleValue,
 			reset,
 			validate,
+			showError,
 		};
 	},
 });

package/src/components/Form/Form.stories.js

@@ -32,7 +32,7 @@ export const Primary = () => ({
 			form: {
 				document: 'Document',
 				name: 'Name',
-				checkbox: true,
+				checkbox: '2',
 				birthDate: new Date('1980/09/20').toISOString(),
 				selectId: 1,
 				rangeDate: [],
@@ -54,16 +54,16 @@ export const Primary = () => ({
         <farm-form v-model="validForm" :style="[styles.vForm]" ref="form">
 			<div>
 				<farm-label :required="true">Documento</farm-label>
-				<farm-textfield v-model="form.document" :rules="[rules.required]" />
+				<farm-textfield-v2 v-model="form.document" :rules="[rules.required]" />
 			</div>
 			<farm-label :required="true">Nome</farm-label>
-			<farm-textfield v-model="form.name" :rules="[rules.required]" />
+			<farm-textfield-v2 v-model="form.name" :rules="[rules.required]" />
 			
 			<farm-label :required="true">True/false</farm-label>
-			<farm-checkbox v-model="form.checkbox" :rules="[rules.checked]" />
+			<farm-checkbox v-model="form.checkbox" value="1" :rules="[rules.checked]" />
 
 			<farm-label :required="true">Select</farm-label>
-			<v-select :rules="[rules.required]" :items="items" v-model="form.selectId"/>
+			<farm-select :rules="[rules.required]" :items="items" v-model="form.selectId"/>
 
 			<farm-label :required="true">Birthdate:</farm-label>
 			<farm-input-datepicker
@@ -119,7 +119,7 @@ export const Secondary = () => ({
             <section>
 				<div>
 					<farm-label :required="true">Documento</farm-label>
-					<farm-textfield v-model="form.document" :rules="[rules.required]" />
+					<farm-textfield-v2 v-model="form.document" :rules="[rules.required]" />
 				</div>
 			</section>
 			<section>
@@ -130,11 +130,11 @@ export const Secondary = () => ({
 			</section>
 
 			<farm-label>Not required</farm-label>
-			<farm-checkbox v-model="form.checkbox" />
+			<farm-checkbox value="1" v-model="form.checkbox" />
 
             <div class="footer" :style="[styles.footer]">
-				<farm-btn color="secondary" outlined @click="$refs.form.reset()" class="mr-3">Reset</farm-btn>
-				<farm-btn color="secondary" :disabled="!validForm">Salvar</farm-btn>
+				<farm-btn outlined @click="$refs.form.reset()" class="mr-3">Reset</farm-btn>
+				<farm-btn :disabled="!validForm">Salvar</farm-btn>
             </div>
         </farm-form>
     `,
@@ -161,51 +161,30 @@ export const InitInvalid = () => ({
             <section>
 				<div>
 					<farm-label :required="true">Documento</farm-label>
-					<farm-textfield v-model="form.document" :rules="[rules.required]" />
+					<farm-textfield-v2 v-model="form.document" :rules="[rules.required]" />
 				</div>
 			</section>
 			<section>
 				<div>
 					<farm-label :required="true">Nome</farm-label>
-					<farm-textfield v-model="form.name" :rules="[rules.required]" />
+					<farm-textfield-v2 v-model="form.name" :rules="[rules.required]" />
 				</div>
 			</section>
 
 			<farm-label :required="true">True/false</farm-label>
-			<farm-checkbox v-model="form.checkbox" :rules="[rules.checked]" />
+			<farm-checkbox v-model="form.checkbox" value="1" :rules="[rules.checked]" />
 
             <div class="footer" :style="[styles.footer]">
-				<farm-btn color="secondary" outlined @click="$refs.form.reset()" class="mr-3">Reset</farm-btn>
-				<farm-btn color="secondary" :disabled="!validForm">Salvar</farm-btn>
+				<farm-btn outlined @click="$refs.form.reset()" class="mr-3">Reset</farm-btn>
+				<farm-btn :disabled="!validForm">Salvar</farm-btn>
             </div>
         </farm-form>
     `,
 });
 
-export const RadioGroupReset = () => ({
-	data() {
-		return {
-			checkedValue: 1,
-			buttons: [
-				{ label: 'Button 1', id: 1 },
-				{ label: 'Button 2', id: 2 },
-				{ label: 'Button 3', id: 3 },
-			],
-			validForm: false,
-			styles,
-		};
-	},
-	template: `
-        <farm-form v-model="validForm" :style="[styles.vForm]" ref="form">
-			<farm-radio-group v-model="checkedValue" column :buttons="buttons" />
 
-            <div class="footer" :style="[styles.footer]">
-				<farm-btn color="secondary" outlined @click="$refs.form.reset()" class="mr-3">Reset</farm-btn>
-				<farm-btn color="secondary" :disabled="!validForm">Salvar</farm-btn>
-            </div>
-        </farm-form>
-    `,
-});
+
+
 
 export const Grid = () => ({
 	data() {
@@ -331,3 +310,30 @@ export const MigrateSelectV2 = () => ({
         </farm-form>
     `,
 });
+
+export const ValidateRadioGroup = () => ({
+	data() {
+		return {
+			checkedValue: null,
+			validForm: false,
+			styles,
+			rules: {
+				required: value => !!value || 'Campo obrigatório',
+			},
+		};
+	},
+	template: `
+        <farm-form v-model="validForm" :style="[styles.vForm]" ref="form">
+			<farm-radio-group v-model="checkedValue" :rules="[rules.required]">
+				<farm-radio v-model="checkedValue" value="1" /><farm-label>value 1</farm-label>
+				<farm-radio v-model="checkedValue" value="2" /><farm-label>value 2</farm-label>
+				<farm-radio v-model="checkedValue" value="3" /><farm-label>value 3</farm-label>
+			</farm-radio-group>
+
+            <div class="footer" :style="[styles.footer]">
+				<farm-btn color="secondary" outlined @click="$refs.form.reset()" class="mr-3">Reset</farm-btn>
+				<farm-btn color="secondary" :disabled="!validForm">Salvar</farm-btn>
+            </div>
+        </farm-form>
+    `,
+});

package/src/components/Logos/OriginatorLogo/OriginatorLogo.vue

@@ -26,7 +26,7 @@ export default Vue.extend({
 		imgSrc() {
 			const href = window.location.href;
 			return `${
-				href.indexOf('localhost') || href.indexOf('front-farm-storybook')
+				href.indexOf('localhost') >= 0 || href.indexOf('front-farm-storybook') >= 0
 					? 'https://dev.plataforma.portalfarm.com.br'
 					: ''
 			}/public/logos/originadores/${this.id}/${this.variation}.svg`;

package/src/components/Logos/ProductLogo/ProductLogo.vue

@@ -26,7 +26,7 @@ export default Vue.extend({
 		imgSrc() {
 			const href = window.location.href;
 			return `${
-				href.indexOf('localhost') || href.indexOf('front-farm-storybook')
+				href.indexOf('localhost') >= 0 || href.indexOf('front-farm-storybook') >= 0
 					? 'https://dev.plataforma.portalfarm.com.br'
 					: ''
 			}/public/logos/products/${this.id}/${this.variation}.svg`;

package/src/components/Radio/Radio.vue

@@ -26,7 +26,7 @@ export default Vue.extend({
 		/**
 		 * Value to be set to v-model
 		 */
-		value: { type: [String, Number, Boolean], default: undefined },
+		value: { type: [String, Number, Boolean], required: true },
 	},
 	computed: {
 		isChecked() {

package/src/components/RadioGroup/RadioGroup.stories.js

@@ -23,73 +23,64 @@ export default {
 export const Primary = () => ({
 	data() {
 		return {
-			buttons: [
-				{ label: 'Random text', id: 1 },
-				{ label: 'In', id: 2 },
-				{ label: 'Radio Group', id: 3 },
-			],
-			checkedValue: 1,
+			checkedValue: null,
 		};
 	},
 	template: `<div>
-	    <farm-radio-group v-model="checkedValue" :buttons="buttons" />
+	    <farm-radio-group v-model="checkedValue">
+			<farm-radio v-model="checkedValue" value="1" /><farm-label>value 1</farm-label>
+			<farm-radio v-model="checkedValue" value="2" /><farm-label>value 2</farm-label>
+			<farm-radio v-model="checkedValue" value="3" /><farm-label>value 3</farm-label>
+		</farm-radio-group>
+		selectedValue: {{ checkedValue  }}
 	</div>`,
 });
 
 export const Reset = () => ({
 	data() {
 		return {
-			buttons: [
-				{ label: 'Button 1', id: 1 },
-				{ label: 'Button 2', id: 2 },
-				{ label: 'Button 3', id: 3 },
-			],
-			checkedValue: 1,
+			checkedValue: null,
 		};
 	},
 	methods: {
 		reset() {
-			this.$refs.radiogroupreset.reset();
+			this.$refs.radioGroup.reset();
 		},
 	},
 	template: `<div>
-	    <farm-radio-group v-model="checkedValue" :buttons="buttons" ref="radiogroupreset" /><br />
-		<farm-btn @click="reset">Reset</farm-btn>
+	    <farm-radio-group v-model="checkedValue" ref="radioGroup">
+			<farm-radio v-model="checkedValue" value="1" /><farm-label>value 1</farm-label>
+			<farm-radio v-model="checkedValue" value="2" /><farm-label>value 2</farm-label>
+			<farm-radio v-model="checkedValue" value="3" /><farm-label>value 3</farm-label>
+		</farm-radio-group>
+		selectedValue: {{ checkedValue  }}
+		<farm-btn @click="reset">reset</farm-btn>
 	</div>`,
 });
 
-export const Vertical = () => ({
+export const Validate = () => ({
 	data() {
 		return {
-			buttons: [
-				{ label: 'Button 1', id: 1 },
-				{ label: 'Button 2', id: 2 },
-				{ label: 'Button 3', id: 3 },
-			],
-			checkedValue: 1,
+			checkedValue: null,
+			rules: {
+				required: value => !!value || 'Required field',
+			},
 		};
 	},
-	template: `<div>
-	    <farm-radio-group v-model="checkedValue" vertical :buttons="buttons" />
-	</div>`,
-});
-
-export const Colors = () => ({
-	data() {
-		return {
-			buttons: [
-				{ label: 'Button 1', id: 1 },
-				{ label: 'Button 2', id: 2 },
-				{ label: 'Button 3', id: 3 },
-			],
-			checkedValue: 1,
-			colors,
-		};
+	methods: {
+		reset() {
+			this.$refs.radioGroup.reset();
+		},
 	},
-	template: `<div style="display: flex; flex-direction: row; flex-wrap: wrap;">
-		<div v-for="color in colors" style="width: 33.3%; margin-bottom: 32px;">
-			<h4 style="margin-bottom: 16px">{{ color }}</h4>
-			<farm-radio-group v-model="checkedValue" vertical :color="color" :buttons="buttons" />
-		</div>
+	template: `<div style="width: 480px">
+		
+		<farm-radio-group v-model="checkedValue" ref="radioGroup" :rules="[rules.required]">
+			<farm-radio v-model="checkedValue" value="1" /><farm-label>value 1</farm-label>
+			<farm-radio v-model="checkedValue" value="2" /><farm-label>value 2</farm-label>
+			<farm-radio v-model="checkedValue" value="3" /><farm-label>value 3</farm-label>
+		</farm-radio-group>
+		selectedValue: {{ checkedValue  }}
+		<farm-btn @click="reset">reset</farm-btn>
+
 	</div>`,
 });

package/src/components/RadioGroup/RadioGroup.vue

@@ -2,104 +2,94 @@
 	<div
 		:class="{
 			'farm-radio-group': true,
-			'farm-radio-group--vertical': $props.vertical,
 		}"
-		:color="color"
 	>
-		<div
-			class="farm-radio-group__item"
-			v-for="(button, index) in buttons"
-			:key="`farm-radio-group_` + index"
-			@click="clicked(button.id)"
-		>
-			<input
-				type="radio"
-				name="radio"
-				:checked="button.id === innerValue"
-				:id="`farm-radio-group_` + index"
-				:value="button.id"
-				:class="{ checked: button.id === innerValue }"
-			/>
-			<label> {{ button.label }} </label>
-		</div>
+		<slot></slot>
+		<farm-caption v-if="showErrorText" color="error" variation="regular">
+			{{ errorBucket[0] }}
+		</farm-caption>
 	</div>
 </template>
 <script lang="ts">
-import Vue, { PropType, ref, watch } from 'vue';
+import Vue, { ref, watch, PropType, toRefs, computed, onBeforeMount } from 'vue';
 import validateFormStateBuilder from '../../composition/validateFormStateBuilder';
-import IRadioGroup from './IRadioGroup';
+import validateFormFieldBuilder from '../../composition/validateFormFieldBuilder';
+import validateFormMethodBuilder from '../../composition/validateFormMethodBuilder';
+import deepEqual from '../../composition/deepEqual';
+
 export default Vue.extend({
 	name: 'farm-radio-group',
 	props: {
-		/**
-		 * Array of buttons
-		 */
-		buttons: {
-			type: Array as PropType<Array<IRadioGroup>>,
-			default: [],
-		},
 		/**
 		 * v-model
 		 */
 		value: {
 			required: true,
 		},
+		errorMessage: String,
 		/**
-		 * Is vertical?
+		 * Array of rules used for validation
 		 */
-		vertical: {
-			type: Boolean,
-			default: false,
+		rules: {
+			type: Array as PropType<Array<Function>>,
+			default: () => [],
 		},
-		color: {
-			type: String as PropType<
-				| 'primary'
-				| 'secondary'
-				| 'neutral'
-				| 'info'
-				| 'success'
-				| 'error'
-				| 'warning'
-				| 'success'
-				| 'extra-1'
-				| 'extra-2'
-				| 'gray'
-			>,
-			default: 'primary',
-		}
 	},
 	setup(props, { emit }) {
+		const { rules } = toRefs(props);
 		const innerValue = ref(props.value);
 		const { errorBucket, valid, validatable } = validateFormStateBuilder();
+		const isTouched = ref(false);
 
-		const reset = () => {
-			innerValue.value = false;
-			emit('input', innerValue.value);
-		};
+		let fieldValidator = validateFormFieldBuilder(rules.value);
+
+		const hasError = computed(() => {
+			return errorBucket.value.length > 0;
+		});
+
+		const showErrorText = computed(() => hasError.value && isTouched.value);
 
 		watch(
 			() => props.value,
 			() => {
+				isTouched.value = true;
 				innerValue.value = props.value;
+				validate(innerValue.value);
+			}
+		);
+
+		watch(
+			() => props.rules,
+			(newVal, oldVal) => {
+				if (deepEqual(newVal, oldVal)) return;
+				fieldValidator = validateFormFieldBuilder(rules.value);
+				validate = validateFormMethodBuilder(errorBucket, valid, fieldValidator);
+				validate(innerValue.value);
 			}
 		);
 
-		const clicked = value => {
-			innerValue.value = value;
+		let validate = validateFormMethodBuilder(errorBucket, valid, fieldValidator);
+
+		const reset = () => {
+			innerValue.value = null;
 			emit('input', innerValue.value);
 		};
 
+		onBeforeMount(() => {
+			validate(innerValue.value);
+		});
+
 		return {
 			innerValue,
 			errorBucket,
 			valid,
 			validatable,
+			hasError,
+			showErrorText,
+			isTouched,
 			reset,
-			clicked,
+			validate,
 		};
 	},
 });
 </script>
-<style lang="scss" scoped>
-@import './RadioGroup.scss';
-</style>

package/src/components/RadioGroup/IRadioGroup.ts

@@ -1,6 +0,0 @@
-interface IRadioGroup {
-    id: Number;
-	label: String;
-}
-
-export default IRadioGroup;