@bagelink/vue 1.2.25 → 1.2.39

package/dist/style.css

@@ -310,45 +310,45 @@ display: block;
 	border-radius: var(--input-border-radius);
 }
 
-.agenda-view[data-v-54c102a2] {
+.agenda-view[data-v-520aee85] {
   display: flex;
   flex-direction: column;
   height: 100%;
   overflow: hidden;
 }
-.agenda-header[data-v-54c102a2] {
+.agenda-header[data-v-520aee85] {
   display: flex;
   padding: 0.5rem;
   border-bottom: 1px solid var(--border-color);
 }
-.time-column[data-v-54c102a2] {
+.time-column[data-v-520aee85] {
   width: 100px;
   flex-shrink: 0;
 }
-.event-column[data-v-54c102a2] {
+.event-column[data-v-520aee85] {
   flex-grow: 1;
 }
-.agenda-content[data-v-54c102a2] {
+.agenda-content[data-v-520aee85] {
   flex-grow: 1;
   overflow-y: auto;
   padding: 1rem;
 }
-.event[data-v-54c102a2] {
+.event[data-v-520aee85] {
   margin-bottom: 1rem;
   border-radius: 4px;
   overflow: hidden;
   cursor: pointer;
   transition: all 0.2s ease;
 }
-.event[data-v-54c102a2]:hover {
+.event[data-v-520aee85]:hover {
   transform: scale(1.01);
 }
-.event-content[data-v-54c102a2] {
+.event-content[data-v-520aee85] {
   display: flex;
   height: 100%;
   color: white;
 }
-.event-time[data-v-54c102a2] {
+.event-time[data-v-520aee85] {
   width: 100px;
   flex-shrink: 0;
   padding: 0.5rem;
@@ -356,107 +356,107 @@ display: block;
   align-items: center;
   font-size: 0.9rem;
 }
-.event-details[data-v-54c102a2] {
+.event-details[data-v-520aee85] {
   flex-grow: 1;
   padding: 0.5rem;
   border-left: 1px solid rgba(255, 255, 255, 0.2);
 }
-.event-title[data-v-54c102a2] {
+.event-title[data-v-520aee85] {
   font-size: 1rem;
   margin-bottom: 0.25rem;
 }
-.event-day[data-v-54c102a2] {
+.event-day[data-v-520aee85] {
   font-size: 0.8rem;
   opacity: 0.8;
 }
-.event-day.today[data-v-54c102a2] {
+.event-day.today[data-v-520aee85] {
   color: var(--bgl-primary);
   opacity: 1;
 }
 @media (max-width: 768px) {
-.agenda-header[data-v-54c102a2] {
+.agenda-header[data-v-520aee85] {
     padding: 0.5rem;
 }
-.time-column[data-v-54c102a2] {
+.time-column[data-v-520aee85] {
     width: 80px;
 }
-.event-content[data-v-54c102a2] {
+.event-content[data-v-520aee85] {
     font-size: 0.9rem;
 }
-.event-time[data-v-54c102a2] {
+.event-time[data-v-520aee85] {
     width: 80px;
     font-size: 0.8rem;
 }
-.event-title[data-v-54c102a2] {
+.event-title[data-v-520aee85] {
     font-size: 0.9rem;
 }
-.event-day[data-v-54c102a2] {
+.event-day[data-v-520aee85] {
     font-size: 0.7rem;
 }
 }
 
-.dayGrid[data-v-8aa8e541]{
+.dayGrid[data-v-bc647d79]{
 	display: grid;
 	grid-template-columns: 5rem 1fr;
 }
-.time-column[data-v-8aa8e541] {
+.time-column[data-v-bc647d79] {
   width: 80px;
   flex-shrink: 0;
 }
-.events-column[data-v-8aa8e541] {
+.events-column[data-v-bc647d79] {
   flex-grow: 1;
   position: relative;
   border-inline-start: 1px solid var(--border-color);
 }
-.date-header[data-v-8aa8e541] {
+.date-header[data-v-bc647d79] {
   padding: 0.5rem;
   text-align: center;
 }
-.day-header .events-column[data-v-8aa8e541] {
+.day-header .events-column[data-v-bc647d79] {
   border-inline-start: 1px solid transparent;
 }
-.time-slot[data-v-8aa8e541] {
+.time-slot[data-v-bc647d79] {
   height: 30px;
   display: flex;
   align-items: center;
   justify-content: center;
 }
-.time-slots[data-v-8aa8e541] {
+.time-slots[data-v-bc647d79] {
   flex-grow: 1;
   display: flex;
   overflow: auto;
   position: relative;
 }
-.event[data-v-8aa8e541] {
+.event[data-v-bc647d79] {
   left: 10px;
   right: 10px;
 }
-.event[data-v-8aa8e541]:hover {
+.event[data-v-bc647d79]:hover {
   z-index: 2;
   transform: scale(1.02);
 }
-.event-content[data-v-8aa8e541] {
+.event-content[data-v-bc647d79] {
   padding: 0.5rem;
   color: white;
   font-size: 0.9rem;
   height: 100%;
   overflow: hidden;
 }
-.event-title[data-v-8aa8e541] {
+.event-title[data-v-bc647d79] {
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
 }
-.event-time[data-v-8aa8e541] {
+.event-time[data-v-bc647d79] {
   font-size: 0.8rem;
 }
-.drag-preview[data-v-8aa8e541] {
+.drag-preview[data-v-bc647d79] {
 	background-color: rgba(var(--bgl-primary-rgb), 0.1);
 }
-.current-time-line[data-v-8aa8e541] {
+.current-time-line[data-v-bc647d79] {
   height: 2px;
 }
-.custom-popover[data-v-8aa8e541] {
+.custom-popover[data-v-bc647d79] {
   position: fixed;
   z-index: 1000;
   min-width: 250px;
@@ -464,10 +464,10 @@ display: block;
   background-color: white;
   border-radius: 4px;
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
-  animation: fadeIn-8aa8e541 0.2s ease;
+  animation: fadeIn-bc647d79 0.2s ease;
   transform-origin: center left;
 }
-@keyframes fadeIn-8aa8e541 {
+@keyframes fadeIn-bc647d79 {
 from {
     opacity: 0;
     transform: scale(0.95);
@@ -478,23 +478,23 @@ to {
 }
 }
 
-.month-view[data-v-505b680c] {
+.month-view[data-v-eeb8abde] {
   display: flex;
   flex-direction: column;
   height: 100%;
   overflow: hidden;
 }
-.month-header[data-v-505b680c] {
+.month-header[data-v-eeb8abde] {
   display: grid;
   grid-template-columns: repeat(7, 1fr);
   border-bottom: 1px solid var(--border-color);
 }
-.weekday[data-v-505b680c] {
+.weekday[data-v-eeb8abde] {
   padding: 0.5rem;
   text-align: center;
   color: var(--text-muted);
 }
-.month-grid[data-v-505b680c] {
+.month-grid[data-v-eeb8abde] {
   display: grid;
   grid-template-columns: repeat(7, 1fr);
   grid-template-rows: repeat(6, 1fr);
@@ -502,7 +502,7 @@ to {
   overflow: auto;
   border-inline-end: 1px solid var(--border-color);
 }
-.day-cell[data-v-505b680c] {
+.day-cell[data-v-eeb8abde] {
   border-inline-start: 1px solid var(--border-color);
   border-bottom: 1px solid var(--border-color);
   padding: 0.5rem;
@@ -510,24 +510,24 @@ to {
   display: flex;
   flex-direction: column;
 }
-.day-number[data-v-505b680c] {
+.day-number[data-v-eeb8abde] {
   margin-bottom: 0.5rem;
 }
-.other-month[data-v-505b680c] {
+.other-month[data-v-eeb8abde] {
   background-color: var(--bgl-gray-light);
   color: var(--bgl-gray);
 }
-.today[data-v-505b680c] {
+.today[data-v-eeb8abde] {
   background-color: var(--bgl-primary-light);
 }
-.today .day-number[data-v-505b680c] {
+.today .day-number[data-v-eeb8abde] {
   color: var(--bgl-primary);
 }
-.day-events[data-v-505b680c] {
+.day-events[data-v-eeb8abde] {
   flex-grow: 1;
   overflow-y: auto;
 }
-.event-item[data-v-505b680c] {
+.event-item[data-v-eeb8abde] {
   margin-bottom: 0.25rem;
   padding: 0.25rem;
   border-radius: 4px;
@@ -536,49 +536,35 @@ to {
   cursor: pointer;
   transition: all 0.2s ease;
 }
-.event-title[data-v-505b680c] {
+.event-title[data-v-eeb8abde] {
   font-weight: 500;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
 }
-.event-time[data-v-505b680c] {
+.event-time[data-v-eeb8abde] {
   font-size: 0.7rem;
   opacity: 0.8;
 }
-.event-dot[data-v-505b680c] {
+.event-dot[data-v-eeb8abde] {
   width: 6px;
   height: 6px;
   background-color: var(--bgl-primary);
   border-radius: 50%;
   margin: 0.25rem auto;
 }
-@media (max-width: 768px) {
-.day-cell[data-v-505b680c] {
-    min-height: 60px;
-    padding: 0.25rem;
-}
-.day-number[data-v-505b680c] {
-    font-size: 0.8rem;
-    margin-bottom: 0.25rem;
-}
-.weekday[data-v-505b680c] {
-    font-size: 0.8rem;
-    padding: 0.25rem;
-}
-}
-.custom-popover[data-v-505b680c] {
+.custom-popover[data-v-eeb8abde] {
   position: fixed;
   z-index: 1000;
   min-width: 250px;
   max-width: 350px;
   background-color: white;
-  border-radius: 4px;
+  border-radius: var(--btn-border-radius);
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
-  animation: fadeIn-505b680c 0.2s ease;
+  animation: fadeIn-eeb8abde 0.2s ease;
   transform-origin: center left;
 }
-@keyframes fadeIn-505b680c {
+@keyframes fadeIn-eeb8abde {
 from {
     opacity: 0;
     transform: scale(0.95);
@@ -588,50 +574,64 @@ to {
     transform: scale(1);
 }
 }
+@media (max-width: 768px) {
+.day-cell[data-v-eeb8abde] {
+    min-height: 60px;
+    padding: 0.25rem;
+}
+.day-number[data-v-eeb8abde] {
+    font-size: 0.8rem;
+    margin-bottom: 0.25rem;
+}
+.weekday[data-v-eeb8abde] {
+    font-size: 0.8rem;
+    padding: 0.25rem;
+}
+}
 
-.weekGrid[data-v-f774fc40]{
+.weekGrid[data-v-b897fbe8]{
 	display: grid;
 	grid-template-columns: 5rem repeat(7, 1fr);
 }
-.days-column[data-v-f774fc40] {
+.days-column[data-v-b897fbe8] {
   flex-grow: 1;
   display: flex;
 }
-.time-slot[data-v-f774fc40] {
+.time-slot[data-v-b897fbe8] {
   height: 30px;
   display: flex;
   align-items: center;
   justify-content: center;
   color: var(--text-muted);
 }
-.time-slots[data-v-f774fc40] {
+.time-slots[data-v-b897fbe8] {
   flex-grow: 1;
   display: flex;
   overflow: auto;
   position: relative;
 }
-.day-column[data-v-f774fc40] {
+.day-column[data-v-b897fbe8] {
   flex: 1;
 }
-.event[data-v-f774fc40] {
+.event[data-v-b897fbe8] {
   margin-right: 2px;
 }
-.event[data-v-f774fc40]:hover {
+.event[data-v-b897fbe8]:hover {
   z-index: 1;
 }
-.drag-preview[data-v-f774fc40] {
+.drag-preview[data-v-b897fbe8] {
   border: 2px solid var(--bgl-primary);
 }
-.current-time-line[data-v-f774fc40] {
+.current-time-line[data-v-b897fbe8] {
   height: 2px;
 }
-.custom-popover[data-v-f774fc40] {
+.custom-popover[data-v-b897fbe8] {
   min-width: 250px;
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
-  animation: fadeIn-f774fc40 0.2s ease;
+  animation: fadeIn-b897fbe8 0.2s ease;
   transform-origin: center left;
 }
-@keyframes fadeIn-f774fc40 {
+@keyframes fadeIn-b897fbe8 {
 from {
     opacity: 0;
     transform: scale(0.95);
@@ -644,7 +644,7 @@ to {
 @media screen and (max-width: 910px) {
 }
 
-.calendar[data-v-b1af1548] {
+.calendar[data-v-36ea5622] {
   display: flex;
   flex-direction: column;
   height: 100%;
@@ -1462,9 +1462,18 @@ pre code.hljs{
 	opacity: 0.4;
 }
 
-.date-picker-container[data-v-6202aa21] {
+.date-picker-container {
 	width: 100%;
 }
+.date-picker-container .date-input{
+	--input-bg: transparent;
+	--input-font-size: 12px;
+	opacity: 0.6;
+	--input-height: 20px;
+}
+.date-picker-container .date-input .bagel-input input{
+	padding: 0 !important;
+}
 
 .fileUploadWrap[data-v-50fd0597] {
 	outline: 1px solid var(--border-color);

package/dist/utils/calendar/dateUtils.d.ts

@@ -1,3 +1,4 @@
+import { DateLike } from '@vueuse/core';
 import { AvailableTimeLanguages, DateTimeAcceptedFormats } from '../../types/timeAgoT';
 interface TimeDeltaOptions {
     day?: number;
@@ -16,8 +17,8 @@ export declare function timeAgo(date: string | Date, lang?: AvailableTimeLanguag
  * @param timeZone The timezone to use (e.g., 'UTC', 'America/New_York')
  * @returns Date parts with timezone adjustment applied
  */
-export declare function handleTimezone(date: Date, timeZone: string): Date;
-export declare function getDatePartsMap(date: Date, locale: Intl.LocalesArgument, timeZone?: string): {
+export declare function handleTimezone(date: Date, locale: Intl.LocalesArgument, intFmtOpt: Intl.DateTimeFormatOptions): Date;
+export declare function getDatePartsMap(date: Date, locale: Intl.LocalesArgument, intFmtOpt?: Intl.DateTimeFormatOptions): {
     AmPm: string;
     DD: string;
     DDD: string;
@@ -32,16 +33,21 @@ export declare function getDatePartsMap(date: Date, locale: Intl.LocalesArgument
     YY: string;
     YYYY: string;
 };
-export type FormatDateFn = (date?: string | Date, format?: DateTimeAcceptedFormats, locale?: string, timeZone?: string) => string;
-export type FormatDateFnParams = Parameters<FormatDateFn>;
-export type FormatDateFnReturn = ReturnType<FormatDateFn>;
-export interface FormatDateOptions {
-    date?: FormatDateFnParams[0];
-    format?: FormatDateFnParams[1];
-    locale?: FormatDateFnParams[2];
-    timeZone?: FormatDateFnParams[3];
+export interface FormatDateOptions extends Partial<Pick<Intl.DateTimeFormatOptions, 'hour12'>> {
+    fmt?: DateTimeAcceptedFormats;
+    locale?: Intl.LocalesArgument;
+    tz?: string;
 }
-export declare const formatDate: FormatDateFn;
-export declare function fmtDate(opts: FormatDateOptions): FormatDateFnReturn;
+/**
+ * Formats a date based on the provided format string, locale, and timezone.
+ * @param date The date to format (string or Date object).
+ * @param opts Options for formatting the date.
+ * @param opts.fmt The format string (default is 'DD.MM.YY').
+ * @param opts.locale The locale to use for formatting (default is browser's locale).
+ * @param opts.tz The timezone to use for formatting (default is local timezone).
+ * @returns Formatted date string.
+ */
+export declare function formatDate(date?: DateLike, opts?: FormatDateOptions): string;
+export declare const fmtDate: typeof formatDate;
 export {};
 //# sourceMappingURL=dateUtils.d.ts.map

package/dist/utils/calendar/dateUtils.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"dateUtils.d.ts","sourceRoot":"","sources":["../../../src/utils/calendar/dateUtils.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,sBAAsB,EAAE,uBAAuB,EAAkC,MAAM,sBAAsB,CAAA;AAE3H,UAAU,gBAAgB;IACzB,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,IAAI,CAAC,EAAE,MAAM,CAAA;CACb;AAED,wBAAgB,SAAS,CAAC,IAAI,EAAE,MAAM,GAAG,IAAI,EAAE,OAAO,EAAE,gBAAgB,QAyBvE;AAqDD,wBAAgB,OAAO,CAAC,IAAI,EAAE,MAAM,GAAG,IAAI,EAAE,IAAI,GAAE,sBAA6B,UAsD/E;AASD;;;;;GAKG;AACH,wBAAgB,cAAc,CAAC,IAAI,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,GAAG,IAAI,CAgDjE;AAED,wBAAgB,eAAe,CAAC,IAAI,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,CAAC,eAAe,EAAE,QAAQ,CAAC,EAAE,MAAM;;;;;;;;;;;;;;EAoB1F;AAcD,MAAM,MAAM,YAAY,GAAG,CAC1B,IAAI,CAAC,EAAE,MAAM,GAAG,IAAI,EACpB,MAAM,CAAC,EAAE,uBAAuB,EAChC,MAAM,CAAC,EAAE,MAAM,EACf,QAAQ,CAAC,EAAE,MAAM,KACb,MAAM,CAAA;AAEX,MAAM,MAAM,kBAAkB,GAAG,UAAU,CAAC,YAAY,CAAC,CAAA;AACzD,MAAM,MAAM,kBAAkB,GAAG,UAAU,CAAC,YAAY,CAAC,CAAA;AAEzD,MAAM,WAAW,iBAAiB;IACjC,IAAI,CAAC,EAAE,kBAAkB,CAAC,CAAC,CAAC,CAAA;IAC5B,MAAM,CAAC,EAAE,kBAAkB,CAAC,CAAC,CAAC,CAAA;IAC9B,MAAM,CAAC,EAAE,kBAAkB,CAAC,CAAC,CAAC,CAAA;IAC9B,QAAQ,CAAC,EAAE,kBAAkB,CAAC,CAAC,CAAC,CAAA;CAChC;AAED,eAAO,MAAM,UAAU,EAAE,YAqExB,CAAA;AAED,wBAAgB,OAAO,CAAC,IAAI,EAAE,iBAAiB,GAAG,kBAAkB,CAGnE"}
+{"version":3,"file":"dateUtils.d.ts","sourceRoot":"","sources":["../../../src/utils/calendar/dateUtils.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAA;AAC5C,OAAO,KAAK,EAAE,sBAAsB,EAAE,uBAAuB,EAAkC,MAAM,sBAAsB,CAAA;AAE3H,UAAU,gBAAgB;IACzB,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,IAAI,CAAC,EAAE,MAAM,CAAA;CACb;AAED,wBAAgB,SAAS,CAAC,IAAI,EAAE,MAAM,GAAG,IAAI,EAAE,OAAO,EAAE,gBAAgB,QAyBvE;AAqDD,wBAAgB,OAAO,CAAC,IAAI,EAAE,MAAM,GAAG,IAAI,EAAE,IAAI,GAAE,sBAA6B,UAsD/E;AASD;;;;;GAKG;AACH,wBAAgB,cAAc,CAAC,IAAI,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,CAAC,eAAe,EAAE,SAAS,EAAE,IAAI,CAAC,qBAAqB,GAAG,IAAI,CAuCpH;AAED,wBAAgB,eAAe,CAAC,IAAI,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,CAAC,eAAe,EAAE,SAAS,CAAC,EAAE,IAAI,CAAC,qBAAqB;;;;;;;;;;;;;;EAqB/G;AAcD,MAAM,WAAW,iBAAkB,SAAQ,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,qBAAqB,EAAE,QAAQ,CAAC,CAAC;IAC7F,GAAG,CAAC,EAAE,uBAAuB,CAAA;IAC7B,MAAM,CAAC,EAAE,IAAI,CAAC,eAAe,CAAA;IAC7B,EAAE,CAAC,EAAE,MAAM,CAAA;CACX;AACD;;;;;;;;GAQG;AACH,wBAAgB,UAAU,CACzB,IAAI,CAAC,EAAE,QAAQ,EACf,IAAI,GAAE,iBAAsB,GAC1B,MAAM,CAuER;AACD,eAAO,MAAM,OAAO,mBAAa,CAAA"}

package/package.json

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

package/src/components/calendar/Index.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import type { Component } from 'vue'
 import type { CalendarEvent, CalendarView, WeekStart } from './CalendarTypes'
-import { timeDelta, Btn, formatDate, ListItem, Dropdown } from '@bagelink/vue'
+import { timeDelta, Btn, ListItem, Dropdown, fmtDate } from '@bagelink/vue'
 import { ref, computed } from 'vue'
 import AgendaView from './views/AgendaView.vue'
 import DayView from './views/DayView.vue'
@@ -9,7 +9,7 @@ import MonthView from './views/MonthView.vue'
 import WeekView from './views/WeekView.vue'
 
 interface CalendarProps {
-	events: CalendarEvent[]
+	events?: CalendarEvent[]
 	startDate?: Date
 	view?: CalendarView
 	weekStart?: WeekStart
@@ -18,7 +18,8 @@ interface CalendarProps {
 const props = withDefaults(defineProps<CalendarProps>(), {
 	startDate: () => new Date(),
 	view: 'Week',
-	weekStart: 'Sunday'
+	weekStart: 'Sunday',
+	events: () => []
 })
 
 const emit = defineEmits<{
@@ -97,8 +98,8 @@ defineExpose({ visibleDateRange })
 	<div class="calendar">
 		<div class="flex m_block m_pb-1">
 			<h3 class="txt-light my-0">
-				<b>{{ formatDate(currentDate, 'MMMM') }}</b>
-				{{ formatDate(currentDate, 'YYYY') }}
+				<b>{{ fmtDate(currentDate, { fmt: 'MMMM' }) }}</b>
+				{{ fmtDate(currentDate, { fmt: 'YYYY' }) }}
 			</h3>
 			<div class="ms-auto flex gap-025">
 				<Dropdown thin :value="currentView" iconEnd="keyboard_arrow_down" color="gray">

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

@@ -141,7 +141,7 @@ onUnmounted(() => {
 			>
 				<div class="event-content">
 					<div class="event-time">
-						{{ formatDate(event.start_time, 'HH:mm') }}
+						{{ formatDate(event.start_time, { fmt: 'HH:mm' }) }}
 					</div>
 					<div class="event-details">
 						<div class="event-title">

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

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import type { SetupContext } from 'vue'
 import type { CalendarEvent } from '../CalendarTypes'
 import type { PopoverState } from '../utils'
 import { formatDate } from '@bagelink/vue'
@@ -18,7 +19,7 @@ const emit = defineEmits<{
 	(e: 'eventCreate', event: { start_time: Date, end_time: Date }): void
 }>()
 
-const slots = useSlots()
+const slots: SetupContext['slots'] = useSlots()
 
 // Configuration constants
 const slotHeight = 60

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

@@ -1,7 +1,8 @@
 <script setup lang="ts">
+import type { SetupContext } from 'vue'
 import type { CalendarEvent } from '../CalendarTypes'
 import type { PopoverState } from '../utils'
-import { Card, formatDate } from '@bagelink/vue'
+import { Card, fmtDate } from '@bagelink/vue'
 import { ref, computed, useSlots } from 'vue'
 import {
 	openPopover as openPopoverUtil,
@@ -24,7 +25,7 @@ const emit = defineEmits<{
 	(e: 'eventClick', event: CalendarEvent): void
 }>()
 
-const slots = useSlots()
+const slots: SetupContext['slots'] = useSlots()
 
 // Responsive state
 const isMobile = computed(() => window.innerWidth < 768)
@@ -136,7 +137,7 @@ function closePopover() {
 				}"
 			>
 				<div class="day-number">
-					{{ formatDate(day.date, 'DD') }}
+					{{ fmtDate(day.date, { fmt: 'DD' }) }}
 				</div>
 				<div class="day-events">
 					<template v-if="isMobile">
@@ -154,7 +155,7 @@ function closePopover() {
 								{{ event.title }}
 							</div>
 							<div class="event-time">
-								{{ formatDate(event.start_time, 'HH:mm') }}
+								{{ fmtDate(event.start_time, { fmt: 'HH:mm' }) }}
 							</div>
 						</div>
 					</template>
@@ -271,30 +272,13 @@ function closePopover() {
   margin: 0.25rem auto;
 }
 
-@media (max-width: 768px) {
-  .day-cell {
-    min-height: 60px;
-    padding: 0.25rem;
-  }
-
-  .day-number {
-    font-size: 0.8rem;
-    margin-bottom: 0.25rem;
-  }
-
-  .weekday {
-    font-size: 0.8rem;
-    padding: 0.25rem;
-  }
-}
-
 .custom-popover {
   position: fixed;
   z-index: 1000;
   min-width: 250px;
   max-width: 350px;
   background-color: white;
-  border-radius: 4px;
+  border-radius: var(--btn-border-radius);
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
   animation: fadeIn 0.2s ease;
   transform-origin: center left;
@@ -310,4 +294,21 @@ function closePopover() {
     transform: scale(1);
   }
 }
+
+@media (max-width: 768px) {
+  .day-cell {
+    min-height: 60px;
+    padding: 0.25rem;
+  }
+
+  .day-number {
+    font-size: 0.8rem;
+    margin-bottom: 0.25rem;
+  }
+
+  .weekday {
+    font-size: 0.8rem;
+    padding: 0.25rem;
+  }
+}
 </style>