edvoyui-component-library-test-flight 0.0.229 → 0.0.230

package/dist/components/timeLine/EUITimeLine.d.ts

@@ -6,10 +6,19 @@ interface ITimeLine {
     date?: string;
     dateTime?: string;
     showmore?: any;
+    [key: string]: any;
 }
 declare function __VLS_template(): {
     attrs: Partial<{}>;
     slots: {
+        dateIcon?(_: {
+            date: Date | null;
+            label: string;
+        }): any;
+        dateHeader?(_: {
+            date: Date | null;
+            label: string;
+        }): any;
         line?(_: {
             type: "icon" | "image" | "view";
         }): any;
@@ -49,7 +58,7 @@ declare const __VLS_component: import('../../../node_modules/vue').DefineCompone
             of<T>(...items: T[]): T[];
             readonly [Symbol.species]: ArrayConstructor;
         };
-        default: never[];
+        default: () => never[];
     };
     type: {
         type: PropType<"view" | "icon" | "image">;
@@ -63,6 +72,14 @@ declare const __VLS_component: import('../../../node_modules/vue').DefineCompone
         type: BooleanConstructor;
         default: boolean;
     };
+    groupByDate: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    dateKey: {
+        type: StringConstructor;
+        default: string;
+    };
 }>, {}, {}, {}, {}, import('../../../node_modules/vue').ComponentOptionsMixin, import('../../../node_modules/vue').ComponentOptionsMixin, {}, string, import('../../../node_modules/vue').PublicProps, Readonly<import('../../../node_modules/vue').ExtractPropTypes<{
     items: {
         type: {
@@ -79,7 +96,7 @@ declare const __VLS_component: import('../../../node_modules/vue').DefineCompone
             of<T>(...items: T[]): T[];
             readonly [Symbol.species]: ArrayConstructor;
         };
-        default: never[];
+        default: () => never[];
     };
     type: {
         type: PropType<"view" | "icon" | "image">;
@@ -93,11 +110,21 @@ declare const __VLS_component: import('../../../node_modules/vue').DefineCompone
         type: BooleanConstructor;
         default: boolean;
     };
+    groupByDate: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    dateKey: {
+        type: StringConstructor;
+        default: string;
+    };
 }>> & Readonly<{}>, {
     type: "icon" | "image" | "view";
     icon: string | Record<string, any>;
     items: ITimeLine[];
     showMore: boolean;
+    groupByDate: boolean;
+    dateKey: string;
 }, {}, {}, {}, string, import('../../../node_modules/vue').ComponentProvideOptions, true, {}, HTMLDivElement>;
 declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
 export default _default;

package/dist/components/timeLine/EUITimeLine.vue

@@ -1,119 +1,149 @@
 <template>
   <div>
     <ul role="list" class="p-4 space-y-6">
-      <li
-        v-for="(item, itemIdx) in items"
-        :data="item"
-        :key="`timeline_${itemIdx}`"
-        class="relative flex gap-x-4 group"
-        :type="type"
-        :timeline-icon="icon"
-        :show-more="showMore"
-      >
-        <div
-          :class="[
-            itemIdx === items.length - 1 ? 'h-6' : '-bottom-6',
-            'absolute left-0 top-0 flex w-6 justify-center',
-          ]"
-        >
-        <slot name="line" :type="type">
+      <template v-for="group in timelineGroups" :key="group.key">
+        <li v-if="groupByDate" class="relative flex items-center gap-x-4">
           <div
-            :class="[
-              type === 'icon' ? 'w-0.5 bg-green-500' : 'w-px bg-gray-200',
-            ]"
-          />
-        </slot>
-
-        </div>
-        <template v-if="type === 'image'">
-          <slot name="image" :data="item" :dataIndex="itemIdx">
-            <img
-              :src="item.person?.imageUrl"
-              alt=""
-              class="relative flex-initial flex-shrink-0 rounded-full size-6 bg-gray-50"
-            />
-          </slot>
-          <slot name="details" :data="item" :dataIndex="itemIdx">
+            class="absolute top-0 left-0 flex justify-center w-6 -bottom-6"
+            aria-hidden="true"
+          >
+            <div class="w-px bg-gray-200" />
+          </div>
+          <slot name="dateIcon" :date="group.date" :label="group.label">
             <div
-              class="flex-1 min-w-0 p-3 rounded-md ring-1 ring-inset ring-gray-200"
+              class="relative flex items-center justify-center flex-none -m-1 rounded-full bg-purple-100 size-8"
             >
-              <div class="flex justify-between gap-x-4 mb-0.5">
-                <div class="text-xs leading-5 text-gray-500">
-                  <span class="font-medium text-gray-900">{{
-                    item.person?.name
-                  }}</span>
-                </div>
-                <time
-                  :datetime="item.dateTime"
-                  class="flex-none text-xs leading-5 text-gray-500"
-                >
-                  {{ item.date + " " + item.dateTime }}
-                </time>
-              </div>
-              <p class="text-sm leading-6 text-gray-500">
-                {{ item.comment }}
-              </p>
-
-              <details
-                v-if="showMore"
-                :open="itemIdx === 0"
-                class="h-6 p-2 mt-2 text-xs text-gray-500 transition-colors duration-100 ease-in-out select-none open:border open:border-gray-100 open:bg-gray-50 open:rounded-md group open:h-auto"
-              >
-                <summary
-                  class="flex flex-row items-center justify-start text-sm leading-5 text-gray-900 list-none cursor-pointer"
-                >
-                  <slot name="showMoreTitle" :data="item" :open="itemIdx === 0">
-                    {{ item.showmore?.title || "More Details" }}
-                    <PlusIcon
-                      class="ml-auto -mr-1 transition-all duration-300 opacity-75 fill-current size-4 group-open:hidden"
-                    />
-                    <MinusIcon
-                      class="hidden ml-auto -mr-1 transition-all duration-300 opacity-75 fill-current size-4 group-open:inline-block"
-                    />
-                  </slot>
-                </summary>
-                <slot name="showMoreContent" :data="item">
-                  <div>{{ item.showmore?.content }}</div>
-                </slot>
-              </details>
+              <CalendarDaysIcon class="text-purple-500 size-4" />
             </div>
           </slot>
-        </template>
-        <template v-else>
+          <slot name="dateHeader" :date="group.date" :label="group.label">
+            <h3 class="text-sm font-semibold text-gray-900">
+              {{ group.label }}
+            </h3>
+          </slot>
+        </li>
+
+        <li
+          v-for="(item, itemIdx) in group.items"
+          :key="getItemKey(group.key, item, itemIdx)"
+          :data="item"
+          class="relative flex gap-x-4 group"
+          :type="type"
+          :timeline-icon="icon"
+          :show-more="showMore"
+        >
           <div
-            class="relative flex items-center justify-center flex-none bg-white size-6"
+            :class="[
+              itemIdx === group.items.length - 1 ? 'h-6' : '-bottom-6',
+              'absolute left-0 top-0 flex w-6 justify-center',
+            ]"
           >
-            <component
-              v-if="type === 'icon'"
-              :is="icon || CheckCircleIcon"
-              class="text-green-500 size-6"
-              aria-hidden="true"
-            />
-            <div
-              v-else
-              class="size-1.5 rounded-full bg-gray-100 ring-1 ring-gray-300 group-hover:bg-purple-200 group-hover:ring-purple-500"
-            />
+            <slot name="line" :type="type">
+              <div
+                :class="[
+                  type === 'icon' ? 'w-0.5 bg-green-500' : 'w-px bg-gray-200',
+                ]"
+              />
+            </slot>
           </div>
-          <p class="flex-auto py-0.5 text-xs leading-5 text-gray-500">
-            <span class="font-medium text-gray-900">{{
-              item.person?.name
-            }}</span>
-            {{ item?.comment }}
-          </p>
-          <time
-            :datetime="item.dateTime"
-            class="flex-none py-0.5 text-xs leading-5 text-gray-500"
-            >{{ item.date + " " + item.dateTime }}</time
-          >
-        </template>
-      </li>
+          <template v-if="type === 'image'">
+            <slot name="image" :data="item" :dataIndex="itemIdx">
+              <img
+                :src="item.person?.imageUrl"
+                alt=""
+                class="relative flex-initial flex-shrink-0 rounded-full size-6 bg-gray-50"
+              />
+            </slot>
+            <slot name="details" :data="item" :dataIndex="itemIdx">
+              <div
+                class="flex-1 min-w-0 p-3 rounded-md ring-1 ring-inset ring-gray-200"
+              >
+                <div class="flex justify-between gap-x-4 mb-0.5">
+                  <div class="text-xs leading-5 text-gray-500">
+                    <span class="font-medium text-gray-900">{{
+                      item.person?.name
+                    }}</span>
+                  </div>
+                  <time
+                    :datetime="item.dateTime"
+                    class="flex-none text-xs leading-5 text-gray-500"
+                  >
+                    {{ item.date + " " + item.dateTime }}
+                  </time>
+                </div>
+                <p class="text-sm leading-6 text-gray-500">
+                  {{ item.comment }}
+                </p>
+
+                <details
+                  v-if="showMore"
+                  :open="itemIdx === 0"
+                  class="h-6 p-2 mt-2 text-xs text-gray-500 transition-colors duration-100 ease-in-out select-none open:border open:border-gray-100 open:bg-gray-50 open:rounded-md group open:h-auto"
+                >
+                  <summary
+                    class="flex flex-row items-center justify-start text-sm leading-5 text-gray-900 list-none cursor-pointer"
+                  >
+                    <slot
+                      name="showMoreTitle"
+                      :data="item"
+                      :open="itemIdx === 0"
+                    >
+                      {{ item.showmore?.title || "More Details" }}
+                      <PlusIcon
+                        class="ml-auto -mr-1 transition-all duration-300 opacity-75 fill-current size-4 group-open:hidden"
+                      />
+                      <MinusIcon
+                        class="hidden ml-auto -mr-1 transition-all duration-300 opacity-75 fill-current size-4 group-open:inline-block"
+                      />
+                    </slot>
+                  </summary>
+                  <slot name="showMoreContent" :data="item">
+                    <div>{{ item.showmore?.content }}</div>
+                  </slot>
+                </details>
+              </div>
+            </slot>
+          </template>
+          <template v-else>
+            <div
+              class="relative flex items-center justify-center flex-none bg-white size-6"
+            >
+              <component
+                v-if="type === 'icon'"
+                :is="icon || CheckCircleIcon"
+                class="text-green-500 size-6"
+                aria-hidden="true"
+              />
+              <div
+                v-else
+                class="size-1.5 rounded-full bg-gray-100 ring-1 ring-gray-300 group-hover:bg-purple-200 group-hover:ring-purple-500"
+              />
+            </div>
+            <p class="flex-auto py-0.5 text-xs leading-5 text-gray-500">
+              <span class="font-medium text-gray-900">{{
+                item.person?.name
+              }}</span>
+              {{ item?.comment }}
+            </p>
+            <time
+              :datetime="item.dateTime"
+              class="flex-none py-0.5 text-xs leading-5 text-gray-500"
+              >{{ item.date + " " + item.dateTime }}</time
+            >
+          </template>
+        </li>
+      </template>
     </ul>
   </div>
 </template>
 
 <script setup lang="ts">
-import { PropType, toRefs } from "vue";
-import { MinusIcon, PlusIcon } from "@heroicons/vue/24/outline";
+import { computed, PropType, toRefs } from "vue";
+import {
+  CalendarDaysIcon,
+  MinusIcon,
+  PlusIcon,
+} from "@heroicons/vue/24/outline";
 import { CheckCircleIcon } from "@heroicons/vue/24/solid";
 
 interface ITimeLine {
@@ -123,12 +153,20 @@ interface ITimeLine {
   date?: string;
   dateTime?: string;
   showmore?: any;
+  [key: string]: any;
+}
+
+interface ITimeLineGroup {
+  key: string;
+  label: string;
+  date: Date | null;
+  items: ITimeLine[];
 }
 
 const props = defineProps({
   items: {
     type: Array<ITimeLine>,
-    default: [],
+    default: () => [],
   },
   type: {
     type: String as PropType<"view" | "icon" | "image">,
@@ -142,7 +180,74 @@ const props = defineProps({
     type: Boolean,
     default: false,
   },
+  groupByDate: {
+    type: Boolean,
+    default: false,
+  },
+  dateKey: {
+    type: String,
+    default: "createdAt",
+  },
 });
 
-const { items, type, icon, showMore } = toRefs(props);
+const { items, type, icon, showMore, groupByDate, dateKey } = toRefs(props);
+
+const getItemKey = (groupKey: string, item: ITimeLine, itemIdx: number) => {
+  if (!groupByDate.value) return `timeline_${itemIdx}`;
+  return `timeline_${groupKey}_${item.id ?? itemIdx}`;
+};
+
+const getLocalDateKey = (date: Date) => {
+  const year = date.getFullYear();
+  const month = String(date.getMonth() + 1).padStart(2, "0");
+  const day = String(date.getDate()).padStart(2, "0");
+  return `${year}-${month}-${day}`;
+};
+
+const getDateLabel = (date: Date | null) => {
+  if (!date) return "Unknown date";
+
+  const today = new Date();
+  const yesterday = new Date(today);
+  yesterday.setDate(today.getDate() - 1);
+
+  const dateKeyValue = getLocalDateKey(date);
+  if (dateKeyValue === getLocalDateKey(today)) return "Today";
+  if (dateKeyValue === getLocalDateKey(yesterday)) return "Yesterday";
+
+  return new Intl.DateTimeFormat("en-GB", {
+    day: "numeric",
+    month: "short",
+    year: "numeric",
+  }).format(date);
+};
+
+const timelineGroups = computed<ITimeLineGroup[]>(() => {
+  if (!groupByDate.value) {
+    return [{ key: "all", label: "", date: null, items: items.value }];
+  }
+
+  const groups = new Map<string, ITimeLineGroup>();
+
+  items.value.forEach((item) => {
+    const rawDate = item[dateKey.value];
+    const parsedDate = rawDate ? new Date(rawDate) : null;
+    const date =
+      parsedDate && !Number.isNaN(parsedDate.getTime()) ? parsedDate : null;
+    const key = date ? getLocalDateKey(date) : "unknown";
+
+    if (!groups.has(key)) {
+      groups.set(key, {
+        key,
+        label: getDateLabel(date),
+        date,
+        items: [],
+      });
+    }
+
+    groups.get(key)?.items.push(item);
+  });
+
+  return Array.from(groups.values());
+});
 </script>