@dynect/base 0.2.0 → 0.3.0

package/package.json

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

package/src/runtime/composables/useDevices.ts

@@ -1,3 +1,5 @@
+import { computed, onMounted, onUnmounted, readonly, ref } from 'vue';
+
 export type ViewportDeviceType = 'mobile' | 'tablet' | 'laptop' | 'desktop';
 export type OS = 'windows' | 'macos' | 'linux' | 'ios' | 'android' | 'unknown';
 export type Browser = 'chrome' | 'firefox' | 'safari' | 'edge' | 'opera' | 'samsung' | 'unknown';
@@ -80,40 +82,29 @@ export const useDevices = () => {
 	});
 
 	return {
-		// State
 		viewportWidth: readonly(viewportWidth),
 		viewportHeight: readonly(viewportHeight),
 		isOnline: readonly(isOnline),
 		ua: readonly(ua),
-
-		// Derived
 		os,
 		browser,
 		deviceType,
 		orientation,
-
-		// Booleans
 		isMobile,
 		isTablet,
 		isLaptop,
 		isDesktop,
 		isTouch,
-
-		// OS shorthands
 		isWindows: computed(() => os.value === 'windows'),
 		isMacOS: computed(() => os.value === 'macos'),
 		isLinux: computed(() => os.value === 'linux'),
 		isIOS: computed(() => os.value === 'ios'),
 		isAndroid: computed(() => os.value === 'android'),
-
-		// Browser shorthands
 		isChrome: computed(() => browser.value === 'chrome'),
 		isFirefox: computed(() => browser.value === 'firefox'),
 		isSafari: computed(() => browser.value === 'safari'),
 		isEdge: computed(() => browser.value === 'edge'),
 		isOpera: computed(() => browser.value === 'opera'),
-
-		// Orientation
 		isPortrait: computed(() => orientation.value === 'portrait'),
 		isLandscape: computed(() => orientation.value === 'landscape'),
 	};

package/src/runtime/composables/useDropzone.ts

@@ -1,3 +1,6 @@
+import { ref, type Ref } from 'vue';
+import { useNuxtApp } from 'nuxt/app';
+
 interface DropzoneConfig {
 	allowedExt?: string[];
 	maxSizeLimit?: number;
@@ -9,14 +12,10 @@ export const useDropzone = (config: DropzoneConfig = {}) => {
 	const dragActive = ref(false);
 	const droppedFile = ref<File[]>([]);
 
-	// Use config values with defaults
 	const maxSizeLimit = config.maxSizeLimit ?? 8;
 	const maxFileLimit = config.maxFileLimit ?? 3;
 	const allowedExt = config.allowedExt ?? ['pdf', 'doc', 'docx', 'jpeg', 'jpg', 'png', 'xls', 'xlsx', 'mp4', 'mov', 'avi', 'mpeg', 'mpg', 'zip'];
 
-	/**
-	 * Converts dropped files to FormData entries
-	 */
 	const uploadFiles = () => {
 		const formData = new FormData();
 		droppedFile.value.forEach((file) => {
@@ -25,73 +24,53 @@ export const useDropzone = (config: DropzoneConfig = {}) => {
 		return [...formData.entries()] as [string, File][];
 	};
 
-	/**
-	 * Toggle drag active state
-	 */
 	const toggleActive = () => {
 		dragActive.value = !dragActive.value;
 	};
 
-	/**
-	 * Validate file extension
-	 */
 	const validateFileExtension = (fileName: string): boolean => {
 		const extension = fileName.split('.').pop()?.toLowerCase();
 		return extension ? allowedExt.includes(extension) : false;
 	};
 
-	/**
-	 * Validate file size
-	 */
 	const validateFileSize = (fileSize: number): boolean => {
 		const sizeInMB = fileSize / (1024 * 1024);
 		return sizeInMB < maxSizeLimit;
 	};
 
-	/**
-	 * Handle file selection from drop or file input
-	 */
 	const selectedFile = (event: DragEvent | Event, type: 'drop' | 'select', fileInputRef: Ref<HTMLInputElement | null>) => {
 		const files = type === 'drop' ? Array.from((event as DragEvent).dataTransfer?.files ?? []) : Array.from((event.target as HTMLInputElement).files ?? []);
 
 		if (files.length === 0) return;
 
-		// Check file count limit
 		const totalFiles = droppedFile.value.length + files.length;
 		if (totalFiles > maxFileLimit) {
-			$toast.error(`Maximum ${maxFileLimit} file${maxFileLimit > 1 ? 's' : ''} allowed. You currently have ${droppedFile.value.length} file(s) and tried to add ${files.length} more.`, { position: 'top-center' });
+			($toast as any).error(`Maximum ${maxFileLimit} file${maxFileLimit > 1 ? 's' : ''} allowed. You currently have ${droppedFile.value.length} file(s) and tried to add ${files.length} more.`, { position: 'top-center' });
 			return;
 		}
 
-		// Validate file extensions
 		const invalidFiles = files.filter((file) => !validateFileExtension(file.name));
 		if (invalidFiles.length > 0) {
 			const fileNames = invalidFiles.map((f) => f.name).join(', ');
-			$toast.error(`Invalid file format: ${fileNames}. Supported formats: ${allowedExt.join(', ')}`, { position: 'top-center' });
+			($toast as any).error(`Invalid file format: ${fileNames}. Supported formats: ${allowedExt.join(', ')}`, { position: 'top-center' });
 			return;
 		}
 
-		// Validate file sizes
 		const oversizedFiles = files.filter((file) => !validateFileSize(file.size));
 		if (oversizedFiles.length > 0) {
 			const fileNames = oversizedFiles.map((f) => f.name).join(', ');
-			$toast.error(`File size exceeds ${maxSizeLimit} MB limit: ${fileNames}`, { position: 'top-center' });
+			($toast as any).error(`File size exceeds ${maxSizeLimit} MB limit: ${fileNames}`, { position: 'top-center' });
 			return;
 		}
 
-		// Add valid files
 		droppedFile.value.push(...files);
 		dragActive.value = droppedFile.value.length > 0;
 
-		// Reset input value to allow re-uploading the same file
 		if (fileInputRef.value) {
 			fileInputRef.value.value = '';
 		}
 	};
 
-	/**
-	 * Remove file by index
-	 */
 	const deleteFile = (index: number) => {
 		if (index >= 0 && index < droppedFile.value.length) {
 			droppedFile.value.splice(index, 1);
@@ -99,9 +78,6 @@ export const useDropzone = (config: DropzoneConfig = {}) => {
 		}
 	};
 
-	/**
-	 * Clear all files
-	 */
 	const clearFiles = () => {
 		droppedFile.value = [];
 		dragActive.value = false;

package/src/runtime/composables/useGantt.ts

@@ -1,3 +1,14 @@
+import { inject, provide, type InjectionKey, type Ref } from 'vue';
+import {
+	differenceInDays,
+	differenceInMonths,
+	differenceInWeeks,
+	getDaysInMonth,
+	startOfDay,
+	startOfMonth,
+	startOfWeek,
+} from '../utils/date';
+
 export type GanttRange = 'daily' | 'weekly' | 'monthly';
 
 export interface GanttFeature {
@@ -59,7 +70,6 @@ export function useGantt() {
 	return context;
 }
 
-// Helper functions for date calculations
 export function getDifferenceIn(range: GanttRange) {
 	switch (range) {
 		case 'daily':
@@ -78,7 +88,7 @@ export function getStartOf(range: GanttRange) {
 		case 'daily':
 			return startOfDay;
 		case 'weekly':
-			return (date: Date) => startOfWeek(date, { weekStartsOn: 1 }); // Assuming week starts on Monday
+			return (date: Date) => startOfWeek(date, { weekStartsOn: 1 });
 		case 'monthly':
 			return startOfMonth;
 		default:
@@ -118,7 +128,6 @@ export function getOffset(date: Date, timelineStartDate: Date, context: { zoom:
 	return offset * context.columnWidth * (context.zoom / 100) + innerOffset;
 }
 
-// Generate timeline data
 export function generateTimelineData(startYear: number, yearCount: number): TimelineData {
 	const data: TimelineData = [];
 

package/src/runtime/composables/useKanban.ts

@@ -1,3 +1,5 @@
+import { inject, provide, type InjectionKey, type Ref } from 'vue';
+
 export type KanbanItemProps = {
 	id: string;
 	name: string;

package/src/runtime/composables/useServerSideEvent.ts

@@ -1,3 +1,6 @@
+import { computed } from 'vue';
+import { useState } from 'nuxt/app';
+
 export interface AppNotification {
 	id: string;
 	type: string;
@@ -17,14 +20,6 @@ export interface AppAnnouncement {
 	read: boolean;
 }
 
-// {
-// 			id: 'sample-1',
-// 			type: 'info',
-// 			title: 'Leave request approved',
-// 			message: 'Your annual leave request for 25-27 Apr has been approved.',
-// 			createdAt: new Date(Date.now() - 5 * 60 * 1000).toISOString(),
-// 			read: false,
-// 		},
 export function useServerSideEvent() {
 	const connected = useState<boolean>('sse:connected', () => false);
 	const notifications = useState<AppNotification[]>('sse:notifications', () => []);

package/src/runtime/plugins/ssr-width.ts

@@ -1,3 +1,4 @@
+import { defineNuxtPlugin } from 'nuxt/app';
 import { provideSSRWidth } from '@vueuse/core';
 
 export default defineNuxtPlugin((nuxtApp) => {

package/src/runtime/plugins/toast.client.ts

@@ -1,3 +1,4 @@
+import { defineNuxtPlugin } from 'nuxt/app';
 import { toast } from '../components/base/toast/state';
 
 export default defineNuxtPlugin(() => {