sprintify-ui 0.5.6 → 0.5.8

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

@@ -36,6 +36,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
     navbar: Record<string, unknown>;
 }, {}>, {
     navbar?(_: {
+        mobile: boolean;
         dark: boolean;
         height: number;
     }): any;

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

@@ -52,6 +52,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
     breakpoint: number;
 }, {}>, {
     navbar?(_: {
+        mobile: boolean;
         dark: boolean;
         height: number;
     }): any;

package/package.json

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

package/src/components/BaseLayoutSidebarConfigurable.stories.js

@@ -1,6 +1,7 @@
 import { DateTime } from 'luxon';
 import PageDashboard from '../../.storybook/components/PageDashboard.vue';
 import BaseLayoutSidebarConfigurable from './BaseLayoutSidebarConfigurable.vue';
+import { useSystemAlertStore } from '../stores/systemAlerts';
 
 export default {
   title: 'Layout/BaseLayoutSidebarConfigurable',
@@ -141,6 +142,13 @@ const Template = (args) => ({
     PageDashboard,
   },
   setup() {
+
+    const alerts = useSystemAlertStore();
+    alerts.push({
+      color: 'warning',
+      message: 'This is a warning message',
+    });
+
     return { args };
   },
   template: `

package/src/components/BaseLayoutStackedConfigurable.stories.js

@@ -1,3 +1,4 @@
+import { useSystemAlertStore } from '../stores/systemAlerts';
 import BaseContainer from './BaseContainer.vue';
 import BaseLayoutStackedConfigurable from './BaseLayoutStackedConfigurable.vue';
 
@@ -113,6 +114,13 @@ const Template = (args) => ({
     BaseContainer,
   },
   setup() {
+
+    const alerts = useSystemAlertStore();
+    alerts.push({
+      color: 'warning',
+      message: 'This is a warning message',
+    });
+
     return { args };
   },
   template: `

package/src/components/BaseLayoutStackedConfigurable.vue

@@ -4,7 +4,7 @@
     :dark="dark"
     :navbar="navbar"
   >
-    <template #navbar>
+    <template #navbar="{ mobile }">
       <div class="flex w-full justify-between">
         <!-- Left -->
 
@@ -22,7 +22,15 @@
           </RouterLink>
 
           <!-- Links (desktop) -->
-          <div class="ml-10 hidden space-x-2 md:flex">
+          <div
+            v-if="!mobile"
+            class="flex"
+            :class="{
+              'ml-4': size == 'xs',
+              'ml-6 space-x-0.5': size == 'sm',
+              'ml-8 space-x-1': size == 'md',
+            }"
+          >
             <BaseNavbarItem
               v-for="item in menu"
               :key="item.label"
@@ -34,11 +42,14 @@
         </div>
 
         <!-- Right -->
-        <div class="flex shrink-0 items-center md:ml-6">
+        <div
+          class="flex shrink-0 items-center"
+          :class="[mobile ? '' : 'ml-6']"
+        >
           <!-- Notification dropdown -->
           <BaseLayoutNotificationDropdown
             v-if="notifications"
-            class="mr-4 md:mr-5"
+            :class="[mobile ? 'mr-4' : 'mr-5']"
             :dark="dark"
             :size="size"
             :notifications-config="notifications"
@@ -48,9 +59,9 @@
 
           <!-- Profile dropdown -->
           <BaseMenu
+            v-if="!mobile"
             tw-menu="w-52"
-            :size="size == 'xs' ? 'xs' : 'sm'"
-            class="hidden md:block"
+            :size="size"
             :items="userMenu"
           >
             <template #button="{ open }">
@@ -72,11 +83,12 @@
 
     <template #mobile>
       <!-- Links mobile -->
-      <div class="space-y-1 p-2 pt-0">
+      <div class="space-y-0.5 p-2">
         <BaseNavbarSideItem
           v-for="item in menu"
           :key="item.label"
           :item="item"
+          size="sm"
           :dark="dark"
         />
       </div>
@@ -100,6 +112,7 @@
             v-for="item in userMenu"
             :key="item.label"
             :item="item"
+            size="sm"
             :dark="dark"
           />
         </div>

package/src/components/BaseNavbar.vue

@@ -1,5 +1,11 @@
 <template>
-  <nav :class="classInternal">
+  <nav
+    ref="navRef"
+    :class="classInternal"
+    :style="{
+      maxHeight: `${maxHeight}px`,
+    }"
+  >
     <BaseContainer size="7xl">
       <div
         :style="{
@@ -11,6 +17,7 @@
         <div class="grow flex">
           <slot
             name="navbar"
+            :mobile="mobile"
             :dark="dark"
             :height="heightInner"
           />
@@ -52,7 +59,7 @@
     <!-- Mobile -->
     <div
       v-if="mobile && showMobileMenu"
-      class="absolute w-full"
+      class="w-full"
       :class="backgroundClass"
     >
       <slot
@@ -71,7 +78,8 @@ 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';
+import { useElementBounding, useWindowSize } from '@vueuse/core';
+import { disableScroll, enableScroll } from '..';
 
 defineOptions({
   inheritAttrs: false,
@@ -106,6 +114,15 @@ const mobile = computed(() => {
   return window.width.value < props.breakpoint;
 });
 
+watch(
+  () => window.width.value,
+  () => {
+    if (!mobile.value) {
+      closeMenu();
+    }
+  },
+);
+
 const heightInner = computed(() => {
   if (props.height) {
     return props.height;
@@ -127,24 +144,43 @@ const backgroundClass = computed(() => {
 });
 
 const classInternal = computed(() => {
-  return twMerge(
-    'w-full',
+
+  const classes = [
+    'flex flex-col top-0 left-0 w-full',
     backgroundClass.value,
-    props.class,
-  )
+  ];
+
+  if (mobile.value) {
+    classes.push('overflow-y-auto');
+  }
+
+  return twMerge(classes, props.class)
 })
 
+const navRef = ref<HTMLElement | null>(null);
+const navRefRect = useElementBounding(navRef);
+
+const maxHeight = computed(() => {
+  return window.height.value - navRefRect.top.value;
+});
+
 const showMobileMenu = ref(false);
 
 function toggleMenu() {
-  showMobileMenu.value = !showMobileMenu.value;
+  if (showMobileMenu.value) {
+    closeMenu();
+  } else {
+    openMenu();
+  }
 }
 
 function openMenu() {
+  disableScroll();
   showMobileMenu.value = true;
 }
 
 function closeMenu() {
+  enableScroll();
   showMobileMenu.value = false;
 }
 

package/src/components/BaseNavbarItemContent.vue

@@ -14,6 +14,7 @@
         class="relative -top-px ml-[5px]"
       >
         <BaseCounter
+          :size="size"
           :count="count"
           :max-digit="2"
           color="danger"
@@ -81,9 +82,17 @@ const classes = computed(() => {
 
 const classesInner = computed(() => {
   const classList = [
-    'px-3 py-1 grow rounded-md duration-100 flex items-center font-medium',
+    'py-1 grow rounded-md duration-100 flex items-center font-medium',
   ];
 
+  if (props.size == 'xs') {
+    classList.push('px-2 h-7')
+  } else if (props.size == 'sm') {
+    classList.push('px-2 h-8')
+  } else {
+    classList.push('px-3 h-10')
+  }
+
   if (props.dark) {
     classList.push('hover:bg-slate-700');
   } else {

package/src/components/BaseNavbarSideItem.vue

@@ -1,6 +1,7 @@
 <template>
   <div>
     <BaseActionItem
+      v-if="!item.meta?.line"
       :item="item"
       class="flex w-full"
       @click="onClick"
@@ -19,7 +20,7 @@
 
     <div
       v-if="showSubActions && item.actions && item.actions.length"
-      class="mt-2 mb-3"
+      class="mt-1 sm:mt-2 mb-3"
     >
       <div
         v-for="subItem in item.actions"
@@ -107,11 +108,11 @@ const subItemClasses = computed((): string[] => {
   }
 
   if (props.size == 'xs') {
-    classList.push('pl-[33.5px] text-[13px] mb-1 pr-2.5');
+    classList.push('pl-3 sm:pl-[33.5px] text-[13px] mb-1 pr-2.5');
   } else if (props.size == 'sm') {
-    classList.push('pl-[36px] text-sm mb-1.5 pr-3');
+    classList.push('pl-3 sm:pl-[36px] text-sm mb-1.5 pr-3');
   } else {
-    classList.push('pl-[40px] text-base mb-1 pr-3');
+    classList.push('pl-3 sm:pl-[40px] text-base mb-1 pr-3');
   }
 
   return classList;