Merge pull request #936 from Sysvale/bugfix/data-table-slots

Bugfix/data table slots

Author: RafaelGondi

package.json

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

src/components/DataTable.vue

@@ -6,26 +6,45 @@
 					{{ totalItems }} registros encontrados
 				</div>
 
-				<!-- @slot Slot para renderização de conteúdo à direita do DataTable header. -->
-				<div v-if="hasSlots">
+				<cds-flexbox
+					gap="3"
+					align="center"
+				>
+					<!-- @slot Slot para renderização de conteúdo à direita do DataTable header. -->
 					<slot name="right" />
-				</div>
 
-				<div v-else>
 					<cds-button
+						v-if="!hideCustomizeButton"
 						size="sm"
 						secondary
 						@button-click="showSideSheet = true"
 					>
 						Personalizar tabela
 					</cds-button>
-				</div>
+				</cds-flexbox>
 			</div>
 
 			<cds-table
 				v-bind="$attrs"
 				:selection-variant="selectionVariant"
-			/>
+			>
+				<template
+					v-if="hasHeaderSlot"
+					#header-item="data"
+				>
+					<slot
+						name="header-item"
+						:data="data"
+					/>
+				</template>
+
+				<template #table-item="data">
+					<slot
+						name="table-item"
+						:data="data"
+					/>
+				</template>
+			</cds-table>
 		</div>
 
 		<cds-side-sheet
@@ -97,10 +116,10 @@ import CdsTable from './Table.vue';
 import CdsSideSheet from './SideSheet.vue';
 import CdsIcon from './Icon.vue';
 import CdsFlexbox from './Flexbox.vue';
-import { useHasSlots } from '../utils/composables/useHasSlots';
+import { useHasSlot } from '../utils/composables/useHasSlot';
 import { cloneDeep } from 'lodash';
 
-const hasSlots = useHasSlots();
+const hasHeaderSlot = useHasSlot('header-item');
 
 const props = defineProps({
 	/**
@@ -123,7 +142,14 @@ const props = defineProps({
 	customFieldsList: {
 		type: Array,
 		default: () => [],
-	}
+	},
+	/**
+	* Especifica se o botão de personalizar tabela deve ser escondido.
+	*/
+	hideCustomizeButton: {
+		type: Boolean,
+		default: false,
+	},
 });
 
 const emits = defineEmits(['update-fields-list']);

src/stories/components/DataTable.stories.mdx

@@ -35,7 +35,7 @@ import DataTable from '../../components/DataTable.vue';
 `<cds-data-table
 	:fields="fields"
 	:items="items"
-	:total="100"
+	:totalItems="100"
 />`
 			},
 		}

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

@@ -4,10 +4,8 @@ exports[`DataTable > renders correctly 1`] = `
 "<div data-v-046d4556="" fields="field1,field2,field3" items="[object Object],[object Object]">
   <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><!-- @slot Slot para renderização de conteúdo à direita do DataTable header. -->
-      <div data-v-046d4556="">
-        <cds-button-stub data-v-046d4556="" variant="green" size="sm" block="false" text="Lorem ipsum" disabled="false" secondary="true" loading="false"></cds-button-stub>
-      </div>
+      <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"></cds-flexbox-stub>
     </div>
     <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>
   </div>