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

package/package.json

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

package/src/components/DialogHeader/DialogHeader.scss

@@ -1,6 +1,5 @@
 .farm-dialog-header__close {
     position: absolute;
-    right: 16px;
     margin-top: 0;
     font-size: 16px;
 

package/src/components/DialogHeader/DialogHeader.vue

@@ -15,7 +15,7 @@
 			title="Fechar"
 			@click="onClose"
 		>
-			<farm-icon role="button"> close-thick </farm-icon>
+			<farm-icon role="button" size="md"> window-close </farm-icon>
 		</farm-btn>
 	</header>
 </template>

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

@@ -26,6 +26,7 @@ const styles = {
 	},
 };
 
+/*
 export const Primary = () => ({
 	data() {
 		return {
@@ -182,30 +183,9 @@ export const InitInvalid = () => ({
     `,
 });
 
-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 +311,31 @@ 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/Radio/Radio.scss

@@ -5,11 +5,10 @@ input[type="radio"] {
     margin: 0;
     font: inherit;
     color: rgba(0, 0, 0, .6);
-    width: 18px;
-    height: 18px;
+    width: 24px;
+    height: 24px;
     border: 1.5px solid rgba(0, 0, 0, .6);
     border-radius: 50%;
-    transform: translate(-12px);
     display: grid;
     place-content: center;
     cursor: pointer;

package/src/components/Radio/Radio.stories.js

@@ -13,6 +13,10 @@ export default {
 				<span style="color: var(--farm-extra-1-base);">development</span>
 				`,
 			},
+			design: {
+				type: 'figma',
+				url: 'https://www.figma.com/file/p62YDSTfWg0Mcnf5APfdvI/%E2%9C%8D-Design-System-%7C-v2?node-id=4913%3A20222&t=RIUg7AZerUGMSaM9-0',
+			},
 		},
 		viewMode: 'docs',
 	},

package/src/components/Radio/Radio.vue

@@ -26,22 +26,24 @@ export default Vue.extend({
 		/**
 		 * Value to be set to v-model
 		 */
-		value: { type: String, default: undefined },
+		value: { type: [String, Number, Boolean], default: undefined },
 	},
 	computed: {
 		isChecked() {
 			return this.modelValue == this.value;
 		},
 	},
-	methods: {
-		onClick(event) {
-			this.$emit('change', event.target.value);
-			this.$emit('input', event.target.value);
-		},
-		validate() {},
-		reset() {
-			this.$emit('input', null);
-		},
+	setup(_, { emit }) {
+		const onClick = event => {
+			emit('change', event.target.value);
+			emit('input', event.target.value);
+		};
+
+		const reset = () => {
+			emit('input', null);
+		};
+		const validate = () => {};
+		return { onClick, reset, validate };
 	},
 });
 </script>

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;

package/src/components/RadioGroup/RadioGroup.scss

@@ -1,108 +0,0 @@
-@import '../../configurations/theme-colors';
-
-.farm-radio-group {
-    border: none;
-    cursor: default;
-    display: flex;
-    width: 100%;
-
-    &__item {
-        font-size: 16px;
-        line-height: 18px;
-        cursor: pointer;
-        display: grid;
-        grid-template-columns: 16px auto;
-        gap: 0;
-        color: rgba(0, 0, 0, .6);
-        margin-right: 32px;
-    }
-
-    label {
-        cursor: pointer;
-    }
-
-    input[type="radio"].checked {
-        border: 1.5px solid black;
-    }
-
-    &--vertical {
-        flex-direction: column;
-        .farm-radio-group__item {
-            margin-right: 24px;
-            margin-top: 16px;
-            &:first-of-type {
-                margin-top: 0;
-            }
-        }
-    }
-
-    @each $color in $theme-colors-list {
-        &#{'[color=' + $color + ']'} {
-            input[type="radio"]::before {
-                box-shadow: inset 16px 16px themeColor($color);
-            }
-
-            input[type="radio"].checked {
-                border-color: themeColor($color);
-            }
-        }
-    }
-}
-
-
-input[type="radio"] {
-    -webkit-appearance: none;
-    appearance: none;
-    background-color: #ffffff;
-    margin: 0;
-    font: inherit;
-    color: rgba(0, 0, 0, .6);
-    width: 18px;
-    height: 18px;
-    border: 1.5px solid rgba(0, 0, 0, .6);
-    border-radius: 50%;
-    transform: translate(-12px);
-    display: grid;
-    place-content: center;
-    cursor: pointer;
-}
-
-input[type="radio"]::before {
-    content: "";
-    width: 10px;
-    height: 10px;
-    border-radius: 50%;
-    transform: scale(0);
-    transition: 120ms transform ease-in-out;
-    background-color: CanvasText;
-}
-
-input[type="radio"].checked::before {
-    transform: scale(1);
-}
-
-input[type="radio"]:focus {
-    outline: none;
-    outline-offset: none;
-}
-
-input[type='radio']:hover {
-    box-shadow: 0px 0px 0px 8px rgba(0, 0, 0, 0.1);
-    background-color: rgba(0, 0, 0, 0.1);
-    border-radius: 50%;
-    opacity: 1;
-}
-
-input[type='radio']:active {
-    animation: pulse 0.2s 1 ease-out;
-}
-
-@keyframes pulse {
-    from {
-        box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.2), 0 0 0 0 rgba(0, 0, 0, 0.2);
-    }
-
-    to {
-        box-shadow: 0 0 0 8px rgba(0, 0, 0, 0.2), 0 0 0 8px rgba(0, 0, 0, 0.2);
-    }
-}