@farm-investimentos/front-mfe-components 13.0.1 → 13.0.3

package/package.json

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

package/src/components/RangeDatePicker/RangeDatePicker.vue

@@ -23,7 +23,7 @@
 				Fechar
 			</farm-btn>
 			<farm-btn outlined class="btn-clean" @click="clear"> Limpar </farm-btn>
-			<farm-btn class="ml-2" title="Confirmar" :disabled="!dateField.length" @click="save()">
+			<farm-btn class="ml-2" title="Confirmar" :disabled="dateField.length != 2" @click="save()">
 				Confirmar
 			</farm-btn>
 		</v-date-picker>

package/src/components/Select/Select.stories.js

@@ -2,7 +2,7 @@ import { withDesign } from 'storybook-addon-designs';
 import Select from './Select.vue';
 
 export default {
-	title: 'Form/SelectV2',
+	title: 'Form/Select',
 	component: Select,
 	decorators: [withDesign],
 	parameters: {
@@ -10,7 +10,7 @@ export default {
 			description: {
 				component: `Select<br />
 				selector: <em>farm-select</em><br />
-				<span style="color: var(--farm-extra-1-base);">development</span>
+				<span style="color: var(--farm-primary-base);">ready for use</span>
 				`,
 			},
 		},
@@ -250,3 +250,29 @@ export const MultipleInitValue = () => ({
 		</farm-btn>
 	</div>`,
 });
+
+export const ChangeEvennt = () => ({
+	data() {
+		return {
+			v: null,
+			items: [
+				{ value: 0, text: 'value 0' },
+				{ value: 1, text: 'value 1' },
+				{ value: 2, text: 'value 2' },
+				{ value: 3, text: 'value 3' },
+			],
+		};
+	},
+	methods: {
+		onChange(value) {
+			alert('Selected value: ' + value);
+		},
+	},
+	template: `<div style="width: 120px;">
+		<farm-label for="select_id">
+			label
+		</farm-label>
+		<farm-select id="select_id" v-model="v" :items="items" @change="onChange" />
+
+	</div>`,
+});

package/src/components/Select/Select.vue

@@ -160,6 +160,42 @@ export default Vue.extend({
 			type: String,
 			default: '',
 		},
+		/**
+		 * The updated bound model<br />
+		 * _event_
+		 */
+		input: {
+			type: Function,
+			// eslint-disable-next-line
+			default: (value: [String, Number, Array<any>]) => {},
+		},
+		/**
+		 * Emitted when the select is changed by user interaction<br />
+		 * _event_
+		 */
+		change: {
+			type: Function,
+			// eslint-disable-next-line
+			default: (value: [String, Number, Array<any>]) => {}, 
+		},
+		/**
+		 * Emitted when any key is pressed<br />
+		 * _event_
+		 */
+		keyup: {
+			type: Function,
+			// eslint-disable-next-line
+			default: (event: Event) => {},
+		},
+		/**
+		 * Emitted when the select is blurred<br />
+		 * _event_
+		 */
+		blur: {
+			type: Function,
+			// eslint-disable-next-line
+			default: (event: Event) => {},
+		},
 	},
 	setup(props, { emit }) {
 		const { rules, items, itemText, itemValue, disabled, multiple } = toRefs(props);
@@ -193,7 +229,6 @@ export default Vue.extend({
 				validate(newValue);
 				updateSelectedTextValue();
 				emit('input', newValue);
-				emit('change', newValue);
 			}
 		);
 

package/src/components/TextFieldV2/TextFieldV2.scss

@@ -17,11 +17,11 @@
 		margin-bottom: 4px;
 		background-color: white;
 
-		>button {
+		> button {
 			display: flex;
 		}
 
-		&>input {
+		& > input {
 			flex: 1;
 			outline: none;
 			color: var(--farm-text-primary);
@@ -30,12 +30,11 @@
 			max-width: 100%;
 		}
 
-		&--iconed>input {
+		&--iconed > input {
 			max-width: calc(100% - 32px);
 		}
 
 		width: 100%;
-
 	}
 
 	&--disabled {
@@ -59,7 +58,7 @@
 			&--input {
 				border-color: var(--farm-error-base);
 
-				&>input {
+				& > input {
 					color: var(--farm-neutral-darken);
 				}
 
@@ -75,7 +74,7 @@
 	.farm-textfield--input {
 		border-color: var(--farm-primary-base);
 
-		&>input {
+		& > input {
 			color: var(--farm-neutral-darken);
 		}
 
@@ -83,4 +82,8 @@
 			color: var(--farm-primary-base);
 		}
 	}
-}
+}
+
+.farm-textfield--uppercase input {
+	text-transform: uppercase;
+}

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

@@ -233,3 +233,17 @@ export const ToggleVisibility = () => ({
 		<farm-textfield-v2 v-model="v" :type="visible ? 'text' : 'password'"  :icon="visible ? 'eye-off' : 'eye'" @onClickIcon="toggle" />
 	</div>`,
 });
+
+export const Uppercase = () => ({
+	data() {
+		return {
+			v: 'value',
+		};
+	},
+	template: `<div style="width: 480px;">
+		<farm-label for="select_label">
+			label
+		</farm-label>
+		<farm-textfield-v2 id="select_label" v-model="v" uppercase/>
+	</div>`,
+});

package/src/components/TextFieldV2/TextFieldV2.vue

@@ -9,6 +9,7 @@
 			'farm-textfield--error': hasError,
 			'farm-textfield--disabled': disabled,
 			'farm-textfield--hiddendetails': hideDetails,
+			'farm-textfield--uppercase': isUppercase,
 		}"
 		:id="customId"
 	>
@@ -135,12 +136,22 @@ export default Vue.extend({
 			type: String,
 			default: '',
 		},
+
+		/**
+		 * uppercase
+		 * leaves only the text in the input in uppercase does not affect the value of the v-model
+		 */
+		uppercase: {
+			type: Boolean,
+			default: false,
+		},
 	},
 	setup(props, { emit }) {
 		const { rules } = toRefs(props);
 		const innerValue = ref(props.value);
 		const isTouched = ref(false);
 		const isBlured = ref(false);
+		const isUppercase = ref(props.uppercase);
 
 		const { errorBucket, valid, validatable } = validateFormStateBuilder();
 
@@ -215,6 +226,7 @@ export default Vue.extend({
 			customId,
 			isTouched,
 			isBlured,
+			isUppercase,
 			showErrorText,
 			validate,
 			onKeyUp,