sprintify-ui 0.0.19 → 0.0.21

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

@@ -144,8 +144,8 @@ declare const _default: import("vue").DefineComponent<{
         default: () => {};
     };
 }>>, {
-    label: string;
     meta: Record<string, any> | unknown[];
+    label: string;
     width: number;
     toggle: boolean;
     field: string;

package/dist/types/src/components/index.d.ts

@@ -1,3 +1,4 @@
+import BaseActionItem from './BaseActionItem.vue';
 import BaseAlert from './BaseAlert.vue';
 import BaseApp from './BaseApp.vue';
 import BaseAppDialogs from './BaseAppDialogs.vue';
@@ -59,4 +60,8 @@ import BaseTable from './BaseTable.vue';
 import BaseTableColumn from './BaseTableColumn.vue';
 import BaseTextarea from './BaseTextarea.vue';
 import BaseTextareaAutoresize from './BaseTextareaAutoresize.vue';
-export { BaseAlert, BaseApp, BaseAppDialogs, BaseAppNotifications, BaseAutocomplete, BaseAutocompleteFetch, BaseAvatar, BaseBadge, BaseBelongsTo, BaseBoolean, BaseBreadcrumbs, BaseButton, BaseCard, BaseCardRow, BaseCharacterCounter, BaseClipboard, BaseContainer, BaseCounter, BaseDataIterator, BaseDataTable, BaseDatePicker, BaseDateSelect, BaseDescriptionList, BaseDescriptionListItem, BaseDialog, BaseFilePicker, BaseFileUploader, BaseHasMany, BaseIcon, BaseInput, BaseInputLabel, BaseLoadingCover, BaseMediaItem, BaseMediaLibrary, BaseMediaPreview, BaseMenu, BaseMenuItem, BaseModalCenter, BaseModalSide, BaseNavbar, BaseNavbarItem, BaseNavbarItemContent, BasePagination, BasePanel, BasePassword, BaseProcessRing, BaseReadMore, BaseSelect, BaseSideNavigation, BaseSideNavigationItem, BaseSkeleton, BaseSwitch, BaseSystemAlert, BaseTabs, BaseTabItem, BaseTagAutocomplete, BaseTagAutocompleteFetch, BaseTable, BaseTableColumn, BaseTextarea, BaseTextareaAutoresize, };
+import BaseLayoutStacked from './BaseLayoutStacked.vue';
+import BaseLayoutStackedConfigurable from './BaseLayoutStackedConfigurable.vue';
+import BaseLayoutSidebar from './BaseLayoutSidebar.vue';
+import BaseLayoutSidebarConfigurable from './BaseLayoutSidebarConfigurable.vue';
+export { BaseActionItem, BaseAlert, BaseApp, BaseAppDialogs, BaseAppNotifications, BaseAutocomplete, BaseAutocompleteFetch, BaseAvatar, BaseBadge, BaseBelongsTo, BaseBoolean, BaseBreadcrumbs, BaseButton, BaseCard, BaseCardRow, BaseCharacterCounter, BaseClipboard, BaseContainer, BaseCounter, BaseDataIterator, BaseDataTable, BaseDatePicker, BaseDateSelect, BaseDescriptionList, BaseDescriptionListItem, BaseDialog, BaseFilePicker, BaseFileUploader, BaseHasMany, BaseIcon, BaseInput, BaseInputLabel, BaseLoadingCover, BaseMediaItem, BaseMediaLibrary, BaseMediaPreview, BaseMenu, BaseMenuItem, BaseModalCenter, BaseModalSide, BaseNavbar, BaseNavbarItem, BaseNavbarItemContent, BasePagination, BasePanel, BasePassword, BaseProcessRing, BaseReadMore, BaseSelect, BaseSideNavigation, BaseSideNavigationItem, BaseSkeleton, BaseSwitch, BaseSystemAlert, BaseTabs, BaseTabItem, BaseTagAutocomplete, BaseTagAutocompleteFetch, BaseTable, BaseTableColumn, BaseTextarea, BaseTextareaAutoresize, BaseLayoutStacked, BaseLayoutStackedConfigurable, BaseLayoutSidebar, BaseLayoutSidebarConfigurable, };

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

@@ -32,6 +32,7 @@ declare const messages: {
             next_month: string;
             none: string;
             nothing_found: string;
+            notifications_empty: string;
             or: string;
             pagination_detail: string;
             previous: string;
@@ -40,6 +41,7 @@ declare const messages: {
             remove: string;
             remove_file: string;
             remove_file_description: string;
+            see_all_notifications: string;
             select_an_item: string;
             select_an_option: string;
             success: string;
@@ -56,6 +58,7 @@ declare const messages: {
             up_to_x: string;
             upload_failed: string;
             whoops: string;
+            x_ago: string;
             x_rows_selected: string;
             year: string;
             yes_delete: string;
@@ -90,6 +93,7 @@ declare const messages: {
             next_month: string;
             none: string;
             nothing_found: string;
+            notifications_empty: string;
             or: string;
             pagination_detail: string;
             previous: string;
@@ -98,6 +102,7 @@ declare const messages: {
             remove: string;
             remove_file: string;
             remove_file_description: string;
+            see_all_notifications: string;
             select_an_item: string;
             select_an_option: string;
             success: string;
@@ -114,6 +119,7 @@ declare const messages: {
             up_to_x: string;
             upload_failed: string;
             whoops: string;
+            x_ago: string;
             x_rows_selected: string;
             year: string;
             yes_delete: string;
@@ -159,6 +165,7 @@ declare const config: {
                 next_month: string;
                 none: string;
                 nothing_found: string;
+                notifications_empty: string;
                 or: string;
                 pagination_detail: string;
                 previous: string;
@@ -167,6 +174,7 @@ declare const config: {
                 remove: string;
                 remove_file: string;
                 remove_file_description: string;
+                see_all_notifications: string;
                 select_an_item: string;
                 select_an_option: string;
                 success: string;
@@ -183,6 +191,7 @@ declare const config: {
                 up_to_x: string;
                 upload_failed: string;
                 whoops: string;
+                x_ago: string;
                 x_rows_selected: string;
                 year: string;
                 yes_delete: string;
@@ -217,6 +226,7 @@ declare const config: {
                 next_month: string;
                 none: string;
                 nothing_found: string;
+                notifications_empty: string;
                 or: string;
                 pagination_detail: string;
                 previous: string;
@@ -225,6 +235,7 @@ declare const config: {
                 remove: string;
                 remove_file: string;
                 remove_file_description: string;
+                see_all_notifications: string;
                 select_an_item: string;
                 select_an_option: string;
                 success: string;
@@ -241,6 +252,7 @@ declare const config: {
                 up_to_x: string;
                 upload_failed: string;
                 whoops: string;
+                x_ago: string;
                 x_rows_selected: string;
                 year: string;
                 yes_delete: string;

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

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

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

@@ -1,5 +1,6 @@
 import { RouteLocationRaw } from 'vue-router';
 import { UploadedFile } from './UploadedFile';
+import { Notification as AppNotification } from './Notification';
 export interface Breadcrumb {
     icon?: string;
     to: RouteLocationRaw;
@@ -144,3 +145,11 @@ export interface Notification {
     color: 'info' | 'success' | 'danger' | 'warning';
     duration: number;
 }
+/**
+ * App Notification
+ */
+export interface NotificationsConfig {
+    items: AppNotification[];
+    footerLabel?: string;
+    footerTo?: RouteLocationRaw;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sprintify-ui",
-  "version": "0.0.19",
+  "version": "0.0.21",
   "scripts": {
     "build": "rimraf dist && vue-tsc && vite build",
     "build-fast": "rimraf dist && vite build",
@@ -17,15 +17,16 @@
     "@tailwindcss/typography": "^0.5.8",
     "@vueuse/core": "^9.0.0",
     "axios": "^0.26.1",
+    "humanize-duration": "^3.0.0",
     "lodash": "^4.17.21",
     "luxon": "^3.0.0",
+    "pikaday": "^1.8.2",
     "pinia": "^2.0.0",
     "qs": "^6.0.0",
     "tailwindcss": "^3.0.0",
     "vue": "^3.0.0",
     "vue-i18n": "^9.0.0",
-    "vue-router": "^4.0.0",
-    "pikaday": "^1.8.2"
+    "vue-router": "^4.0.0"
   },
   "dependencies": {
     "@headlessui/vue": "^1.7.4"
@@ -44,6 +45,7 @@
     "@tailwindcss/forms": "^0.5.3",
     "@tailwindcss/line-clamp": "^0.4.2",
     "@tailwindcss/typography": "^0.5.8",
+    "@types/humanize-duration": "^3.27.1",
     "@types/luxon": "^3.1.0",
     "@types/object-hash": "^2.2.1",
     "@types/pikaday": "^1.7.6",
@@ -63,6 +65,7 @@
     "eslint-plugin-storybook": "^0.6.7",
     "eslint-plugin-vue": "^9.7.0",
     "eslint-plugin-vue-scoped-css": "^2.2.0",
+    "humanize-duration": "^3.27.3",
     "lodash": "^4.17.21",
     "luxon": "^3.1.0",
     "object-hash": "^3.0.0",

package/src/components/BaseActionItem.vue

@@ -0,0 +1,68 @@
+<template>
+  <RouterLink
+    v-if="item.to"
+    v-slot="{ isActive, href: slotHref, navigate }"
+    custom
+    :to="item.to"
+  >
+    <a
+      :active="isActive"
+      :href="slotHref"
+      :class="itemClass"
+      :aria-current="isActive ? 'page' : undefined"
+      @click.prevent="onClick(navigate)"
+    >
+      <slot :active="isActive"> </slot>
+    </a>
+  </RouterLink>
+  <button
+    v-else-if="item.action"
+    type="button"
+    :class="itemClass"
+    @click="onClick(item.action)"
+  >
+    <slot :active="false"> </slot>
+  </button>
+  <a
+    v-else-if="item.href"
+    :href="item.href"
+    :class="itemClass"
+    @click="onClick()"
+  >
+    <slot :active="false"> </slot>
+  </a>
+</template>
+
+<script setup lang="ts">
+import { PropType } from 'vue';
+import { ActionItem } from '@/types/types';
+
+defineProps({
+  item: {
+    required: true,
+    type: Object as PropType<ActionItem>,
+  },
+  dark: {
+    default: false,
+    type: Boolean,
+  },
+  itemClass: {
+    default: '',
+    type: [String, Array, Object],
+  },
+});
+
+const closeMenu = inject('closeMenu') as () => void;
+
+const emit = defineEmits(['click']);
+
+type asyncFunc = () => Promise<void>;
+
+async function onClick(func: asyncFunc | null = null) {
+  if (func) {
+    await func();
+  }
+  emit('click');
+  closeMenu();
+}
+</script>

package/src/components/BaseLayoutNotificationDropdown.vue

@@ -0,0 +1,101 @@
+<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-full p-1.5"
+        :class="[open ? '' : '']"
+      >
+        <BaseIcon
+          icon="heroicons:bell"
+          class="h-6 w-6"
+          :class="[dark ? 'text-slate-300' : 'text-slate-600']"
+        ></BaseIcon>
+        <BaseCounter
+          v-if="notificationsConfig.items.length"
+          class="absolute top-0 right-0"
+          :count="notificationsConfig.items.length"
+        ></BaseCounter>
+      </div>
+    </template>
+
+    <template #items>
+      <template
+        v-for="notification in notificationsConfig.items"
+        :key="notification.id + 'link'"
+      >
+        <BaseLayoutNotificationItem
+          :notification="notification"
+        ></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"
+      >
+        <RouterLink
+          v-slot="{ href, navigate }"
+          custom
+          :to="notificationsConfig.footerTo"
+        >
+          <MenuItem as="a" :href="href" @click="navigate">
+            <div
+              class="hover block px-3 py-2 text-center text-sm font-medium text-primary-600 hover:bg-slate-100"
+            >
+              {{
+                notificationsConfig.footerLabel
+                  ? notificationsConfig.footerLabel
+                  : $t('sui.see_all_notifications')
+              }}
+            </div>
+          </MenuItem>
+        </RouterLink>
+      </div>
+    </template>
+  </BaseMenu>
+</template>
+
+<script lang="ts" setup>
+import { PropType } from 'vue';
+import { BaseIcon } from '.';
+import BaseCounter from './BaseCounter.vue';
+import BaseLayoutNotificationItem from './BaseLayoutNotificationItem.vue';
+import BaseMenu from './BaseMenu.vue';
+import { useBreakpoints } from '@/composables/breakpoints';
+import { NotificationsConfig } from '../types/types';
+import { MenuItem } from '@headlessui/vue';
+
+defineProps({
+  notificationsConfig: {
+    required: true,
+    type: Object as PropType<NotificationsConfig>,
+  },
+  dark: {
+    default: false,
+    type: Boolean,
+  },
+});
+
+const breakpoints = useBreakpoints();
+
+const mobile = computed((): boolean => {
+  return breakpoints.smaller('sm').value;
+});
+</script>

package/src/components/BaseLayoutNotificationItem.vue

@@ -0,0 +1,58 @@
+<template>
+  <router-link v-slot="{ href, navigate }" custom :to="notification.to">
+    <MenuItem v-slot="{ active }" as="a" :href="href" @click="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>
+    </MenuItem>
+  </router-link>
+</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';
+
+const i18n = useI18n();
+
+const props = defineProps({
+  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).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/BaseLayoutSidebar.vue

@@ -0,0 +1,199 @@
+<template>
+  <div class="min-h-full">
+    <TransitionRoot as="template" :show="showMobileMenu">
+      <Dialog
+        as="div"
+        class="relative z-40 xl:hidden"
+        @close="showMobileMenu = false"
+      >
+        <TransitionChild
+          as="template"
+          enter="transition-opacity ease-linear duration-300"
+          enter-from="opacity-0"
+          enter-to="opacity-100"
+          leave="transition-opacity ease-linear duration-300"
+          leave-from="opacity-100"
+          leave-to="opacity-0"
+        >
+          <div class="fixed inset-0 bg-slate-600 bg-opacity-75" />
+        </TransitionChild>
+
+        <div class="fixed inset-0 z-40 flex">
+          <TransitionChild
+            as="template"
+            enter="transition ease-in-out duration-300 transform"
+            enter-from="-translate-x-full"
+            enter-to="translate-x-0"
+            leave="transition ease-in-out duration-300 transform"
+            leave-from="translate-x-0"
+            leave-to="-translate-x-full"
+          >
+            <DialogPanel
+              class="relative flex w-full max-w-xs flex-1 flex-col pt-5 pb-4"
+              :class="[dark ? 'bg-slate-800' : 'bg-white']"
+            >
+              <TransitionChild
+                as="template"
+                enter="ease-in-out duration-300"
+                enter-from="opacity-0"
+                enter-to="opacity-100"
+                leave="ease-in-out duration-300"
+                leave-from="opacity-100"
+                leave-to="opacity-0"
+              >
+                <div class="absolute top-0 right-0 -mr-12 pt-2">
+                  <button
+                    type="button"
+                    class="ml-1 flex h-10 w-10 items-center justify-center rounded-full"
+                    @click="showMobileMenu = false"
+                  >
+                    <span class="sr-only">Close sidebar</span>
+                    <BaseIcon
+                      icon="heroicons:x-mark"
+                      class="h-6 w-6 text-white"
+                      aria-hidden="true"
+                    />
+                  </button>
+                </div>
+              </TransitionChild>
+              <div class="flex flex-shrink-0 items-center px-4">
+                <img class="block h-8 w-auto" :src="logoUrl" :alt="appName" />
+              </div>
+              <div class="mt-5 h-0 flex-1 overflow-y-auto">
+                <nav>
+                  <slot name="menu" />
+                </nav>
+              </div>
+            </DialogPanel>
+          </TransitionChild>
+          <div class="w-14 flex-shrink-0" aria-hidden="true">
+            <!-- Dummy element to force sidebar to shrink to fit close icon -->
+          </div>
+        </div>
+      </Dialog>
+    </TransitionRoot>
+
+    <div class="flex min-h-full flex-col xl:pl-64">
+      <div class="sticky top-0 left-0 z-10 shrink-0 shadow">
+        <BaseSystemAlert
+          v-for="systemAlert in systemAlerts"
+          :key="systemAlert.id"
+          :color="systemAlert.color"
+          :to="systemAlert.to"
+          :action="systemAlert.action"
+          :closable="systemAlert.closable"
+          @close="systemAlertStore.remove(systemAlert)"
+        >
+          {{ systemAlert.message }}
+        </BaseSystemAlert>
+
+        <div class="flex h-16 bg-white">
+          <button
+            type="button"
+            class="border-r border-slate-200 px-4 text-slate-500 xl:hidden"
+            @click="showMobileMenu = true"
+          >
+            <span class="sr-only">Open sidebar</span>
+            <BaseIcon
+              icon="heroicons:bars-3-bottom-left"
+              class="h-6 w-6"
+              aria-hidden="true"
+            />
+          </button>
+
+          <!-- Navbar -->
+          <div class="flex flex-1">
+            <slot name="navbar" />
+          </div>
+        </div>
+      </div>
+
+      <!-- Position: relative to contain Loading Covers -->
+      <main class="relative min-h-full flex-1">
+        <slot />
+      </main>
+    </div>
+
+    <!-- Static sidebar for desktop -->
+    <div class="z-10 hidden xl:fixed xl:inset-y-0 xl:flex xl:w-64 xl:flex-col">
+      <!-- Sidebar component, swap this element with another sidebar if you like -->
+      <div
+        class="flex min-h-0 flex-1 flex-col"
+        :class="[dark ? 'bg-slate-800' : 'bg-white shadow']"
+      >
+        <div
+          class="flex h-16 flex-shrink-0 items-center px-4"
+          :class="[dark ? 'bg-slate-900' : 'bg-white']"
+        >
+          <img class="block h-8 w-auto" :src="logoUrl" :alt="appName" />
+        </div>
+        <div class="flex flex-1">
+          <nav class="flex-1">
+            <slot name="menu" />
+          </nav>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+import {
+  Dialog,
+  DialogPanel,
+  TransitionChild,
+  TransitionRoot,
+} from '@headlessui/vue';
+
+import { useSystemAlertStore } from '../stores/systemAlerts';
+import { BaseIcon } from '.';
+import BaseSystemAlert from './BaseSystemAlert.vue';
+
+const props = defineProps({
+  appName: {
+    default: '',
+    type: String,
+  },
+  logoUrl: {
+    default: 'https://sprintify.witify.io/img/logo/logo-side-dark.svg',
+    type: String,
+  },
+  dark: {
+    default: false,
+    type: Boolean,
+  },
+});
+
+/**
+ * System Alert And Navigation size
+ */
+
+const systemAlertStore = useSystemAlertStore();
+
+const systemAlerts = computed(() => {
+  return systemAlertStore.systemAlerts;
+});
+
+/**
+ * Show/Hide sidebar
+ */
+
+const showMobileMenu = ref(false);
+
+function toggleMenu() {
+  showMobileMenu.value = !showMobileMenu.value;
+}
+
+function openMenu() {
+  showMobileMenu.value = true;
+}
+
+function closeMenu() {
+  showMobileMenu.value = false;
+}
+
+provide('toggleMenu', toggleMenu);
+provide('openMenu', openMenu);
+provide('closeMenu', closeMenu);
+</script>