sprintify-ui 0.0.59 → 0.0.61

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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sprintify-ui",
-  "version": "0.0.59",
+  "version": "0.0.61",
   "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/components/BaseSelect.stories.js

@@ -33,7 +33,14 @@ const Template = (args) => ({
     // For optional, make sure the default option is selected
     // For required, try to submit, it should be prevented
     const value = ref('test');
-    return { args, value, onSubmit };
+
+    // Test if dynamically added options are available & selected
+    const showTest = ref(false);
+    setTimeout(() => {
+      showTest.value = true;
+    }, 3000);
+
+    return { args, value, showTest, onSubmit };
   },
   template: `
   <form @submit.prevent="onSubmit" class="border-none">
@@ -42,6 +49,7 @@ const Template = (args) => ({
       <option value="javascript">JavaScript</option>
       <option value="typescript">Typescript</option>
       <option value="golang">Golang</option>
+      <option v-if="showTest" value="test">Test</option>
     </BaseSelect>
     <button type="submit" class="btn btn-primary mt-5">Submit</button>
   </form>

package/src/components/BaseSelect.vue

@@ -113,9 +113,13 @@ const modelValueInternal = computed(() => {
 /**
  * Checks if the current modelValue is valid
  */
-useMutationObserver(select.value, () => {
-  options.value = getOptions();
-});
+useMutationObserver(
+  select,
+  () => {
+    options.value = getOptions();
+  },
+  { attributes: false, childList: true }
+);
 
 onMounted(() => {
   options.value = getOptions();