@bagelink/vue 1.12.33 → 1.12.38

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@bagelink/vue",
   "type": "module",
-  "version": "1.12.33",
+  "version": "1.12.38",
   "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.33"
+    "@bagelink/utils": "1.12.38"
   },
   "scripts": {
     "dev": "tsx watch src/index.ts",

package/src/components/AddToCalendar.vue

@@ -1,8 +1,10 @@
 <script setup lang="ts">
 import type { AddToCalendarEvent } from '@bagelink/vue'
-import { Btn, Dropdown, ListItem } from '@bagelink/vue'
+import { Btn, Dropdown, ListItem, useI18n } from '@bagelink/vue'
 import { computed } from 'vue'
 
+const { t } = useI18n()
+
 interface Props {
 	event: AddToCalendarEvent
 	google?: boolean
@@ -26,42 +28,42 @@ const hasExplicitCalendars = computed(() => props.google !== undefined
 
 const allCalendars = [
 	{
-		name: 'Google Calendar',
+		key: 'google',
 		icon: 'google',
 		action: 'google',
 		color: '#EA4335', // Google Red
 		prop: 'google' as const,
 	},
 	{
-		name: 'Apple Calendar',
+		key: 'apple',
 		icon: 'apple',
 		action: 'apple',
 		color: '#000000', // Apple Black
 		prop: 'apple' as const,
 	},
 	{
-		name: 'Outlook',
+		key: 'outlook',
 		icon: 'windows',
 		action: 'outlook',
 		color: '#0072C6', // Outlook Blue
 		prop: 'outlook' as const,
 	},
 	{
-		name: 'Office 365',
+		key: 'office365',
 		icon: 'microsoft',
 		action: 'office365',
 		color: '#EA3E23', // Office 365 Orange/Red
 		prop: 'office365' as const,
 	},
 	{
-		name: 'Yahoo Calendar',
+		key: 'yahoo',
 		icon: 'yahoo',
 		action: 'yahoo',
 		color: '#6001D2', // Yahoo Purple
 		prop: 'yahoo' as const,
 	},
 	{
-		name: 'Calendar (ICS file)',
+		key: 'ics',
 		icon: 'calendar',
 		action: 'ics',
 		color: '#96A2B4',
@@ -226,12 +228,12 @@ function handleCalendarClick(type: string) {
 		class="inline-block calendar-btn" :flat="false" :style="{ '--bgl-text-color': singleCalendar.color }"
 		@click="handleCalendarClick(singleCalendar.action)"
 	>
-		Add to {{ singleCalendar.name }}
+		{{ t('addToCalendar.addTo', { name: t(`addToCalendar.${singleCalendar.key}`) }) }}
 	</Btn>
 
 	<!-- Multiple calendars: show dropdown -->
 	<Dropdown
-		v-else-if="availableCalendars.length > 1" value="Add to Calendar" icon="calendar" color="white"
+		v-else-if="availableCalendars.length > 1" :value="t('addToCalendar.addToCalendar')" icon="calendar" color="white"
 		class="inline-block" :flat="false"
 	>
 		<ListItem
@@ -239,7 +241,7 @@ function handleCalendarClick(type: string) {
 			class="txt16" :style="{ '--bgl-text-color': '#000000', '--bgl-primary': calendar.color }"
 			@click="handleCalendarClick(calendar.action)"
 		>
-			{{ calendar.name }}
+			{{ t(`addToCalendar.${calendar.key}`) }}
 		</ListItem>
 	</Dropdown>
 </template>

package/src/components/{Filter.vue → FilterQuery.vue}

@@ -324,11 +324,11 @@ function onConnectorChange(id: string, connector: LogicalOperator) {
 						<!-- <div v-else /> -->
 
 						<!-- Field selector -->
-						<SelectInput
-							:model-value="condition.field" :options="fields"
-							:placeholder="currentTexts.placeholders.selectField" class="m-0 light-input borderHover"
-							@update:model-value="(v: string) => onFieldChange(condition.id, v)"
-						/>
+					<SelectInput
+						:model-value="condition.field" :options="fields"
+						:placeholder="currentTexts.placeholders.selectField" class="m-0 light-input borderHover" searchable
+						@update:model-value="(v: string) => onFieldChange(condition.id, v)"
+					/>
 
 						<!-- Operator selector -->
 						<SelectInput

package/src/components/Modal.vue

@@ -1,3 +1,4 @@
+<!-- eslint-disable vue/multi-word-component-names -->
 <script lang="ts" setup>
 import type { BtnOptions } from '@bagelink/vue'
 import type { SetupContext } from 'vue'
@@ -16,6 +17,7 @@ import '../styles/modal.css'
 
 interface ModalProps {
 	thin?: boolean
+	mobileThin?: boolean
 	side?: boolean
 	title?: string
 	width?: string
@@ -94,7 +96,7 @@ function openModal() {
 
 		<Card
 			class="modal m_pt-0" :style="{ ...maxWidth, '--bgl-box-bg': 'var(--bgl-popup-bg)' }" :thin="thin"
-			:class="{ 'pt-0': thin, 'pt-1': !thin, 'm_mt-5': isOverlay, 'display-flex column': side }" @click.stop
+			:class="{ 'pt-0': thin, 'pt-1': !thin, 'm_mt-5': isOverlay, 'display-flex column': side, 'm_px-1 m_pb-1': mobileThin }" @click.stop
 		>
 			<header v-if="slots.toolbar || title" class="tool-bar w-100p flex space-between sticky z-3 py-1">
 				<!-- Header close button -->

package/src/components/calendar/views/WeekView.vue

@@ -45,7 +45,7 @@ const timeRange = { start: 0, end: 24 }
 
 // Check if drag-to-create is enabled based on whether eventCreate handler is provided
 const isDragToCreateEnabled = computed(() => {
-	return !!slots.eventCreate || emit.hasOwnProperty('eventCreate')
+	return !!slots.eventCreate || Object.prototype.hasOwnProperty.call(emit, 'eventCreate')
 })
 
 // Drag state
@@ -603,11 +603,6 @@ function scrollToTime(time: number) {
 
 // Lifecycle hooks
 onMounted(() => {
-	console.log('[WeekView] mounted with props:', {
-		availabilityMode: props.availabilityMode,
-		availabilityEditable: props.availabilityEditable,
-		availabilitySlotsCount: props.availabilitySlots?.length
-	})
 	updateCurrentTimeIndicator()
 	currentTimeInterval.value = setInterval(updateCurrentTimeIndicator, 60000)
 
@@ -669,6 +664,13 @@ onUnmounted(() => {
 					class="day-column top bottom border-start relative"
 					@mousedown="props.availabilityEditable ? handleAvailMouseDown($event, index) : handleMouseDown($event, day)"
 				>
+					<!-- Hour grid lines -->
+					<div
+						v-for="slot in timeSlots" :key="`line-${slot.time}`"
+						class="hour-line absolute start end pointer-events-none"
+						:style="{ top: `${slot.hour * slotHeight}px` }"
+					/>
+
 					<!-- Availability painted blocks (behind events) -->
 					<template v-if="props.availabilityMode">
 						<div
@@ -794,6 +796,12 @@ onUnmounted(() => {
 	/* Adjust dot position */
 }
 
+.hour-line {
+	border-top: 1px solid var(--bgl-gray-80);
+	z-index: 0;
+	height: 0;
+}
+
 /* This ensures all grid content aligns properly */
 .overflow {
 	position: relative;

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/AppSidebar.vue

@@ -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/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/i18n/locales/en.json

@@ -478,5 +478,15 @@
       "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

@@ -263,5 +263,9 @@
       "eventsCount": "{n} evento | {n} eventos",
       "noEvents": "Sin eventos"
     }
+  },
+  "addToCalendar": {
+    "addTo": "Agregar a {name}",
+    "addToCalendar": "Agregar al calendario"
   }
 }

package/src/i18n/locales/fr.json

@@ -261,5 +261,10 @@
       "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

@@ -499,5 +499,15 @@
       "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

@@ -263,5 +263,9 @@
       "eventsCount": "{n} evento | {n} eventi",
       "noEvents": "Nessun evento"
     }
+  },
+  "addToCalendar": {
+    "addTo": "Aggiungi a {name}",
+    "addToCalendar": "Aggiungi al calendario"
   }
 }

package/src/i18n/locales/ru.json

@@ -263,5 +263,9 @@
       "eventsCount": "{n} событие | {n} события | {n} событий",
       "noEvents": "Нет событий"
     }
+  },
+  "addToCalendar": {
+    "addTo": "Добавить в {name}",
+    "addToCalendar": "Добавить в календарь"
   }
 }

package/src/styles/base-colors.css

@@ -214,6 +214,12 @@
 }
 
 /* 10% Variants (lightest) */
+.pair-primary-10 {
+    background-color: var(--bgl-primary-10);
+    color: var(--bgl-black);
+    border-color: var(--bgl-primary-10);
+}
+
 .pair-blue-10 {
     background-color: var(--bgl-blue-10);
     color: var(--bgl-black);
@@ -335,6 +341,12 @@
     border-color: var(--bgl-pink-10);
 }
 
+.pair-primary-10-alt {
+    background-color: var(--bgl-primary-10);
+    color: var(--bgl-primary);
+    border-color: var(--bgl-primary-10);
+}
+
 /* 20% Variants */
 .pair-blue-20 {
     background-color: var(--bgl-blue-20);
@@ -402,6 +414,12 @@
     border-color: var(--bgl-pink-20);
 }
 
+.pair-primary-20 {
+    background-color: var(--bgl-primary-20);
+    color: var(--bgl-black);
+    border-color: var(--bgl-primary-20);
+}
+
 /* 20% Alt Variants (colored text) */
 .pair-blue-20-alt {
     background-color: var(--bgl-blue-20);
@@ -457,6 +475,12 @@
     border-color: var(--bgl-pink-20);
 }
 
+.pair-primary-20-alt {
+    background-color: var(--bgl-primary-20);
+    color: var(--bgl-primary);
+    border-color: var(--bgl-primary-20);
+}
+
 /* 30% Variants */
 .pair-blue-30 {
     background-color: var(--bgl-blue-30);
@@ -524,6 +548,12 @@
     border-color: var(--bgl-pink-30);
 }
 
+.pair-primary-30 {
+    background-color: var(--bgl-primary-30);
+    color: var(--bgl-black);
+    border-color: var(--bgl-primary-30);
+}
+
 /* 30% Alt Variants (colored text) */
 .pair-blue-30-alt {
     background-color: var(--bgl-blue-30);
@@ -579,6 +609,12 @@
     border-color: var(--bgl-pink-30);
 }
 
+.pair-primary-30-alt {
+    background-color: var(--bgl-primary-30);
+    color: var(--bgl-primary);
+    border-color: var(--bgl-primary-30);
+}
+
 /* 40% Variants */
 .pair-blue-40 {
     background-color: var(--bgl-blue-40);
@@ -646,6 +682,12 @@
     border-color: var(--bgl-pink-40);
 }
 
+.pair-primary-40 {
+    background-color: var(--bgl-primary-40);
+    color: var(--bgl-black);
+    border-color: var(--bgl-primary-40);
+}
+
 /* 40% Alt Variants (colored text) */
 .pair-blue-40-alt {
     background-color: var(--bgl-blue-40);
@@ -701,6 +743,12 @@
     border-color: var(--bgl-pink-40);
 }
 
+.pair-primary-40-alt {
+    background-color: var(--bgl-primary-40);
+    color: var(--bgl-primary);
+    border-color: var(--bgl-primary-40);
+}
+
 /* 50% Variants */
 .pair-blue-50 {
     background-color: var(--bgl-blue-50);
@@ -768,6 +816,12 @@
     border-color: var(--bgl-pink-50);
 }
 
+.pair-primary-50 {
+    background-color: var(--bgl-primary-50);
+    color: var(--bgl-black);
+    border-color: var(--bgl-primary-50);
+}
+
 /* 50% Alt Variants (colored text) - none needed as all are already black text in 50% */
 
 /* 60% Variants */
@@ -837,6 +891,12 @@
     border-color: var(--bgl-pink-60);
 }
 
+.pair-primary-60 {
+    background-color: var(--bgl-primary-60);
+    color: var(--bgl-white);
+    border-color: var(--bgl-primary-60);
+}
+
 /* 70%-130% Variants (darker colors with white text) */
 .pair-blue-70,
 .pair-blue-80,
@@ -948,6 +1008,16 @@
     color: var(--bgl-white);
 }
 
+.pair-primary-70,
+.pair-primary-80,
+.pair-primary-90,
+.pair-primary-100,
+.pair-primary-110,
+.pair-primary-120,
+.pair-primary-130 {
+    color: var(--bgl-white);
+}
+
 /* Individual background definitions for 70%-130% */
 .pair-blue-70 {
     background-color: var(--bgl-blue-70);
@@ -1004,6 +1074,11 @@
     border-color: var(--bgl-pink-70);
 }
 
+.pair-primary-70 {
+    background-color: var(--bgl-primary-70);
+    border-color: var(--bgl-primary-70);
+}
+
 .pair-blue-80 {
     background-color: var(--bgl-blue-80);
     border-color: var(--bgl-blue-80);
@@ -1059,6 +1134,11 @@
     border-color: var(--bgl-pink-80);
 }
 
+.pair-primary-80 {
+    background-color: var(--bgl-primary-80);
+    border-color: var(--bgl-primary-80);
+}
+
 .pair-blue-90 {
     background-color: var(--bgl-blue-90);
     border-color: var(--bgl-blue-90);
@@ -1114,6 +1194,11 @@
     border-color: var(--bgl-pink-90);
 }
 
+.pair-primary-90 {
+    background-color: var(--bgl-primary-90);
+    border-color: var(--bgl-primary-90);
+}
+
 .pair-blue-100 {
     background-color: var(--bgl-blue-100);
     border-color: var(--bgl-blue-100);
@@ -1169,6 +1254,11 @@
     border-color: var(--bgl-pink-100);
 }
 
+.pair-primary-100 {
+    background-color: var(--bgl-primary-100);
+    border-color: var(--bgl-primary-100);
+}
+
 .pair-blue-110 {
     background-color: var(--bgl-blue-110);
     border-color: var(--bgl-blue-110);
@@ -1224,6 +1314,11 @@
     border-color: var(--bgl-pink-110);
 }
 
+.pair-primary-110 {
+    background-color: var(--bgl-primary-110);
+    border-color: var(--bgl-primary-110);
+}
+
 .pair-blue-120 {
     background-color: var(--bgl-blue-120);
     border-color: var(--bgl-blue-120);
@@ -1279,6 +1374,11 @@
     border-color: var(--bgl-pink-120);
 }
 
+.pair-primary-120 {
+    background-color: var(--bgl-primary-120);
+    border-color: var(--bgl-primary-120);
+}
+
 .pair-blue-130 {
     background-color: var(--bgl-blue-130);
     border-color: var(--bgl-blue-130);
@@ -1334,6 +1434,11 @@
     border-color: var(--bgl-pink-130);
 }
 
+.pair-primary-130 {
+    background-color: var(--bgl-primary-130);
+    border-color: var(--bgl-primary-130);
+}
+
 /* Alt Variants - With colored text */
 
 /* Semantic Light Variants */