frappe-ui 0.1.192 → 0.1.193

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "frappe-ui",
-  "version": "0.1.192",
+  "version": "0.1.193",
   "description": "A set of components and utilities for rapid UI development",
   "main": "./src/index.ts",
   "type": "module",
@@ -34,6 +34,7 @@
     "@headlessui/vue": "^1.7.14",
     "@popperjs/core": "^2.11.2",
     "@tailwindcss/forms": "^0.5.3",
+    "@tailwindcss/line-clamp": "^0.4.4",
     "@tailwindcss/typography": "^0.5.16",
     "@tiptap/core": "^2.26.1",
     "@tiptap/extension-code-block": "^2.26.1",

package/src/components/Calendar/Calendar.story.md

@@ -59,7 +59,6 @@ The object for this kind of event looks like:
     	defaultMode: 'Month',
     	isEditMode: false,
     	eventIcons: {},
-    	redundantCellHeight: 50,
     	hourHeight: 50,
     	enableShortcuts: true,
       showIcon: true,
@@ -90,7 +89,6 @@ e.g.
     	'Meeting': <MeetingIcon />,
     }
 
-- `redundantCellHeight`: The height of the cell to display full day events. This value is in Pixel, by default the value is `50px`.
 - `hourHeight`: The height of each cell below the full day events cell. This value is in pixel, by default the value is `50px`.
 - `enableShortcuts`: Boolean value which determines whether shortcuts will be enabled or not. By default the value is true i.e. shortcuts will be enabled, can be disabled by setting it to false, currently the calendar supports shortcuts like
 
@@ -141,7 +139,7 @@ If you wish to handle clicks on your own, the Calendar provides 3 functions to h
 		:events="events"
 		:onClick="(event) =>  console.log('onClick', event)"
 		:onDblClick="(event) =>  console.log('onDblClick', event)"
-		:onCellDblClick="(data) =>  console.log('onCellDblClick', data)"
+		:onCellClick="(data) =>  console.log('onCellClick', data)"
 	/>
 
 `Note: while using custom click events, the create, update & delete prop functions will not be triggered.`
@@ -166,7 +164,7 @@ If you wish to handle clicks on your own, the Calendar provides 3 functions to h
   - e: this key represent the MouseEvent.
   - calendarEvent: This key is an object, the object of calendarEvent is displayed above
 
-- `onCellDblClick`: The function is triggered when a cell is double clicked. In the callback function you receive an argument which is an object and it looks like this:
+- `onCellClick`: The function is triggered when a cell is clicked. In the callback function you receive an argument which is an object and it looks like this:
 
       {
       	e:MouseEvent,
@@ -176,7 +174,7 @@ If you wish to handle clicks on your own, the Calendar provides 3 functions to h
       }
 
   - e: this key represent the MouseEvent.
-  - date: Date Object, which has the date of the cell which was double clicked.
+  - date: Date Object, which has the date of the cell which was clicked.
   - time: String, ranges from "00:00" to "23:00", where the cell was clicked in the grid that time value will be displayed over here. (Note, this will be empty in Month view)
   - view: String, shows the view in which the event was triggered.
 

package/src/components/Calendar/Calendar.story.vue

@@ -54,7 +54,7 @@
           :events="events"
           :onClick="(event) => logEvent('onClick', event)"
           :onDblClick="(event) => logEvent('onDblClick', event)"
-          :onCellDblClick="(data) => logEvent('onCellDblClick', data)"
+          :onCellClick="(data) => logEvent('onCellClick', data)"
         >
         </Calendar>
       </div>
@@ -72,7 +72,6 @@ const config = {
   isEditMode: true,
   eventIcons: {},
   allowCustomClickEvents: true,
-  redundantCellHeight: 100,
   enableShortcuts: false,
 }
 
@@ -92,8 +91,10 @@ const events = ref([
     participant: 'Ryan Mathew',
     id: 'EDU-CSH-2024-00091',
     venue: 'CNF-ROOM-2024-00001',
-    fromDate: currentMonthYear + '-02 16:30:00', //can be a date object
-    toDate: currentMonthYear + '-02 17:30:00',
+    fromDate: currentMonthYear + '-02', //can be a date object
+    toDate: currentMonthYear + '-02',
+    fromTime: '16:30',
+    toTime: '17:30',
     color: 'violet',
   },
   {
@@ -101,8 +102,10 @@ const events = ref([
     participant: 'Ryan Mathew',
     id: 'EDU-CSH-2024-00092',
     venue: 'CNF-ROOM-2024-00002',
-    fromDate: currentMonthYear + '-04 13:30:00',
-    toDate: currentMonthYear + '-04 17:30:00',
+    fromDate: currentMonthYear + '-04',
+    toDate: currentMonthYear + '-04',
+    fromTime: '13:30',
+    toTime: '17:30',
     color: 'green',
   },
   {
@@ -110,8 +113,10 @@ const events = ref([
     participant: 'Sheldon',
     id: 'EDU-CSH-2024-00093',
     venue: 'CNF-ROOM-2024-00001',
-    fromDate: currentMonthYear + '-16 10:30:00',
-    toDate: currentMonthYear + '-16 11:30:00',
+    fromDate: currentMonthYear + '-16',
+    toDate: currentMonthYear + '-16',
+    fromTime: '10:30',
+    toTime: '11:30',
     color: 'blue',
   },
   {
@@ -119,8 +124,10 @@ const events = ref([
     participant: 'Ryan Mathew',
     id: 'EDU-CSH-2024-00094',
     venue: 'CNF-ROOM-2024-00001',
-    fromDate: currentMonthYear + '-21 16:30:00',
-    toDate: currentMonthYear + '-21 17:30:00',
+    fromDate: currentMonthYear + '-21',
+    toDate: currentMonthYear + '-21',
+    fromTime: '16:30',
+    toTime: '17:30',
     color: 'red',
   },
   {
@@ -128,8 +135,10 @@ const events = ref([
     participant: 'John',
     id: '#htrht41',
     venue: 'Google Meet',
-    fromDate: currentMonthYear + '-11 00:00:00',
-    toDate: currentMonthYear + '-11 23:59:59',
+    fromDate: currentMonthYear + '-11',
+    toDate: currentMonthYear + '-11',
+    fromTime: '00:00',
+    toTime: '02:00',
     color: 'amber',
     isFullDay: true,
   },
@@ -138,8 +147,10 @@ const events = ref([
     participant: 'Sheldon',
     id: '#htrht42',
     venue: 'Google Meet',
-    fromDate: currentMonthYear + '-07 00:00:00',
-    toDate: currentMonthYear + '-07 23:59:59',
+    fromDate: currentMonthYear + '-07',
+    toDate: currentMonthYear + '-07',
+    fromTime: '00:00',
+    toTime: '02:00',
     color: 'amber',
     isFullDay: true,
   },

package/src/components/Calendar/Calendar.vue

@@ -4,36 +4,36 @@
       name="header"
       v-bind="{
         currentMonthYear,
+        currentYear,
+        currentMonth,
         enabledModes,
         activeView,
         decrement,
         increment,
         updateActiveView,
+        setCalendarDate,
+        onMonthYearChange,
+        selectedMonthDate,
       }"
     >
       <div class="mb-2 flex justify-between">
         <!-- left side  -->
         <!-- Year, Month -->
-        <span class="text-lg font-medium text-ink-gray-8">
-          {{ currentMonthYear }}
-        </span>
+        <div class="flex items-center">
+          <DateMonthYearPicker
+            :modelValue="selectedMonthDate"
+            :formatter="() => currentMonthYear"
+            @update:modelValue="(val) => onMonthYearChange(val)"
+          />
+        </div>
         <!-- right side -->
         <!-- actions buttons for calendar -->
         <div class="flex gap-x-1">
           <!-- Increment and Decrement Button-->
 
-          <Button
-            @click="decrement()"
-            variant="ghost"
-            class="h-4 w-4"
-            icon="chevron-left"
-          />
-          <Button
-            @click="increment()"
-            variant="ghost"
-            class="h-4 w-4"
-            icon="chevron-right"
-          />
+          <Button @click="decrement" variant="ghost" icon="chevron-left" />
+          <Button label="Today" @click="setCalendarDate()" variant="ghost" />
+          <Button @click="increment" variant="ghost" icon="chevron-right" />
 
           <!--  View change button, default is months or can be set via props!  -->
           <TabButtons
@@ -83,15 +83,29 @@
   </div>
 </template>
 <script setup>
-import { computed, onMounted, onUnmounted, provide, ref } from 'vue'
+import {
+  computed,
+  onMounted,
+  onUnmounted,
+  provide,
+  ref,
+  watch,
+  nextTick,
+} from 'vue'
 import { Button } from '../Button'
 import { TabButtons } from '../TabButtons'
 import {
   getCalendarDates,
   monthList,
-  parseDate,
+  handleSeconds,
+  formatMonthYear,
+  getWeekMonthParts,
 } from './calendarUtils'
-import { dayjs } from "../../utils/dayjs"
+import { dayjs } from '../../utils/dayjs'
+import DayIcon from './Icon/DayIcon.vue'
+import WeekIcon from './Icon/WeekIcon.vue'
+import MonthIcon from './Icon/MonthIcon.vue'
+import DateMonthYearPicker from './DateMonthYearPicker.vue'
 import CalendarMonthly from './CalendarMonthly.vue'
 import CalendarWeekly from './CalendarWeekly.vue'
 import CalendarDaily from './CalendarDaily.vue'
@@ -115,7 +129,7 @@ const props = defineProps({
     type: Function,
     required: false,
   },
-  onCellDblClick: {
+  onCellClick: {
     type: Function,
     required: false,
   },
@@ -129,19 +143,50 @@ const defaultConfig = {
   defaultMode: 'Month',
   isEditMode: false,
   eventIcons: {},
-  redundantCellHeight: 50,
   hourHeight: 50,
   enableShortcuts: true,
   showIcon: true,
   timeFormat: '12h',
+  weekends: ['sunday'],
 }
 
 const overrideConfig = { ...defaultConfig, ...props.config }
 let activeView = ref(overrideConfig.defaultMode)
 
-function updateActiveView(value) {
-  console.log(value)
+function updateActiveView(value, d, isPreviousMonth, isNextMonth) {
   activeView.value = value
+  if (value == 'Day' && d) {
+    date.value = findIndexOfDate(d)
+    isPreviousMonth && decrementMonth()
+    isNextMonth && incrementMonth()
+  }
+}
+
+const selectedMonthDate = ref(dayjs().format('YYYY-MM-DD'))
+
+function onMonthYearChange(val = '') {
+  const d = dayjs(val)
+  selectedMonthDate.value = d.format('YYYY-MM-DD')
+
+  setCalendarDate(selectedMonthDate.value)
+}
+
+function syncSelectedMonth(year, month) {
+  // Keep same day if possible; otherwise clamp to last day
+  if (typeof year === 'number' && typeof month === 'number') {
+    const currentDay = dayjs(selectedMonthDate.value).date()
+
+    let tentative = dayjs(
+      `${year}-${String(month + 1).padStart(2, '0')}-01`,
+    ).date(currentDay)
+
+    if (tentative.month() !== month) {
+      // overflowed into next month, use last day of target month
+      tentative = tentative.startOf('month').month(month).endOf('month')
+    }
+
+    selectedMonthDate.value = tentative.format('YYYY-MM-DD')
+  }
 }
 
 // shortcuts for changing the active view and navigating through the calendar
@@ -176,46 +221,67 @@ provide('config', overrideConfig)
 const parseEvents = computed(() => {
   return (
     props.events?.map((event) => {
-      const { fromDate, toDate, ...rest } = event
-      const date = parseDate(fromDate)
-      const from_time = dayjs(fromDate).format("HH:mm:ss")
-      const to_time = dayjs(toDate).format("HH:mm:ss")
-      if (event.isFullDay) {
-        return { ...rest, date }
+      const { fromDate, toDate, fromTime, toTime, ...rest } = event
+      const date = fromDate
+      const fromDateTime = fromDate + ' ' + fromTime
+      const toDateTime = toDate + ' ' + toTime
+
+      return {
+        ...rest,
+        date,
+        fromDateTime,
+        toDateTime,
+        fromDate,
+        toDate,
+        fromTime,
+        toTime,
       }
-      return { ...rest, date, from_time, to_time }
     }) || []
   )
 })
 const events = ref(parseEvents.value)
 
+watch(
+  () => props.events,
+  () => reloadEvents(),
+  { deep: true },
+)
+
 function reloadEvents() {
   events.value = parseEvents.value
 }
 
+events.value.forEach((event) => {
+  if (!event.fromTime || !event.toTime) return
+
+  event.fromTime = handleSeconds(event.fromTime)
+  event.toTime = handleSeconds(event.toTime)
+})
+
 const { showEventModal, newEvent, openNewEventModal } = useEventModal()
 
 provide('calendarActions', {
   createNewEvent,
   updateEventState,
   deleteEvent,
-  handleCellDblClick,
+  handleCellClick,
+  updateActiveView,
   props,
 })
 
 // CRUD actions on an event
 function createNewEvent(event) {
   events.value.push(event)
-  event.fromDate = event.date + ' ' + event.from_time
-  event.toDate = event.date + ' ' + event.to_time
+  event.fromDateTime = event.fromDate + ' ' + event.fromTime
+  event.toDateTime = event.toDate + ' ' + event.toTime
   emit('create', event)
 }
 
 function updateEventState(event) {
   const eventID = event.id
   let eventIndex = events.value.findIndex((e) => e.id === eventID)
-  event.fromDate = event.date + ' ' + event.from_time
-  event.toDate = event.date + ' ' + event.to_time
+  event.fromDateTime = event.fromDate + ' ' + event.fromTime
+  event.toDateTime = event.toDate + ' ' + event.toTime
   events.value[eventIndex] = event
   emit('update', event)
 }
@@ -228,21 +294,22 @@ function deleteEvent(eventID) {
 }
 
 function openModal(data) {
-  const { e, view, date, time } = data
+  const { e, view, date, time, isFullDay } = data
   const config = overrideConfig.isEditMode
-  openNewEventModal(e, view, date, config, time)
+  openNewEventModal(e, view, date, config, time, isFullDay)
 }
 
-function handleCellDblClick(e, date, time = '') {
+function handleCellClick(e, date, time = '', isFullDay = false) {
   const data = {
     e,
     view: activeView.value,
     date,
     time,
+    isFullDay,
   }
 
-  if (props.onCellDblClick) {
-    props.onCellDblClick(data)
+  if (props.onCellClick) {
+    props.onCellClick(data)
     return
   }
   openModal(data)
@@ -250,12 +317,12 @@ function handleCellDblClick(e, date, time = '') {
 
 // Calendar View Options
 const actionOptions = [
-  { label: 'Day', variant: 'solid' },
-  { label: 'Week', variant: 'solid' },
-  { label: 'Month', variant: 'solid' },
+  { label: 'Day', value: 'Day', iconLeft: DayIcon },
+  { label: 'Week', value: 'Week', iconLeft: WeekIcon },
+  { label: 'Month', value: 'Month', iconLeft: MonthIcon },
 ]
 let enabledModes = actionOptions.filter(
-  (mode) => !overrideConfig.disableModes.includes(mode.label),
+  (mode) => !overrideConfig.disableModes.includes(mode.value),
 )
 
 let currentYear = ref(new Date().getFullYear())
@@ -302,6 +369,16 @@ function updateCurrentDate(d) {
   week.value = findCurrentWeek(d)
 }
 
+function increment() {
+  incrementClickEvents[activeView.value]()
+  syncSelectedMonth(currentYear.value, currentMonth.value)
+}
+
+function decrement() {
+  decrementClickEvents[activeView.value]()
+  syncSelectedMonth(currentYear.value, currentMonth.value)
+}
+
 const incrementClickEvents = {
   Month: incrementMonth,
   Week: incrementWeek,
@@ -316,71 +393,97 @@ const decrementClickEvents = {
 
 function incrementMonth() {
   currentMonth.value++
-  date.value = findFirstDateOfMonth(currentMonth.value, currentYear.value)
-  week.value = findCurrentWeek(currentMonthDates.value[date.value]) + 1
   if (currentMonth.value > 11) {
     currentMonth.value = 0
     currentYear.value++
   }
+  // After month changes, recompute month dates and reset to first in-month day
+  date.value = findFirstDateOfMonth(currentMonth.value, currentYear.value)
+  week.value = findCurrentWeek(currentMonthDates.value[date.value])
 }
 
 function decrementMonth() {
-  currentMonth.value--
-  date.value = findLastDateOfMonth(currentMonth.value, currentYear.value)
-  week.value = findCurrentWeek(currentMonthDates.value[date.value])
-  if (currentMonth.value < 0) {
+  if (currentMonth.value === 0) {
     currentMonth.value = 11
     currentYear.value--
+  } else {
+    currentMonth.value--
   }
-}
-
-function increment() {
-  incrementClickEvents[activeView.value]()
-}
-
-function decrement() {
-  decrementClickEvents[activeView.value]()
+  // After adjusting month/year, pick last in-month date and its week
+  date.value = findLastDateOfMonth(currentMonth.value, currentYear.value)
+  week.value = findCurrentWeek(currentMonthDates.value[date.value])
 }
 
 function incrementWeek() {
-  week.value += 1
-  if (week.value < datesInWeeks.value.length) {
-    date.value = findIndexOfDate(datesInWeeks.value[week.value][0])
-  }
-  if (week.value > datesInWeeks.value.length - 1) {
-    incrementMonth()
-  }
-  let nextMonthDates = filterCurrentWeekDates()
-  if (nextMonthDates.length > 0) {
-    incrementMonth()
-    week.value = findCurrentWeek(nextMonthDates[0])
+  const nextWeek = week.value + 1 // target next week index
+
+  // Case 1: still within current grid
+  if (nextWeek < datesInWeeks.value.length) {
+    week.value = nextWeek
+    const weekDates = datesInWeeks.value[week.value]
+    const spansNextMonth = weekDates.some(
+      (d) => d.getMonth() !== currentMonth.value,
+    ) // overlap into next month
+    if (spansNextMonth) {
+      // cross boundary -> advance month
+      incrementMonth()
+      week.value = 0 // first week row of new month
+      const firstWeekDates = datesInWeeks.value[0]
+      const day = firstInMonth(firstWeekDates, currentMonth.value) // first in-month day
+      date.value = findIndexOfDate(day)
+      return
+    }
+    const day = firstInMonth(weekDates, currentMonth.value) // first in-month day in target week
+    date.value = findIndexOfDate(day)
+    return
   }
+
+  // Case 2: overflow -> next month first week
+  incrementMonth()
+  week.value = 0
+  const firstWeekDates = datesInWeeks.value[0]
+  const day = firstInMonth(firstWeekDates, currentMonth.value) // first valid in-month day
+  date.value = findIndexOfDate(day)
 }
 
 function decrementWeek() {
-  week.value -= 1
-  if (week.value < 0) {
-    decrementMonth()
+  const prevWeek = week.value - 1 // target previous week index
+
+  // Case 1: still within current grid
+  if (prevWeek >= 0) {
+    week.value = prevWeek
+    const weekDates = datesInWeeks.value[week.value]
+    const spansPrevMonth = weekDates.some(
+      (d) => d.getMonth() !== currentMonth.value,
+    ) // overlap into previous month
+    if (spansPrevMonth) {
+      // cross boundary -> go to previous month
+      decrementMonth()
+      week.value = datesInWeeks.value.length - 1 // last week row of new month
+      const targetWeekDates = datesInWeeks.value[week.value]
+      const day = firstInMonth(targetWeekDates, currentMonth.value) // first day actually in that month
+      date.value = findIndexOfDate(day)
+      return
+    }
+    const day = firstInMonth(weekDates, currentMonth.value) // first in-month day in target week
+    date.value = findIndexOfDate(day)
     return
   }
 
-  if (week.value > 0) {
-    date.value = findIndexOfDate(datesInWeeks.value[week.value][0])
-  }
-
-  let previousMonthDates = filterCurrentWeekDates()
-  if (previousMonthDates.length > 0) {
-    decrementMonth()
-    week.value = findCurrentWeek(previousMonthDates[0])
-  }
-}
-
-function filterCurrentWeekDates() {
-  let currentWeekDates = datesInWeeks.value[week.value]
-  let differentMonthDates = currentWeekDates.filter(
+  // Case 2: underflow -> jump to previous month
+  decrementMonth()
+  let targetIndex = datesInWeeks.value.length - 1 // start at last row
+  const lastWeekDates = datesInWeeks.value[targetIndex]
+  const hasNextMonthDates = lastWeekDates.some(
     (d) => d.getMonth() !== currentMonth.value,
-  )
-  return differentMonthDates
+  ) // overlap into next month
+  if (hasNextMonthDates && targetIndex > 0) {
+    targetIndex = targetIndex - 1 // skip overlap row
+  }
+  week.value = targetIndex
+  const targetWeekDates = datesInWeeks.value[week.value]
+  const day = firstInMonth(targetWeekDates, currentMonth.value) // first valid in-month day
+  date.value = findIndexOfDate(day)
 }
 
 function incrementDay() {
@@ -403,6 +506,10 @@ function decrementDay() {
   }
 }
 
+function firstInMonth(weekDates, month) {
+  return weekDates.find((d) => d.getMonth() === month) || weekDates[0]
+}
+
 function findLastDateOfMonth(month, year) {
   let inputDate = new Date(year, month + 1, 0)
   let lastDateIndex = currentMonthDates.value.findIndex(
@@ -424,8 +531,26 @@ function findIndexOfDate(date) {
     (d) => new Date(d).toDateString() === new Date(date).toDateString(),
   )
 }
+
 const currentMonthYear = computed(() => {
-  return monthList[currentMonth.value] + ', ' + currentYear.value
+  // Non-week views or empty week fallback
+  if (activeView.value !== 'Week')
+    return formatMonthYear(currentMonth.value, currentYear.value)
+
+  const weekDates = datesInWeeks.value[week.value] || []
+  if (!weekDates.length)
+    return formatMonthYear(currentMonth.value, currentYear.value)
+
+  const parts = getWeekMonthParts(weekDates)
+  if (parts.length === 1) return formatMonthYear(parts[0].month, parts[0].year)
+
+  const short = monthList.map((m) => m.slice(0, 3))
+  const first = parts[0]
+  const last = parts[parts.length - 1]
+
+  return first.year === last.year
+    ? `${short[first.month]} - ${short[last.month]} ${first.year}` // Same year span
+    : `${short[first.month]} ${first.year} - ${short[last.month]} ${last.year}` // Cross-year span
 })
 
 function isCurrentMonthDate(date) {
@@ -433,5 +558,24 @@ function isCurrentMonthDate(date) {
   return date.getMonth() === currentMonth.value
 }
 
+function setCalendarDate(d) {
+  const dt = d ? new Date(d) : new Date()
+  if (dt.toString() === 'Invalid Date') return
+  currentYear.value = dt.getFullYear()
+  currentMonth.value = dt.getMonth()
+  currentDate.value = dt
+  // Wait for reactive recalculations of month dates
+  nextTick(() => {
+    week.value = findCurrentWeek(dt)
+    const idx = findIndexOfDate(dt)
+    if (idx >= 0) {
+      date.value = idx
+    } else {
+      // Fallback: first date of month
+      date.value = findFirstDateOfMonth(currentMonth.value, currentYear.value)
+    }
+  })
+}
+
 defineExpose({ reloadEvents })
 </script>