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

package/package.json

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

@@ -26,14 +26,13 @@ const styles = {
 	},
 };
 
-/*
 export const Primary = () => ({
 	data() {
 		return {
 			form: {
 				document: 'Document',
 				name: 'Name',
-				checkbox: true,
+				checkbox: '2',
 				birthDate: new Date('1980/09/20').toISOString(),
 				selectId: 1,
 				rangeDate: [],
@@ -55,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
@@ -120,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>
@@ -131,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>
     `,
@@ -162,22 +161,22 @@ 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>
     `,
@@ -311,7 +310,6 @@ export const MigrateSelectV2 = () => ({
         </farm-form>
     `,
 });
-*/
 
 export const ValidateRadioGroup = () => ({
 	data() {

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() {