frappe-ui 0.1.271 → 0.1.273

package/frappe/drive/components/MoveDialog.vue

@@ -163,7 +163,7 @@
             >
               {{ '/' }}
             </span>
-            <div class="flex w-24 overflow-hidden">
+            <div class="flex w-48 overflow-scroll">
               <div
                 v-for="(crumb, index) in slicedBreadcrumbs"
                 :key="index"

package/frappe/drive/components/RenameDialog.vue

@@ -49,7 +49,7 @@ const open = ref(true)
 const newTitle = ref('')
 const file_ext = ref('')
 
-if (props.entity.is_group || props.entity.doc) {
+if (props.entity.is_group || props.entity.doc || props.entity.is_link) {
   newTitle.value = props.entity.title
 } else {
   const parts = props.entity.title.split('.')

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "frappe-ui",
-  "version": "0.1.271",
+  "version": "0.1.273",
   "description": "A set of components and utilities for rapid UI development",
   "type": "module",
   "sideEffects": false,

package/src/components/Calendar/Calendar.vue

@@ -62,14 +62,22 @@
       :currentMonthDates="currentMonthDates"
       :config="overrideConfig"
       @setCurrentDate="(d) => updateCurrentDate(d)"
-    />
+    >
+      <template #event-popover-content="slotProps">
+        <slot name="event-popover-content" v-bind="slotProps" />
+      </template>
+    </CalendarMonthly>
 
     <CalendarWeekly
       v-else-if="activeView === 'Week'"
       :events="events"
       :weeklyDates="datesInWeeks[week]"
       :config="overrideConfig"
-    />
+    >
+      <template #event-popover-content="slotProps">
+        <slot name="event-popover-content" v-bind="slotProps" />
+      </template>
+    </CalendarWeekly>
 
     <CalendarDaily
       v-else-if="activeView === 'Day'"
@@ -83,6 +91,9 @@
           v-bind="{ parseDateWithDay, currentDate, fullDay }"
         />
       </template>
+      <template #event-popover-content="slotProps">
+        <slot name="event-popover-content" v-bind="slotProps" />
+      </template>
     </CalendarDaily>
 
     <NewEventModal
@@ -121,6 +132,7 @@ import CalendarWeekly from './CalendarWeekly.vue'
 import CalendarDaily from './CalendarDaily.vue'
 import NewEventModal from './NewEventModal.vue'
 import useEventModal from './composables/useEventModal'
+import { isAnyPopoverOpen } from './useEventBase.js'
 
 const props = defineProps({
   events: {
@@ -321,6 +333,11 @@ function openModal(data) {
 }
 
 function handleCellClick(e, date, time = '', isFullDay = false) {
+  if (isAnyPopoverOpen.value) {
+	isAnyPopoverOpen.value = false
+    return
+  }
+
   const data = {
     e,
     view: activeView.value,
@@ -623,6 +640,7 @@ function getVisibleRange() {
     const weekDates = datesInWeeks.value[week.value] || []
     if (!weekDates.length) return null
     const orderedWeek = [...weekDates].sort((a, b) => a - b)
+    const start = dayjs(orderedWeek[0]).startOf('day')
     const end = dayjs(orderedWeek[orderedWeek.length - 1]).endOf('day')
     return {
       startDate: toDateString(start),

package/src/components/Calendar/CalendarDaily.vue

@@ -29,16 +29,19 @@
           calendarActions.handleCellClick($event, currentDate, '', true)
         "
       >
-        <CalendarEvent
+        <CalendarWeekDayEvent
           v-for="(calendarEvent, idx) in !showCollapsable || !isCollapsed
             ? dayFullDayEvents
             : dayFullDayEvents.slice(0, 4)"
-          class="w-[21%] cursor-pointer"
           :event="{ ...calendarEvent, idx }"
           :key="calendarEvent.id"
           :date="currentDate"
           @click.stop
-        />
+        >
+          <template #event-popover-content="slotProps">
+            <slot name="event-popover-content" v-bind="slotProps" />
+          </template>
+        </CalendarWeekDayEvent>
         <Button
           v-if="showCollapsable && isCollapsed && dayFullDayEvents.length > 4"
           :label="dayFullDayEvents.length - 4 + ' more'"
@@ -70,6 +73,7 @@
           <div
             class="calendar-column relative border-l-[1px] border-outline-gray-1"
             :class="[config.noBorder ? '' : ' border-r-[1px]']"
+            data-time-grid
           >
             <!-- Day Grid -->
             <div
@@ -87,15 +91,18 @@
                 :style="{ height: `${hourHeight}px` }"
               />
             </div>
-            <CalendarEvent
+            <CalendarWeekDayEvent
               v-for="(calendarEvent, idx) in timedEvents[
                 parseDate(currentDate)
               ]"
-              class="absolute mb-2 cursor-pointer"
               :event="calendarEvent"
               :key="calendarEvent.id"
               :date="currentDate"
-            />
+            >
+			  <template #event-popover-content="slotProps">
+                <slot name="event-popover-content" v-bind="slotProps" />
+			  </template>
+            </CalendarWeekDayEvent>
             <!-- Current time Marker -->
             <CalendarTimeMarker :date="currentDate" />
           </div>
@@ -107,16 +114,15 @@
 
 <script setup>
 import { computed, inject, onMounted, ref, watch } from 'vue'
-import CalendarEvent from './CalendarEvent.vue'
 import CalendarTimeMarker from './CalendarTimeMarker.vue'
 import { Button } from '../Button'
 import {
   parseDate,
-  parseDateWithDay,
   twelveHoursFormat,
   twentyFourHoursFormat,
 } from './calendarUtils'
 import useCalendarData from './composables/useCalendarData'
+import CalendarWeekDayEvent from './CalendarWeekDayEvent.vue'
 
 const props = defineProps({
   events: {

package/src/components/Calendar/CalendarMonthEvent.vue

@@ -0,0 +1,88 @@
+<template>
+  <Popover placement="left" transition="default" @open="registerDeleteShortcut" @close="unregisterDeleteShortcut">
+    <template #target="{ togglePopover, isOpen }">
+      <div
+        v-bind="$attrs"
+        class="event flex gap-1.5 min-h-6 mx-px rounded p-[5px] transition-all duration-75 w-full overflow-hidden"
+        :class="{ active: activeEvent == (props.event?.id || props.event?.name) }"
+        :style="eventBgStyle"
+        @click.stop="handleEventClick($event, togglePopover, isOpen)"
+        @dblclick.prevent="handleEventEdit($event)"
+      >
+        <div
+          v-if="props.event.fromTime"
+          class="event-border w-[2px] rounded shrink-0"
+          :style="eventBorderStyle"
+        />
+        <div class="relative flex h-full select-none items-start gap-2 overflow-hidden">
+          <div v-if="config.showIcon && eventIcons[props.event.type]">
+            <component :is="eventIcons[props.event.type]" class="h-4 w-4 text-black" />
+          </div>
+          <p class="text-sm font-medium truncate" :class="{ italic: !props.event.title }">
+            {{ props.event.title || '[No title]' }}
+          </p>
+        </div>
+      </div>
+    </template>
+
+    <template #body-main="{ close }">
+      <slot
+        name="event-popover-content"
+        :calendarEvent
+        :date
+        :isEditMode="config.isEditMode"
+        :close
+      >
+        <EventModalContent
+          :calendarEvent="calendarEvent"
+          :date="date"
+          :isEditMode="config.isEditMode"
+          @close="close"
+          @edit="
+            (e) => {
+              close()
+              handleEventEdit(e)
+            }
+          "
+          @delete="
+            () => {
+              close()
+              handleEventDelete()
+            }
+          "
+        />
+      </slot>
+    </template>
+  </Popover>
+
+  <NewEventModal v-model="showEventModal" :event="updatedEvent" />
+</template>
+
+<script setup>
+import './style.css'
+
+import EventModalContent from './EventModalContent.vue'
+import NewEventModal from './NewEventModal.vue'
+import Popover from '../Popover/Popover.vue'
+import { eventProps, useEventBase } from './useEventBase.js'
+
+const props = defineProps(eventProps)
+
+defineOptions({ inheritAttrs: false })
+
+const {
+  activeEvent,
+  config,
+  calendarEvent,
+  updatedEvent,
+  eventIcons,
+  showEventModal,
+  eventBgStyle,
+  eventBorderStyle,
+  handleEventClick,
+  handleEventEdit,
+  handleEventDelete,
+  registerDeleteShortcut,
+  unregisterDeleteShortcut,
+} = useEventBase(props)
+</script>

package/src/components/Calendar/CalendarMonthly.vue

@@ -27,23 +27,16 @@
           isWeekend(date, config) && 'bg-surface-gray-1',
         ]"
         @dragover.prevent
-        @drageneter.prevent
+        @dragenter.prevent
         @drop="onDrop($event, date)"
         @click="calendarActions.handleCellClick($event, date)"
       >
-        <div
-          class="flex justify-center font-normal"
-          :class="isCurrentMonth(date) ? 'text-gray-700' : 'text-gray-200'"
-        >
-          <div
-            class="flex gap-0.5 w-full flex-col items-center text-xs text-right"
-          >
+        <div class="flex justify-center font-normal">
+          <div class="flex gap-0.5 w-full flex-col items-center text-xs text-right">
             <span
-              class="z-10 w-full flex justify-between items-center"
+              class="w-full flex justify-between items-center"
               :class="[
-                date.toDateString() === new Date().toDateString()
-                  ? 'p-[3px] pb-0.5'
-                  : 'p-2',
+                date.toDateString() === new Date().toDateString() ? 'p-[3px] pb-0.5' : 'p-2',
               ]"
             >
               <div></div>
@@ -74,33 +67,38 @@
               class="flex w-full flex-col justify-between"
               v-if="timedEvents[parseDate(date)]?.length <= maxEventsInCell"
             >
-              <CalendarEvent
+              <CalendarMonthEvent
                 v-for="calendarEvent in timedEvents[parseDate(date)]"
                 :event="calendarEvent"
                 :date="date"
-                class="z-10 mb-2 cursor-pointer"
+                class="mb-2 cursor-pointer"
                 :key="calendarEvent.id"
                 :draggable="config.isEditMode"
                 @dragstart="onDragStart($event, calendarEvent.id)"
                 @dragend="$event.target.style.opacity = '1'"
                 @dragover.prevent
-              />
+              >
+                <template #event-popover-content="slotProps">
+                  <slot name="event-popover-content" v-bind="slotProps" />
+                </template>
+              </CalendarMonthEvent>
             </div>
             <div v-else class="flex w-full flex-col justify-between">
               <ShowMoreCalendarEvent
                 v-if="timedEvents[parseDate(date)]"
-                class="z-10 cursor-pointer"
                 :draggable="config.isEditMode"
-                @dragstart="
-                  onDragStart($event, timedEvents[parseDate(date)][0].id)
-                "
+                @dragstart="onDragStart($event, timedEvents[parseDate(date)][0].id)"
                 @dragend="$event.target.style.opacity = '1'"
                 @dragover.prevent
                 :events="timedEvents[parseDate(date)]"
                 :date="date"
                 :totalEventsCount="timedEvents[parseDate(date)].length"
                 @showMoreEvents="emit('setCurrentDate', date)"
-              />
+              >
+                <template #event-popover-content="slotProps">
+                  <slot name="event-popover-content" v-bind="slotProps" />
+                </template>
+              </ShowMoreCalendarEvent>
             </div>
           </div>
         </div>
@@ -112,10 +110,10 @@
 <script setup>
 import { daysList, parseDate, isWeekend } from './calendarUtils'
 import { inject } from 'vue'
-import CalendarEvent from './CalendarEvent.vue'
 import useCalendarData from './composables/useCalendarData'
 import { computed } from 'vue'
 import ShowMoreCalendarEvent from './ShowMoreCalendarEvent.vue'
+import CalendarMonthEvent from './CalendarMonthEvent.vue'
 const props = defineProps({
   events: {
     type: Object,
@@ -136,13 +134,9 @@ const props = defineProps({
 
 const emit = defineEmits(['setCurrentDate'])
 
-const timedEvents = computed(
-  () => useCalendarData(props.events, 'Month').timedEvents.value,
-)
+const timedEvents = computed(() => useCalendarData(props.events, 'Month').timedEvents.value)
 
-const maxEventsInCell = computed(() =>
-  props.currentMonthDates.length > 35 ? 1 : 2,
-)
+const maxEventsInCell = computed(() => (props.currentMonthDates.length > 35 ? 1 : 2))
 
 function isCurrentMonth(date) {
   return date.getMonth() === props.currentMonth

package/src/components/Calendar/CalendarTimeMarker.vue

@@ -1,6 +1,6 @@
 <template>
   <div
-    class="absolute top-20 z-10 w-full px-px"
+    class="absolute top-20 w-full px-px"
     :style="setCurrentTime"
     v-if="new Date(date).toDateString() === new Date().toDateString()"
   >