@v1nt1248/3nclient-lib 0.1.45 → 0.1.46

package/package.json

@@ -2,7 +2,7 @@
   "name": "@v1nt1248/3nclient-lib",
   "license": "AGPL-3.0-or-later",
   "author": "v1nt1248",
-  "version": "0.1.45",
+  "version": "0.1.46",
   "description": "Library for 3NWeb clients",
   "type": "module",
   "files": [

package/src/components/ui3n-table/types.ts

@@ -17,6 +17,7 @@ export type Ui3nTableConfig<T extends Ui3nTableBodyBaseItem, K extends keyof T =
   // draggableColumns?: boolean; // ToDo this will be done in the next version
   columnStyle?: { [P in Omit<K, 'id'> as string | number]: Record<string, string> };
   fieldAsRowKey?: keyof T;
+  showNoDataMessage?: boolean;
 };
 
 export type Ui3nTableHeadProps<T extends Ui3nTableBodyBaseItem> = {
@@ -42,9 +43,14 @@ export interface Ui3nTableProps<T extends Ui3nTableBodyBaseItem> {
 
 export interface Ui3nTableEmits<T extends Ui3nTableBodyBaseItem> {
   (ev: 'change:sort', val: Ui3nTableSort<T>): void;
+
   (ev: 'select:row', val: T[]): void;
 }
 
+export type Ui3nTableNoDataSlot = {
+  'no-data': () => VNode;
+};
+
 export type Ui3nTableGroupActionsSlot = {
   'group-actions': () => VNode;
 };
@@ -80,7 +86,8 @@ export type Ui3nTableBodyRowCellSlot<T extends Ui3nTableBodyBaseItem, K extends
   [p in `row-cell-${K}`]: (scope: Ui3nTableBodyRowCellSlotScope<T, K>) => VNode;
 };
 
-export type Ui3nTableSlots<T extends Ui3nTableBodyBaseItem, K extends string & keyof T> = Ui3nTableGroupActionsSlot &
+export type Ui3nTableSlots<T extends Ui3nTableBodyBaseItem, K extends string & keyof T> = Ui3nTableNoDataSlot &
+  Ui3nTableGroupActionsSlot &
   Ui3nTableHeaderCellSlot<T, K> &
   Ui3nTableBodyRowSlot<T> &
   Ui3nTableBodyRowCellSlot<T, K>;

package/src/components/ui3n-table/ui3n-table.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts" generic="T extends Ui3nTableBodyBaseItem">
+  import size from 'lodash/size';
   import { useTable } from './composables/useTable';
   import type { Ui3nTableBodyBaseItem, Ui3nTableEmits, Ui3nTableProps, Ui3nTableSlots } from './types';
   import Ui3nButton from '../ui3n-button/ui3n-button.vue';
@@ -98,61 +99,69 @@
 
     <!-- table body -->
     <div :class="$style.body">
-      <template v-if="$slots['row']">
-        <div
-          v-for="(row, rowIndex) in body.content"
-          :key="getRowKey(row, rowIndex)"
-          :class="[$style.row, isRowSelected(row) && $style.selected, config.selectable && $style.selectable]"
-        >
-          <slot
-            name="row"
-            :row="row"
-            :row-style="getRowStyle(row)"
-            :row-index="rowIndex"
-            :is-row-selected="isRowSelected(row)"
-            :column-style="config?.columnStyle"
-            :events="eventHandlers"
-          />
-        </div>
+      <template v-if="config?.showNoDataMessage && !size(body.content)">
+        <slot name="no-data">
+          <div :class="$style.noData">No data</div>
+        </slot>
       </template>
 
       <template v-else>
-        <div
-          v-for="(row, rowIndex) in body.content"
-          :key="getRowKey(row, rowIndex)"
-          :class="[$style.row, isRowSelected(row) && $style.selected, config.selectable && $style.selectable]"
-          :style="getRowStyle(row)"
-        >
+        <template v-if="$slots['row']">
           <div
-            v-if="config.selectable"
-            :class="$style.rowCheckbox"
+            v-for="(row, rowIndex) in body.content"
+            :key="getRowKey(row, rowIndex)"
+            :class="[$style.row, isRowSelected(row) && $style.selected, config.selectable && $style.selectable]"
           >
-            <ui3n-checkbox
-              :model-value="isRowSelected(row)"
-              @change="processSelection(row)"
+            <slot
+              name="row"
+              :row="row"
+              :row-style="getRowStyle(row)"
+              :row-index="rowIndex"
+              :is-row-selected="isRowSelected(row)"
+              :column-style="config?.columnStyle"
+              :events="eventHandlers"
             />
           </div>
+        </template>
 
-          <template
-            v-for="(col, colIndex) in visibleColumns"
-            :key="col.key"
+        <template v-else>
+          <div
+            v-for="(row, rowIndex) in body.content"
+            :key="getRowKey(row, rowIndex)"
+            :class="[$style.row, isRowSelected(row) && $style.selected, config.selectable && $style.selectable]"
+            :style="getRowStyle(row)"
           >
-            <div :class="[$style.bodyItem, colIndex === 0 && $style.bodyItemFirst]">
-              <slot
-                :name="`row-cell-${col.key as string & keyof T}`"
-                :row="row"
-                :row-index="rowIndex"
-                :is-row-selected="isRowSelected(row)"
-                :column-style="config?.columnStyle"
-                :cell="row[col.key]"
-              >
+            <div
+              v-if="config.selectable"
+              :class="$style.rowCheckbox"
+            >
+              <ui3n-checkbox
+                :model-value="isRowSelected(row)"
+                @change="processSelection(row)"
+              />
+            </div>
+
+            <template
+              v-for="(col, colIndex) in visibleColumns"
+              :key="col.key"
+            >
+              <div :class="[$style.bodyItem, colIndex === 0 && $style.bodyItemFirst]">
+                <slot
+                  :name="`row-cell-${col.key as string & keyof T}`"
+                  :row="row"
+                  :row-index="rowIndex"
+                  :is-row-selected="isRowSelected(row)"
+                  :column-style="config?.columnStyle"
+                  :cell="row[col.key]"
+                >
                 <span :class="$style.cell">
                   {{ row[col.key] }}
                 </span>
-              </slot>
-            </div>
-          </template>
-        </div>
+                </slot>
+              </div>
+            </template>
+          </div>
+        </template>
       </template>
     </div>
   </div>
@@ -317,4 +326,17 @@
     font-weight: 400;
     color: var(--color-text-table-primary-default);
   }
+
+  .noData {
+    position: relative;
+    width: 100%;
+    height: var(--spacing-xxl);
+    padding-top: var(--spacing-ml);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    font-size: var(--font-12);
+    font-weight: 600;
+    color: var(--color-text-control-secondary-default);
+  }
 </style>