@bagelink/vue 1.12.23 → 1.12.27

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@bagelink/vue",
   "type": "module",
-  "version": "1.12.23",
+  "version": "1.12.27",
   "description": "Bagel core sdk packages",
   "author": {
     "name": "Bagel Studio",
@@ -90,7 +90,7 @@
     "signature_pad": "^5.0.9",
     "vue-i18n": "^11.2.8",
     "vue-toastification": "^2.0.0-rc.5",
-    "@bagelink/utils": "1.12.23"
+    "@bagelink/utils": "1.12.27"
   },
   "scripts": {
     "dev": "tsx watch src/index.ts",

package/src/components/ListItem.vue

@@ -73,11 +73,11 @@ const bind = computed(() => {
 			<Icon v-if="icon" size="1.2" class="color-primary" :icon="icon" />
 
 			<div class="txt-start">
-				<p v-if="lead" class="txt10 m-0 p-0 txt-gray" :class="{ ellipsis }">
+				<p v-if="lead" class="txt10 m-0 p-0 txt-gray " :class="{ ellipsis }">
 					{{ lead }}
 					<slot name="lead" />
 				</p>
-				<p class="m-0 p-0 line-height-14 pb-025" :class="{ 'ellipsis-1': ellipsis }">
+				<p class="m-0 p-0 line-height-14 pb-025 item-title" :class="{ 'ellipsis-1': ellipsis }">
 					{{ title }}
 					<slot />
 				</p>

package/src/components/calendar/Index.vue

@@ -51,6 +51,13 @@ const views: Record<CalendarView, Component> = {
 	Agenda: AgendaView
 }
 
+const viewToDeltaKey: Record<CalendarView, string> = {
+	Week: 'weeks',
+	Month: 'months',
+	Day: 'days',
+	Agenda: 'months'
+}
+
 const visibleDateRange = computed(() => {
 	const start = new Date(currentDate.value)
 	let end = new Date(currentDate.value)
@@ -81,7 +88,6 @@ const state = computed<CalendarViewState>(() => ({
 }))
 
 function handleDateChange(date: Date) {
-	console.log('handleDateChange', date)
 	currentDate.value = new Date(date)
 	emit('dateChange', state.value)
 }
@@ -130,11 +136,6 @@ defineExpose({
 })
 
 onMounted(() => {
-	console.log('[Calendar] props:', {
-		availabilityMode: props.availabilityMode,
-		availabilityEditable: props.availabilityEditable,
-		availabilitySlots: props.availabilitySlots?.length
-	})
 	emit('ready', state.value)
 })
 </script>
@@ -151,14 +152,14 @@ onMounted(() => {
 					<ListItem v-for="(_, key) in views" :key="key" thin :title="key" @click="handleViewChange(key)" />
 				</Dropdown>
 				<Btn icon="calendar" thin color="gray" value="Today" @click="handleDateChange(new Date())" />
-				<Btn
-					icon="chevron_left" color="gray" thin
-					@click="handleDateChange(timeDelta(currentDate, { [currentView]: -1 }))"
-				/>
-				<Btn
-					icon="chevron_right" color="gray" thin
-					@click="handleDateChange(timeDelta(currentDate, { [currentView]: 1 }))"
-				/>
+			<Btn
+				icon="chevron_left" color="gray" thin
+				@click="handleDateChange(timeDelta(currentDate, { [viewToDeltaKey[currentView]]: -1 }))"
+			/>
+			<Btn
+				icon="chevron_right" color="gray" thin
+				@click="handleDateChange(timeDelta(currentDate, { [viewToDeltaKey[currentView]]: 1 }))"
+			/>
 			</div>
 		</div>
 		<component

package/src/components/dataTable/DataTable.vue

@@ -412,4 +412,14 @@ tbody tr {
 tbody tr:hover {
 	background: var(--bgl-gray-light);
 }
+
+@media (max-width: 910px) {
+	.col {
+		max-width: 60vw !important;
+	}
+	.max-col-width {
+	max-width: 60vw !important;
+}
+}
+
 </style>

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

@@ -16,6 +16,7 @@ const props = withDefaults(
 		enableTime?: boolean
 		highlightedDates?: MaybeRefOrGetter<(string | Date)[]>
 		disabledDates?: MaybeRefOrGetter<(string | Date)[]>
+		allowedDates?: MaybeRefOrGetter<(string | Date)[]>
 		autoSize?: boolean
 	}>(),
 	{
@@ -30,6 +31,7 @@ const emit = defineEmits(['update:modelValue'])
 
 const computedHighlightedDates = computed(() => toValue(props.highlightedDates))
 const computedDisabledDates = computed(() => toValue(props.disabledDates))
+const computedAllowedDates = computed(() => toValue(props.allowedDates))
 
 // State
 const currentMonth = ref(new Date())
@@ -70,6 +72,21 @@ function useDateValidation() {
 			if (isInDisabledDates) { return true }
 		}
 
+		// If allowedDates is set, only those dates are enabled
+		if (Array.isArray(computedAllowedDates.value) && computedAllowedDates.value.length > 0) {
+			const dateKey = `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')}`
+			const isAllowed = computedAllowedDates.value.some((allowedDate) => {
+				if (typeof allowedDate === 'string') {
+					// Direct string comparison (YYYY-MM-DD)
+					return allowedDate === dateKey
+				}
+				return allowedDate.getFullYear() === date.getFullYear()
+					&& allowedDate.getMonth() === date.getMonth()
+					&& allowedDate.getDate() === date.getDate()
+			})
+			if (!isAllowed) { return true }
+		}
+
 		return false
 	}
 

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

@@ -239,7 +239,7 @@ watch(
 			})
 		}
 	},
-	{ deep: true },
+	{ deep: true, immediate: true },
 )
 
 onMounted(() => {

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

@@ -253,7 +253,7 @@ onMounted(initializeCountry)
 							aria-label="Search by country name or country code" placeholder="Search" icon="search"
 						/>
 
-						<ul class="overflow-y p-0 max-h-300px" role="listbox">
+						<ul class="overflow-y p-0 max-h-300px m-0" role="listbox">
 							<li
 								v-for="(pb) in countries" :key="pb.iso2" role="option"
 								class="flex gap-075 pointer hover" tabindex="-1"

package/src/components/index.ts

@@ -23,6 +23,7 @@ export { default as Filter } from './Filter.vue'
 export { default as Flag } from './Flag.vue'
 export * from './form'
 export { default as Icon } from './Icon/Icon.vue'
+export { FONT_AWESOME_ICONS, FONT_AWESOME_BRANDS_ICONS, MATERIAL_ICONS } from './Icon/constants'
 export { default as IframeVue } from './IframeVue.vue'
 export { default as Image } from './Image.vue'
 export { default as ImportData } from './ImportData.vue'

package/src/components/layout/AppLayout.vue

@@ -4,15 +4,17 @@ import { ref, provide, onMounted, onUnmounted, computed } from 'vue'
 interface Props {
 	sidebarWidth?: string
 	sidebarCardStyle?: boolean
+	defaultOpen?: boolean
 }
 
 const props = withDefaults(defineProps<Props>(), {
 	sidebarWidth: '260px',
-	sidebarCardStyle: false
+	sidebarCardStyle: false,
+	defaultOpen: true,
 })
 
 // Menu state
-const isOpen = ref(true)
+const isOpen = ref(props.defaultOpen)
 const isMobile = ref(false)
 
 // Check if mobile

package/src/components/layout/AppSidebar.vue

@@ -7,7 +7,7 @@ import { resolveI18n } from '../../i18n'
 
 // Extended interface for links with active route tracking
 interface LinkWithAction extends NavLink {
-	activeRoutes?: string[] // נתיבים שצריכים להיות מסומנים כאקטיביים עבור הלינק הזה
+	activeRoutes?: string[] // Routes that should be marked as active for this link
 }
 
 interface Props {
@@ -23,10 +23,14 @@ interface Props {
 	name?: string
 	frame?: boolean
 	activeRoutes?: string[]
+	centerlinks?: boolean
+	defaultOpen?: boolean
 }
 
 const props = withDefaults(defineProps<Props>(), {
 	card: true,
+	centerlinks: false,
+	defaultOpen: true,
 	bgColor: 'var(--bgl-white)',
 	textColor: 'var(--bgl-black)',
 	activeColor: 'var(--bgl-black)',
@@ -40,9 +44,12 @@ const route = useRoute()
 const isTransitioning = ref(false)
 
 // Inject menu state from parent
+const _fallbackIsOpen = ref(props.defaultOpen)
+const _fallbackIsMobile = ref(false)
+
 const menuState = inject('menuState', {
-	isOpen: { value: true },
-	isMobile: { value: false },
+	isOpen: _fallbackIsOpen,
+	isMobile: _fallbackIsMobile,
 	closeOnMobile: () => void 0,
 	sidebarWidth: '260px',
 	sidebarCollapsedWidth: '66px',
@@ -160,7 +167,7 @@ const sidebarStyles = computed(() => {
 		>
 			<!-- Logo/Brand -->
 			<router-link
-				to="/" class="decoration-none flex px-05" :class="{
+				to="/" class="decoration-none flex siderbarLogoWrap" :class="{
 					'gap-05': menuState.isOpen.value,
 					'gap-0': !menuState.isOpen.value,
 				}"
@@ -175,7 +182,7 @@ const sidebarStyles = computed(() => {
 			</router-link>
 
 			<!-- Navigation Links -->
-			<nav class="sidebar-nav flex column flex-stretch gap-025 align-items-start scrollbar-gutter-stable">
+			<nav class="sidebar-nav flex column flex-stretch gap-025 align-items-start scrollbar-gutter-stable" :class="{ 'justify-content-center': props.centerlinks }">
 				<Btn
 					v-for="link in props.navLinks" :key="link.to"
 					:title="!menuState.isOpen.value && !menuState.isMobile.value ? resolveI18n(link.label) : ''" fullWidth
@@ -183,7 +190,8 @@ const sidebarStyles = computed(() => {
 					:style="{
 						backgroundColor: isActiveRoute(link) ? props.activeColor : props.bgColor,
 						color: isActiveRoute(link) ? 'white' : props.textColor,
-					}" :to="link.to || '/'" @click="link.action"
+					}"
+					:to="link.to || '/'" @click="link.action"
 				>
 					<Icon :name="link.icon" size="1.2" />
 					<span class="nav-text">
@@ -196,8 +204,13 @@ const sidebarStyles = computed(() => {
 				<!-- Footer Links -->
 				<Btn
 					v-for="link in props.footerLinks" :key="link.to || link.label"
-					:title="!menuState.isOpen.value && !menuState.isMobile.value ? resolveI18n(link.label) : ''" alignTxt="start"
-					fullWidth flat :icon="link.icon" class="flex-shrink-0 px-1" :to="link.to" @click="link.action"
+					:title="!menuState.isOpen.value && !menuState.isMobile.value ? resolveI18n(link.label) : ''"
+					:style="{
+						color: isActiveRoute(link) ? 'white' : props.textColor,
+					}"
+					fullWidth
+					alignTxt="start"
+					flat :icon="link.icon" class="flex-shrink-0 px-1" :to="link.to" @click="link.action"
 				>
 					<span class="nav-text">
 						{{ resolveI18n(link.label) }}

package/src/components/lightbox/Lightbox.vue

@@ -3,9 +3,6 @@ import type { LightboxItem } from './lightbox.types'
 
 import { BglVideo, Btn, Icon, Zoomer, Image, normalizeURL, Swiper, downloadFile } from '@bagelink/vue'
 import { computed, ref, watch } from 'vue'
-import { useI18n } from '../../i18n'
-
-const { $t } = useI18n()
 
 const isOpen = ref(false)
 const group = ref<LightboxItem[]>([])
@@ -80,44 +77,31 @@ defineExpose({ open, close })
 					<Btn flat class="color-white" icon="zoom_in" :disabled="zoom === 1" @click="zoom = 1" />
 					<Btn flat class="color-white" icon="add" :disabled="zoom === 3" @click="zoom++" />
 				</div>
-				<Btn
-					v-if="currentItem?.openFile && currentItem?.src" class="color-white" round thin flat
-					iconEnd="arrow_outward" value="$t:lightbox.openFile" :href="currentItem?.src" target="_blank"
-				/>
-				<Btn
-					v-if="currentItem?.download && currentItem?.src" class="color-white" round thin flat
-					icon="download" value="Download File" @click="downloadFile(currentItem?.src)"
-				/>
+				<Btn v-if="currentItem?.openFile && currentItem?.src" class="color-white" round thin flat
+					iconEnd="arrow_outward" value="$t:lightbox.openFile" :href="currentItem?.src" target="_blank" />
+				<Btn v-if="currentItem?.download && currentItem?.src" class="color-white" round thin flat
+					icon="download" value="Download File" @click="downloadFile(currentItem?.src)" />
 				<div v-if="!currentItem?.openFile && !currentItem?.download" />
 			</div>
 
-			<Swiper
-				v-if="group && group.length > 0" v-model:index="currentIndex" :items="group"
+			<Swiper v-if="group && group.length > 0" v-model:index="currentIndex" :items="group"
 				:initial-slide="currentIndex" class="bgl-lightbox-swiper" :class="{ zoomed: zoom > 1 }"
 				:navigation="group.length > 1" :grab-cursor="canSwipe" :keyboard="true" :loop="false" :speed="400"
 				:slides-per-view="1" :space-between="0" effect="slide" :advanced-options="swiperAdvancedOptions"
-				@click.stop
-			>
+				@click.stop>
 				<template #default="{ item }">
 					<div class="bgl-lightbox-item">
-						<Zoomer
-							v-if="item.type === 'image'" v-model:zoom="zoom" :disabled="!item?.enableZoom"
+						<Zoomer v-if="item.type === 'image'" v-model:zoom="zoom" :disabled="!item?.enableZoom"
 							:mouse-wheel-to-zoom="false" :double-click-to-zoom="true" :max-scale="5" :min-scale="1"
-							:aspect-ratio="0" :limit-translation="true" @click.stop
-						>
+							:aspect-ratio="0" :limit-translation="true" @click.stop>
 							<Image :draggable="false" :src="item?.src" alt="Preview" class="lightbox-image" />
 						</Zoomer>
 
-						<BglVideo
-							v-else-if="item?.type === 'video' && item?.src" :src="item?.src" autoplay controls
-							class="lightbox-video"
-						/>
+						<BglVideo v-else-if="item?.type === 'video' && item?.src" :src="item?.src" autoplay controls
+							class="lightbox-video" />
 
 						<div v-else-if="item?.type === 'pdf' && item?.src" class="lightbox-pdf">
-							<embed
-								:src="normalizeURL(item?.src)" type="application/pdf" width="100%" height="1080"
-								:title="item?.name"
-							>
+							<embed :src="normalizeURL(item?.src)" type="application/pdf" :title="item?.name">
 						</div>
 
 						<div v-else class="lightbox-file">
@@ -152,14 +136,10 @@ defineExpose({ open, close })
 
 			<div v-if="group && group.length > 1" class="lightbox-thumbnails" @click.stop>
 				<template v-for="(item, index) in group" :key="index">
-					<Image
-						v-if="item.type === 'image'" class="thumbnail" :src="item.src" alt=""
-						:class="{ active: currentIndex === index }" @click.stop="selectItem(index)"
-					/>
-					<Icon
-						v-else class="thumbnail thumbnail-icon" icon="description"
-						:class="{ active: currentIndex === index }" @click.stop="selectItem(index)"
-					/>
+					<Image v-if="item.type === 'image'" class="thumbnail" :src="item.src" alt=""
+						:class="{ active: currentIndex === index }" @click.stop="selectItem(index)" />
+					<Icon v-else class="thumbnail thumbnail-icon" icon="description"
+						:class="{ active: currentIndex === index }" @click.stop="selectItem(index)" />
 				</template>
 			</div>
 		</div>
@@ -299,6 +279,18 @@ defineExpose({ open, close })
 	margin: auto;
 }
 
+.lightbox-pdf {
+	width: 90vw;
+	height: calc(100vh - 140px);
+}
+
+.lightbox-pdf embed {
+	width: 100%;
+	height: 100%;
+	border: none;
+	border-radius: 3px;
+}
+
 .lightbox-video iframe {
 	width: 90vw;
 }

package/src/form-flow/FormFlow.vue

@@ -239,7 +239,7 @@ function getFieldProps(field: FieldBuilder, key: string) {
 	}
 
 	if (field._type === 'multiselect') {
-		baseProps.multiple = true
+		baseProps.multiselect = true
 	}
 
 	if (field._type === 'json') {
@@ -254,7 +254,6 @@ function getFieldProps(field: FieldBuilder, key: string) {
 		baseProps.allowAdd = baseProps.allowAdd ?? true
 		baseProps.allowDelete = baseProps.allowDelete ?? true
 	}
-
 	return baseProps
 }
 

package/src/i18n/locales/en.json

@@ -243,6 +243,7 @@
     "reorderSaving": "Saving order..."
   },
   "datastores": {
+    "selectCollection": "Select a collection from the list",
     "fieldName": "Name",
     "fieldStore": "Store",
     "fieldStoreHint": "e.g.: default",
@@ -294,5 +295,173 @@
     "deleteInviteConfirm": "Delete the invitation?",
     "deleteInviteError": "Error deleting invitation",
     "removeUserConfirm": "Remove {email}?"
+  },
+  "forms": {
+    "title": "Forms",
+    "refresh": "Refresh",
+    "newForm": "New Form",
+    "createForm": "Create Form",
+    "noForms": "No forms yet",
+    "noFormsDesc": "Create your first form to get started",
+    "active": "Active",
+    "inactive": "Inactive",
+    "submissionsOnly": "Submissions only",
+    "noDefinition": "No form definition - view submissions",
+    "fieldCount": "{n} fields",
+    "createdAt": "Created {date}",
+    "editor": {
+      "newForm": "New Form",
+      "builder": "Builder",
+      "submissions": "Submissions",
+      "edit": "Edit",
+      "preview": "Preview",
+      "save": "Save",
+      "create": "Create",
+      "formName": "Form Name *",
+      "formNamePlaceholder": "Enter form name",
+      "description": "Description",
+      "descriptionPlaceholder": "Optional description",
+      "active": "Active",
+      "deleteForm": "Delete Form",
+      "deleteConfirm": "Are you sure you want to delete this form?",
+      "submit": "Submit"
+    },
+    "submissions": {
+      "title": "Submissions",
+      "exportCsv": "Export CSV",
+      "statusPlaceholder": "Status",
+      "noSubmissions": "No submissions found",
+      "count": "No submissions | 1 submission | {n} submissions",
+      "date": "Date",
+      "status": "Status",
+      "statusAll": "All",
+      "statusSaved": "Saved",
+      "statusDraft": "Draft",
+      "statusProcessed": "Processed",
+      "statusAbandoned": "Abandoned",
+      "statusError": "Error",
+      "statusSpam": "Spam"
+    },
+    "builder": {
+      "noFields": "No fields yet",
+      "noFieldsDesc": "Click + to add your first field",
+      "noFieldsDefined": "No fields defined",
+      "selectField": "Select a field to edit its settings",
+      "tooSmall": "Window too small",
+      "tooSmallDesc": "Expand the window to at least 1000px to edit the form"
+    },
+    "fieldSettings": {
+      "headingText": "Heading Text",
+      "noDividerSettings": "No settings for divider",
+      "label": "Label",
+      "fieldKey": "Field Key",
+      "placeholder": "Placeholder",
+      "helpText": "Help Text",
+      "required": "Required",
+      "options": "Options",
+      "addOption": "Add Option",
+      "validation": "Validation",
+      "minLength": "Min Length",
+      "maxLength": "Max Length",
+      "pattern": "Pattern (RegEx)",
+      "min": "Min",
+      "max": "Max",
+      "step": "Step",
+      "removeField": "Remove Field",
+      "columnWidth": "Column Width",
+      "columnHeight": "Column Height",
+      "optionLabel": "Label",
+      "optionValue": "Value",
+      "sectionHeader": "Section Header",
+      "fieldPrefix": "Field",
+      "removeFieldTitle": "Remove field",
+      "removeTitle": "Remove",
+      "richTextVariant": "Toolbar",
+      "richTextVariantFull": "Full",
+      "richTextVariantBasic": "Basic",
+      "richTextVariantSimple": "Simple",
+      "textareaRows": "Rows",
+      "textareaAutoHeight": "Auto Height",
+      "numberLayout": "Spinner Layout",
+      "numberLayoutDefault": "Default",
+      "numberLayoutVertical": "Vertical",
+      "numberLayoutHorizontal": "Horizontal",
+      "numberSpinner": "Show Spinner",
+      "phoneOnlyCountries": "Allowed Countries",
+      "phoneOnlyCountriesPlaceholder": "e.g. IL, US, GB",
+      "phoneOnlyCountriesHelp": "Comma-separated ISO 3166-1 alpha-2 country codes. Leave empty to show all countries.",
+      "selectMultiselect": "Multiple Selection",
+      "dateEnableTime": "Enable Time",
+      "dateMin": "Min Date",
+      "dateMax": "Max Date",
+      "rangeMulti": "Range (Two Handles)",
+      "radioThin": "Compact Style",
+      "radioHideRadio": "Hide Radio Circle",
+      "radioAlign": "Item Alignment",
+      "radioAlignStart": "Start",
+      "radioAlignCenter": "Center",
+      "radioAlignEnd": "End",
+      "textIcon": "End Icon",
+      "textIconStart": "Start Icon",
+      "fileMultiple": "Allow Multiple Files",
+      "fileHeight": "Height",
+      "fileAccept": "Accepted File Types",
+      "fileAcceptPlaceholder": "e.g. image/*,.pdf",
+      "fileTheme": "Theme",
+      "fileThemeDropzone": "Dropzone",
+      "fileThemeBasic": "Basic",
+      "fileShowIcon": "Show Icon",
+      "fileIcon": "Icon Name"
+    },
+    "iconPicker": {
+      "none": "None",
+      "search": "Search icons...",
+      "noResults": "No icons found"
+    },
+    "schemaBuilder": {
+      "fieldId": "Field ID",
+      "fieldIdDesc": "Technical name for API/database",
+      "fieldLabel": "Field Label",
+      "fieldLabelPlaceholder": "Enter field label",
+      "description": "Description (optional)",
+      "descriptionPlaceholder": "Help text for this field",
+      "requiredField": "Required field",
+      "required": "Required",
+      "textValidations": "Text Validations",
+      "format": "Format",
+      "minimumLength": "Minimum Length",
+      "maximumLength": "Maximum Length",
+      "noMinimum": "No minimum",
+      "noMaximum": "No maximum",
+      "numberValidations": "Number Validations",
+      "minimumValue": "Minimum Value",
+      "maximumValue": "Maximum Value",
+      "stepMultipleOf": "Step / Multiple Of",
+      "anyValue": "Any value",
+      "addField": "Add Field",
+      "noFieldsClickAbove": "Click a button above to add your first field",
+      "patternPlaceholder": "e.g., ^[A-Z]+$",
+      "fieldTypes": {
+        "shortText": "Short Text",
+        "longText": "Long Text",
+        "number": "Number",
+        "integer": "Integer",
+        "yesNo": "Yes/No",
+        "dropdown": "Dropdown",
+        "email": "Email",
+        "phone": "Phone",
+        "date": "Date",
+        "unknown": "Unknown"
+      },
+      "formats": {
+        "plainText": "Plain Text",
+        "email": "Email",
+        "url": "URL",
+        "date": "Date",
+        "dateTime": "Date & Time",
+        "time": "Time",
+        "phone": "Phone"
+      }
+    }
   }
 }