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

package/package.json

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

package/src/components/Checkbox/Checkbox.scss

@@ -1,4 +1,5 @@
 @import '../../configurations/theme-colors';
+@import '../../configurations/variables';
 
 .farm-checkbox__container {
     display: flex;
@@ -46,6 +47,7 @@
     &--disabled {
         border-color: #dadada;
         cursor: default;
+        opacity: 0.6;
 
         &.farm-checkbox--checked {
             background-color: #dadada;
@@ -56,4 +58,12 @@
         color: white;
     }
 
+}
+
+@each $size,
+$value in $sizes {
+    #{'.farm-checkbox[size=' + $size +']'} {
+        width: $value;
+        height: $value;
+    }
 }

package/src/components/Checkbox/Checkbox.stories.js

@@ -1,6 +1,6 @@
 import Checkbox from './Checkbox';
 import baseThemeColors from '../../configurations/_theme-colors-base.scss';
-
+import sizes from '../../configurations/sizes';
 const colors = Object.keys(baseThemeColors);
 const variations = ['', 'darken', 'lighten'];
 
@@ -92,3 +92,17 @@ export const Colors = () => ({
 		</div>
 	</div>`,
 });
+
+export const Sizes = () => ({
+	data() {
+		return {
+			sizes,
+			isChecked: true,
+		};
+	},
+	template: `<div style="display: flex; flex-direction: column; flex-wrap: wrap;">
+        <div v-for="size of sizes">
+			<farm-checkbox v-model="isChecked" :size="size" :label="size" /><br />
+        </div>
+	</div>`,
+});

package/src/components/Checkbox/Checkbox.vue

@@ -8,9 +8,10 @@
 				'farm-checkbox--lighten': variation === 'lighten',
 				'farm-checkbox--darken': variation === 'darken',
 			}"
+			:size="$props.size"
 			@click="toggleValue"
 		>
-			<farm-icon size="sm" v-if="innerValue">check</farm-icon>
+			<farm-icon :size="$props.size" v-if="innerValue">check</farm-icon>
 		</span>
 		<farm-label v-if="label">
 			{{ label }}
@@ -57,6 +58,13 @@ export default Vue.extend({
 			type: Array as PropType<Array<Function>>,
 			default: () => [],
 		},
+		/**
+		 * Size
+		 */
+		size: {
+			type: String as PropType<'xs' | 'sm' | 'md' | 'lg' | 'xl'>,
+			default: 'md',
+		},
 	},
 	setup(props, { emit }) {
 		const innerValue = ref(props.value);

package/src/components/DataTableHeader/DataTableHeader.scss

@@ -2,6 +2,7 @@
 	position: relative;
 	color: var(--v-primary-base);
 	font-size: 12px;
+
 	.farm-icon {
 		position: absolute;
 		right: -20px;
@@ -17,11 +18,18 @@
 
 th.sortable {
 	cursor: pointer;
+
 	&:not(.active) {
 		&:hover {
-			.v-icon {
+			.farm-icon {
 				opacity: 0.5 !important;
 			}
 		}
 	}
 }
+
+th span.span-checkbox {
+	display: flex;
+	justify-content: start;
+	padding-left: 4px;
+}

package/src/components/DataTableHeader/DataTableHeader.stories.js

@@ -1,40 +1,64 @@
+import { withDesign } from 'storybook-addon-designs';
 import DataTableHeader from './DataTableHeader.vue';
 
 export default {
 	title: 'Display/Table/DataTableHeader',
 	component: DataTableHeader,
+	decorators: [withDesign],
+	parameters: {
+		docs: {
+			description: {
+				component: `DataTable Header<br />
+				selector: <em>farm-datatable-header</em><br />
+				<span style="color: var(--farm-primary-base);">ready for use</span>
+				`,
+			},
+		},
+		viewMode: 'docs',
+	},
 };
 
 export const Primary = () => ({
 	data() {
 		return {
-			headers: [
-				{
-					text: 'Grupo',
-					sortable: true,
-					value: 'name',
-					align: 'left',
-				},
-				{
-					text: 'Aprovado',
-					sortable: true,
-					value: 'approvedAmount',
-					align: 'center',
-					width: 320,
-				},
-				{
-					text: 'Disponível',
-					sortable: false,
-					value: 'availableAmount',
-					align: 'center',
-					width: 160,
-				},
-			],
+			headers,
+			sortClick: [],
+			firstSelected: false,
+		};
+	},
+	template: `<farm-datatable-header :headers="headers" :sortClick="sortClick" :firstSelected="firstSelected" />`,
+});
+
+export const CheckBox = () => ({
+	data() {
+		return {
+			headers,
 			sortClick: [],
 			firstSelected: false,
 		};
 	},
-	template: `<DataTableHeader :headers="headers" :sortClick="sortClick" :firstSelected="firstSelected" />`,
+	template: `<farm-datatable-header :headers="headers" :sortClick="sortClick" :firstSelected="firstSelected" :showCheckbox="true" :selectedIndex="1" />`,
 });
 
-Primary.storyName = 'Básico';
+const headers = [
+	{
+		text: 'Grupo',
+		sortable: true,
+		value: 'name',
+		align: 'left',
+	},
+	{
+		text: 'Aprovado',
+		sortable: true,
+		value: 'approvedAmount',
+		align: 'center',
+		width: 320,
+	},
+	{
+		text: 'Disponível',
+		sortable: false,
+		value: 'availableAmount',
+		align: 'center',
+		width: 160,
+	},
+];

package/src/components/DataTableHeader/DataTableHeader.vue

@@ -33,31 +33,26 @@
 					</farm-icon>
 				</span>
 
-				<span v-if="isTHDataTableSelect(item) && showCheckbox">
-					<v-simple-checkbox
+				<span v-if="isTHDataTableSelect(item) && showCheckbox" class="span-checkbox">
+					<!--
 						:indeterminate="headerProps.someItems && !headerProps.everyItem"
-						v-model="inputVal"
-						@input="selectAll"
-					></v-simple-checkbox>
+					-->
+					<farm-checkbox size="sm" v-model="inputVal" @input="selectAll" />
 				</span>
 			</th>
 		</tr>
 	</thead>
 </template>
 
-<script>
+<script lang="ts">
 /* eslint-disable */
 import Vue from 'vue';
-import VSimpleCheckbox from 'vuetify/lib/components/VCheckbox/VSimpleCheckbox';
 
 export default Vue.extend({
 	name: 'farm-datatable-header',
-	components: {
-		VSimpleCheckbox,
-	},
 	props: {
 		/**
-		 * Cabeçalho
+		 * Headers
 		 */
 		headers: {
 			type: Array,
@@ -100,6 +95,7 @@ export default Vue.extend({
 		 * Hide/show checkbox
 		 */
 		showCheckbox: {
+			type: Boolean,
 			default: true,
 		},
 	},

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

@@ -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/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/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/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/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';