@farm-investimentos/front-mfe-components 15.3.6 → 15.4.0

package/package.json

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

package/src/components/DatePicker/DatePicker.stories.js

@@ -77,14 +77,23 @@ export const IsNull = () => ({
     </div>`,
 });
 
-export const BottomFalse = () => ({
+export const OnlyAllowedDates = () => ({
 	data() {
 		return {
-			date: '2023-08-01',
+			date: '',
 		};
 	},
-	template: `<div style='max-width: 320px'><farm-input-datepicker position="bottom" inputId="input-custom-id-1" v-model="date" /></div>`,
+	props: {
+		allowedDates: {
+			default: () => (value) => {
+				const day = parseInt(value.split('-')[2], 10);
+				return [5, 10, 15, 20, 25].includes(day);
+			}
+		}
+	},
+	template: `<div style='max-width: 320px'><farm-input-datepicker position="bottom" :allowed-dates="allowedDates" inputId="input-custom-id-1" v-model="date" /></div>`,
 });
+
 export const TopPositioned = () => ({
 	data() {
 		return {
@@ -107,4 +116,4 @@ export const CenterPositioned = () => ({
         <farm-input-datepicker inputId="input-custom-id-0" v-model="date" position="center" />
 		{{ date }}
     </div>`,
-});
+});

package/src/components/DatePicker/DatePicker.vue

@@ -19,6 +19,7 @@
 			:header-date-format="formatDatePickerHeader"
 			:max="max"
 			:min="min"
+			:allowed-dates="allowedDates"
 		>
 			<farm-btn plain title="Limpar" color="primary" :disabled="isDisabled" @click="clear">
 				Limpar
@@ -45,7 +46,7 @@
 				:readonly="readonly"
 				:mask="`${readonly ? '' : '##/##/####'}`"
 				:id="inputId"
-				:rules="[checkDateValid, checkMax, checkMin, checkRequire]"
+				:rules="[checkDateValid, checkMax, checkMin, checkRequire, checkIsInAllowedDates]"
 				@keyup="keyUpInput"
 			/>
 		</template>
@@ -104,6 +105,13 @@ export default defineComponent({
 			type: String as PropType<'top' | 'bottom' | 'center'>,
 			default: 'bottom',
 		},
+		/**
+		 * Allowed dates to be selected and validated
+		 */
+		allowedDates: {
+			type: Function,
+			default: () => {},
+		},
 		/**
 		 * Required field (inside form)
 		 */
@@ -154,6 +162,15 @@ export default defineComponent({
 				}
 				return true;
 			},
+			checkIsInAllowedDates: value => {
+				const dateSelected = convertDate(value);
+
+				if (!this.required && value.length === 0) {
+					return true;
+				}
+
+				return this.allowedDates(dateSelected) || 'Data inválida';
+			},
 		};
 	},
 	watch: {

package/src/components/SelectAutoComplete/SelectAutoComplete.scss

@@ -0,0 +1,49 @@
+@import '../TextFieldV2/TextFieldV2.scss';
+@import '../../configurations/mixins';
+
+.farm-select {
+	&__hint-text {
+		@include hintText;
+	}
+}
+
+.farm-listitem--selected {
+	background-color: var(--farm-neutral-lighten);
+}
+
+.farm-contextmenu {
+	width: 100%;
+}
+
+.farm-icon {
+	transition: all ease 0.3s;
+	cursor: pointer;
+
+	&--rotate {
+		transform: rotate(180deg);
+	}
+}
+
+.farm-select__checkbox {
+	margin-right: 8px;
+}
+
+:deep(.farm-listitem:hover .farm-typography) {
+	color: var(--farm-primary-base);
+}
+
+:deep(.farm-listitem:focus .farm-typography) {
+	color: var(--farm-primary-base);
+}
+
+:deep(.farm-listitem:hover .farm-checkbox .farm-icon) {
+	color: var(--farm-primary-lighten);
+}
+
+:deep(.farm-listitem:focus .farm-checkbox .farm-icon) {
+	color: var(--farm-primary-lighten);
+}
+
+:deep(.farm-listitem:hover .farm-checkbox.farm-checkbox--checked .farm-icon) {
+	color: white;
+}

package/src/components/SelectAutoComplete/SelectAutoComplete.stories.js

@@ -0,0 +1,328 @@
+import SelectAutoComplete from './SelectAutoComplete.vue';
+
+export default {
+	title: 'Form/SelectAutoComplete',
+	component: SelectAutoComplete,
+};
+
+export const Primary = () => ({
+	data() {
+		return {
+			v: null,
+			items: [
+				{ value: 0, text: 'value 0' },
+				{ value: 1, text: 'value 1' },
+				{ value: 2, text: 'value 2' },
+				{ value: 3, text: 'value 3' },
+			],
+		};
+	},
+	template: `<div style="width: 120px;">
+		<farm-label for="select_id">
+			label
+		</farm-label>
+		<farm-select-auto-complete id="select_id" v-model="v" :items="items" />
+		v-model: {{ v }}
+
+	</div>`,
+});
+
+export const InitialValue = () => ({
+	data() {
+		return {
+			v: 1,
+			items: [
+				{ value: 1, text: ' value 1' },
+				{ value: 2, text: ' value 2' },
+				{ value: 3, text: ' value 3' },
+			],
+		};
+	},
+	template: `<div style="width: 480px">
+		<farm-select-auto-complete v-model="v" :items="items" />
+		v-model: {{ v }}
+	</div>`,
+});
+
+export const Readonly = () => ({
+	data() {
+		return {
+			v: 1,
+			items: [
+				{ value: 1, text: ' value 1' },
+				{ value: 2, text: ' value 2' },
+				{ value: 3, text: ' value 3' },
+			],
+		};
+	},
+	template: `<div style="width: 480px">
+		<farm-select-auto-complete v-model="v" :items="items" readonly />
+		v-model: {{ v }}
+	</div>`,
+});
+
+export const HintText = () => ({
+	data() {
+		return {
+			v: null,
+			items: [
+				{ value: 1, text: ' value 1' },
+				{ value: 2, text: ' value 2' },
+				{ value: 3, text: ' value 3' },
+			],
+		};
+	},
+	template: `<div style="width: 480px">
+		<farm-select-auto-complete v-model="v" :items="items" hint="Hint Text" :persistent-hint="false" />
+		v-model: {{ v }}
+	</div>`,
+});
+
+export const PersistentHintText = () => ({
+	data() {
+		return {
+			v: null,
+			items: [
+				{ value: 1, text: ' value 1' },
+				{ value: 2, text: ' value 2' },
+				{ value: 3, text: ' value 3' },
+			],
+		};
+	},
+	template: `<div style="width: 480px">
+		<farm-select-auto-complete v-model="v" :items="items" hint="Hint Text" />
+		v-model: {{ v }}
+	</div>`,
+});
+
+export const Disabled = () => ({
+	data() {
+		return {
+			v: 1,
+			items: [
+				{ value: 1, text: ' value 1' },
+				{ value: 2, text: ' value 2' },
+				{ value: 3, text: ' value 3' },
+			],
+		};
+	},
+	template: `<div style="width: 480px">
+		<farm-select-auto-complete v-model="v" :items="items" disabled />
+		v-model: {{ v }}
+	</div>`,
+});
+
+export const Validate = () => ({
+	data() {
+		return {
+			v: null,
+			items: [
+				{ value: 1, text: ' value 1' },
+				{ value: 2, text: ' value 2' },
+				{ value: 3, text: ' value 3' },
+			],
+			rules: {
+				required: value => !!value || 'Required field',
+			},
+		};
+	},
+	template: `<div style="width: 480px">
+		<farm-label required>Required</farm-label>
+		<farm-select-auto-complete v-model="v" :items="items" :rules="[rules.required]" />
+		v-model: {{ v }}
+	</div>`,
+});
+
+export const Reset = () => ({
+	data() {
+		return {
+			v: null,
+			items: [
+				{ value: 1, text: ' value 1' },
+				{ value: 2, text: ' value 2' },
+				{ value: 3, text: ' value 3' },
+			],
+			rules: {
+				required: value => !!value || 'Required field',
+			},
+		};
+	},
+	methods: {
+		click() {
+			this.$refs.select.reset();
+		},
+	},
+	template: `<div style="width: 480px">
+		<farm-select-auto-complete v-model="v" :items="items" ref="select" :rules="[rules.required]" />
+		v-model: {{ v }}
+		<farm-btn @click="click">
+			reset
+		</farm-btn>
+	</div>`,
+});
+
+export const CustomKeys = () => ({
+	data() {
+		return {
+			v: null,
+			items: [
+				{ id: 1, label: ' value 1' },
+				{ id: 2, label: ' value 2' },
+				{ id: 3, label: ' value 3' },
+			],
+		};
+	},
+	template: `<div style="width: 480px">
+		<farm-select-auto-complete v-model="v" :items="items" item-text="label" item-value="id" />
+		v-model: {{ v }}
+	</div>`,
+});
+
+export const OutsideChangeVmodel = () => ({
+	data() {
+		return {
+			v: null,
+			items: [
+				{ value: 1, text: 'value 1' },
+				{ value: 2, text: 'value 2' },
+				{ value: 3, text: 'value 3' },
+			],
+		};
+	},
+	methods: {
+		onClick() {
+			this.v = 2;
+		},
+	},
+	template: `<div style="width: 120px">
+		<farm-select-auto-complete v-model="v" :items="items" />
+		v-model: {{ v }}
+		<farm-btn @click="onClick">
+		change value
+		</farm-btn>
+	</div>`,
+});
+
+export const NoItems = () => ({
+	data() {
+		return {
+			v: null,
+			items: [],
+		};
+	},
+	template: `<div style="width: 120px">
+		<farm-select-auto-complete v-model="v" :items="items" />
+		v-model: {{ v }}
+	</div>`,
+});
+
+export const Multiple = () => ({
+	data() {
+		return {
+			v: null,
+			items: [
+				{ value: 0, text: 'value 0' },
+				{ value: 1, text: 'value 1' },
+				{ value: 2, text: 'value 2' },
+				{ value: 3, text: 'value 3' },
+			],
+		};
+	},
+	template: `<div style="width: 400px">
+		<farm-select-auto-complete v-model="v" :items="items" multiple />
+		v-model: {{ v }}
+	</div>`,
+});
+
+export const MultipleInitValue = () => ({
+	data() {
+		return {
+			v: [2, 3],
+			items: [
+				{ id: 0, label: 'value 0' },
+				{ id: 1, label: 'value 1' },
+				{ id: 2, label: 'value 2' },
+				{ id: 3, label: 'value 3' },
+			],
+		};
+	},
+	methods: {
+		click() {
+			this.$refs.select.reset();
+		},
+	},
+	template: `<div style="width: 400px">
+		<farm-select-auto-complete
+			v-model="v"
+			item-value="id"
+			item-text="label"
+			ref="select"
+			multiple
+			:items="items"
+		/>
+		v-model: {{ v }}
+		<farm-btn @click="click">
+			reset
+		</farm-btn>
+	</div>`,
+});
+
+export const MultipleResetByValue = () => ({
+	data() {
+		return {
+			filters: {
+				v: null,
+			},
+			items: [
+				{ id: 1, label: 'value 1' },
+				{ id: 2, label: 'value 2' },
+				{ id: 3, label: 'value 3' },
+			],
+		};
+	},
+	methods: {
+		click() {
+			this.filters.v = [1];
+		},
+	},
+	template: `<div style="width: 400px">
+		<farm-select-auto-complete
+			v-model="filters.v"
+			item-value="id"
+			item-text="label"
+			ref="select"
+			multiple
+			:items="items"
+		/>
+		v-model: {{ filters.v }}
+		<farm-btn @click="click">
+			reset
+		</farm-btn>
+	</div>`,
+});
+
+export const ChangeEvent = () => ({
+	data() {
+		return {
+			v: null,
+			items: [
+				{ value: 0, text: 'value 0' },
+				{ value: 1, text: 'value 1' },
+				{ value: 2, text: 'value 2' },
+				{ value: 3, text: 'value 3' },
+			],
+		};
+	},
+	methods: {
+		onChange(value) {
+			alert('Selected value: ' + value);
+		},
+	},
+	template: `<div style="width: 120px;">
+		<farm-label for="select_id">
+			label
+		</farm-label>
+		<farm-select-auto-complete id="select_id" v-model="v" :items="items" @change="onChange" />
+
+	</div>`,
+});