@bagelink/vue 0.0.1276 → 0.0.1288

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@bagelink/vue",
   "type": "module",
-  "version": "0.0.1276",
+  "version": "0.0.1288",
   "description": "Bagel core sdk packages",
   "author": {
     "name": "Neveh Allon",
@@ -53,10 +53,10 @@
   ],
   "devDependencies": {
     "@types/leaflet": "^1.9.16",
-    "@types/signature_pad": "^2.3.6",
+    "@types/signature_pad": "^4.0.0",
     "@vue-macros/reactivity-transform": "^1.1.6",
     "vue": "^3.5.13",
-    "vue-component-type-helpers": "^2.2.0"
+    "vue-component-type-helpers": "^2.2.2"
   },
   "peerDependencies": {
     "@bagelink/sdk": "*",
@@ -82,10 +82,10 @@
   },
   "dependencies": {
     "date-fns": "^4.1.0",
-    "@vueuse/core": "^12.5.0",
+    "@vueuse/core": "^12.7.0",
     "axios": "^1.7.9",
     "floating-vue": "^5.2.2",
-    "libphonenumber-js": "1.11.19",
+    "libphonenumber-js": "1.11.20",
     "signature_pad": "^5.0.4"
   },
   "scripts": {

package/src/components/Calendar/Index.vue

@@ -57,7 +57,7 @@ const time = ref(new Time(props.config.week?.startsOn, props.config.locale || nu
 	start: setTimePointsFromDayBoundary(props.config.dayBoundaries?.start || 0),
 	end: setTimePointsFromDayBoundary(props.config.dayBoundaries?.end || 24),
 }) as Time | any)
-const fontFamily = computed(() => props.config.style?.fontFamily || '\'Verdana\', \'Open Sans\', serif')
+// const UNUSED_fontFamily = computed(() => props.config.style?.fontFamily || '\'Verdana\', \'Open Sans\', serif')
 const eventRenderingKey = ref(0)
 const eventsDataProperty = ref(props.events)
 const isSmall = ref(false)

package/src/components/Calendar/helpers/EventConcurrency.ts

@@ -28,7 +28,7 @@ export default class EventConcurrency {
 		for (const [index, calendarEvent] of updatedEvents.entries()) {
 			if (index === 0) continue
 
-			let previousEvent = updatedEvents[index - 1]
+			// let _unused_previousEvent = updatedEvents[index - 1]
 
 			// Set nOfPreviousConcurrentEvents
 			let iterator = 0

package/src/components/Calendar/helpers/Time.ts

@@ -75,8 +75,8 @@ export default class Time {
 	}
 
 	getDatesBetweenTwoDates(start: Date, end: Date): Date[] {
-		let arr = []
-		let dt = new Date(start)
+		const arr = []
+		const dt = new Date(start)
 		// eslint-disable-next-line no-unmodified-loop-condition
 		while (dt <= end) {
 			arr.push(new Date(dt.getFullYear(), dt.getMonth(), dt.getDate()))

package/src/components/Calendar/models/Event.ts

@@ -1,112 +1,112 @@
-import type {EventColor, EventID, EventInterface} from "../typings/interfaces/event.interface";
-import type {modeType} from "../typings/types";
+import type { EventColor, EventID, EventInterface } from '../typings/interfaces/event.interface'
+import type { modeType } from '../typings/types'
 
 export class EventImpl implements EventInterface {
-  title?: string;
-  description?: string;
-  topic?: string;
-  location?: string;
-  with?: string;
-  colorScheme?: string;
-  color?: EventColor;
-  isEditable?: boolean;
-  disableDnD?: modeType[];
-  disableResize?: modeType[];
-  isCustom?: boolean | modeType[];
-
-  // Properties that should not be set from outside Qalendar
-  nOfPreviousConcurrentEvents?: number;
-
-  constructor(
-    public time: { start: string; end: string },
-    public id: EventID,
-  ) {}
+	title?: string
+	description?: string
+	topic?: string
+	location?: string
+	with?: string
+	colorScheme?: string
+	color?: EventColor
+	isEditable?: boolean
+	disableDnD?: modeType[]
+	disableResize?: modeType[]
+	isCustom?: boolean | modeType[]
+
+	// Properties that should not be set from outside Qalendar
+	nOfPreviousConcurrentEvents?: number
+
+	constructor(
+		public time: { start: string, end: string },
+		public id: EventID,
+	) {}
 }
 
 export class EventBuilder {
-  private eventImpl: EventImpl;
+	private eventImpl: EventImpl
 
-  constructor(
-    public time: { start: string; end: string },
-    id?: EventID,
-  ) {
-    if (!id) id = Math.random().toString(36).substring(2, 9);
-    this.eventImpl = new EventImpl(time, id);
-  }
+	constructor(
+		public time: { start: string, end: string },
+		id?: EventID,
+	) {
+		if (!id) id = Math.random().toString(36).substring(2, 9)
+		this.eventImpl = new EventImpl(time, id)
+	}
 
-  build() {
-    return this.eventImpl;
-  }
+	build() {
+		return this.eventImpl
+	}
 
-  withTitle(title: string) {
-    this.eventImpl.title = title;
+	withTitle(title: string) {
+		this.eventImpl.title = title
 
-    return this;
-  }
+		return this
+	}
 
-  withColor(color: EventColor) {
-    this.eventImpl.color = color;
+	withColor(color: EventColor) {
+		this.eventImpl.color = color
 
-    return this;
-  }
+		return this
+	}
 
-  withColorScheme(colorScheme: string) {
-    this.eventImpl.colorScheme = colorScheme;
+	withColorScheme(colorScheme: string) {
+		this.eventImpl.colorScheme = colorScheme
 
-    return this;
-  }
+		return this
+	}
 
-  withDescription(description: string) {
-    this.eventImpl.description = description;
+	withDescription(description: string) {
+		this.eventImpl.description = description
 
-    return this;
-  }
+		return this
+	}
 
-  withTopic(topic: string) {
-    this.eventImpl.topic = topic;
+	withTopic(topic: string) {
+		this.eventImpl.topic = topic
 
-    return this;
-  }
+		return this
+	}
 
-  withLocation(location: string) {
-    this.eventImpl.location = location;
+	withLocation(location: string) {
+		this.eventImpl.location = location
 
-    return this;
-  }
+		return this
+	}
 
-  withWith($with: string) {
-    this.eventImpl.with = $with;
+	withWith($with: string) {
+		this.eventImpl.with = $with
 
-    return this;
-  }
+		return this
+	}
 
-  withNOfPreviousConcurrentEvents(nOfPreviousConcurrentEvents: number) {
-    this.eventImpl.nOfPreviousConcurrentEvents = nOfPreviousConcurrentEvents;
+	withNOfPreviousConcurrentEvents(nOfPreviousConcurrentEvents: number) {
+		this.eventImpl.nOfPreviousConcurrentEvents = nOfPreviousConcurrentEvents
 
-    return this;
-  }
+		return this
+	}
 
-  withIsEditable(isEditable: boolean) {
-    this.eventImpl.isEditable = isEditable;
+	withIsEditable(isEditable: boolean) {
+		this.eventImpl.isEditable = isEditable
 
-    return this;
-  }
+		return this
+	}
 
-  withIsCustom(isCustom: boolean | modeType[]) {
-    this.eventImpl.isCustom = isCustom;
+	withIsCustom(isCustom: boolean | modeType[]) {
+		this.eventImpl.isCustom = isCustom
 
-    return this;
-  }
+		return this
+	}
 
-  withDisableDnD(disableDnD: modeType[]) {
-    this.eventImpl.disableDnD = disableDnD;
+	withDisableDnD(disableDnD: modeType[]) {
+		this.eventImpl.disableDnD = disableDnD
 
-    return this;
-  }
+		return this
+	}
 
-  withDisableResize(disableResize: modeType[]) {
-    this.eventImpl.disableResize = disableResize;
+	withDisableResize(disableResize: modeType[]) {
+		this.eventImpl.disableResize = disableResize
 
-    return this;
-  }
+		return this
+	}
 }

package/src/components/Calendar/typings/interfaces/time-modes.ts

@@ -1,9 +1,11 @@
+// ! @natanelyoung PLEASE DON'T USE ENUMS 🙏🏼
+// * please see: https://tduyng.medium.com/why-you-might-be-using-enums-in-typescript-wrong-6d9c5742db5a
 export enum DAY_MODE {
-  // a regular day, starting and ending at 0:00 and 24:00
-  REGULAR = 'regular',
-  // a day with custom day boundaries, but within an actual calendar day
-  SHORTENED = 'shortened',
-  // a day with custom day boundaries, but spanning two actual calendar days,
-  // for example, a day that starts at 06:00 and ends at 04:00 the day after
-  FLEXIBLE = 'flexible',
+	// a regular day, starting and ending at 0:00 and 24:00
+	REGULAR = 'regular',
+	// a day with custom day boundaries, but within an actual calendar day
+	SHORTENED = 'shortened',
+	// a day with custom day boundaries, but spanning two actual calendar days,
+	// for example, a day that starts at 06:00 and ends at 04:00 the day after
+	FLEXIBLE = 'flexible',
 }

package/src/components/Calendar/typings/types.ts

@@ -1,23 +1,25 @@
 export interface DOMRect {
-  bottom: number;
-  height: number;
-  left: number;
-  right: number;
-  top: number;
-  width: number;
-  x: number;
-  y: number;
+	bottom: number
+	height: number
+	left: number
+	right: number
+	top: number
+	width: number
+	x: number
+	y: number
 }
 
-export type modeType = "day" | "week" | "month" | "agenda";
+export type modeType = 'day' | 'week' | 'month' | 'agenda'
 
+// ! @natanelyoung PLEASE DON'T USE ENUMS 🙏🏼
+// * please see: https://tduyng.medium.com/why-you-might-be-using-enums-in-typescript-wrong-6d9c5742db5a
 export enum DRAG_N_RESIZE_DIRECTION {
-  BACKWARDS = "backwards",
-  FORWARDS = "forwards",
+	BACKWARDS = 'backwards',
+	FORWARDS = 'forwards',
 }
 
-export type DayInfo = {
-  daysTotalN: number;
-  thisDayIndex: number,
-  dateTimeString: string
+export interface DayInfo {
+	daysTotalN: number
+	thisDayIndex: number
+	dateTimeString: string
 }

package/src/components/Draggable/Draggable.vue

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
-import { ref, watch, onMounted, nextTick } from 'vue'
 import type { DraggableEvent } from './useDraggable'
+import { ref, watch, onMounted, nextTick } from 'vue'
 import { useDraggable } from './useDraggable'
 
 const props = withDefaults(defineProps<{

package/src/components/Modal.vue

@@ -1,8 +1,8 @@
 <script lang="ts" setup>
 import type { BtnOptions } from '@bagelink/vue'
+import type { SetupContext } from 'vue'
 import {
 	Btn,
-
 	Card,
 	Title,
 	useEscape
@@ -11,7 +11,7 @@ import {
 	onMounted,
 	onUnmounted,
 	useSlots,
-	watch,
+	watch
 } from 'vue'
 import '../styles/modal.css'
 
@@ -27,7 +27,7 @@ const props = defineProps<{
 
 const emit = defineEmits(['update:visible'])
 
-const slots = useSlots()
+const slots: SetupContext['slots'] = useSlots()
 
 let isVisible = $ref<boolean>(false)
 

package/src/components/Pill.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import type { IconType, ThemeType } from '@bagelink/vue'
+import type { SetupContext } from 'vue'
 import { Btn, Icon } from '@bagelink/vue'
 import { useSlots } from 'vue'
 
@@ -26,7 +27,7 @@ const props = defineProps<{
 	btnEnd?: BtnProp
 }>()
 
-const slots = useSlots()
+const slots: SetupContext['slots'] = useSlots()
 
 const computedTheme = $computed(
 	() => {

package/src/components/Spreadsheet/Index.vue

@@ -33,7 +33,7 @@ function flattenObject(obj: Record<string, any>, prefix = ''): Record<string, an
 	const flattened: Record<string, any> = {}
 
 	for (const key in obj) {
-		if (Object.prototype.hasOwnProperty.call(obj, key)) {
+		if (Object.hasOwn(obj, key)) {
 			const value = obj[key]
 			const newKey = prefix ? `${prefix}.${key}` : key
 
@@ -53,7 +53,7 @@ function unflattenObject(obj: Record<string, any>): Record<string, any> {
 	const result: Record<string, any> = {}
 
 	for (const key in obj) {
-		if (Object.prototype.hasOwnProperty.call(obj, key)) {
+		if (Object.hasOwn(obj, key)) {
 			const keys = key.split('.')
 			let current = result
 

package/src/components/dashboard/Lineart.vue

@@ -32,7 +32,7 @@ const axisConfig = $computed<ChartAxis>(() => ({
 		ticks: 5,
 		domain: ['dataMin', 'dataMax'],
 		tickValues:
-			props.data.length > 100 ? [''] : props.data.map((d: any) => d.date),
+			 props.data.length > 100 ? [''] : props.data.map((d: any) => d.date),
 	},
 	secondary: {
 		domain: ['dataMin', 'dataMax * 1.05'],

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

@@ -364,7 +364,13 @@ function useInputHandling() {
 }
 
 // Initialize input handling
-const { inputValue, handleInput, handleFocus, handleClick, handleKeydown } = useInputHandling()
+const {
+// inputValue: unused_inputValue,
+	handleInput,
+	handleFocus,
+	handleClick,
+	handleKeydown
+} = useInputHandling()
 
 // Initialize remaining composables
 const { currentMonthDays, currentMonthValue, months, years, weekDays, isSelected, isToday, isNotInMonth } = useCalendarView()

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

@@ -184,16 +184,16 @@ function selectDate(date: Date | null) {
 	emit('update:modelValue', newDate)
 }
 
-function handleInput(event: Event) {
-	const input = event.target as HTMLInputElement
-	if (!input.value) {
-		emit('update:modelValue', '')
-		return
-	}
-
-	const date = new Date(input.value)
-	emit('update:modelValue', props.enableTime ? date.toISOString() : date.toISOString().split('T')[0])
-}
+// function _UNUSED_handleInput(event: Event) {
+// 	const input = event.target as HTMLInputElement
+// 	if (!input.value) {
+// 		emit('update:modelValue', '')
+// 		return
+// 	}
+
+// 	const date = new Date(input.value)
+// 	emit('update:modelValue', props.enableTime ? date.toISOString() : date.toISOString().split('T')[0])
+// }
 
 const hours = $computed(() => selectedDate?.getHours() ?? 0)
 const minutes = $computed(() => selectedDate?.getMinutes() ?? 0)

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

@@ -1,8 +1,8 @@
 <script setup lang="ts">
-import VDatepicker from '@vuepic/vue-datepicker'
+// import _UNUSED_VDatepicker from '@vuepic/vue-datepicker'
 import '@vuepic/vue-datepicker/dist/main.css'
 
-const props = defineProps<{
+defineProps<{
 	label?: string
 	id?: string
 	options?: { [key: string]: any }
@@ -14,13 +14,13 @@ const props = defineProps<{
 
 const emit = defineEmits(['update:modelValue'])
 
-const selectedDate = $computed({
-	get: () => props.modelValue || new Date(),
-	set: (value: Date) => {
-		// console.log(value)
-		emit('update:modelValue', value)
-	},
-})
+// const _UNUSED_selectedDate = $computed({
+// 	get: () => props.modelValue || new Date(),
+// 	set: (value: Date) => {
+// 		// console.log(value)
+// 		emit('update:modelValue', value)
+// 	},
+// })
 const selectedHour = $ref()
 
 const hours = Array.from({ length: 18 }, (_, index) => {

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

@@ -1,28 +1,10 @@
 <script setup lang="ts">
-import type { BglFile, QueueFile } from './upload.types'
+import type { BglFile, QueueFile, UploadInputProps } from './upload.types'
 import { Btn, IMAGE_FORMATS_REGEXP, Icon, useBagel, Card, Image, pathKeyToURL } from '@bagelink/vue'
 import { watch } from 'vue'
 import { files } from './upload'
 
-const props = withDefaults(defineProps<{
-	label?: string
-	multiple?: boolean
-	modelValue?: string | string[]
-	width?: string
-	height?: string | 'auto'
-	dirPath?: string
-	fill?: boolean
-	oval?: boolean
-	theme?: 'dropzone' | 'basic'
-	accept?: string
-	required?: boolean
-	disabled?: boolean
-	baseURL?: string
-	dropPlaceholder?: string
-	noFilePlaceholder?: string
-	btnPlaceholder?: string
-
-}>(), {
+const props = withDefaults(defineProps<UploadInputProps>(), {
 	height: '215px',
 	theme: 'dropzone',
 	accept: '*'

package/src/components/form/inputs/Upload/upload.types.d.ts

@@ -41,3 +41,23 @@ export interface QueueFile {
 	name?: string
 	uploaded?: boolean
 }
+
+
+export interface UploadInputProps {
+	label?: string
+	multiple?: boolean
+	modelValue?: string | string[]
+	width?: string
+	height?: string | 'auto'
+	dirPath?: string
+	fill?: boolean
+	oval?: boolean
+	theme?: 'dropzone' | 'basic'
+	accept?: string
+	required?: boolean
+	disabled?: boolean
+	baseURL?: string
+	dropPlaceholder?: string
+	noFilePlaceholder?: string
+	btnPlaceholder?: string
+}

package/src/components/layout/SidebarMenu.vue

@@ -1,5 +1,6 @@
 <script lang="ts" setup>
 import type { NavLink } from '@bagelink/vue'
+import type { SetupContext } from 'vue'
 import { Btn, Card, Icon, useDebounceFn } from '@bagelink/vue'
 import { useSlots } from 'vue'
 
@@ -11,7 +12,7 @@ const props = defineProps<{
 
 const emit = defineEmits(['update:open'])
 
-const slots = useSlots()
+const slots: SetupContext['slots'] = useSlots()
 
 let isOpen = $ref(props.open)
 const toggleMenu = useDebounceFn(() => {

package/src/components/layout/Skeleton.vue

@@ -14,9 +14,10 @@ const {
 	borderRadius?: string
 	class?: string
 }>()
+import type { SetupContext } from 'vue'
 import { useSlots } from 'vue'
 
-const slots = useSlots()
+const slots: SetupContext['slots'] = useSlots()
 </script>
 
 <template>

package/src/composables/useSchemaField.ts

@@ -94,12 +94,12 @@ export function useSchemaField<T extends { [key: string]: any }>(options: UseSch
 		}
 
 		const {
-			$el,
+			// $el,
 			children,
-			options,
-			attrs,
+			// options,
+			// attrs,
 			class: fieldClass,
-			id,
+			// id,
 			transform,
 			slots: fieldSlots,
 			required,
@@ -201,10 +201,10 @@ export function useSchemaField<T extends { [key: string]: any }>(options: UseSch
 					if (Array.isArray(slot)) {
 						// Handle BglFormSchemaT array
 						return slot.map(schemaField => renderField(schemaField as BaseBagelField<T>, slots))
-					} else if (isVNode(slot)) {
+					} if (isVNode(slot)) {
 						// Handle VNode
 						return slot
-					} else if (typeof slot === 'function') {
+					} if (typeof slot === 'function') {
 						// Handle function slot
 						const slotFn = slot as (props: SlotProps<T>) => any
 						return slotFn({ row: rowData, field })

package/src/directives/pattern.ts

@@ -7,7 +7,7 @@ interface PatternValue {
 
 const DEFAULT_PATTERNS: Record<string, PatternValue> = {
 	pint: { pattern: /\d/ },
-	int: { pattern: /[\d\-]/ },
+	int: { pattern: /[\d-]/ },
 	pnum: { pattern: /[\d.]/ },
 	money: { pattern: /[\d.\s,]/ },
 	number: { pattern: /[\d\-.]/ },