@farm-investimentos/front-mfe-components 9.3.0 → 9.3.2

package/package.json

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

package/src/components/Checkbox/Checkbox.scss

@@ -1,3 +1,5 @@
+@import '../../configurations/theme-colors';
+
 .farm-checkbox__container {
     display: flex;
     flex-direction: row;
@@ -5,6 +7,29 @@
     .farm-label {
         margin-left: 8px;
     }
+
+    @each $color in $theme-colors-list {
+        &#{'[color=' + $color + ']'} {
+            .farm-checkbox--checked {
+                background-color: themeColor($color);
+                border-color: themeColor($color);
+
+                &.farm-checkbox--lighten {
+                    background-color: themeColor($color, 'lighten');
+                    border-color: themeColor($color, 'lighten');
+
+                    .farm-icon {
+                        color: themeColor($color, 'darken');
+                    }
+                }
+
+                &.farm-checkbox--darken {
+                    background-color: themeColor($color, 'darken');
+                    border-color: themeColor($color, 'darken');
+                }
+            }
+        }
+    }
 }
 
 .farm-checkbox {
@@ -18,11 +43,6 @@
     line-height: 0;
     transition: all 0.4s;
 
-    &--checked {
-        background-color: var(--v-secondary-base);
-        border-color: var(--v-secondary-base);
-    }
-
     &--disabled {
         border-color: #dadada;
         cursor: default;
@@ -35,4 +55,5 @@
     .farm-icon {
         color: white;
     }
+
 }

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

@@ -1,4 +1,8 @@
 import Checkbox from './Checkbox';
+import baseThemeColors from '../../configurations/_theme-colors-base.scss';
+
+const colors = Object.keys(baseThemeColors);
+const variations = ['', 'darken', 'lighten'];
 
 export default {
 	title: 'Form/Checkbox',
@@ -60,3 +64,30 @@ export const Disabled = () => ({
 		<farm-checkbox v-model="notIsChecked" :disabled="true" />
 	</div>`,
 });
+
+export const Colors = () => ({
+	data() {
+		return {
+			isChecked: true,
+			colors,
+			variations,
+		};
+	},
+	template: `<div style="display: flex; flex-direction: row; flex-wrap: wrap;">
+	<div v-for="color in colors" style="width: 33.3%;">
+		<h4>{{ color }}</h4>
+		<div
+			style="display: flex; flex-direction: column;"
+			v-for="variation in variations"
+			:key="color + '_' + variation"
+		>
+			<farm-checkbox
+				v-model="isChecked"
+				:color="color"
+				:variation="variation"
+				:label="variation || 'Base'"			
+			/>
+			</div>
+		</div>
+	</div>`,
+});

package/src/components/Checkbox/Checkbox.vue

@@ -1,7 +1,13 @@
 <template>
-	<div class="farm-checkbox__container">
+	<div class="farm-checkbox__container" :color="$props.color">
 		<span
-			:class="{ 'farm-checkbox': true, 'farm-checkbox--checked': innerValue, 'farm-checkbox--disabled': disabled }"
+			:class="{
+				'farm-checkbox': true,
+				'farm-checkbox--checked': innerValue,
+				'farm-checkbox--disabled': disabled,
+				'farm-checkbox--lighten': variation === 'lighten',
+				'farm-checkbox--darken': variation === 'darken',
+			}"
 			@click="toggleValue"
 		>
 			<farm-icon size="sm" v-if="innerValue">check</farm-icon>
@@ -12,7 +18,7 @@
 	</div>
 </template>
 <script lang="ts">
-import Vue, { ref, toRefs } from 'vue';
+import Vue, { ref, toRefs, watch } from 'vue';
 
 export default Vue.extend({
 	name: 'farm-checkbox',
@@ -29,19 +35,34 @@ export default Vue.extend({
 		 * disabled
 		 */
 		disabled: { type: Boolean, default: false },
+		variation: {
+			type: String,
+			default: '',
+		},
+		color: {
+			type: String,
+			default: 'primary',
+		},
 	},
 	setup(props, { emit }) {
 		const innerValue = ref(props.value);
 		const { label, disabled } = toRefs(props);
 
 		const toggleValue = () => {
-			if(disabled.value) {
+			if (disabled.value) {
 				return false;
 			}
 			innerValue.value = !innerValue.value;
 			emit('input', innerValue.value);
 		};
 
+		watch(
+			() => props.value,
+			() => {
+				innerValue.value = props.value;
+			}
+		);
+
 		return {
 			innerValue,
 			label,

package/src/components/Chip/Chip.scss

@@ -13,7 +13,7 @@
     align-items: center;
     color: white;
     width: 100%;
-    border:1px solid themeColor('primary');
+    border: 1px solid themeColor('primary');
     font-size: 12px;
     font-weight: 500;
 
@@ -30,7 +30,7 @@
         &#{'[color=' + $color + ']'} {
             background-color: themeColor($color);
             border-color: themeColor($color);
-            
+
             &.farm-chip--lighten {
                 background-color: themeColor($color, 'lighten');
                 border-color: themeColor($color, 'lighten');
@@ -44,18 +44,35 @@
         }
     }
 
+    &[color='neutral'] {
+        color: themeColor('secondary');
+
+        &.farm-chip--lighten {
+            color: themeColor('secondary');
+        }
+        &.farm-chip--darken {
+            color: white;
+        }
+    }
+
+    &[color='secondary'] {
+        &.farm-chip--lighten {
+            color: white;
+        }
+    }
+
     &--outlined {
         @each $color in $theme-colors-list {
             &#{'[color=' + $color + ']'} {
                 background-color: transparent;
                 color: themeColor($color);
-    
+
                 &.farm-chip--lighten {
                     background-color: transparent;
                     border-color: themeColor($color, 'lighten');
                     color: themeColor($color);
                 }
-    
+
                 &.farm-chip--darken {
                     background-color: transparent;
                     border-color: themeColor($color, 'darken');
@@ -63,5 +80,13 @@
                 }
             }
         }
+
+        &[color='neutral'] {
+            color: themeColor('secondary');
+
+            &.farm-chip--lighten {
+                color: themeColor('secondary');
+            }
+        }
     }
 }

package/src/components/Chip/Chip.stories.js

@@ -2,8 +2,6 @@ import Chip from './Chip.vue';
 import baseThemeColors from '../../configurations/_theme-colors-base.scss';
 import('./Chip.stories.scss');
 
-console.log(baseThemeColors);
-
 const colors = Object.keys(baseThemeColors);
 const variations = ['', 'darken', 'lighten'];
 

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

@@ -0,0 +1,134 @@
+import Form from './Form.vue';
+
+export default {
+	title: 'Form/Form',
+	component: Form,
+	parameters: {
+		docs: {
+			description: {
+				component: `Form<br />
+				selector: <em>farm-form</em>
+				`,
+			},
+		},
+		viewMode: 'docs',
+	},
+};
+
+const styles = {
+	vForm: {
+		maxWidth: '480px',
+	},
+	footer: {
+		display: 'flex',
+		justifyContent: 'end',
+	},
+};
+
+export const Primary = () => ({
+	data() {
+		return {
+			form: {
+				document: 'Document',
+				name: 'Name',
+			},
+			validForm: false,
+			rules: {
+				required: value => !!value || 'Campo obrigatório',
+			},
+			styles,
+		};
+	},
+	template: `
+        <farm-form v-model="validForm" :style="[styles.vForm]" ref="form">
+            <section>
+				<div>
+					<farm-label :required="true">Documento</farm-label>
+					<farm-textfield 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]" />
+				</div>
+			</section>
+            <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 Secondary = () => ({
+	data() {
+		return {
+			form: {
+				document: 'Document',
+				not: 'Not required field',
+			},
+			validForm: false,
+			rules: {
+				required: value => !!value || 'Campo obrigatório',
+			},
+			styles,
+		};
+	},
+	template: `
+        <farm-form v-model="validForm" :style="[styles.vForm]" ref="form">
+            <section>
+				<div>
+					<farm-label :required="true">Documento</farm-label>
+					<farm-textfield v-model="form.document" :rules="[rules.required]" />
+				</div>
+			</section>
+			<section>
+				<div>
+					<farm-label>not</farm-label>
+					<farm-textfield v-model="form.not" />
+				</div>
+			</section>
+            <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 InitInvalid = () => ({
+	data() {
+		return {
+			form: {
+				document: '',
+				name: '',
+			},
+			validForm: false,
+			rules: {
+				required: value => !!value || 'Campo obrigatório',
+			},
+			styles,
+		};
+	},
+	template: `
+        <farm-form v-model="validForm" :style="[styles.vForm]" ref="form">
+            <section>
+				<div>
+					<farm-label :required="true">Documento</farm-label>
+					<farm-textfield 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]" />
+				</div>
+			</section>
+            <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/Form/Form.vue

@@ -0,0 +1,67 @@
+<template>
+	<form class="farm-form"><slot></slot></form>
+</template>
+<script lang="ts">
+import Vue, { onMounted, reactive, ref, getCurrentInstance } from 'vue';
+
+type ErrorsBag = Record<number, boolean>;
+
+export default Vue.extend({
+	name: 'farm-form',
+	props: {
+		value: { type: [Array, Boolean], required: true },
+	},
+	inheritAttrs: true,
+	setup(props, { emit }) {
+		const innerValue = ref(props.value);
+		const errorsBag = reactive({} as ErrorsBag);
+		let validationFields = [];
+
+		const dispatchError = () => {
+			const keys = Object.keys(errorsBag);
+			const errorsIds = keys.filter(key => !errorsBag[key]);
+			emit('input', errorsIds.length === 0);
+		};
+
+		const watchInput = (field: any) => {
+			field.$watch(
+				'hasError',
+				() => {
+					errorsBag[field._uid] = field.valid;
+					dispatchError();
+				},
+				{ immediate: true }
+			);
+		};
+
+		const reset = () => {
+			validationFields.forEach(field => {
+				field.reset();
+			});
+		};
+
+		const recursiveFormField = $node => {
+			$node.$children.forEach($leaf => {
+				if ($leaf.$children.length > 1) {
+					recursiveFormField($leaf);
+				} else if ($leaf.$children[0] && $leaf.$children[0].validate) {
+					validationFields.push($leaf.$children[0]);
+				}
+			});
+		};
+
+		onMounted(() => {
+			recursiveFormField(getCurrentInstance().proxy);
+			validationFields.forEach(field => {
+				watchInput(field);
+			});
+		});
+
+		return {
+			innerValue,
+			errorsBag,
+			reset,
+		};
+	},
+});
+</script>

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

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

package/src/components/Form/index.ts

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

package/src/components/Modal/Modal.stories.js

@@ -131,30 +131,6 @@ export const HeaderAndBottom = () => ({
 	</div>`,
 });
 
-export const Persistent = () => ({
-	data() {
-		return {
-			value: false,
-			text,
-		};
-	},
-	template: `<div>
-	<farm-btn color="secondary" @click="value = true">abrir</farm-btn>
-	<farm-modal v-model="value" :offsetTop="48" :offsetBottom="68" :persistent="true">
-		<template v-slot:header>
-			<farm-dialog-header title="Título" @onClose="() => value = false" />
-		</template>
-		<template v-slot:content>
-		<br />persistent modal<br />
-		</template>
-		
-		<template v-slot:footer>
-			<farm-dialog-footer @onConfirm="() => value = false" @onClose="() => value = false" />
-		</template>
-	</farm-modal>
-	</div>`,
-});
-
 export const HorizontalScroll = () => ({
 	data() {
 		return {
@@ -202,7 +178,6 @@ export const CustomHeader = () => ({
 	</div>`,
 });
 
-<<<<<<< HEAD
 export const Persistent = () => ({
 	data() {
 		return {
@@ -227,8 +202,6 @@ export const Persistent = () => ({
 	</div>`,
 });
 
-=======
->>>>>>> develop
 const text = `inicio!<br />
 teste!<br />
 teste!<br />

package/src/components/RadioGroup/IRadioGroup.ts

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

package/src/components/RadioGroup/RadioGroup.scss

@@ -0,0 +1,82 @@
+.farm-radio-group {
+    border: none;
+    cursor: default;
+    display: flex;
+    width: 100%;
+    &__item {
+        font-size: 16px;
+        line-height: 1.1;
+        cursor: pointer;
+        display: grid;
+        grid-template-columns: 16px auto;
+        gap: 8px;
+        color: rgba(0,0,0,.6);
+        margin-top: 16px;
+        margin-right: 16px;
+    }
+}
+
+.farm-radio-group--column {
+    flex-direction: column;
+}
+
+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;
+    box-shadow: inset 16px 16px var(--radio-group-color);
+    background-color: CanvasText;
+}
+
+input[type="radio"]:checked::before {
+    transform: scale(1);
+}
+
+input[type="radio"]:focus {
+    outline: none;
+    outline-offset: none;
+}
+
+input[type="radio"]:checked {
+    border: 1.5px solid var(--radio-group-color);
+}
+
+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);
+    }
+}

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

@@ -0,0 +1,34 @@
+import RadioGroup from './RadioGroup';
+
+export default {
+	title: 'Form/RadioGroup',
+	component: RadioGroup,
+	parameters: {
+		docs: {
+			description: {
+				component: `RadioGroup<br />
+				selector: <em>farm-radio-group</em>
+				`,
+			},
+		},
+		viewMode: 'docs',
+	},
+};
+
+export const Primary = () => ({
+	data() {
+		return {
+			buttons: [
+                { label: 'Button 1', id: 1 }, 
+                { label: 'Button 2', id: 2 }, 
+                { label: 'Button 3', id: 3 }
+            ],
+			checkedValue: 1
+		};
+	},
+	template: `<div>
+	    <farm-radio-group v-model="checkedValue" column :buttons="buttons" />
+	</div>`,
+});
+
+Primary.storyName = 'Basic';