@farm-investimentos/front-mfe-components 11.1.0 → 11.2.0

package/src/components/DataTablePaginator/DataTablePaginator.vue

@@ -16,10 +16,20 @@
 			></v-select>
 		</div>
 
-		<ul :class="{ 'farm-paginator': true, 'farm-paginator--disabled': disabled || totalPages == null }">
+		<ul
+			:class="{
+				'farm-paginator': true,
+				'farm-paginator--disabled': disabled || totalPages == null,
+			}"
+		>
 			<li>
-				<button :disabled="currentPage === 1 || disabled || totalPages == null" @click="previousPage">
-					<farm-icon color="gray" size="sm">chevron-left</farm-icon>
+				<button :disabled="canGoBack" @click="firstPage">
+					<farm-icon size="sm">chevron-double-left</farm-icon>
+				</button>
+			</li>
+			<li>
+				<button :disabled="canGoBack" @click="previousPage">
+					<farm-icon size="sm">chevron-left</farm-icon>
 				</button>
 			</li>
 
@@ -32,13 +42,18 @@
 					:disabled="currentPage === item || item === '...' || disabled"
 					@click="currentPage = item"
 				>
-					{{ item }}
+					<farm-bodytext :type="2" variation="regular">{{ item }}</farm-bodytext>
 				</button>
 			</li>
 
 			<li>
-				<button :disabled="currentPage === totalPages || disabled || totalPages == null || totalPages === 0" @click="nextPage">
-					<farm-icon color="gray" size="sm">chevron-right</farm-icon>
+				<button :disabled="canGoForward" @click="nextPage">
+					<farm-icon size="sm">chevron-right</farm-icon>
+				</button>
+			</li>
+			<li>
+				<button :disabled="canGoForward" @click="lastPage">
+					<farm-icon size="sm">chevron-double-right</farm-icon>
 				</button>
 			</li>
 		</ul>
@@ -47,7 +62,6 @@
 <script lang="ts">
 import Vue from 'vue';
 import { VSelect } from 'vuetify/lib/components/VSelect';
-import Icon from '../Icon';
 
 /**
  * Componente de paginação usado em tabelas e listas
@@ -55,6 +69,9 @@ import Icon from '../Icon';
  */
 export default Vue.extend({
 	name: 'farm-datatable-paginator',
+	components: {
+		VSelect,
+	},
 	props: {
 		/**
 		 * Lista de opções para o controle de registros por página
@@ -118,6 +135,12 @@ export default Vue.extend({
 		nextPage() {
 			this.currentPage++;
 		},
+		firstPage() {
+			this.currentPage = 1;
+		},
+		lastPage() {
+			this.currentPage = this.totalPages;
+		},
 	},
 	data() {
 		return {
@@ -161,6 +184,20 @@ export default Vue.extend({
 				return [...this.range(1, left), '...', ...this.range(right, this.totalPages)];
 			}
 		},
+		canGoBack: function () {
+			const goBack = this.currentPage === 1 || this.disabled || this.totalPages == null;
+
+			return goBack;
+		},
+		canGoForward: function () {
+			const goNext =
+				this.currentPage === this.totalPages ||
+				this.disabled ||
+				this.totalPages == null ||
+				this.totalPages === 0;
+
+			return goNext;
+		},
 	},
 	watch: {
 		selectedLimit(newValue) {
@@ -176,10 +213,7 @@ export default Vue.extend({
 			this.selectedLimit = newValue;
 		},
 	},
-	components: {
-		VSelect,
-		'farm-icon': Icon,
-	},
+	
 });
 </script>
 

package/src/components/DatePicker/DatePicker.vue

@@ -143,6 +143,12 @@ export default Vue.extend({
 			this.dateField = newValue;
 			this.fieldRange = this.formatDateRange(newValue);
 		},
+		fieldRange(newValue) {
+			if (!newValue) {
+				this.dateField = '';
+				this.save();
+			}
+		},
 	},
 	methods: {
 		formatDateRange(date) {

package/src/components/DialogHeader/DialogHeader.stories.js

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

package/src/components/DialogHeader/DialogHeader.vue

@@ -7,16 +7,15 @@
 
 		<slot></slot>
 
-		<farm-icon
+		<farm-btn
 			v-if="hasCloseIcon"
-			role="button"
-			title="Fechar"
+			icon
 			class="farm-dialog-header__close"
-			color="secondary"
+			title="Fechar"
 			@click="onClose"
 		>
-			close-thick
-		</farm-icon>
+			<farm-icon role="button"> close-thick </farm-icon>
+		</farm-btn>
 	</header>
 </template>
 <script lang="ts">
@@ -28,21 +27,21 @@ export default Vue.extend({
 	name: 'farm-dialog-header',
 	props: {
 		/**
-		 * Título
+		 * Title
 		 */
 		title: {
 			type: String,
 			default: '',
 		},
 		/**
-		 * Ícone - usa os do material icons
+		 * Icon
 		 */
 		iconTitle: {
 			type: String,
 			default: null,
 		},
 		/**
-		 * Ícone - se possui o ícone de fechar
+		 * Has close icon?
 		 */
 		hasCloseIcon: {
 			type: Boolean,

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

@@ -33,6 +33,7 @@ export const Primary = () => ({
 				document: 'Document',
 				name: 'Name',
 				checkbox: true,
+				birthDate: new Date('1980/09/20').toISOString()
 			},
 			validForm: false,
 			rules: {
@@ -53,6 +54,17 @@ export const Primary = () => ({
 			
 			<farm-label :required="true">True/false</farm-label>
 			<farm-checkbox v-model="form.checkbox" :rules="[rules.checked]" />
+
+			<farm-label :required="true">Birthdate:</farm-label>
+			<DatePicker
+				ref="birthDate"
+				inputId="form-pf-birthDate"
+				class="mt-4"
+				v-model="form.birthDate"
+				:readonly="true"
+				:required="true"
+			/>
+			
 			
             <div class="footer" :style="[styles.footer]">
 				<farm-btn color="secondary" outlined @click="$refs.form.reset()" class="mr-3">Reset</farm-btn>
@@ -169,3 +181,43 @@ export const RadioGroupReset = () => ({
         </farm-form>
     `,
 });
+
+export const DatePickers = () => ({
+	data() {
+		return {
+			birthDate: '',
+			rangeDate: [],
+			validForm: false,
+			styles,
+		};
+	},
+	template: `
+        <farm-form v-model="validForm" :style="[styles.vForm]" ref="form">
+
+			<farm-label :required="true">Birthdate: {{ birthDate }}</farm-label>
+			<DatePicker
+				ref="birthDate"
+				inputId="form-pf-birthDate"
+				class="mt-4"
+				v-model="birthDate"
+				:readonly="true"
+				:required="true"
+			/>
+		
+			<farm-label :required="true">Range: {{ rangeDate }}</farm-label>
+			<RangeDatePicker
+				ref="rangeDate"
+				inputId="form-pf-rangeDate"
+				class="mt-4"
+				v-model="rangeDate"
+				:readonly="true"
+				:required="true"
+			/>
+			
+            <div class="footer" :style="[styles.footer]">
+				<farm-btn color="secondary" outlined @click="$refs.form.reset()" class="mr-3">Reset</farm-btn>
+				<farm-btn color="secondary" :disabled="!validForm">Salvar</farm-btn>
+            </div>
+        </farm-form>
+    `,
+});

package/src/components/Form/Form.vue

@@ -48,6 +48,8 @@ export default Vue.extend({
 					validationFields.push($leaf.$children[0]);
 				} else if ($leaf.validatable) {
 					validationFields.push($leaf);
+				} else {
+					recursiveFormField($leaf);
 				}
 			});
 		};

package/src/components/IconBox/IconBox.scss

@@ -14,6 +14,10 @@
 			background: var(--farm-#{$color}-lighten);
 		}
 	}
+
+	&--neutral .farm-icon.farm-icon {
+		color: var(--farm-neutral-darken);
+	}
 }
 
 .farm-icon-box--inverted.farm-icon-box {
@@ -27,4 +31,8 @@
 		color: white;
 	}
 
+	&--neutral .farm-icon.farm-icon--white {
+		color: var(--farm-neutral-darken);
+	}
+
 }

package/src/components/IconBox/IconBox.vue

@@ -48,7 +48,7 @@ export default Vue.extend({
 			default: 'md',
 		},
 		/**
-		 * INverted
+		 * Inverted
 		 */
 		inverted: {
 			type: Boolean,

package/src/components/IdCaption/IdCaption.stories.js

@@ -114,3 +114,21 @@ export const NoTextToClip = () => ({
     </farm-idcaption>
     `,
 });
+
+export const IconBoxCustomColor = () => ({
+	template: `
+    <farm-idcaption 
+    icon="account-box-outline"
+    copyText="texto a copiar"
+    iconBoxColor="error"
+    :link="true"
+    >
+        <template v-slot:title>
+            Upper Line Text
+        </template>
+        <template v-slot:subtitle>
+            Lower: Line Text Line Text Line Text
+        </template>
+    </farm-idcaption>
+    `,
+});

package/src/components/IdCaption/IdCaption.vue

@@ -1,6 +1,6 @@
 <template>
 	<div class="idcaption">
-		<farm-icon-box v-if="icon" :icon="icon" size="md" />
+		<farm-icon-box v-if="icon" :icon="icon" :color="iconBoxColor" size="md" />
 		<div
 			:class="{ idcaption__body: true, 'idcaption__body--single': !hasTitle || !hasSubtitle }"
 		>
@@ -24,7 +24,7 @@
 </template>
 
 <script lang="ts">
-import Vue, { computed } from 'vue';
+import Vue, { computed, PropType } from 'vue';
 export default Vue.extend({
 	name: 'farm-idcaption',
 	props: {
@@ -34,6 +34,25 @@ export default Vue.extend({
 		icon: {
 			type: String,
 		},
+		/**
+		 * IconBox Color
+		 */
+		iconBoxColor: {
+			type: String as PropType<
+				| 'primary'
+				| 'secondary'
+				| 'neutral'
+				| 'info'
+				| 'success'
+				| 'error'
+				| 'warning'
+				| 'success'
+				| 'extra-1'
+				| 'extra-2'
+				| 'gray'
+			>,
+			default: 'primary',
+		},
 		/**
 		 * copy to clipboard
 		 */

package/src/components/Loader/Loader.stories.ts

@@ -43,7 +43,7 @@ export const Overlay = () => ({
 			this.show = true;
 			setTimeout(() => {
 				this.show = false;
-			}, 2000);
+			}, 5000);
 		},
 	},
 });

package/src/components/Loader/Loader.vue

@@ -1,60 +1,58 @@
 <template>
-	<div>
-		<div class="farm-loader__overlay" v-if="mode === 'overlay'" :style="styleObject">
-			<div
-				role="progressbar"
-				aria-valuemin="0"
-				aria-valuemax="100"
-				class="farm-loader farm-loader--big farm-loader--visible farm-loader--indeterminate"
+	<div class="farm-loader__overlay" v-if="mode === 'overlay'" :style="styleObject">
+		<div
+			role="progressbar"
+			aria-valuemin="0"
+			aria-valuemax="100"
+			class="farm-loader farm-loader--big farm-loader--visible farm-loader--indeterminate"
+		>
+			<svg
+				xmlns="http://www.w3.org/2000/svg"
+				viewBox="22.857142857142858 22.857142857142858 45.714285714285715 45.714285714285715"
+				style="transform: rotate(0deg)"
 			>
-				<svg
-					xmlns="http://www.w3.org/2000/svg"
-					viewBox="22.857142857142858 22.857142857142858 45.714285714285715 45.714285714285715"
-					style="transform: rotate(0deg)"
-				>
-					<circle
-						fill="transparent"
-						cx="45.714285714285715"
-						cy="45.714285714285715"
-						r="20"
-						stroke-dasharray="125.664"
-						stroke-dashoffset="125.66370614359172px"
-						class="farm-loader__overlay"
-					></circle>
-				</svg>
-				<div class="farm-loader__info"></div>
-			</div>
-		</div>
-		<div v-else>
-			<div
-				role="progressbar"
-				aria-valuemin="0"
-				aria-valuemax="100"
-				class="farm-loader farm-loader--visible farm-loader--indeterminate"
-				:class="calculateSize"
-			>
-				<svg
-					xmlns="http://www.w3.org/2000/svg"
-					viewBox="22.857142857142858 22.857142857142858 45.714285714285715 45.714285714285715"
-					style="transform: rotate(0deg)"
-				>
-					<circle
-						fill="transparent"
-						cx="45.714285714285715"
-						cy="45.714285714285715"
-						r="20"
-						stroke-dasharray="125.664"
-						stroke-dashoffset="125.66370614359172px"
-						class="farm-loader__overlay"
-					></circle>
-				</svg>
-				<div class="farm-loader__info"></div>
-			</div>
+				<circle
+					fill="transparent"
+					cx="45.714285714285715"
+					cy="45.714285714285715"
+					r="20"
+					stroke-dasharray="125.664"
+					stroke-dashoffset="125.66370614359172px"
+					class="farm-loader__overlay"
+				></circle>
+			</svg>
+			<div class="farm-loader__info"></div>
 		</div>
 	</div>
+	<div
+		v-else
+		role="progressbar"
+		aria-valuemin="0"
+		aria-valuemax="100"
+		class="farm-loader farm-loader--visible farm-loader--indeterminate"
+		:class="calculateSize"
+	>
+		<svg
+			xmlns="http://www.w3.org/2000/svg"
+			viewBox="22.857142857142858 22.857142857142858 45.714285714285715 45.714285714285715"
+			style="transform: rotate(0deg)"
+		>
+			<circle
+				fill="transparent"
+				cx="45.714285714285715"
+				cy="45.714285714285715"
+				r="20"
+				stroke-dasharray="125.664"
+				stroke-dashoffset="125.66370614359172px"
+				class="farm-loader__overlay"
+			></circle>
+		</svg>
+		<div class="farm-loader__info"></div>
+	</div>
 </template>
 <script lang="ts">
 import Vue from 'vue';
+import { calculateMainZindex } from '../../helpers';
 
 export default Vue.extend({
 	name: 'farm-loader',
@@ -69,15 +67,9 @@ export default Vue.extend({
 		},
 	},
 	data() {
-		const zIndex = Math.max(
-			...Array.from(document.querySelectorAll('body *'), el =>
-				parseFloat(window.getComputedStyle(el).zIndex)
-			).filter(zIndex => !Number.isNaN(zIndex)),
-			0
-		);
 		return {
 			styleObject: {
-				zIndex,
+				zIndex: calculateMainZindex(),
 			},
 		};
 	},
@@ -90,5 +82,5 @@ export default Vue.extend({
 });
 </script>
 <style lang="scss" scoped>
-@import 'Loader.scss';
+@import 'Loader';
 </style>

package/src/components/Modal/Modal.scss

@@ -6,7 +6,6 @@
     left: 0;
     width: 100vw;
     height: 100vh;
-    z-index: 100;
     align-items: center;
     display: flex;
     justify-content: center;

package/src/components/Modal/Modal.vue

@@ -1,7 +1,11 @@
 <template>
 	<transition name="fade">
-		<div :class="{ 'farm-modal': true, ['farm-modal--size-' + size]: true }" v-if="inputValue">
-			<div class="farm-modal--container">
+		<div
+			v-if="inputValue"
+			:class="{ 'farm-modal': true, ['farm-modal--size-' + size]: true }"
+			:style="styleObject"
+		>
+			<div class="farm-modal--container teste">
 				<div class="farm-modal--header">
 					<!-- @slot header -->
 					<slot name="header"></slot>
@@ -21,8 +25,10 @@
 		</div>
 	</transition>
 </template>
+
 <script lang="ts">
-import Vue, { PropType, ref, toRefs, watch } from 'vue';
+import Vue, { PropType, reactive, ref, toRefs, watch } from 'vue';
+import { calculateMainZindex } from '../../helpers';
 
 export default Vue.extend({
 	name: 'farm-modal',
@@ -57,6 +63,7 @@ export default Vue.extend({
 	setup(props, { emit }) {
 		const { offsetTop, offsetBottom, persistent, size } = toRefs(props);
 		const inputValue = ref(props.value);
+		const styleObject = reactive({ zIndex: 1 });
 		const styles = {
 			marginTop: offsetTop.value + 'px',
 			marginBottom: offsetBottom.value + 'px',
@@ -77,7 +84,8 @@ export default Vue.extend({
 			newValue => {
 				inputValue.value = newValue;
 				if (newValue) {
-					window.addEventListener('keyup', escHandler);
+					(styleObject.zIndex = calculateMainZindex()),
+						window.addEventListener('keyup', escHandler);
 				}
 			}
 		);
@@ -91,6 +99,7 @@ export default Vue.extend({
 		return {
 			inputValue,
 			styles,
+			styleObject,
 			size,
 			close,
 		};

package/src/components/RangeDatePicker/RangeDatePicker.vue

@@ -116,6 +116,12 @@ export default Vue.extend({
 			this.dateField = newValue;
 			this.fieldRange = this.formatDateRange(newValue);
 		},
+		fieldRange(newValue) {
+			if (!newValue) {
+				this.dateField = [];
+				this.save();
+			}
+		},
 	},
 	methods: {
 		formatDateRange(date) {

package/src/components/Switcher/Switcher.scss

@@ -17,9 +17,15 @@
     &:focus {
         outline: 0;
     }
+
     &[block] {
         display: block;
     }
+
+    &--disabled {
+        opacity: 0.6;
+        cursor: default;
+    }
 }
 
 .farm-switch__background {

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

@@ -0,0 +1,28 @@
+import Switch from './Switcher';
+
+export default {
+	title: 'Form/Switcher',
+	component: Switch,
+};
+
+export const Primary = () => ({
+	data() {
+		return {
+			selectedValue: false,
+		};
+	},
+	template: `<div>
+	<farm-switcher v-model="selectedValue" block />
+	</div>`,
+});
+
+export const Disabled = () => ({
+	data() {
+		return {
+			selectedValue: false,
+		};
+	},
+	template: `<div>
+	<farm-switcher v-model="selectedValue" block :disabled="true" />
+	</div>`,
+});

package/src/components/Switcher/Switcher.vue

@@ -1,5 +1,10 @@
 <template>
-	<div class="farm-switch" role="checkbox" @click="toggle" @keydown.space.prevent="toggle">
+	<div
+		:class="{ 'farm-switch': true, 'farm-switch--disabled': isDisabled }"
+		role="checkbox"
+		@click="toggle"
+		@keydown.space.prevent="toggle"
+	>
 		<span class="farm-switch__background" :class="backgroundStyles" />
 		<span class="farm-switch__indicator" :style="indicatorStyles" />
 	</div>
@@ -10,10 +15,22 @@ import Vue from 'vue';
 export default Vue.extend({
 	name: 'farm-switcher',
 	props: {
+		/**
+		 * v-model binding
+		 */
 		value: {
 			type: Boolean,
 			required: true,
 		},
+		/**
+		 * Is disabled?
+		 */
+		disabled: { type: Boolean, default: false },
+	},
+	data() {
+		return {
+			isDisabled: this.disabled,
+		};
 	},
 	computed: {
 		backgroundStyles() {
@@ -26,13 +43,21 @@ export default Vue.extend({
 			return { transform: this.value ? 'translateX(16px)' : 'translateX(0)' };
 		},
 	},
+	watch: {
+		disabled(newValue: boolean) {
+			this.isDisabled = newValue;
+		},
+	},
 	methods: {
 		toggle() {
+			if (this.isDisabled) {
+				return false;
+			}
 			this.$emit('input', !this.value);
 		},
 	},
 });
 </script>
 <style lang="scss" scoped>
-@import 'Switcher.scss';
+@import 'Switcher';
 </style>