Feature/data table search (#949)

#### Por favor, verifique se o seu pull request está de acordo com o
checklist abaixo:

- [x] A implementação feita possui testes (Caso haja um motivo para não
haver testes/haver apenas testes de snapshot, descrever abaixo)
- [x] A documentação no mdx foi feita ou atualizada, caso necessário
- [x] O eslint passou localmente

### 1 - Resumo

Adiciona opção de exibir um input de busca na parte superior da
DataTable.

### 2 - Tipo de pull request

- [ ] 🧱 Novo componente
- [x] ✨ Nova feature ou melhoria
- [ ] 🐛 Fix
- [ ] 👨‍💻 Refatoração
- [ ] 📝 Documentação
- [ ] 🎨 Estilo
- [ ] 🤖 Build ou CI/CD


### 3 - Esse PR fecha alguma issue? Favor referenciá-la

Não

### 4 - Quais são os passos para avaliar o pull request?

- Acesse a DataTable e ative a prop `withSearch`;
- Verifique que será exibida uma barra de pesquisa na parte superior da
tabela;
- Verifique que, ao digitar e passar um intervalo de 500ms sem alterar o
conteúdo da pesquisa, é emitido um evento de busca (verifique o console
do storybook);
- Deixe seu like e se inscreva no canal.

### 5 - Imagem ou exemplo de uso:

### 6 - Esse pull request adiciona _breaking changes_?
- [ ] Sim
- [x] Não

Author: lucasn4s

package.json

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

src/components/DataTable.vue

@@ -2,26 +2,44 @@
 	<div>
 		<div class="data-table">
 			<div class="data-table__header">
-				<div class="data-table__items-counter">
+				<CdsSearchInput
+					v-if="withSearch"
+					v-model="internalSearch"
+					hide-label
+					fluid
+					@update:model-value="handleSearchInput"
+				/>
+				<div
+					v-else
+					class="data-table__items-counter"
+				>
 					{{ totalItems }} {{ totalItems === 1 ? 'registro encontrado' : 'registros encontrados' }}
 				</div>
 
 				<cds-flexbox
+					class="data-table__actions"
 					gap="3"
 					align="center"
+					justify="flex-end"
 				>
 					<!-- @slot Slot para renderização de conteúdo à direita do DataTable header. -->
 					<slot name="right" />
 
 					<cds-button
 						v-if="!hideCustomizeButton"
-						size="sm"
+						:size="withSearch ? 'md' : 'sm'"
 						secondary
 						@button-click="handleCustomizeButtonClick"
 					>
 						Personalizar tabela
 					</cds-button>
 				</cds-flexbox>
+				<div
+					v-if="withSearch"
+					class="data-table__items-counter--below"
+				>
+					{{ totalItems }} {{ totalItems === 1 ? 'registro encontrado' : 'registros encontrados' }}
+				</div>
 			</div>
 
 			<div class="data-table__table-container">
@@ -68,12 +86,13 @@
 
 <script setup>
 import { ref, watch, computed } from 'vue';
+import { cloneDeep } from 'lodash';
+import { useHasSlot } from '../utils/composables/useHasSlot';
 import CdsButton from './Button.vue';
 import CdsTable from './Table.vue';
 import CustomFieldsSideSheet from './InternalComponents/CustomFieldsSideSheet.vue';
 import CdsFlexbox from './Flexbox.vue';
-import { useHasSlot } from '../utils/composables/useHasSlot';
-import { cloneDeep } from 'lodash';
+import CdsSearchInput from './SearchInput.vue';
 
 const hasHeaderSlot = useHasSlot('header-item');
 
@@ -129,11 +148,20 @@ const props = defineProps({
 		default: 0,
 		validator: (value) => value >= 0,
 	},
+	/**
+ 	* Especifica se a barra de busca da tabela deve ser exibida.
+	*/
+	withSearch: {
+		type: Boolean,
+		default: false,
+	},
 });
 
-const emits = defineEmits(['update-fields-list', 'customize-click']);
+const emits = defineEmits(['update-fields-list', 'customize-click', 'search']);
 
 const showSideSheet = ref(false);
+const internalSearch = ref('');
+const searchTimeout = ref(null);
 const internalCustomFieldsList = ref(cloneDeep(props.customFieldsList));
 
 const computedMaxVisibleFields = computed(() => {
@@ -162,6 +190,12 @@ function handleOk(fieldsList) {
 	emits('update-fields-list', fieldsList);
 }
 
+function handleSearchInput(value) {
+	clearTimeout(searchTimeout.value);
+	searchTimeout.value = setTimeout(() => {
+		emits('search', value);
+	}, 500);
+}
 </script>
 
 <style lang="scss" scoped>
@@ -173,15 +207,28 @@ function handleOk(fieldsList) {
 	justify-content: center;
 	gap: tokens.spacer(3);
 
+	&__actions {
+		width: 100%;
+	}
+
 	&__header {
-		display: flex;
-		justify-content: space-between;
-		align-items: flex-end;
+		display: grid;
+		grid-template-columns: 1fr auto;
+		column-gap: spacer(4);
+		width: 100%;
+		align-items: center;
 	}
 
 	&__items-counter {
 		@include tokens.caption;
 		color: tokens.$n-600;
+		display: flex;
+		align-items: flex-end;
+
+		&--below {
+			@extend .data-table__items-counter;
+			margin: mt(3);
+		}
 	}
 
 	&__table-container {

src/stories/components/DataTable.stories.mdx

@@ -59,6 +59,7 @@ export const Template = (args) => ({
 			@customize-click="logCustomizeButtonClick"
 			@update-fields-list="logUpdateCustomFields($event)"
 			@cancel="logCancelClick"
+			@search="logSearchInput"
 		>
 		</cds-data-table>
 		<br>
@@ -73,6 +74,9 @@ export const Template = (args) => ({
 		logUpdateCustomFields(event) {
 			console.info('%cUpdate custom fields event: ', 'color:rgb(52, 207, 200);', event);
 		},
+		logSearchInput(event) {
+			console.info('%cSearch input event: ', 'color:rgb(42, 124, 34);', event);
+		},
 	},
 	updated() {
 		console.info('%cv-model: ', 'color: #2C70CD;', this.selected);

src/tests/__snapshots__/DataTable.spec.ts.snap

@@ -5,7 +5,8 @@ exports[`DataTable > renders correctly 1`] = `
   <div data-v-046d4556="" class="data-table">
     <div data-v-046d4556="" class="data-table__header">
       <div data-v-046d4556="" class="data-table__items-counter">200 registros encontrados</div>
-      <cds-flexbox-stub data-v-046d4556="" direction="row" wrap="wrap" gap="3" justify="flex-start" align="center" tag="div" fluid="false"></cds-flexbox-stub>
+      <cds-flexbox-stub data-v-046d4556="" direction="row" wrap="wrap" gap="3" justify="flex-end" align="center" tag="div" fluid="false" class="data-table__actions"></cds-flexbox-stub>
+      <!--v-if-->
     </div>
     <div data-v-046d4556="" class="data-table__table-container">
       <cds-table-stub data-v-046d4556="" modelvalue="" items="[object Object],[object Object]" fields="field1,field2,field3" hover="false" allowselection="false" selectionvariant="green" sortable="false" fixedheader="false" sortdesc="false" nowrap="false"></cds-table-stub>