@merkaly/nuxt 0.4.3 → 0.4.5

package/dist/module.json

@@ -4,7 +4,7 @@
   "compatibility": {
     "nuxt": ">=3.0.0"
   },
-  "version": "0.4.3",
+  "version": "0.4.5",
   "builder": {
     "@nuxt/module-builder": "1.0.2",
     "unbuild": "3.6.1"

package/dist/module.mjs

@@ -26,13 +26,18 @@ const module = defineNuxtModule({
     }
   },
   meta: { name: "@merkaly/nuxt", configKey: "merkaly", compatibility: { nuxt: ">=3.0.0" } },
-  moduleDependencies: {
-    "@bootstrap-vue-next/nuxt": {},
-    "@nuxt/eslint": {},
-    "@nuxt/fonts": {},
-    "@nuxt/image": {},
-    "@nuxtjs/plausible": {},
-    "@vueuse/nuxt": {}
+  moduleDependencies(nuxt) {
+    const dependencies = {
+      "@bootstrap-vue-next/nuxt": {},
+      "@nuxt/eslint": {},
+      "@nuxt/fonts": {},
+      "@nuxt/image": {},
+      "@vueuse/nuxt": {}
+    };
+    if (nuxt.options.merkaly?.plausible) {
+      dependencies["@nuxtjs/plausible"] = {};
+    }
+    return dependencies;
   },
   async setup(options, nuxt) {
     const moduleResolver = createResolver(import.meta.url);

package/dist/runtime/components/table/TableDatagrid.vue

@@ -52,15 +52,26 @@ const visibleItems = computed(() => {
   const start = Math.max(0, paginationText.value.values.current - 1);
   return $datagrid.value.items.slice(start, paginationText.value.values.final);
 });
-const selectedItems = computed(() => $datagrid.value.items.filter((it) => it._checked));
-const checkboxAllAttrs = computed(() => {
-  const attrs = {};
-  const values = selectedItems.value.map((it) => it._checked);
-  const allChecked = values.length > 0 && values.every(Boolean);
-  const someChecked = values.some(Boolean);
-  attrs["checked"] = allChecked;
-  attrs["indeterminate"] = !allChecked && someChecked;
-  return attrs;
+const selectionState = computed(() => {
+  const selectedItems = [];
+  for (const item of $datagrid.value.items) {
+    if (item._checked) {
+      selectedItems.push(item);
+    }
+  }
+  const selectedCount = selectedItems.length;
+  const totalCount = $datagrid.value.items.length;
+  const allChecked = totalCount > 0 && selectedCount === totalCount;
+  const someChecked = selectedCount > 0;
+  return {
+    allChecked,
+    checkboxAllAttrs: {
+      checked: allChecked,
+      indeterminate: !allChecked && someChecked
+    },
+    selectedCount,
+    selectedItems
+  };
 });
 function toggleCheckAll() {
   const allChecked = $datagrid.value.items.every((it) => it._checked);
@@ -78,15 +89,25 @@ function emitSearch() {
   $datagrid.value.page = 1;
   emit("fetch", "search");
 }
+function getRowKey(item, idx) {
+  return $datagrid.value.row?.(item, idx)?.key ?? idx;
+}
+function getRowAttrs(item, idx) {
+  const row = $datagrid.value.row?.(item, idx);
+  return {
+    ...row?.attrs ?? {},
+    ...row?.class ? { class: row.class } : {}
+  };
+}
 </script>
 
 <template>
   <BCard no-body>
-    <BCardHeader v-if="!props.hideHeader" class="align-items-center p-4">
+    <BCardHeader v-if="!props.hideHeader" class="align-items-center p-4 position-relative">
       <BCardTitle>
-        <div v-if="hasBulkSlot && !props.hideSelect && selectedItems.length" class="w-35px">
+        <div v-if="hasBulkSlot && !props.hideSelect && selectionState.selectedCount" class="w-35px">
           <DropdownIcon icon="caret-down" size="sm" toggle-class="p-2">
-            <slot name="bulk" v-bind="{ items: selectedItems, count: selectedItems.length }" />
+            <slot name="bulk" v-bind="{ items: selectionState.selectedItems, count: selectionState.selectedCount }" />
           </DropdownIcon>
         </div>
 
@@ -146,6 +167,14 @@ function emitSearch() {
           </BButton>
         </template>
       </div>
+
+      <BProgress
+        v-if="$datagrid.loading"
+        :value="100"
+        animated
+        height="5px"
+        class="rounded-0 position-absolute w-100 start-0"
+        style="bottom: -6px; z-index: 10" />
     </BCardHeader>
 
     <BTableSimple
@@ -165,12 +194,12 @@ function emitSearch() {
                 :disabled="$datagrid.loading"
                 class="form-check-input"
                 type="checkbox"
-                v-bind="checkboxAllAttrs"
+                v-bind="selectionState.checkboxAllAttrs"
                 @input="toggleCheckAll()">
             </div>
           </BTh>
 
-          <template v-for="(column, key) in $datagrid.columns" :key="key">
+          <template v-for="[key, column] in visibleColumns" :key="key">
             <BTh :class="[column.class, column.thClass]">
               <slot :name="`head[${key}]`" v-bind="{ column, key }">
                 <span v-text="column.title ?? sentenceCase(key)" />
@@ -182,15 +211,7 @@ function emitSearch() {
         </BTr>
       </BThead>
 
-      <BTbody v-if="$datagrid.loading">
-        <BTd :colspan="tableColspan">
-          <div class="text-center">
-            <BSpinner variant="primary" />
-          </div>
-        </BTd>
-      </BTbody>
-
-      <BTbody v-else-if="!visibleItems.length">
+      <BTbody v-if="!visibleItems.length">
         <BTd :colspan="tableColspan">
           <slot name="empty">
             <div class="text-center text-muted" v-text="props.emptyText" />
@@ -199,8 +220,8 @@ function emitSearch() {
       </BTbody>
 
       <BTbody v-else class="fw-semibold text-gray-600">
-        <template v-for="(item, idx) in visibleItems" :key="idx">
-          <BTr>
+        <template v-for="(item, idx) in visibleItems" :key="getRowKey(item, idx)">
+          <BTr v-bind="getRowAttrs(item, idx)">
             <BTd v-if="hasDetailsSlot" class="p-0 w-25px">
               <BButton
                 class="w-25px h-100 rounded-0 p-0 border-end border-dashed"
@@ -217,10 +238,10 @@ function emitSearch() {
               </div>
             </BTd>
 
-            <template v-for="(column, key) in $datagrid.columns" :key="key">
+            <template v-for="[key, column] in visibleColumns" :key="key">
               <BTd :class="[column.class, column.tdClass]">
                 <slot :name="`row[${key}]`" v-bind="{ column, idx, item, key }">
-                  <span v-text="column.getter?.(item) || getItemValue(item, key)" />
+                  <span v-text="column.getter?.(item) ?? getItemValue(item, key)" />
                 </slot>
               </BTd>
             </template>

package/dist/runtime/composables/useDatagrid.d.ts

@@ -1,25 +1,33 @@
 export interface ColumnDefinition<C = unknown> {
     class?: string;
-    getter?: (row: C) => any;
+    getter?: (row: C) => unknown;
     tdClass?: string;
     thClass?: string;
     title?: string;
-    type?: any;
+    type?: unknown;
 }
 export type DataGridItem<C> = C;
+export type DataGridRowAttrs = Record<string, unknown>;
+export type DataGridRowKey = string | number;
+export interface DataGridRowDefinition {
+    attrs?: DataGridRowAttrs;
+    class?: string;
+    key?: DataGridRowKey;
+}
 export interface DataGrid<C = unknown> {
     columns: Record<string, ColumnDefinition<C>>;
     error: unknown;
+    fn: {
+        addItem: (item: C) => DataGridItem<C>[];
+        removeItem: (predicate: (item: DataGridItem<C>, index: number) => boolean) => number;
+    };
     items: DataGridItem<C>[];
     limit: number;
     loading: boolean;
     page: number;
+    row?: (item: C, index: number) => DataGridRowDefinition;
     search: string;
     total: number;
-    fn: {
-        addItem: (item: C) => DataGridItem<C>[];
-        removeItem: (predicate: (item: DataGridItem<C>, index: number) => boolean) => number;
-    };
 }
 interface OptionArgs<D> {
     columns: Record<string, ColumnDefinition<D>>;
@@ -27,6 +35,7 @@ interface OptionArgs<D> {
     items?: D[];
     limit?: number;
     loading?: boolean;
+    row?: (item: D, index: number) => DataGridRowDefinition;
     search?: string;
     total?: number;
 }

package/dist/runtime/composables/useDatagrid.js

@@ -3,12 +3,6 @@ export function useDatagrid(params) {
   const state = reactive({
     columns: params.columns,
     error: params.error ?? null,
-    items: params.items ?? [],
-    search: params.search,
-    limit: params.limit ?? 10,
-    loading: params.loading ?? false,
-    page: 1,
-    total: params.total ?? 0,
     fn: {
       addItem(item) {
         state.items.push(item);
@@ -21,7 +15,14 @@ export function useDatagrid(params) {
         }
         return index;
       }
-    }
+    },
+    items: params.items ?? [],
+    limit: params.limit ?? 10,
+    loading: params.loading ?? false,
+    page: 1,
+    row: params.row,
+    search: params.search ?? "",
+    total: params.total ?? 0
   });
   return state;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@merkaly/nuxt",
-  "version": "0.4.3",
+  "version": "0.4.5",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/merkaly-io/nuxt.git"