@ramathibodi/nuxt-commons 0.1.74 → 4.0.1

package/README.md

@@ -1,6 +1,6 @@
 # @ramathibodi/nuxt-commons
 
-Nuxt 3 module that provides shared runtime building blocks for Rama projects:
+Nuxt module for Nuxt 3 and Nuxt 4 that provides shared runtime building blocks for Rama projects:
 - globally auto-imported UI components
 - auto-imported composables
 - runtime plugins for permission/dialog/default behavior
@@ -28,6 +28,8 @@ export default defineNuxtConfig({
 })
 ```
 
+Supported Nuxt versions: `^3.16.0 || ^4.0.0`
+
 ## What The Module Registers
 
 Configured in `src/module.ts`:
@@ -109,7 +111,12 @@ Generated outputs:
 
 ## Publish Notes
 
+`package.json` `version` is used to select the publish line by `major.minor`:
+
+- Keep the same `major.minor` line to continue normal releases.
+- Change it to `0.2.0`, `1.1.0`, etc. to start publishing that new line on the next release.
+
 ```bash
 npm run dev:build
-npm publish --access public
+npm run release
 ```

package/dist/module.json

@@ -2,11 +2,11 @@
   "name": "@ramathibodi/nuxt-commons",
   "configKey": "nuxt-commons",
   "compatibility": {
-    "nuxt": "^3.0.0"
+    "nuxt": "^4.3.1"
   },
-  "version": "0.1.74",
+  "version": "4.0.1",
   "builder": {
-    "@nuxt/module-builder": "0.8.4",
-    "unbuild": "2.0.0"
+    "@nuxt/module-builder": "1.0.2",
+    "unbuild": "3.6.1"
   }
 }

package/dist/module.mjs

@@ -1,11 +1,11 @@
 import { defineNuxtModule, createResolver, addComponentsDir, addImportsDir, addPlugin, addTypeTemplate } from '@nuxt/kit';
 
-const module = defineNuxtModule({
+const module$1 = defineNuxtModule({
   meta: {
     name: "@ramathibodi/nuxt-commons",
     configKey: "nuxt-commons",
     compatibility: {
-      nuxt: "^3.0.0"
+      nuxt: "^4.3.1"
     }
   },
   // Default configuration options of the Nuxt module
@@ -36,7 +36,7 @@ const module = defineNuxtModule({
       src: resolver.resolve("runtime/plugins/default"),
       mode: "client"
     });
-    const typeFiles = ["modules", "alert", "menu", "graphqlOperation", "formDialog", "dialogManager", "permission", "clientConfig"];
+    const typeFiles = ["modules", "alert", "menu", "graphqlOperation", "formDialog", "dialogManager", "permission", "clientConfig", "bridge"];
     for (const file of typeFiles) {
       addTypeTemplate({
         src: resolver.resolve(`runtime/types/${file}.d.ts`),
@@ -58,4 +58,4 @@ const module = defineNuxtModule({
   }
 });
 
-export { module as default };
+export { module$1 as default };

package/dist/runtime/bridges/authentication.d.ts

@@ -0,0 +1,21 @@
+export interface AuthenticationUserProfile {
+    username?: string;
+    [key: string]: any;
+}
+export interface AuthenticationKeycloakState {
+    token?: string;
+    [key: string]: any;
+}
+export interface AuthenticationState {
+    isAuthenticated?: boolean;
+    token?: string;
+    keycloak?: AuthenticationKeycloakState | null;
+    userProfile?: AuthenticationUserProfile | null;
+    permissions?: string[];
+    hasPermission?: (permissionId: string) => boolean;
+    login?: (...args: any[]) => any;
+    logout?: (...args: any[]) => any;
+    [key: string]: any;
+}
+export type AuthenticationBridgeInput = AuthenticationState | (() => AuthenticationState);
+export declare function useAuthentication(): AuthenticationState;

package/dist/runtime/bridges/authentication.js

@@ -0,0 +1,20 @@
+import { useNuxtApp, useState } from "#imports";
+function withPermissionFallback(state) {
+  const permissions = Array.isArray(state?.permissions) ? state.permissions : [];
+  return {
+    ...state,
+    hasPermission: state?.hasPermission ?? ((permissionId) => permissions.includes(permissionId))
+  };
+}
+export function useAuthentication() {
+  const nuxtApp = useNuxtApp();
+  const injected = nuxtApp.$appAuthentication;
+  if (typeof injected === "function") {
+    return withPermissionFallback(injected());
+  }
+  if (injected) {
+    return withPermissionFallback(injected);
+  }
+  const state = useState("authentication", () => ({}));
+  return withPermissionFallback(state.value);
+}

package/dist/runtime/bridges/graphql.d.ts

@@ -0,0 +1,17 @@
+import type { graphqlInputObject, graphqlOperationObject, graphqlTypeObject } from '../types/graphqlOperation.js';
+export interface GraphqlBridgeState {
+    scalarType: string[];
+    graphqlType: Record<string, graphqlTypeObject>;
+    graphqlInputType: Record<string, graphqlInputObject>;
+    graphqlOperation: Record<string, graphqlOperationObject<any, any>>;
+    [key: string]: any;
+}
+export interface GraphqlBridgeInput {
+    scalarType?: string[];
+    graphqlType?: Record<string, graphqlTypeObject>;
+    graphqlInputType?: Record<string, graphqlInputObject>;
+    graphqlOperation?: Record<string, graphqlOperationObject<any, any>>;
+    [key: string]: any;
+}
+export declare function useGraphqlBridge(): GraphqlBridgeState;
+export declare function registerGraphqlObject(input: GraphqlBridgeInput): void;

package/dist/runtime/bridges/graphql.js

@@ -0,0 +1,45 @@
+import { useNuxtApp } from "#imports";
+const fallbackGraphqlState = {
+  scalarType: [
+    "Boolean",
+    "Date",
+    "DateTime",
+    "Float",
+    "ID",
+    "Int",
+    "JSON",
+    "String",
+    "Upload"
+  ],
+  graphqlType: {},
+  graphqlInputType: {},
+  graphqlOperation: {}
+};
+export function useGraphqlBridge() {
+  const nuxtApp = useNuxtApp();
+  const injected = nuxtApp.$appGraphql;
+  return {
+    ...fallbackGraphqlState,
+    ...injected,
+    scalarType: injected?.scalarType?.length ? [.../* @__PURE__ */ new Set([...fallbackGraphqlState.scalarType, ...injected.scalarType])] : fallbackGraphqlState.scalarType,
+    graphqlType: injected?.graphqlType ?? fallbackGraphqlState.graphqlType,
+    graphqlInputType: injected?.graphqlInputType ?? fallbackGraphqlState.graphqlInputType,
+    graphqlOperation: injected?.graphqlOperation ?? fallbackGraphqlState.graphqlOperation
+  };
+}
+export function registerGraphqlObject(input) {
+  const nuxtApp = useNuxtApp();
+  const bridge = nuxtApp.$appGraphql ?? fallbackGraphqlState;
+  const scalarType = bridge.scalarType ?? fallbackGraphqlState.scalarType;
+  const graphqlType = bridge.graphqlType ?? fallbackGraphqlState.graphqlType;
+  const graphqlInputType = bridge.graphqlInputType ?? fallbackGraphqlState.graphqlInputType;
+  const graphqlOperation = bridge.graphqlOperation ?? fallbackGraphqlState.graphqlOperation;
+  if (input.scalarType?.length) {
+    for (const scalar of input.scalarType) {
+      if (!scalarType.includes(scalar)) scalarType.push(scalar);
+    }
+  }
+  if (input.graphqlType) Object.assign(graphqlType, input.graphqlType);
+  if (input.graphqlInputType) Object.assign(graphqlInputType, input.graphqlInputType);
+  if (input.graphqlOperation) Object.assign(graphqlOperation, input.graphqlOperation);
+}

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

@@ -0,0 +1,3 @@
+declare const __VLS_export: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/Alert.vue

@@ -1,34 +1,25 @@
-<script lang="ts" setup>
-/**
- * Alert displays runtime alert messages and bridges alert-store entries to a consistent UI variant system.
- * This doc block is consumed by vue-docgen for generated API documentation.
- */
-import { ref, watch } from 'vue'
-import { isEmpty } from 'lodash-es'
-import { useAlert } from '../composables/alert'
-import type { AlertItem } from '../types/alert'
-
-const isAlertOpen = ref(false)
-const timeout = ref(3000)
-const alert = useAlert()
-const currentItem = ref<AlertItem | undefined>()
-
+<script setup>
+import { ref, watch } from "vue";
+import { isEmpty } from "lodash-es";
+import { useAlert } from "../composables/alert";
+const isAlertOpen = ref(false);
+const timeout = ref(3e3);
+const alert = useAlert();
+const currentItem = ref();
 const renewAlert = () => {
   if (alert?.hasAlert()) {
-    currentItem.value = alert?.takeAlert()
-    isAlertOpen.value = true
+    currentItem.value = alert?.takeAlert();
+    isAlertOpen.value = true;
+  } else {
+    currentItem.value = void 0;
+    isAlertOpen.value = false;
   }
-  else {
-    currentItem.value = undefined
-    isAlertOpen.value = false
-  }
-}
-
+};
 watch(() => alert?.hasAlert(), (hasAlert) => {
   if (hasAlert) {
-    renewAlert()
+    renewAlert();
   }
-})
+});
 </script>
 
 <template>
@@ -52,7 +43,7 @@ watch(() => alert?.hasAlert(), (hasAlert) => {
       v-bind="currentItem.alertIcon ? { icon: currentItem.alertIcon } : {}"
       @click:close="renewAlert()"
     >
-      {{ currentItem.statusCode ? currentItem.statusCode + ' ' : '' }} {{ currentItem.message }} {{ !isEmpty(currentItem.data) ? currentItem.data : '' }}
+      {{ currentItem.statusCode ? currentItem.statusCode + " " : "" }} {{ currentItem.message }} {{ !isEmpty(currentItem.data) ? currentItem.data : "" }}
     </VAlert>
   </VSnackbar>
 </template>

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

@@ -0,0 +1,3 @@
+declare const __VLS_export: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,9 @@
+declare const __VLS_export: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    error: (error: unknown) => any;
+    decode: (barcodeValue: string) => any;
+}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{
+    onError?: ((error: unknown) => any) | undefined;
+    onDecode?: ((barcodeValue: string) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/BarcodeReader.vue

@@ -1,102 +1,77 @@
-<script lang="ts" setup>
-/**
- * BarcodeReader starts and stops barcode scans, then emits parsed scan results back to parent workflows.
- * This doc block is consumed by vue-docgen for generated API documentation.
- */
-import {BrowserMultiFormatReader} from '@zxing/browser'
-import {type IScannerControls} from '@zxing/browser/esm'
-import type {Exception, Result} from '@zxing/library'
-import {computed, onBeforeUnmount, onMounted, ref, watchEffect} from 'vue'
-import {useAlert} from '../composables/alert'
-import {useDevicesList, useUserMedia} from "@vueuse/core";
-
-const barcodeReader = new BrowserMultiFormatReader()
-const barcodeReaderControl = ref()
-
-const alert = useAlert()
-const isLoading = ref<boolean>(false)
-
-/**
- * Custom events emitted by BarcodeReader.
- * Parents can listen to these events to react to user actions and internal state changes.
- */
-const emit = defineEmits<{
-  (event: 'decode', barcodeValue: string): void
-  (event: 'error', error: string | unknown): void
-}>()
-
-const videoScreen = ref<HTMLVideoElement>()
-
-const currentCameraId = ref<ConstrainDOMString | undefined>()
+<script setup>
+import { BrowserMultiFormatReader } from "@zxing/browser";
+import {} from "@zxing/browser/esm";
+import { computed, onBeforeUnmount, onMounted, ref, watchEffect } from "vue";
+import { useAlert } from "../composables/alert";
+import { useDevicesList, useUserMedia } from "@vueuse/core";
+const barcodeReader = new BrowserMultiFormatReader();
+const barcodeReaderControl = ref();
+const alert = useAlert();
+const isLoading = ref(false);
+const emit = defineEmits(["decode", "error"]);
+const videoScreen = ref();
+const currentCameraId = ref();
 const { videoInputs: cameras } = useDevicesList({
   requestPermissions: true,
   constraints: { audio: false, video: true },
   onUpdated() {
-    if (!cameras.value.find(camera => camera.deviceId === currentCameraId.value))
-      currentCameraId.value = cameras.value[0]?.deviceId
-  },
-})
-const hasCamera = computed(()=>{ return  !!currentCameraId.value })
-
+    if (!cameras.value.find((camera) => camera.deviceId === currentCameraId.value))
+      currentCameraId.value = cameras.value[0]?.deviceId;
+  }
+});
+const hasCamera = computed(() => {
+  return !!currentCameraId.value;
+});
 const { stream, start: cameraStart, stop: cameraStop, enabled: cameraEnabled } = useUserMedia({
-  constraints: { video: { deviceId: currentCameraId.value}},
-})
-
+  constraints: { video: { deviceId: currentCameraId.value } }
+});
 watchEffect(() => {
-  if (videoScreen.value) videoScreen.value.srcObject = (stream.value) ? stream.value! : null
-})
-
+  if (videoScreen.value) videoScreen.value.srcObject = stream.value ? stream.value : null;
+});
 function startCamera() {
   if (!cameraEnabled.value) {
-    isLoading.value = true
-    cameraStart().then(()=>{
-      barcodeReader.decodeFromVideoDevice(currentCameraId.value, videoScreen.value, (result: Result | undefined, error: Exception | undefined, controls: IScannerControls) => {
+    isLoading.value = true;
+    cameraStart().then(() => {
+      barcodeReader.decodeFromVideoDevice(currentCameraId.value, videoScreen.value, (result, error, controls) => {
         if (result) {
-          emit('decode', result.getText())
-          cameraStop()
+          emit("decode", result.getText());
+          cameraStop();
         }
-      }).then((result: any)=>{
-        barcodeReaderControl.value = result
-      })
-    }).finally(()=>{
-      isLoading.value = false
-    })
+      }).then((result) => {
+        barcodeReaderControl.value = result;
+      });
+    }).finally(() => {
+      isLoading.value = false;
+    });
   }
 }
-
 function stopCamera() {
-  if (barcodeReaderControl.value) barcodeReaderControl.value.stop()
-  if (cameraEnabled.value) cameraStop()
+  if (barcodeReaderControl.value) barcodeReaderControl.value.stop();
+  if (cameraEnabled.value) cameraStop();
 }
-
-function scanImageFile(selectedFile: File | File[] | undefined) {
+function scanImageFile(selectedFile) {
   if (!selectedFile) {
-    alert?.addAlert({ message: 'No file selected.', alertType: 'error' })
-    return
+    alert?.addAlert({ message: "No file selected.", alertType: "error" });
+    return;
   }
-
-  const scanImageSingleFile: File = Array.isArray(selectedFile) ? selectedFile[0] : selectedFile
-
-  const reader = new FileReader()
+  const scanImageSingleFile = Array.isArray(selectedFile) ? selectedFile[0] : selectedFile;
+  const reader = new FileReader();
   reader.onload = async (event) => {
     try {
-      const result = await barcodeReader.decodeFromImageUrl(event.target?.result as string)
-      emit('decode', result.getText())
+      const result = await barcodeReader.decodeFromImageUrl(event.target?.result);
+      emit("decode", result.getText());
+    } catch (e) {
+      void e;
     }
-    catch (e) {
-      void e
-    }
-  }
-  reader.readAsDataURL(scanImageSingleFile)
+  };
+  reader.readAsDataURL(scanImageSingleFile);
 }
-
-onMounted( () => {
-  startCamera()
-})
-
-onBeforeUnmount(  () => {
-  stopCamera()
-})
+onMounted(() => {
+  startCamera();
+});
+onBeforeUnmount(() => {
+  stopCamera();
+});
 </script>
 
 <template>
@@ -106,8 +81,8 @@ onBeforeUnmount(  () => {
     </v-card-text>
     <v-card-text v-else>
       <v-col v-if="hasCamera">
-        <div style="position: relative; display: inline-block; width: 100%;" :style="{maxWidth: '1024px'}">
-          <video autoplay ref="videoScreen" width="100%" :style="{maxWidth:'1024px'}"></video>
+        <div style="position: relative; display: inline-block; width: 100%;" :style="{ maxWidth: '1024px' }">
+          <video autoplay ref="videoScreen" width="100%" :style="{ maxWidth: '1024px' }"></video>
           <div style="position: absolute; bottom: 10px; right: 10px; z-index: 2000;">
             <FileBtn
                 accept="image/*"

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

@@ -0,0 +1,9 @@
+declare const __VLS_export: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    error: (error: unknown) => any;
+    decode: (barcodeValue: string) => any;
+}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{
+    onError?: ((error: unknown) => any) | undefined;
+    onDecode?: ((barcodeValue: string) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,55 @@
+import { VBtn } from 'vuetify/components/VBtn';
+interface ExportButtonProps extends /* @vue-ignore */ InstanceType<typeof VBtn['$props']> {
+    fileName?: string;
+    sheetName?: string;
+    modelValue?: object[];
+    stringFields?: Array<string>;
+    tooltip?: string | Record<string, any> | undefined;
+}
+declare var __VLS_12: never, __VLS_13: {};
+type __VLS_Slots = {} & {
+    [K in NonNullable<typeof __VLS_12>]?: (props: typeof __VLS_13) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToOption<ExportButtonProps>, {
+    fileName: string;
+    sheetName: string;
+    stringFields: () => never[];
+    tooltip: () => {
+        text: string;
+        location: string;
+    };
+}>>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToOption<ExportButtonProps>, {
+    fileName: string;
+    sheetName: string;
+    stringFields: () => never[];
+    tooltip: () => {
+        text: string;
+        location: string;
+    };
+}>>> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_TypePropsToOption<T> = {
+    [K in keyof T]-?: {} extends Pick<T, K> ? {
+        type: import('vue').PropType<Required<T>[K]>;
+    } : {
+        type: import('vue').PropType<T[K]>;
+        required: true;
+    };
+};
+type __VLS_WithDefaults<P, D> = {
+    [K in keyof Pick<P, keyof P>]: K extends keyof D ? __VLS_PrettifyLocal<P[K] & {
+        default: D[K];
+    }> : P[K];
+};
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};
+type __VLS_PrettifyLocal<T> = (T extends any ? {
+    [K in keyof T]: T[K];
+} : {
+    [K in keyof T as K]: T[K];
+}) & {};

package/dist/runtime/components/ExportCSV.vue

@@ -1,88 +1,51 @@
-<script lang="ts" setup>
-/**
- * ExportCSV exports array data to spreadsheet files, flattening nested fields before file generation.
- * This doc block is consumed by vue-docgen for generated API documentation.
- */
-import { ref } from 'vue'
-import * as XLSX from 'xlsx'
-import { VBtn } from 'vuetify/components/VBtn'
-import { useAlert } from '../composables/alert'
-
-interface ExportButtonProps extends /* @vue-ignore */ InstanceType<typeof VBtn['$props']> {
-  fileName?: string // File name used when downloading or printing generated files.
-  sheetName?: string // Configuration option used by ExportCSV.
-  modelValue?: object[] // Bound value for v-model synchronization with the parent component.
-  stringFields?: Array<string> // Field paths that must stay as string values (no nested object conversion).
-  tooltip?: string | Record<string,any> | undefined // Tooltip text or config object shown for the action control.
-}
-
-/**
- * Public props accepted by ExportCSV.
- * Document each prop field with intent, defaults, and side effects for clear generated docs.
- */
-const props = withDefaults(defineProps<ExportButtonProps>(), {
-  fileName: 'download',
-  sheetName: 'Sheet1',
-  stringFields: ()=>[],
-  tooltip: ()=>({text: 'Export', location: 'bottom'}),
-})
-
-const alert = useAlert()
-const loading = ref(false)
-
-/**
- * Triggers file export
- */
+<script setup>
+import { ref } from "vue";
+import * as XLSX from "xlsx";
+import { VBtn } from "vuetify/components/VBtn";
+import { useAlert } from "../composables/alert";
+const props = defineProps({
+  fileName: { type: String, required: false, default: "download" },
+  sheetName: { type: String, required: false, default: "Sheet1" },
+  modelValue: { type: Array, required: false },
+  stringFields: { type: Array, required: false, default: () => [] },
+  tooltip: { type: null, required: false, default: () => ({ text: "Export", location: "bottom" }) }
+});
+const alert = useAlert();
+const loading = ref(false);
 function exportFile() {
   if (props.modelValue && Array.isArray(props.modelValue) && props.modelValue.length > 0) {
-    loading.value = true
-
+    loading.value = true;
     try {
-      const workbook = XLSX.utils.book_new()
-      const worksheet = XLSX.utils.json_to_sheet(flattenNestedFields(props.modelValue))
-      const fileName = `${props.fileName}.xlsx`
-
-      XLSX.utils.book_append_sheet(workbook, worksheet, props.sheetName)
-      XLSX.writeFile(workbook, fileName)
-    } catch (error: any) {
-      alert?.addAlert({ message: `Export failed: ${error.message}`, alertType: 'error' })
+      const workbook = XLSX.utils.book_new();
+      const worksheet = XLSX.utils.json_to_sheet(flattenNestedFields(props.modelValue));
+      const fileName = `${props.fileName}.xlsx`;
+      XLSX.utils.book_append_sheet(workbook, worksheet, props.sheetName);
+      XLSX.writeFile(workbook, fileName);
+    } catch (error) {
+      alert?.addAlert({ message: `Export failed: ${error.message}`, alertType: "error" });
     } finally {
-      loading.value = false
+      loading.value = false;
     }
   } else {
-    alert?.addAlert({ message: 'Invalid or no data to export', alertType: 'error' })
+    alert?.addAlert({ message: "Invalid or no data to export", alertType: "error" });
   }
 }
-
-/**
- * Recursively flattens nested fields for export
- * @param items - Array of objects to flatten
- */
-function flattenNestedFields(items: any[]) {
-  return items.map((item: any) => {
-    return flattenObject(item)
-  })
+function flattenNestedFields(items) {
+  return items.map((item) => {
+    return flattenObject(item);
+  });
 }
-
-/**
- * Recursively flattens an object, converting nested keys into dot-separated keys
- * @param obj - Object to flatten
- * @param parentKey - Parent key (for recursion)
- * @param separator - Separator for nested keys
- */
-function flattenObject(obj: any, parentKey = '', separator = '.') {
-  return Object.keys(obj).reduce((acc: any, key: string) => {
-    const newKey = parentKey ? `${parentKey}${separator}${key}` : key
-    const value = obj[key]
-
-    if (value && typeof value === 'object' && !Array.isArray(value) && !props.stringFields.includes(newKey)) {
-      Object.assign(acc, flattenObject(value, newKey, separator))
+function flattenObject(obj, parentKey = "", separator = ".") {
+  return Object.keys(obj).reduce((acc, key) => {
+    const newKey = parentKey ? `${parentKey}${separator}${key}` : key;
+    const value = obj[key];
+    if (value && typeof value === "object" && !Array.isArray(value) && !props.stringFields.includes(newKey)) {
+      Object.assign(acc, flattenObject(value, newKey, separator));
     } else {
-      acc[newKey] = typeof value === 'object' ? JSON.stringify(value) : value
+      acc[newKey] = typeof value === "object" ? JSON.stringify(value) : value;
     }
-
-    return acc
-  }, {})
+    return acc;
+  }, {});
 }
 </script>
 
@@ -97,13 +60,13 @@ function flattenObject(obj: any, parentKey = '', separator = '.') {
       v-tooltip="props.tooltip"
   >
     <template
-        v-for="(_, name, index) in ($slots as {})"
+        v-for="(_, name, index) in $slots"
         :key="index"
         #[name]="slotData"
     >
       <slot
           :name="name"
-          v-bind="((slotData || {}) as object)"
+          v-bind="slotData || {}"
       />
     </template>
   </VBtn>