sprintify-ui 0.2.28 → 0.2.30

package/dist/types/src/types/TimelineItem.d.ts

@@ -4,4 +4,6 @@ export interface TimelineItem {
     description?: null | string;
     date?: string | null;
     color?: string | null;
+    onEdit?: () => void | Promise<void>;
+    onDelete?: () => void | Promise<void>;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sprintify-ui",
-  "version": "0.2.28",
+  "version": "0.2.30",
   "scripts": {
     "build": "rimraf dist && vue-tsc && vite build",
     "build-fast": "rimraf dist && vite build",

package/src/components/BaseTimeline.stories.js

@@ -29,6 +29,8 @@ const items = [
       'Lorem nostrud quis aute elit ea Lorem magna eiusmod ipsum. Eu ipsum eiusmod ad minim adipisicing irure. Fugiat ut adipisicing consequat dolor.',
     color: 'danger',
     date: null,
+    onEdit: () => alert('edit'),
+    onDelete: () => alert('delete'),
   },
   {
     title: 'Advanced to phone screening by Bethany Blake',

package/src/components/BaseTimeline.vue

@@ -8,7 +8,10 @@
         v-for="(item, index) in items"
         :key="index"
       >
-        <div class="relative pb-8">
+        <div
+          class="relative"
+          :class="[!item.onEdit && !item.onDelete ? 'pb-8' : 'pb-3']"
+        >
           <span
             v-if="index != items.length - 1"
             class="absolute top-4 left-4 -ml-px h-full w-0.5 bg-slate-300"

package/src/components/BaseTimelineItem.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="relative flex space-x-3">
+  <div class="relative group flex space-x-3">
     <div>
       <span
         :class="[
@@ -8,7 +8,7 @@
         :style="colorStyle"
       >
         <BaseIcon
-          class="h-5 w-5"
+          class="h-[18px] w-[18px]"
           aria-hidden="true"
           :icon="item.icon"
         />
@@ -28,6 +28,26 @@
         >
           {{ item.description }}
         </p>
+        <p
+          class="empty:hidden"
+        >
+          <button
+            v-if="item.onEdit"
+            type="button"
+            class="text-slate-900 opacity-0 group-hover:opacity-100 transition-opacity duration-50 inline underline text-xs mr-3"
+            @click="item.onEdit"
+          >
+            {{ t('sui.edit') }}
+          </button>
+          <button
+            v-if="item.onDelete"
+            type="button"
+            class="text-slate-500 opacity-0 group-hover:opacity-100 transition-opacity duration-50 inline underline text-xs"
+            @click="item.onDelete"
+          >
+            {{ t('sui.delete') }}
+          </button>
+        </p>
       </div>
       <div
         v-if="item.date"
@@ -44,6 +64,7 @@ import { TimelineItem } from '../types/TimelineItem';
 import { PropType } from 'vue';
 import { Icon as BaseIcon } from '@iconify/vue';
 import { getColorConfig } from '@/utils/colors';
+import { t } from '@/i18n';
 
 const props = defineProps({
   item: {

package/src/stories/PageShow.vue

@@ -388,7 +388,7 @@ const timelineItems = [
     title: 'Order placed',
     description: 'Philippe Lamarche placed this order on Online Store (checkout #36886026060090).',
     icon: 'heroicons:inbox-solid',
-    color: null,
+    color: 'success',
     date: '1:56 PM',
   },
   {

package/src/types/TimelineItem.ts

@@ -4,4 +4,6 @@ export interface TimelineItem {
   description?: null | string;
   date?: string | null;
   color?: string | null;
+  onEdit?: () => void | Promise<void>;
+  onDelete?: () => void | Promise<void>;
 }