sprintify-ui 0.5.2 → 0.5.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sprintify-ui",
-  "version": "0.5.2",
+  "version": "0.5.4",
   "scripts": {
     "build": "rimraf dist && vue-tsc && vite build",
     "build-fast": "rimraf dist && vite build",

package/src/components/BaseLayoutNotificationDropdown.vue

@@ -6,8 +6,12 @@
   >
     <template #button="{ open }">
       <div
-        class="relative flex items-center rounded-md p-1.5 hover:bg-slate-100"
-        :class="[open ? 'bg-slate-100' : '']"
+        class="relative flex items-center rounded-md p-1.5"
+        :class="[
+          dark ? 'hover:bg-slate-700' : 'hover:bg-slate-100',
+          open && !dark ? 'bg-slate-100' : '',
+          open && dark ? 'bg-slate-700' : '',
+        ]"
         @click="onOpen"
       >
         <BaseIcon
@@ -62,11 +66,7 @@
               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')
-              }}
+              {{ notificationsConfig.footerLabel ? notificationsConfig.footerLabel : t('sui.see_all_notifications') }}
             </div>
           </RouterLink>
         </MenuItem>

package/src/components/BaseLayoutStacked.vue

@@ -12,7 +12,12 @@
       {{ systemAlert.message }}
     </BaseSystemAlert>
 
-    <BaseNavbar v-bind="navbar">
+    <BaseNavbar
+      v-bind="navbar"
+      :dark="dark"
+      :size="size"
+      class="shadow"
+    >
       <template #navbar="navbarProps">
         <slot
           name="navbar"
@@ -44,10 +49,16 @@ defineOptions({
   inheritAttrs: false
 });
 
-const props = defineProps<{
+const props = withDefaults(defineProps<{
   class?: string | string[];
+  dark?: boolean;
   navbar?: Record<string, unknown>;
-}>();
+  size?: 'xs' | 'sm' | 'md';
+}>(), {
+  class: '',
+  navbar: {} as any,
+  size: 'md',
+});
 
 const classInternal = computed(() => {
   return twMerge(

package/src/components/BaseLayoutStackedConfigurable.stories.js

@@ -20,12 +20,37 @@ export default {
     menu: [
       {
         label: 'Products',
-        to: '/',
         count: 234,
+        actions: [
+          {
+            label: 'New product',
+            icon: 'heroicons:plus-20-solid',
+            description: 'Create a new product',
+            to: '/',
+          },
+          {
+            label: 'All products',
+            icon: 'heroicons:academic-cap-20-solid',
+            description: 'View all products',
+            to: '/',
+          },
+        ],
       },
       {
         label: 'Users',
         to: '/setup',
+        actions: [
+          {
+            label: 'New product',
+            icon: 'heroicons:plus-20-solid',
+            to: '/',
+          },
+          {
+            label: 'All products',
+            icon: 'heroicons:academic-cap-20-solid',
+            to: '/',
+          },
+        ],
       },
       {
         label: 'Account',
@@ -44,6 +69,9 @@ export default {
         to: '/account',
         icon: 'heroicons:cog',
       },
+      {
+        meta: { line: true }
+      },
       {
         label: 'Logout',
         action: logout,
@@ -98,16 +126,33 @@ const Template = (args) => ({
 
 export const Light = Template.bind({});
 Light.args = {
-  navbar: {
-    dark: false,
-  },
+  dark: false,
   logoUrl: 'https://sprintify.witify.io/img/logo/logo-side.svg',
 };
 
 export const Dark = Template.bind({});
 Dark.args = {
-  navbar: {
-    dark: true,
-  },
+  dark: true,
   logoUrl: 'https://sprintify.witify.io/img/logo/logo-side-dark.svg',
 };
+
+export const SizeXS = Template.bind({});
+SizeXS.args = {
+  size: 'xs',
+  dark: true,
+  logoUrl: 'https://sprintify.witify.io/img/logo/logo-side-dark.svg',
+};
+
+export const SizeSM = Template.bind({});
+SizeSM.args = {
+  size: 'sm',
+  dark: true,
+  logoUrl: 'https://sprintify.witify.io/img/logo/logo-side-dark.svg',
+};
+
+export const SizeMD = Template.bind({});
+SizeMD.args = {
+  size: 'md',
+  dark: true,
+  logoUrl: 'https://sprintify.witify.io/img/logo/logo-side-dark.svg',
+};

package/src/components/BaseLayoutStackedConfigurable.vue

@@ -1,6 +1,9 @@
 <template>
-  <BaseLayoutStacked :navbar="navbar">
-    <template #navbar="{ dark }">
+  <BaseLayoutStacked
+    :size="size"
+    :dark="dark"
+  >
+    <template #navbar>
       <div class="flex w-full justify-between">
         <!-- Left -->
 
@@ -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"
             />
@@ -35,6 +39,7 @@
             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>
@@ -62,7 +69,7 @@
       </div>
     </template>
 
-    <template #mobile="{ dark }">
+    <template #mobile>
       <!-- Links mobile -->
       <div class="space-y-1 p-2 pt-0">
         <BaseNavbarSideItem
@@ -147,6 +154,14 @@ defineProps({
     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/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.vue

@@ -1,9 +1,9 @@
 <template>
   <nav :class="classInternal">
-    <BaseContainer :size="size">
+    <BaseContainer size="7xl">
       <div
         :style="{
-          height: `${height}px`,
+          height: `${heightInner}px`,
         }"
         class="flex justify-between"
       >
@@ -12,6 +12,7 @@
           <slot
             name="navbar"
             :dark="dark"
+            :height="heightInner"
           />
         </div>
 
@@ -77,16 +78,12 @@ defineOptions({
 })
 
 const props = defineProps({
-  size: {
-    default: '7xl',
-    type: String,
-  },
   dark: {
     default: false,
     type: Boolean,
   },
   height: {
-    default: 64,
+    default: undefined,
     type: Number,
   },
   breakpoint: {
@@ -96,7 +93,11 @@ const props = defineProps({
   class: {
     default: '',
     type: [String, Array] as PropType<string | string[]>,
-  }
+  },
+  size: {
+    default: 'md',
+    type: String as PropType<'xs' | 'sm' | 'md'>,
+  },
 });
 
 const window = useWindowSize();
@@ -105,13 +106,29 @@ 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 border-t-[3px] border-primary-500',
+    'w-full',
     backgroundClass.value,
     props.class,
   )
@@ -134,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,5 +1,5 @@
 <template>
-  <div class="flex">
+  <div class="flex group relative">
     <BaseActionItem
       :item="item"
       class="flex w-full"
@@ -7,6 +7,7 @@
     >
       <template #default="{ active }">
         <BaseNavbarItemContent
+          :size="size"
           :label="item.label"
           :icon="item.icon"
           :active="active"
@@ -15,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 { 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: {
@@ -33,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/BaseNavbarSideItemContent.vue

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

package/src/components/BaseTabItem.vue

@@ -20,19 +20,14 @@
       >
         <div class="relative flex py-1">
           <div
-            v-if="isActiveInternal(isActive, isExactActive)"
-            class="absolute left-0 bottom-0 w-full h-[2px] bg-primary-600"
-          />
-          <div
-            class="whitespace-nowrap rounded-md"
             :class="[
-              isActiveInternal(isActive, isExactActive)
-                ? 'group-hover:bg-primary-100'
-                : 'group-hover:bg-slate-200',
+              'whitespace-nowrap rounded-md group-hover:bg-black group-hover:bg-opacity-5',
               sizeClassInner
             ]"
           >
-            <slot :active="isActiveInternal(isActive, isExactActive)" />
+            <div class="base-tab-item-slot">
+              <slot :active="isActiveInternal(isActive, isExactActive)" />
+            </div>
           </div>
         </div>
       </a>

package/src/components/BaseTabs.stories.js

@@ -30,8 +30,12 @@ const Template = (args) => ({
         <BaseTabItem to="/" v-slot="{active}">
           <div class="flex items-center">
             <span class="mr-1">Home</span>
-            <BaseCounter :size="['lg', 'md'].includes(args.size) ? 'sm' : 'xs'" :color="active ? 'primary' : 'light'" :count="1"></BaseCounter>  
-            </div>
+            <BaseCounter 
+              :size="['lg', 'md'].includes(args.size) ? 'sm' : 'xs'" 
+              :color="active ? 'primary' : 'light'" 
+              :count="1"
+            ></BaseCounter>  
+          </div>
         </BaseTabItem>
         <BaseTabItem to="/setup">
           Setup