sprintify-ui 0.0.19 → 0.0.20

package/src/components/BaseMediaItem.vue

@@ -1,28 +1,28 @@
 <template>
-  <div class="rounded border border-slate-300 bg-white shadow">
+  <div class="rounded bg-white shadow">
     <div class="relative flex">
       <div class="shrink-0">
-        <BaseMediaPreview class="h-14 w-14 rounded-l" :media="media" />
+        <BaseMediaPreview class="h-12 w-12 rounded-l" :media="media" />
       </div>
       <component
         :is="url ? 'a' : 'p'"
         :href="url"
         target="_blank"
-        class="grow overflow-hidden px-3 pt-3"
+        class="flex grow items-center overflow-hidden px-3"
       >
         <div class="text-left leading-tight">
-          <p class="grow truncate text-sm font-medium">
+          <p class="mb-px grow truncate text-[13px] font-medium">
             {{ name }}
           </p>
-          <p class="shrink-0 text-[10px] font-medium text-slate-400">
+          <p class="shrink-0 text-[10px] text-slate-400">
             {{ size }}
           </p>
         </div>
       </component>
-      <div v-if="showRemove" class="shrink-0 p-2">
+      <div v-if="showRemove" class="shrink-0 p-0.5">
         <button
           type="button"
-          class="rounded-full bg-slate-400 p-1 text-white hover:bg-slate-500"
+          class="rounded-full bg-white p-1 text-slate-400 hover:bg-slate-100"
           @click="$emit('remove')"
         >
           <BaseIcon icon="heroicons:x-mark-20-solid" class="h-4 w-4"></BaseIcon>

package/src/components/BaseMediaLibrary.vue

@@ -22,16 +22,16 @@
           <div
             class="rounded border border-dashed p-6 duration-150"
             :class="[
-              baseFileUploaderProps.dragging ? 'bg-blue-100' : 'bg-slate-100',
+              baseFileUploaderProps.dragging ? 'bg-blue-100' : 'bg-white',
               baseFileUploaderProps.disabled
                 ? 'cursor-not-allowed border-slate-300'
-                : 'border-slate-300 hover:bg-slate-50',
+                : 'border-slate-300 hover:bg-slate-100',
             ]"
           >
             <div :class="[baseFileUploaderProps.disabled ? 'opacity-30' : '']">
               <BaseIcon
                 icon="heroicons:arrow-up-on-square"
-                class="mx-auto mb-3 h-6 w-6 text-primary-500"
+                class="mx-auto mb-3 h-6 w-6 text-slate-500"
               />
               <div class="text-center">
                 <p class="mb-0 text-sm font-medium leading-tight">

package/src/components/BaseMediaPreview.vue

@@ -20,7 +20,7 @@
     />
     <div
       v-else
-      class="flex h-full w-full items-center justify-center bg-slate-200"
+      class="flex h-full w-full items-center justify-center bg-slate-100"
     >
       <BaseIcon
         v-if="extension == 'pdf'"

package/src/components/BaseNavbar.stories.js

@@ -1,5 +1,6 @@
 import BaseNavbar from './BaseNavbar.vue';
 import BaseNavbarItem from './BaseNavbarItem.vue';
+import BaseNavbarSideItem from './BaseNavbarSideItem.vue';
 import BaseAvatar from './BaseAvatar.vue';
 import BaseMenu from './BaseMenu.vue';
 import { Icon as BaseIcon } from '@iconify/vue';
@@ -8,12 +9,16 @@ export default {
   title: 'Layout/BaseNavbar',
   component: BaseNavbar,
   args: {},
+  parameters: {
+    layout: 'fullscreen',
+  },
 };
 
 const Template = (args) => ({
   components: {
     BaseNavbar,
     BaseNavbarItem,
+    BaseNavbarSideItem,
     BaseIcon,
     BaseAvatar,
     BaseMenu,
@@ -36,13 +41,13 @@ const Template = (args) => ({
       },
       {
         label: 'Products',
-        to: '/',
+        to: '/setup',
         count: 234,
         type: 'RouterLink',
       },
       {
         label: 'Settings',
-        to: '/',
+        to: '/settings',
         type: 'RouterLink',
       },
     ];
@@ -66,28 +71,29 @@ const Template = (args) => ({
     return { args, menu, userMenu, user };
   },
   template: `
-    <div class="mb-40">
+    <div class="sticky top-0 left-0 w-full shadow">
       <BaseNavbar v-bind="args">
         <template #navbar>
           <div class="flex h-16 justify-between">
             <!-- Left -->
 
-            <div class="flex items-center justify-center">
+            <div class="flex justify-center">
               <!-- Logo -->
               <router-link to="/" class="flex flex-shrink-0 grow items-center p-2 pl-0">
                 <img
                   class="block h-8 w-auto"
-                  src="https://sprintify.witify.io/img/logo/logo-side-dark.svg"
+                  src="https://sprintify.witify.io/img/logo/logo-side.svg"
                   alt="Sprintify"
                 />
               </router-link>
 
               <!-- Links (desktop) -->
-              <div class="ml-10 hidden items-center space-x-4 md:flex">
+              <div class="ml-10 hidden space-x-4 md:flex">
                 <BaseNavbarItem
                   v-for="item in menu"
                   :key="item.label"
                   :item="item"
+                  item-class="flex"
                 />
               </div>
             </div>
@@ -102,7 +108,7 @@ const Template = (args) => ({
                     class="flex rounded-full"
                     :class="[open ? 'bg-slate-700 ring-2 ring-blue-500 ring-offset-2 ring-offset-slate-700' : '']"
                   >
-                    <BaseAvatar class="text-white" :user="user" />
+                    <BaseAvatar :user="user" />
                   </div>
                 </template>
               </BaseMenu>
@@ -112,16 +118,15 @@ const Template = (args) => ({
 
         <template #mobile>
           <!-- Links mobile -->
-          <div class="space-y-1 p-2">
-            <BaseNavbarItem
+          <div class="space-y-1 p-2 pt-0">
+            <BaseNavbarSideItem
               v-for="item in menu"
               :key="item.label"
               :item="item"
-              class="flex w-full"
             />
           </div>
     
-          <hr class="my-4 border-slate-700" />
+          <hr class="mb-4 mt-2 border-slate-200" />
     
           <!-- Profile links -->
           <div class="p-2 pb-6">
@@ -129,14 +134,13 @@ const Template = (args) => ({
               :user="user"
               show-details
               size="base"
-              class="px-3 text-white"
+              class="px-3"
             />
             <div class="mt-4 space-y-1">
-              <BaseNavbarItem
+              <BaseNavbarSideItem
                 v-for="item in userMenu"
                 :key="item.label"
                 :item="item"
-                class="flex w-full"
               />
             </div>
           </div>

package/src/components/BaseNavbar.vue

@@ -1,5 +1,8 @@
 <template>
-  <nav class="bg-slate-800">
+  <nav
+    class="border-t-[3px] border-primary-500"
+    :class="[dark ? 'bg-slate-900' : 'bg-white']"
+  >
     <BaseContainer :size="size">
       <div class="flex h-16 justify-between">
         <!-- Navbar (desktop and mobile) -->
@@ -11,7 +14,12 @@
         <div class="-mr-2 flex items-center md:hidden">
           <button
             type="button"
-            class="inline-flex items-center justify-center rounded-md bg-slate-800 p-2 text-slate-400 hover:bg-slate-700 hover:text-white focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2 focus:ring-offset-slate-800"
+            class="inline-flex items-center justify-center rounded-md p-2 focus:outline-none focus:ring-2 focus:ring-offset-2"
+            :class="[
+              dark
+                ? 'text-slate-200 hover:bg-slate-800 hover:text-white focus:ring-slate-700  focus:ring-offset-slate-900'
+                : 'text-slate-500 hover:bg-slate-100 hover:text-slate-900 focus:ring-slate-300  focus:ring-offset-white',
+            ]"
             @click="toggleMenu()"
           >
             <span class="sr-only">Open main menu</span>
@@ -33,7 +41,11 @@
     </BaseContainer>
 
     <!-- Mobile -->
-    <div v-if="showMobileMenu" class="absolute w-full bg-slate-800 md:hidden">
+    <div
+      v-if="showMobileMenu"
+      class="absolute w-full md:hidden"
+      :class="[dark ? 'bg-slate-900' : 'bg-white']"
+    >
       <slot
         name="mobile"
         :toggle-menu="toggleMenu"
@@ -53,6 +65,10 @@ defineProps({
     default: '7xl',
     type: String,
   },
+  dark: {
+    default: false,
+    type: Boolean,
+  },
 });
 
 const showMobileMenu = ref(false);

package/src/components/BaseNavbarItem.vue

@@ -1,57 +1,28 @@
 <template>
-  <div>
-    <RouterLink
-      v-if="item.to"
-      v-slot="{ isActive, href: slotHref, navigate }"
-      custom
-      :to="item.to"
+  <div class="flex">
+    <BaseActionItem
+      :item="item"
+      :dark="dark"
+      item-class="flex w-full"
+      @click="onClick"
     >
-      <a
-        :active="isActive"
-        :href="slotHref"
-        :aria-current="isActive ? 'page' : undefined"
-        class="block w-full"
-        @click.prevent="onClick(navigate)"
-      >
-        <slot :active="isActive">
-          <BaseNavbarItemContent
-            :label="item.label"
-            :icon="item.icon"
-            :active="isActive"
-            :count="item.count"
-          />
-        </slot>
-      </a>
-    </RouterLink>
-    <button
-      v-else-if="item.action"
-      type="button"
-      class="block w-full"
-      @click="item.action"
-    >
-      <slot :active="false">
+      <template #default="{ active }">
         <BaseNavbarItemContent
           :label="item.label"
           :icon="item.icon"
+          :active="active"
           :count="item.count"
+          :dark="dark"
         />
-      </slot>
-    </button>
-    <a v-else-if="item.href" :href="item.href" class="block w-full">
-      <slot :active="false">
-        <BaseNavbarItemContent
-          :label="item.label"
-          :icon="item.icon"
-          :count="item.count"
-        />
-      </slot>
-    </a>
+      </template>
+    </BaseActionItem>
   </div>
 </template>
 
 <script setup lang="ts">
 import { PropType } from 'vue';
 import { ActionItem } from '@/types/types';
+import BaseActionItem from './BaseActionItem.vue';
 import BaseNavbarItemContent from './BaseNavbarItemContent.vue';
 
 defineProps({
@@ -59,14 +30,17 @@ defineProps({
     required: true,
     type: Object as PropType<ActionItem>,
   },
+  dark: {
+    default: false,
+    type: Boolean,
+  },
 });
 
 const closeMenu = inject('closeMenu') as () => void;
 
 const emit = defineEmits(['click']);
 
-function onClick(navigate: () => void) {
-  navigate();
+async function onClick() {
   emit('click');
   closeMenu();
 }

package/src/components/BaseNavbarItemContent.vue

@@ -1,6 +1,6 @@
 <template>
   <div :class="classes">
-    <div class="flex grow items-center">
+    <div class="group flex grow items-center">
       <BaseIcon v-if="icon" :icon="icon" :class="iconClasses" />
       {{ label }}
     </div>
@@ -14,12 +14,6 @@
 import { Icon as BaseIcon } from '@iconify/vue';
 import BaseCounter from './BaseCounter.vue';
 
-const buttonClasses =
-  'px-3 py-2 text-left rounded-md md:text-sm flex text-base font-normal w-full';
-const buttonInactiveClasses =
-  'hover:bg-slate-700 hover:text-white text-slate-300';
-const buttonActiveClasses = 'bg-slate-900 text-white';
-
 const props = defineProps({
   label: {
     default: undefined,
@@ -37,24 +31,50 @@ const props = defineProps({
     default: undefined,
     type: Number,
   },
+  dark: {
+    default: false,
+    type: Boolean,
+  },
 });
 
 const classes = computed(() => {
-  return [
-    buttonClasses,
-    props.active ? buttonActiveClasses : buttonInactiveClasses,
+  const classList = [
+    'text-left border-b-2 px-2 flex items-center text-base font-medium w-full',
   ];
-});
 
-const iconClasses = computed((): string => {
-  let baseClasses = ' w-5 h-5 shrink-0 mr-2 leading-none inline-block';
+  if (props.dark) {
+    classList.push('');
+  } else {
+    classList.push('');
+  }
 
   if (props.active) {
-    baseClasses += ' text-white';
+    if (props.dark) {
+      classList.push('border-white text-white');
+    } else {
+      classList.push('border-primary-500 text-slate-900');
+    }
   } else {
-    baseClasses += ' text-slate-300';
+    classList.push('border-transparent');
+    if (props.dark) {
+      classList.push('hover:border-white hover:text-white text-slate-200');
+    } else {
+      classList.push(
+        'hover:border-primary-500 hover:text-slate-900 text-slate-800'
+      );
+    }
   }
 
-  return baseClasses;
+  return classList;
+});
+
+const iconClasses = computed((): string[] => {
+  const classList = ['w-5 h-5 shrink-0 mr-2 leading-none inline-block'];
+  if (props.active) {
+    classList.push('opacity-100');
+  } else {
+    classList.push('opacity-70 group-hover:opacity-100');
+  }
+  return classList;
 });
 </script>

package/src/components/BaseNavbarSideItem.vue

@@ -0,0 +1,42 @@
+<template>
+  <BaseActionItem
+    :item="item"
+    :dark="dark"
+    item-class="flex w-full"
+    @click="onClick"
+  >
+    <template #default="{ active }">
+      <BaseNavbarSideItemContent
+        :label="item.label"
+        :icon="item.icon"
+        :active="active"
+        :count="item.count"
+        :dark="dark"
+      />
+    </template>
+  </BaseActionItem>
+</template>
+
+<script setup lang="ts">
+import { PropType } from 'vue';
+import { ActionItem } from '@/types/types';
+import BaseActionItem from './BaseActionItem.vue';
+import BaseNavbarSideItemContent from './BaseNavbarSideItemContent.vue';
+
+defineProps({
+  item: {
+    required: true,
+    type: Object as PropType<ActionItem>,
+  },
+  dark: {
+    default: false,
+    type: Boolean,
+  },
+});
+
+const emit = defineEmits(['click']);
+
+async function onClick() {
+  emit('click');
+}
+</script>

package/src/components/BaseNavbarSideItemContent.vue

@@ -0,0 +1,77 @@
+<template>
+  <div :class="classes">
+    <div class="group flex grow items-center">
+      <BaseIcon v-if="icon" :icon="icon" :class="iconClasses" />
+      {{ label }}
+    </div>
+    <div v-if="count" class="relative -top-px ml-[5px]">
+      <BaseCounter :count="count" :max-digit="2" :color="'primary'" />
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { Icon as BaseIcon } from '@iconify/vue';
+import BaseCounter from './BaseCounter.vue';
+
+const props = defineProps({
+  label: {
+    default: undefined,
+    type: String,
+  },
+  icon: {
+    default: undefined,
+    type: String,
+  },
+  active: {
+    default: false,
+    type: Boolean,
+  },
+  count: {
+    default: undefined,
+    type: Number,
+  },
+  dark: {
+    default: false,
+    type: Boolean,
+  },
+});
+
+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('');
+  }
+
+  if (props.active) {
+    if (props.dark) {
+      classList.push('bg-slate-700 text-white');
+    } else {
+      classList.push('bg-slate-100 text-slate-900');
+    }
+  } else {
+    if (props.dark) {
+      classList.push('hover:bg-slate-800 hover:text-white text-slate-300');
+    } else {
+      classList.push('hover:bg-slate-50 hover:text-slate-900 text-slate-800');
+    }
+  }
+
+  return classList;
+});
+
+const iconClasses = computed((): string[] => {
+  const classList = ['w-5 h-5 shrink-0 mr-2 leading-none inline-block'];
+  if (props.active) {
+    classList.push('opacity-100');
+  } else {
+    classList.push('opacity-70 group-hover:opacity-100');
+  }
+  return classList;
+});
+</script>

package/src/components/index.ts

@@ -60,6 +60,11 @@ import BaseTableColumn from './BaseTableColumn.vue';
 import BaseTextarea from './BaseTextarea.vue';
 import BaseTextareaAutoresize from './BaseTextareaAutoresize.vue';
 
+import BaseLayoutStacked from './BaseLayoutStacked.vue';
+import BaseLayoutStackedConfigurable from './BaseLayoutStackedConfigurable.vue';
+import BaseLayoutSidebar from './BaseLayoutSidebar.vue';
+import BaseLayoutSidebarConfigurable from './BaseLayoutSidebarConfigurable.vue';
+
 export {
   BaseAlert,
   BaseApp,
@@ -122,4 +127,8 @@ export {
   BaseTableColumn,
   BaseTextarea,
   BaseTextareaAutoresize,
+  BaseLayoutStacked,
+  BaseLayoutStackedConfigurable,
+  BaseLayoutSidebar,
+  BaseLayoutSidebarConfigurable,
 };