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

package/src/components/Calendar/CalendarWeekly.vue

@@ -12,7 +12,7 @@
           {{ isToday(date) ? daysList[date.getDay()] : parseDateWithDay(date) }}
           <span
             v-if="isToday(date)"
-            class="inline-flex items-center justify-center bg-surface-gray-7 text-ink-white rounded size-[25px]"
+            class="inline-flex items-center justify-center bg-surface-gray-10 text-ink-base rounded size-[25px]"
           >
             {{ date.getDate() }}
           </span>
@@ -32,10 +32,16 @@
           :is="showCollapsable ? Button : 'div'"
           :class="{ '!pl-1.5 pr-1 py-1 !gap-1': showCollapsable }"
           variant="ghost"
-          :iconRight="showCollapsable ? (isCollapsed ? 'chevron-down' : 'chevron-up') : ''"
+          :iconRight="
+            showCollapsable ? (isCollapsed ? 'chevron-down' : 'chevron-up') : ''
+          "
           @click="showCollapsable && (isCollapsed = !isCollapsed)"
         >
-          <div class="text-sm text-ink-gray-6 h-[29px] inline-flex items-center">All day</div>
+          <div
+            class="text-sm text-ink-gray-6 h-[29px] inline-flex items-center"
+          >
+            All day
+          </div>
         </component>
       </div>
       <div class="grid w-full grid-cols-7 overflow-hidden">
@@ -60,13 +66,17 @@
               :key="calendarEvent.id"
               :date="date"
               @click.stop
-			  >
-                <template #event-popover-content="slotProps">
-                  <slot name="event-popover-content" v-bind="slotProps" />
-                </template>
-              </CalendarWeekDayEvent>
+            >
+              <template #event-popover-content="slotProps">
+                <slot name="event-popover-content" v-bind="slotProps" />
+              </template>
+            </CalendarWeekDayEvent>
             <Button
-              v-if="showCollapsable && isCollapsed && fullDayEvents[parseDate(date)]?.length > 2"
+              v-if="
+                showCollapsable &&
+                isCollapsed &&
+                fullDayEvents[parseDate(date)]?.length > 2
+              "
               :label="fullDayEvents[parseDate(date)]?.length - 2 + ' more'"
               variant="ghost"
               class="w-fit text-sm !py-0.5 !h-5 !justify-start cursor-pointer"
@@ -87,7 +97,7 @@
         <div class="grid w-20 grid-cols-1">
           <span
             v-for="time in 24"
-            class="flex items-end justify-center text-center text-sm font-normal text-ink-gray-5"
+            class="flex items-end justify-center text-center text-sm text-ink-gray-5"
             :style="{ height: `${hourHeight}px` }"
           />
         </div>
@@ -106,7 +116,9 @@
               class="relative w-full border-outline-gray-1"
               :class="[
                 idx === 0 && 'calendar-column border-l-[1px]',
-                config.noBorder && idx === weeklyDates.length - 1 ? '' : 'border-r-[1px]',
+                config.noBorder && idx === weeklyDates.length - 1
+                  ? ''
+                  : 'border-r-[1px]',
                 isWeekend(date, config) && 'bg-surface-gray-1',
               ]"
               :data-date-attr="date"
@@ -118,7 +130,9 @@
                 v-for="(time, i) in timeArray"
                 :key="time"
                 :data-time-attr="i == 0 ? '' : time"
-                @click.prevent="calendarActions.handleCellClick($event, date, time)"
+                @click.prevent="
+                  calendarActions.handleCellClick($event, date, time)
+                "
               >
                 <div
                   class="border-outline-gray-1 w-full"
@@ -148,7 +162,7 @@
     </div>
   </div>
 </template>
-<script setup>
+<script setup lang="ts">
 import { ref, onMounted, watch, computed, inject } from 'vue'
 import CalendarTimeMarker from './CalendarTimeMarker.vue'
 import {
@@ -163,34 +177,43 @@ import {
 import { Button } from '../Button'
 import useCalendarData from './composables/useCalendarData'
 import CalendarWeekDayEvent from './CalendarWeekDayEvent.vue'
+import {
+  CALENDAR_ACTIONS_KEY,
+  type CalendarConfig,
+  type CalendarEvent,
+  type GroupedCalendarEvents,
+} from './types'
 
-const props = defineProps({
-  events: {
-    type: Object,
-    required: true,
+const props = withDefaults(
+  defineProps<{
+    events: CalendarEvent[]
+    config: CalendarConfig
+    weeklyDates?: Date[]
+  }>(),
+  {
+    weeklyDates: () => [],
   },
-  config: {
-    type: Object,
-  },
-  weeklyDates: {
-    type: Array,
-    required: false,
-  },
-})
+)
 
-const gridRef = ref(null)
+const gridRef = ref<HTMLElement | null>(null)
 const showCollapsable = ref(false)
 const isCollapsed = ref(true)
 
 const hourHeight = props.config.hourHeight
 const minuteHeight = hourHeight / 60
 
-const timeArray = props.config.timeFormat == '24h' ? twentyFourHoursFormat : twelveHoursFormat
+const timeArray =
+  props.config.timeFormat == '24h' ? twentyFourHoursFormat : twelveHoursFormat
 
-const timedEvents = computed(() => useCalendarData(props.events).timedEvents.value)
-const fullDayEvents = computed(() => useCalendarData(props.events).fullDayEvents.value)
+const timedEvents = computed(
+  () => useCalendarData(props.events).timedEvents.value,
+)
+const fullDayEvents = computed(
+  () => useCalendarData(props.events).fullDayEvents.value,
+)
 
-const isToday = (date) => new Date(date).toDateString() === new Date().toDateString()
+const isToday = (date: Date) =>
+  new Date(date).toDateString() === new Date().toDateString()
 
 const currentTime = computed(() => {
   let d = new Date()
@@ -200,23 +223,30 @@ const currentTime = computed(() => {
   return { top }
 })
 
-const calendarActions = inject('calendarActions')
+const calendarActions = inject(CALENDAR_ACTIONS_KEY)
+
+if (!calendarActions) {
+  throw new Error('CalendarWeekly must be rendered inside Calendar.')
+}
 
-function getFullDayEventsInCurrentWeek(eventsObject, weeklyDates) {
-  let currentWeekEvents = {}
+function getFullDayEventsInCurrentWeek(
+  eventsObject: GroupedCalendarEvents,
+  weeklyDates: Date[] = [],
+) {
+  let currentWeekEvents: GroupedCalendarEvents = {}
   let weeklyFullDayEvents = Object.keys(eventsObject)
   weeklyDates.forEach((date) => {
-    date = parseDate(date)
+    const parsedDate = parseDate(date)
 
-    if (weeklyFullDayEvents.includes(date)) {
-      currentWeekEvents[date] = eventsObject[date]
+    if (weeklyFullDayEvents.includes(parsedDate)) {
+      currentWeekEvents[parsedDate] = eventsObject[parsedDate]
     }
   })
   return currentWeekEvents
 }
 
-function getFullDayEventsCount(eventsObject) {
-  let lengthArray = []
+function getFullDayEventsCount(eventsObject: GroupedCalendarEvents) {
+  let lengthArray: number[] = []
   Object.values(eventsObject).forEach((events) => {
     lengthArray.push(events.length)
   })
@@ -224,8 +254,14 @@ function getFullDayEventsCount(eventsObject) {
   return maxEventsInWeek
 }
 
-function setFullDayEventsHeight(eventsObject, weeklyDates) {
-  let currentWeekEvents = getFullDayEventsInCurrentWeek(eventsObject, weeklyDates)
+function setFullDayEventsHeight(
+  eventsObject: GroupedCalendarEvents,
+  weeklyDates: Date[] = [],
+) {
+  let currentWeekEvents = getFullDayEventsInCurrentWeek(
+    eventsObject,
+    weeklyDates,
+  )
   let maxEvents = getFullDayEventsCount(currentWeekEvents)
   if (maxEvents > 3) {
     showCollapsable.value = true
@@ -239,7 +275,7 @@ onMounted(() => {
   setFullDayEventsHeight(fullDayEvents.value, props.weeklyDates)
   const currentHour = new Date().getHours()
   const scrollToHour = props.config.scrollToHour || currentHour
-  gridRef.value.scrollBy(0, scrollToHour * 60 * minuteHeight - 10)
+  gridRef.value?.scrollBy(0, scrollToHour * 60 * minuteHeight - 10)
 })
 
 watch(

package/src/components/Calendar/EventModalContent.vue

@@ -1,42 +1,53 @@
 <template>
-  <div class="w-80 rounded-lg bg-surface-modal text-ink-gray-8 p-4">
+  <div class="w-80 rounded-lg bg-surface-elevation-2 text-ink-gray-8 p-4">
     <div class="flex flex-row-reverse gap-2">
       <span class="cursor-pointer" @click.stop="$emit('close')">
         <span class="lucide-x size-4" aria-hidden="true" />
       </span>
-      <span v-if="isEditMode" class="cursor-pointer" @click.stop="$emit('edit')">
+      <span
+        v-if="isEditMode"
+        class="cursor-pointer"
+        @click.stop="$emit('edit')"
+      >
         <span class="lucide-edit-2 size-4" aria-hidden="true" />
       </span>
-      <span v-if="isEditMode" class="cursor-pointer" @click.stop="$emit('delete')">
+      <span
+        v-if="isEditMode"
+        class="cursor-pointer"
+        @click.stop="$emit('delete')"
+      >
         <span class="lucide-trash-2 size-4" aria-hidden="true" />
       </span>
     </div>
     <div class="flex flex-col gap-5">
-      <div class="flex justify-between text-xl font-semibold">
+      <div class="flex justify-between text-2xl-semibold">
         <span>{{ calendarEvent.title || 'New Event' }}</span>
       </div>
       <div class="flex flex-col gap-4">
         <div class="flex items-center gap-2">
           <span class="lucide-calendar size-4" aria-hidden="true" />
-          <span class="text-sm font-normal">
+          <span class="text-sm">
             {{ parseDateEventPopupFormat(date) }}
           </span>
         </div>
         <div class="flex items-center gap-2" v-if="calendarEvent.participant">
           <span class="lucide-user size-4" aria-hidden="true" />
-          <span class="text-sm font-normal">
+          <span class="text-sm">
             {{ calendarEvent.participant }}
           </span>
         </div>
-        <div class="flex items-center gap-2" v-if="calendarEvent.fromTime && calendarEvent.toTime">
+        <div
+          class="flex items-center gap-2"
+          v-if="calendarEvent.fromTime && calendarEvent.toTime"
+        >
           <span class="lucide-clock size-4" aria-hidden="true" />
-          <span class="text-sm font-normal">
+          <span class="text-sm">
             {{ calendarEvent.fromTime }} - {{ calendarEvent.toTime }}
           </span>
         </div>
         <div class="flex items-center gap-2" v-if="calendarEvent.venue">
           <span class="lucide-map-pin size-4" aria-hidden="true" />
-          <span class="text-sm font-normal">
+          <span class="text-sm">
             {{ calendarEvent.venue }}
           </span>
         </div>
@@ -44,14 +55,19 @@
     </div>
   </div>
 </template>
-<script setup>
+<script setup lang="ts">
 import { parseDateEventPopupFormat } from './calendarUtils'
+import type { CalendarEvent } from './types'
 
-const props = defineProps({
-  calendarEvent: { type: Object, required: true },
-  date: { type: Date, required: true },
-  isEditMode: { type: Boolean },
-})
+const props = defineProps<{
+  calendarEvent: CalendarEvent
+  date: Date
+  isEditMode?: boolean
+}>()
 
-const emits = defineEmits(['close', 'edit', 'delete'])
+const emits = defineEmits<{
+  close: []
+  edit: [event?: MouseEvent]
+  delete: []
+}>()
 </script>

package/src/components/Calendar/NewEventModal.vue

@@ -16,13 +16,13 @@
       <div>
         <div class="grid grid-cols-1 gap-4">
           <FormControl
-            type="Input"
+            type="text"
             v-model="newEvent.title"
             label="Title"
             placeholder="Meet with John Doe"
           />
           <FormControl
-            type="Date"
+            type="date"
             v-model="newEvent.date"
             label="Date"
             :required="true"
@@ -30,7 +30,7 @@
           />
 
           <FormControl
-            type="Input"
+            type="text"
             v-model="newEvent.participant"
             label="Person"
             placeholder="John Doe"
@@ -53,7 +53,7 @@
           />
 
           <FormControl
-            type="Input"
+            type="text"
             v-model="newEvent.venue"
             label="Venue"
             placeholder="Frappe, Neelkanth Business Park"
@@ -69,7 +69,7 @@
               <div
                 class="h-5 w-5 rounded-full shadow-md"
                 :style="{
-                  backgroundColor: colorMap[newEvent?.color]?.color,
+                  backgroundColor: colorMap[newEvent.color || 'green']?.color,
                 }"
               />
             </template>
@@ -95,7 +95,7 @@
     </template>
   </Dialog>
 </template>
-<script setup>
+<script setup lang="ts">
 import { computed, inject, reactive, ref } from 'vue'
 import { Dialog } from '../Dialog'
 import { FormControl } from '../FormControl'
@@ -103,15 +103,14 @@ import { ErrorMessage } from '../ErrorMessage'
 import { Button } from '../Button'
 
 import { calculateDiff, colorMap, handleSeconds } from './calendarUtils'
+import { CALENDAR_ACTIONS_KEY, type CalendarEvent } from './types'
 const show = ref(false)
 
-const props = defineProps({
-  event: {
-    type: Object,
-  },
+const props = withDefaults(defineProps<{ event?: CalendarEvent }>(), {
+  event: () => ({}),
 })
 
-const newEvent = reactive({
+const newEvent = reactive<CalendarEvent>({
   title: props.event?.title || '',
   date: props.event?.date || '',
   participant: props.event?.participant || '',
@@ -164,15 +163,19 @@ function validateFields() {
 }
 
 function validateStartEndTime() {
-  let timeDiff = calculateDiff(newEvent.fromTime, newEvent.toTime)
+  let timeDiff = calculateDiff(newEvent.fromTime || '', newEvent.toTime || '')
   if (timeDiff <= 0) {
     errorMessage.value = 'Start time must be less than End Time'
   }
 }
 
-const calendarActions = inject('calendarActions')
+const calendarActions = inject(CALENDAR_ACTIONS_KEY)!
 
-function submitEvent(close) {
+if (!calendarActions) {
+  throw new Error('NewEventModal must be rendered inside Calendar.')
+}
+
+function submitEvent(close: () => void) {
   validateFields()
   if (errorMessage.value) {
     return
@@ -202,8 +205,8 @@ function handleEventTime() {
     newEvent.fromTime = ''
     newEvent.toTime = ''
   } else {
-    newEvent.fromTime = handleSeconds(newEvent.fromTime)
-    newEvent.toTime = handleSeconds(newEvent.toTime)
+    newEvent.fromTime = handleSeconds(newEvent.fromTime || '')
+    newEvent.toTime = handleSeconds(newEvent.toTime || '')
   }
 }
 </script>

package/src/components/Calendar/ShowMoreCalendarEvent.vue

@@ -13,29 +13,23 @@
   </CalendarMonthEvent>
   <button
     v-if="totalEventsCount > 2"
-    class="w-fit rounded-sm p-px px-2 mx-px text-base font-medium text-ink-gray-6 hover:bg-surface-gray-1"
+    class="w-fit rounded-sm p-px px-2 mx-px text-base-medium text-ink-gray-6 hover:bg-surface-gray-1"
     @click.stop="emit('showMoreEvents')"
   >
     {{ totalEventsCount - 2 }} more
   </button>
 </template>
-<script setup>
+<script setup lang="ts">
 import CalendarMonthEvent from './CalendarMonthEvent.vue'
+import type { CalendarEvent } from './types'
 
-const props = defineProps({
-  events: {
-    type: Array,
-    required: true,
-  },
-  date: {
-    type: Date,
-    required: true,
-  },
-  totalEventsCount: {
-    type: Number,
-    required: true,
-  },
-})
+const props = defineProps<{
+  events: CalendarEvent[]
+  date: Date
+  totalEventsCount: number
+}>()
 
-const emit = defineEmits(['showMoreEvents'])
+const emit = defineEmits<{
+  showMoreEvents: []
+}>()
 </script>