Support for message in empty table body (#403)

src/components/TableNext/Table.vue

@@ -8,7 +8,7 @@
 </template>
 
 <script setup>
-import {provide, toRefs, defineEmits} from 'vue';
+import {provide, toRefs, defineEmits, ref} from 'vue';
 
 const emit = defineEmits([
 	/**
@@ -32,69 +32,13 @@ const props = defineProps({
 
 const {sortDescriptor} = toRefs(props);
 
+const columnsCount = ref(0);
+
 const tableContext = {
 	sortDescriptor,
 	onSort,
+	columnsCount,
 };
 
 provide('tableContext', tableContext);
 </script>
-
-<style lang="less">
-@import '../../styles/_import';
-
-.pkpTableNext {
-	width: 100%;
-	max-width: 100%;
-	border: @grid-border;
-	border-collapse: collapse;
-	border-radius: 10px;
-	font-size: @font-sml;
-	line-height: 1.2em;
-
-	td,
-	th {
-		padding: 0.5rem 1rem;
-		font-weight: @normal;
-		text-align: inherit;
-
-		&:focus {
-			outline: 0;
-			box-shadow: inset 0 0 0 1px @primary;
-		}
-	}
-
-	tr {
-		&:nth-child(even) {
-			background: @bg-very-light;
-		}
-	}
-
-	thead {
-		tr {
-			background: @table-header;
-		}
-
-		th {
-			font-size: @font-tiny;
-			font-weight: @semibold;
-			text-transform: uppercase;
-		}
-	}
-}
-
-[dir='rtl'] {
-	.pkpTable {
-		thead {
-			.pkpTable__sortIcon {
-				right: auto;
-				left: 4px;
-			}
-		}
-	}
-}
-
-.pkpTable + .pkpPagination {
-	margin-top: 1rem;
-}
-</style>

src/components/TableNext/TableBody.vue

@@ -1,3 +1,37 @@
 <template>
-	<tbody class=""><slot></slot></tbody>
+	<tbody class="">
+		<slot></slot>
+		<tr v-if="noContent" class="">
+			<td
+				:colspan="tableContext.columnsCount.value"
+				class="border-x border-b border-light p-4 text-center text-base-normal"
+			>
+				{{ emptyText }}
+			</td>
+		</tr>
+	</tbody>
 </template>
+
+<script setup>
+import {useSlots, computed, inject} from 'vue';
+import {useLocalize} from '@/composables/useLocalize';
+
+const props = defineProps({
+	emptyText: {type: String, default: ''},
+});
+const slots = useSlots();
+
+const {t} = useLocalize();
+
+const tableContext = inject('tableContext');
+
+const noContent = computed(() => {
+	const defaultSlot = slots.default();
+
+	return !defaultSlot?.[0]?.children?.length;
+});
+
+const emptyText = computed(() => {
+	return props.emptyText || t('grid.noItems');
+});
+</script>

src/components/TableNext/TableColumn.vue

@@ -31,8 +31,6 @@ const props = defineProps({
 });
 
 const tableContext = inject('tableContext');
-</script>
 
-<style lang="less">
-@import '../../styles/_import';
-</style>
+tableContext.columnsCount.value++;
+</script>