@farm-investimentos/front-mfe-components 11.6.1 → 11.7.0

package/src/components/ResourceMetaInfo/index.ts

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

package/src/components/Tabs/Tabs.stories.js

@@ -3,6 +3,17 @@ import Tabs from './Tabs.vue';
 export default {
     title: 'Display/Tabs',
     component: Tabs,
+    parameters: {
+		docs: {
+			description: {
+				component: `Tabs<br />
+				selector: <em>farm-tabs</em><br />
+				<span style="color: var(--farm-primary-base);">ready for use</span>
+				`,
+			},
+		},
+		viewMode: 'docs',
+	},
 };
 
 export const Primary = () => ({

package/src/components/TextFieldV2/TextFieldV2.scss

@@ -9,7 +9,7 @@
 		height: 36px;
 		border-radius: 5px;
 		padding: 8px;
-		margin-bottom: 8px;
+		margin-bottom: 4px;
 
 		> button {
 			display: flex;

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

@@ -20,7 +20,7 @@ export default {
 			description: {
 				component: `Text field v2<br />
 				selector: <em>farm-texfield-v2</em><br />
-				<span style="color: var(--farm-extra-1-base);">development</span>
+				<span style="color: var(--farm-primary-base);">ready for use</span>
 				`,
 			},
 		},
@@ -229,3 +229,27 @@ export const ToggleVisibility = () => ({
 		<farm-textfield-v2 v-model="v" :type="visible ? 'text' : 'password'"  :icon="visible ? 'eye-off' : 'eye'" @onClickIcon="toggle" />
 	</div>`,
 });
+
+
+export const Compare = () => ({
+	data() {
+		return {
+			v1: '',
+			rules: {
+				required: value => !!value || 'Required field',
+				email: v =>
+					!v ||
+					/^\w+([.-]?\w+)*@\w+([.-]?\w+)*(\.\w{2,3})+$/.test(v) ||
+					'Must be an e-mail',
+			},
+		};
+	},
+	template: `<div style="width: 480px">
+
+		<farm-label required>Required and e-mail</farm-label>
+		<farm-textfield-v2 v-model="v1" :rules="[rules.required, rules.email]" />
+
+		<farm-textfield v-model="v1" :rules="[rules.required, rules.email]" />
+
+	</div>`,
+});

package/src/components/TextFieldV2/TextFieldV2.vue

@@ -156,12 +156,14 @@ export default Vue.extend({
 
 		let validate = validateFormMethodBuilder(errorBucket, valid, fieldValidator);
 
-		const onKeyUp = () => {
+		const onKeyUp = (event: Event) => {
 			isTouched.value = true;
+			emit('keyup', event);
 		};
 
-		const onBlur = () => {
+		const onBlur = (event: Event) => {
 			isBlured.value = true;
+			emit('blur', event);
 		};
 
 		const reset = () => {

package/src/components/Tooltip/Tooltip.vue

@@ -21,6 +21,7 @@
 </template>
 <script lang="ts">
 import Vue, { PropType, ref, computed, reactive, onBeforeUnmount } from 'vue';
+import { calculateMainZindex } from '../../helpers';
 
 export default Vue.extend({
 	name: 'farm-tooltip',
@@ -60,6 +61,7 @@ export default Vue.extend({
 		const styles = reactive({
 			left: '0',
 			top: '0',
+			zIndex: 1,
 		});
 
 		const toggleComponent = computed(() => props.value);
@@ -86,7 +88,8 @@ export default Vue.extend({
 					window.scrollY -
 					(popupBoundingClientRect.height + 8) +
 					'px';
-				
+				styles.zIndex = calculateMainZindex();
+
 				hasBeenBoostrapped = true;
 			}
 		};

package/src/components/Typography/BodyText/BodyText.stories.js

@@ -7,7 +7,8 @@ export default {
 		docs: {
 			description: {
 				component: `BodyText<br />
-				selector: <em>farm-bodytext</em>
+				selector: <em>farm-bodytext</em><br />
+				<span style="color: var(--farm-primary-base);">ready for use</span>
 				`,
 			},
 		},
@@ -37,7 +38,6 @@ export const Primary = () => ({
 });
 
 export const CustomTag = () => ({
-	components: { 'farm-bodytext': BodyText },
 	data() {
 		return {
 			tags: ['p', 'span', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'legend', 'label', 'li'],

package/src/components/Typography/Caption/Caption.stories.js

@@ -7,7 +7,8 @@ export default {
 		docs: {
 			description: {
 				component: `Caption<br />
-				selector: <em>farm-caption</em>
+				selector: <em>farm-caption</em><br />
+				<span style="color: var(--farm-primary-base);">ready for use</span>
 				`,
 			},
 		},

package/src/components/Typography/Heading/Heading.stories.js

@@ -7,7 +7,8 @@ export default {
 		docs: {
 			description: {
 				component: `Heading<br />
-				selector: <em>farm-heading</em>
+				selector: <em>farm-heading</em><br />
+				<span style="color: var(--farm-primary-base);">ready for use</span>
 				`,
 			},
 		},

package/src/components/Typography/OverlayText/OverlayText.stories.js

@@ -7,7 +7,8 @@ export default {
 		docs: {
 			description: {
 				component: `OverlayText<br />
-				selector: <em>farm-overlaytext</em>
+				selector: <em>farm-overlaytext</em><br />
+				<span style="color: var(--farm-primary-base);">ready for use</span>
 				`,
 			},
 		},

package/src/components/Typography/Subtitle/Subtitle.stories.js

@@ -7,7 +7,8 @@ export default {
 		docs: {
 			description: {
 				component: `Subtitle<br />
-				selector: <em>farm-subtitle</em>
+				selector: <em>farm-subtitle</em><br />
+				<span style="color: var(--farm-primary-base);">ready for use</span>
 				`,
 			},
 		},
@@ -16,7 +17,6 @@ export default {
 };
 
 export const Primary = () => ({
-	components: { 'farm-subtitle': Subtitle },
 	data() {
 		return {
 			types: [1, 2],
@@ -37,7 +37,6 @@ export const Primary = () => ({
 });
 
 export const CustomTag = () => ({
-	components: { 'farm-subtitle': Subtitle },
 	data() {
 		return {
 			tags: ['p', 'span', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'legend', 'label', 'li'],

package/src/main.ts

@@ -23,6 +23,7 @@ import CardContext from './components/CardContext';
 import DefaultButton from './components/Buttons/DefaultButton';
 import Collapsible from './components/Collapsible';
 import IdCaption from './components/IdCaption';
+import ResourceMetaInfo from './components/ResourceMetaInfo';
 
 export {
 	DataTableEmptyWrapper,
@@ -47,6 +48,7 @@ export {
 	CardContext,
 	Collapsible,
 	IdCaption,
+	ResourceMetaInfo,
 };
 
 export * from './components/AlertBox';
@@ -94,4 +96,3 @@ export * from './components/layout/Container';
 export * from './components/layout/ContainerFooter';
 export * from './components/layout/Row';
 export * from './components/layout/Line';
-