@farm-investimentos/front-mfe-components 15.7.4 → 15.8.1

package/package.json

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

package/src/components/SelectAutoComplete/SelectAutoComplete.scss

@@ -28,22 +28,30 @@
 	margin-right: 8px;
 }
 
-:deep(.farm-listitem:hover .farm-typography) {
+:deep(.farm-listitem:focus .farm-typography) {
 	color: var(--farm-primary-base);
 }
 
-:deep(.farm-listitem:focus .farm-typography) {
+:deep(.farm-listitem:focus .farm-checkbox .farm-icon) {
+	color: var(--farm-primary-lighten);
+}
+
+:deep(.farm-listitem:not(.farm-listitem--disabled):hover .farm-typography) {
 	color: var(--farm-primary-base);
 }
 
-:deep(.farm-listitem:hover .farm-checkbox .farm-icon) {
+:deep(.farm-listitem:not(.farm-listitem--disabled):focus .farm-typography) {
+	color: var(--farm-primary-base);
+}
+
+:deep(.farm-listitem:not(.farm-listitem--disabled):hover .farm-checkbox .farm-icon) {
 	color: var(--farm-primary-lighten);
 }
 
-:deep(.farm-listitem:focus .farm-checkbox .farm-icon) {
+:deep(.farm-listitem:not(.farm-listitem--disabled):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

@@ -326,3 +326,39 @@ export const ChangeEvent = () => ({
 
 	</div>`,
 });
+
+export const MultipleWithAllOption = () => ({
+	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 has-all-option />
+		v-model: {{ v }}
+	</div>`,
+});
+
+export const MultipleWithAllOptionAndDisabledItems = () => ({
+	data() {
+		return {
+			v: null,
+			items: [
+				{ value: 0, text: 'value 0' },
+				{ value: 1, text: 'value 1', disabled: true },
+				{ value: 2, text: 'value 2' },
+				{ value: 3, text: 'value 3', disabled: true },
+			],
+		};
+	},
+	template: `<div style="width: 400px">
+		<farm-select-auto-complete v-model="v" :items="items" multiple has-all-option />
+		v-model: {{ v }}
+	</div>`,
+});

package/src/components/SelectAutoComplete/SelectAutoComplete.vue

@@ -14,16 +14,45 @@
 			v-if="!readonly && !disabled"
 			:id="customId"
 		>
-			<farm-contextmenu bottom v-model="isVisible" :stay-open="multiple" ref="contextmenu">
+			<farm-contextmenu
+				bottom
+				v-model="isVisible"
+				:stay-open="multiple || clickedDisabledItem"
+				ref="contextmenu"
+			>
 				<farm-list v-if="!readonly" ref="listRef" @keyup="onKeyUp">
+					<farm-listitem
+						v-if="hasAllOption"
+						tabindex="0"
+						clickable
+						hover-color-variation="lighten"
+						:hover-color="hasAllDisabled ? 'neutral' : 'primary'"
+						:class="{
+							'farm-listitem--selected': innerValue === 'all',
+							'farm-listitem--disabled': hasAllDisabled,
+						}"
+						@click="selectAll"
+					>
+						<farm-checkbox
+							v-model="hasAllSelected"
+							class="farm-select__checkbox"
+							value="all"
+							size="sm"
+							:disabled="hasAllDisabled"
+						/>
+						<farm-caption bold tag="span">Todos</farm-caption>
+					</farm-listitem>
 					<farm-listitem
 						tabindex="0"
 						v-for="(item, index) in showFilteredItems ? filteredItems : items"
 						clickable
 						hoverColorVariation="lighten"
-						hover-color="primary"
+						:hover-color="item.disabled ? 'neutral' : 'primary'"
 						:key="'contextmenu_item_' + index"
-						:class="{ 'farm-listitem--selected': item[itemValue] === innerValue }"
+						:class="{
+							'farm-listitem--selected': item[itemValue] === innerValue,
+							'farm-listitem--disabled': item.disabled,
+						}"
 						@click="selectItem(item)"
 					>
 						<farm-checkbox
@@ -32,6 +61,7 @@
 							value="1"
 							size="sm"
 							v-if="isChecked(item)"
+							:disabled="item.disabled"
 						/>
 						<farm-checkbox
 							class="farm-select__checkbox"
@@ -39,6 +69,7 @@
 							value="2"
 							size="sm"
 							v-else-if="multiple"
+							:disabled="item.disabled"
 						/>
 						<farm-caption bold tag="span">{{ item[itemText] }}</farm-caption>
 					</farm-listitem>
@@ -161,7 +192,7 @@ export default defineComponent({
 		 * This can be changed using the item-text ad item-value
 		 */
 		items: {
-			type: Array,
+			type: Array as PropType<Array<Function>>,
 			default: () => [],
 		},
 		/**
@@ -242,6 +273,13 @@ export default defineComponent({
 			// eslint-disable-next-line
 			default: (event: Event) => {},
 		},
+		/**
+		 * Set "All" as first option to select all other values<br />
+		 */
+		hasAllOption: {
+			type: Boolean,
+			default: false,
+		},
 	},
 	setup(props, { emit }) {
 		const { rules, items, itemText, itemValue, disabled, multiple } = toRefs(props);
@@ -269,6 +307,9 @@ export default defineComponent({
 		let fieldValidator = validateFormFieldBuilder(rules.value);
 		let validate = validateFormMethodBuilder(errorBucket, valid, fieldValidator);
 
+		const enabledItems = computed(() => items.value.filter(item => !item.disabled));
+		const disabledItems = computed(() => items.value.filter(item => item.disabled));
+
 		const hasError = computed(() => {
 			return errorBucket.value.length > 0;
 		});
@@ -279,6 +320,43 @@ export default defineComponent({
 
 		const searchText = ref('');
 
+		const hasAllDisabled = computed(() => items.value.length == disabledItems.value.length);
+
+		const clickedDisabledItem = ref(false);
+
+		const hasAllSelected = computed({
+			get() {
+				if (
+					!multiple.value ||
+					!Array.isArray(items.value) ||
+					!Array.isArray(innerValue.value)
+				) {
+					return false;
+				}
+				if (innerValue.value.length === enabledItems.value.length) {
+					return 'all';
+				}
+				return false;
+			},
+			set() {
+				emit('input', innerValue.value);
+			},
+		});
+
+		const selectAll = () => {
+			if (hasAllDisabled.value) {
+				return;
+			}
+			if (multipleValues.value.length === enabledItems.value.length) {
+				multipleValues.value = [];
+			} else {
+				multipleValues.value = enabledItems.value.map(item => item[itemValue.value]);
+			}
+			checked.value = '1';
+			innerValue.value = [...multipleValues.value];
+			validate(innerValue.value);
+		};
+
 		const filterOptions = () => {
 			searchText.value = selectedText.value.toLowerCase();
 			if (!searchText || searchText.value.includes('+')) {
@@ -408,6 +486,20 @@ export default defineComponent({
 		};
 
 		const selectItem = item => {
+			if (inputField.value) {
+				inputField.value.focus();
+			}
+
+			if (item.disabled) {
+				clickedDisabledItem.value = true;
+
+				// "Schedule" execution to next loop, so the contextMenu won't close immediately if a disabled item is clicked
+				setTimeout(() => {
+					clickedDisabledItem.value = false;
+				});
+				return;
+			}
+
 			if (multiple.value) {
 				const alreadyAdded = multipleValues.value.findIndex(
 					val => val === item[itemValue.value]
@@ -531,6 +623,7 @@ export default defineComponent({
 			isChecked,
 			multipleValues,
 			addLabelToMultiple,
+			clickedDisabledItem,
 			inputField,
 			onKeyUp,
 			addFocusToInput,
@@ -541,6 +634,9 @@ export default defineComponent({
 			showFilteredItems,
 			searchText,
 			handleOutsideClick,
+			hasAllDisabled,
+			hasAllSelected,
+			selectAll,
 		};
 	},
 });