@farm-investimentos/front-mfe-components 11.4.6 → 11.4.7

package/package.json

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

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

@@ -33,13 +33,19 @@ export const Primary = () => ({
 				document: 'Document',
 				name: 'Name',
 				checkbox: true,
-				birthDate: new Date('1980/09/20').toISOString()
+				birthDate: new Date('1980/09/20').toISOString(),
+				selectId: 1,
 			},
 			validForm: false,
 			rules: {
 				required: value => !!value || 'Campo obrigatório',
 				checked: value => !!value || 'Deve estar marcado',
 			},
+			items: [
+				{ value: null, text: '' },
+				{ value: 1, text: 'label 1' },
+				{ value: 2, text: 'label 2' },
+			],
 			styles,
 		};
 	},
@@ -55,6 +61,9 @@ export const Primary = () => ({
 			<farm-label :required="true">True/false</farm-label>
 			<farm-checkbox v-model="form.checkbox" :rules="[rules.checked]" />
 
+			<farm-label :required="true">Select</farm-label>
+			<v-select :rules="[rules.required]" :items="items" v-model="form.selectId"/>
+
 			<farm-label :required="true">Birthdate:</farm-label>
 			<DatePicker
 				ref="birthDate"
@@ -87,6 +96,11 @@ export const Secondary = () => ({
 				required: value => !!value || 'Campo obrigatório',
 			},
 			styles,
+			items: [
+				{ value: null, text: '' },
+				{ value: 1, text: 'label 1' },
+				{ value: 2, text: 'label 2' },
+			],
 		};
 	},
 	template: `
@@ -220,4 +234,4 @@ export const DatePickers = () => ({
             </div>
         </farm-form>
     `,
-});
+});

package/src/components/Form/Form.vue

@@ -9,7 +9,7 @@ type ErrorsBag = Record<number, boolean>;
 export default Vue.extend({
 	name: 'farm-form',
 	props: {
-		value: { type: [Boolean], required: true },
+		value: { type: [Boolean] },
 	},
 	inheritAttrs: true,
 	setup(props, { emit }) {
@@ -42,7 +42,9 @@ export default Vue.extend({
 
 		const recursiveFormField = $node => {
 			$node.$children.forEach($leaf => {
-				if ($leaf.$children.length > 1) {
+				if($leaf.validate) {
+					validationFields.push($leaf);
+				} else if ($leaf.$children.length > 1) {
 					recursiveFormField($leaf);
 				} else if ($leaf.$children[0] && $leaf.$children[0].validate) {
 					validationFields.push($leaf.$children[0]);

package/src/components/IdCaption/IdCaption.vue

@@ -55,7 +55,7 @@ export default Vue.extend({
 			default: 'primary',
 		},
 		/**
-		 * copy to clipboard
+		 * Text to be copied to clipboard
 		 */
 		copyText: {
 			type: String,

package/src/components/RadioGroup/RadioGroup.vue

@@ -52,9 +52,21 @@ export default Vue.extend({
 			default: false,
 		},
 		color: {
-			type: String,
+			type: String as PropType<
+				| 'primary'
+				| 'secondary'
+				| 'neutral'
+				| 'info'
+				| 'success'
+				| 'error'
+				| 'warning'
+				| 'success'
+				| 'extra-1'
+				| 'extra-2'
+				| 'gray'
+			>,
 			default: 'primary',
-		},
+		}
 	},
 	setup(props, { emit }) {
 		const innerValue = ref(props.value);

package/src/components/TableContextMenu/TableContextMenu.vue

@@ -40,6 +40,9 @@ export default Vue.extend({
 	name: 'farm-context-menu',
 	components: {},
 	props: {
+		/**
+		 * Items to populate the context menu
+		 */
 		items: {
 			type: Array as PropType<Array<IContextMenuOption>>,
 			required: true,
@@ -54,7 +57,6 @@ export default Vue.extend({
 		onClick(handler) {
 			if (handler !== undefined) {
 				this.$emit(handler);
-				// handler();
 			}
 		},
 		toggleValue() {

package/src/components/TextFieldV2/TextFieldV2.scss

@@ -0,0 +1,59 @@
+.farm-textfield {
+	&--input {
+		display: flex;
+		align-items: center;
+		gap: 8px;
+		border: 1px solid;
+		border-color: var(--farm-gray-lighten);
+		height: 36px;
+		border-radius: 5px;
+		padding: 8px;
+		margin-bottom: 8px;
+
+		> button {
+			display: flex;
+		}
+
+		&>input {
+			flex: 1;
+			outline: none;
+			color: var(--farm-neutral-darken);
+			font-size: 12px;
+			font-weight: 400;
+		}
+
+		width: 100%;
+	}
+}
+
+.farm-textfield--touched.farm-textfield--validatable {
+	&.farm-textfield--error {
+		.farm-textfield {
+			&--input {
+				border-color: var(--farm-error-base);
+
+				&>input {
+					color: var(--farm-neutral-darken);
+				}
+
+				.farm-icon {
+					color: var(--farm-error-base);
+				}
+			}
+		}
+	}
+}
+
+.farm-textfield--blured.farm-textfield--validatable:not(.farm-textfield--error) {
+	.farm-textfield--input {
+		border-color: var(--farm-primary-base);
+
+		&>input {
+			color: var(--farm-neutral-darken);
+		}
+
+		.farm-icon {
+			color: var(--farm-primary-base);
+		}
+	}
+}

package/src/components/TextFieldV2/TextFieldV2.stories.js

@@ -25,11 +25,75 @@ export default {
 export const Primary = () => ({
 	data() {
 		return {
-			v: 'some text',
+			v: 'input text',
 		};
 	},
 	template: `<div style="width: 480px">
 		<farm-textfield-v2 v-model="v" />
-		value: {{ v }}
+		v-model: {{ v }}
+	</div>`,
+});
+
+export const Validate = () => ({
+	data() {
+		return {
+			v: 'input',
+			rules: {
+				required: value => !!value || 'Campo obrigatório',
+			},
+		};
+	},
+	template: `<div style="width: 480px">
+		<farm-label required>Required field</farm-label>
+		<farm-textfield-v2 v-model="v" :rules="[rules.required]" />
+	</div>`,
+});
+
+export const Icon = () => ({
+	data() {
+		return {
+			v: '',
+		};
+	},
+	methods: {
+		show() {
+			alert('On icon click');
+		},
+	},
+	template: `<div style="width: 480px">
+		<farm-textfield-v2 v-model="v" icon="eye" onClickIcon="this.show" />
+		<farm-textfield-v2 v-model="v" icon="eye" icon-position="left" onClickIcon="this.show" />
+	</div>`,
+});
+
+export const HintText = () => ({
+	data() {
+		return {
+			v: 'input text',
+		};
+	},
+	template: `<div style="width: 480px">
+		<farm-textfield-v2 v-model="v" hintText="Hint text" />
+	</div>`,
+});
+
+export const UpdateValue = () => ({
+	data() {
+		return {
+			counter: 1,
+			v: '1',
+		};
+	},
+	methods: {
+		onClick() {
+			this.counter++;
+			this.v = this.counter;
+		},
+	},
+	template: `<div style="width: 480px">
+		<farm-textfield-v2 v-model="v" />
+		<farm-btn @click="onClick">Add 1 to counter and update v-model</farm-btn>
+		<br />counter: {{ counter }}
+		<br />v-model: {{ v }}
 	</div>`,
 });

package/src/components/TextFieldV2/TextFieldV2.vue

@@ -1,13 +1,47 @@
 <template>
-	<div class="farm-textfield">
+	<div
+		class="farm-textfield"
+		:class="{
+			'farm-textfield': true,
+			'farm-textfield--validatable': rules.length > 0,
+			'farm-textfield--touched': isTouched,
+			'farm-textfield--blured': isBlured,
+			'farm-textfield--error': hasError,
+		}"
+	>
 		<div class="farm-textfield--input">
-			<input v-bind="$attrs" v-model="innerValue" />
+			<button v-if="icon && iconPosition === 'left'" @click="$emit('onClickIcon')">
+				<farm-icon color="gray" size="20px">{{ icon }}</farm-icon>
+			</button>
+
+			<input
+				v-bind="$attrs"
+				v-model="innerValue"
+				:disabled="disabled"
+				@keyup="onKeyUp"
+				@blur="onBlur"
+			/>
+
+			<button v-if="icon && iconPosition === 'right'" @click="$emit('onClickIcon')">
+				<farm-icon color="gray" size="20px">{{ icon }}</farm-icon>
+			</button>
 		</div>
-		<span class="farm-textfield--text"> hint text</span>
+
+		<farm-caption v-if="hasError && isTouched" color="error" variation="regular">
+			{{ errorBucket[0] }}
+		</farm-caption>
+		<farm-caption v-if="hintText && !errorMessage" color="gray" variation="regular">
+			{{ hintText }}
+		</farm-caption>
 	</div>
 </template>
+
 <script lang="ts">
-import Vue, { ref, watch } from 'vue';
+import Vue, { computed, onBeforeMount, PropType, ref, toRefs, watch } from 'vue';
+import validateFormStateBuilder from '../../composition/validateFormStateBuilder';
+import validateFormFieldBuilder from '../../composition/validateFormFieldBuilder';
+import validateFormMethodBuilder from '../../composition/validateFormMethodBuilder';
+import deepEqual from '../../composition/deepEqual';
 
 export default Vue.extend({
 	name: 'farm-textfield-v2',
@@ -16,15 +50,61 @@ export default Vue.extend({
 		/**
 		 * v-model binding
 		 */
-		value: {},
+		value: { type: [String, Number], default: '' },
+		/**
+		 * Show icon?
+		 */
+		icon: {
+			type: String,
+			default: null,
+		},
+		/**
+		 * Icon position
+		 */
+		iconPosition: { type: String as PropType<'left' | 'right'>, default: 'right' },
+		/**
+		 * Show hint text
+		 */
+		hintText: {
+			type: String,
+			default: null,
+		},
+		/**
+		 * Show input disable
+		 */
+		disabled: {
+			type: Boolean,
+			default: false,
+		},
+
+		errorMessage: String,
+		/**
+		 * Array of rules used for validation
+		 */
+		rules: {
+			type: Array as PropType<Array<Function>>,
+			default: () => [],
+		},
 	},
 	setup(props, { emit }) {
+		const { rules } = toRefs(props);
 		const innerValue = ref(props.value);
+		const isTouched = ref(false);
+		const isBlured = ref(false);
+
+		const { errorBucket, valid, validatable } = validateFormStateBuilder();
+
+		let fieldValidator = validateFormFieldBuilder(rules.value);
+
+		const hasError = computed(() => {
+			return errorBucket.value.length > 0;
+		});
 
 		watch(
 			() => props.value,
 			() => {
 				innerValue.value = props.value;
+				validate(innerValue.value);
 			}
 		);
 
@@ -35,8 +115,41 @@ export default Vue.extend({
 			}
 		);
 
+		watch(
+			() => props.rules,
+			(newVal, oldVal) => {
+				if (deepEqual(newVal, oldVal)) return;
+				fieldValidator = validateFormFieldBuilder(rules.value);
+				validate = validateFormMethodBuilder(errorBucket, valid, fieldValidator);
+				validate(innerValue.value);
+			}
+		);
+
+		onBeforeMount(() => {
+			validate(innerValue.value);
+		});
+
+		let validate = validateFormMethodBuilder(errorBucket, valid, fieldValidator);
+
+		const onKeyUp = () => {
+			isTouched.value = true;
+		};
+
+		const onBlur = () => {
+			isBlured.value = true;
+		};
+
 		return {
 			innerValue,
+			errorBucket,
+			valid,
+			validatable,
+			hasError,
+			isTouched,
+			isBlured,
+			validate,
+			onKeyUp,
+			onBlur,
 		};
 	},
 });

package/src/components/Typography/Typography.vue

@@ -23,18 +23,30 @@ export default Vue.extend({
 	inheritAttrs: true,
 	name: 'farm-typography',
 	props: {
+		/**
+		 * Html tag
+		 */
 		tag: {
 			type: String as PropType<
 				'p' | 'span' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'legend' | 'label' | 'li'
 			>,
 			default: 'p',
 		},
+		/**
+		 * Size
+		 */
 		size: {
 			type: String as PropType<'xs' | 'sm' | 'md' | 'lg' | 'xl'>,
 		},
+		/**
+		 * Line Height
+		 */
 		lineHeight: {
 			type: String,
 		},
+		/**
+		 * Font-weight
+		 */
 		weight: {
 			type: Number as PropType<100 | 200 | 300 | 400 | 500 | 600 | 700>,
 		},
@@ -53,6 +65,7 @@ export default Vue.extend({
 				| 'success'
 				| 'extra-1'
 				| 'extra-2'
+				| 'gray'
 			>,
 			default: 'default',
 		},

package/src/components/layout/Col/Col.scss

@@ -6,7 +6,7 @@
     flex-basis: 0;
     flex-grow: 1;
     max-width: 100%;
-    width: 100;
+    width: 100%;
 
     &--no-gutters {
         padding: 0;

package/src/components/layout/Line/Line.vue

@@ -8,6 +8,9 @@ import Vue from 'vue';
 export default Vue.extend({
 	name: 'farm-line',
 	props: {
+		/**
+		 * Remove default margins
+		 */
 		noSpacing: {
 			type: Boolean,
 			default: false,
@@ -17,5 +20,5 @@ export default Vue.extend({
 </script>
 
 <style lang="scss" scoped>
-@import './Line.scss'
+@import './Line'
 </style>

package/src/examples/VuetifyDialog.stories.js

@@ -0,0 +1,119 @@
+import { withDesign } from 'storybook-addon-designs';
+
+export default {
+	title: 'Display/Dialog/Vuetify',
+	decorators: [withDesign],
+	parameters: {
+		viewMode: 'docs',
+		docs: {
+			description: {
+				component: `Dialog created by vuetify-dialog`,
+			},
+		},
+	},
+};
+
+export const Primary = () => ({
+	methods: {
+		openDialog() {
+			this.$dialog.confirm({
+				text: `Deseja realmente sair?`,
+				title: 'Sair',
+				actions: {
+					true: {
+						text: 'Sim',
+						color: 'secondary',
+						handle: () => {
+							alert('Clicked: Sim');
+						},
+					},
+				},
+			});
+		},
+	},
+	template: `<div style="display: flex; flex-direction: column; max-width: 160px; width: 100%;">
+        <farm-btn @click="openDialog">
+            Open
+        </farm-btn>
+	</div>`,
+});
+
+export const Default = () => ({
+	methods: {
+		openDialog() {
+			this.$dialog.confirm({
+				text: `Deseja realmente sair?`,
+				title: 'Sair',
+				actions: {
+					false: {
+						text: 'Cancelar',
+						color: 'secondary-outlined',
+						handle: () => {
+							alert('Clicked: Cancelar');
+						},
+					},
+					true: {
+						text: 'Sim',
+						color: 'secondary',
+						handle: () => {
+							alert('Clicked: Sim');
+						},
+					},
+				},
+			});
+		},
+	},
+	template: `<div style="display: flex; flex-direction: column; max-width: 160px; width: 100%;">
+        <farm-btn @click="openDialog">
+            Open
+        </farm-btn>
+	</div>`,
+});
+
+export const ErrorColor = () => ({
+	methods: {
+		openDialog() {
+			this.$dialog.confirm({
+				text: `Deseja realmente sair?`,
+				title: 'Sair',
+				actions: {
+					true: {
+						text: 'Sair',
+						color: 'error',
+						handle: () => {
+							alert('Clicked: Sair');
+						},
+					},
+				},
+			});
+		},
+	},
+	template: `<div style="display: flex; flex-direction: column; max-width: 160px; width: 100%;">
+        <farm-btn @click="openDialog">
+            Open
+        </farm-btn>
+	</div>`,
+});
+
+
+export const CustomContent = () => ({
+	methods: {
+		openDialog() {
+			this.$dialog.confirm({
+				text: `This is a text with <strong>html markup</strong> and<br />break line!`,
+				title: 'Sair',
+				actions: {
+					true: {
+						text: 'Sim',
+						color: 'secondary',
+					},
+				},
+			});
+		},
+	},
+	template: `<div style="display: flex; flex-direction: column; max-width: 160px; width: 100%;">
+        <farm-btn @click="openDialog">
+            Open
+        </farm-btn>
+	</div>`,
+});

package/src/examples/ConfirmDialog.stories.js

@@ -1,43 +0,0 @@
-import { withDesign } from 'storybook-addon-designs';
-
-export default {
-	title: 'Display/Dialog/Confirm',
-	decorators: [withDesign],
-	parameters: {
-		viewMode: 'docs',
-		docs: {
-			description: {
-				component: `ConfirmDialog created by vuetify-dialog`,
-			},
-		},
-	},
-};
-
-export const ConfirmDialog = () => ({
-	methods: {
-		openDialog() {
-			this.$dialog.confirm({
-				text: `Deseja realmente sair?`,
-				title: 'Sair',
-				actions: {
-					false: {
-						text: 'Cancelar',
-						color: 'primary',
-					},
-					true: {
-						text: 'Sim',
-						color: 'secondary',
-						handle: () => {
-							this.$emit('onLogout');
-						},
-					},
-				},
-			});
-		},
-	},
-	template: `<div style="display: flex; flex-direction: column; max-width: 160px; width: 100%;">
-        <ConfirmButton @click="openDialog">
-            Open
-        </ConfirmButton>
-	</div>`,
-});