frappe-ui 1.0.0-beta.2 → 1.0.0-beta.21

package/src/components/Calendar/{calendarUtils.js → calendarUtils.ts}

@@ -1,4 +1,11 @@
-export function getCalendarDates(month, year) {
+import type {
+  CalendarColor,
+  CalendarConfig,
+  CalendarEvent,
+  CalendarTimeFormat,
+} from './types'
+
+export function getCalendarDates(month: number, year: number): Date[] {
   let daysInMonth = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31]
   let firstDay = new Date(year, month, 1)
   let leftPadding = firstDay.getDay()
@@ -12,7 +19,7 @@ export function getCalendarDates(month, year) {
 
   return allDates
 
-  function getCurrentMonthDates(date) {
+  function getCurrentMonthDates(date: Date): Date[] {
     let month = date.getMonth()
     if (month == 1 && isLeapYear(date)) {
       daysInMonth[month] = 29
@@ -23,13 +30,13 @@ export function getCalendarDates(month, year) {
     return allDates
   }
 
-  function getBeforeDates(firstDay, leftPadding) {
+  function getBeforeDates(firstDay: Date, leftPadding: number): Date[] {
     let allDates = getDatesAfter(firstDay, 0, leftPadding, -1)
     allDates = allDates.reverse()
     return allDates
   }
 
-  function getNextMonthDates(currentAndPreviousMonthDates) {
+  function getNextMonthDates(currentAndPreviousMonthDates: Date[]): Date[] {
     const numberofDaysInCalendar =
       currentAndPreviousMonthDates.length > 35 ? 42 : 35
     let lengthOfDates = currentAndPreviousMonthDates.length
@@ -41,13 +48,13 @@ export function getCalendarDates(month, year) {
   }
 
   function getDatesAfter(
-    date,
-    startIndex,
-    counter,
+    date: Date,
+    startIndex: number,
+    counter: number,
     stepper = 1,
     getNextMonthDates = false,
-  ) {
-    let allDates = []
+  ): Date[] {
+    let allDates: Date[] = []
     for (let index = startIndex; index < counter; index++) {
       let tempDate = new Date(
         date.getFullYear(),
@@ -59,43 +66,49 @@ export function getCalendarDates(month, year) {
     return allDates
   }
 
-  function isLeapYear(date) {
+  function isLeapYear(date: Date) {
     let year = date.getFullYear()
     return year % 400 === 0 || (year % 100 !== 0 && year % 4 === 0)
   }
 }
 
-export function groupBy(obj, fn) {
+export function groupBy<T>(
+  obj: T[],
+  fn: (value: T) => string | number,
+): Record<string, T[]> {
   if (typeof fn !== 'function') throw new Error(`${fn} should be a function`)
-  return Object.keys(obj).reduce((acc, key) => {
-    const group = fn(obj[key])
-    if (!acc[group]) {
-      acc[group] = []
-    }
-    acc[group].push(obj[key])
-    return acc
-  }, {})
+  return obj.reduce(
+    (acc, value) => {
+      const group = String(fn(value))
+      if (!acc[group]) {
+        acc[group] = []
+      }
+      acc[group].push(value)
+      return acc
+    },
+    {} as Record<string, T[]>,
+  )
 }
 
-export function calculateMinutes(time) {
+export function calculateMinutes(time: string): number {
   let [hours, minutes] = time.split(':')
   return parseInt(hours) * 60 + parseInt(minutes)
 }
 
-export function convertMinutesToHours(minutes) {
-  let hours = Math.floor(minutes / 60)
-  let remainingMinutes = minutes % 60
+export function convertMinutesToHours(minutes: number): string {
+  let hours: number | string = Math.floor(minutes / 60)
+  let remainingMinutes: number | string = minutes % 60
   if (hours < 10) hours = `0${hours}`
   if (remainingMinutes < 10) remainingMinutes = `0${remainingMinutes}`
   return `${hours}:${remainingMinutes}:00`
 }
 
-export function parseDate(date) {
+export function parseDate(date: Date | string): string {
   if (typeof date === 'string') {
     date = new Date(date)
   }
-  let dd = date.getDate()
-  let mm = date.getMonth() + 1
+  let dd: number | string = date.getDate()
+  let mm: number | string = date.getMonth() + 1
   let yyyy = date.getFullYear()
 
   if (dd < 10) dd = '0' + dd
@@ -105,12 +118,12 @@ export function parseDate(date) {
 }
 
 export function parseDateEventPopupFormat(
-  date,
+  date: Date,
   showDay = true,
   showMonth = true,
-  weekDay = 'short',
-) {
-  const options = {
+  weekDay: 'short' | 'long' | 'narrow' = 'short',
+): string {
+  const options: Intl.DateTimeFormatOptions = {
     day: 'numeric',
   }
   if (showMonth) {
@@ -123,36 +136,38 @@ export function parseDateEventPopupFormat(
   return date.toLocaleDateString('en-US', options)
 }
 
-export function parseDateWithComma(date, showDay = false) {
+export function parseDateWithComma(date: Date, showDay = false): string {
   return parseDateEventPopupFormat(date, showDay).split(' ').join(', ')
 }
 
-export function parseDateWithDay(date, fullDay = false) {
+export function parseDateWithDay(date: Date, fullDay = false): string {
   return fullDay
     ? daysListFull[date.getDay()] + ', ' + date.getDate()
     : daysList[date.getDay()] + ' ' + date.getDate()
 }
 
-export function calculateDiff(from, to) {
+export function calculateDiff(from: string, to: string): number {
   let fromMinutes = calculateMinutes(from)
   let toMinutes = calculateMinutes(to)
   return toMinutes - fromMinutes
 }
 
-export function handleSeconds(time) {
+export function handleSeconds(time: string): string {
   return time.split(':').slice(0, 2).join(':') + ':00'
 }
 
-export function findOverlappingEventsCount(events) {
+export function findOverlappingEventsCount(
+  events: CalendarEvent[],
+): CalendarEvent[] {
   // Sort events based on start time
-  events = events.sort((a, b) => a.startTime - b.startTime)
+  events = events.sort((a, b) => (a.startTime || 0) - (b.startTime || 0))
 
   let hallNumber = 0
-  const result = []
+  const result: CalendarEvent[][] = []
 
   for (const event of events) {
     const availableHall = result.find(
-      (hall) => hall[hall.length - 1].endTime <= event.startTime,
+      (hall) => (hall[hall.length - 1].endTime || 0) <= (event.startTime || 0),
     )
 
     if (availableHall) {
@@ -255,7 +270,11 @@ export const twentyFourHoursFormat = [
   '23:00',
 ]
 
-export function formattedDuration(fromTime, toTime, timeFormat) {
+export function formattedDuration(
+  fromTime: string,
+  toTime: string,
+  timeFormat: CalendarTimeFormat,
+): string {
   fromTime = formatTime(fromTime, timeFormat)
   toTime = formatTime(toTime, timeFormat)
 
@@ -266,10 +285,10 @@ export function formattedDuration(fromTime, toTime, timeFormat) {
   return fromTime + ' - ' + toTime
 }
 
-export function formatTime(time, format) {
+export function formatTime(time: string, format: CalendarTimeFormat): string {
   if (format === '12h') {
-    let [hours, minutes] = time.split(':')
-    hours = parseInt(hours)
+    let [hoursValue, minutes] = time.split(':')
+    let hours: number | string = parseInt(hoursValue)
     const ampm = hours >= 12 ? 'pm' : 'am'
     hours = hours % 12
     hours = hours ? hours : 12 // the hour '0' should be '12'
@@ -283,7 +302,7 @@ export function formatTime(time, format) {
   return time
 }
 
-export const colorMap = {
+export const colorMap: Record<string, CalendarColor> = {
   amber: {
     color: '#DB7706',
     border: '#DB7706',
@@ -363,7 +382,7 @@ export const colorMap = {
   },
 }
 
-export const colorMapDark = {
+export const colorMapDark: Record<string, CalendarColor> = {
   amber: {
     color: '#DB7706',
     border: '#C57411',
@@ -462,7 +481,9 @@ const _weekdayNameToIndex = {
   saturday: 6,
 }
 
-export function getWeekendDays(config) {
+export function getWeekendDays(
+  config?: Partial<CalendarConfig> & { weekendDays?: Array<number | string> },
+): number[] {
   // Support both weekendDays (preferred) and weekends (legacy) keys
   const raw = config?.weekendDays || config?.weekends
   if (!raw || !Array.isArray(raw) || raw.length === 0) return [0]
@@ -471,28 +492,31 @@ export function getWeekendDays(config) {
       if (typeof d === 'number') return d
       if (typeof d === 'string') {
         const key = d.trim().toLowerCase()
-        if (_weekdayNameToIndex.hasOwnProperty(key))
-          return _weekdayNameToIndex[key]
+        if (Object.prototype.hasOwnProperty.call(_weekdayNameToIndex, key))
+          return _weekdayNameToIndex[key as keyof typeof _weekdayNameToIndex]
       }
       return null
     })
-    .filter((v) => v !== null && v >= 0 && v <= 6)
+    .filter((v): v is number => v !== null && v >= 0 && v <= 6)
 }
 
-export function isWeekend(date, config) {
+export function isWeekend(
+  date: Date | string,
+  config?: CalendarConfig,
+): boolean {
   const day = new Date(date).getDay()
   const weekendDays = getWeekendDays(config)
   return weekendDays.includes(day)
 }
 
 // Format single month & year (e.g., "August, 2025")
-export function formatMonthYear(month, year) {
+export function formatMonthYear(month: number, year: number): string {
   return `${monthList[month]} ${year}`
 }
 
 // Extract ordered unique {month, year} pairs from a week of dates
-export function getWeekMonthParts(weekDates) {
-  const parts = []
+export function getWeekMonthParts(weekDates?: Date[]) {
+  const parts: Array<{ key: string; month: number; year: number }> = []
   for (const d of weekDates || []) {
     const dt = new Date(d)
     const m = dt.getMonth()

package/src/components/Calendar/composables/{useCalendarData.js → useCalendarData.ts}

@@ -4,13 +4,21 @@ import {
   calculateMinutes,
   findOverlappingEventsCount,
 } from '../calendarUtils'
+import type {
+  CalendarEvent,
+  CalendarMode,
+  GroupedCalendarEvents,
+} from '../types'
 
-export const activeEvent = ref('')
+export const activeEvent = ref<string | number>('')
 
-export default function useCalendarData(events, view = '') {
+export default function useCalendarData(
+  events: CalendarEvent[] = [],
+  view: CalendarMode | '' = '',
+) {
   const timedEvents = computed(() => {
-    let groupByDate = groupBy(events, (row) => row.date)
-    let sortedArray = {}
+    let groupByDate = groupBy(events, (row) => row.date || '')
+    let sortedArray: GroupedCalendarEvents = {}
     if (view === 'Month') {
       for (const [key, value] of Object.entries(groupByDate)) {
         sortedArray[key] = sortMonthlyEvents(value)
@@ -19,10 +27,12 @@ export default function useCalendarData(events, view = '') {
       for (let [key, value] of Object.entries(groupByDate)) {
         value = value.filter((event) => !event.isFullDay)
         value.forEach((task) => {
-          task.startTime = calculateMinutes(task.fromTime)
-          task.endTime = calculateMinutes(task.toTime)
+          task.startTime = calculateMinutes(task.fromTime || '00:00')
+          task.endTime = calculateMinutes(task.toTime || '00:00')
         })
-        let sortedEvents = value.sort((a, b) => a.startTime - b.startTime)
+        let sortedEvents = value.sort(
+          (a, b) => (a.startTime || 0) - (b.startTime || 0),
+        )
         sortedArray[key] = findOverlappingEventsCount(sortedEvents)
       }
     }
@@ -31,23 +41,25 @@ export default function useCalendarData(events, view = '') {
 
   const fullDayEvents = computed(() => {
     let fullDay = events.filter((event) => event.isFullDay)
-    let dateGroup = groupBy(fullDay, (row) => row.date)
+    let dateGroup = groupBy(fullDay, (row) => row.date || '')
     return dateGroup
   })
 
   return { timedEvents, fullDayEvents }
 }
 
-function sortMonthlyEvents(events) {
+function sortMonthlyEvents(events: CalendarEvent[]): CalendarEvent[] {
   let fullDayEvents = events.filter((event) => event.isFullDay)
   let timedEvents = events
     .filter((event) => !event.isFullDay)
     .sort((a, b) =>
       a.fromTime !== b.fromTime
-        ? calculateMinutes(a.fromTime) > calculateMinutes(b.fromTime)
+        ? calculateMinutes(a.fromTime || '00:00') >
+          calculateMinutes(b.fromTime || '00:00')
           ? 1
           : -1
-        : calculateMinutes(a.toTime) > calculateMinutes(b.toTime)
+        : calculateMinutes(a.toTime || '00:00') >
+            calculateMinutes(b.toTime || '00:00')
           ? 1
           : -1,
     )

package/src/components/Calendar/composables/{useEventModal.js → useEventModal.ts}

@@ -4,10 +4,11 @@ import {
   convertMinutesToHours,
   calculateMinutes,
 } from '../calendarUtils'
+import type { CalendarEvent, CalendarMode } from '../types'
 
 export default function useEventModal() {
   const showEventModal = ref(false)
-  const newEvent = reactive({
+  const newEvent = reactive<CalendarEvent>({
     date: '',
     participant: '',
     fromDate: '',
@@ -19,21 +20,19 @@ export default function useEventModal() {
     isFullDay: false,
   })
   function openNewEventModal(
-    e,
-    view,
-    date,
-    isEditMode,
+    e: MouseEvent,
+    view: CalendarMode,
+    date: Date | string,
+    isEditMode: boolean,
     fromTime = '',
     isFullDay = false,
   ) {
     if (!isEditMode) return
-    date =
-      view === 'Week'
-        ? e.target.parentNode.parentNode.getAttribute('data-date-attr')
-        : date
-    newEvent.date = parseDate(new Date(date))
-    newEvent.fromDate = date
-    newEvent.toDate = date
+    date = view === 'Week' ? getDateFromWeeklyCell(e) || date : date
+    const formattedDate = parseDate(new Date(date))
+    newEvent.date = formattedDate
+    newEvent.fromDate = formattedDate
+    newEvent.toDate = formattedDate
     newEvent.isFullDay = isFullDay
 
     if (view === 'Month') {
@@ -53,3 +52,8 @@ export default function useEventModal() {
 
   return { showEventModal, newEvent, openNewEventModal }
 }
+
+function getDateFromWeeklyCell(e: MouseEvent) {
+  const target = e.target as HTMLElement | null
+  return target?.parentElement?.parentElement?.getAttribute('data-date-attr')
+}

package/src/components/Calendar/index.ts

@@ -1,3 +1,13 @@
 export { default as Calendar } from './Calendar.vue'
-export { colorMap as CalendarColorMap } from './calendarUtils.js'
-export { activeEvent as CalendarActiveEvent } from './composables/useCalendarData.js'
+export { colorMap as CalendarColorMap } from './calendarUtils'
+export { activeEvent as CalendarActiveEvent } from './composables/useCalendarData'
+export type {
+  CalendarActions,
+  CalendarCellClickData,
+  CalendarConfig,
+  CalendarEvent,
+  CalendarMode,
+  CalendarPublicProps,
+  CalendarTimeFormat,
+  GroupedCalendarEvents,
+} from './types'

package/src/components/Calendar/stories/CustomHeader.vue

@@ -111,7 +111,7 @@ const events = ref([
               <template #target="{ togglePopover }">
                 <Button
                   variant="ghost"
-                  class="text-lg font-medium text-ink-gray-7"
+                  class="text-lg-medium text-ink-gray-7"
                   :label="headerProps.currentMonthYear"
                   iconRight="lucide-chevron-down"
                   @click="togglePopover"

package/src/components/Calendar/types.ts

@@ -0,0 +1,106 @@
+import type { Component, InjectionKey, Ref } from 'vue'
+
+export type CalendarMode = 'Day' | 'Week' | 'Month'
+export type CalendarTimeFormat = '12h' | '24h'
+
+export interface CalendarColor {
+  color: string
+  border: string
+  borderActive: string
+  text: string
+  textActive?: string
+  subtext: string
+  subtextActive: string
+  bg: string
+  bgHover: string
+  bgActive: string
+}
+
+export interface CalendarEvent {
+  id?: string | number
+  name?: string | number
+  title?: string
+  date?: string
+  fromDate?: string
+  toDate?: string
+  fromTime?: string
+  toTime?: string
+  fromDateTime?: string
+  toDateTime?: string
+  participant?: string
+  venue?: string
+  color?: string
+  type?: string
+  isFullDay?: boolean
+  startTime?: number
+  endTime?: number
+  hallNumber?: number
+  idx?: number
+  [key: string]: unknown
+}
+
+export interface CalendarConfig {
+  scrollToHour: number
+  disableModes: CalendarMode[]
+  defaultMode: CalendarMode
+  isEditMode: boolean
+  eventIcons: Record<string, Component>
+  hourHeight: number
+  enableShortcuts: boolean
+  showIcon: boolean
+  timeFormat: CalendarTimeFormat
+  weekends: string[]
+  noBorder?: boolean
+}
+
+export interface CalendarCellClickData {
+  e: MouseEvent
+  view: CalendarMode
+  date: Date | string
+  time: string
+  isFullDay: boolean
+}
+
+export interface CalendarPublicProps {
+  events: CalendarEvent[]
+  config?: Partial<CalendarConfig>
+  onClick?: (data: { e: MouseEvent; calendarEvent: CalendarEvent }) => void
+  onDblClick?: (data: {
+    e: MouseEvent | null
+    calendarEvent: CalendarEvent
+  }) => void
+  onCellClick?: (data: CalendarCellClickData) => void
+}
+
+export interface CalendarActions {
+  createNewEvent: (event: CalendarEvent) => void
+  updateEventState: (event: CalendarEvent) => void
+  deleteEvent: (eventID: CalendarEvent['id']) => void
+  handleCellClick: (
+    e: MouseEvent,
+    date: Date | string,
+    time?: string,
+    isFullDay?: boolean,
+  ) => void
+  updateActiveView: (
+    value: CalendarMode,
+    date?: Date,
+    isPreviousMonth?: boolean,
+    isNextMonth?: boolean,
+  ) => void
+  props: CalendarPublicProps
+}
+
+export type GroupedCalendarEvents = Record<string, CalendarEvent[]>
+
+export const ACTIVE_VIEW_KEY = Symbol(
+  'frappe-ui.calendar.active-view',
+) as InjectionKey<Ref<CalendarMode>>
+
+export const CALENDAR_CONFIG_KEY = Symbol(
+  'frappe-ui.calendar.config',
+) as InjectionKey<CalendarConfig>
+
+export const CALENDAR_ACTIONS_KEY = Symbol(
+  'frappe-ui.calendar.actions',
+) as InjectionKey<CalendarActions>

package/src/components/Calendar/{useEventBase.js → useEventBase.ts}

@@ -1,23 +1,24 @@
 import { ref, inject, computed, watch, reactive } from 'vue'
-import { activeEvent } from './composables/useCalendarData.js'
+import { activeEvent } from './composables/useCalendarData'
 import { colorMap, colorMapDark } from './calendarUtils'
-
-export const eventProps = {
-  event: {
-    type: Object,
-    required: true,
-  },
-  date: {
-    type: Date,
-    required: true,
-  },
-}
+import {
+  CALENDAR_ACTIONS_KEY,
+  CALENDAR_CONFIG_KEY,
+  type CalendarColor,
+  type CalendarEvent,
+} from './types'
 
 export const isAnyPopoverOpen = ref(false)
 
-export function useEventBase(props) {
-  const config = inject('config')
-  const calendarActions = inject('calendarActions')
+export function useEventBase(props: { event: CalendarEvent; date: Date }) {
+  const config = inject(CALENDAR_CONFIG_KEY)!
+  const calendarActions = inject(CALENDAR_ACTIONS_KEY)!
+
+  if (!config || !calendarActions) {
+    throw new Error(
+      'Calendar event components must be rendered inside Calendar.',
+    )
+  }
 
   const calendarEvent = ref(props.event)
   const updatedEvent = reactive({ ...props.event })
@@ -41,16 +42,19 @@ export function useEventBase(props) {
   const getTheme = () => {
     const theme = document.documentElement.getAttribute('data-theme')
     if (theme) return theme
-    return document.documentElement.classList.contains('htw-dark') ? 'dark' : 'light'
+    return document.documentElement.classList.contains('htw-dark')
+      ? 'dark'
+      : 'light'
   }
 
-  function color(colorValue) {
+  function color(colorValue?: string): CalendarColor {
     const map = getTheme() === 'dark' ? colorMapDark : colorMap
-    if (!colorValue?.startsWith('#')) return map[colorValue] || map['green']
+    if (!colorValue?.startsWith('#'))
+      return map[colorValue || 'green'] || map['green']!
     for (const value of Object.values(map)) {
       if (value.color === colorValue) return value
     }
-    return map['green']
+    return map['green']!
   }
 
   const eventBgStyle = computed(() => {
@@ -82,7 +86,7 @@ export function useEventBase(props) {
     document.removeEventListener('keydown', handleDeleteShortcut)
   }
 
-  function handleDeleteShortcut(e) {
+  function handleDeleteShortcut(e: KeyboardEvent) {
     if (e.key === 'Delete' || e.key === 'Backspace') {
       e.preventDefault()
       handleEventDelete()
@@ -92,9 +96,13 @@ export function useEventBase(props) {
   // ── Click / edit / delete ────────────────────────────────────────────────
 
   const preventClick = ref(false)
-  let clickTimer = null
+  let clickTimer: ReturnType<typeof setTimeout> | null = null
 
-  function handleEventClick(e, togglePopover, isPopoverOpen) {
+  function handleEventClick(
+    e: MouseEvent,
+    togglePopover: () => void,
+    isPopoverOpen?: boolean,
+  ) {
     isAnyPopoverOpen.value = false
     if (preventClick.value) {
       preventClick.value = false
@@ -103,7 +111,10 @@ export function useEventBase(props) {
     if (e.detail === 1) {
       clickTimer = setTimeout(() => {
         if (calendarActions.props.onClick)
-          calendarActions.props.onClick({ e, calendarEvent: calendarEvent.value })
+          calendarActions.props.onClick({
+            e,
+            calendarEvent: calendarEvent.value,
+          })
         else {
           togglePopover()
           isAnyPopoverOpen.value = !isPopoverOpen
@@ -114,11 +125,14 @@ export function useEventBase(props) {
 
   const showEventModal = ref(false)
 
-  function handleEventEdit(e = null) {
+  function handleEventEdit(e: MouseEvent | null = null) {
     e && (e.cancelBubble = true)
-    clearTimeout(clickTimer)
+    if (clickTimer) clearTimeout(clickTimer)
     if (calendarActions.props.onDblClick) {
-      calendarActions.props.onDblClick({ e, calendarEvent: calendarEvent.value })
+      calendarActions.props.onDblClick({
+        e,
+        calendarEvent: calendarEvent.value,
+      })
       return
     }
     if (!config.isEditMode) return

package/src/components/Card.vue

@@ -1,11 +1,11 @@
 <template>
-  <div class="flex flex-col rounded-lg border bg-white px-6 py-5 shadow">
+  <div class="flex flex-col rounded-lg border bg-white px-6 py-5">
     <div class="flex items-baseline justify-between">
       <div class="flex items-baseline space-x-2">
         <div class="flex items-center space-x-2" v-if="$slots['actions-left']">
           <slot name="actions-left"></slot>
         </div>
-        <h2 class="text-xl font-semibold">{{ title }}</h2>
+        <h2 class="text-2xl-semibold">{{ title }}</h2>
       </div>
       <div class="flex items-center space-x-2" v-if="$slots['actions']">
         <slot name="actions"></slot>

package/src/components/Charts/ECharts.vue

@@ -59,7 +59,7 @@ watch(
   <div ref="chartDiv" v-show="!error" dir="ltr" :class="chartClass"></div>
   <div
     v-show="error"
-    class="flex h-full w-full items-center justify-center text-center text-ink-red-3"
+    class="flex h-full w-full items-center justify-center text-center text-ink-red-6"
   >
     Error: {{ error }}
   </div>