sprintify-ui 0.0.60 → 0.0.62

package/dist/types/src/components/BaseLayoutNotificationItemContent.vue.d.ts

@@ -0,0 +1,24 @@
+import { Notification } from '@/types/Notification';
+import { PropType } from 'vue';
+declare const _default: import("vue").DefineComponent<{
+    active: {
+        default: boolean;
+        type: BooleanConstructor;
+    };
+    notification: {
+        required: true;
+        type: PropType<Notification>;
+    };
+}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    active: {
+        default: boolean;
+        type: BooleanConstructor;
+    };
+    notification: {
+        required: true;
+        type: PropType<Notification>;
+    };
+}>>, {
+    active: boolean;
+}>;
+export default _default;

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

@@ -2,7 +2,7 @@ import { RouteLocationRaw } from 'vue-router';
 interface Notification {
     id: string;
     text: string;
-    to: RouteLocationRaw;
+    to?: RouteLocationRaw;
     created_at?: string;
 }
 export { Notification };

package/package.json

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

package/src/components/BaseLayoutNotificationItem.vue

@@ -1,32 +1,43 @@
 <template>
-  <router-link v-slot="{ href, navigate }" custom :to="notification.to">
+  <router-link
+    v-if="notification.to"
+    v-slot="{ href, navigate }"
+    custom
+    :to="notification.to"
+  >
     <MenuItem
       v-slot="{ active }"
       as="a"
       :href="href"
       @click.prevent="onClick(navigate)"
     >
-      <div class="px-3 py-2" :class="[active ? 'bg-slate-100' : '']">
-        <div
-          class="text-sm leading-tight text-slate-800"
-          v-html="notification.text"
-        ></div>
-        <p v-if="createdAt" class="mt-1 text-xs text-slate-400">
-          {{ createdAt }}
-        </p>
-      </div>
+      <BaseLayoutNotificationItemContent
+        :active="active"
+        :notification="notification"
+      ></BaseLayoutNotificationItemContent>
     </MenuItem>
   </router-link>
+  <div v-else>
+    <MenuItem
+      v-slot="{ active }"
+      as="button"
+      class="w-full text-left"
+      @click.prevent="onClick()"
+    >
+      <BaseLayoutNotificationItemContent
+        :active="active"
+        :notification="notification"
+      ></BaseLayoutNotificationItemContent>
+    </MenuItem>
+  </div>
 </template>
 
 <script lang="ts" setup>
 import { Notification } from '@/types/Notification';
 import { MenuItem } from '@headlessui/vue';
-import { DateTime } from 'luxon';
 import { PropType } from 'vue';
-import humanizeDuration from 'humanize-duration';
+import BaseLayoutNotificationItemContent from './BaseLayoutNotificationItemContent.vue';
 
-const i18n = useI18n();
 const emit = defineEmits(['click']);
 
 const props = defineProps({
@@ -36,34 +47,10 @@ const props = defineProps({
   },
 });
 
-const now = ref(DateTime.now());
-
-const intervalId = setInterval(() => {
-  now.value.plus({ second: 1 });
-}, 1000);
-
-const createdAt = computed(() => {
-  if (props.notification.created_at) {
-    const duration = DateTime.fromISO(props.notification.created_at, {
-      zone: 'utc',
-    }).diff(now.value).milliseconds;
-
-    const durationHuman = humanizeDuration(duration, {
-      language: i18n.locale.value,
-      round: true,
-      largest: 1,
-    });
-
-    return i18n.t('sui.x_ago', { duration: durationHuman });
-  }
-});
-
-onBeforeUnmount(() => {
-  clearInterval(intervalId);
-});
-
-function onClick(navigate: () => void) {
+function onClick(navigate: (() => void) | null) {
   emit('click', props.notification);
-  navigate();
+  if (navigate) {
+    navigate();
+  }
 }
 </script>

package/src/components/BaseLayoutNotificationItemContent.vue

@@ -0,0 +1,57 @@
+<template>
+  <div class="px-3 py-2" :class="[active ? 'bg-slate-100' : '']">
+    <div
+      class="text-sm leading-tight text-slate-800"
+      v-html="notification.text"
+    ></div>
+    <p v-if="createdAt" class="mt-1 text-xs text-slate-400">
+      {{ createdAt }}
+    </p>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { Notification } from '@/types/Notification';
+import { DateTime } from 'luxon';
+import { PropType } from 'vue';
+import humanizeDuration from 'humanize-duration';
+
+const i18n = useI18n();
+
+const props = defineProps({
+  active: {
+    default: false,
+    type: Boolean,
+  },
+  notification: {
+    required: true,
+    type: Object as PropType<Notification>,
+  },
+});
+
+const now = ref(DateTime.now());
+
+const intervalId = setInterval(() => {
+  now.value.plus({ second: 1 });
+}, 1000);
+
+const createdAt = computed(() => {
+  if (props.notification.created_at) {
+    const duration = DateTime.fromISO(props.notification.created_at, {
+      zone: 'utc',
+    }).diff(now.value).milliseconds;
+
+    const durationHuman = humanizeDuration(duration, {
+      language: i18n.locale.value,
+      round: true,
+      largest: 1,
+    });
+
+    return i18n.t('sui.x_ago', { duration: durationHuman });
+  }
+});
+
+onBeforeUnmount(() => {
+  clearInterval(intervalId);
+});
+</script>

package/src/components/BaseLayoutSidebarConfigurable.stories.js

@@ -77,7 +77,6 @@ export default {
         {
           id: '1',
           text: 'You have a new message',
-          to: '/',
           created_at: '2022-01-01T00:00:00',
         },
         {

package/src/types/Notification.ts

@@ -3,7 +3,7 @@ import { RouteLocationRaw } from 'vue-router';
 interface Notification {
   id: string;
   text: string;
-  to: RouteLocationRaw;
+  to?: RouteLocationRaw;
   created_at?: string;
 }