sprintify-ui 0.1.17 → 0.2.0

package/src/components/BaseLayoutNotificationDropdown.vue

@@ -1,144 +1,144 @@
-<template>
-  <BaseMenu
-    class="inline-block"
-    :position="mobile ? 'custom' : 'bottom-left'"
-    :menu-class="['sm:w-[320px] w-[280px]', mobile ? 'right-4' : '']"
-  >
-    <template #button="{ open }">
-      <div
-        class="relative flex items-center rounded-md p-1.5 hover:bg-slate-100"
-        :class="[open ? 'bg-slate-100' : '']"
-        @click="onOpen"
-      >
-        <BaseIcon icon="fa-solid:bell" :class="[iconClasses]"></BaseIcon>
-        <BaseCounter
-          v-if="notificationsConfig.items.length"
-          class="absolute top-0 right-0"
-          :size="counterSize"
-          :count="notificationsConfig.items.length"
-        ></BaseCounter>
-      </div>
-    </template>
-
-    <template #items>
-      <template
-        v-for="notification in notificationsConfig.items"
-        :key="notification.id + 'link'"
-      >
-        <BaseLayoutNotificationItem
-          :notification="notification"
-          @click="onClick"
-        ></BaseLayoutNotificationItem>
-      </template>
-
-      <div
-        v-if="notificationsConfig.items.length == 0"
-        class="flex items-center justify-center p-6"
-      >
-        <div class="">
-          <BaseIcon
-            icon="heroicons:inbox-stack"
-            class="mx-auto mb-2 h-8 w-8 text-slate-400"
-          ></BaseIcon>
-          <p class="text-center text-sm text-slate-700">
-            {{ t('sui.notifications_empty') }}
-          </p>
-        </div>
-      </div>
-
-      <div
-        v-if="notificationsConfig.footerTo"
-        class="mt-1 border-t border-slate-200 pt-1"
-      >
-        <MenuItem v-slot="{ active, close }">
-          <RouterLink :to="notificationsConfig.footerTo" @mouseup="close">
-            <div
-              class="hover block px-3 py-2 text-center text-sm font-medium text-primary-600 hover:bg-slate-100"
-              :class="[active ? 'bg-slate-100' : '']"
-            >
-              {{
-                notificationsConfig.footerLabel
-                  ? notificationsConfig.footerLabel
-                  : t('sui.see_all_notifications')
-              }}
-            </div>
-          </RouterLink>
-        </MenuItem>
-      </div>
-    </template>
-  </BaseMenu>
-</template>
-
-<script lang="ts" setup>
-import { PropType } from 'vue';
-import { Icon as BaseIcon } from '@iconify/vue';
-import BaseCounter from './BaseCounter.vue';
-import BaseLayoutNotificationItem from './BaseLayoutNotificationItem.vue';
-import BaseMenu from './BaseMenu.vue';
-import { useBreakpoints } from '@/composables/breakpoints';
-import { NotificationsConfig } from '../types';
-import { MenuItem } from '@headlessui/vue';
-import { Notification } from '@/types/Notification';
-import { t } from '@/i18n';
-
-const emit = defineEmits(['click', 'open']);
-
-const props = defineProps({
-  notificationsConfig: {
-    required: true,
-    type: Object as PropType<NotificationsConfig>,
-  },
-  dark: {
-    default: false,
-    type: Boolean,
-  },
-  size: {
-    default: 'md',
-    type: String as PropType<'xs' | 'sm' | 'md'>,
-  },
-});
-
-const breakpoints = useBreakpoints();
-
-const mobile = computed((): boolean => {
-  return breakpoints.smaller('sm').value;
-});
-
-function onClick(notification: Notification) {
-  emit('click', notification);
-}
-
-function onOpen() {
-  emit('open');
-}
-
-const iconClasses = computed(() => {
-  const classList = [''];
-
-  if (props.dark) {
-    classList.push('text-slate-300');
-  } else {
-    classList.push('text-slate-600');
-  }
-
-  if (props.size == 'xs') {
-    classList.push('h-4 w-4');
-  } else if (props.size == 'sm') {
-    classList.push('h-5 w-5');
-  } else {
-    classList.push('h-6 w-6');
-  }
-
-  return classList;
-});
-
-const counterSize = computed(() => {
-  if (props.size == 'xs') {
-    return 'xs';
-  } else if (props.size == 'sm') {
-    return 'xs';
-  } else {
-    return 'sm';
-  }
-});
-</script>
+<template>
+  <BaseMenu
+    class="inline-block"
+    :position="mobile ? 'custom' : 'bottom-left'"
+    :tw-menu="['sm:w-[320px] w-[280px]', mobile ? 'right-4' : '']"
+  >
+    <template #button="{ open }">
+      <div
+        class="relative flex items-center rounded-md p-1.5 hover:bg-slate-100"
+        :class="[open ? 'bg-slate-100' : '']"
+        @click="onOpen"
+      >
+        <BaseIcon icon="fa-solid:bell" :class="[iconClasses]"></BaseIcon>
+        <BaseCounter
+          v-if="notificationsConfig.items.length"
+          class="absolute top-0 right-0"
+          :size="counterSize"
+          :count="notificationsConfig.items.length"
+        ></BaseCounter>
+      </div>
+    </template>
+
+    <template #items>
+      <template
+        v-for="notification in notificationsConfig.items"
+        :key="notification.id + 'link'"
+      >
+        <BaseLayoutNotificationItem
+          :notification="notification"
+          @click="onClick"
+        ></BaseLayoutNotificationItem>
+      </template>
+
+      <div
+        v-if="notificationsConfig.items.length == 0"
+        class="flex items-center justify-center p-6"
+      >
+        <div class="">
+          <BaseIcon
+            icon="heroicons:inbox-stack"
+            class="mx-auto mb-2 h-8 w-8 text-slate-400"
+          ></BaseIcon>
+          <p class="text-center text-sm text-slate-700">
+            {{ t('sui.notifications_empty') }}
+          </p>
+        </div>
+      </div>
+
+      <div
+        v-if="notificationsConfig.footerTo"
+        class="mt-1 border-t border-slate-200 pt-1"
+      >
+        <MenuItem v-slot="{ active, close }">
+          <RouterLink :to="notificationsConfig.footerTo" @mouseup="close">
+            <div
+              class="hover block px-3 py-2 text-center text-sm font-medium text-primary-600 hover:bg-slate-100"
+              :class="[active ? 'bg-slate-100' : '']"
+            >
+              {{
+                notificationsConfig.footerLabel
+                  ? notificationsConfig.footerLabel
+                  : t('sui.see_all_notifications')
+              }}
+            </div>
+          </RouterLink>
+        </MenuItem>
+      </div>
+    </template>
+  </BaseMenu>
+</template>
+
+<script lang="ts" setup>
+import { PropType } from 'vue';
+import { Icon as BaseIcon } from '@iconify/vue';
+import BaseCounter from './BaseCounter.vue';
+import BaseLayoutNotificationItem from './BaseLayoutNotificationItem.vue';
+import BaseMenu from './BaseMenu.vue';
+import { useBreakpoints } from '@/composables/breakpoints';
+import { NotificationsConfig } from '../types';
+import { MenuItem } from '@headlessui/vue';
+import { Notification } from '@/types/Notification';
+import { t } from '@/i18n';
+
+const emit = defineEmits(['click', 'open']);
+
+const props = defineProps({
+  notificationsConfig: {
+    required: true,
+    type: Object as PropType<NotificationsConfig>,
+  },
+  dark: {
+    default: false,
+    type: Boolean,
+  },
+  size: {
+    default: 'md',
+    type: String as PropType<'xs' | 'sm' | 'md'>,
+  },
+});
+
+const breakpoints = useBreakpoints();
+
+const mobile = computed((): boolean => {
+  return breakpoints.smaller('sm').value;
+});
+
+function onClick(notification: Notification) {
+  emit('click', notification);
+}
+
+function onOpen() {
+  emit('open');
+}
+
+const iconClasses = computed(() => {
+  const classList = [''];
+
+  if (props.dark) {
+    classList.push('text-slate-300');
+  } else {
+    classList.push('text-slate-600');
+  }
+
+  if (props.size == 'xs') {
+    classList.push('h-4 w-4');
+  } else if (props.size == 'sm') {
+    classList.push('h-5 w-5');
+  } else {
+    classList.push('h-6 w-6');
+  }
+
+  return classList;
+});
+
+const counterSize = computed(() => {
+  if (props.size == 'xs') {
+    return 'xs';
+  } else if (props.size == 'sm') {
+    return 'xs';
+  } else {
+    return 'sm';
+  }
+});
+</script>

package/src/components/BaseLayoutNotificationItem.vue

@@ -1,43 +1,43 @@
-<template>
-  <MenuItem v-if="notification.to" v-slot="{ active, close }">
-    <RouterLink :to="notification.to" @mouseup="onClick(close)">
-      <BaseLayoutNotificationItemContent
-        :active="active"
-        :notification="notification"
-      ></BaseLayoutNotificationItemContent>
-    </RouterLink>
-  </MenuItem>
-  <div v-else>
-    <MenuItem v-slot="{ active }" as="button" class="w-full text-left">
-      <BaseLayoutNotificationItemContent
-        :active="active"
-        :notification="notification"
-        @mouseup="onClick()"
-      ></BaseLayoutNotificationItemContent>
-    </MenuItem>
-  </div>
-</template>
-
-<script lang="ts" setup>
-import { Notification } from '@/types/Notification';
-import { MenuItem } from '@headlessui/vue';
-import { PropType } from 'vue';
-import BaseLayoutNotificationItemContent from './BaseLayoutNotificationItemContent.vue';
-
-const emit = defineEmits(['click']);
-
-const props = defineProps({
-  notification: {
-    required: true,
-    type: Object as PropType<Notification>,
-  },
-});
-
-function onClick(close: () => void | null) {
-  emit('click', props.notification);
-
-  if (close) {
-    close();
-  }
-}
-</script>
+<template>
+  <MenuItem v-if="notification.to" v-slot="{ active, close }">
+    <RouterLink :to="notification.to" @mouseup="onClick(close)">
+      <BaseLayoutNotificationItemContent
+        :active="active"
+        :notification="notification"
+      ></BaseLayoutNotificationItemContent>
+    </RouterLink>
+  </MenuItem>
+  <div v-else>
+    <MenuItem v-slot="{ active }" as="button" class="w-full text-left">
+      <BaseLayoutNotificationItemContent
+        :active="active"
+        :notification="notification"
+        @mouseup="onClick()"
+      ></BaseLayoutNotificationItemContent>
+    </MenuItem>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { Notification } from '@/types/Notification';
+import { MenuItem } from '@headlessui/vue';
+import { PropType } from 'vue';
+import BaseLayoutNotificationItemContent from './BaseLayoutNotificationItemContent.vue';
+
+const emit = defineEmits(['click']);
+
+const props = defineProps({
+  notification: {
+    required: true,
+    type: Object as PropType<Notification>,
+  },
+});
+
+function onClick(close: () => void | null) {
+  emit('click', props.notification);
+
+  if (close) {
+    close();
+  }
+}
+</script>

package/src/components/BaseLayoutNotificationItemContent.vue

@@ -1,27 +1,27 @@
-<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>
-    <BaseDisplayRelativeTime
-      v-if="notification.created_at"
-      v-slot="{ readableDate }"
-      :value="notification.created_at"
-    >
-      <p class="mt-1 text-xs text-slate-400">
-        {{ readableDate }}
-      </p>
-    </BaseDisplayRelativeTime>
-  </div>
-</template>
-
-<script lang="ts" setup>
-import { Notification } from '@/types/Notification';
-import BaseDisplayRelativeTime from './BaseDisplayRelativeTime.vue';
-
-defineProps<{
-  active: boolean;
-  notification: Notification;
-}>();
-</script>
+<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>
+    <BaseDisplayRelativeTime
+      v-if="notification.created_at"
+      v-slot="{ readableDate }"
+      :value="notification.created_at"
+    >
+      <p class="mt-1 text-xs text-slate-400">
+        {{ readableDate }}
+      </p>
+    </BaseDisplayRelativeTime>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { Notification } from '@/types/Notification';
+import BaseDisplayRelativeTime from './BaseDisplayRelativeTime.vue';
+
+defineProps<{
+  active: boolean;
+  notification: Notification;
+}>();
+</script>