@bagelink/vue 1.12.31 → 1.12.36

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

@@ -38,6 +38,11 @@ interface PropTypes {
 	searchPlaceholder?: string
 	error?: string
 	underlined?: boolean
+	size?: 'xs' | 's' | 'm' | 'l' | 'xl'
+	outline?: boolean
+	border?: boolean
+	thin?: boolean
+	round?: boolean
 }
 
 const searchInput = ref<HTMLElement | undefined>()
@@ -56,6 +61,17 @@ const selected = ref(false)
 const open = ref(false)
 const selectPlaceholder = computed(() => resolveI18n(props.placeholder) ?? $t('select.placeholder'))
 
+const btnClasses = computed(() => ({
+	'selectinput-btn--xs': props.size === 'xs',
+	'selectinput-btn--s': props.size === 's',
+	'selectinput-btn--l': props.size === 'l',
+	'selectinput-btn--xl': props.size === 'xl',
+	'selectinput-btn--round': props.round,
+	'selectinput-btn--thin': props.thin,
+	'outline': props.outline,
+	'border': props.border,
+}))
+
 const selectedLabel = computed((): string => {
 	if (selectedItemCount.value === 0) { return selectPlaceholder.value }
 	if (selectedItemCount.value > 4) {
@@ -73,6 +89,7 @@ const { results, isLoading } = useSearch<Option>({
 	searchTerm: () => searchTerm.value,
 	serverSearch: isAsyncSource(props.options) ? props.options : undefined,
 	items: () => (Array.isArray(props.options) ? props.options : []),
+	keysToSearch: ['label'],
 	minChars: isAsyncSource(props.options) ? 0 : 2,
 })
 
@@ -275,7 +292,7 @@ onMounted(() => {
 					/>
 					<button
 						v-else ref="triggerBtn" :disabled="disabled" type="button" class="selectinput-btn"
-						:class="{ isEmpty: selectedItemCount === 0 }" @click="open = !open"
+						:class="[{ isEmpty: selectedItemCount === 0 }, btnClasses]" @click="open = !open"
 						@keydown.down.prevent="navigate('down')" @keydown.up.prevent="navigate('up')"
 					>
 						<Icon v-if="icon" :icon="icon" />
@@ -320,10 +337,12 @@ onMounted(() => {
 						<Icon v-if="isSelected(option)" :size="1.1" icon="select_check_box" />
 						<Icon v-if="!isSelected(option)" class="opacity-3" icon="check_box_outline_blank" :size="1.1" />
 					</template>
-					<Icon v-if="getOptionIcon(option)" :icon="getOptionIcon(option)!" :size="1" />
-					<span class="block">
-						{{ getLabel(option) }}
-					</span>
+				<div class="flex gap-05">
+						<Icon v-if="getOptionIcon(option)" :icon="getOptionIcon(option)!" :size="1" />
+						<span class="block">
+							{{ getLabel(option) }}
+						</span>
+				</div>
 				</div>
 				<p v-if="results.length === 0" class="selectinput-option opacity-3 pointer-events-none">
 					No options found
@@ -422,6 +441,13 @@ onMounted(() => {
 	text-overflow: ellipsis;
 }
 
+.selectinput-btn.selectinput-btn--xs { height: calc(var(--input-height) * 0.6); padding: 0 0.4rem; font-size: 0.75em; }
+.selectinput-btn.selectinput-btn--s  { height: calc(var(--input-height) * 0.75); padding: 0 0.5rem; font-size: 0.875em; }
+.selectinput-btn.selectinput-btn--l  { height: calc(var(--input-height) * 1.2); padding: 0 1rem; font-size: 1.1em; }
+.selectinput-btn.selectinput-btn--xl { height: calc(var(--input-height) * 1.5); padding: 0 1.25rem; font-size: 1.2em; }
+.selectinput-btn.selectinput-btn--round { border-radius: 999px; }
+.selectinput-btn.selectinput-btn--thin  { height: calc(var(--input-height) * 0.75); padding: 0 0.5rem; }
+
 .selectinput .bagel-input.mb-0 input {
 	/* background: transparent !important; */
 }

package/src/components/index.ts

@@ -19,7 +19,7 @@ export { Draggable, useDraggable, vDraggable } from './draggable'
 export { default as DragOver } from './DragOver.vue'
 export { default as Dropdown } from './Dropdown.vue'
 export { default as FieldSetVue } from './FieldSetVue.vue'
-export { default as Filter } from './Filter.vue'
+export { default as FilterQuery } from './FilterQuery.vue'
 export { default as Flag } from './Flag.vue'
 export * from './form'
 export { default as Icon } from './Icon/Icon.vue'

package/src/components/layout/AppContent.vue

@@ -29,11 +29,7 @@ const menuState = inject('menuState', {
 const sidebarCardStyle = inject('sidebarCardStyle', { value: false })
 
 // Computed property to check if sidebar has card style
-const hasSidebarCard = computed(() => {
-	// Check if there's an AppSidebar with card class in the DOM
-	const sidebar = document.querySelector('.app-sidebar .card')
-	return sidebar !== null || sidebarCardStyle?.value
-})
+const hasSidebarCard = computed(() => sidebarCardStyle?.value ?? false)
 </script>
 
 <template>
@@ -44,12 +40,8 @@ const hasSidebarCard = computed(() => {
 	>
 		<!-- Header -->
 		<header
-			class="app-header flex align-items-center space-between py-1 m_pt-025 m_pb-05 min-h60px w-100p  m_flex-wrap"
-			:class="{
-				'border-bottom': border,
-				'px-1': !hasSidebarCard,
-				'm_px-1': hasSidebarCard,
-			}"
+			class="app-header flex align-items-center space-between py-1 m_pt-025 m_pb-05 min-h60px w-100p  m_flex-wrap px-1 m_px-05"
+			:class="{ 'border-bottom': border }"
 		>
 			<!-- Left Side -->
 			<div class="flex align-items-center gap-col-075 m_flex-wrap m_pe-075">
@@ -84,9 +76,7 @@ const hasSidebarCard = computed(() => {
 
 		<!-- Page Content -->
 		<main
-			class="pageContent flex-grow overflow pt-1 pb-05 w-100p m_p-05 m_scrollbar-gutter-auto m_vw100" :class="{
-				'px-1': !hasSidebarCard,
-			}"
+			class="pageContent flex-grow overflow pt-1 pb-05 px-1 w-100p m_p-05 m_scrollbar-gutter-auto m_vw100"
 		>
 			<slot name="content">
 				<!-- Default slot for content without explicit template -->
@@ -114,6 +104,18 @@ const hasSidebarCard = computed(() => {
 	transition: all 0.15s ease-in;
 	overflow: hidden;
 }
+body:has(.cardWrapSide) .pageContent,
+body:has(.cardWrapSide) .app-header {
+	padding-inline: 0 !important;
+}
+
+@media screen and (max-width: 910px) {
+
+	body:has(.cardWrapSide) .pageContent,
+	body:has(.cardWrapSide) .app-header {
+		padding-inline: 0.5rem !important;
+	}
+}
 </style>
 
 <style scoped>

package/src/components/layout/AppSidebar.vue

@@ -168,8 +168,8 @@ const sidebarStyles = computed(() => {
 			<!-- Logo/Brand -->
 			<router-link
 				to="/" class="decoration-none flex siderbarLogoWrap" :class="{
-					'gap-05': menuState.isOpen.value,
-					'gap-0': !menuState.isOpen.value,
+	'gap-05 ps-05': menuState.isOpen.value,
+	'gap-0 pe-05 mx-auto': !menuState.isOpen.value,
 				}"
 			>
 				<img
@@ -206,12 +206,13 @@ const sidebarStyles = computed(() => {
 					v-for="link in props.footerLinks" :key="link.to || link.label"
 					:title="!menuState.isOpen.value && !menuState.isMobile.value ? resolveI18n(link.label) : ''"
 					:style="{
+						backgroundColor: isActiveRoute(link) ? props.activeColor : props.bgColor,
 						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"
+					fullWidth alignTxt="start" class="flex-shrink-0 px-1" :class="{ 'nav-btn-active': isActiveRoute(link) }"
+					:to="link.to || '/'" @click="link.action"
 				>
+					<Icon :name="link.icon" size="1.2" />
 					<span class="nav-text">
 						{{ resolveI18n(link.label) }}
 					</span>

package/src/components/layout/TabsNav.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import type { Tab } from '@bagelink/vue'
+import type { Tab, IconType } from '@bagelink/vue'
 import { Icon } from '@bagelink/vue'
 import { nextTick, onBeforeUnmount, onMounted, ref, watch } from 'vue'
 import { useTabs } from './tabsManager'
@@ -12,6 +12,16 @@ const props = defineProps<{
 	group: string
 	flat?: boolean
 	vertical?: boolean
+	icon?: IconType
+	iconEnd?: IconType
+	iconSize?: number | string
+	iconMobileSize?: number | string
+	thin?: boolean
+	size?: 'xs' | 's' | 'm' | 'l' | 'xl' | 'extra-small' | 'small' | 'medium' | 'large' | 'extra-large'
+	fullWidth?: boolean
+	fullWidthMobile?: boolean
+	alignTxt?: 'center' | 'start' | 'end'
+	alignTxtMobile?: 'center' | 'start' | 'end'
 }>()
 
 const emit = defineEmits(['update:modelValue'])
@@ -22,12 +32,12 @@ currentTab.value
 		: props.tabs[0].value
 
 const tabsWrap = ref<HTMLElement | undefined>(undefined)
-const tabs = ref<HTMLElement[]>([])
+const tabEls = ref<HTMLElement[]>([])
 
 function updateIndicator() {
 	nextTick(() => {
 		if (!tabsWrap.value) { return }
-		const activeTab = tabs.value.find(tab => tab.classList.contains('active'))
+		const activeTab = tabEls.value.find(tab => tab.classList.contains('active'))
 		if (activeTab) {
 			// Wait a bit more to ensure CSS is fully loaded and elements are properly sized
 			setTimeout(() => {
@@ -68,7 +78,7 @@ watch(
 )
 
 onMounted(() => {
-	tabs.value = Array.from(tabsWrap.value?.querySelectorAll('.bgl_tab') || [])
+	tabEls.value = Array.from(tabsWrap.value?.querySelectorAll('.bgl_tab') || [])
 
 	// Wait for the next frame to ensure all CSS and layout calculations are done
 	requestAnimationFrame(() => {
@@ -79,7 +89,7 @@ onMounted(() => {
 })
 
 watch(
-	() => tabs.value,
+	() => tabEls.value,
 	() => {
 		nextTick(() => { updateIndicator() })
 	},
@@ -91,14 +101,33 @@ onBeforeUnmount(() => {
 </script>
 
 <template>
-	<div ref="tabsWrap" class="grid auto-flow-columns relative fit-content bgl_tabs_wrap overflow-hidden" :class="{ 'bgl_flat-tabs': flat, 'bgl_vertical-tabs': vertical }">
-		<slot name="tabs" v-bind="{ selectTab, isActive, tabLabel, tabs }">
-			<button v-for="(tab, i) in props.tabs" :key="i" type="button" :class="{ active: isActive(tab) }" class="bgl_tab relative z-1" @click="selectTab(tab)">
-				<Icon v-if="typeof tab !== 'string' && tab.icon" :icon="tab.icon" />
-				{{ tabLabel(tab) }}
-			</button>
+<div ref="tabsWrap" class="grid auto-flow-columns relative fit-content bgl_tabs_wrap overflow-hidden" :class="{ 'bgl_flat-tabs': flat, 'bgl_vertical-tabs': vertical }">
+	<slot name="tabs" v-bind="{ selectTab, isActive, tabLabel, tabs: tabEls }">
+		<button v-for="(tab, i) in props.tabs" :key="i" type="button" :class="[
+			{ active: isActive(tab) },
+			{
+				'bgl_tab-thin': thin,
+				'bgl_tab-xs': size === 'xs' || size === 'extra-small',
+				'bgl_tab-s': size === 's' || size === 'small',
+				'bgl_tab-l': size === 'l' || size === 'large',
+				'bgl_tab-xl': size === 'xl' || size === 'extra-large',
+				'w-100p justify-center': fullWidth,
+				'w-auto m_w-100p': fullWidthMobile,
+				'bgl_tab-align-center': alignTxt === 'center',
+				'bgl_tab-align-start': alignTxt === 'start',
+				'bgl_tab-align-end': alignTxt === 'end',
+				'bgl_tab-align-center-mobile': alignTxtMobile === 'center',
+				'bgl_tab-align-start-mobile': alignTxtMobile === 'start',
+				'bgl_tab-align-end-mobile': alignTxtMobile === 'end',
+						}
+					]" class="bgl_tab relative z-1" @click="selectTab(tab)">
+			<Icon v-if="icon" :icon="icon" :size="iconSize" :mobile-size="iconMobileSize" />
+			<Icon v-else-if="typeof tab !== 'string' && tab.icon" :icon="tab.icon" :size="iconSize" :mobile-size="iconMobileSize" />
+			{{ tabLabel(tab) }}
+			<Icon v-if="iconEnd" :icon="iconEnd" :size="iconSize" :mobile-size="iconMobileSize" />
+		</button>
 		</slot>
-	</div>
+		</div>
 </template>
 
 <style>
@@ -123,7 +152,7 @@ onBeforeUnmount(() => {
 <style scoped>
 .bgl_tabs_wrap {
 	background: var(--bgl_tabs-background);
-		border-radius: calc(var(--bgl_tabs-border-radius) * 1.4);
+	border-radius: calc(var(--bgl_tabs-border-radius) * 1.4);
 		padding-inline: var(--bgl_tabs-inline-padding);
 		padding-block: var(--bgl_tabs-block-padding);
 		box-shadow: var(--bgl_tabs-shadow);
@@ -134,15 +163,16 @@ onBeforeUnmount(() => {
 	border: none;
 	background: transparent;
 	cursor: pointer;
-	font-size: var(--bgl_tabs-font-size);
+	font-size: inherit;
 	font-family: inherit;
+	height: calc(var(--btn-height) - var(--bgl_tabs-block-padding) * 2);
 	padding-inline: var(--bgl_tab-inline-padding);
-		padding-block: var(--bgl_tab-block-padding);
+	padding-block: 0;
 		border-radius: var(--bgl_tab-border-radius);
 	transition: var(--bgl-transition);
 	color: inherit;
 	display: flex;
-		align-items: center;
+	align-items: center;
 		gap: var(--bgl_tab-gap);
 }
 
@@ -154,21 +184,22 @@ onBeforeUnmount(() => {
 	content: '';
 	position: absolute;
 	top: var(--bgl_tabs-block-padding);
-		bottom: var(--bgl_tabs-block-padding);
+	bottom: var(--bgl_tabs-block-padding);
 	left: var(--indicator-left, 0);
 	width: var(--indicator-width, 0);
 	background: var(--bgl_tabs-indicator-color);
-		border-radius: var(--bgl_tabs-border-radius);
+	border-radius: var(--bgl_tabs-border-radius);
 	transition: var(--bgl-transition);
 	z-index: 0;
 	/* Hide indicator initially until position is calculated */
 	opacity: var(--indicator-opacity, 0);
 }
+
 .bgl_flat-tabs.bgl_tabs_wrap {
 	background: transparent;
 	box-shadow: none;
 }
-.bgl_flat-tabs.bgl_tabs_wrap::before{
+.bgl_flat-tabs.bgl_tabs_wrap::before {
 	background: transparent;
 	border-bottom: 1px solid var(--bgl-tabs-flat-indicator-color);
 	border-radius: 0;
@@ -176,36 +207,95 @@ onBeforeUnmount(() => {
 	bottom: unset;
 
 }
-.bgl_flat-tabs .active.bgl_tab{
+.bgl_flat-tabs .active.bgl_tab {
 	color: var(--bgl-primary)
 }
+
 .bgl_flat-tabs .bgl_tab:hover {
 	background: rgba(255, 255, 255, .1);
 }
-.bgl_vertical-tabs{
+.bgl_tab-thin {
+	padding-inline: calc(var(--bgl_tab-inline-padding) / 2);
+	height: calc(var(--btn-height) * 0.7 - var(--bgl_tabs-block-padding) * 2);
+}
+
+.bgl_tab-xs {
+	padding-inline: calc(var(--bgl_tab-inline-padding) / 3);
+	font-size: calc(var(--input-font-size) * 0.6);
+	height: calc(var(--btn-height) * 0.5 - var(--bgl_tabs-block-padding) * 2);
+}
+
+.bgl_tab-s {
+	padding-inline: calc(var(--bgl_tab-inline-padding) / 1.5);
+	height: calc(var(--btn-height) * 0.7 - var(--bgl_tabs-block-padding) * 2);
+}
+
+.bgl_tab-l {
+	padding-inline: calc(var(--bgl_tab-inline-padding) * 1.3);
+	font-size: calc(var(--input-font-size) * 1.1);
+	height: calc(var(--btn-height) * 1.2 - var(--bgl_tabs-block-padding) * 2);
+}
+
+.bgl_tab-xl {
+	padding-inline: calc(var(--bgl_tab-inline-padding) * 1.6);
+	font-size: calc(var(--input-font-size) * 1.3);
+	height: calc(var(--btn-height) * 1.5 - var(--bgl_tabs-block-padding) * 2);
+}
+
+.bgl_tab-align-start {
+	justify-content: flex-start !important;
+}
+
+.bgl_tab-align-end {
+	justify-content: flex-end !important;
+}
+
+.bgl_tab-align-center {
+	justify-content: center !important;
+}
+
+.bgl_tab-align-start-mobile,
+.bgl_tab-align-end-mobile {
+	justify-content: center !important;
+}
+
+.bgl_vertical-tabs {
 	grid-auto-flow: row;
 	align-items: start;
 	justify-items: start;
 	gap: 1rem
 }
-.bgl_vertical-tabs .bgl_tab{
+.bgl_vertical-tabs .bgl_tab {
 	padding-inline: 0;
 	border-radius: 0;
 	border-bottom: 1px solid transparent;
 }
-.bgl_vertical-tabs .bgl_tab:hover{
+.bgl_vertical-tabs .bgl_tab:hover {
 	background: transparent;
 	border-bottom: 1px solid var(--bgl-tabs-flat-indicator-color);
 
 }
-.bgl_vertical-tabs .bgl_tab.active{
+.bgl_vertical-tabs .bgl_tab.active {
 	border-bottom: 1px solid var(--bgl-tabs-flat-indicator-color);
 }
-.bgl_vertical-tabs.bgl_tabs_wrap::before{
+.bgl_vertical-tabs.bgl_tabs_wrap::before {
 	border: none;
 }
+
 @media screen and (max-width: 910px) {
-	.bgl_vertical-tabs{
+	.bgl_tab-align-start-mobile {
+			justify-content: flex-start !important;
+		}
+	
+		.bgl_tab-align-end-mobile {
+			justify-content: flex-end !important;
+		}
+	
+		.bgl_tab-align-center-mobile {
+			justify-content: center !important;
+		}
+	
+		.bgl_vertical-tabs {
 	grid-auto-flow: column;
 	overflow: auto;
 	max-width: 100vw;
@@ -214,15 +304,17 @@ onBeforeUnmount(() => {
 	gap: 1rem;
 	position: relative;
 }
+
 .bgl_vertical-tabs::-webkit-scrollbar {
 	display: none;
 }
-.bgl_vertical-tabs .bgl_tab{
+.bgl_vertical-tabs .bgl_tab {
 	white-space: nowrap;
 }
-				.bgl_tab {
-					gap: 0.25rem;
-					padding: 0.25rem 0.5rem;
-				}
+
+.bgl_tab {
+	gap: 0.25rem;
+	padding: 0.25rem 0.5rem;
+}
 }
 </style>

package/src/dialog/Dialog.vue

@@ -1,5 +1,6 @@
 <!-- prettier-ignore-start -->
 <!-- eslint-disable -->
+<!-- eslint-disable vue/multi-word-component-names -->
 <script setup lang="ts">
 import type { DialogWidth, DialogPosition } from './dialogTypes'
 import { Btn } from '@bagelink/vue'
@@ -171,6 +172,7 @@ dialog {
 	grid-template-rows: auto 1fr auto;
 	overflow: hidden;
 	border-radius: var(--bgl-card-radius, 12px);
+	height: 100%;
 }
 
 .height-100-2 {

package/src/form-flow/form-flow.ts

@@ -404,6 +404,7 @@ export const $ = {
 			collapsible?: boolean
 			min?: number
 			max?: number
+			simple?: boolean
 		}),
 		maybeConfig?: BaseFieldConfig & {
 			allowAdd?: boolean
@@ -412,6 +413,7 @@ export const $ = {
 			collapsible?: boolean
 			min?: number
 			max?: number
+			simple?: boolean
 		}
 	): FieldBuilder<any[]> {
 		// Label-first: $.array('Items', schema) or $.array('Items', schema, { min: 1 })

package/src/i18n/locales/en.json

@@ -463,5 +463,30 @@
         "phone": "Phone"
       }
     }
+  },
+  "calendar": {
+    "today": "Today",
+    "views": {
+      "week": "Week",
+      "month": "Month",
+      "day": "Day",
+      "agenda": "Agenda"
+    },
+    "agenda": {
+      "time": "Time",
+      "event": "Event",
+      "eventsCount": "{n} event | {n} events",
+      "noEvents": "No events"
+    }
+  },
+  "addToCalendar": {
+    "addTo": "Add to {name}",
+    "addToCalendar": "Add to Calendar",
+    "google": "Google Calendar",
+    "apple": "Apple Calendar",
+    "outlook": "Outlook",
+    "office365": "Office 365",
+    "yahoo": "Yahoo Calendar",
+    "ics": "Calendar (ICS file)"
   }
 }

package/src/i18n/locales/es.json

@@ -248,5 +248,24 @@
     "deleteInviteConfirm": "¿Eliminar la invitación?",
     "deleteInviteError": "Error al eliminar la invitación",
     "removeUserConfirm": "¿Eliminar a {email}?"
+  },
+  "calendar": {
+    "today": "Hoy",
+    "views": {
+      "week": "Semana",
+      "month": "Mes",
+      "day": "Día",
+      "agenda": "Agenda"
+    },
+    "agenda": {
+      "time": "Hora",
+      "event": "Evento",
+      "eventsCount": "{n} evento | {n} eventos",
+      "noEvents": "Sin eventos"
+    }
+  },
+  "addToCalendar": {
+    "addTo": "Agregar a {name}",
+    "addToCalendar": "Agregar al calendario"
   }
 }

package/src/i18n/locales/fr.json

@@ -247,6 +247,24 @@
     "inviteError": "Erreur lors de l'envoi de l'invitation",
     "deleteInviteConfirm": "Supprimer l'invitation ?",
     "deleteInviteError": "Erreur lors de la suppression de l'invitation",
-    "removeUserConfirm": "Retirer {email} ?"
+    "removeUserConfirm": "Retirer {email} ?"  },
+  "calendar": {
+    "today": "Aujourd'hui",
+    "views": {
+      "week": "Semaine",
+      "month": "Mois",
+      "day": "Jour",
+      "agenda": "Agenda"
+    },
+    "agenda": {
+      "time": "Heure",
+      "event": "Événement",
+      "eventsCount": "{n} événement | {n} événements",
+      "noEvents": "Aucun événement"
+    }
+  },
+  "addToCalendar": {
+    "addTo": "Ajouter à {name}",
+    "addToCalendar": "Ajouter au calendrier"
   }
 }

package/src/i18n/locales/he.json

@@ -484,5 +484,30 @@
         "phone": "טלפון"
       }
     }
+  },
+  "calendar": {
+    "today": "היום",
+    "views": {
+      "week": "שבוע",
+      "month": "חודש",
+      "day": "יום",
+      "agenda": "סדר יום"
+    },
+    "agenda": {
+      "time": "שעה",
+      "event": "אירוע",
+      "eventsCount": "אירוע אחד | {n} אירועים",
+      "noEvents": "אין אירועים"
+    }
+  },
+  "addToCalendar": {
+    "addTo": "הוסף ל{name}",
+    "addToCalendar": "הוסף ליומן",
+    "google": "יומן Google",
+    "apple": "יומן Apple",
+    "outlook": "Outlook",
+    "office365": "Office 365",
+    "yahoo": "יומן Yahoo",
+    "ics": "יומן (קובץ ICS)"
   }
 }

package/src/i18n/locales/it.json

@@ -248,5 +248,24 @@
     "deleteInviteConfirm": "Eliminare l'invito?",
     "deleteInviteError": "Errore durante l'eliminazione dell'invito",
     "removeUserConfirm": "Rimuovere {email}?"
+  },
+  "calendar": {
+    "today": "Oggi",
+    "views": {
+      "week": "Settimana",
+      "month": "Mese",
+      "day": "Giorno",
+      "agenda": "Agenda"
+    },
+    "agenda": {
+      "time": "Ora",
+      "event": "Evento",
+      "eventsCount": "{n} evento | {n} eventi",
+      "noEvents": "Nessun evento"
+    }
+  },
+  "addToCalendar": {
+    "addTo": "Aggiungi a {name}",
+    "addToCalendar": "Aggiungi al calendario"
   }
 }

package/src/i18n/locales/ru.json

@@ -248,5 +248,24 @@
     "deleteInviteConfirm": "Удалить приглашение?",
     "deleteInviteError": "Ошибка при удалении приглашения",
     "removeUserConfirm": "Удалить {email}?"
+  },
+  "calendar": {
+    "today": "Сегодня",
+    "views": {
+      "week": "Неделя",
+      "month": "Месяц",
+      "day": "День",
+      "agenda": "Повестка"
+    },
+    "agenda": {
+      "time": "Время",
+      "event": "Событие",
+      "eventsCount": "{n} событие | {n} события | {n} событий",
+      "noEvents": "Нет событий"
+    }
+  },
+  "addToCalendar": {
+    "addTo": "Добавить в {name}",
+    "addToCalendar": "Добавить в календарь"
   }
 }

package/src/utils/BagelFormUtils.ts

@@ -523,6 +523,7 @@ export interface ArrayAttrs<T, P extends Path<T>> extends Attributes<T, P> {
 	add?: boolean
 	schema?: MaybeRefOrGetter<BglFormSchemaT<ArrayFieldVal<T, P>>>
 	type?: ArrayType
+	simple?: boolean
 }
 
 export interface ArrayFieldOptions<T, K extends Path<T>> extends InputOptions<T, K>,	ArrayAttrs<T, K> {}

package/src/utils/calendar/dateUtils.ts

@@ -1,8 +1,8 @@
 import type { TimeUnit } from '../../types/timeAgoT'
-import { timeDelta, formatDate, fmtDate, handleTimezone, getDatePartsMap } from '@bagelink/utils'
+import { timeDelta, formatDate, fmtDate, handleTimezone, getDatePartsMap, utc, local } from '@bagelink/utils'
 import { getI18n } from '../../i18n'
 
-export { fmtDate, formatDate, getDatePartsMap, handleTimezone, timeDelta }
+export { fmtDate, formatDate, getDatePartsMap, handleTimezone, timeDelta, utc, local }
 export type { DateTimeAcceptedFormats, FormatDateOptions } from '@bagelink/utils'
 
 type TimeAgoLang = 'en' | 'es' | 'fr' | 'he' | 'it' | 'ru'