@dynect/base 0.10.2 → 0.10.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dynect/base",
-  "version": "0.10.2",
+  "version": "0.10.4",
   "description": "Reusable Nuxt base module — components, composables, utils, plugins and i18n from the Dynect design system.",
   "type": "module",
   "license": "MIT",

package/src/module.ts

@@ -1,4 +1,5 @@
 import { addComponentsDir, addImports, addImportsDir, addPlugin, createResolver, defineNuxtModule, installModule } from '@nuxt/kit';
+import { defu } from 'defu';
 import { existsSync } from 'node:fs';
 import { join } from 'node:path';
 
@@ -45,7 +46,7 @@ export default defineNuxtModule<DynectBaseOptions>({
 		veeValidate: {},
 		colorMode: {},
 		i18n: {},
-		shadcn: { prefix: '', componentDir: '~/components/ui' },
+		shadcn: { prefix: '' },
 		icon: {},
 		plugins: { toast: true, ssrWidth: true },
 	},
@@ -96,67 +97,78 @@ export default defineNuxtModule<DynectBaseOptions>({
 		}
 
 		// ── Install required Nuxt modules ────────────────────────────────────────
+		// installModule is marked @deprecated in @nuxt/kit but is the only practical
+		// API for installing sub-modules with dynamic options during a module's setup.
 		if (options.shadcn !== false) {
-			const shadcnComponentDir = isStandalone ? join(runtimeComponentsDir, 'ui') : '~/components/ui';
+			// Extract componentDir separately — keeping it out of defaults prevents
+			// defu from always populating it, which would override the computed path.
+			const { componentDir: userComponentDir, ...shadcnRest } = (options.shadcn ?? {}) as { prefix?: string; componentDir?: string };
+			const shadcnComponentDir = userComponentDir ?? (isStandalone ? join(runtimeComponentsDir, 'ui') : '~/components/ui');
 
-			await installModule('shadcn-nuxt', {
-				prefix: '',
-				componentDir: shadcnComponentDir,
-				...options.shadcn,
-			});
+			await installModule('shadcn-nuxt', { prefix: '', ...shadcnRest, componentDir: shadcnComponentDir }); // NOSONAR
 		}
 
 		if (options.veeValidate !== false) {
-			await installModule('@vee-validate/nuxt', options.veeValidate ?? {});
+			await installModule('@vee-validate/nuxt', options.veeValidate ?? {}); // NOSONAR
 		}
 
 		if (options.colorMode !== false) {
-			await installModule('@nuxtjs/color-mode', {
-				preference: 'system',
-				fallback: 'light',
-				classPrefix: '',
-				classSuffix: '',
-				storage: 'cookie',
-				storageKey: 'dynect_color_mode',
-				...options.colorMode,
-			});
+			// defu(user, defaults): user keys win; nested objects are deep-merged, not replaced
+			await installModule(
+				'@nuxtjs/color-mode',
+				defu(options.colorMode ?? {}, {
+					// NOSONAR
+					preference: 'system',
+					fallback: 'light',
+					classPrefix: '',
+					classSuffix: '',
+					storage: 'cookie',
+					storageKey: 'dynect_color_mode',
+				})
+			);
 		}
 
 		if (options.i18n !== false) {
 			const langDir = isStandalone ? resolver.resolve('./runtime/assets/lang') : resolver.resolve('../../../app/assets/lang');
 
-			await installModule('@nuxtjs/i18n', {
-				locales: [
-					{ code: 'en', iso: 'en_US', file: 'en.json', name: 'English' },
-					{ code: 'ms', iso: 'ms_MY', file: 'ms.json', name: 'Bahasa' },
-				],
-				langDir,
-				defaultLocale: 'en',
-				strategy: 'no_prefix',
-				detectBrowserLanguage: {
-					useCookie: true,
-					cookieKey: 'dynect_language',
-					cookieSecure: true,
-					redirectOn: 'root',
-					alwaysRedirect: true,
-				},
-				...options.i18n,
-			});
+			await installModule(
+				'@nuxtjs/i18n',
+				defu(options.i18n ?? {}, {
+					// NOSONAR
+					locales: [
+						{ code: 'en', iso: 'en_US', file: 'en.json', name: 'English' },
+						{ code: 'ms', iso: 'ms_MY', file: 'ms.json', name: 'Bahasa' },
+					],
+					langDir,
+					defaultLocale: 'en',
+					strategy: 'no_prefix',
+					detectBrowserLanguage: {
+						useCookie: true,
+						cookieKey: 'dynect_language',
+						cookieSecure: true,
+						redirectOn: 'root',
+						alwaysRedirect: true,
+					},
+				})
+			);
 		}
 
 		if (options.icon !== false) {
-			await installModule('@nuxt/icon', {
-				provider: 'server',
-				mode: 'svg',
-				serverBundle: {
-					collections: ['heroicons', 'lucide', 'mdi'],
-					remote: false,
-				},
-				...options.icon,
-			});
+			await installModule(
+				'@nuxt/icon',
+				defu(options.icon ?? {}, {
+					// NOSONAR
+					provider: 'server',
+					mode: 'svg',
+					serverBundle: {
+						collections: ['heroicons', 'lucide', 'mdi'],
+						remote: false,
+					},
+				})
+			);
 		}
 
-		await installModule('@pinia/nuxt');
+		await installModule('@pinia/nuxt'); // NOSONAR
 
 		// ── CSS ──────────────────────────────────────────────────────────────────
 		const cssPath = isStandalone ? resolver.resolve('./runtime/assets/css/main.css') : resolver.resolve('../../../app/assets/css/main.css');
@@ -166,13 +178,13 @@ export default defineNuxtModule<DynectBaseOptions>({
 		}
 
 		// ── Components ───────────────────────────────────────────────────────────
-		for (const dir of options.dirs!) {
+		for (const dir of options.dirs) {
 			const dirPath = join(componentsBase, dir);
 			if (!existsSync(dirPath)) continue;
 
 			addComponentsDir({
 				path: dirPath,
-				prefix: DIR_CONFIGS[dir]!.prefix,
+				prefix: DIR_CONFIGS[dir].prefix,
 				pathPrefix: false,
 				global: options.global,
 			});

package/src/runtime/components/base/org-chart/index.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { toLowerCase } from '../../../utils/function';
-import { onBeforeUnmount, onMounted, ref, shallowRef, watch } from 'vue';
+import { onBeforeUnmount, onMounted, ref, shallowRef, useSlots, watch } from 'vue';
 import { OrgChart } from './main';
 import { SVG_ICONS, createIconSVG } from './svg-icons';
 import type { OrgChartNodeData, OrgChartNode } from './types';

package/src/runtime/components/base/toast/Toaster.vue

@@ -107,7 +107,7 @@
 <script lang="ts"></script>
 
 <script lang="ts" setup>
-import { computed, nextTick, ref, watchEffect } from 'vue';
+import { computed, nextTick, ref, useAttrs, watchEffect } from 'vue';
 import type { HeightT, Position, ToastT, ToastToDismiss, ToasterProps } from './types';
 import { ToastState } from './state';
 import Toast from './Toast.vue';

package/src/runtime/components/dynect/Telephone.vue

@@ -109,7 +109,7 @@
 <script setup lang="ts">
 import { capitalizeFirstLetter, countryList, toLowerCase, toUpperCase } from '../../utils/function';
 import { useField } from 'vee-validate';
-import { computed, nextTick, onMounted, reactive, readonly, ref, watch } from 'vue';
+import { computed, nextTick, onMounted, reactive, readonly, ref, useTemplateRef, watch } from 'vue';
 import { parsePhoneNumberFromString, type CountryCode, type NumberFormat } from 'libphonenumber-js/max';
 import { cva } from 'class-variance-authority';
 import { useState, useId } from 'nuxt/app';