@bagelink/vue 1.0.57 → 1.0.60

package/dist/types/BagelForm.d.ts

@@ -1,4 +1,4 @@
-import { SelectInput, TextInput } from '..';
+import { SelectInput, TextInput } from '../index.ts';
 import { VNode } from 'vue';
 export type AttributeValue = string | number | boolean | undefined | undefined | {
     [key: string]: any;

package/dist/types/NavLink.d.ts

@@ -1,4 +1,4 @@
-import { IconType } from '..';
+import { IconType } from '../index.ts';
 export interface NavLink {
     label: string;
     to?: string;

package/dist/types/TableSchema.d.ts

@@ -1,4 +1,4 @@
-import { BglFormSchemaT } from '..';
+import { BglFormSchemaT } from '../index.ts';
 import { Ref, ComputedRef } from 'vue';
 export type SortDirectionsT = 'ASC' | 'DESC';
 export type EmitOrderT = `${string} ${SortDirectionsT}`;

package/dist/utils/BagelFormUtils.d.ts

@@ -1,4 +1,4 @@
-import { BglFormSchemaT, Field, Option, DotNotation } from '..';
+import { BglFormSchemaT, Field, Option, DotNotation } from '../index.ts';
 import { UploadInputProps } from '../components/form/inputs/Upload/upload.types';
 interface InputOptions {
     required?: boolean;
@@ -110,14 +110,14 @@ export declare function bglForm(idOrField?: string | Field, ...schema: Field[]):
     $el: string;
     id: string;
     attrs: {
-        schema: (string | import('..').BaseBagelField<{
+        schema: (string | import('../index.ts').BaseBagelField<{
             [key: string]: any;
         }>)[];
     };
 } | {
     $el: string;
     attrs: {
-        schema: (import('..').BaseBagelField<{
+        schema: (import('../index.ts').BaseBagelField<{
             [key: string]: any;
         }> | undefined)[];
     };

package/dist/utils/index.d.ts

@@ -1,4 +1,4 @@
-import { Attributes, BglFormSchemaT } from '..';
+import { Attributes, BglFormSchemaT } from '../index.ts';
 export declare function debounce(fn: () => void, wait?: number): void;
 export declare function slugify(str: string): string;
 export declare function keyToLabel(key?: string): string | undefined;

package/dist/utils/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/utils/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,cAAc,EAAE,MAAM,eAAe,CAAA;AAI/D,wBAAgB,QAAQ,CAAC,EAAE,EAAE,MAAM,IAAI,EAAE,IAAI,GAAE,MAAY,QAO1D;AAED,wBAAgB,OAAO,CAAC,GAAG,EAAE,MAAM,UAMlC;AAED,wBAAgB,UAAU,CAAC,GAAG,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,SAAS,CAQ3D;AAED,wBAAsB,QAAQ,CAAC,IAAI,EAAE,MAAM,EAAE,EAAE,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,iBAGtE;AAED,wBAAgB,QAAQ,CAAC,GAAG,MAAM,EAAE,MAAM,EAAE,UAG3C;AAED,wBAAgB,SAAS,CAAC,KAAK,EAAE,aAAa,EAAE,UAAU,EAAE,MAAM,IAAI,QAIrE;AAED,wBAAgB,QAAQ,CAAC,QAAQ,CAAC,EAAE,GAAG,EAAE,GAAG,CAAC,EAAE,GAAG,EAAE,GAAG,OAAO,EAAE,GAAG,EAAE,UAOpE;AAED,wBAAgB,SAAS,CAAC,CAAC,GAAG;IAAE,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAA;CAAE,EACnD,KAAK,CAAC,EAAE,UAAU,EAClB,QAAQ,CAAC,EAAE,GAAG,EACd,GAAG,CAAC,EAAE,CAAC,OAcP;AAED,wBAAgB,KAAK,CAAC,KAAK,EAAE,GAAG,EAAE,QAAQ,EAAE,GAAG,OAO9C;AAED,wBAAgB,SAAS,CAAC,QAAQ,CAAC,EAAE;IAAE,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAA;CAAE,EAAE,OAAO,CAAC,EAAE,MAAM,OAG5E;AAED,eAAO,MAAM,MAAM,eAAgB,GAAG,YAA0C,CAAA;AAEhF,wBAAgB,iBAAiB,CAAC,CAAC,EAClC,IAAI,CAAC,EAAE,GAAG,EAAE,EACZ,OAAO,CAAC,EAAE,MAAM,EAAE,GAChB,cAAc,CAAC,CAAC,CAAC,CAgBnB;AAED,wBAAgB,KAAK,CAAC,EAAE,GAAE,MAAY,oBAErC;AAED,wBAAgB,YAAY,CAAC,GAAG,EAAE,MAAM,EAAE,OAAO,CAAC,EAAE;IAAE,EAAE,CAAC,EAAE,MAAM,CAAA;CAAE,GAAG,OAAO,CAAC,IAAI,CAAC,CAoBlF;AAED,wBAAgB,WAAW,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC,IAAI,CAAC,CAatD;AAED,wBAAgB,YAAY,CAAC,GAAG,EAAE,MAAM,UAIvC;AAED,wBAAgB,kBAAkB,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,GAAG,SAAS,EAAE,aAAa,SAAO,GAAG,MAAM,GAAG,SAAS,CAG/G;AAED,OAAO,KAAK,cAAc,MAAM,kBAAkB,CAAA;AAElD,OAAO,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAA;AAEhC,OAAO,EAAE,YAAY,EAAE,MAAM,WAAW,CAAA;AACxC,OAAO,EAAE,aAAa,EAAE,MAAM,cAAc,CAAA;AAK5C,wBAAgB,YAAY,CAAC,OAAO,CAAC,EAAE,MAAM,sBAO5C;AAED,wBAAgB,cAAc,CAAC,GAAG,EAAE,GAAG,EAAE,IAAI,CAAC,EAAE,MAAM,EAAE,YAAY,GAAE,GAAe,GAAG,GAAG,CAa1F"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/utils/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,cAAc,EAAE,MAAM,eAAe,CAAA;AAI/D,wBAAgB,QAAQ,CAAC,EAAE,EAAE,MAAM,IAAI,EAAE,IAAI,GAAE,MAAY,QAO1D;AAED,wBAAgB,OAAO,CAAC,GAAG,EAAE,MAAM,UAMlC;AAED,wBAAgB,UAAU,CAAC,GAAG,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,SAAS,CAQ3D;AAED,wBAAsB,QAAQ,CAAC,IAAI,EAAE,MAAM,EAAE,EAAE,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,iBAGtE;AAED,wBAAgB,QAAQ,CAAC,GAAG,MAAM,EAAE,MAAM,EAAE,UAG3C;AAED,wBAAgB,SAAS,CAAC,KAAK,EAAE,aAAa,EAAE,UAAU,EAAE,MAAM,IAAI,QAIrE;AAED,wBAAgB,QAAQ,CAAC,QAAQ,CAAC,EAAE,GAAG,EAAE,GAAG,CAAC,EAAE,GAAG,EAAE,GAAG,OAAO,EAAE,GAAG,EAAE,UAOpE;AAED,wBAAgB,SAAS,CAAC,CAAC,GAAG;IAAE,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAA;CAAE,EACnD,KAAK,CAAC,EAAE,UAAU,EAClB,QAAQ,CAAC,EAAE,GAAG,EACd,GAAG,CAAC,EAAE,CAAC,OAcP;AAED,wBAAgB,KAAK,CAAC,KAAK,EAAE,GAAG,EAAE,QAAQ,EAAE,GAAG,OAO9C;AAED,wBAAgB,SAAS,CAAC,QAAQ,CAAC,EAAE;IAAE,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAA;CAAE,EAAE,OAAO,CAAC,EAAE,MAAM,OAG5E;AAED,eAAO,MAAM,MAAM,GAAI,YAAY,GAAG,YAA0C,CAAA;AAEhF,wBAAgB,iBAAiB,CAAC,CAAC,EAClC,IAAI,CAAC,EAAE,GAAG,EAAE,EACZ,OAAO,CAAC,EAAE,MAAM,EAAE,GAChB,cAAc,CAAC,CAAC,CAAC,CAgBnB;AAED,wBAAgB,KAAK,CAAC,EAAE,GAAE,MAAY,oBAErC;AAED,wBAAgB,YAAY,CAAC,GAAG,EAAE,MAAM,EAAE,OAAO,CAAC,EAAE;IAAE,EAAE,CAAC,EAAE,MAAM,CAAA;CAAE,GAAG,OAAO,CAAC,IAAI,CAAC,CAoBlF;AAED,wBAAgB,WAAW,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC,IAAI,CAAC,CAatD;AAED,wBAAgB,YAAY,CAAC,GAAG,EAAE,MAAM,UAIvC;AAED,wBAAgB,kBAAkB,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,GAAG,SAAS,EAAE,aAAa,SAAO,GAAG,MAAM,GAAG,SAAS,CAG/G;AAED,OAAO,KAAK,cAAc,MAAM,kBAAkB,CAAA;AAElD,OAAO,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAA;AAEhC,OAAO,EAAE,YAAY,EAAE,MAAM,WAAW,CAAA;AACxC,OAAO,EAAE,aAAa,EAAE,MAAM,cAAc,CAAA;AAK5C,wBAAgB,YAAY,CAAC,OAAO,CAAC,EAAE,MAAM,sBAO5C;AAED,wBAAgB,cAAc,CAAC,GAAG,EAAE,GAAG,EAAE,IAAI,CAAC,EAAE,MAAM,EAAE,YAAY,GAAE,GAAe,GAAG,GAAG,CAa1F"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@bagelink/vue",
   "type": "module",
-  "version": "1.0.57",
+  "version": "1.0.60",
   "description": "Bagel core sdk packages",
   "author": {
     "name": "Neveh Allon",
@@ -34,7 +34,7 @@
     "./style.css": "./dist/style.css",
     "./*": "./*"
   },
-  "main": "./dist/index.mjs",
+  "main": "./dist/index.cjs",
   "module": "./dist/index.mjs",
   "types": "./dist/index.d.ts",
   "typesVersions": {
@@ -82,15 +82,16 @@
   },
   "dependencies": {
     "date-fns": "^4.1.0",
-    "@vueuse/core": "^12.8.1",
-    "axios": "^1.8.1",
+    "@vueuse/core": "^13.0.0",
+    "axios": "^1.8.2",
     "floating-vue": "^5.2.2",
-    "libphonenumber-js": "1.12.4",
+    "libphonenumber-js": "1.12.5",
     "signature_pad": "^5.0.4"
   },
   "scripts": {
     "dev": "tsx watch src/index.ts",
     "build": "vite build",
-    "start": "tsx src/index.ts"
+    "start": "tsx src/index.ts",
+    "test": "vitest"
   }
 }

package/src/components/DataPreview.vue

@@ -4,7 +4,7 @@ import type { Slots } from 'vue'
 import type { TableSchemaProps } from '../types/TableSchema'
 import { computed, useSlots } from 'vue'
 import { useSchemaField } from '../composables/useSchemaField'
-import { useTableData } from './DataTable/useTableData'
+import { useTableData } from './dataTable/useTableData'
 
 const props = defineProps<Omit<TableSchemaProps<T>, 'data'> & { modelValue: T, includeUnset?: boolean }>()
 const slots = useSlots() as Slots & Record<string, (props: { row: T, field: BaseBagelField<T> }) => any>

package/src/components/{Calendar → calendar}/Index.vue

@@ -332,7 +332,7 @@ function handleDateWasClicked(payload: string) {
 </template>
 
 <!-- <style src="../../styles/_variables.css"></style> -->
-<style src="../Calendar/styles/_variables.css"></style>
+<style src="../calendar/styles/_variables.css"></style>
 
 <style>
 .calendar-root-wrapper {

package/src/components/{Calendar → calendar}/models/Event.ts

@@ -14,7 +14,7 @@ export class EventImpl implements EventInterface {
 	disableResize?: modeType[]
 	isCustom?: boolean | modeType[]
 
-	// Properties that should not be set from outside Qalendar
+	// Properties that should not be set from outside Calendar
 	nOfPreviousConcurrentEvents?: number
 
 	constructor(

package/src/components/form/inputs/DateInput.vue

@@ -1,8 +1,8 @@
 <script setup lang="ts">
-import type { modeType } from '../../Calendar/typings/types'
+import type { modeType } from '../../calendar/typings/types'
 import { Btn, NumberInput, Dropdown, TextInput, formatDate } from '@bagelink/vue'
 import { computed, ref, onMounted, onBeforeUnmount } from 'vue'
-import Time, { WEEK_START_DAY } from '../../Calendar/helpers/Time'
+import Time, { WEEK_START_DAY } from '../../calendar/helpers/Time'
 
 // Types
 type ViewMode = 'days' | 'months' | 'years'
@@ -18,7 +18,6 @@ const props = withDefaults(
 		modelValue?: string | Date
 		min?: string | Date
 		max?: string | Date
-		timezone?: string
 		mode?: modeType
 		defaultValue?: string | Date
 		firstDayOfWeek?: WEEK_START_DAY
@@ -29,13 +28,6 @@ const props = withDefaults(
 		enableTime: false,
 		editMode: true,
 		small: false,
-		timezone: () => {
-			try {
-				return Intl.DateTimeFormat().resolvedOptions().timeZone
-			} catch {
-				return 'UTC'
-			}
-		}, // Default to UTC, will be updated in onMounted if not explicitly set
 		mode: 'day',
 		firstDayOfWeek: WEEK_START_DAY.SUNDAY,
 		locale: ''
@@ -52,6 +44,13 @@ const currentView = ref<ViewMode>('days')
 // Time helper instance
 const time = new Time(props.firstDayOfWeek, props.locale)
 
+// Parse a date string or object into a Date object
+function parseDate(value: string | Date | undefined): Date | null {
+	if (!value) return null
+	const date = typeof value === 'string' ? new Date(value) : value
+	return Number.isNaN(date.getTime()) ? null : date
+}
+
 // Date formatting composable
 function useFormatting() {
 	const formatDisplayDate = (date: Date | string | undefined): string => {
@@ -83,7 +82,6 @@ function useFormatting() {
 
 	return {
 		formatDisplayDate,
-
 		parseUserInput
 	}
 }
@@ -92,8 +90,8 @@ function useFormatting() {
 function useDateValidation() {
 	const isDateDisabled = (date: Date | null) => {
 		if (!date) return true
-		const minDate = props.min ? new Date(props.min) : null
-		const maxDate = props.max ? new Date(props.max) : null
+		const minDate = parseDate(props.min)
+		const maxDate = parseDate(props.max)
 
 		if (minDate && date < minDate) return true
 		if (maxDate && date > maxDate) return true
@@ -101,8 +99,8 @@ function useDateValidation() {
 	}
 
 	const isYearDisabled = (year: number) => {
-		const minDate = props.min ? new Date(props.min) : null
-		const maxDate = props.max ? new Date(props.max) : null
+		const minDate = parseDate(props.min)
+		const maxDate = parseDate(props.max)
 
 		if (minDate && year < minDate.getFullYear()) return true
 		if (maxDate && year > maxDate.getFullYear()) return true
@@ -123,9 +121,7 @@ function useDateState() {
 	const formattedMin = computed(() => formatDate(props.min, props.enableTime ? 'dd.mm.yy HH:MM' : 'dd.mm.yy'))
 	const formattedMax = computed(() => formatDate(props.max, props.enableTime ? 'dd.mm.yy HH:MM' : 'dd.mm.yy'))
 	const selectedDate = computed(() => {
-		const value = props.modelValue || props.defaultValue
-		if (!value) return null
-		return typeof value === 'string' ? new Date(value) : value
+		return parseDate(props.modelValue || props.defaultValue)
 	})
 
 	return {
@@ -262,34 +258,32 @@ function useTimeHandling() {
 		if (!selectedDate.value) return
 		const newDate = new Date(selectedDate.value)
 		newDate.setHours(value)
-		emit('update:modelValue', newDate.toISOString())
+		emitDateValue(newDate)
 	}
 
 	const handleMinuteInput = (value: number) => {
 		if (!selectedDate.value) return
 		const newDate = new Date(selectedDate.value)
 		newDate.setMinutes(value)
-		emit('update:modelValue', newDate.toISOString())
+		emitDateValue(newDate)
 	}
 
-	const timezoneDisplay = computed(() => {
-		if (!props.enableTime) return ''
-		try {
-			return new Date().toLocaleString('en-US', {
-				timeZoneName: 'short',
-				timeZone: props.timezone
-			}).split(' ').pop()
-		} catch {
-			return 'UTC'
-		}
-	})
-
 	return {
 		hours,
 		minutes,
 		handleHourInput,
-		handleMinuteInput,
-		timezoneDisplay
+		handleMinuteInput
+	}
+}
+
+// Centralized date emission function
+function emitDateValue(date: Date) {
+	if (props.enableTime) {
+		// For dates with time, emit the date object directly
+		emit('update:modelValue', formatDate(date, 'yyyy-mm-dd HH:MM'))
+	} else {
+		// For date-only, emit a date with time set to midnight
+		emit('update:modelValue', formatDate(date, 'yyyy-mm-dd'))
 	}
 }
 
@@ -304,25 +298,7 @@ function useInputHandling() {
 
 		const date = parseUserInput(input.value)
 		if (date) {
-			if (props.enableTime) {
-				// Apply timezone adjustments
-				try {
-					// Convert to ISO string in the target timezone
-					const targetDate = new Date(date.toLocaleString('en-US', { timeZone: props.timezone }))
-					const tzOffset = targetDate.getTime() - date.getTime()
-					date.setTime(date.getTime() - tzOffset)
-				} catch {
-					// Fallback to old behavior for UTC
-					if (props.timezone === 'UTC') {
-						const tzOffset = new Date().getTimezoneOffset()
-						date.setMinutes(date.getMinutes() + tzOffset)
-					}
-				}
-				emit('update:modelValue', date.toISOString())
-			} else {
-				const utcDate = new Date(Date.UTC(date.getFullYear(), date.getMonth(), date.getDate()))
-				emit('update:modelValue', utcDate.toISOString().split('T')[0])
-			}
+			emitDateValue(date)
 		}
 	}
 
@@ -343,25 +319,7 @@ function useInputHandling() {
 		} else if (event.key === 'Enter' && inputValue.value) {
 			const date = parseUserInput(inputValue.value)
 			if (date) {
-				if (props.enableTime) {
-					// Apply timezone adjustments
-					try {
-						// Convert to ISO string in the target timezone
-						const targetDate = new Date(date.toLocaleString('en-US', { timeZone: props.timezone }))
-						const tzOffset = targetDate.getTime() - date.getTime()
-						date.setTime(date.getTime() - tzOffset)
-					} catch {
-						// Fallback to old behavior for UTC
-						if (props.timezone === 'UTC') {
-							const tzOffset = new Date().getTimezoneOffset()
-							date.setMinutes(date.getMinutes() + tzOffset)
-						}
-					}
-					emit('update:modelValue', date.toISOString())
-				} else {
-					const utcDate = new Date(Date.UTC(date.getFullYear(), date.getMonth(), date.getDate()))
-					emit('update:modelValue', utcDate.toISOString().split('T')[0])
-				}
+				emitDateValue(date)
 				isOpen.value = false
 			}
 		}
@@ -388,40 +346,25 @@ const {
 // Initialize remaining composables
 const { currentMonthDays, currentMonthValue, months, years, weekDays, isSelected, isToday, isNotInMonth } = useCalendarView()
 const { selectMonth, selectYear, previousMonth, nextMonth, previousYear, nextYear } = useNavigation()
-const { hours, minutes, handleHourInput, handleMinuteInput, timezoneDisplay } = useTimeHandling()
+const { hours, minutes, handleHourInput, handleMinuteInput } = useTimeHandling()
 
 // Date selection handler
 function selectDate(date: Date | null) {
 	if (!date || !props.editMode) return
 
 	if (props.enableTime) {
-		// Create date in the target timezone
+		// Create date with current time values
 		const newDate = new Date(date.getFullYear(), date.getMonth(), date.getDate())
 		const currentHours = selectedDate.value?.getHours() ?? new Date().getHours()
 		const currentMinutes = selectedDate.value?.getMinutes() ?? new Date().getMinutes()
 		newDate.setHours(currentHours)
 		newDate.setMinutes(currentMinutes)
 
-		// Apply timezone adjustment
-		try {
-			// Convert to ISO string in the target timezone
-			const targetDate = new Date(newDate.toLocaleString('en-US', { timeZone: props.timezone }))
-			const tzOffset = targetDate.getTime() - newDate.getTime()
-			newDate.setTime(newDate.getTime() - tzOffset)
-		} catch {
-			// Fallback to old behavior for UTC
-			if (props.timezone === 'UTC') {
-				const tzOffset = new Date().getTimezoneOffset()
-				newDate.setMinutes(newDate.getMinutes() + tzOffset)
-			}
-		}
-
-		emit('update:modelValue', newDate.toISOString())
+		emitDateValue(newDate)
 	} else {
-		// For date-only selection, ensure we're working with UTC midnight
-		// This ensures the date displayed matches the date selected regardless of timezone
-		const utcDate = new Date(Date.UTC(date.getFullYear(), date.getMonth(), date.getDate()))
-		emit('update:modelValue', utcDate.toISOString().split('T')[0])
+		// For date-only selection, create a date at midnight
+		const newDate = new Date(date.getFullYear(), date.getMonth(), date.getDate())
+		emitDateValue(newDate)
 		isOpen.value = false
 	}
 }
@@ -430,6 +373,15 @@ const datePickerRef = ref<HTMLElement | null>(null)
 const calendarRef = ref<HTMLElement | null>(null)
 
 onMounted(() => {
+	// Initialize calendar view with selected date if available
+	if (selectedDate.value) {
+		currentMonth.value = new Date(
+			selectedDate.value.getFullYear(),
+			selectedDate.value.getMonth(),
+			1
+		)
+	}
+
 	const handleDocumentClick = (e: MouseEvent) => {
 		const target = e.target as HTMLElement
 		if (!datePickerRef.value?.contains(target) && !calendarRef.value?.contains(target)) {
@@ -587,7 +539,6 @@ onMounted(() => {
 							@update:model-value="handleMinuteInput"
 						/>
 					</div>
-					<span class="txt-center opacity-6 txt14">{{ timezoneDisplay }}</span>
 					<Btn v-if="selectedDate" flat @click="isOpen = false">
 						Done
 					</Btn>

package/src/components/form/inputs/DatePick.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import type { modeType } from '../../Calendar/typings/types'
+import type { modeType } from '../../calendar/typings/types'
 import { Btn, NumberInput, Dropdown, formatDate } from '@bagelink/vue'
-import Time, { WEEK_START_DAY } from '../../Calendar/helpers/Time'
+import Time, { WEEK_START_DAY } from '../../calendar/helpers/Time'
 
 const props = withDefaults(
 	defineProps<{

package/src/components/form/inputs/NumberInput.vue

@@ -53,7 +53,7 @@ let numberValue = $ref<number>()
 onMounted(() => {
 	const num = modelValue !== undefined ? Number.parseFloat(`${modelValue}`) : undefined
 	const defaultNum = defaultValue !== undefined ? Number.parseFloat(`${defaultValue}`) : undefined
-	numberValue = num || defaultNum
+	numberValue = num ?? defaultNum
 })
 
 const btnLayouts: NumberLayout[] = ['horizontal', 'vertical']
@@ -77,7 +77,7 @@ const canDecrement = $computed(() => min === undefined || subtract(numberValue,
 // Methods
 function increment() {
 	if (!canAdd) return
-	numberValue = add(numberValue || 0, step)
+	numberValue = add(numberValue ?? 0, step)
 	emit('update:modelValue', numberValue)
 }
 

package/src/components/form/inputs/OTP.vue

@@ -121,8 +121,7 @@ function isDigitsFull() {
     caret-color: transparent;
 }
 
-.digit-box::-webkit-outer-spin-button,
-.digit-box::-webkit-inner-spin-button {
+.digit-box::-webkit-outer-spin-button {
     -webkit-appearance: none; /* Chrome, Safari, Edge, Opera */
     margin: 0;
 }

package/src/components/form/inputs/RichText/utils/media.ts

@@ -1,8 +1,8 @@
 import type { Modal } from '@bagelink/vue'
 import type { EditorState } from '../richTextTypes'
-import { bagelFormUtils } from '@bagelink/vue'
+import { bagelFormUtils as bglFrmUtil } from '@bagelink/vue'
 
-const { frmRow, numField } = bagelFormUtils
+// const { frmRow, numField } = bagelFormUtils
 
 export function insertImage(modal: typeof Modal, state: EditorState) {
 	const { range, doc } = state
@@ -13,9 +13,9 @@ export function insertImage(modal: typeof Modal, state: EditorState) {
 		schema: [
 			{ id: 'src', $el: 'file', attrs: { bindkey: 'url' } },
 			{ id: 'alt', $el: 'text', label: 'Alt Text' },
-			frmRow(
-				numField('width', 'Width', { min: 1 }),
-				numField('height', 'Height', { min: 1 }),
+			bglFrmUtil.frmRow(
+				bglFrmUtil.numField('width', 'Width', { min: 1 }),
+				bglFrmUtil.numField('height', 'Height', { min: 1 }),
 			),
 			{ id: 'figcaption', $el: 'check', label: 'Show Caption' },
 		],
@@ -77,9 +77,9 @@ export function insertEmbed(modal: typeof Modal, state: EditorState) {
 		title: 'Insert Embed',
 		schema: [
 			{ id: 'url', $el: 'text', label: 'URL', attrs: { placeholder: 'Enter URL (YouTube, Vimeo, etc.)' } },
-			frmRow(
-				numField('width', 'Width', { min: 200, placeholder: '560' }),
-				numField('height', 'Height', { min: 200, placeholder: '315' })
+			bglFrmUtil.frmRow(
+				bglFrmUtil.numField('width', 'Width', { min: 200, placeholder: '560' }),
+				bglFrmUtil.numField('height', 'Height', { min: 200, placeholder: '315' })
 			),
 			{ id: 'allowFullscreen', $el: 'check', label: 'Allow Fullscreen', value: true },
 		],

package/src/components/form/inputs/TelInput.vue

@@ -14,7 +14,7 @@ import axios from 'axios'
 import { parsePhoneNumberFromString } from 'libphonenumber-js'
 import { onMounted, watch, ref, computed } from 'vue'
 
-export interface Props {
+export interface TelInputProps {
 	label?: string
 	id?: string
 	class?: string
@@ -38,7 +38,7 @@ export interface Props {
 	parseArg?: { extract?: boolean }
 }
 
-const props = withDefaults(defineProps<Props>(), {
+const props = withDefaults(defineProps<TelInputProps>(), {
 	modelValue: '',
 	autocomplete: 'on',
 	allCountries: () => allCountries,
@@ -107,7 +107,7 @@ const computedInputOptions = $computed(() => ({
 }))
 
 // Composables
-function useCountrySelection(props: Props, emit: any) {
+function useCountrySelection(props: TelInputProps, emit: any) {
 	const activeCountryCode = ref<CountryCode>()
 	const selectedIndex = ref<number>()
 	const searchQuery = ref('')
@@ -227,7 +227,7 @@ function useCountrySelection(props: Props, emit: any) {
 	}
 }
 
-function usePhoneNumberFormatting(props: Props, activeCountryCode: Ref<CountryCode | undefined>) {
+function usePhoneNumberFormatting(props: TelInputProps, activeCountryCode: Ref<CountryCode | undefined>) {
 	const parseArgs = computed(() => ({
 		...props.parseArg,
 		defaultCountry: activeCountryCode.value,

package/src/components/form/inputs/Upload/UploadInput.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import type { BglFile, QueueFile, UploadInputProps } from './upload.types'
-import { Btn, IMAGE_FORMATS_REGEXP, Icon, useBagel, Card, Image, pathKeyToURL } from '@bagelink/vue'
+import { Btn, IMAGE_FORMATS_REGEXP, Icon, useBagel, Card, Image, pathKeyToURL, bagelInjectionKey } from '@bagelink/vue'
 import { watch } from 'vue'
 import { files } from './upload'
 
@@ -11,7 +11,7 @@ const props = withDefaults(defineProps<UploadInputProps>(), {
 })
 
 const emit = defineEmits(['update:modelValue', 'addFileStart'])
-const bagel = useBagel()
+const bagel = useBagel(bagelInjectionKey)
 
 files.setBaseUrl(bagel.host)
 

package/src/components/form/useBagelFormState.ts

@@ -69,8 +69,8 @@ export function provideBagelFormState<T>(initialData: T) {
 	return state
 }
 
-export function useBagelFormState<T>() {
-	const state = inject<BagelFormState<T>>(FORM_STATE_KEY)
+export function useBagelFormState<T>(injectionKey: typeof FORM_STATE_KEY = FORM_STATE_KEY): BagelFormState<T> {
+	const state = inject<BagelFormState<T>>(injectionKey)
 	if (!state) throw new Error('BagelFormState must be provided')
 	return state
 }

package/src/components/index.ts

@@ -6,16 +6,15 @@ export { default as Avatar } from './Avatar.vue'
 export { default as Badge } from './Badge.vue'
 export { default as BglVideo } from './BglVideo.vue'
 export { default as Btn } from './Btn.vue'
-// export { default as CalendarExample } from './Calendar/CalendarExample.vue'
-export { default as Calendar } from './Calendar/Index.vue'
+export { default as Calendar } from './calendar/Index.vue'
 export { default as Card } from './Card.vue'
 export { default as Carousel } from './Carousel.vue'
-export * from './Dashboard'
+export * from './dashboard'
 export { default as DataPreview } from './DataPreview.vue'
-export { default as DataTable } from './DataTable/DataTable.vue'
+export { default as DataTable } from './dataTable/DataTable.vue'
 /** @deprecated Use DataTable instead. TableSchema is an alias that will be removed in a future version. */
-export { default as TableSchema } from './DataTable/DataTable.vue'
-export { Draggable, useDraggable, vDraggable } from './Draggable'
+export { default as TableSchema } from './dataTable/DataTable.vue'
+export { Draggable, useDraggable, vDraggable } from './draggable'
 export { default as Dropdown } from './Dropdown.vue'
 export { default as FieldSetVue } from './FieldSetVue.vue'
 export { default as Flag } from './Flag.vue'
@@ -23,7 +22,7 @@ export * from './form'
 export { default as Icon } from './Icon/Icon.vue'
 export { default as IframeVue } from './IframeVue.vue'
 export { default as Image } from './Image.vue'
-export * from './Layout'
+export * from './layout'
 export { default as ListItem } from './ListItem.vue'
 export { default as ListView } from './ListView.vue'
 export { default as Loading } from './Loading.vue'

package/src/components/{Lightbox → lightbox}/index.ts

@@ -1,4 +1,5 @@
-import type { App, Directive, DirectiveBinding } from 'vue'
+import type { App, Directive, DirectiveBinding, Plugin } from 'vue'
+
 import type { LightboxItem } from './lightbox.types'
 import { IMAGE_FORMATS_REGEXP, pathKeyToURL, VIDEO_FORMATS_REGEXP } from '@bagelink/vue'
 import { createApp } from 'vue'
@@ -86,8 +87,10 @@ function getLightboxInstance(): InstanceType<typeof Lightbox> {
 	return lightboxInstance
 }
 
-export default {
+const lightboxPlugin: Plugin = {
 	install(app: App) {
 		app.directive('lightbox', lightboxDirective)
 	},
 }
+
+export default lightboxPlugin

package/src/plugins/bagel.ts

@@ -2,7 +2,8 @@ import type { InjectionKey, Plugin } from 'vue'
 import { Bagel } from '@bagelink/sdk'
 import FloatingVue from 'floating-vue'
 import { inject } from 'vue'
-import Lightbox from '../components/Lightbox'
+
+import lightboxPlugin from '../components/lightbox/index'
 import { ripple, pattern } from '../directives'
 import { useLang } from '../utils'
 import clickOutside from '../utils/clickOutside'
@@ -10,16 +11,15 @@ import clickOutside from '../utils/clickOutside'
 export const bagelInjectionKey = Symbol('bagel') as InjectionKey<Bagel>
 export const i18nTInjectionKey = Symbol('bagel') as InjectionKey<(key: string) => string>
 
-export function useBagel() {
-	const bagel = inject(bagelInjectionKey)
+export function useBagel(injectionKey: InjectionKey<Bagel> = bagelInjectionKey): Bagel {
+	const bagel = inject(injectionKey)
 	if (!bagel) throw new Error('No bagel provided')
 	return bagel
 }
 
-export function useI18nT() {
-	const i18nT = inject(i18nTInjectionKey)
+export function useI18nT(injectionKey: typeof i18nTInjectionKey = i18nTInjectionKey) {
+	const i18nT = inject(injectionKey)
 	if (!i18nT) throw new Error('No i18nT provided')
-
 	return i18nT
 }
 
@@ -33,13 +33,13 @@ export interface BagelOptions {
 
 	i18nT?: (key: string) => string
 }
-export const BagelVue: Plugin = {
-	install: (app, options: BagelOptions) => {
+export const BagelVue: Plugin<BagelOptions> = {
+	install: (app, options) => {
 		const bagel = new Bagel({ host: options.host, fileBaseUrl: options.fileBaseUrl, onError: options.onError })
 		app.directive('click-outside', clickOutside)
 		app.directive('ripple', ripple)
 		app.directive('pattern', pattern)
-		app.use(Lightbox)
+		app.use(lightboxPlugin)
 		app.use(FloatingVue, {
 			themes: {
 				'bgl-theme': {

package/tsconfig.json

@@ -28,6 +28,7 @@
 		],
 		"types": [
 			"vite/client",
+			"vitest/globals",
 			"@vue-macros/reactivity-transform/macros-global"
 		],
 		"paths": {
@@ -48,6 +49,6 @@
 		"**/**/*.vue",
 		"**/**/*.d.ts",
 		"./vite.config.ts",
-		"src/directives/pattern"
+		"src/directives/pattern",
 	]
-}
+}