sprintify-ui 0.0.19 → 0.0.21

package/src/components/BaseNavbar.stories.js

@@ -1,5 +1,6 @@
 import BaseNavbar from './BaseNavbar.vue';
 import BaseNavbarItem from './BaseNavbarItem.vue';
+import BaseNavbarSideItem from './BaseNavbarSideItem.vue';
 import BaseAvatar from './BaseAvatar.vue';
 import BaseMenu from './BaseMenu.vue';
 import { Icon as BaseIcon } from '@iconify/vue';
@@ -8,12 +9,16 @@ export default {
   title: 'Layout/BaseNavbar',
   component: BaseNavbar,
   args: {},
+  parameters: {
+    layout: 'fullscreen',
+  },
 };
 
 const Template = (args) => ({
   components: {
     BaseNavbar,
     BaseNavbarItem,
+    BaseNavbarSideItem,
     BaseIcon,
     BaseAvatar,
     BaseMenu,
@@ -36,13 +41,13 @@ const Template = (args) => ({
       },
       {
         label: 'Products',
-        to: '/',
+        to: '/setup',
         count: 234,
         type: 'RouterLink',
       },
       {
         label: 'Settings',
-        to: '/',
+        to: '/settings',
         type: 'RouterLink',
       },
     ];
@@ -66,28 +71,29 @@ const Template = (args) => ({
     return { args, menu, userMenu, user };
   },
   template: `
-    <div class="mb-40">
+    <div class="sticky top-0 left-0 w-full shadow">
       <BaseNavbar v-bind="args">
         <template #navbar>
           <div class="flex h-16 justify-between">
             <!-- Left -->
 
-            <div class="flex items-center justify-center">
+            <div class="flex justify-center">
               <!-- Logo -->
               <router-link to="/" class="flex flex-shrink-0 grow items-center p-2 pl-0">
                 <img
                   class="block h-8 w-auto"
-                  src="https://sprintify.witify.io/img/logo/logo-side-dark.svg"
+                  src="https://sprintify.witify.io/img/logo/logo-side.svg"
                   alt="Sprintify"
                 />
               </router-link>
 
               <!-- Links (desktop) -->
-              <div class="ml-10 hidden items-center space-x-4 md:flex">
+              <div class="ml-10 hidden space-x-4 md:flex">
                 <BaseNavbarItem
                   v-for="item in menu"
                   :key="item.label"
                   :item="item"
+                  item-class="flex"
                 />
               </div>
             </div>
@@ -102,7 +108,7 @@ const Template = (args) => ({
                     class="flex rounded-full"
                     :class="[open ? 'bg-slate-700 ring-2 ring-blue-500 ring-offset-2 ring-offset-slate-700' : '']"
                   >
-                    <BaseAvatar class="text-white" :user="user" />
+                    <BaseAvatar :user="user" />
                   </div>
                 </template>
               </BaseMenu>
@@ -112,16 +118,15 @@ const Template = (args) => ({
 
         <template #mobile>
           <!-- Links mobile -->
-          <div class="space-y-1 p-2">
-            <BaseNavbarItem
+          <div class="space-y-1 p-2 pt-0">
+            <BaseNavbarSideItem
               v-for="item in menu"
               :key="item.label"
               :item="item"
-              class="flex w-full"
             />
           </div>
     
-          <hr class="my-4 border-slate-700" />
+          <hr class="mb-4 mt-2 border-slate-200" />
     
           <!-- Profile links -->
           <div class="p-2 pb-6">
@@ -129,14 +134,13 @@ const Template = (args) => ({
               :user="user"
               show-details
               size="base"
-              class="px-3 text-white"
+              class="px-3"
             />
             <div class="mt-4 space-y-1">
-              <BaseNavbarItem
+              <BaseNavbarSideItem
                 v-for="item in userMenu"
                 :key="item.label"
                 :item="item"
-                class="flex w-full"
               />
             </div>
           </div>

package/src/components/BaseNavbar.vue

@@ -1,5 +1,8 @@
 <template>
-  <nav class="bg-slate-800">
+  <nav
+    class="border-t-[3px] border-primary-500"
+    :class="[dark ? 'bg-slate-900' : 'bg-white']"
+  >
     <BaseContainer :size="size">
       <div class="flex h-16 justify-between">
         <!-- Navbar (desktop and mobile) -->
@@ -11,7 +14,12 @@
         <div class="-mr-2 flex items-center md:hidden">
           <button
             type="button"
-            class="inline-flex items-center justify-center rounded-md bg-slate-800 p-2 text-slate-400 hover:bg-slate-700 hover:text-white focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2 focus:ring-offset-slate-800"
+            class="inline-flex items-center justify-center rounded-md p-2 focus:outline-none focus:ring-2 focus:ring-offset-2"
+            :class="[
+              dark
+                ? 'text-slate-200 hover:bg-slate-800 hover:text-white focus:ring-slate-700  focus:ring-offset-slate-900'
+                : 'text-slate-500 hover:bg-slate-100 hover:text-slate-900 focus:ring-slate-300  focus:ring-offset-white',
+            ]"
             @click="toggleMenu()"
           >
             <span class="sr-only">Open main menu</span>
@@ -33,7 +41,11 @@
     </BaseContainer>
 
     <!-- Mobile -->
-    <div v-if="showMobileMenu" class="absolute w-full bg-slate-800 md:hidden">
+    <div
+      v-if="showMobileMenu"
+      class="absolute w-full md:hidden"
+      :class="[dark ? 'bg-slate-900' : 'bg-white']"
+    >
       <slot
         name="mobile"
         :toggle-menu="toggleMenu"
@@ -53,6 +65,10 @@ defineProps({
     default: '7xl',
     type: String,
   },
+  dark: {
+    default: false,
+    type: Boolean,
+  },
 });
 
 const showMobileMenu = ref(false);

package/src/components/BaseNavbarItem.vue

@@ -1,57 +1,28 @@
 <template>
-  <div>
-    <RouterLink
-      v-if="item.to"
-      v-slot="{ isActive, href: slotHref, navigate }"
-      custom
-      :to="item.to"
+  <div class="flex">
+    <BaseActionItem
+      :item="item"
+      :dark="dark"
+      item-class="flex w-full"
+      @click="onClick"
     >
-      <a
-        :active="isActive"
-        :href="slotHref"
-        :aria-current="isActive ? 'page' : undefined"
-        class="block w-full"
-        @click.prevent="onClick(navigate)"
-      >
-        <slot :active="isActive">
-          <BaseNavbarItemContent
-            :label="item.label"
-            :icon="item.icon"
-            :active="isActive"
-            :count="item.count"
-          />
-        </slot>
-      </a>
-    </RouterLink>
-    <button
-      v-else-if="item.action"
-      type="button"
-      class="block w-full"
-      @click="item.action"
-    >
-      <slot :active="false">
+      <template #default="{ active }">
         <BaseNavbarItemContent
           :label="item.label"
           :icon="item.icon"
+          :active="active"
           :count="item.count"
+          :dark="dark"
         />
-      </slot>
-    </button>
-    <a v-else-if="item.href" :href="item.href" class="block w-full">
-      <slot :active="false">
-        <BaseNavbarItemContent
-          :label="item.label"
-          :icon="item.icon"
-          :count="item.count"
-        />
-      </slot>
-    </a>
+      </template>
+    </BaseActionItem>
   </div>
 </template>
 
 <script setup lang="ts">
 import { PropType } from 'vue';
 import { ActionItem } from '@/types/types';
+import BaseActionItem from './BaseActionItem.vue';
 import BaseNavbarItemContent from './BaseNavbarItemContent.vue';
 
 defineProps({
@@ -59,14 +30,17 @@ defineProps({
     required: true,
     type: Object as PropType<ActionItem>,
   },
+  dark: {
+    default: false,
+    type: Boolean,
+  },
 });
 
 const closeMenu = inject('closeMenu') as () => void;
 
 const emit = defineEmits(['click']);
 
-function onClick(navigate: () => void) {
-  navigate();
+async function onClick() {
   emit('click');
   closeMenu();
 }

package/src/components/BaseNavbarItemContent.vue

@@ -1,6 +1,6 @@
 <template>
   <div :class="classes">
-    <div class="flex grow items-center">
+    <div class="group flex grow items-center">
       <BaseIcon v-if="icon" :icon="icon" :class="iconClasses" />
       {{ label }}
     </div>
@@ -14,12 +14,6 @@
 import { Icon as BaseIcon } from '@iconify/vue';
 import BaseCounter from './BaseCounter.vue';
 
-const buttonClasses =
-  'px-3 py-2 text-left rounded-md md:text-sm flex text-base font-normal w-full';
-const buttonInactiveClasses =
-  'hover:bg-slate-700 hover:text-white text-slate-300';
-const buttonActiveClasses = 'bg-slate-900 text-white';
-
 const props = defineProps({
   label: {
     default: undefined,
@@ -37,24 +31,50 @@ const props = defineProps({
     default: undefined,
     type: Number,
   },
+  dark: {
+    default: false,
+    type: Boolean,
+  },
 });
 
 const classes = computed(() => {
-  return [
-    buttonClasses,
-    props.active ? buttonActiveClasses : buttonInactiveClasses,
+  const classList = [
+    'text-left border-b-2 px-2 flex items-center text-base font-medium w-full',
   ];
-});
 
-const iconClasses = computed((): string => {
-  let baseClasses = ' w-5 h-5 shrink-0 mr-2 leading-none inline-block';
+  if (props.dark) {
+    classList.push('');
+  } else {
+    classList.push('');
+  }
 
   if (props.active) {
-    baseClasses += ' text-white';
+    if (props.dark) {
+      classList.push('border-white text-white');
+    } else {
+      classList.push('border-primary-500 text-slate-900');
+    }
   } else {
-    baseClasses += ' text-slate-300';
+    classList.push('border-transparent');
+    if (props.dark) {
+      classList.push('hover:border-white hover:text-white text-slate-200');
+    } else {
+      classList.push(
+        'hover:border-primary-500 hover:text-slate-900 text-slate-800'
+      );
+    }
   }
 
-  return baseClasses;
+  return classList;
+});
+
+const iconClasses = computed((): string[] => {
+  const classList = ['w-5 h-5 shrink-0 mr-2 leading-none inline-block'];
+  if (props.active) {
+    classList.push('opacity-100');
+  } else {
+    classList.push('opacity-70 group-hover:opacity-100');
+  }
+  return classList;
 });
 </script>

package/src/components/BaseNavbarSideItem.vue

@@ -0,0 +1,42 @@
+<template>
+  <BaseActionItem
+    :item="item"
+    :dark="dark"
+    item-class="flex w-full"
+    @click="onClick"
+  >
+    <template #default="{ active }">
+      <BaseNavbarSideItemContent
+        :label="item.label"
+        :icon="item.icon"
+        :active="active"
+        :count="item.count"
+        :dark="dark"
+      />
+    </template>
+  </BaseActionItem>
+</template>
+
+<script setup lang="ts">
+import { PropType } from 'vue';
+import { ActionItem } from '@/types/types';
+import BaseActionItem from './BaseActionItem.vue';
+import BaseNavbarSideItemContent from './BaseNavbarSideItemContent.vue';
+
+defineProps({
+  item: {
+    required: true,
+    type: Object as PropType<ActionItem>,
+  },
+  dark: {
+    default: false,
+    type: Boolean,
+  },
+});
+
+const emit = defineEmits(['click']);
+
+async function onClick() {
+  emit('click');
+}
+</script>

package/src/components/BaseNavbarSideItemContent.vue

@@ -0,0 +1,77 @@
+<template>
+  <div :class="classes">
+    <div class="group flex grow items-center">
+      <BaseIcon v-if="icon" :icon="icon" :class="iconClasses" />
+      {{ label }}
+    </div>
+    <div v-if="count" class="relative -top-px ml-[5px]">
+      <BaseCounter :count="count" :max-digit="2" :color="'primary'" />
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { Icon as BaseIcon } from '@iconify/vue';
+import BaseCounter from './BaseCounter.vue';
+
+const props = defineProps({
+  label: {
+    default: undefined,
+    type: String,
+  },
+  icon: {
+    default: undefined,
+    type: String,
+  },
+  active: {
+    default: false,
+    type: Boolean,
+  },
+  count: {
+    default: undefined,
+    type: Number,
+  },
+  dark: {
+    default: false,
+    type: Boolean,
+  },
+});
+
+const classes = computed(() => {
+  const classList = [
+    'text-left px-3 py-2 rounded-md flex text-base font-medium w-full',
+  ];
+
+  if (props.dark) {
+    classList.push('');
+  } else {
+    classList.push('');
+  }
+
+  if (props.active) {
+    if (props.dark) {
+      classList.push('bg-slate-700 text-white');
+    } else {
+      classList.push('bg-slate-100 text-slate-900');
+    }
+  } else {
+    if (props.dark) {
+      classList.push('hover:bg-slate-800 hover:text-white text-slate-300');
+    } else {
+      classList.push('hover:bg-slate-50 hover:text-slate-900 text-slate-800');
+    }
+  }
+
+  return classList;
+});
+
+const iconClasses = computed((): string[] => {
+  const classList = ['w-5 h-5 shrink-0 mr-2 leading-none inline-block'];
+  if (props.active) {
+    classList.push('opacity-100');
+  } else {
+    classList.push('opacity-70 group-hover:opacity-100');
+  }
+  return classList;
+});
+</script>

package/src/components/index.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';
@@ -60,7 +61,13 @@ import BaseTableColumn from './BaseTableColumn.vue';
 import BaseTextarea from './BaseTextarea.vue';
 import BaseTextareaAutoresize from './BaseTextareaAutoresize.vue';
 
+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,
@@ -122,4 +129,8 @@ export {
   BaseTableColumn,
   BaseTextarea,
   BaseTextareaAutoresize,
+  BaseLayoutStacked,
+  BaseLayoutStackedConfigurable,
+  BaseLayoutSidebar,
+  BaseLayoutSidebarConfigurable,
 };

package/src/lang/en.json

@@ -25,6 +25,7 @@
     "next_month": "Next month",
     "none": "None",
     "nothing_found": "Nothing found",
+    "notifications_empty": "You have no new notifications",
     "or": "or",
     "pagination_detail": "{page} records of {total}",
     "previous": "Previous",
@@ -33,6 +34,7 @@
     "remove": "Remove",
     "remove_file": "Remove file?",
     "remove_file_description": "Are you sure you want to remove the file? This action is irreversible.",
+    "see_all_notifications": "See all notifications",
     "select_an_item": "Select an item",
     "select_an_option": "Select an option",
     "success": "Success",
@@ -49,6 +51,7 @@
     "up_to_x": "Up to {x}",
     "upload_failed": "Upload failed",
     "whoops": "Whoops",
+    "x_ago": "{duration} ago",
     "x_rows_selected": "1 item selected | {count} items selected",
     "year": "Year",
     "yes_delete": "Yes, delete",

package/src/lang/fr.json

@@ -25,6 +25,7 @@
     "next_month": "Mois prochain",
     "none": "Aucun",
     "nothing_found": "Rien n'a été trouvé",
+    "notifications_empty": "Vous n'avez aucune nouvelle notification",
     "or": "ou",
     "pagination_detail": "{page} items de {total}",
     "previous": "Précédent",
@@ -33,6 +34,7 @@
     "remove": "Retirer",
     "remove_file": "Retirer le fichier?",
     "remove_file_description": "Voulez-vous vraiment supprimer le fichier ? \nCette action est irréversible.",
+    "see_all_notifications": "Voir toutes les notifications",
     "select_an_item": "Sélectionner un élément",
     "select_an_option": "Sélectionner une option",
     "success": "Succès",
@@ -49,6 +51,7 @@
     "up_to_x": "Jusqu'à {x}",
     "upload_failed": "Le téléchargement a échoué",
     "whoops": "Oups",
+    "x_ago": "il y a {durée}",
     "x_rows_selected": "1 item sélectionné | \n{count} items sélectionnés",
     "year": "Année",
     "yes_delete": "Oui, supprimer",

package/src/types/Notification.ts

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

package/src/types/types.ts

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