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

package/package.json

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

package/src/components/ValueCaption/ValueCaption.scss

@@ -0,0 +1,19 @@
+.farm-valuecaption {
+	display: flex;
+
+	.farm-icon-box {
+		margin-right: 8px;
+	}
+
+	div.farm-valuecaption__content {
+		display: flex;
+		flex-direction: column;
+		justify-content: space-between;
+
+		p {
+			margin-bottom: 0;
+			word-break: break-word;
+		}
+	}
+
+}

package/src/components/ValueCaption/ValueCaption.stories.js

@@ -0,0 +1,33 @@
+import { withDesign } from 'storybook-addon-designs';
+import ValueCaption from '.';
+
+export default {
+	title: 'Display/ValueCaption',
+	component: ValueCaption,
+	decorators: [withDesign],
+	parameters: {
+		docs: {
+			description: {
+				component: `Value Caption<br />
+				selector: <em>farm-valuecaption</em>
+				`,
+			},
+		},
+		viewMode: 'docs',
+	},
+};
+
+export const Primary = () => ({
+	template: `
+    <farm-valuecaption
+    icon="account-box-outline"
+    >
+        <template v-slot:title>
+            Upper Line Text
+        </template>
+        <template v-slot:subtitle>
+            R$ 1.000.000,00
+        </template>
+    </farm-valuecaption>
+    `,
+});

package/src/components/ValueCaption/ValueCaption.vue

@@ -0,0 +1,60 @@
+<template>
+	<div class="farm-valuecaption">
+		<farm-icon-box v-if="icon" :icon="icon" :color="iconBoxColor" size="md" />
+		<div class="farm-valuecaption__content">
+			<farm-caption variation="regular" color="gray" v-if="hasTitle">
+				<slot name="title"></slot>
+			</farm-caption>
+
+			<farm-bodytext bodytext type="1" variation="bold" v-if="hasSubtitle">
+				<slot name="subtitle"></slot>
+			</farm-bodytext>
+		</div>
+	</div>
+</template>
+
+<script lang="ts">
+import Vue, { computed, PropType } from 'vue';
+export default Vue.extend({
+	name: 'farm-valuecaption',
+	props: {
+		/**
+		 * Icon (from Material Icons)
+		 * Example: chart-bar
+		 */
+		icon: {
+			type: String,
+		},
+		/**
+		 * IconBox Color
+		 */
+		iconBoxColor: {
+			type: String as PropType<
+				| 'primary'
+				| 'secondary'
+				| 'neutral'
+				| 'info'
+				| 'success'
+				| 'error'
+				| 'warning'
+				| 'success'
+				| 'extra-1'
+				| 'extra-2'
+				| 'gray'
+			>,
+			default: 'primary',
+		},
+	},
+
+	setup(_, { slots }) {
+		const hasTitle = computed(() => slots.title);
+		const hasSubtitle = computed(() => slots.subtitle);
+
+		return { hasSubtitle, hasTitle };
+	},
+});
+</script>
+
+<style lang="scss" scoped>
+@import './ValueCaption';
+</style>

package/src/components/ValueCaption/__tests__/ValueCaption.spec.js

@@ -0,0 +1,14 @@
+import { shallowMount } from '@vue/test-utils';
+import ValueCaption from '../ValueCaption.vue';
+
+describe('ValueCaption component', () => {
+	let wrapper;
+
+	beforeEach(() => {
+		wrapper = shallowMount(ValueCaption);
+	});
+
+	test('Created hook', () => {
+		expect(wrapper).toBeDefined();
+	});
+});

package/src/components/ValueCaption/index.ts

@@ -0,0 +1,4 @@
+import ValueCaption from './ValueCaption.vue';
+
+export { ValueCaption };
+export default ValueCaption;

package/src/main.ts

@@ -91,6 +91,7 @@ export * from './components/TextField';
 export * from './components/TextFieldV2';
 export * from './components/Tooltip';
 export * from './components/Typography';
+export * from './components/ValueCaption';
 
 export * from './components/layout/Box';
 export * from './components/layout/Col';