pimelon-ui 0.1.122 → 0.1.124

package/melon/Help/HelpModal.vue

@@ -98,7 +98,7 @@ const props = defineProps({
   },
   docsLink: {
     type: String,
-    default: 'https://docs.monakerp.com/crm',
+    default: 'https://docs.devel.monakerp.com/crm',
   },
 })
 

package/melon/HelpCenter/HelpCenter.vue

@@ -70,7 +70,7 @@ import { ref, computed, onMounted } from 'vue'
 const props = defineProps({
   docsLink: {
     type: String,
-    default: 'https://docs.monakerp.com/crm',
+    default: 'https://docs.devel.monakerp.com/crm',
   },
 })
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pimelon-ui",
-  "version": "0.1.122",
+  "version": "0.1.124",
   "description": "A set of components and utilities for rapid UI development",
   "main": "./src/index.js",
   "scripts": {

package/src/components/Calendar/Calendar.vue

@@ -14,7 +14,9 @@
       <div class="mb-2 flex justify-between">
         <!-- left side  -->
         <!-- Year, Month -->
-        <span class="text-xl font-medium"> {{ currentMonthYear }}</span>
+        <span class="text-lg font-medium text-ink-gray-8">
+          {{ currentMonthYear }}
+        </span>
         <!-- right side -->
         <!-- actions buttons for calendar -->
         <div class="flex gap-x-1">
@@ -64,7 +66,14 @@
       :events="events"
       :current-date="selectedDay"
       :config="overrideConfig"
-    />
+    >
+      <template #header="{ parseDateWithDay, currentDate, fullDay }">
+        <slot
+          name="daily-header"
+          v-bind="{ parseDateWithDay, currentDate, fullDay }"
+        />
+      </template>
+    </CalendarDaily>
 
     <NewEventModal
       v-if="showEventModal"
@@ -74,7 +83,7 @@
   </div>
 </template>
 <script setup>
-import { computed, onMounted, onUnmounted, provide, ref, watch } from 'vue'
+import { computed, onMounted, onUnmounted, provide, ref } from 'vue'
 import { Button } from '../Button'
 import TabButtons from '../TabButtons.vue'
 import {
@@ -98,18 +107,6 @@ const props = defineProps({
   config: {
     type: Object,
   },
-  create: {
-    type: Function,
-    required: false,
-  },
-  update: {
-    type: Function,
-    required: false,
-  },
-  delete: {
-    type: Function,
-    required: false,
-  },
   onClick: {
     type: Function,
     required: false,
@@ -124,6 +121,8 @@ const props = defineProps({
   },
 })
 
+const emit = defineEmits(['create', 'update', 'delete'])
+
 const defaultConfig = {
   scrollToHour: 15,
   disableModes: [],
@@ -134,6 +133,7 @@ const defaultConfig = {
   hourHeight: 50,
   enableShortcuts: true,
   showIcon: true,
+  timeFormat: '12h',
 }
 
 const overrideConfig = { ...defaultConfig, ...props.config }
@@ -174,19 +174,25 @@ provide('activeView', activeView)
 provide('config', overrideConfig)
 
 const parseEvents = computed(() => {
-  return props.events.map((event) => {
-    const { fromDate, toDate, ...rest } = event
-    const date = parseDate(fromDate)
-    const from_time = new Date(fromDate).toLocaleTimeString()
-    const to_time = new Date(toDate).toLocaleTimeString()
-    if (event.isFullDay) {
-      return { ...rest, date }
-    }
-    return { ...rest, date, from_time, to_time }
-  })
+  return (
+    props.events?.map((event) => {
+      const { fromDate, toDate, ...rest } = event
+      const date = parseDate(fromDate)
+      const from_time = new Date(fromDate).toLocaleTimeString()
+      const to_time = new Date(toDate).toLocaleTimeString()
+      if (event.isFullDay) {
+        return { ...rest, date }
+      }
+      return { ...rest, date, from_time, to_time }
+    }) || []
+  )
 })
 const events = ref(parseEvents.value)
 
+function reloadEvents() {
+  events.value = parseEvents.value
+}
+
 events.value.forEach((event) => {
   if (!event.from_time || !event.to_time) {
     return
@@ -208,21 +214,25 @@ provide('calendarActions', {
 // CRUD actions on an event
 function createNewEvent(event) {
   events.value.push(event)
-  props.create && props.create(event)
+  event.fromDate = event.date + ' ' + event.from_time
+  event.toDate = event.date + ' ' + event.to_time
+  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
   events.value[eventIndex] = event
-  props.update && props.update(events.value[eventIndex])
+  emit('update', event)
 }
 
 function deleteEvent(eventID) {
   // Delete event
   const eventIndex = events.value.findIndex((event) => event.id === eventID)
   events.value.splice(eventIndex, 1)
-  props.delete && props.delete(eventID)
+  emit('delete', eventID)
 }
 
 function openModal(data) {
@@ -430,4 +440,6 @@ function isCurrentMonthDate(date) {
   date = new Date(date)
   return date.getMonth() === currentMonth.value
 }
+
+defineExpose({ reloadEvents })
 </script>

package/src/components/Calendar/CalendarDaily.vue

@@ -1,28 +1,35 @@
 <template>
   <div class="h-[90%] min-h-[500px] min-w-[600px]">
-    <p class="pb-2 text-base font-bold text-gray-800">
-      {{ parseDateWithDay(currentDate, (fullDay = true)) }}
-    </p>
+    <slot name="header" v-bind="{ parseDateWithDay, currentDate, fullDay }">
+      <p class="pb-2 text-base font-semibold text-ink-gray-8">
+        {{ parseDateWithDay(currentDate, (fullDay = true)) }}
+      </p>
+    </slot>
     <div class="h-full overflow-hidden">
       <div
-        class="flex h-full w-full overflow-scroll border-b-[1px] border-l-[1px] border-t-[1px]"
+        class="flex h-full w-full overflow-scroll border-outline-gray-1"
+        :class="[
+          config.noBorder ? 'border-t-[1px]' : 'border-[1px] border-r-0',
+        ]"
         ref="gridRef"
       >
         <!-- Left column -->
         <div class="grid h-full w-16 grid-cols-1">
           <span
             v-for="time in 24"
-            class="flex h-[72px] items-end justify-center text-center text-sm font-normal text-gray-600"
+            class="flex h-[72px] items-end justify-center text-center text-sm font-normal text-ink-gray-5"
             :style="{ height: `${hourHeight}px` }"
           />
         </div>
 
         <!-- Calendar Grid / Right Column -->
         <div class="grid h-full w-full grid-cols-1 pb-2">
-          <div class="calendar-column relative border-r-[1px]">
+          <div
+            class="calendar-column relative border-r-[1px] border-l-[1px] border-outline-gray-1"
+          >
             <!-- Top Redundant Cell before time starts for giving the calendar some space -->
             <div
-              class="flex h-[50px] w-full flex-wrap gap-2 overflow-y-scroll border-b-[1px] border-gray-200 transition-all"
+              class="flex h-[50px] w-full flex-wrap gap-2 overflow-y-scroll border-b-[1px] border-outline-gray-1 transition-all"
               :style="{ height: `${config.redundantCellHeight}px` }"
             >
               <CalendarEvent
@@ -37,15 +44,16 @@
             </div>
             <!-- Day Grid -->
             <div
-              class="relative flex"
-              v-for="time in twentyFourHoursFormat"
+              class="relative flex text-ink-gray-8"
+              v-for="time in timeArray"
+              :key="time"
               :data-time-attr="time"
               @dblclick="
                 calendarActions.handleCellDblClick($event, currentDate, time)
               "
             >
               <div
-                class="w-full border-b-[1px] border-gray-200"
+                class="w-full border-b-[1px] border-outline-gray-1"
                 :style="{ height: `${hourHeight}px` }"
               />
             </div>
@@ -77,6 +85,7 @@ import CalendarTimeMarker from './CalendarTimeMarker.vue'
 import {
   parseDate,
   parseDateWithDay,
+  twelveHoursFormat,
   twentyFourHoursFormat,
 } from './calendarUtils'
 import useCalendarData from './composables/useCalendarData'
@@ -104,6 +113,9 @@ const gridRef = ref(null)
 const hourHeight = props.config.hourHeight
 const minuteHeight = hourHeight / 60
 
+const timeArray =
+  props.config.timeFormat == '24h' ? twentyFourHoursFormat : twelveHoursFormat
+
 onMounted(() => {
   const currentHour = new Date().getHours()
   gridRef.value.scrollBy(0, currentHour * 60 * minuteHeight)

package/src/components/Calendar/CalendarEvent.vue

@@ -26,24 +26,31 @@
         ]
       "
     >
-      <div v-if="config.showIcon">
+      <div v-if="config.showIcon && eventIcons[props.event.type]">
         <component
           v-if="eventIcons[props.event.type]"
           :is="eventIcons[props.event.type]"
           class="h-4 w-4 text-black"
         />
-        <FeatherIcon v-else name="circle" class="h-4 text-black" />
       </div>
 
-      <div class="flex w-fit flex-col overflow-hidden whitespace-nowrap">
-        <p class="text-ellipsis text-sm font-medium text-gray-800">
+      <div
+        class="flex w-fit flex-col overflow-hidden whitespace-nowrap text-gray-800"
+      >
+        <p class="text-ellipsis text-sm font-medium truncate">
           {{ props.event.title || 'New Event' }}
         </p>
         <p
-          class="text-ellipsis text-xs font-normal text-gray-800"
+          class="text-ellipsis text-xs font-normal"
           v-if="!props.event.isFullDay"
         >
-          {{ updatedEvent.from_time }} - {{ updatedEvent.to_time }}
+          {{
+            formattedDuration(
+              updatedEvent.from_time,
+              updatedEvent.to_time,
+              config.timeFormat,
+            )
+          }}
         </p>
       </div>
     </div>
@@ -74,24 +81,28 @@
         ]
       "
     >
-      <div v-if="config.showIcon">
+      <div v-if="config.showIcon && eventIcons[props.event.type]">
         <component
           v-if="eventIcons[props.event.type]"
           :is="eventIcons[props.event.type]"
           class="h-4 w-4 text-black"
         />
-        <FeatherIcon v-else name="circle" class="h-4 text-black" />
       </div>
 
-      <div class="flex w-fit flex-col overflow-hidden whitespace-nowrap">
-        <p class="text-ellipsis text-sm font-medium text-gray-800">
+      <div
+        class="flex w-fit flex-col text-start overflow-hidden whitespace-nowrap text-gray-800"
+      >
+        <p class="text-sm font-medium truncate">
           {{ props.event.title || 'New Event' }}
         </p>
-        <p
-          class="text-ellipsis text-xs font-normal text-gray-800"
-          v-if="props.event.from_time"
-        >
-          {{ updatedEvent.from_time }} - {{ updatedEvent.to_time }}
+        <p v-if="props.event.from_time" class="text-xs font-normal">
+          {{
+            formattedDuration(
+              updatedEvent.from_time,
+              updatedEvent.to_time,
+              config.timeFormat,
+            )
+          }}
         </p>
       </div>
     </div>
@@ -138,6 +149,7 @@ import {
   calculateDiff,
   parseDate,
   colorMap,
+  formattedDuration,
 } from './calendarUtils'
 
 const props = defineProps({

package/src/components/Calendar/CalendarMonthly.vue

@@ -1,42 +1,61 @@
 <template>
   <div class="flex flex-1 flex-col overflow-scroll">
     <!-- Day List -->
-    <div class="grid w-full grid-cols-7 pb-2">
+    <div class="grid w-full grid-cols-7 py-2">
       <span
         v-for="day in daysList"
-        class="text-center text-sm font-normal text-gray-600"
+        class="text-center text-base text-ink-gray-5"
         >{{ day }}</span
       >
     </div>
 
     <!-- Date Grid -->
     <div
-      class="grid w-full flex-1 grid-cols-7 border-2 rounded-md"
-      :class="currentMonthDates.length > 35 ? 'grid-rows-6' : 'grid-rows-5'"
+      class="grid w-full flex-1 grid-cols-7 border-outline-gray-1"
+      :class="[
+        currentMonthDates.length > 35 ? 'grid-rows-6' : 'grid-rows-5',
+        config.noBorder ? 'border-t-[0.5px]' : 'border-[0.5px]',
+      ]"
     >
       <div
         v-for="date in currentMonthDates"
-        class="overflow-y-auto border"
+        class="overflow-y-auto border-[0.5px]"
         @dragover.prevent
         @drageneter.prevent
         @drop="onDrop($event, date)"
         @dblclick="calendarActions.handleCellDblClick($event, date)"
       >
         <div
-          class="mx-2 flex justify-center font-normal"
+          class="flex justify-center font-normal"
           :class="currentMonthDate(date) ? 'text-gray-700' : 'text-gray-200'"
         >
-          <div class="flex w-full flex-col items-center">
+          <div
+            class="flex gap-1 w-full flex-col items-center text-xs text-right"
+          >
             <span
               v-if="currentMonthDate(date)"
-              class="z-10 w-full bg-surface-white py-1 text-center text-ink-gray-9"
-              :class="
-                date.toDateString() === new Date().toDateString() && 'font-bold'
-              "
+              class="z-10 w-full flex justify-between items-center"
+              :class="[
+                date.toDateString() === new Date().toDateString()
+                  ? 'py-0.5 px-1'
+                  : 'py-1 px-2',
+              ]"
             >
-              {{ date.getDate() }}
+              <div></div>
+              <div
+                :class="[
+                  date.toDateString() === new Date().toDateString()
+                    ? 'bg-surface-gray-7 text-ink-white rounded-sm p-[2px]'
+                    : 'bg-surface-white text-ink-gray-6',
+                ]"
+              >
+                {{ date.getDate() }}
+              </div>
             </span>
-            <span v-else class="z-10 w-full bg-surface-white py-1 text-center text-ink-gray-5">
+            <span
+              v-else
+              class="z-10 w-full bg-surface-white py-1 px-2 text-ink-gray-4"
+            >
               {{ parseDateEventPopupFormat(date, (showDay = false)) }}
             </span>
 
@@ -59,7 +78,7 @@
             <div v-else class="flex w-full flex-col justify-between">
               <ShowMoreCalendarEvent
                 v-if="timedEvents[parseDate(date)]"
-                class="z-10 mb-2 cursor-pointer"
+                class="z-10 cursor-pointer"
                 :draggable="config.isEditMode"
                 @dragstart="
                   onDragStart($event, timedEvents[parseDate(date)][0].id)

package/src/components/Calendar/CalendarTimeMarker.vue

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

package/src/components/Calendar/CalendarWeekly.vue

@@ -7,19 +7,25 @@
         <span
           v-for="date in weeklyDates"
           class="relative p-2 text-center text-sm text-gray-600"
-          :class="isToday(date) ? 'font-bold text-gray-800' : 'font-normal'"
+          :class="
+            isToday(date) ? 'font-semibold text-ink-gray-8' : 'font-normal'
+          "
         >
           <div
             v-if="isToday(date)"
-            class="absolute left-[45%] top-0 h-[2px] w-5 bg-gray-800"
+            class="absolute left-[45%] top-0 h-[2px] w-5 bg-surface-gray-7"
           />
           {{ parseDateWithDay(date) }}
         </span>
       </div>
     </div>
 
-    <div class="relative flex h-full flex-col overflow-auto" ref="gridRef">
-      <div class="flex border-b-[1px] border-l-[1px]">
+    <div
+      class="relative flex h-full flex-col overflow-auto border-outline-gray-1"
+      :class="[config.noBorder ? '' : 'border-b-[1px] border-l-[1px]']"
+      ref="gridRef"
+    >
+      <div class="flex">
         <!-- Time List form 0 - 24 -->
         <div class="grid w-16 grid-cols-1">
           <span
@@ -35,8 +41,13 @@
           <div class="grid w-full grid-cols-7">
             <div v-for="(date, idx) in weeklyDates">
               <div
-                class="flex w-full flex-col gap-1 border-b-[1px] border-r-[1px] border-gray-200 transition-all"
-                :class="[idx === 0 && 'relative border-l-[1px]']"
+                class="flex w-full flex-col gap-1 border-b-[1px] border-r-[1px] border-outline-gray-1 transition-all"
+                :class="[
+                  idx === 0 && 'relative border-l-[1px]',
+                  config.noBorder &&
+                    idx === weeklyDates.length - 1 &&
+                    'border-r-0',
+                ]"
                 ref="allDayCells"
                 :data-date-attr="date"
               >
@@ -46,7 +57,6 @@
                   class="absolute -left-[42px] bottom-[4px] cursor-pointer font-bold"
                   :icon="isCollapsed ? 'chevron-down' : 'chevron-up'"
                   variant="ghost"
-                  size="lg"
                 />
                 <div class="w-full" v-if="!isCollapsed">
                   <CalendarEvent
@@ -77,21 +87,28 @@
             <!-- 7 Columns -->
             <div
               v-for="(date, idx) in weeklyDates"
-              class="relative w-full border-r-[1px]"
-              :class="idx === 0 && 'calendar-column'"
+              class="relative w-full border-r-[1px] border-outline-gray-1"
+              :class="[
+                idx === 0 && 'calendar-column border-l-[1px]',
+                config.noBorder &&
+                  idx == weeklyDates.length - 1 &&
+                  'border-r-0',
+              ]"
               :data-date-attr="date"
             >
               <!-- Time Grid -->
               <div
-                class="cell relative flex cursor-pointer"
-                v-for="time in twentyFourHoursFormat"
+                class="cell relative flex cursor-pointer text-ink-gray-8"
+                v-for="(time, i) in timeArray"
+                :key="time"
                 :data-time-attr="time"
                 @dblclick.prevent="
                   calendarActions.handleCellDblClick($event, date, time)
                 "
               >
                 <div
-                  class="border-gray-20 w-full border-b-[1px]"
+                  class="border-outline-gray-1 w-full border-b-[1px]"
+                  :class="i === timeArray.length - 1 && 'border-b-0'"
                   :style="{ height: `${hourHeight}px` }"
                 />
               </div>
@@ -119,6 +136,7 @@ import { ref, onMounted, watch, computed, inject } from 'vue'
 import CalendarEvent from './CalendarEvent.vue'
 import CalendarTimeMarker from './CalendarTimeMarker.vue'
 import {
+  twelveHoursFormat,
   twentyFourHoursFormat,
   parseDateWithDay,
   parseDate,
@@ -150,6 +168,9 @@ const isCollapsed = ref(false)
 const hourHeight = props.config.hourHeight
 const minuteHeight = hourHeight / 60
 
+const timeArray =
+  props.config.timeFormat == '24h' ? twentyFourHoursFormat : twelveHoursFormat
+
 const timedEvents = computed(
   () => useCalendarData(props.events).timedEvents.value,
 )
@@ -237,7 +258,6 @@ watch(
 
 <style>
 .calendar-column {
-  border-left: 1px solid #e5e5e5;
   position: relative;
 }
 

package/src/components/Calendar/EventModalContent.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="w-80 rounded bg-surface-white p-4 shadow">
+  <div class="w-80 rounded bg-surface-modal text-ink-gray-8 p-4 shadow">
     <div class="flex flex-row-reverse gap-2">
       <span class="cursor-pointer" @click="$emit('close')">
         <FeatherIcon name="x" class="h-4 w-4" />

package/src/components/Calendar/ShowMoreCalendarEvent.vue

@@ -8,7 +8,7 @@
   />
   <span
     v-if="totalEventsCount > 1"
-    class="w-fit self-center rounded-sm p-[1px] text-sm font-bold text-gray-600 hover:cursor-pointer hover:bg-gray-200"
+    class="w-fit rounded-sm p-px px-1.5 mx-1 text-base font-medium text-ink-gray-6 hover:cursor-pointer hover:bg-surface-gray-1"
     @click="emit('showMoreEvents')"
   >
     +{{ totalEventsCount - 1 }} more

package/src/components/Calendar/calendarUtils.js

@@ -202,6 +202,32 @@ export const daysListFull = [
   'Friday',
   'Saturday',
 ]
+export const twelveHoursFormat = [
+  '12 am',
+  '1 am',
+  '2 am',
+  '3 am',
+  '4 am',
+  '5 am',
+  '6 am',
+  '7 am',
+  '8 am',
+  '9 am',
+  '10 am',
+  '11 am',
+  '12 pm',
+  '1 pm',
+  '2 pm',
+  '3 pm',
+  '4 pm',
+  '5 pm',
+  '6 pm',
+  '7 pm',
+  '8 pm',
+  '9 pm',
+  '10 pm',
+  '11 pm',
+]
 export const twentyFourHoursFormat = [
   '00:00',
   '01:00',
@@ -275,3 +301,26 @@ export const colorMap = {
     border_color: 'border-amber-600',
   },
 }
+
+export function formattedDuration(from_time, to_time, timeFormat) {
+  from_time = formatTime(from_time, timeFormat)
+  to_time = formatTime(to_time, timeFormat)
+  return from_time + ' - ' + to_time
+}
+
+export function formatTime(time, format) {
+  if (format === '12h') {
+    let [hours, minutes] = time.split(':')
+    hours = parseInt(hours)
+    const ampm = hours >= 12 ? 'pm' : 'am'
+    hours = hours % 12
+    hours = hours ? hours : 12 // the hour '0' should be '12'
+
+    // if minutes is 00, remove it
+    if (minutes === '00') {
+      return `${hours} ${ampm}`
+    }
+    time = `${hours}:${minutes} ${ampm}`
+  }
+  return time
+}

package/src/components/Calendar.story.md

@@ -130,10 +130,10 @@ e.g.
 - Many functional props are also there which will be discussed in the below
   sections.
 
-## Custom API Integrations with Prop functions
+## Custom API Integrations
 
 To integrate the calendar with your API, you need to pass the following
-functions as props to the Calendar component:
+functions as emits to the Calendar component:
 
 - create: This function is called when a new event is created from the UI. The
   first argument in the function is the new event created.
@@ -149,9 +149,9 @@ e.g.
     <Calendar
     	:config="config"
     	:events="events"
-    	:create="(event) => console.log('createEvent', event)"
-    	:update="(event) => console.log('updateEvent', event)"
-    	:delete="(eventID) => console.log('deleteEvent', eventID)"
+    	@create="(event) => console.log('createEvent', event)"
+    	@update="(event) => console.log('updateEvent', event)"
+    	@delete="(eventID) => console.log('deleteEvent', eventID)"
     />
 
 In these functions, you can set up your API calls to create, update, and delete

package/src/components/Calendar.story.vue

@@ -5,9 +5,9 @@
         <Calendar
           :config="config"
           :events="events"
-          :create="(event) => logEvent('createEvent', event)"
-          :update="(event) => logEvent('updateEvent', event)"
-          :delete="(event) => logEvent('deleteEvent', event)"
+          @create="(event) => logEvent('createEvent', event)"
+          @update="(event) => logEvent('updateEvent', event)"
+          @delete="(eventID) => logEvent('deleteEvent', eventID)"
         >
         </Calendar>
       </div>
@@ -17,9 +17,9 @@
         <Calendar
           :config="config"
           :events="events"
-          :create="(event) => logEvent('createEvent', event)"
-          :update="(event) => logEvent('updateEvent', event)"
-          :delete="(event) => logEvent('deleteEvent', event)"
+          @create="(event) => logEvent('createEvent', event)"
+          @update="(event) => logEvent('updateEvent', event)"
+          @delete="(eventID) => logEvent('deleteEvent', eventID)"
         >
           <template
             #header="{
@@ -76,14 +76,24 @@ const config = {
   enableShortcuts: false,
 }
 
+function getCurrentMonthYear() {
+  const date = new Date()
+  const year = date.getFullYear()
+  const month = String(date.getMonth() + 1).padStart(2, '0')
+
+  return `${year}-${month}`
+}
+
+const currentMonthYear = getCurrentMonthYear()
+
 const events = ref([
   {
     title: 'English by Ryan Mathew',
     participant: 'Ryan Mathew',
     id: 'EDU-CSH-2024-00091',
     venue: 'CNF-ROOM-2024-00001',
-    fromDate: '2024-10-08 16:30:00', //can be a date object
-    toDate: '2024-10-08 17:30:00',
+    fromDate: currentMonthYear + '-02 16:30:00', //can be a date object
+    toDate: currentMonthYear + '-02 17:30:00',
     color: 'violet',
   },
   {
@@ -91,8 +101,8 @@ const events = ref([
     participant: 'Ryan Mathew',
     id: 'EDU-CSH-2024-00092',
     venue: 'CNF-ROOM-2024-00002',
-    fromDate: '2024-10-08 13:30:00',
-    toDate: '2024-10-08 17:30:00',
+    fromDate: currentMonthYear + '-04 13:30:00',
+    toDate: currentMonthYear + '-04 17:30:00',
     color: 'green',
   },
   {
@@ -100,8 +110,8 @@ const events = ref([
     participant: 'Sheldon',
     id: 'EDU-CSH-2024-00093',
     venue: 'CNF-ROOM-2024-00001',
-    fromDate: '2024-10-09 10:30:00',
-    toDate: '2024-10-09 11:30:00',
+    fromDate: currentMonthYear + '-16 10:30:00',
+    toDate: currentMonthYear + '-16 11:30:00',
     color: 'blue',
   },
   {
@@ -109,8 +119,8 @@ const events = ref([
     participant: 'Ryan Mathew',
     id: 'EDU-CSH-2024-00094',
     venue: 'CNF-ROOM-2024-00001',
-    fromDate: '2024-10-17 16:30:00',
-    toDate: '2024-10-17 17:30:00',
+    fromDate: currentMonthYear + '-21 16:30:00',
+    toDate: currentMonthYear + '-21 17:30:00',
     color: 'red',
   },
   {
@@ -118,8 +128,8 @@ const events = ref([
     participant: 'John',
     id: '#htrht41',
     venue: 'Google Meet',
-    fromDate: '2024-10-21 00:00:00',
-    toDate: '2024-10-21 23:59:59',
+    fromDate: currentMonthYear + '-11 00:00:00',
+    toDate: currentMonthYear + '-11 23:59:59',
     color: 'amber',
     isFullDay: true,
   },
@@ -128,8 +138,8 @@ const events = ref([
     participant: 'Sheldon',
     id: '#htrht42',
     venue: 'Google Meet',
-    fromDate: '2024-10-21 00:00:00',
-    toDate: '2024-10-21 23:59:59',
+    fromDate: currentMonthYear + '-07 00:00:00',
+    toDate: currentMonthYear + '-07 23:59:59',
     color: 'amber',
     isFullDay: true,
   },

package/src/components/TextEditor/TextEditor.story.vue

@@ -16,7 +16,7 @@ const value = ref(`
     <li>Item 2</li>
   </ul>
   <p>
-    <a href="https://monakerp.com">Melon</a>
+    <a href="https://devel.monakerp.com">Melon</a>
   </p>
   <pre><code class="language-javascript">import { Button } from 'pimelon-ui'
 const value = ref(true);</code>

package/src/components/TextEditor/emoji-extension.js

@@ -25,6 +25,24 @@ export default Extension.create({
             .filter((item) =>
               item.name.toLowerCase().includes(query.toLowerCase()),
             )
+            .sort((a, b) => {
+              const aName = a.name.toLowerCase()
+              const bName = b.name.toLowerCase()
+              const queryLower = query.toLowerCase()
+
+              // Exact matches first
+              if (aName === queryLower && bName !== queryLower) return -1
+              if (bName === queryLower && aName !== queryLower) return 1
+
+              // Then names starting with the query
+              if (aName.startsWith(queryLower) && !bName.startsWith(queryLower))
+                return -1
+              if (bName.startsWith(queryLower) && !aName.startsWith(queryLower))
+                return 1
+
+              // Then sort by name length (shorter first)
+              return aName.length - bName.length
+            })
             .slice(0, 5)
         },
         render: () => {