Merge pull request #63 from HC200ok/feature/expand-row-slot

async data for expand row

Author: HC200ok

package.json

@@ -3,7 +3,7 @@
   "author": "HC200ok",
   "description": "A customizable and easy-to-use data table component made with Vue.js 3.x.",
   "private": false,
-  "version": "1.3.3",
+  "version": "1.3.4",
   "types": "./types/main.d.ts",
   "license": "MIT",
   "files": [

src/components/DataTable.vue

@@ -94,7 +94,7 @@
                     'no-padding': noTdPadding,
                     'can-expand': column === 'expand',
                   }"
-                  @click="column === 'expand' ? updateExpandingItemIndexList(index, $event) : null"
+                  @click="column === 'expand' ? updateExpandingItemIndexList(index, item, $event) : null"
                 >
                   <slot
                     v-if="slots[`item-${column}`]"
@@ -124,7 +124,12 @@
               >
                 <td
                   :colspan="headersForRender.length"
+                  class="expand"
                 >
+                  <LoadingLine
+                    v-if="item.expandLoading"
+                    class="expand-loading"
+                  />
                   <slot
                     name="expand"
                     v-bind="item"
@@ -221,6 +226,7 @@ import MutipleSelectCheckBox from './MutipleSelectCheckBox.vue';
 import SingleSelectCheckBox from './SingleSelectCheckBox.vue';
 import RowsSelector from './RowsSelector.vue';
 import Loading from './Loading.vue';
+import LoadingLine from './LoadingLine.vue';
 import ButtonsPagination from './ButtonsPagination.vue';
 import PaginationArrows from './PaginationArrows.vue';
 
@@ -438,6 +444,10 @@ const props = defineProps({
     type: String,
     default: 'rows per page:',
   },
+  expandLoading: {
+    type: Boolean,
+    default: false,
+  },
 });
 
 const {
@@ -503,6 +513,7 @@ const emits = defineEmits([
   'update:itemsSelected',
   'update:serverOptions',
   'clickRow',
+  'expandRow',
 ]);
 
 const serverOptionsComputed = computed({
@@ -615,12 +626,13 @@ const headersForRender = computed((): HeaderForRender[] => {
 
 // expand
 const expandingItemIndexList = ref<number[]>([]);
-const updateExpandingItemIndexList = (expandingItemIndex: number, event: Event) => {
+const updateExpandingItemIndexList = (expandingItemIndex: number, expandingItem: Item, event: Event) => {
   event.stopPropagation();
   const index = expandingItemIndexList.value.indexOf(expandingItemIndex);
   if (index !== -1) {
     expandingItemIndexList.value.splice(index, 1);
   } else {
+    emits('expandRow', props.items.findIndex((item) => item === expandingItem));
     expandingItemIndexList.value.push(expandingItemIndex);
   }
 };
@@ -1205,6 +1217,14 @@ defineExpose({
             border: none;
             border-bottom: 1px solid v-bind(rowBorderColor);
             position: relative;
+            &.expand {
+              position: relative;
+              .expand-loading {
+                position: absolute;
+                top: 0px;
+                left: 0px;
+              }
+            }
             &.can-expand {
               cursor: pointer;
             }

src/components/LoadingLine.vue

@@ -0,0 +1,46 @@
+<template>
+  <div class="loader-line"></div>
+</template>
+
+<script lang="ts" setup>
+import { inject } from 'vue';
+
+const themeColor = inject('themeColor');
+</script>
+
+<style lang="scss" scoped>
+.loader-line {
+  width: 100%;
+  height: 3px;
+  position: relative;
+  overflow: hidden;
+  background-color: #ddd;
+  margin: 0x auto;
+}
+
+.loader-line:before {
+  content: "";
+  position: absolute;
+  left: -50%;
+  height: 3px;
+  width: 40%;
+  background-color: v-bind(themeColor);
+  -webkit-animation: lineAnim 1s linear infinite;
+  -moz-animation: lineAnim 1s linear infinite;
+  animation: lineAnim 1s linear infinite;
+}
+
+@keyframes lineAnim {
+  0% {
+    left: -40%;
+  }
+  50% {
+    left: 20%;
+    width: 80%;
+  }
+  100% {
+    left: 100%;
+    width: 100%;
+  }
+}
+</style>

src/mock.ts

@@ -1,3 +1,4 @@
+/* eslint-disable max-len */
 import { Item, ServerOptions, Header } from './types/main';
 
 export const headersMocked: Header[] = [
@@ -41,7 +42,7 @@ export const mockClientNestedItems = (itemsNumber = 100): Item[] => {
     mockItems.push({
       name: `name-${i}`,
       address: `address-${i}`,
-      info: {out: { height: i, weight: i }},
+      info: { out: { height: i, weight: i } },
       age: i,
       favouriteSport: sports[i % 4],
       favouriteFruits: fruits[i % 4],
@@ -59,7 +60,7 @@ export const mockDuplicateClientNestedItems = (itemsNumber = 100): Item[] => {
     mockItems.push({
       name: `name-${i}`,
       address: `address-${i}`,
-      info: {out: { height: i, weight: i }},
+      info: { out: { height: i, weight: i } },
       age: i,
       favouriteSport: sports[i % 4],
       favouriteFruits: fruits[i % 4],
@@ -77,6 +78,18 @@ export const mockDuplicateClientNestedItems = (itemsNumber = 100): Item[] => {
   return mockItems;
 };
 
+export const mockItemIntroduction = async (name: string): Promise<string> => {
+  // eslint-disable-next-line no-promise-executor-return
+  await new Promise((s) => setTimeout(s, 2000));
+  const briefs: Record<string, string> = {
+    'Stephen Curry': 'Wardell Stephen Curry II is an American professional basketball player for the Golden State Warriors of the National Basketball Association (NBA).',
+    'Lebron James': 'LeBron Raymone James Sr is an American professional basketball player for the Los Angeles Lakers of the National Basketball Association (NBA).',
+    'Kevin Durant': 'Kevin Wayne Durant also known by his initials KD, is an American professional basketball player for the Brooklyn Nets of the National Basketball Association (NBA).',
+    'Giannis Antetokounmpo': 'Giannis Sina Ugo Antetokounmpo (né Adetokunbo; December 6, 1994) is a Greek-Nigerian professional basketball player for the Milwaukee Bucks of the National Basketball Association (NBA).',
+  };
+  return briefs[name];
+};
+
 export const mockServerItems = async (
   serverOptions: ServerOptions,
   serverItemsLength = 500,