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

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@farm-investimentos/front-mfe-components",
-	"version": "11.4.6",
+	"version": "11.5.0",
 	"author": "farm investimentos",
 	"private": false,
 	"main": "./dist/front-mfe-components.common.js",
@@ -49,8 +49,9 @@
 		"sass": "~1.32.0",
 		"sass-loader": "^10.0.0",
 		"storybook-addon-designs": "^6.2.1",
+		"text-mask-addons": "^3.8.0",
 		"typescript": "~4.1.5",
-		"v-mask": "^2.3.0",
+		"v-mask": "2.3.0",
 		"vue-template-compiler": "2.7.10"
 	},
 	"browserslist": [

package/src/components/CopyToClipboard/CopyToClipboard.stories.js

@@ -23,3 +23,10 @@ export const Primary = () => ({
 		<farm-copytoclipboard toCopy="To be copied" />
     </div>`,
 });
+
+export const NoIcon = () => ({
+	components: { 'farm-copytoclipboard': CopyToClipboard },
+	template: `<div style="max-width: 480px; padding-top: 80px; padding-left: 80px;">
+		<farm-copytoclipboard toCopy="To be copied" :isIcon="false" />
+    </div>`,
+});

package/src/components/CopyToClipboard/CopyToClipboard.vue

@@ -2,9 +2,13 @@
 	<farm-tooltip v-model="show">
 		{{ feedbackMessage }}
 		<template v-slot:activator="{}">
-			<farm-btn icon :disabled="disabled" @click="onClick">
+			<farm-btn v-if="isIcon" title="Copiar" icon :disabled="disabled" @click="onClick">
 				<farm-icon size="xs">content-copy</farm-icon>
 			</farm-btn>
+			<farm-btn v-else outlined title="Copiar" :disabled="disabled" @click="onClick">
+				<farm-icon>content-copy</farm-icon>
+				Copiar
+			</farm-btn>
 		</template>
 	</farm-tooltip>
 </template>
@@ -20,12 +24,16 @@ export default Vue.extend({
 		 * Content to be copied to clipboard
 		 */
 		toCopy: { type: String, required: true },
+		/**
+		 * Is button with icon?
+		 */
+		isIcon: { type: Boolean, default: true },
 	},
 	setup(props) {
 		const show = ref(false);
 		const feedbackMessage = ref('');
 		const disabled = ref(false);
-		const { toCopy } = toRefs(props);
+		const { toCopy, isIcon } = toRefs(props);
 
 		const onClick = async () => {
 			disabled.value = true;
@@ -45,6 +53,7 @@ export default Vue.extend({
 
 		return {
 			show,
+			isIcon,
 			feedbackMessage,
 			disabled,
 			onClick,
@@ -52,4 +61,3 @@ export default Vue.extend({
 	},
 });
 </script>
-

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/Switcher/Switcher.scss

@@ -1,17 +1,25 @@
 .farm-switch--selected {
-    background-color: var(--v-secondary-base);
+    background-color: var(--farm-primary-base);
 }
 
 .farm-switch--idle {
-    background-color: var(--v-error-base);
+    background-color: var(--farm-neutral-base);
+}
+
+.farm-switch--disabled-on {
+    background-color: var(--farm-primary-lighten);
+}
+
+.farm-switch--disabled-off {
+    background-color: var(--farm-neutral-lighten);
 }
 
 .farm-switch {
     display: inline-block;
     position: relative;
     cursor: pointer;
-    width: 32px;
-    height: 20px;
+    width: 24px;
+    height: 16px;
     border-radius: 9999px;
 
     &:focus {
@@ -22,10 +30,6 @@
         display: block;
     }
 
-    &--disabled {
-        opacity: 0.6;
-        cursor: default;
-    }
 }
 
 .farm-switch__background {
@@ -40,10 +44,10 @@
 
 .farm-switch__indicator {
     position: absolute;
-    height: 20px;
-    width: 20px;
-    left: -2px;
-    top: -4px;
+    height: 16px;
+    width: 16px;
+    left: -4px;
+    top: -2px;
     background-color: #ffffff;
     border-radius: 9999px;
     box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.16);

package/src/components/Switcher/Switcher.stories.js

@@ -8,7 +8,7 @@ export default {
 export const Primary = () => ({
 	data() {
 		return {
-			selectedValue: false,
+			selectedValue: true,
 		};
 	},
 	template: `<div>
@@ -16,7 +16,29 @@ export const Primary = () => ({
 	</div>`,
 });
 
-export const Disabled = () => ({
+export const OnDisabled = () => ({
+	data() {
+		return {
+			selectedValue: true,
+		};
+	},
+	template: `<div>
+	<farm-switcher v-model="selectedValue" block :disabled="true" />
+	</div>`,
+});
+
+export const Off = () => ({
+	data() {
+		return {
+			selectedValue: false,
+		};
+	},
+	template: `<div>
+	<farm-switcher v-model="selectedValue" block :disabled="false" />
+	</div>`,
+});
+
+export const OffDisabled = () => ({
 	data() {
 		return {
 			selectedValue: false,

package/src/components/Switcher/Switcher.vue

@@ -1,6 +1,6 @@
 <template>
 	<div
-		:class="{ 'farm-switch': true, 'farm-switch--disabled': isDisabled }"
+		:class="{ 'farm-switch': true }"
 		role="checkbox"
 		@click="toggle"
 		@keydown.space.prevent="toggle"
@@ -35,8 +35,10 @@ export default Vue.extend({
 	computed: {
 		backgroundStyles() {
 			return {
-				'farm-switch--selected': this.value,
-				'farm-switch--idle': !this.value,
+				'farm-switch--selected': this.value && !this.isDisabled,
+				'farm-switch--idle': !this.value && !this.isDisabled,
+				'farm-switch--disabled-on': this.value && this.isDisabled,   
+				'farm-switch--disabled-off': !this.value && this.isDisabled,   
 			};
 		},
 		indicatorStyles() {

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,64 @@
+.farm-textfield {
+	height: 64px;
+	&--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-caption {
+		line-height: 12px;
+	}
+}
+
+.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

@@ -1,6 +1,16 @@
 import { withDesign } from 'storybook-addon-designs';
 import TextFieldV2 from './TextFieldV2.vue';
 
+import createNumberMask from 'text-mask-addons/dist/createNumberMask';
+const currencyMask = createNumberMask({
+	prefix: 'R$',
+	allowDecimal: true,
+	includeThousandsSeparator: true,
+	thousandsSeparatorSymbol: '.',
+	decimalSymbol: ',',
+	allowNegative: false,
+});
+
 export default {
 	title: 'Form/TextFieldV2',
 	component: TextFieldV2,
@@ -25,11 +35,175 @@ export default {
 export const Primary = () => ({
 	data() {
 		return {
-			v: 'some text',
+			v: 'input text',
+		};
+	},
+	template: `<div style="width: 480px">
+		<farm-textfield-v2 v-model="v" />
+		v-model: {{ v }}
+	</div>`,
+});
+
+export const Disabled = () => ({
+	data() {
+		return {
+			v: 'input text',
+		};
+	},
+	template: `<div style="width: 480px">
+		<farm-textfield-v2 v-model="v" disabled />
+	</div>`,
+});
+
+export const Readonly = () => ({
+	data() {
+		return {
+			v: 'input text',
+		};
+	},
+	template: `<div style="width: 480px">
+		<farm-textfield-v2 v-model="v" readonly />
+	</div>`,
+});
+
+export const Validate = () => ({
+	data() {
+		return {
+			v1: 'input 1',
+			v2: '',
+			v3: '',
+			v4: '',
+			rules: {
+				required: value => !!value || 'Required field',
+				email: v =>
+					/^\w+([.-]?\w+)*@\w+([.-]?\w+)*(\.\w{2,3})+$/.test(v) || 'Must be an e-mail',
+			},
+		};
+	},
+	template: `<div style="width: 480px">
+		<farm-label required>Required field</farm-label>
+		<farm-textfield-v2 v-model="v1" :rules="[rules.required]" />
+
+		<farm-label>E-mail</farm-label>
+		<farm-textfield-v2 v-model="v2" :rules="[rules.email]" />
+
+		<farm-label required>Required and e-mail</farm-label>
+		<farm-textfield-v2 v-model="v3" :rules="[rules.required, rules.email]" />
+
+		<farm-label required>Required field with hint</farm-label>
+		<farm-textfield-v2 v-model="v4" :rules="[rules.required]" hint="hint text" />
+
+	</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; display: flex;">
+		<farm-textfield-v2 v-model="v" hint="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" />
-		value: {{ v }}
+		<farm-btn @click="onClick">Add 1 to counter and update v-model</farm-btn>
+		<br />counter: {{ counter }}
+		<br />v-model: {{ v }}
+	</div>`,
+});
+
+export const Types = () => ({
+	data() {
+		return {
+			types: ['text', 'password', 'email', 'date', 'search', 'color', 'tel', 'url'],
+		};
+	},
+	template: `<div style="width: 480px">
+		<div v-for="type in types" :key="'input_type_' + type">
+			<farm-label>Type: {{ type }}</farm-label>
+			<farm-textfield-v2 :type="type" />
+		</div>
+	</div>`,
+});
+
+export const Reset = () => ({
+	data() {
+		return {
+			v: 'input text',
+			rules: {
+				required: value => !!value || 'Required field',
+			},
+		};
+	},
+	methods: {
+		reset() {
+			this.$refs.input.reset();
+			this.$refs.inputValidatable.reset();
+		},
+	},
+	template: `<div style="width: 480px">
+
+		<farm-label>Not Required</farm-label>
+		<farm-textfield-v2 v-model="v" ref="input" />
+		
+		<farm-label required>Required</farm-label>
+		<farm-textfield-v2 v-model="v" ref="inputValidatable" :rules="[rules.required]" />
+		
+		<farm-btn @click="reset">reset</farm-btn>
+
+	</div>`,
+});
+
+export const Mask = () => ({
+	data() {
+		return {
+			v: '',
+			v2: '',
+			mask: '###.###.###/##',
+			currencyMask,
+		};
+	},
+	template: `<div style="width: 480px">
+		<farm-label>CPF Mask ({{ mask }})</farm-label>
+		<farm-textfield-v2 v-model="v" :v-mask="mask" />
+		v-model: {{ v }}
+
+		<farm-label>Number Mask (R$ ##.###.###,##)</farm-label>
+		<farm-textfield-v2 v-model="v2" :v-mask="currencyMask" />
+		v-model: {{ v2 }}
+
 	</div>`,
 });