sprintify-ui 0.0.196 → 0.0.198

package/src/components/BaseCounter.vue

@@ -1,6 +1,6 @@
 <template>
   <div
-    class="inline-flex h-4 w-auto items-center justify-center rounded-full px-1.5"
+    class="inline-flex w-auto items-center justify-center rounded-full"
     :class="[sizeClass, colorClass]"
   >
     {{ countLabel }}
@@ -22,11 +22,13 @@ const props = defineProps({
   },
   size: {
     default: 'sm',
-    type: String,
+    type: String as PropType<'xs' | 'sm' | 'md'>,
   },
   color: {
     default: 'danger',
-    type: String as PropType<'danger' | 'primary' | 'dark' | 'light' | 'white'>,
+    type: String as PropType<
+      'danger' | 'primary' | 'success' | 'warning' | 'dark' | 'light' | 'white'
+    >,
   },
 });
 
@@ -43,21 +45,27 @@ const countLabel = computed((): string => {
 
 const sizeClass = computed((): string => {
   if (props.size == 'xs') {
-    return 'text-[10px]';
+    return 'text-[10px] px-1 h-[14px]';
   }
   if (props.size == 'sm') {
-    return 'text-xs';
+    return 'text-xs px-1.5 h-4';
   }
-  if (props.size == 'base') {
-    return 'text-sm';
+  if (props.size == 'md') {
+    return 'text-sm px-1.5 h-5';
   }
-  return 'text-xs';
+  return 'text-xs px-1.5 h-4';
 });
 
 const colorClass = computed((): string => {
   if (props.color == 'danger') {
     return 'bg-red-500 text-white';
   }
+  if (props.color == 'warning') {
+    return 'bg-yellow-400 text-white';
+  }
+  if (props.color == 'success') {
+    return 'bg-green-500 text-white';
+  }
   if (props.color == 'primary') {
     return 'bg-primary-500 text-white';
   }

package/src/components/BaseLayoutNotificationDropdown.vue

@@ -6,18 +6,15 @@
   >
     <template #button="{ open }">
       <div
-        class="relative flex items-center rounded-full p-1.5"
-        :class="[open ? '' : '']"
+        class="relative flex items-center rounded-md p-1.5 hover:bg-slate-100"
+        :class="[open ? 'bg-slate-100' : '']"
         @click="onOpen"
       >
-        <BaseIcon
-          icon="heroicons:bell"
-          class="h-6 w-6"
-          :class="[dark ? 'text-slate-300' : 'text-slate-600']"
-        ></BaseIcon>
+        <BaseIcon icon="fa-solid:bell" :class="[iconClasses]"></BaseIcon>
         <BaseCounter
           v-if="notificationsConfig.items.length"
           class="absolute top-0 right-0"
+          :size="counterSize"
           :count="notificationsConfig.items.length"
         ></BaseCounter>
       </div>
@@ -87,7 +84,7 @@ import { Notification } from '@/types/Notification';
 
 const emit = defineEmits(['click', 'open']);
 
-defineProps({
+const props = defineProps({
   notificationsConfig: {
     required: true,
     type: Object as PropType<NotificationsConfig>,
@@ -96,6 +93,10 @@ defineProps({
     default: false,
     type: Boolean,
   },
+  size: {
+    default: 'md',
+    type: String as PropType<'xs' | 'sm' | 'md'>,
+  },
 });
 
 const breakpoints = useBreakpoints();
@@ -111,4 +112,34 @@ function onClick(notification: Notification) {
 function onOpen() {
   emit('open');
 }
+
+const iconClasses = computed(() => {
+  const classList = [''];
+
+  if (props.dark) {
+    classList.push('text-slate-300');
+  } else {
+    classList.push('text-slate-600');
+  }
+
+  if (props.size == 'xs') {
+    classList.push('h-4 w-4');
+  } else if (props.size == 'sm') {
+    classList.push('h-5 w-5');
+  } else {
+    classList.push('h-6 w-6');
+  }
+
+  return classList;
+});
+
+const counterSize = computed(() => {
+  if (props.size == 'xs') {
+    return 'xs';
+  } else if (props.size == 'sm') {
+    return 'xs';
+  } else {
+    return 'sm';
+  }
+});
 </script>

package/src/components/BaseLayoutSidebar.vue

@@ -90,7 +90,7 @@
           {{ systemAlert.message }}
         </BaseSystemAlert>
 
-        <div class="flex h-16 bg-white">
+        <div class="flex bg-white" :style="{ height: navbarHeight + 'px' }">
           <button
             type="button"
             class="border-r border-slate-200 px-4 text-slate-500 xl:hidden"
@@ -126,7 +126,8 @@
         :class="[dark ? 'bg-slate-800' : 'bg-white shadow']"
       >
         <div
-          class="flex h-16 flex-shrink-0 items-center px-4"
+          class="flex flex-shrink-0 items-center px-4"
+          :style="{ height: navbarHeight + 'px' }"
           :class="[dark ? 'bg-slate-900' : 'bg-white']"
         >
           <img class="block h-8 w-auto" :src="logoUrl" :alt="appName" />
@@ -142,7 +143,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref } from 'vue';
+import { ref, PropType } from 'vue';
 import {
   Dialog,
   DialogPanel,
@@ -167,6 +168,10 @@ const props = defineProps({
     default: false,
     type: Boolean,
   },
+  size: {
+    default: 'md',
+    type: String as PropType<'xs' | 'sm' | 'md'>,
+  },
 });
 
 /**
@@ -196,6 +201,17 @@ function openMenu() {
 function closeMenu() {
   showMobileMenu.value = false;
 }
+const navbarHeight = computed<number>(() => {
+  if (props.size === 'xs') {
+    return 50;
+  }
+
+  if (props.size === 'sm') {
+    return 54;
+  }
+
+  return 64;
+});
 
 provide('toggleMenu', toggleMenu);
 provide('openMenu', openMenu);

package/src/components/BaseLayoutSidebarConfigurable.stories.js

@@ -1,5 +1,5 @@
 import { DateTime } from 'luxon';
-import BaseContainer from './BaseContainer.vue';
+import PageDashboard from '../../.storybook/components/PageDashboard.vue';
 import BaseLayoutSidebarConfigurable from './BaseLayoutSidebarConfigurable.vue';
 
 export default {
@@ -24,12 +24,13 @@ export default {
           {
             label: 'Dashboard',
             to: '/',
-            icon: 'heroicons-home',
+            icon: 'heroicons:home-20-solid',
           },
           {
             label: 'Articles',
             to: '/articles',
-            icon: 'heroicons:document-text',
+            icon: 'heroicons:document-text-solid',
+            count: 3134,
             actions: [
               {
                 label: 'Articles',
@@ -53,7 +54,7 @@ export default {
           {
             label: 'Users',
             to: '/users',
-            icon: 'heroicons:users',
+            icon: 'heroicons:users-solid',
           },
         ],
       },
@@ -63,12 +64,12 @@ export default {
           {
             label: 'Account',
             to: '/account',
-            icon: 'heroicons:cog',
+            icon: 'heroicons:cog-solid',
           },
           {
             label: 'Logout',
             action: logout,
-            icon: 'heroicons:arrow-left-on-rectangle',
+            icon: 'heroicons:arrow-left-on-rectangle-solid',
           },
         ],
       },
@@ -77,17 +78,17 @@ export default {
       {
         label: 'Dashboard',
         to: '/',
-        icon: 'heroicons-home',
+        icon: 'heroicons:home-solid',
       },
       {
         label: 'Settings',
         to: '/account',
-        icon: 'heroicons:cog',
+        icon: 'heroicons:cog-solid',
       },
       {
         label: 'Logout',
         action: logout,
-        icon: 'heroicons:arrow-left-on-rectangle',
+        icon: 'heroicons:arrow-left-on-rectangle-20-solid',
       },
     ],
     notifications: {
@@ -116,20 +117,16 @@ async function logout() {
 
 const Template = (args) => ({
   components: {
-    BaseContainer,
     BaseLayoutSidebarConfigurable,
+    PageDashboard,
   },
   setup() {
     return { args };
   },
   template: `
     <BaseLayoutSidebarConfigurable v-bind="args">
-      <div class="py-16">
-        <BaseContainer size="3xl">
-          <p v-for="i in 20" class="mb-1">
-            Amet occaecat enim pariatur incididunt enim laborum enim. Duis cillum in in excepteur sit excepteur laboris consectetur magna. Commodo proident labore commodo duis veniam do nisi irure ipsum officia excepteur non. Nisi cillum mollit tempor ut.
-          </p>
-        </BaseContainer>
+      <div class="py-10 bg-slate-50">
+        <PageDashboard />
       </div>
     </BaseLayoutSidebarConfigurable>
   `,
@@ -146,3 +143,24 @@ Dark.args = {
   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/BaseLayoutSidebarConfigurable.vue

@@ -1,23 +1,25 @@
 <template>
-  <BaseLayoutSidebar :app-name="appName" :logo-url="logoUrl" :dark="dark">
+  <BaseLayoutSidebar
+    :app-name="appName"
+    :logo-url="logoUrl"
+    :dark="dark"
+    :size="size"
+  >
     <template #menu>
       <div class="px-3 py-6">
         <div class="space-y-8">
           <div v-for="section in actionSections" :key="section.title">
-            <h2
-              v-if="section.title"
-              class="mb-3 pl-3 text-xs font-semibold uppercase tracking-widest"
-              :class="dark ? 'text-slate-400' : 'text-slate-500'"
-            >
+            <h2 v-if="section.title" class="pl-3" :class="sectionTitleClasses">
               {{ section.title }}
             </h2>
             <div>
-              <div class="space-y-1">
+              <div :class="[size == 'md' ? 'space-y-1' : 'space-y-0.5']">
                 <BaseNavbarSideItem
                   v-for="item in section.actions"
                   :key="item.label"
                   :item="item"
                   :dark="dark"
+                  :size="size"
                 />
               </div>
             </div>
@@ -38,16 +40,27 @@
             v-if="notifications"
             :notifications-config="notifications"
             class="mr-1 sm:mr-2"
+            :size="size"
             @click="onNotificationClick"
             @open="onNotificationOpen"
           ></BaseLayoutNotificationDropdown>
 
           <!-- Profile dropdown -->
-          <div class="relative ml-3 mr-3">
-            <BaseMenu :items="userMenu">
+          <div
+            class="relative mr-2"
+            :class="{
+              'ml-2': size == 'md',
+              'ml-1': size == 'sm',
+              'ml-0': size == 'xs',
+            }"
+          >
+            <BaseMenu :items="userMenu" :size="size == 'xs' ? 'xs' : 'sm'">
               <template #button="{ open }">
-                <div class="flex" :class="[open ? '' : '']">
-                  <BaseAvatar :user="user" show-details />
+                <div
+                  class="flex rounded-md p-1.5 hover:bg-slate-100"
+                  :class="[open ? 'bg-slate-100' : '']"
+                >
+                  <BaseAvatar :user="user" :size="size" show-details />
                 </div>
               </template>
             </BaseMenu>
@@ -103,6 +116,10 @@ const props = defineProps({
     default: false,
     type: Boolean,
   },
+  size: {
+    default: 'md',
+    type: String as PropType<'xs' | 'sm' | 'md'>,
+  },
 });
 
 const actionSections = computed((): ActionSection[] => {
@@ -120,6 +137,26 @@ const actionSections = computed((): ActionSection[] => {
   ];
 });
 
+const sectionTitleClasses = computed((): string[] => {
+  const classList = ['mb-3 font-semibold uppercase tracking-widest'];
+
+  if (props.dark) {
+    classList.push('text-gray-400');
+  } else {
+    classList.push('text-gray-500');
+  }
+
+  if (props.size === 'xs') {
+    classList.push('text-[10px]');
+  } else if (props.size === 'sm') {
+    classList.push('text-[11px]');
+  } else if (props.size === 'md') {
+    classList.push('text-xs');
+  }
+
+  return classList;
+});
+
 function onNotificationClick(notification: Notification) {
   emit('notification:click', notification);
 }

package/src/components/BaseMenuItem.vue

@@ -5,11 +5,7 @@
       <span :class="textSize">{{ label }}</span>
     </div>
     <div v-if="count" class="relative -top-px ml-[5px]">
-      <BaseCounter
-        :count="count"
-        :max-digit="2"
-        :color="active ? 'white' : 'primary'"
-      />
+      <BaseCounter :count="count" :max-digit="2" :color="color" />
     </div>
   </div>
 </template>
@@ -79,11 +75,12 @@ const buttonClasses = computed((): string => {
   let baseClasses =
     'flex items-center justify-between w-full leading-tight py-2 text-sm text-left rounded';
 
+  baseClasses += ' ' + textColor.value;
+
   if (!props.active) {
     baseClasses += ' bg-white';
-    baseClasses += ' ' + textColor.value;
   } else {
-    baseClasses += ' bg-primary-600 text-white';
+    baseClasses += ' bg-slate-100';
   }
 
   if (props.icon) {
@@ -100,8 +97,6 @@ const iconClasses = computed((): string => {
 
   if (!props.active) {
     baseClasses += ' opacity-70 ' + textColor.value;
-  } else {
-    baseClasses += ' text-primary-100';
   }
 
   return baseClasses;

package/src/components/BaseNavbarItemContent.vue

@@ -2,7 +2,7 @@
   <div :class="classes">
     <div class="group flex grow items-center">
       <BaseIcon v-if="icon" :icon="icon" :class="iconClasses" />
-      {{ label }}
+      <span :class="[sizeClasses]">{{ label }}</span>
     </div>
     <div v-if="count" class="relative -top-px ml-[5px]">
       <BaseCounter :count="count" :max-digit="2" :color="'primary'" />
@@ -12,6 +12,7 @@
 
 <script lang="ts" setup>
 import { Icon as BaseIcon } from '@iconify/vue';
+import { PropType } from 'vue';
 import BaseCounter from './BaseCounter.vue';
 
 const props = defineProps({
@@ -35,6 +36,10 @@ const props = defineProps({
     default: false,
     type: Boolean,
   },
+  size: {
+    default: 'md',
+    type: String as PropType<'sm' | 'md'>,
+  },
 });
 
 const classes = computed(() => {
@@ -42,12 +47,6 @@ const classes = computed(() => {
     'text-left border-b-2 px-2 flex items-center text-base font-medium w-full',
   ];
 
-  if (props.dark) {
-    classList.push('');
-  } else {
-    classList.push('');
-  }
-
   if (props.active) {
     if (props.dark) {
       classList.push('border-white text-white');
@@ -77,4 +76,11 @@ const iconClasses = computed((): string[] => {
   }
   return classList;
 });
+
+const sizeClasses = computed(() => {
+  if (props.size == 'sm') {
+    return 'text-sm';
+  }
+  return 'text-base';
+});
 </script>

package/src/components/BaseNavbarSideItem.vue

@@ -15,25 +15,21 @@
           :active="active"
           :count="item.count"
           :dark="dark"
+          :size="size"
         />
       </template>
     </BaseActionItem>
 
     <div
       v-if="showSubActions && item.actions && item.actions.length"
-      class="ml-10 mt-1.5 mb-3"
+      class="mt-2 mb-3"
     >
-      <div v-for="subItem in item.actions" :key="subItem.label" class="mb-1">
+      <div v-for="subItem in item.actions" :key="subItem.label">
         <BaseActionItem
           :to="subItem.to"
           :href="subItem.href"
           :action="subItem.action"
-          :class="[
-            'flex w-full',
-            dark
-              ? 'text-slate-300 hover:text-white'
-              : 'text-slate-900 hover:text-slate-600',
-          ]"
+          :class="subItemClasses"
         >
           {{ subItem.label }}
         </BaseActionItem>
@@ -61,6 +57,10 @@ const props = defineProps({
     default: 'toggle',
     type: String as PropType<'toggle' | 'always'>,
   },
+  size: {
+    default: 'md',
+    type: String as PropType<'xs' | 'sm' | 'md'>,
+  },
 });
 
 const emit = defineEmits(['click']);
@@ -88,4 +88,24 @@ const showSubActions = computed((): boolean => {
   }
   return routeActive.value;
 });
+
+const subItemClasses = computed((): string[] => {
+  const classList = ['flex w-full font-normal'];
+
+  if (props.dark) {
+    classList.push('text-slate-300 hover:text-white');
+  } else {
+    classList.push('text-slate-900 hover:text-slate-600');
+  }
+
+  if (props.size == 'xs') {
+    classList.push('pl-[33.5px] text-[13px] mb-1');
+  } else if (props.size == 'sm') {
+    classList.push('pl-[36px] text-sm mb-1.5');
+  } else {
+    classList.push('pl-[40px] text-base mb-1');
+  }
+
+  return classList;
+});
 </script>

package/src/components/BaseNavbarSideItemContent.vue

@@ -2,16 +2,22 @@
   <div :class="classes">
     <div class="group flex grow items-center">
       <BaseIcon v-if="icon" :icon="icon" :class="iconClasses" />
-      {{ label }}
+      <span>{{ label }}</span>
     </div>
     <div v-if="count" class="relative -top-px ml-[5px]">
-      <BaseCounter :count="count" :max-digit="2" :color="'primary'" />
+      <BaseCounter
+        :size="size"
+        :count="count"
+        :max-digit="2"
+        :color="'primary'"
+      />
     </div>
   </div>
 </template>
 
 <script lang="ts" setup>
 import { Icon as BaseIcon } from '@iconify/vue';
+import { PropType } from 'vue';
 import BaseCounter from './BaseCounter.vue';
 
 const props = defineProps({
@@ -35,24 +41,20 @@ const props = defineProps({
     default: false,
     type: Boolean,
   },
+  size: {
+    default: 'md',
+    type: String as PropType<'xs' | 'sm' | 'md'>,
+  },
 });
 
 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('');
-  }
+  const classList = ['text-left rounded-md flex w-full'];
 
   if (props.active) {
     if (props.dark) {
       classList.push('bg-slate-700 text-white');
     } else {
-      classList.push('bg-slate-100 text-slate-900');
+      classList.push('bg-slate-100 text-primary-700');
     }
   } else {
     if (props.dark) {
@@ -62,16 +64,41 @@ const classes = computed(() => {
     }
   }
 
+  if (props.size == 'xs') {
+    classList.push('text-[13px] px-2.5 py-1 font-medium');
+  }
+
+  if (props.size == 'sm') {
+    classList.push('text-sm px-3 py-1.5 font-medium');
+  }
+
+  if (props.size == 'md') {
+    classList.push('text-base px-3 py-2 font-medium');
+  }
+
   return classList;
 });
 
 const iconClasses = computed((): string[] => {
-  const classList = ['w-5 h-5 shrink-0 mr-2 leading-none inline-block'];
+  const classList = ['shrink-0 leading-none inline-block'];
   if (props.active) {
     classList.push('opacity-100');
   } else {
     classList.push('opacity-70 group-hover:opacity-100');
   }
+
+  if (props.size == 'xs') {
+    classList.push('w-3.5 h-3.5 mr-2');
+  }
+
+  if (props.size == 'sm') {
+    classList.push('w-4 h-4 mr-2');
+  }
+
+  if (props.size == 'md') {
+    classList.push('w-5 h-5 mr-2');
+  }
+
   return classList;
 });
 </script>

package/src/components/BaseTabItem.vue

@@ -7,7 +7,7 @@
     >
       <a
         :href="href"
-        class="group relative inline-block rounded-t-lg font-medium"
+        class="group relative inline-block rounded-t-lg"
         :class="[
           tabIsActive(isActive, isExactActive)
             ? 'active text-primary-600'
@@ -72,13 +72,13 @@ function tabIsActive(isActive: boolean, isExactActive: boolean) {
 const sizeClass = computed(() => {
   switch (size.value) {
     case 'xs':
-      return 'text-xs px-1.5 py-2';
+      return 'text-xs px-1 py-2 font-normal';
     case 'sm':
-      return 'text-sm px-1.5 py-2';
+      return 'text-sm px-1 py-2.5 font-normal';
     case 'md':
-      return 'text-base px-2 py-3';
+      return 'text-sm px-1 py-4 font-normal';
     case 'lg':
-      return 'text-lg px-3 py-4';
+      return 'text-base px-1 py-4 font-normal';
   }
 });
 </script>