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

package/src/components/Radio/Radio.vue

@@ -0,0 +1,50 @@
+<template>
+	<input
+		:class="{
+			'farm-radio': true,
+			'farm-radio--checked': isChecked,
+		}"
+		type="radio"
+		:checked="isChecked"
+		:value="value"
+		@click="onClick"
+	/>
+</template>
+<script lang="ts">
+import Vue from 'vue';
+
+export default Vue.extend({
+	name: 'farm-radio',
+	model: {
+		prop: 'modelValue',
+	},
+	props: {
+		/**
+		 * v-model binding
+		 */
+		modelValue: { default: '' },
+		/**
+		 * Value to be set to v-model
+		 */
+		value: { type: String, 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);
+		},
+	},
+});
+</script>
+<style lang="scss" scoped>
+@import 'Radio';
+</style>

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

@@ -0,0 +1,17 @@
+import { shallowMount } from '@vue/test-utils';
+
+import Radio from '../Radio.vue';
+
+describe('Radio component', () => {
+	let wrapper;
+
+	beforeEach(() => {
+		wrapper = shallowMount(Radio, {
+			propsData: {},
+		});
+	});
+
+	test('Radio created', () => {
+		expect(wrapper).toBeDefined();
+	});
+});

package/src/components/Radio/index.ts

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

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

@@ -33,7 +33,7 @@ export const Primary = () => ({
 			],
 		};
 	},
-	template: `<div style="width: 480px">
+	template: `<div style="width: 120px">
 		<farm-select v-model="v" :items="items" />
 		v-model: {{ v }}
 	</div>`,
@@ -112,7 +112,6 @@ export const Validate = () => ({
 	</div>`,
 });
 
-
 export const Reset = () => ({
 	data() {
 		return {
@@ -130,7 +129,7 @@ export const Reset = () => ({
 	methods: {
 		click() {
 			this.$refs.select.reset();
-		}
+		},
 	},
 	template: `<div style="width: 480px">
 		<farm-select v-model="v" :items="items" ref="select" :rules="[rules.required]" />
@@ -139,4 +138,21 @@ export const Reset = () => ({
 			reset
 		</farm-btn>
 	</div>`,
-});
+});
+
+export const CustomKeys = () => ({
+	data() {
+		return {
+			v: 1,
+			items: [
+				{ id: 1, label: ' value 1' },
+				{ id: 2, label: ' value 2' },
+				{ id: 3, label: ' value 3' },
+			],
+		};
+	},
+	template: `<div style="width: 480px">
+		<farm-select v-model="v" :items="items" item-text="label" item-value="id" />
+		v-model: {{ v }}
+	</div>`,
+});

package/src/components/Select/Select.vue

@@ -18,7 +18,7 @@
 					clickable
 					hoverColorVariation="lighten"
 					hover-color="primary"
-					:key="'contextmenu_item_' + item.text"
+					:key="'contextmenu_item_' + item[itemText]"
 					:class="{ 'farm-listitem--selected': item[itemValue] === innerValue }"
 					@click="selectItem(item)"
 				>
@@ -26,7 +26,7 @@
 				</farm-listitem>
 			</farm-list>
 			<template v-slot:activator="{}">
-				<div class="farm-textfield--input">
+				<div class="farm-textfield--input farm-textfield--input--iconed">
 					<input
 						v-model="selectedText"
 						:disabled="disabled"
@@ -165,6 +165,7 @@ export default Vue.extend({
 
 		onBeforeMount(() => {
 			validate(innerValue.value);
+
 			const selectedItem = items.value.find(
 				item => item[itemValue.value] === innerValue.value
 			);

package/src/components/TextFieldV2/TextFieldV2.scss

@@ -22,6 +22,11 @@
 			color: var(--farm-text-primary);
 			font-size: 12px;
 			font-weight: 400;
+			max-width: 100%;
+		}
+
+		&--iconed>input {
+			max-width: calc(100% - 32px);
 		}
 
 		width: 100%;

package/src/components/TextFieldV2/TextFieldV2.vue

@@ -10,7 +10,10 @@
 			'farm-textfield--disabled': disabled,
 		}"
 	>
-		<div class="farm-textfield--input">
+		<div :class="{
+			'farm-textfield--input': true,
+			'farm-textfield--input--iconed': icon
+		}">
 			<button
 				type="button"
 				v-if="icon && iconPosition === 'left'"

package/src/main.ts

@@ -82,6 +82,7 @@ export * from './components/Logger/LoggerItem';
 export * from './components/Icon';
 export * from './components/Modal';
 export * from './components/ProgressBar';
+export * from './components/Radio';
 export * from './components/RadioGroup';
 export * from './components/Select';
 export * from './components/Stepper';