sprintify-ui 0.0.196 → 0.0.197

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

@@ -10,11 +10,11 @@ declare const _default: import("vue").DefineComponent<{
     };
     size: {
         default: string;
-        type: StringConstructor;
+        type: PropType<"xs" | "sm" | "md">;
     };
     color: {
         default: string;
-        type: PropType<"danger" | "dark" | "light" | "white" | "primary">;
+        type: PropType<"success" | "danger" | "warning" | "dark" | "light" | "white" | "primary">;
     };
 }, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     count: {
@@ -27,15 +27,15 @@ declare const _default: import("vue").DefineComponent<{
     };
     size: {
         default: string;
-        type: StringConstructor;
+        type: PropType<"xs" | "sm" | "md">;
     };
     color: {
         default: string;
-        type: PropType<"danger" | "dark" | "light" | "white" | "primary">;
+        type: PropType<"success" | "danger" | "warning" | "dark" | "light" | "white" | "primary">;
     };
 }>>, {
-    color: "danger" | "dark" | "light" | "white" | "primary";
-    size: string;
+    color: "success" | "danger" | "warning" | "dark" | "light" | "white" | "primary";
+    size: "xs" | "sm" | "md";
     maxDigit: number;
 }>;
 export default _default;

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

@@ -9,6 +9,10 @@ declare const _default: import("vue").DefineComponent<{
         default: boolean;
         type: BooleanConstructor;
     };
+    size: {
+        default: string;
+        type: PropType<"xs" | "sm" | "md">;
+    };
 }, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("click" | "open")[], "click" | "open", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     notificationsConfig: {
         required: true;
@@ -18,10 +22,15 @@ declare const _default: import("vue").DefineComponent<{
         default: boolean;
         type: BooleanConstructor;
     };
+    size: {
+        default: string;
+        type: PropType<"xs" | "sm" | "md">;
+    };
 }>> & {
     onClick?: ((...args: any[]) => any) | undefined;
     onOpen?: ((...args: any[]) => any) | undefined;
 }, {
     dark: boolean;
+    size: "xs" | "sm" | "md";
 }>;
 export default _default;

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

@@ -1,3 +1,4 @@
+import { PropType } from 'vue';
 declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
     appName: {
         default: string;
@@ -11,6 +12,10 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
         default: boolean;
         type: BooleanConstructor;
     };
+    size: {
+        default: string;
+        type: PropType<"xs" | "sm" | "md">;
+    };
 }, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     appName: {
         default: string;
@@ -24,8 +29,13 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
         default: boolean;
         type: BooleanConstructor;
     };
+    size: {
+        default: string;
+        type: PropType<"xs" | "sm" | "md">;
+    };
 }>>, {
     dark: boolean;
+    size: "xs" | "sm" | "md";
     appName: string;
     logoUrl: string;
 }>, {

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

@@ -30,6 +30,10 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
         default: boolean;
         type: BooleanConstructor;
     };
+    size: {
+        default: string;
+        type: PropType<"xs" | "sm" | "md">;
+    };
 }, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("notification:click" | "notification:open")[], "notification:click" | "notification:open", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     appName: {
         default: string;
@@ -59,12 +63,17 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
         default: boolean;
         type: BooleanConstructor;
     };
+    size: {
+        default: string;
+        type: PropType<"xs" | "sm" | "md">;
+    };
 }>> & {
     "onNotification:click"?: ((...args: any[]) => any) | undefined;
     "onNotification:open"?: ((...args: any[]) => any) | undefined;
 }, {
     dark: boolean;
     notifications: NotificationsConfig;
+    size: "xs" | "sm" | "md";
     appName: string;
     logoUrl: string;
 }>, {

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

@@ -1,3 +1,4 @@
+import { PropType } from 'vue';
 declare const _default: import("vue").DefineComponent<{
     label: {
         default: undefined;
@@ -19,6 +20,10 @@ declare const _default: import("vue").DefineComponent<{
         default: boolean;
         type: BooleanConstructor;
     };
+    size: {
+        default: string;
+        type: PropType<"sm" | "md">;
+    };
 }, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     label: {
         default: undefined;
@@ -40,11 +45,16 @@ declare const _default: import("vue").DefineComponent<{
         default: boolean;
         type: BooleanConstructor;
     };
+    size: {
+        default: string;
+        type: PropType<"sm" | "md">;
+    };
 }>>, {
     label: string;
     active: boolean;
     icon: string;
     dark: boolean;
     count: number;
+    size: "sm" | "md";
 }>;
 export default _default;

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

@@ -13,6 +13,10 @@ declare const _default: import("vue").DefineComponent<{
         default: string;
         type: PropType<"toggle" | "always">;
     };
+    size: {
+        default: string;
+        type: PropType<"xs" | "sm" | "md">;
+    };
 }, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "click"[], "click", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     item: {
         required: true;
@@ -26,10 +30,15 @@ declare const _default: import("vue").DefineComponent<{
         default: string;
         type: PropType<"toggle" | "always">;
     };
+    size: {
+        default: string;
+        type: PropType<"xs" | "sm" | "md">;
+    };
 }>> & {
     onClick?: ((...args: any[]) => any) | undefined;
 }, {
     dark: boolean;
+    size: "xs" | "sm" | "md";
     actionsVisible: "toggle" | "always";
 }>;
 export default _default;

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

@@ -1,3 +1,4 @@
+import { PropType } from 'vue';
 declare const _default: import("vue").DefineComponent<{
     label: {
         default: undefined;
@@ -19,6 +20,10 @@ declare const _default: import("vue").DefineComponent<{
         default: boolean;
         type: BooleanConstructor;
     };
+    size: {
+        default: string;
+        type: PropType<"xs" | "sm" | "md">;
+    };
 }, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     label: {
         default: undefined;
@@ -40,11 +45,16 @@ declare const _default: import("vue").DefineComponent<{
         default: boolean;
         type: BooleanConstructor;
     };
+    size: {
+        default: string;
+        type: PropType<"xs" | "sm" | "md">;
+    };
 }>>, {
     label: string;
     active: boolean;
     icon: string;
     dark: boolean;
     count: number;
+    size: "xs" | "sm" | "md";
 }>;
 export default _default;

package/package.json

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

package/src/components/BaseAvatar.vue

@@ -84,7 +84,7 @@ const textSizeClass = computed((): string => {
   const base = 'text-sm';
 
   if (props.size == 'xs') {
-    return 'text-xs';
+    return 'text-[11px]';
   }
   if (props.size == 'sm') {
     return 'text-xs';

package/src/components/BaseCounter.stories.js

@@ -30,3 +30,18 @@ Demo.args = {
   count: 355,
   maxDigit: 2,
 };
+
+export const SizeXS = Template.bind({});
+SizeXS.args = {
+  size: 'xs',
+};
+
+export const SizeSM = Template.bind({});
+SizeSM.args = {
+  size: 'sm',
+};
+
+export const SizeMD = Template.bind({});
+SizeMD.args = {
+  size: 'md',
+};

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);
 }