Fixed misprints and refactored code. Divded toggleRowExpand event

vuelessjs · Jan 9, 2025 · f2060d3 · f2060d3
1 parent 88278c7
commit f2060d3
Show file tree

Hide file tree

Showing 4 changed files with 30 additions and 15 deletions.
diff --git a/src/ui.data-table/UTable.vue b/src/ui.data-table/UTable.vue
@@ -69,10 +69,16 @@ const emit = defineEmits([
   "clickCell",
 
   /**
-   * Tirggers when row expand state changed.
+   * Tirggers when row expanded.
    * @property {object} row
    */
-  "toggleRowExpand",
+  "row-expand",
+
+  /**
+   * Tirggers when row collapsed.
+   * @property {object} row
+   */
+  "row-collapse",
 
   /**
    * Triggers when table rows are selected (updated).
@@ -390,8 +396,12 @@ function onToggleRowVisibility(rowId: string | number) {
   tableRows.value = tableRows.value.map((row) => toggleRowVisibility({ ...row }, rowId));
 }
 
-function onToggleExpand(row: Row) {
-  emit("toggleRowExpand", row);
+function onToggleExpand(row: Row, expanded: boolean) {
+  if (expanded) {
+    emit("row-expand", row);
+  } else {
+    emit("row-collapse", row);
+  }
 }
 
 defineExpose({
@@ -686,7 +696,7 @@ const {
                 #[`cell-${key}`]="slotValues"
               >
                 <!--
-                  @slot Use it to customise needed table cell.
+                  @slot Use it to customize needed table cell.
                   @binding {string} value
                   @binding {object} row
                   @binding {number} index
@@ -698,8 +708,13 @@ const {
                   :index="index"
                 />
               </template>
-              <template #expand="slotValues">
-                <slot name="expand" :row="slotValues.row" :is-expanded="slotValues.isExpanded" />
+
+              <template #expand="{ row: expandedRow, expanded }">
+                <!--
+                  @slot Use it to customize row expand icon.
+                  @binding {object} row
+                -->
+                <slot name="expand" :row="expandedRow" :expanded="expanded" />
               </template>
               <template #nested-content>
                 <!--

diff --git a/src/ui.data-table/UTableRow.vue b/src/ui.data-table/UTableRow.vue
@@ -233,8 +233,8 @@ function getRowAttrs(rowId: string | number) {
     : props.attrs.bodyRowAttrs.value;
 }
 
-function onToggleExpand(row: Row) {
-  emit("toggleExpand", row);
+function onToggleExpand(row: Row, expanded?: boolean) {
+  emit("toggleExpand", row, expanded || isExpanded(row));
 }
 </script>
 
@@ -277,7 +277,7 @@ function onToggleExpand(row: Row) {
           :data-row-toggle-icon="row.id"
           @click.stop="() => (onClickToggleIcon(), onToggleExpand(row))"
         >
-          <slot name="expand" :row="row" :is-expanded="isExpanded(row)">
+          <slot name="expand" :row="row" :expanded="isExpanded(row)">
             <div
               v-show="isShownToggleIcon"
               ref="toggle-wrapper"
@@ -369,7 +369,7 @@ function onToggleExpand(row: Row) {
     </template>
 
     <template #expand="slotValues: RowScopedExpandProps">
-      <slot name="expand" :row="slotValues.row" :is-expanded="slotValues.isExpanded" />
+      <slot name="expand" :row="slotValues.row" :expanded="slotValues.expanded" />
     </template>
   </UTableRow>
 
@@ -410,7 +410,7 @@ function onToggleExpand(row: Row) {
           />
         </template>
         <template #expand="slotValues: RowScopedExpandProps">
-          <slot name="expand" :row="slotValues.row" :is-expanded="slotValues.isExpanded" />
+          <slot name="expand" :row="slotValues.row" :expanded="slotValues.expanded" />
         </template>
       </UTableRow>
     </template>

diff --git a/src/ui.data-table/storybook/docs.mdx b/src/ui.data-table/storybook/docs.mdx
@@ -22,10 +22,10 @@ Keys you have/may to provide to component in row object.
 {`
 |  Key name         | Description                        | Type           | Required     |
 | ------------------| ---------------------------------- | ---------------| ------------ |
-| id                | A unique identifier for row        | String, Number | true         |
+| id                | A unique identifier for row        | String, Number | false        |
 | content           | Content to be rendered in the cell | Any            | false        |
 | isChecked         | Indicates if row checked           | Boolean        | false        |
-| isShown           | Indicated if nested row shown      | Boolean        | true         |
+| isShown           | Indicated if nested row shown      | Boolean        | fasle        |
 | rowDate           | Row date for date divider          | String, Date   | false        |
 `}
 </Markdown>

diff --git a/src/ui.data-table/types.ts b/src/ui.data-table/types.ts
@@ -53,7 +53,7 @@ export interface RowScopedProps {
 }
 
 export interface RowScopedExpandProps {
-  isExpanded: boolean;
+  expanded: boolean;
   row: Row;
 }