Merge pull request #1035 from Sysvale/feature/select-deep-search

feat: adiciona busca por termos individuais no select

Author: RafaelGondi

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@sysvale/cuida",
-	"version": "3.150.1",
+	"version": "3.151.0",
 	"description": "A design system built by Sysvale, using storybook and Vue components",
 	"repository": {
 		"type": "git",

src/components/Select.vue

@@ -170,6 +170,15 @@ const props = defineProps({
 		default: false,
 		required: false,
 	},
+	/**
+	 * Indica se a busca deve levar em consideração argumentos compostos.
+	 * Só tem efeito se a prop `searchable` for `true`.
+	 */
+	deepSearch: {
+		type: Boolean,
+		default: false,
+		required: false,
+	},
 	/**
 	 * @deprecated Define a largura do Select. As opções são 'thin', 'default' e 'wide'.
 	 */
@@ -412,13 +421,34 @@ function filterOptions(value) {
 	}
 
 	const sanitizedString = removeAccents(String(value) || '');
-	const regexExp = new RegExp(sanitizedString, 'i');
+
+	if (props.deepSearch) {
+		deepOptionSearch(sanitizedString);
+	} else {
+		simpleOptionSearch(sanitizedString);
+	}
+}
+
+function simpleOptionSearch(sanitizedSearchValue) {
+	const regexExp = new RegExp(sanitizedSearchValue, 'i');
 
 	localOptions.value = pristineOptions.value.filter(
 		(option) => removeAccents(option[props.optionsField]).search(regexExp) >= 0,
 	);
 }
 
+function deepOptionSearch(sanitizedSearchValue) {
+	const searchArray = sanitizedSearchValue.toLowerCase().split(' ');
+
+	localOptions.value = pristineOptions.value.filter(
+		(option) => {
+			return searchArray.reduce((acc, curr) => (
+				acc = acc && removeAccents(option[props.optionsField]).toLowerCase().includes(curr)
+			), true);
+		}
+	)
+}
+
 function activeSelection() {
 	if (props.disabled) return;
 

src/tests/__snapshots__/Select.spec.js.snap

@@ -3,7 +3,7 @@
 exports[`Select > renders correctly 1`] = `
 "<div data-v-96b70cc4="" class="select" id="select-input">
   <div data-v-96b70cc4="" class="select__container select__container--fit">
-    <div data-v-82c69faf="" data-v-96b70cc4="" class="base-input__container select__input--undefined select__input--fit" options="[object Object],[object Object]" searchable="false" width="" optionsfield="value" returnvalue="false" mobile="false" addable="false" onkeypress="return false;">
+    <div data-v-82c69faf="" data-v-96b70cc4="" class="base-input__container select__input--undefined select__input--fit" options="[object Object],[object Object]" searchable="false" deepsearch="false" width="" optionsfield="value" returnvalue="false" mobile="false" addable="false" onkeypress="return false;">
       <!--v-if--><label data-v-c1eb01da="" data-v-82c69faf="" class="label">
         <div data-v-c2ac4e6d="" data-v-c1eb01da="" class="flexbox label__content">
           <!-- @slot Slot com o conteúdo interno do FlexBox -->label