sprintify-ui 0.0.196 → 0.0.197

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>