sprintify-ui 0.4.10 → 0.5.2

package/src/components/BaseLayoutSidebarConfigurable.vue

@@ -9,17 +9,20 @@
       <div class="px-3 py-6">
         <div class="space-y-8">
           <div
-            v-for="section in actionSections"
-            :key="section.title"
+            v-for="section in menu"
+            :key="section.label"
           >
-            <h2
-              v-if="section.title"
-              class="pl-3"
-              :class="sectionTitleClasses"
+            <div
+              v-if="section.label && !section.href && !section.to && !section.action"
+              :key="section.label"
             >
-              {{ section.title }}
-            </h2>
-            <div>
+              <h2
+                class="pl-3"
+                :class="sectionLabelClasses"
+              >
+                {{ section.label }}
+              </h2>
+
               <div :class="[size == 'md' ? 'space-y-1' : 'space-y-0.5']">
                 <BaseNavbarSideItem
                   v-for="item in section.actions"
@@ -30,6 +33,13 @@
                 />
               </div>
             </div>
+
+            <BaseNavbarSideItem
+              v-else
+              :item="section"
+              :dark="dark"
+              :size="size"
+            />
           </div>
         </div>
       </div>
@@ -92,7 +102,8 @@
 <script setup lang="ts">
 import { User } from '@/types/User';
 import { PropType } from 'vue';
-import { ActionItem, ActionSection, NotificationsConfig } from '../types';
+import { NotificationsConfig } from '../types';
+import { ActionItem } from '@/types/ActionItem';
 import BaseAvatar from './BaseAvatar.vue';
 import BaseLayoutNotificationDropdown from './BaseLayoutNotificationDropdown.vue';
 import BaseLayoutSidebar from './BaseLayoutSidebar.vue';
@@ -112,7 +123,7 @@ const props = defineProps({
   },
   menu: {
     required: true,
-    type: Array as PropType<ActionItem[] | ActionSection[]>,
+    type: Array as PropType<ActionItem[]>,
   },
   userMenu: {
     required: true,
@@ -136,22 +147,7 @@ const props = defineProps({
   },
 });
 
-const actionSections = computed((): ActionSection[] => {
-  const isActionSections = props.menu.length > 0 && 'actions' in props.menu[0];
-
-  if (isActionSections) {
-    return props.menu as ActionSection[];
-  }
-
-  return [
-    {
-      title: '',
-      actions: props.menu as ActionItem[],
-    },
-  ];
-});
-
-const sectionTitleClasses = computed((): string[] => {
+const sectionLabelClasses = computed((): string[] => {
   const classList = ['mb-3 font-semibold uppercase tracking-widest'];
 
   if (props.dark) {

package/src/components/BaseLayoutStacked.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="sticky top-0 z-20 w-full shadow-sm">
+  <div :class="classInternal">
     <BaseSystemAlert
       v-for="systemAlert in systemAlerts"
       :key="systemAlert.id"
@@ -12,13 +12,19 @@
       {{ systemAlert.message }}
     </BaseSystemAlert>
 
-    <BaseNavbar :dark="dark">
-      <template #navbar>
-        <slot name="navbar" />
+    <BaseNavbar v-bind="navbar">
+      <template #navbar="navbarProps">
+        <slot
+          name="navbar"
+          v-bind="navbarProps"
+        />
       </template>
 
-      <template #mobile>
-        <slot name="mobile" />
+      <template #mobile="mobileProps">
+        <slot
+          name="mobile"
+          v-bind="mobileProps"
+        />
       </template>
     </BaseNavbar>
   </div>
@@ -29,17 +35,27 @@
 </template>
 
 <script lang="ts" setup>
+import { twMerge } from 'tailwind-merge';
 import { useSystemAlertStore } from '../stores/systemAlerts';
 import BaseNavbar from './BaseNavbar.vue';
 import BaseSystemAlert from './BaseSystemAlert.vue';
 
-defineProps({
-  dark: {
-    default: false,
-    type: Boolean,
-  },
+defineOptions({
+  inheritAttrs: false
 });
 
+const props = defineProps<{
+  class?: string | string[];
+  navbar?: Record<string, unknown>;
+}>();
+
+const classInternal = computed(() => {
+  return twMerge(
+    'sticky top-0 z-20 w-full shadow-sm',
+    props.class,
+  )
+})
+
 /**
  * System Alerts
  */

package/src/components/BaseLayoutStackedConfigurable.stories.js

@@ -98,12 +98,16 @@ const Template = (args) => ({
 
 export const Light = Template.bind({});
 Light.args = {
-  dark: false,
+  navbar: {
+    dark: false,
+  },
   logoUrl: 'https://sprintify.witify.io/img/logo/logo-side.svg',
 };
 
 export const Dark = Template.bind({});
 Dark.args = {
-  dark: true,
+  navbar: {
+    dark: true,
+  },
   logoUrl: 'https://sprintify.witify.io/img/logo/logo-side-dark.svg',
 };

package/src/components/BaseLayoutStackedConfigurable.vue

@@ -1,10 +1,10 @@
 <template>
-  <BaseLayoutStacked :dark="dark">
-    <template #navbar>
-      <div class="flex h-16 justify-between">
+  <BaseLayoutStacked :navbar="navbar">
+    <template #navbar="{ dark }">
+      <div class="flex w-full justify-between">
         <!-- Left -->
 
-        <div class="flex justify-center">
+        <div class="flex grow">
           <!-- Logo -->
           <RouterLink
             to="/"
@@ -29,7 +29,7 @@
         </div>
 
         <!-- Right -->
-        <div class="flex items-center md:ml-6">
+        <div class="flex shrink-0 items-center md:ml-6">
           <!-- Notification dropdown -->
           <BaseLayoutNotificationDropdown
             v-if="notifications"
@@ -62,7 +62,7 @@
       </div>
     </template>
 
-    <template #mobile>
+    <template #mobile="{ dark }">
       <!-- Links mobile -->
       <div class="space-y-1 p-2 pt-0">
         <BaseNavbarSideItem
@@ -107,7 +107,8 @@
 <script lang="ts" setup>
 import { User } from '@/types/User';
 import { PropType } from 'vue';
-import { ActionItem, NotificationsConfig } from '../types';
+import { NotificationsConfig } from '../types';
+import { ActionItem } from '@/types/ActionItem';
 import BaseAvatar from './BaseAvatar.vue';
 import BaseLayoutStacked from './BaseLayoutStacked.vue';
 import BaseMenu from './BaseMenu.vue';
@@ -142,9 +143,9 @@ defineProps({
     default: undefined,
     type: Object as PropType<NotificationsConfig>,
   },
-  dark: {
-    default: false,
-    type: Boolean,
+  navbar: {
+    default: undefined,
+    type: Object as PropType<Record<string, unknown>>,
   },
 });
 

package/src/components/BaseMenu.vue

@@ -36,7 +36,7 @@
             :key="item.label + 'link'"
           >
             <div
-              v-if="item.line"
+              v-if="item.meta?.line"
               class="-mx-1 my-1 flex h-px bg-slate-200"
             />
 
@@ -118,14 +118,14 @@
 <script lang="ts" setup>
 import { PropType } from 'vue';
 import { Menu, MenuButton, MenuItem, MenuItems } from '@headlessui/vue';
-import { MenuItemInterface } from '@/types';
 import BaseMenuItem from './BaseMenuItem.vue';
 import { twMerge } from 'tailwind-merge';
+import { ActionItem } from '@/types/ActionItem';
 
 const props = defineProps({
   items: {
     default: undefined,
-    type: Array as PropType<MenuItemInterface[]>,
+    type: Array as PropType<ActionItem[]>,
   },
   position: {
     default: 'bottom-left',

package/src/components/BaseNavbar.stories.js

@@ -6,7 +6,7 @@ import BaseMenu from './BaseMenu.vue';
 import { Icon as BaseIcon } from '@iconify/vue';
 
 export default {
-  title: 'Layout/BaseNavbar',
+  title: 'Navigation/BaseNavbar',
   component: BaseNavbar,
   args: {},
   parameters: {
@@ -56,7 +56,7 @@ const Template = (args) => ({
         href: 'https://google.com',
       },
       {
-        line: true,
+        meta: { line: true },
       },
       {
         label: 'Logout',
@@ -71,12 +71,12 @@ const Template = (args) => ({
     <div class="sticky top-0 left-0 w-full shadow">
       <BaseNavbar v-bind="args">
         <template #navbar>
-          <div class="flex h-16 justify-between">
+          <div class="flex w-full justify-between">
             <!-- Left -->
 
-            <div class="flex justify-center">
+            <div class="flex justify-start grow">
               <!-- Logo -->
-              <RouterLink to="/" class="flex flex-shrink-0 grow items-center p-2 pl-0">
+              <RouterLink to="/" class="flex flex-shrink-0 items-center">
                 <img
                   class="block h-8 w-auto"
                   src="https://sprintify.witify.io/img/logo/logo-side.svg"
@@ -90,6 +90,7 @@ const Template = (args) => ({
                   v-for="item in menu"
                   :key="item.label"
                   :item="item"
+                  class="flex"
                   item-class="flex"
                 />
               </div>
@@ -97,13 +98,13 @@ const Template = (args) => ({
 
             <!-- Right -->
 
-            <div class="hidden md:ml-6 md:flex md:items-center">
+            <div class="hidden md:ml-6 md:flex md:items-center shrink-0">
               <!-- Profile dropdown -->
               <BaseMenu tw-menu="w-52" :items="userMenu">
                 <template #button="{ open }">
                   <div
                     class="flex rounded-full"
-                    :class="[open ? 'bg-slate-700 ring-2 ring-blue-500 ring-offset-2 ring-offset-slate-700' : '']"
+                    :class="[open ? 'bg-slate-700 ring-4 ring-slate-200' : '']"
                   >
                     <BaseAvatar :user="user" />
                   </div>

package/src/components/BaseNavbar.vue

@@ -1,17 +1,25 @@
 <template>
-  <nav
-    class="border-t-[3px] border-primary-500"
-    :class="[dark ? 'bg-slate-900' : 'bg-white']"
-  >
+  <nav :class="classInternal">
     <BaseContainer :size="size">
-      <div class="flex h-16 justify-between">
+      <div
+        :style="{
+          height: `${height}px`,
+        }"
+        class="flex justify-between"
+      >
         <!-- Navbar (desktop and mobile) -->
-        <div class="grow">
-          <slot name="navbar" />
+        <div class="grow flex">
+          <slot
+            name="navbar"
+            :dark="dark"
+          />
         </div>
 
         <!-- Mobile Burger menu button -->
-        <div class="-mr-2 flex items-center md:hidden">
+        <div
+          v-if="mobile"
+          class="-mr-2 flex items-center"
+        >
           <button
             type="button"
             class="inline-flex items-center justify-center rounded-md p-2 focus:outline-none focus:ring-2 focus:ring-offset-2"
@@ -42,12 +50,13 @@
 
     <!-- Mobile -->
     <div
-      v-if="showMobileMenu"
-      class="absolute w-full md:hidden"
-      :class="[dark ? 'bg-slate-900' : 'bg-white']"
+      v-if="mobile && showMobileMenu"
+      class="absolute w-full"
+      :class="backgroundClass"
     >
       <slot
         name="mobile"
+        :dark="dark"
         :toggle-menu="toggleMenu"
         :close-menu="closeMenu"
         :open-menu="openMenu"
@@ -59,8 +68,15 @@
 <script setup lang="ts">
 import { Icon as BaseIcon } from '@iconify/vue';
 import BaseContainer from './BaseContainer.vue';
+import { twMerge } from 'tailwind-merge';
+import { PropType } from 'vue';
+import { useWindowSize } from '@vueuse/core';
 
-defineProps({
+defineOptions({
+  inheritAttrs: false,
+})
+
+const props = defineProps({
   size: {
     default: '7xl',
     type: String,
@@ -69,8 +85,38 @@ defineProps({
     default: false,
     type: Boolean,
   },
+  height: {
+    default: 64,
+    type: Number,
+  },
+  breakpoint: {
+    default: 768,
+    type: Number,
+  },
+  class: {
+    default: '',
+    type: [String, Array] as PropType<string | string[]>,
+  }
 });
 
+const window = useWindowSize();
+
+const mobile = computed(() => {
+  return window.width.value < props.breakpoint;
+});
+
+const backgroundClass = computed(() => {
+  return props.dark ? 'bg-slate-900' : 'bg-white';
+});
+
+const classInternal = computed(() => {
+  return twMerge(
+    'w-full border-t-[3px] border-primary-500',
+    backgroundClass.value,
+    props.class,
+  )
+})
+
 const showMobileMenu = ref(false);
 
 function toggleMenu() {

package/src/components/BaseNavbarItem.vue

@@ -1,10 +1,7 @@
 <template>
   <div class="flex">
     <BaseActionItem
-      :to="item.to"
-      :href="item.href"
-      :action="item.action"
-      :dark="dark"
+      :item="item"
       class="flex w-full"
       @click="onClick"
     >
@@ -23,7 +20,7 @@
 
 <script setup lang="ts">
 import { PropType } from 'vue';
-import { ActionItem } from '@/types';
+import { ActionItem } from '@/types/ActionItem';
 import BaseActionItem from './BaseActionItem.vue';
 import BaseNavbarItemContent from './BaseNavbarItemContent.vue';
 

package/src/components/BaseNavbarSideItem.vue

@@ -1,10 +1,7 @@
 <template>
   <div>
     <BaseActionItem
-      :to="item.to"
-      :href="item.href"
-      :action="item.action"
-      :dark="dark"
+      :item="item"
       class="flex w-full"
       @click="onClick"
     >
@@ -29,12 +26,23 @@
         :key="subItem.label"
       >
         <BaseActionItem
-          :to="subItem.to"
-          :href="subItem.href"
-          :action="subItem.action"
+          :item="subItem"
           :class="subItemClasses"
         >
-          {{ subItem.label }}
+          <template #default="{ active }">
+            <div
+              class="grow"
+              :class="{ 'font-medium': active, 'text-white': active && dark }"
+            >
+              {{ subItem.label }}
+            </div>
+            <BaseCounter
+              v-if="subItem.count"
+              :count="subItem.count"
+              :size="size"
+              :color="dark ? 'light' : 'light'"
+            />
+          </template>
         </BaseActionItem>
       </div>
     </div>
@@ -43,9 +51,10 @@
 
 <script setup lang="ts">
 import { PropType } from 'vue';
-import { ActionItem } from '@/types';
+import { ActionItem } from '@/types/ActionItem';
 import BaseActionItem from './BaseActionItem.vue';
 import BaseNavbarSideItemContent from './BaseNavbarSideItemContent.vue';
+import BaseCounter from './BaseCounter.vue';
 
 const props = defineProps({
   item: {
@@ -56,10 +65,6 @@ const props = defineProps({
     default: false,
     type: Boolean,
   },
-  actionsVisible: {
-    default: 'toggle',
-    type: String as PropType<'toggle' | 'always'>,
-  },
   size: {
     default: 'md',
     type: String as PropType<'xs' | 'sm' | 'md'>,
@@ -83,7 +88,7 @@ const routeActive = computed((): boolean => {
 });
 
 const showSubActions = computed((): boolean => {
-  if (props.actionsVisible == 'always') {
+  if (props.item.meta?.showSubItems == 'always') {
     return true;
   }
   if (!props.item.to) {
@@ -102,11 +107,11 @@ const subItemClasses = computed((): string[] => {
   }
 
   if (props.size == 'xs') {
-    classList.push('pl-[33.5px] text-[13px] mb-1');
+    classList.push('pl-[33.5px] text-[13px] mb-1 pr-2.5');
   } else if (props.size == 'sm') {
-    classList.push('pl-[36px] text-sm mb-1.5');
+    classList.push('pl-[36px] text-sm mb-1.5 pr-3');
   } else {
-    classList.push('pl-[40px] text-base mb-1');
+    classList.push('pl-[40px] text-base mb-1 pr-3');
   }
 
   return classList;

package/src/components/BaseRadioGroup.stories.js

@@ -66,7 +66,6 @@ export const SlotOption = (args) => ({
     v-bind="args"
     v-model="value"
     :options="options"
-    label-class="flex space-x-2 items-start"
   >
     <template #option="{ option }">
       <div>

package/src/components/BaseRadioGroup.vue

@@ -103,7 +103,6 @@ const { nameInternal, requiredInternal, emitUpdate } = useField({
   hasError: computed(() => props.hasError),
   emit: emit,
   errorType: 'alert',
-  labelClass: 'mb-3 font-medium',
 });
 
 function isChecked(option: NormalizedOption): boolean {

package/src/components/BaseShortcut.vue

@@ -1,9 +1,11 @@
 <template>
   <BaseCard class="flex duration-200 hover:bg-slate-50">
     <BaseActionItem
-      :to="to"
-      :href="href"
-      :action="action"
+      :item="{
+        to,
+        href,
+        action,
+      }"
       class="block w-full"
     >
       <section class="whitespace-pre-line p-4">

package/src/components/BaseSideNavigation.stories.js

@@ -6,7 +6,7 @@ import BaseCardRow from './BaseCardRow.vue';
 import BaseCounter from './BaseCounter.vue';
 
 export default {
-  title: 'Layout/BaseSideNavigation',
+  title: 'Navigation/BaseSideNavigation',
   component: BaseSideNavigation,
   args: {},
 };

package/src/components/BaseTabs.stories.js

@@ -6,7 +6,7 @@ import BaseCardRow from './BaseCardRow.vue';
 import BaseCounter from './BaseCounter.vue';
 
 export default {
-  title: 'Layout/BaseTabs',
+  title: 'Navigation/BaseTabs',
   component: BaseTabs,
   args: {},
 };

package/src/stories/List.stories.js

@@ -55,7 +55,7 @@ export default {
                 icon: 'heroicons:arrow-down-tray',
                 action: () => alert('export!'),
             },
-            { line: true },
+            { meta: { line: true } },
             {
                 label: 'Delete all',
                 icon: 'heroicons:trash',

package/src/types/ActionItem.ts

@@ -0,0 +1,15 @@
+import { RouteLocationRaw } from "vue-router";
+import { ActionColors } from ".";
+
+export interface ActionItem {
+    label?: string;
+    href?: string;
+    to?: RouteLocationRaw;
+    action?: () => Promise<void> | void;
+    icon?: string;
+    count?: number;
+    color?: ActionColors;
+    disabled?: boolean;
+    meta?: Record<string, any>;
+    actions?: ActionItem[];
+}

package/src/types/index.ts

@@ -75,35 +75,6 @@ export type ActionColors =
   | 'primary'
   | 'secondary';
 
-export interface MenuItemInterface {
-  label?: string;
-  href?: string;
-  to?: RouteLocationRaw;
-  action?: () => Promise<void> | void;
-  icon?: string;
-  count?: number;
-  color?: ActionColors;
-  line?: boolean;
-}
-
-export interface ActionItem {
-  label: string;
-  href?: string;
-  to?: RouteLocationRaw;
-  action?: () => Promise<void> | void;
-  icon?: string;
-  count?: number;
-  color?: ActionColors;
-  disabled?: boolean;
-  meta?: Record<string, any>;
-  actions?: ActionItem[];
-}
-
-export interface ActionSection {
-  title: string;
-  actions: ActionItem[];
-}
-
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 export type Row = Record<string, any>;