feat(table): add loading state

nuxt · Jun 6, 2023 · a15c40a · a15c40a
1 parent d91c0bb
commit a15c40a
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 1 deletion.
diff --git a/src/runtime/app.config.ts b/src/runtime/app.config.ts
@@ -29,6 +29,11 @@ const table = {
     label: 'text-sm text-center text-gray-900 dark:text-white',
     icon: 'w-6 h-6 mx-auto text-gray-400 dark:text-gray-500 mb-4'
   },
+  loadingState: {
+    wrapper: 'flex items-center justify-center px-6 py-10 sm:px-10',
+    label: 'text-sm text-center text-gray-900 dark:text-white ml-2',
+    icon: 'w-5 h-5 text-gray-400 dark:text-gray-500'
+  },
   default: {
     sortAscIcon: 'i-heroicons-bars-arrow-up-20-solid',
     sortDescIcon: 'i-heroicons-bars-arrow-down-20-solid',
@@ -43,6 +48,10 @@ const table = {
     emptyState: {
       icon: 'i-heroicons-circle-stack-20-solid',
       label: 'No items.'
+    },
+    loadingState: {
+      icon: 'i-heroicons-arrow-path animate-spin',
+      label: 'Loading...',
     }
   }
 }

diff --git a/src/runtime/components/data/Table.vue b/src/runtime/components/data/Table.vue
@@ -34,14 +34,25 @@
           </td>
         </tr>
 
-        <tr v-if="emptyState && !rows.length">
+        <tr v-if="emptyState && !rows.length && !isLoading">
           <td :colspan="columns.length">
             <div :class="ui.emptyState.wrapper">
               <UIcon v-if="emptyState.icon" :name="emptyState.icon" :class="ui.emptyState.icon" aria-hidden="true" />
               <p :class="ui.emptyState.label">
                 {{ emptyState.label }}
               </p>
             </div>
+
+        <tr v-if="isLoading">
+          <td :colspan="columns.length">
+            <slot name="loading-state">
+              <div :class="ui.loadingState.wrapper">
+                <UIcon v-if="loadingState.icon" :name="loadingState.icon" :class="ui.loadingState.icon" aria-hidden="true" />
+                <p :class="ui.loadingState.label">
+                  {{ loadingState.label }}
+                </p>
+              </div>
+            </slot>
           </td>
         </tr>
       </tbody>
@@ -111,6 +122,14 @@ export default defineComponent({
     ui: {
       type: Object as PropType<Partial<typeof appConfig.ui.table>>,
       default: () => appConfig.ui.table
+    },
+    isLoading: {
+      type: Boolean,
+      default: false
+    },
+    loadingState: {
+      type: Object as PropType<{ icon: string, label: string }>,
+      default: () => appConfig.ui.table.default.loadingState
     }
   },
   emits: ['update:modelValue'],