@bagelink/vue 0.0.1256 → 0.0.1258

package/dist/utils/BagelFormUtils.d.ts

@@ -3,7 +3,7 @@ interface InputOptions {
     required?: boolean;
     placeholder?: string;
     class?: string;
-    defaultValue?: string;
+    defaultValue?: string | number;
     disabled?: boolean;
     helptext?: string;
     vIf?: boolean | ((item: any, row: any) => boolean);
@@ -69,7 +69,7 @@ export declare function uploadField(id: string, label?: string, options?: Upload
         required?: boolean;
         placeholder?: string;
         class?: string;
-        defaultValue?: string;
+        defaultValue?: string | number;
         disabled?: boolean;
         helptext?: string;
         vIf?: boolean | ((item: any, row: any) => boolean);

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

@@ -1 +1 @@
-{"version":3,"file":"BagelFormUtils.d.ts","sourceRoot":"","sources":["../../src/utils/BagelFormUtils.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"BagelFormUtils.d.ts","sourceRoot":"","sources":["../../src/utils/BagelFormUtils.ts"],"names":[],"mappings":"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"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@bagelink/vue",
   "type": "module",
-  "version": "0.0.1256",
+  "version": "0.0.1258",
   "description": "Bagel core sdk packages",
   "author": {
     "name": "Neveh Allon",

package/src/components/Icon/Icon.vue

@@ -29,9 +29,9 @@ const isFaBrand = $computed(() => FONT_AWESOME_BRANDS_ICONS.includes(iconRender)
 	>
 		{{ iconRender }}
 	</span>
-	<i
+	<span
 		v-else-if="iconRenderType === 'font-awesome'"
-		class="fa far" :class="[`fa-${iconRender}`, { 'fa-brands': isFaBrand }]"
+		class="fa far bgl_icon-font" :class="[`fa-${iconRender}`, { 'fa-brands': isFaBrand }]"
 		:style="{ 'fontSize': `${size}rem`, color, 'font-variation-settings': `'wght' ${weight || 400}` }"
 	/>
 </template>

package/src/components/Modal.vue

@@ -16,6 +16,7 @@ import {
 import '../styles/modal.css'
 
 const props = defineProps<{
+	thin?: boolean
 	side?: boolean
 	title?: string
 	width?: string
@@ -74,7 +75,7 @@ onUnmounted(() => {
 		@click="() => (dismissable ? closeModal() : '')"
 		@keydown.esc="closeModal"
 	>
-		<Card class="modal" :style="{ ...maxWidth }" @click.stop>
+		<Card class="modal" :style="{ ...maxWidth }" :thin="thin" @click.stop>
 			<header v-if="slots.toolbar || title" class="tool-bar">
 				<slot name="toolbar" />
 				<Btn

package/src/components/form/BagelForm.vue

@@ -36,7 +36,6 @@ const formData = ref<T>(safeClone(props.modelValue ?? {}) as T)
 const initialFormData = ref<T>(safeClone(props.modelValue ?? {}) as T)
 
 onMounted(() => {
-	console.log('formData.value')
 	if (props.modelValue) {
 		initialFormData.value = safeClone(props.modelValue)
 	}

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

@@ -1,9 +1,7 @@
 <script setup lang="ts">
-import type { VueDatePickerProps, DatePickerInstance } from '@vuepic/vue-datepicker'
-import VDatepicker from '@vuepic/vue-datepicker'
-import { onMounted } from 'vue'
-
-import '@vuepic/vue-datepicker/dist/main.css'
+import type { modeType } from '../../Calendar/typings/types'
+import { Btn, NumberInput, Dropdown, TextInput } from '@bagelink/vue'
+import Time, { WEEK_START_DAY } from '../../Calendar/helpers/Time'
 
 const props = withDefaults(
 	defineProps<{
@@ -13,84 +11,465 @@ const props = withDefaults(
 		small?: boolean
 		enableTime?: boolean
 		modelValue?: string | Date
-		defaultValue?: string | Date
-		extraProps?: Omit<VueDatePickerProps, 'Slots' | 'InternalTime'>
-		allowedDates?: string[] | Date[]
-		timePickerInline?: boolean
-		minutesIncrement?: string | number
-		minutesGridIncrement?: string | number
+		min?: string | Date
+		max?: string | Date
+		timezone?: string
+		mode?: modeType
+		firstDayOfWeek?: WEEK_START_DAY
+		locale?: string
+		center?: boolean
+
 	}>(),
 	{
 		enableTime: false,
 		editMode: true,
 		small: false,
+		timezone: 'UTC',
+		mode: 'day',
+		firstDayOfWeek: WEEK_START_DAY.MONDAY,
+		locale: ''
 	},
 )
 
 const emit = defineEmits(['update:modelValue'])
+let isOpen = $ref(false)
+let currentMonth = $ref(new Date())
+type ViewMode = 'days' | 'months' | 'years'
+let currentView = $ref<ViewMode>('days')
 
-const datePicker = $ref<DatePickerInstance>()
-
-const date = $computed<string | Date>({
-	get: () => props.modelValue || '',
-	set: (val) => {
-		const d = typeof val === 'string' ? new Date(val) : val
-		if (props.enableTime) {
-			emit('update:modelValue', d.toISOString())
-		} else {
-			emit('update:modelValue', d.toISOString().split('T')[0])
-		}
-	},
+const time = new Time(props.firstDayOfWeek, props.locale)
+
+function formatDisplayDate(date: Date | string | undefined): string {
+	if (!date) return ''
+	const dateObj = typeof date === 'string' ? new Date(date) : date
+
+	if (props.enableTime) {
+		return dateObj.toLocaleString(props.locale || undefined, {
+			year: 'numeric',
+			month: 'short',
+			day: 'numeric',
+			hour: '2-digit',
+			minute: '2-digit',
+			timeZone: props.timezone
+		})
+	}
+
+	return dateObj.toLocaleString(props.locale || undefined, {
+		year: 'numeric',
+		month: 'short',
+		day: 'numeric',
+		timeZone: props.timezone
+	})
+}
+
+function formatDate(date: Date | string | undefined): string {
+	if (!date) return ''
+	const dateObj = typeof date === 'string' ? new Date(date) : date
+	return props.enableTime ? dateObj.toISOString().slice(0, 16) : dateObj.toISOString().split('T')[0]
+}
+
+const formattedDisplayValue = $computed(() => formatDisplayDate(props.modelValue))
+const formattedMin = $computed(() => formatDate(props.min))
+const formattedMax = $computed(() => formatDate(props.max))
+
+const selectedDate = $computed(() => {
+	if (!props.modelValue) return null
+	return typeof props.modelValue === 'string' ? new Date(props.modelValue) : props.modelValue
 })
 
-onMounted(() => {
-	if (
-		props.defaultValue && date === ''
-	) {
-		Object.assign(date, { date: props.defaultValue })
+const currentMonthDays = $computed(() => {
+	const year = currentMonth.getFullYear()
+	const month = currentMonth.getMonth()
+	return time.getCalendarMonthSplitInWeeks(year, month).flat()
+})
+
+const currentMonthValue = $computed(() => ({
+	month: currentMonth.getMonth(),
+	year: currentMonth.getFullYear(),
+	formatted: {
+		month: time.getLocalizedNameOfMonth(currentMonth, 'long'),
+		year: time.getLocalizedDateString(currentMonth).split('/').pop() // Get just the year part
+	}
+}))
+
+const months = $computed(() => Array.from({ length: 12 }, (_, i) => {
+	const date = new Date(currentMonthValue.year, i, 1)
+	return {
+		name: time.getLocalizedNameOfMonth(date, 'short'),
+		value: i,
+		disabled: isDateDisabled(date)
 	}
+}))
+
+const years = $computed(() => {
+	const startYear = currentMonthValue.year - 10
+	return Array.from({ length: 21 }, (_, i) => ({
+		value: startYear + i,
+		disabled: isYearDisabled(startYear + i)
+	}))
 })
+
+const weekDays = $computed(() => {
+	const weekStart = new Date()
+	weekStart.setDate(weekStart.getDate() - weekStart.getDay() + (props.firstDayOfWeek === WEEK_START_DAY.MONDAY ? 1 : 0))
+	return Array.from({ length: 7 }, (_, i) => {
+		const day = new Date(weekStart)
+		day.setDate(weekStart.getDate() + i)
+		return time.getLocalizedNameOfWeekday(day, 'short')
+	})
+})
+
+function 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
+
+	if (minDate && date < minDate) return true
+	if (maxDate && date > maxDate) return true
+	return false
+}
+
+function isYearDisabled(year: number) {
+	const minDate = props.min ? new Date(props.min) : null
+	const maxDate = props.max ? new Date(props.max) : null
+
+	if (minDate && year < minDate.getFullYear()) return true
+	if (maxDate && year > maxDate.getFullYear()) return true
+	return false
+}
+
+function selectMonth(monthIndex: number) {
+	currentMonth = new Date(currentMonth.getFullYear(), monthIndex, 1)
+	currentView = 'days'
+}
+
+function selectYear(year: number) {
+	currentMonth = new Date(year, currentMonth.getMonth(), 1)
+	currentView = 'months'
+}
+
+function previousMonth() {
+	currentMonth = new Date(currentMonth.getFullYear(), currentMonth.getMonth() - 1, 1)
+}
+
+function nextMonth() {
+	currentMonth = new Date(currentMonth.getFullYear(), currentMonth.getMonth() + 1, 1)
+}
+
+function previousYear() {
+	const offset = currentView === 'months' ? 1 : 21
+	currentMonth = new Date(currentMonth.getFullYear() - offset, currentMonth.getMonth(), 1)
+}
+
+function nextYear() {
+	const offset = currentView === 'months' ? 1 : 21
+	currentMonth = new Date(currentMonth.getFullYear() + offset, currentMonth.getMonth(), 1)
+}
+
+function selectDate(date: Date | null) {
+	if (!date || !props.editMode) return
+
+	// Create date at start of day in the target timezone
+	const newDate = new Date(date.getFullYear(), date.getMonth(), date.getDate())
+
+	// If time is enabled, preserve existing time or set to current time
+	if (props.enableTime) {
+		const currentHours = selectedDate?.getHours() ?? new Date().getHours()
+		const currentMinutes = selectedDate?.getMinutes() ?? new Date().getMinutes()
+		newDate.setHours(currentHours)
+		newDate.setMinutes(currentMinutes)
+		emit('update:modelValue', newDate.toISOString())
+	} else {
+		// For dates without time, ensure time is set to midnight UTC
+		newDate.setUTCHours(0, 0, 0, 0)
+		emit('update:modelValue', newDate.toISOString().split('T')[0])
+		isOpen = false
+	}
+}
+
+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])
+}
+
+const hours = $computed(() => selectedDate?.getHours() ?? 0)
+const minutes = $computed(() => selectedDate?.getMinutes() ?? 0)
+
+function handleHourInput(value: number) {
+	if (!selectedDate) return
+	const newDate = new Date(selectedDate)
+	newDate.setHours(value)
+	emit('update:modelValue', newDate.toISOString())
+}
+
+function handleMinuteInput(value: number) {
+	if (!selectedDate) return
+	const newDate = new Date(selectedDate)
+	newDate.setMinutes(value)
+	emit('update:modelValue', newDate.toISOString())
+}
+
+function isSelected(date: Date | null) {
+	if (!date || !selectedDate) return false
+	return date.toISOString().split('T')[0] === selectedDate.toISOString().split('T')[0]
+}
+
+function isToday(date: Date | null) {
+	if (!date) return false
+	return time.dateIsToday(date)
+}
+
+const timezoneDisplay = $computed(() => {
+	if (!props.enableTime) return ''
+	try {
+		return new Date().toLocaleString('en-US', {
+			timeZoneName: 'short',
+			timeZone: props.timezone
+		}).split(' ').pop()
+	} catch {
+		return 'UTC'
+	}
+})
+
+function isNotInMonth(date: Date) {
+	return time.isTrailingOrLeadingDate(date, currentMonth.getMonth())
+}
 </script>
 
 <template>
-	<div
-		class="bagel-input"
-		:title="label"
-		:class="{ small }"
-	>
+	<div class="bagel-input" :class="{ small }" :title="label">
 		<label v-if="label">
 			{{ label }}
+			<span v-if="required" class="required">*</span>
 		</label>
-		<VDatepicker
-			ref="datePicker"
-			v-model="date"
-			:required="required"
-			:auto-apply="true"
-			:enable-time-picker="enableTime"
-			:allowed-dates="allowedDates"
-			v-bind="extraProps"
-			:time-picker-inline="timePickerInline"
-			:minutes-increment="minutesIncrement"
-			:minutes-grid-increment="minutesGridIncrement"
-			:start-time="{ hours: 8, minutes: 0 }"
-		/>
+
+		<Dropdown
+			:shown="isOpen"
+			placement="bottom-start"
+			@apply-show="isOpen = true"
+			@apply-hide="isOpen = false"
+		>
+			<template #trigger>
+				<div class="date-picker-container">
+					<TextInput
+						:modelValue="formattedDisplayValue"
+						icon="calendar"
+						:min="formattedMin"
+						:max="formattedMax"
+						:required="required"
+						:disabled="!editMode"
+						class="date-input"
+						:class="{
+							'txt-center': center }"
+						readonly
+						@click="isOpen = true"
+					/>
+				</div>
+			</template>
+
+			<div class="flex gap-075 p-05 m_flex-wrap calendar-container justify-content-center h-100p">
+				<div class="calendar-section m_border-none pe-05 m_p-0">
+					<div class="flex space-between pb-1">
+						<template v-if="currentView === 'days'">
+							<Btn flat icon="chevron_left" @click="previousMonth" />
+							<div class="flex gap-05">
+								<Btn flat class="month-btn" @click="currentView = 'months'">
+									{{ currentMonthValue.formatted.month }}
+								</Btn>
+								<Btn flat class="year-btn" @click="currentView = 'years'">
+									{{ currentMonthValue.formatted.year }}
+								</Btn>
+							</div>
+							<Btn flat icon="chevron_right" @click="nextMonth" />
+						</template>
+						<template v-else>
+							<Btn flat icon="chevron_left" @click="previousYear" />
+							<span class="month-year">{{ currentMonthValue.formatted.year }}</span>
+							<Btn flat icon="chevron_right" @click="nextYear" />
+						</template>
+					</div>
+
+					<div v-if="currentView === 'days'" class="calendar-grid grid gap-025">
+						<div
+							v-for="day in weekDays"
+							:key="day"
+							class="txt-center txt-12 opacity-6"
+						>
+							{{ day }}
+						</div>
+
+						<button
+							v-for="date in currentMonthDays"
+							:key="date?.toISOString()"
+							type="button"
+							class="day aspect-ratio-1 flex align-items-center justify-content-center pointer round txt14 p-0"
+							:class="{
+								'selected': isSelected(date),
+								'today': isToday(date),
+								'disabled': isDateDisabled(date),
+								'not-in-month': isNotInMonth(date),
+							}"
+							:disabled="isDateDisabled(date)"
+							@click="selectDate(date)"
+						>
+							{{ date?.getDate() }}
+						</button>
+					</div>
+
+					<div v-else-if="currentView === 'months'" class="month-grid grid gap-05 p-05">
+						<button
+							v-for="month in months"
+							:key="month.value"
+							class="month-item flex align-items-center justify-content-center pointer rounded p-05 txt14 border-none"
+							:class="{
+								selected: month.value === currentMonthValue.month,
+								disabled: month.disabled,
+							}"
+							:disabled="month.disabled"
+							@click="selectMonth(month.value)"
+						>
+							{{ month.name }}
+						</button>
+					</div>
+
+					<div v-else class="year-grid grid gap-05 p-0">
+						<button
+							v-for="year in years"
+							:key="year.value"
+							class="year-item flex align-items-center justify-content-center pointer rounded p-05 txt14 border-none"
+							:class="{
+								selected: year.value === currentMonthValue.year,
+								disabled: year.disabled,
+							}"
+							:disabled="year.disabled"
+							@click="selectYear(year.value)"
+						>
+							{{ year.value }}
+						</button>
+					</div>
+				</div>
+
+				<div v-if="enableTime && currentView === 'days'" class="time-picker border-start flex column gap-1 w-120px">
+					<div class="flex gap-025">
+						<NumberInput
+							center
+							:model-value="hours"
+							:disabled="!selectedDate"
+							:min="0"
+							:max="23"
+							layout="vertical"
+							:padZero="2"
+							@update:model-value="handleHourInput"
+						/>
+						<p class="pb-075">
+							:
+						</p>
+						<NumberInput
+							center
+							:model-value="minutes"
+							:disabled="!selectedDate"
+							:min="0"
+							:max="59"
+							:padZero="2"
+							layout="vertical"
+							@update:model-value="handleMinuteInput"
+						/>
+					</div>
+					<span class="txt-center opacity-6 txt14">{{ timezoneDisplay }}</span>
+					<Btn v-if="selectedDate" flat @click="isOpen = false">
+						Done
+					</Btn>
+				</div>
+			</div>
+		</Dropdown>
 	</div>
 </template>
 
-<style>
-.dp__input_wrap input {
-	padding-inline-start: 2rem !important;
+<style scoped>
+.calendar-container {
+	max-width: 90vw;
+}
+
+.calendar-section {
+	min-width: 280px;
+}
+
+.calendar-grid {
+	grid-template-columns: repeat(7, 1fr);
+}
+
+.month-grid {
+	grid-template-columns: repeat(3, 1fr);
+	grid-template-rows: repeat(4, 1fr);
+}
+
+.year-grid {
+	grid-template-columns: repeat(3, 1fr);
+	grid-template-rows: repeat(7, 1fr);
+}
+
+.month-item,
+.year-item {
+	background: none;
+	color: var(--bgl-text-color);
+}
+
+.month-item:hover:not(.disabled),
+.year-item:hover:not(.disabled) {
+	background: var(--bgl-box-bg);
+	filter: var(--bgl-hover-filter);
+}
+
+.month-item:active:not(.disabled),
+.year-item:active:not(.disabled) {
+	background: var(--bgl-box-bg);
+	filter: var(--bgl-active-filter);
+}
+
+.month-item.selected,
+.year-item.selected {
+	background-color: var(--bgl-primary);
+	color: white;
+}
+
+.month-item.disabled,
+.year-item.disabled {
+	opacity: 0.6;
+	filter: grayscale(0.3);
+}
+
+.day {
+	border: none;
+	background: none;
+	color: var(--bgl-text-color);
+}
+
+.day:hover:not(.disabled) {
+	background-color: var(--input-bg);
+}
+
+.day.selected {
+	background-color: var(--bgl-primary);
+	color: var(--bgl-white);
 }
 
-.dp__calendar_row>div:last-child {
-	pointer-events: auto !important;
+.day.today:not(.selected) {
+	border: 1px solid var(--bgl-primary);
 }
 
-.dp__time_input {
-	direction: ltr;
+.day.disabled {
+	opacity: 0.6;
+	filter: grayscale(0.3);
+	cursor: not-allowed;
 }
 
-.ltrDateInput input {
- direction: ltr;
+.day.not-in-month {
+	opacity: 0.4;
 }
 </style>

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

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import type { IconType } from '@bagelink/vue'
 import { Icon, Btn } from '@bagelink/vue'
-import { watch } from 'vue'
+import { onMounted, watch } from 'vue'
 
 type NumberLayout = 'default' | 'vertical' | 'horizontal'
 
@@ -14,6 +14,7 @@ interface NumberInputProps {
 	iconStart?: IconType
 	icon?: IconType
 	label?: string
+	defaultValue?: number
 	placeholder?: string
 	disabled?: boolean
 	required?: boolean
@@ -40,11 +41,18 @@ const {
 	layout,
 	id,
 	padZero = 1,
+	defaultValue
 } = defineProps<NumberInputProps>()
 
 const emit = defineEmits(['update:modelValue'])
 
-let numberValue = $ref(Number.parseFloat(`${modelValue}`) || undefined)
+let numberValue = $ref<number>()
+
+onMounted(() => {
+	const num = modelValue !== undefined ? Number.parseFloat(`${modelValue}`) : undefined
+	const defaultNum = defaultValue !== undefined ? Number.parseFloat(`${defaultValue}`) : undefined
+	numberValue = num || defaultNum
+})
 
 const btnLayouts: NumberLayout[] = ['horizontal', 'vertical']
 

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

@@ -23,10 +23,9 @@ function handlePaste(event: ClipboardEvent, index: number) {
 }
 
 function emitUpdate() {
+	emit('update:modelValue', digits.join(''))
 	if (isDigitsFull()) {
 		emit('complete', digits.join(''))
-	} else {
-		emit('update:modelValue', digits.join(''))
 	}
 }
 
@@ -93,7 +92,7 @@ function isDigitsFull() {
 			:autofocus="ind === 0"
 			maxlength="1"
 			pattern="[0-9]*"
-			oninput="this.value = this.value.slice(0, 1);"
+			oninput="this.value = this.value.slice(0, 1)"
 			@keydown="handleKeyDown($event, ind)"
 			@paste="handlePaste($event, ind)"
 		>