@farm-investimentos/front-mfe-components 11.0.3 → 11.1.1

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

@@ -54,6 +54,7 @@ export const Primary = () => ({
 			<farm-label :required="true">True/false</farm-label>
 			<farm-checkbox v-model="form.checkbox" :rules="[rules.checked]" />
 			
+			
             <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>
@@ -169,3 +170,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/Icon/Icon.scss

@@ -1,4 +1,5 @@
 @import '../../configurations/variables';
+@import '../../configurations/theme-colors';
 
 .farm-icon {
     align-items: center;
@@ -10,16 +11,20 @@
     position: relative;
     text-indent: 0;
 
-    @each $color in $colors {
-        &#{'.farm-icon--' + $color} {
-            color: var(--v-#{$color}-base);
+    @each $color in $theme-colors-list {
+        &#{'--' + $color} {
+            color: var(--farm-#{$color}-base);
         }
     }
 
+    &--gray-base {
+        color: var(--farm-neutral-darken);
+    }
+
     @each $size,
     $value in $sizes {
         &#{'.farm-icon[size=' + $size +']'} {
             font-size: $value;
         }
     }
-}
+}

package/src/components/Icon/Icon.stories.js

@@ -1,5 +1,6 @@
 import { withDesign } from 'storybook-addon-designs';
-import colors from '../../configurations/colors';
+import baseThemeColors from '../../configurations/_theme-colors-base.scss';
+const colors = Object.keys(baseThemeColors);
 import sizes from '../../configurations/sizes';
 import iconsList from './icons_list';
 
@@ -22,7 +23,7 @@ export default {
 
 export const Atom = () => ({
 	template: `<div class="icons-container">
-        <farm-icon color="secondary">
+        <farm-icon color="primary">
             book
         </farm-icon>
 	</div>`,
@@ -31,7 +32,7 @@ export const Atom = () => ({
 export const Colors = () => ({
 	data() {
 		return {
-			colors,
+			colors: [...colors, 'gray'],
 		};
 	},
 	template: `<div class="icons-container">

package/src/components/Icon/Icon.vue

@@ -18,14 +18,15 @@ export default Vue.extend({
 			type: String as PropType<
 				| 'primary'
 				| 'secondary'
-				| 'error'
-				| 'extra'
-				| 'accent'
+				| 'neutral'
 				| 'info'
 				| 'success'
+				| 'error'
+				| 'warning'
+				| 'success'
+				| 'extra-1'
+				| 'extra-2'
 				| 'gray'
-				| 'yellow'
-				| 'white'
 			>,
 			default: 'primary',
 		},

package/src/components/IconBox/IconBox.scss

@@ -1,4 +1,5 @@
 @import '../../configurations/variables';
+@import '../../configurations/theme-colors';
 
 .farm-icon-box {
 	width: 48px;
@@ -8,17 +9,17 @@
 	justify-content: center;
 	align-items: center;
 
-	@each $color in $colors {
+	@each $color in $theme-colors-list {
 		&#{'--' + $color} {
-			background: var(--v-#{$color}-lighten5);
+			background: var(--farm-#{$color}-lighten);
 		}
 	}
 }
 
 .farm-icon-box--inverted.farm-icon-box {
-	@each $color in $colors {
+	@each $color in $theme-colors-list {
 		&#{'--' + $color} {
-			background: var(--v-#{$color}-base);
+			background: var(--farm-#{$color}-base);
 		}
 	}
 

package/src/components/IconBox/IconBox.stories.js

@@ -1,6 +1,7 @@
 import { withDesign } from 'storybook-addon-designs';
 import IconBox from './IconBox';
-import colors from '../../configurations/colors';
+import baseThemeColors from '../../configurations/_theme-colors-base.scss';
+const colors = Object.keys(baseThemeColors);
 import sizes from '../../configurations/sizes';
 import('../Icon/Icons.stories.scss');
 

package/src/components/IconBox/IconBox.vue

@@ -7,9 +7,7 @@
 		}"
 		:size="size"
 	>
-		<farm-icon :color="inverted ? 'white' : color" :size="size">{{
-			iconParsed
-		}}</farm-icon>
+		<farm-icon :color="inverted ? 'white' : color" :size="size">{{ iconParsed }}</farm-icon>
 	</div>
 </template>
 
@@ -30,15 +28,27 @@ export default Vue.extend({
 		 * Color
 		 */
 		color: {
-			type: String,
-			default: 'secondary',
+			type: String as PropType<
+				| 'primary'
+				| 'secondary'
+				| 'neutral'
+				| 'info'
+				| 'success'
+				| 'error'
+				| 'warning'
+				| 'success'
+				| 'extra-1'
+				| 'extra-2'
+				| 'gray'
+			>,
+			default: 'primary',
 		},
 		size: {
 			type: String as PropType<'xs' | 'sm' | 'md' | 'lg' | 'xl'>,
 			default: 'md',
 		},
 		/**
-		 * INverted
+		 * Inverted
 		 */
 		inverted: {
 			type: Boolean,

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

@@ -31,7 +31,7 @@ describe('IconBox component', () => {
 		});
 
 		it('get cssColorClass', () => {
-			expect(component.cssColorClass).toEqual('farm-icon-box--secondary');
+			expect(component.cssColorClass).toEqual('farm-icon-box--primary');
 		});
 	});
 });

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" color="secondary" 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/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>

package/src/components/TableContextMenu/TableContextMenu.scss

@@ -1,8 +1,22 @@
-[role='menuitem'] {
+.v-list-item.v-list-item--link {
 	border-bottom: 1px solid var(--farm-stroke-base);
 }
 
 .v-list-item__title {
+	display: flex;
+	align-items: center;
+
+
+}
+
+::v-deep .v-application--wrap {
+	min-height: auto;
+	font-family: 'Montserrat', sans-serif !important;
+}
+
+.farm-listitem {
+	padding: auto 8px;
+
 	.farm-icon {
 		vertical-align: sub;
 		margin-right: 8px;

package/src/components/TableContextMenu/TableContextMenu.stories.js

@@ -23,13 +23,13 @@ export default {
 };
 
 export const Primary = () => ({
-	template: `<div>
+	template: `<div style="padding-left: 80px">
 		<farm-context-menu :items="[{ label: 'Remover', icon: { color: 'error', type: 'open-in-new' } }]" />
 	</div>`,
 });
 
 export const Icons = () => ({
-	template: `<div>
+	template: `<div style="padding-left: 80px">
 		<farm-context-menu
 			ref="icons"
 			:items="[{ label: 'Remover', icon: { color: 'error', type: 'delete' } }]"
@@ -41,13 +41,26 @@ export const Multi = () => ({
 	data() {
 		return {
 			items: [
-				{ label: 'Novo', icon: { color: 'grey', type: 'open-in-new' } },
+				{ label: 'Novo', icon: { type: 'open-in-new' } },
 				{ label: 'Editar', icon: { color: 'secondary', type: 'open-in-new' } },
 				{ label: 'Remover', icon: { color: 'error', type: 'delete' } },
 			],
 		};
 	},
-	template: `<div>
+	template: `<div style="padding-left: 80px">
 		<farm-context-menu ref="multi" :items="items" />
 	</div>`,
 });
+
+export const ClickHandler = () => ({
+	data() {
+		return {
+			editItem: () => {
+				alert('Click handler');
+			},
+		};
+	},
+	template: `<div style="padding-left: 80px">
+		<farm-context-menu :items="[{ label: 'Click me', icon: { type: 'open-in-new' }, handler: 'edit' }]" @edit="editItem()" />
+	</div>`,
+});

package/src/components/TableContextMenu/TableContextMenu.vue

@@ -1,62 +1,65 @@
 <template>
-	<v-menu>
-		<template v-slot:activator="{ on, attrs }">
-			<farm-btn icon v-bind="attrs" v-on="on" title="Abrir opções" color="secondary">
+	<farm-contextmenu v-model="value">
+		<template v-slot:activator="{}">
+			<farm-btn icon @click="toggleValue" title="Abrir opções" color="secondary">
 				<farm-icon size="md">dots-horizontal</farm-icon>
 			</farm-btn>
 		</template>
-
-		<v-list dense class="pa-0">
-			<v-list-item
+		<farm-list>
+			<farm-listitem
 				v-for="item in items"
-				:key="item.label"
-				:title="item.label"
+				clickable
+				hoverColorVariation="lighten"
+				:key="'tablecontextmenu_item_' + item.label"
+				:hoverColor="item.icon.color || 'primary'"
 				@click="onClick(item.handler)"
 			>
-				<v-list-item-content>
-					<v-list-item-title>
-						<farm-icon
-							v-if="item.icon"
-							size="md"
-							:color="item.icon.color || 'secondary'"
-						>
-							{{ item.icon.type }}
-						</farm-icon>
-						{{ item.label }}
-					</v-list-item-title>
-				</v-list-item-content>
-			</v-list-item>
-		</v-list>
-	</v-menu>
+				<farm-icon v-if="item.icon" size="sm" :color="item.icon.color || 'primary'">
+					{{ item.icon.type }}
+				</farm-icon>
+				<farm-caption bold tag="span">{{ item.label }}</farm-caption>
+			</farm-listitem>
+		</farm-list>
+	</farm-contextmenu>
 </template>
 <script lang="ts">
-import Vue from 'vue';
-import { VMenu } from 'vuetify/lib/components/VMenu';
-import { VList } from 'vuetify/lib/components/VList';
-import VListItem from 'vuetify/lib/components/VList/VListItem';
-import { VListItemContent, VListItemTitle } from 'vuetify/lib';
+import Vue, { PropType } from 'vue';
+
+export interface IContextMenuOption {
+	label: string;
+	handler: string;
+	icon: IContextMenuOptionIcon;
+}
+
+export interface IContextMenuOptionIcon {
+	color?: string;
+	type: string;
+}
 
 export default Vue.extend({
 	name: 'farm-context-menu',
-	components: {
-		VMenu,
-		VList,
-		VListItem,
-		VListItemContent,
-		VListItemTitle,
-	},
+	components: {},
 	props: {
 		items: {
-			type: Array,
+			type: Array as PropType<Array<IContextMenuOption>>,
 			required: true,
 		},
 	},
+	data() {
+		return {
+			value: false,
+		};
+	},
 	methods: {
 		onClick(handler) {
 			if (handler !== undefined) {
 				this.$emit(handler);
+				// handler();
 			}
 		},
+		toggleValue() {
+			this.value = !this.value;
+		},
 	},
 });
 </script>

package/src/helpers/date.js

@@ -6,6 +6,9 @@ export const defaultFormat = (data, UTCTimeZone = true) => {
 };
 
 export const convertDate = (data) => {
+	if(!data) {
+		return null;
+	}
 	let newdate = data.split("/").reverse().join("-");
 	return newdate;
 };

package/src/main.ts

@@ -62,6 +62,7 @@ export * from './components/Buttons/MultiImportButton';
 export * from './components/Card';
 export * from './components/Checkbox';
 export * from './components/Chip';
+export * from './components/ContextMenu';
 export * from './components/CopyToClipboard';
 export * from './components/Logos/ProductLogo';
 export * from './components/Logos/OriginatorLogo';

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

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