Merge pull request #1031 from Sysvale/feature/add-loading-on-cds-table

feat: Adiciona prop loading para CdsTable

Author: johnn1sbo3s

package.json

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

src/components/Table.vue

@@ -1,6 +1,23 @@
 <!-- eslint-disable vue/multi-word-component-names -->
 <template>
-	<table class="table__container">
+	<div v-if="loading">
+		<CdsTable
+			:fields="fields"
+			:items="[{}, {}, {}, {}]"
+		>
+			<template #table-item>
+				<CdsSkeleton
+					width="100"
+					height="20"
+				/>
+			</template>
+		</CdsTable>
+	</div>
+
+	<table
+		v-else
+		class="table__container"
+	>
 		<thead>
 			<tr class="table__header">
 				<th
@@ -233,6 +250,13 @@ export default {
 			type: Boolean,
 			default: false,
 		},
+		/**
+		* Ativa o estado de carregamento do componente, exibindo um Skeleton para a tabela.
+		*/
+		loading: {
+			type: Boolean,
+			default: false,
+		},
 	},
 
 	data() {
@@ -425,6 +449,7 @@ export default {
 
 .table {
 	&__container {
+		display: table !important;
 		position: relative !important;
 		border: 1px solid tokens.$n-30 !important;
 		border-collapse: separate !important;

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

@@ -15,7 +15,7 @@ exports[`DataTable > renders correctly 1`] = `
       <!--v-if-->
     </div>
     <div data-v-046d4556="" id="mock-id-3" 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" transparent="false"></cds-table-stub>
+      <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" transparent="false" loading="false"></cds-table-stub>
     </div>
   </div>
   <custom-fields-side-sheet-stub data-v-046d4556="" trackby="id" minfields="1" maxfields="Infinity" customfieldslist="[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]" customfieldssearchable="false" selectionvariant="green" presetsoptions="" loadingcustomfields="false" shoulddisableokbutton="false" modelvalue="false"></custom-fields-side-sheet-stub>

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

@@ -36,7 +36,7 @@ exports[`DateInput > renders correctly 1`] = `
     <div data-v-fcd39cd1="" class="date-input__calendar--down" style="display: none;">
       <div data-v-fcd39cd1="" class="calendar__header">
         <div data-v-c2ac4e6d="" data-v-fcd39cd1="" class="flexbox">
-          <!-- @slot Slot com o conteúdo interno do FlexBox --><span data-v-fcd39cd1="" class="calendar__month-and-title">outubro</span><span data-v-fcd39cd1="" class="calendar__month-and-title">2025</span>
+          <!-- @slot Slot com o conteúdo interno do FlexBox --><span data-v-fcd39cd1="" class="calendar__month-and-title">novembro</span><span data-v-fcd39cd1="" class="calendar__month-and-title">2025</span>
         </div>
         <div data-v-c2ac4e6d="" data-v-fcd39cd1="" class="flexbox">
           <!-- @slot Slot com o conteúdo interno do FlexBox --><svg data-v-fcd39cd1="" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" aria-labelledby="caret-up-outline" role="presentation" class="calendar__right-caret">
@@ -61,6 +61,9 @@ exports[`DateInput > renders correctly 1`] = `
         <div data-v-fcd39cd1="" class="calendar__week-day">D</div>
         <div data-v-fcd39cd1="" class="calendar__empty-day"></div>
         <div data-v-fcd39cd1="" class="calendar__empty-day"></div>
+        <div data-v-fcd39cd1="" class="calendar__empty-day"></div>
+        <div data-v-fcd39cd1="" class="calendar__empty-day"></div>
+        <div data-v-fcd39cd1="" class="calendar__empty-day"></div>
         <div data-v-fcd39cd1="" class="calendar__day--green" disabled="false">1</div>
         <div data-v-fcd39cd1="" class="calendar__day--green" disabled="false">2</div>
         <div data-v-fcd39cd1="" class="calendar__day--green" disabled="false">3</div>
@@ -91,7 +94,6 @@ exports[`DateInput > renders correctly 1`] = `
         <div data-v-fcd39cd1="" class="calendar__day--green" disabled="false">28</div>
         <div data-v-fcd39cd1="" class="calendar__day--green" disabled="false">29</div>
         <div data-v-fcd39cd1="" class="calendar__day--green" disabled="false">30</div>
-        <div data-v-fcd39cd1="" class="calendar__day--green" disabled="false">31</div>
       </div>
       <div data-v-958116c6="" data-v-44dffe1e="" data-v-fcd39cd1="" class="grid month-selector__grid" style="display: none;">
         <!-- @slot Slot com o conteúdo interno da grid -->