sprintify-ui 0.4.11 → 0.5.3

package/src/components/BaseLayoutStackedConfigurable.vue

@@ -1,10 +1,13 @@
 <template>
-  <BaseLayoutStacked :dark="dark">
+  <BaseLayoutStacked
+    :size="size"
+    :dark="dark"
+  >
     <template #navbar>
-      <div class="flex h-16 justify-between">
+      <div class="flex w-full justify-between">
         <!-- Left -->
 
-        <div class="flex justify-center">
+        <div class="flex grow">
           <!-- Logo -->
           <RouterLink
             to="/"
@@ -18,10 +21,11 @@
           </RouterLink>
 
           <!-- Links (desktop) -->
-          <div class="ml-10 hidden space-x-4 md:flex">
+          <div class="ml-10 hidden space-x-2 md:flex">
             <BaseNavbarItem
               v-for="item in menu"
               :key="item.label"
+              :size="size"
               :item="item"
               :dark="dark"
             />
@@ -29,12 +33,13 @@
         </div>
 
         <!-- Right -->
-        <div class="flex items-center md:ml-6">
+        <div class="flex shrink-0 items-center md:ml-6">
           <!-- Notification dropdown -->
           <BaseLayoutNotificationDropdown
             v-if="notifications"
             class="mr-4 md:mr-5"
             :dark="dark"
+            :size="size"
             :notifications-config="notifications"
             @click="onNotificationClick"
             @open="onNotificationOpen"
@@ -43,6 +48,7 @@
           <!-- Profile dropdown -->
           <BaseMenu
             tw-menu="w-52"
+            :size="size == 'xs' ? 'xs' : 'sm'"
             class="hidden md:block"
             :items="userMenu"
           >
@@ -54,6 +60,7 @@
                 <BaseAvatar
                   :class="dark ? 'text-white' : ''"
                   :user="user"
+                  :size="size"
                 />
               </div>
             </template>
@@ -107,7 +114,8 @@
 <script lang="ts" setup>
 import { User } from '@/types/User';
 import { PropType } from 'vue';
-import { ActionItem, NotificationsConfig } from '../types';
+import { NotificationsConfig } from '../types';
+import { ActionItem } from '@/types/ActionItem';
 import BaseAvatar from './BaseAvatar.vue';
 import BaseLayoutStacked from './BaseLayoutStacked.vue';
 import BaseMenu from './BaseMenu.vue';
@@ -142,10 +150,18 @@ defineProps({
     default: undefined,
     type: Object as PropType<NotificationsConfig>,
   },
+  navbar: {
+    default: undefined,
+    type: Object as PropType<Record<string, unknown>>,
+  },
   dark: {
     default: false,
     type: Boolean,
   },
+  size: {
+    default: 'md',
+    type: String as PropType<'xs' | 'sm' | 'md'>,
+  },
 });
 
 function onNotificationClick(notification: Notification) {

package/src/components/BaseMenu.vue

@@ -36,7 +36,7 @@
             :key="item.label + 'link'"
           >
             <div
-              v-if="item.line"
+              v-if="item.meta?.line"
               class="-mx-1 my-1 flex h-px bg-slate-200"
             />
 
@@ -118,14 +118,14 @@
 <script lang="ts" setup>
 import { PropType } from 'vue';
 import { Menu, MenuButton, MenuItem, MenuItems } from '@headlessui/vue';
-import { MenuItemInterface } from '@/types';
 import BaseMenuItem from './BaseMenuItem.vue';
 import { twMerge } from 'tailwind-merge';
+import { ActionItem } from '@/types/ActionItem';
 
 const props = defineProps({
   items: {
     default: undefined,
-    type: Array as PropType<MenuItemInterface[]>,
+    type: Array as PropType<ActionItem[]>,
   },
   position: {
     default: 'bottom-left',

package/src/components/BaseMenuItem.vue

@@ -1,29 +1,43 @@
 <template>
   <div
     :style="buttonStyles"
-    class="rounded leading-tight"
+    class="rounded leading-tight hover:bg-slate-100"
     :class="[active ? 'bg-slate-100' : 'bg-white']"
   >
-    <div class="flex items-center">
+    <div
+      class="flex"
+      :class="[description ? 'items-start' : 'items-center']"
+    >
       <BaseIcon
         v-if="icon"
         :icon="icon"
         :class="[iconClasses]"
       />
-      <span :class="[textClasses, textColor]">{{ label }}</span>
-    </div>
-    <div
-      v-if="count"
-      class="relative -top-px ml-[5px]"
-    >
-      <BaseCounter
-        :count="count"
-        :max-digit="2"
-        :color="color"
-        :size="size"
-      />
+      <div class="grow">
+        <p :class="['font-medium', textClasses, textColor]">
+          {{ label }}
+        </p>
+        <p
+          v-if="description"
+          class="text-xs text-slate-500"
+          :class="[size == 'xs' ? 'mt-px' : 'mt-0.5']"
+        >
+          {{ description }}
+        </p>
+      </div>
     </div>
   </div>
+  <div
+    v-if="count"
+    class="relative -top-px ml-[5px]"
+  >
+    <BaseCounter
+      :count="count"
+      :max-digit="2"
+      :color="color"
+      :size="size"
+    />
+  </div>
 </template>
 
 <script lang="ts" setup>
@@ -36,6 +50,10 @@ const props = defineProps({
     default: undefined,
     type: String,
   },
+  description: {
+    default: undefined,
+    type: String,
+  },
   icon: {
     default: undefined,
     type: String,
@@ -134,7 +152,13 @@ const buttonStyles = computed((): StyleValue => {
 });
 
 const iconClasses = computed((): string => {
-  let baseClasses = ' w-5 h-5 shrink-0 mr-2';
+  let baseClasses = ' w-5 h-5 shrink-0 ';
+
+  if (props.size == 'xs') {
+    baseClasses += ' mr-2 ';
+  } else {
+    baseClasses += ' mr-3 ';
+  }
 
   if (!props.active) {
     baseClasses += ' opacity-70 ' + textColor.value;

package/src/components/BaseNavbar.stories.js

@@ -6,7 +6,7 @@ import BaseMenu from './BaseMenu.vue';
 import { Icon as BaseIcon } from '@iconify/vue';
 
 export default {
-  title: 'Layout/BaseNavbar',
+  title: 'Navigation/BaseNavbar',
   component: BaseNavbar,
   args: {},
   parameters: {
@@ -56,7 +56,7 @@ const Template = (args) => ({
         href: 'https://google.com',
       },
       {
-        line: true,
+        meta: { line: true },
       },
       {
         label: 'Logout',
@@ -71,12 +71,12 @@ const Template = (args) => ({
     <div class="sticky top-0 left-0 w-full shadow">
       <BaseNavbar v-bind="args">
         <template #navbar>
-          <div class="flex h-16 justify-between">
+          <div class="flex w-full justify-between">
             <!-- Left -->
 
-            <div class="flex justify-center">
+            <div class="flex justify-start grow">
               <!-- Logo -->
-              <RouterLink to="/" class="flex flex-shrink-0 grow items-center p-2 pl-0">
+              <RouterLink to="/" class="flex flex-shrink-0 items-center">
                 <img
                   class="block h-8 w-auto"
                   src="https://sprintify.witify.io/img/logo/logo-side.svg"
@@ -90,6 +90,7 @@ const Template = (args) => ({
                   v-for="item in menu"
                   :key="item.label"
                   :item="item"
+                  class="flex"
                   item-class="flex"
                 />
               </div>
@@ -97,13 +98,13 @@ const Template = (args) => ({
 
             <!-- Right -->
 
-            <div class="hidden md:ml-6 md:flex md:items-center">
+            <div class="hidden md:ml-6 md:flex md:items-center shrink-0">
               <!-- Profile dropdown -->
               <BaseMenu tw-menu="w-52" :items="userMenu">
                 <template #button="{ open }">
                   <div
                     class="flex rounded-full"
-                    :class="[open ? 'bg-slate-700 ring-2 ring-blue-500 ring-offset-2 ring-offset-slate-700' : '']"
+                    :class="[open ? 'bg-slate-700 ring-4 ring-slate-200' : '']"
                   >
                     <BaseAvatar :user="user" />
                   </div>

package/src/components/BaseNavbar.vue

@@ -1,17 +1,26 @@
 <template>
-  <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">
+  <nav :class="classInternal">
+    <BaseContainer size="7xl">
+      <div
+        :style="{
+          height: `${heightInner}px`,
+        }"
+        class="flex justify-between"
+      >
         <!-- Navbar (desktop and mobile) -->
-        <div class="grow">
-          <slot name="navbar" />
+        <div class="grow flex">
+          <slot
+            name="navbar"
+            :dark="dark"
+            :height="heightInner"
+          />
         </div>
 
         <!-- Mobile Burger menu button -->
-        <div class="-mr-2 flex items-center md:hidden">
+        <div
+          v-if="mobile"
+          class="-mr-2 flex items-center"
+        >
           <button
             type="button"
             class="inline-flex items-center justify-center rounded-md p-2 focus:outline-none focus:ring-2 focus:ring-offset-2"
@@ -42,12 +51,13 @@
 
     <!-- Mobile -->
     <div
-      v-if="showMobileMenu"
-      class="absolute w-full md:hidden"
-      :class="[dark ? 'bg-slate-900' : 'bg-white']"
+      v-if="mobile && showMobileMenu"
+      class="absolute w-full"
+      :class="backgroundClass"
     >
       <slot
         name="mobile"
+        :dark="dark"
         :toggle-menu="toggleMenu"
         :close-menu="closeMenu"
         :open-menu="openMenu"
@@ -59,18 +69,71 @@
 <script setup lang="ts">
 import { Icon as BaseIcon } from '@iconify/vue';
 import BaseContainer from './BaseContainer.vue';
+import { twMerge } from 'tailwind-merge';
+import { PropType } from 'vue';
+import { useWindowSize } from '@vueuse/core';
 
-defineProps({
-  size: {
-    default: '7xl',
-    type: String,
-  },
+defineOptions({
+  inheritAttrs: false,
+})
+
+const props = defineProps({
   dark: {
     default: false,
     type: Boolean,
   },
+  height: {
+    default: undefined,
+    type: Number,
+  },
+  breakpoint: {
+    default: 768,
+    type: Number,
+  },
+  class: {
+    default: '',
+    type: [String, Array] as PropType<string | string[]>,
+  },
+  size: {
+    default: 'md',
+    type: String as PropType<'xs' | 'sm' | 'md'>,
+  },
 });
 
+const window = useWindowSize();
+
+const mobile = computed(() => {
+  return window.width.value < props.breakpoint;
+});
+
+const heightInner = computed(() => {
+  if (props.height) {
+    return props.height;
+  }
+
+  if (props.size == 'xs') {
+    return 48;
+  }
+
+  if (props.size == 'sm') {
+    return 56;
+  }
+
+  return 64;
+});
+
+const backgroundClass = computed(() => {
+  return props.dark ? 'bg-slate-900' : 'bg-white';
+});
+
+const classInternal = computed(() => {
+  return twMerge(
+    'w-full',
+    backgroundClass.value,
+    props.class,
+  )
+})
+
 const showMobileMenu = ref(false);
 
 function toggleMenu() {
@@ -88,4 +151,5 @@ function closeMenu() {
 provide('toggleMenu', toggleMenu);
 provide('openMenu', openMenu);
 provide('closeMenu', closeMenu);
+provide('navbar:height', heightInner);
 </script>

package/src/components/BaseNavbarItem.vue

@@ -1,15 +1,13 @@
 <template>
-  <div class="flex">
+  <div class="flex group relative">
     <BaseActionItem
-      :to="item.to"
-      :href="item.href"
-      :action="item.action"
-      :dark="dark"
+      :item="item"
       class="flex w-full"
       @click="onClick"
     >
       <template #default="{ active }">
         <BaseNavbarItemContent
+          :size="size"
           :label="item.label"
           :icon="item.icon"
           :active="active"
@@ -18,14 +16,41 @@
         />
       </template>
     </BaseActionItem>
+    <div
+      v-if="item.actions && item.actions.length"
+      class="absolute ring-1 ring-black ring-opacity-10 shadow-lg rounded-md invisible p-1 left-0 bg-white w-56 duration-100 opacity-0 translate-y-1 || group-hover:visible group-hover:opacity-100 group-hover:translate-y-0"
+      :style="{
+        top: `${height - 3}px`,
+      }"
+    >
+      <div class="space-y-px">
+        <div
+          v-for="subItem in item.actions"
+          :key="subItem.label"
+        >
+          <BaseActionItem
+            :item="subItem"
+          >
+            <BaseMenuItem
+              :size="size == 'xs' ? 'xs' : 'sm'"
+              :label="subItem.label"
+              :count="subItem.count"
+              :icon="subItem.icon"
+              :description="subItem.description"
+            />
+          </BaseActionItem>
+        </div>
+      </div>
+    </div>
   </div>
 </template>
 
 <script setup lang="ts">
-import { PropType } from 'vue';
-import { ActionItem } from '@/types';
+import { PropType, Ref } from 'vue';
+import { ActionItem } from '@/types/ActionItem';
 import BaseActionItem from './BaseActionItem.vue';
 import BaseNavbarItemContent from './BaseNavbarItemContent.vue';
+import BaseMenuItem from './BaseMenuItem.vue';
 
 defineProps({
   item: {
@@ -36,8 +61,14 @@ defineProps({
     default: false,
     type: Boolean,
   },
+  size: {
+    default: 'md',
+    type: String as PropType<'xs' | 'sm' | 'md'>,
+  },
 });
 
+const height = inject('navbar:height') as Ref<number>;
+
 const closeMenu = inject('closeMenu') as () => void;
 
 const emit = defineEmits(['click']);

package/src/components/BaseNavbarItemContent.vue

@@ -1,22 +1,24 @@
 <template>
   <div :class="classes">
-    <div class="group flex grow items-center">
+    <div :class="classesInner">
       <BaseIcon
         v-if="icon"
         :icon="icon"
         :class="iconClasses"
       />
-      <span :class="[sizeClasses]">{{ label }}</span>
-    </div>
-    <div
-      v-if="count"
-      class="relative -top-px ml-[5px]"
-    >
-      <BaseCounter
-        :count="count"
-        :max-digit="2"
-        :color="'primary'"
-      />
+      <div :class="[sizeClasses, 'text-base']">
+        {{ label }}
+      </div>
+      <div
+        v-if="count"
+        class="relative -top-px ml-[5px]"
+      >
+        <BaseCounter
+          :count="count"
+          :max-digit="2"
+          color="danger"
+        />
+      </div>
     </div>
   </div>
 </template>
@@ -49,28 +51,27 @@ const props = defineProps({
   },
   size: {
     default: 'md',
-    type: String as PropType<'sm' | 'md'>,
+    type: String as PropType<'xs' | 'sm' | 'md'>,
   },
 });
 
 const classes = computed(() => {
   const classList = [
-    'text-left border-b-2 px-2 flex items-center text-base font-medium w-full',
+    'flex items-center w-full',
   ];
 
   if (props.active) {
     if (props.dark) {
-      classList.push('border-white text-white');
+      classList.push('text-white');
     } else {
-      classList.push('border-primary-500 text-slate-900');
+      classList.push('text-slate-900');
     }
   } else {
-    classList.push('border-transparent');
     if (props.dark) {
-      classList.push('hover:border-white hover:text-white text-slate-200');
+      classList.push('hover:text-white text-slate-200');
     } else {
       classList.push(
-        'hover:border-primary-500 hover:text-slate-900 text-slate-800'
+        'hover:text-slate-900 text-slate-800'
       );
     }
   }
@@ -78,6 +79,20 @@ const classes = computed(() => {
   return classList;
 });
 
+const classesInner = computed(() => {
+  const classList = [
+    'px-3 py-1 grow rounded-md duration-100 flex items-center font-medium',
+  ];
+
+  if (props.dark) {
+    classList.push('hover:bg-slate-700');
+  } else {
+    classList.push('hover:bg-slate-100');
+  }
+
+  return classList;
+});
+
 const iconClasses = computed((): string[] => {
   const classList = ['w-5 h-5 shrink-0 mr-2 leading-none inline-block'];
   if (props.active) {
@@ -89,6 +104,9 @@ const iconClasses = computed((): string[] => {
 });
 
 const sizeClasses = computed(() => {
+  if (props.size == 'xs') {
+    return 'text-xs';
+  }
   if (props.size == 'sm') {
     return 'text-sm';
   }

package/src/components/BaseNavbarSideItem.vue

@@ -1,10 +1,7 @@
 <template>
   <div>
     <BaseActionItem
-      :to="item.to"
-      :href="item.href"
-      :action="item.action"
-      :dark="dark"
+      :item="item"
       class="flex w-full"
       @click="onClick"
     >
@@ -29,12 +26,23 @@
         :key="subItem.label"
       >
         <BaseActionItem
-          :to="subItem.to"
-          :href="subItem.href"
-          :action="subItem.action"
+          :item="subItem"
           :class="subItemClasses"
         >
-          {{ subItem.label }}
+          <template #default="{ active }">
+            <div
+              class="grow"
+              :class="{ 'font-medium': active, 'text-white': active && dark }"
+            >
+              {{ subItem.label }}
+            </div>
+            <BaseCounter
+              v-if="subItem.count"
+              :count="subItem.count"
+              :size="size"
+              :color="dark ? 'light' : 'light'"
+            />
+          </template>
         </BaseActionItem>
       </div>
     </div>
@@ -43,9 +51,10 @@
 
 <script setup lang="ts">
 import { PropType } from 'vue';
-import { ActionItem } from '@/types';
+import { ActionItem } from '@/types/ActionItem';
 import BaseActionItem from './BaseActionItem.vue';
 import BaseNavbarSideItemContent from './BaseNavbarSideItemContent.vue';
+import BaseCounter from './BaseCounter.vue';
 
 const props = defineProps({
   item: {
@@ -56,10 +65,6 @@ const props = defineProps({
     default: false,
     type: Boolean,
   },
-  actionsVisible: {
-    default: 'toggle',
-    type: String as PropType<'toggle' | 'always'>,
-  },
   size: {
     default: 'md',
     type: String as PropType<'xs' | 'sm' | 'md'>,
@@ -83,7 +88,7 @@ const routeActive = computed((): boolean => {
 });
 
 const showSubActions = computed((): boolean => {
-  if (props.actionsVisible == 'always') {
+  if (props.item.meta?.showSubItems == 'always') {
     return true;
   }
   if (!props.item.to) {
@@ -102,11 +107,11 @@ const subItemClasses = computed((): string[] => {
   }
 
   if (props.size == 'xs') {
-    classList.push('pl-[33.5px] text-[13px] mb-1');
+    classList.push('pl-[33.5px] text-[13px] mb-1 pr-2.5');
   } else if (props.size == 'sm') {
-    classList.push('pl-[36px] text-sm mb-1.5');
+    classList.push('pl-[36px] text-sm mb-1.5 pr-3');
   } else {
-    classList.push('pl-[40px] text-base mb-1');
+    classList.push('pl-[40px] text-base mb-1 pr-3');
   }
 
   return classList;

package/src/components/BaseNavbarSideItemContent.vue

@@ -16,7 +16,7 @@
         :size="size"
         :count="count"
         :max-digit="2"
-        :color="'primary'"
+        color="danger"
       />
     </div>
   </div>

package/src/components/BaseShortcut.vue

@@ -1,9 +1,11 @@
 <template>
   <BaseCard class="flex duration-200 hover:bg-slate-50">
     <BaseActionItem
-      :to="to"
-      :href="href"
-      :action="action"
+      :item="{
+        to,
+        href,
+        action,
+      }"
       class="block w-full"
     >
       <section class="whitespace-pre-line p-4">