@merkaly/nuxt 0.4.4 → 0.5.0

package/dist/module.d.mts

@@ -4,6 +4,10 @@ export { AdapterArgs, AdapterOptions } from '../dist/runtime/utils/withAdapter.j
 export { ApiOptions, HooksOptions, ParamsOptions, RefOptions } from '../dist/runtime/plugins/api.global.js';
 
 interface MerkalyModuleOptions {
+    api: {
+        url: string;
+        prefix?: string;
+    };
     auth0: {
         audience: string;
         callbackUrl: string;
@@ -17,12 +21,13 @@ interface MerkalyModuleOptions {
         domain: string;
         localhost: string;
     };
-    api: {
-        url: string;
-        prefix?: string;
+    sentry: {
+        dsn: string;
+        project: string;
+        token: string;
     };
 }
-declare const _default: _nuxt_schema.NuxtModule<MerkalyModuleOptions, MerkalyModuleOptions, false>;
+declare const merkalyModule: _nuxt_schema.NuxtModule<MerkalyModuleOptions, MerkalyModuleOptions, false>;
 
-export { _default as default };
+export { merkalyModule as default };
 export type { MerkalyModuleOptions };

package/dist/module.json

@@ -2,9 +2,9 @@
   "name": "@merkaly/nuxt",
   "configKey": "merkaly",
   "compatibility": {
-    "nuxt": ">=3.0.0"
+    "nuxt": ">=3.14.0"
   },
-  "version": "0.4.4",
+  "version": "0.5.0",
   "builder": {
     "@nuxt/module-builder": "1.0.2",
     "unbuild": "3.6.1"

package/dist/module.mjs

@@ -1,83 +1,156 @@
-import { defineNuxtModule, createResolver, useLogger, addPlugin, addRouteMiddleware, addImportsDir, addComponentsDir, addTypeTemplate } from '@nuxt/kit';
-import { createJiti } from 'jiti';
+import { defineNuxtModule, useLogger, createResolver, addPlugin, addRouteMiddleware, addImportsDir, addComponentsDir, addTypeTemplate } from '@nuxt/kit';
 import { defu } from 'defu';
+import { createJiti } from 'jiti';
 import { existsSync } from 'node:fs';
 import svgLoader from 'vite-svg-loader';
 import 'reflect-metadata';
 
-const module = defineNuxtModule({
-  defaults: {
-    auth0: {
-      audience: "",
-      callbackUrl: "/auth",
-      client: "",
-      domain: "",
-      logoutUrl: "/",
-      params: {},
-      requiresAuth: false
-    },
-    plausible: {
-      domain: "",
-      localhost: ""
-    },
-    api: {
-      url: "/",
-      prefix: "/"
-    }
+const defaultOptions = {
+  api: {
+    url: "/",
+    prefix: "/"
   },
-  meta: { name: "@merkaly/nuxt", configKey: "merkaly", compatibility: { nuxt: ">=3.0.0" } },
-  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;
+  auth0: {
+    audience: "",
+    callbackUrl: "/auth",
+    client: "",
+    domain: "",
+    logoutUrl: "/",
+    params: {},
+    requiresAuth: false
   },
-  async setup(options, nuxt) {
-    const moduleResolver = createResolver(import.meta.url);
-    const rootResolver = createResolver(nuxt.options.rootDir);
-    nuxt.options.runtimeConfig.public.merkaly = defu(options, nuxt.options.runtimeConfig.public.merkaly || {});
-    nuxt.options.plausible = defu({
+  plausible: {
+    domain: "",
+    localhost: ""
+  },
+  sentry: {
+    dsn: "",
+    project: "",
+    token: ""
+  }
+};
+function hasPlausibleConfig(options) {
+  return Boolean(options.plausible?.domain);
+}
+function buildModuleDependencies(options) {
+  const dependencies = {
+    "@bootstrap-vue-next/nuxt": {},
+    "@nuxt/eslint": {},
+    "@nuxt/fonts": {},
+    "@nuxt/image": {},
+    "@sentry/nuxt/module": {},
+    "@vueuse/nuxt": {}
+  };
+  if (hasPlausibleConfig(options)) {
+    dependencies["@nuxtjs/plausible"] = {};
+  }
+  const logger = useLogger("@merkaly/nuxt");
+  Object.keys(dependencies).forEach((it) => logger.info(`Loaded ${it} module`));
+  return dependencies;
+}
+function configureRuntimeConfig(nuxt, options) {
+  nuxt.options.runtimeConfig.public.merkaly = defu(
+    options,
+    nuxt.options.runtimeConfig.public.merkaly || {}
+  );
+}
+function configurePlausible(nuxt, options) {
+  nuxt.options.plausible = defu(
+    {
       apiHost: "https://analytics.merkaly.io",
       domain: options.plausible?.domain,
       enableAutoOutboundTracking: true,
       enableAutoPageviews: true,
-      enabled: process.env.NODE_ENV === "production",
-      // ✅ Solo en producción
-      ignoredHostnames: ["localhost"].concat(options.plausible?.localhost || "").filter(Boolean)
-    }, nuxt.options.plausible || {});
+      enabled: process.env.NODE_ENV === "production" && hasPlausibleConfig(options),
+      ignoredHostnames: ["localhost", options.plausible?.localhost].filter(Boolean)
+    },
+    nuxt.options.plausible || {}
+  );
+}
+function configureSentry(nuxt, options) {
+  nuxt.options.sentry = defu({
+    authToken: options.sentry.token,
+    org: "merkaly",
+    project: options.sentry.project
+  });
+  nuxt.options.sourcemap = { client: "hidden" };
+}
+async function loadBootstrapConfig(nuxt) {
+  const rootDirResolver = createResolver(nuxt.options.rootDir);
+  const bootstrapConfigPath = rootDirResolver.resolve("bootstrap.config.ts");
+  if (!existsSync(bootstrapConfigPath)) {
+    return {};
+  }
+  const jiti = createJiti(import.meta.url);
+  const imported = await jiti.import(bootstrapConfigPath).catch(() => ({}));
+  return imported.default || {};
+}
+function configureBootstrapVueNext(nuxt, components) {
+  nuxt.options.bootstrapVueNext = defu(
+    nuxt.options.bootstrapVueNext || {},
+    {
+      plugin: {
+        components
+      }
+    }
+  );
+}
+function registerRuntimeFeatures(nuxt, options, resolver) {
+  addPlugin({ src: resolver.resolve("./runtime/plugins/api.global") });
+  addPlugin({ src: resolver.resolve("./runtime/plugins/auth0.client") });
+  addPlugin({ src: resolver.resolve("./runtime/plugins/sentry.global") });
+  addRouteMiddleware({
+    global: options.auth0.requiresAuth,
+    name: "auth",
+    path: resolver.resolve("./runtime/middleware/auth")
+  });
+  addImportsDir(resolver.resolve("./runtime/composables"));
+  addImportsDir(resolver.resolve("./runtime/utils"));
+  addComponentsDir({
+    path: resolver.resolve("./runtime/components"),
+    prefix: "MK"
+  });
+  addTypeTemplate({
+    filename: "types/merkaly.d.ts",
+    src: resolver.resolve("./runtime/types/nuxt.d.ts")
+  });
+}
+function configureVite(nuxt) {
+  nuxt.options.vite = defu(
+    nuxt.options.vite || {},
+    {
+      plugins: [svgLoader()]
+    }
+  );
+}
+const merkalyModule = defineNuxtModule({
+  defaults: defaultOptions,
+  meta: {
+    name: "@merkaly/nuxt",
+    configKey: "merkaly",
+    compatibility: { nuxt: ">=3.14.0" }
+  },
+  moduleDependencies(nuxt) {
+    const options = defu(
+      nuxt.options.merkaly || {},
+      defaultOptions
+    );
+    return buildModuleDependencies(options);
+  },
+  async setup(options, nuxt) {
     const logger = useLogger("@merkaly/nuxt");
-    const bootstrapConfigPath = rootResolver.resolve("bootstrap.config.ts");
-    logger.info(`Loading bootstrap.config.ts from: ${bootstrapConfigPath} (exists: ${existsSync(bootstrapConfigPath)})`);
-    const jiti = createJiti(import.meta.url);
-    const BootstrapConfig = await jiti.import(bootstrapConfigPath).then((m) => m.default || {}).catch(() => ({}));
-    logger.info(`Bootstrap config keys: ${Object.keys(BootstrapConfig).join(", ") || "(empty)"}`);
-    nuxt.options["bootstrapVueNext"] = defu(nuxt.options["bootstrapVueNext"] || {}, { plugin: { components: BootstrapConfig } });
-    addPlugin({ src: moduleResolver.resolve("./runtime/plugins/api.global") });
-    addPlugin({ src: moduleResolver.resolve("./runtime/plugins/auth0.client"), mode: "client" });
-    addRouteMiddleware({
-      global: options.auth0.requiresAuth,
-      name: "auth",
-      path: moduleResolver.resolve("./runtime/middleware/auth")
-    });
-    addImportsDir(moduleResolver.resolve("./runtime/composables"));
-    addImportsDir(moduleResolver.resolve("./runtime/utils"));
-    addComponentsDir({
-      path: moduleResolver.resolve("./runtime/components"),
-      prefix: "MK"
-    });
-    nuxt.options["vite"] = defu(nuxt.options["vite"] || {}, { plugins: [svgLoader()] });
-    addTypeTemplate({
-      filename: "types/merkaly.d.ts",
-      src: moduleResolver.resolve("./runtime/types/nuxt.d.ts")
-    });
+    const resolver = createResolver(import.meta.url);
+    configureRuntimeConfig(nuxt, options);
+    configurePlausible(nuxt, options);
+    configureSentry(nuxt, options);
+    const bootstrapComponentsConfig = await loadBootstrapConfig(nuxt);
+    if (Object.keys(bootstrapComponentsConfig).length > 0) {
+      logger.info("Loading bootstrap.config.ts");
+    }
+    configureBootstrapVueNext(nuxt, bootstrapComponentsConfig);
+    registerRuntimeFeatures(nuxt, options, resolver);
+    configureVite(nuxt);
   }
 });
 
-export { module as default };
+export { merkalyModule as default };

package/dist/runtime/components/app.d.vue.ts

@@ -1,8 +1,8 @@
-declare var __VLS_11: {}, __VLS_13: {};
+declare var __VLS_8: {}, __VLS_10: {};
 type __VLS_Slots = {} & {
-    loading?: (props: typeof __VLS_11) => any;
+    loading?: (props: typeof __VLS_8) => any;
 } & {
-    default?: (props: typeof __VLS_13) => any;
+    default?: (props: typeof __VLS_10) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;

package/dist/runtime/components/app.vue

@@ -3,9 +3,11 @@ import { useRoute } from "#app";
 import { useAuth, watchOnce, addRouteMiddleware, useNuxtApp } from "#imports";
 import AuthMiddleware from "../middleware/auth";
 import { useNavigation } from "../composables/useNavigation";
+import { useColorMode } from "@vueuse/core";
 const $route = useRoute();
 const { isLoading } = useAuth();
 const { hook } = useNuxtApp();
+useColorMode({ attribute: "data-bs-theme" });
 watchOnce(isLoading, () => AuthMiddleware($route, $route));
 const { defer, regenerate } = useNavigation();
 addRouteMiddleware("navigation", (to) => defer(to), { global: true });
@@ -13,10 +15,7 @@ hook("page:finish", () => regenerate());
 </script>
 
 <template>
-  <main>
-    <NuxtRouteAnnouncer />
-    <BOrchestrator />
-
+  <BApp>
     <!-- Mostramos spinner mientras auth se carga -->
     <slot v-if="isLoading" name="loading" />
 
@@ -24,5 +23,5 @@ hook("page:finish", () => regenerate());
     <slot v-else>
       <NuxtPage />
     </slot>
-  </main>
+  </BApp>
 </template>

package/dist/runtime/components/app.vue.d.ts

@@ -1,8 +1,8 @@
-declare var __VLS_11: {}, __VLS_13: {};
+declare var __VLS_8: {}, __VLS_10: {};
 type __VLS_Slots = {} & {
-    loading?: (props: typeof __VLS_11) => any;
+    loading?: (props: typeof __VLS_8) => any;
 } & {
-    default?: (props: typeof __VLS_13) => any;
+    default?: (props: typeof __VLS_10) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;

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/dist/runtime/plugins/sentry.global.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("nuxt/app").Plugin<Record<string, unknown>> & import("nuxt/app").ObjectPlugin<Record<string, unknown>>;
+export default _default;

package/dist/runtime/plugins/sentry.global.js

@@ -0,0 +1,14 @@
+import { defineNuxtPlugin } from "#app";
+import { setUser } from "@sentry/nuxt";
+export default defineNuxtPlugin(async ({ hook }) => {
+  hook("merkaly:auth", (user) => {
+    if (!user) {
+      return setUser(null);
+    }
+    return setUser({
+      id: user.sub,
+      email: user.email,
+      username: user.name
+    });
+  });
+});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@merkaly/nuxt",
-  "version": "0.4.4",
+  "version": "0.5.0",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/merkaly-io/nuxt.git"
@@ -43,7 +43,7 @@
   },
   "dependencies": {
     "@auth0/auth0-spa-js": "^2.17.0",
-    "@bootstrap-vue-next/nuxt": "^0.43.0",
+    "@bootstrap-vue-next/nuxt": "^0.44.1",
     "@nuxt/devtools": "^3.2.1",
     "@nuxt/eslint": "1.15.1",
     "@nuxt/eslint-config": "^1.15.1",
@@ -51,6 +51,7 @@
     "@nuxt/image": "^2.0.0",
     "@nuxt/kit": "^4.4.2",
     "@nuxtjs/plausible": "^3.0.1",
+    "@sentry/nuxt": "^10.47.0",
     "@types/node": "latest",
     "@types/vue-select": "^3.16.8",
     "@vueuse/components": "^14.2.0",
@@ -58,7 +59,7 @@
     "@vueuse/integrations": "^14.2.0",
     "@vueuse/nuxt": "^14.2.0",
     "bootstrap": "^5.3.8",
-    "bootstrap-vue-next": "^0.43.0",
+    "bootstrap-vue-next": "^0.44.1",
     "change-case": "^5",
     "class-transformer": "^0.5.1",
     "class-validator": "^0.15.1",