sprintify-ui 0.8.12 → 0.8.14

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

@@ -91,6 +91,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
     logoTo: RouteLocationRaw;
     notifications: NotificationsConfig;
 }, {}>, {
+    navbar?(_: {}): any;
     default?(_: {}): any;
 }>;
 export default _default;

package/package.json

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

package/src/components/BaseLayoutSidebar.vue

@@ -178,7 +178,7 @@
           >
             <BaseIcon
               icon="mdi:dock-left"
-              class="w-6 h-6"
+              class="w-5 h-5"
             />
           </button>
         </div>

package/src/components/BaseLayoutSidebarConfigurable.stories.js

@@ -2,6 +2,8 @@ import { DateTime } from 'luxon';
 import PageDashboard from '../../.storybook/components/PageDashboard.vue';
 import BaseLayoutSidebarConfigurable from './BaseLayoutSidebarConfigurable.vue';
 import { useSystemAlertStore } from '../stores/systemAlerts';
+import { sizes } from '../../.storybook/utils';
+import BaseAutocompleteFetch from './BaseAutocompleteFetch.vue';
 
 export default {
   title: 'Layout/BaseLayoutSidebarConfigurable',
@@ -9,6 +11,14 @@ export default {
   parameters: {
     layout: 'fullscreen',
   },
+  argTypes: {
+    size: {
+      control: {
+        type: 'select',
+      },
+      options: sizes,
+    },
+  },
   args: {
     user: {
       email: 'jane@witify.io',
@@ -49,7 +59,7 @@ export default {
           {
             label: 'Articles',
             to: '/articles',
-            icon: 'heroicons:document-text-solid',
+            icon: 'heroicons:document-text-20-solid',
             count: 3134,
             actions: [
               {
@@ -75,7 +85,7 @@ export default {
           {
             label: 'Users',
             to: '/users',
-            icon: 'heroicons:users-solid',
+            icon: 'heroicons:users-20-solid',
           },
         ],
       },
@@ -85,12 +95,12 @@ export default {
           {
             label: 'Account',
             to: '/account',
-            icon: 'heroicons:cog-solid',
+            icon: 'heroicons:cog-20-solid',
           },
           {
             label: 'Logout',
             action: logout,
-            icon: 'heroicons:arrow-left-on-rectangle-solid',
+            icon: 'heroicons:arrow-left-on-rectangle-20-solid',
           },
         ],
       },
@@ -99,12 +109,12 @@ export default {
       {
         label: 'Dashboard',
         to: '/',
-        icon: 'heroicons:home-solid',
+        icon: 'heroicons:home-20-solid',
       },
       {
         label: 'Settings',
         to: '/account',
-        icon: 'heroicons:cog-solid',
+        icon: 'heroicons:cog-20-solid',
       },
       {
         label: 'Logout',
@@ -140,6 +150,7 @@ const Template = (args) => ({
   components: {
     BaseLayoutSidebarConfigurable,
     PageDashboard,
+    BaseAutocompleteFetch,
   },
   setup() {
 
@@ -153,6 +164,19 @@ const Template = (args) => ({
   },
   template: `
     <BaseLayoutSidebarConfigurable v-bind="args">
+
+      <template #navbar>
+        <div class="hidden items-center grow || sm:flex">
+          <BaseAutocompleteFetch
+            url="https://faker.witify.io/api/todos"
+            labelKey="title"
+            valueKey="id"
+            class="w-full"
+            size="md"
+          />
+        </div>
+      </template>
+
       <div class="py-10 bg-slate-50">
         <PageDashboard />
       </div>

package/src/components/BaseLayoutSidebarConfigurable.vue

@@ -8,8 +8,8 @@
   >
     <template #menu="{ collapsed }">
       <div
-        class="py-6"
-        :class="[collapsed ? '' : 'px-3']"
+        class=""
+        :class="[collapsed ? 'py-3' : 'px-3 py-6']"
       >
         <div :class="[collapsed ? 'space-y-2' : 'space-y-8']">
           <template
@@ -27,6 +27,13 @@
               >
                 {{ section.label }}
               </h2>
+              
+              <div
+                v-else
+                class="px-4"
+              >
+                <hr class="my-2 border-slate-600">
+              </div>
 
               <div
                 :class="[
@@ -60,8 +67,8 @@
 
     <template #navbar>
       <div class="flex flex-1 justify-between px-4">
-        <div class="flex flex-1">
-          <!-- Good spot for search bar... -->
+        <div class="flex grow">
+          <slot name="navbar" />
         </div>
 
         <div class="ml-4 flex items-center md:ml-6">