sprintify-ui 0.4.11 → 0.5.3

package/dist/types/src/types/ActionItem.d.ts

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

package/dist/types/src/types/index.d.ts

@@ -52,32 +52,6 @@ export interface PaginatedCollection extends PaginationMetadata {
     data: Collection;
 }
 export type ActionColors = 'dark' | 'light' | 'danger' | 'success' | 'warning' | '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[];
-}
 export type Row = Record<string, any>;
 export interface BaseTableColumn {
     id: string;

package/package.json

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

package/src/components/BaseActionItem.vue

@@ -1,14 +1,14 @@
 <template>
   <RouterLink
-    v-if="to"
+    v-if="item.to"
     v-slot="{ isActive, href: slotHref, navigate }"
     custom
-    :to="to"
+    :to="item.to"
   >
     <a
       :active="isActive"
       :href="slotHref"
-      :class="props.class"
+      :class="classInternal"
       :aria-current="isActive ? 'page' : undefined"
       @click.prevent="onClick(navigate)"
     >
@@ -16,22 +16,27 @@
     </a>
   </RouterLink>
   <button
-    v-else-if="action"
+    v-else-if="item.action"
     type="button"
-    class="text-left"
-    :class="props.class"
-    @click="onClick(action)"
+    :class="classInternal"
+    @click="onClick(item.action)"
   >
     <slot :active="false" />
   </button>
   <a
-    v-else-if="href"
-    :href="href"
-    :class="props.class"
+    v-else-if="item.href"
+    :href="item.href"
+    :class="classInternal"
     @click="onClick()"
   >
     <slot :active="false" />
   </a>
+  <div
+    v-else
+    :class="classInternal"
+  >
+    <slot :active="false" />
+  </div>
 </template>
 
 <script lang="ts">
@@ -41,15 +46,21 @@ export default {
 </script>
 
 <script setup lang="ts">
-import { RouteLocationRaw } from 'vue-router';
+import { ActionItem } from '@/types/ActionItem';
+import { twMerge } from 'tailwind-merge';
 
 const props = defineProps<{
-  to?: RouteLocationRaw;
-  href?: string;
-  action?: (() => Promise<void>) | (() => void);
+  item: ActionItem,
   class?: string | string[] | null;
 }>();
 
+const classInternal = computed(() => {
+  return twMerge(
+    'block text-left',
+    props.class,
+  );
+});
+
 const closeMenu = inject('closeMenu', () => {
   return;
 }) as () => void;

package/src/components/BaseActionItemButton.vue

@@ -1,31 +1,29 @@
 <template>
   <BaseActionItem
-    :to="action.to"
-    :href="action.href"
-    :action="action.action"
+    :item="item"
     :class="classes"
     class="flex items-center justify-center"
   >
     <BaseIcon
-      v-if="action.icon"
-      :icon="action.icon"
+      v-if="item.icon"
+      :icon="item.icon"
       :class="iconClasses"
       class="mr-2"
     />
     <span
-      :class="[action.icon ? 'pr-1' : '']"
-    >{{ action.label }}</span>
+      :class="[item.icon ? 'pr-1' : '']"
+    >{{ item.label }}</span>
   </BaseActionItem>
 </template>
 
 <script lang="ts" setup>
-import { ActionItem } from '@/types';
 import { BaseIcon } from '..';
+import { ActionItem } from '@/types/ActionItem';
 import BaseActionItem from './BaseActionItem.vue';
 
 const props = withDefaults(
   defineProps<{
-    action: ActionItem;
+    item: ActionItem;
     size: 'sm' | 'md' | 'lg';
   }>(),
   {
@@ -36,19 +34,19 @@ const props = withDefaults(
 const classes = computed(() => {
   const classList = ['btn'];
 
-  if (props.action.color == 'primary') {
+  if (props.item.color == 'primary') {
     classList.push('btn-primary');
-  } else if (props.action.color == 'secondary') {
+  } else if (props.item.color == 'secondary') {
     classList.push('btn-secondary-outline');
-  } else if (props.action.color == 'danger') {
+  } else if (props.item.color == 'danger') {
     classList.push('btn-danger');
-  } else if (props.action.color == 'warning') {
+  } else if (props.item.color == 'warning') {
     classList.push('btn-warning');
-  } else if (props.action.color == 'success') {
+  } else if (props.item.color == 'success') {
     classList.push('btn-success');
-  } else if (props.action.color == 'light') {
+  } else if (props.item.color == 'light') {
     classList.push('');
-  } else if (props.action.color == 'dark') {
+  } else if (props.item.color == 'dark') {
     classList.push('btn-black');
   }
 

package/src/components/BaseDataIterator.stories.js

@@ -133,7 +133,7 @@ Demo.args = {
       icon: 'heroicons:table-cells',
       action: () => alert('export!'),
     },
-    { line: true },
+    { meta: { line: true } },
     {
       label: 'Delete all',
       icon: 'heroicons:trash',

package/src/components/BaseDataIterator.vue

@@ -228,10 +228,10 @@ import {
   Collection,
   DataIteratorSection,
   DataTableQuery,
-  MenuItemInterface,
   PaginatedCollection,
   ResourceCollection,
 } from '@/types';
+import { ActionItem } from '@/types/ActionItem';
 
 import BaseMenu from './BaseMenu.vue';
 import BasePagination from './BasePagination.vue';
@@ -285,7 +285,7 @@ const props = defineProps({
    */
   actions: {
     default: undefined,
-    type: Array as PropType<MenuItemInterface[]>,
+    type: Array as PropType<ActionItem[]>,
   },
 
   /**

package/src/components/BaseDataTable.stories.js

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

package/src/components/BaseDataTable.vue

@@ -242,7 +242,6 @@ import {
   CollectionItem,
   DataIteratorSection,
   DataTableQuery,
-  MenuItemInterface,
   PaginatedCollection,
   ResourceCollection,
   RowAction,
@@ -261,6 +260,7 @@ import BaseEmptyState from '../svg/BaseEmptyState.vue';
 import { RouteLocationRaw } from 'vue-router';
 import BaseMenu from './BaseMenu.vue';
 import BaseDataTableRowAction from './BaseDataTableRowAction.vue';
+import { ActionItem } from '@/types/ActionItem';
 
 const router = useRouter();
 
@@ -372,7 +372,7 @@ const props = defineProps({
    */
   checkableActions: {
     default: undefined,
-    type: Array as PropType<MenuItemInterface[]>,
+    type: Array as PropType<ActionItem[]>,
   },
 
   /**
@@ -416,7 +416,7 @@ const props = defineProps({
    */
   actions: {
     default: undefined,
-    type: Array as PropType<MenuItemInterface[]>,
+    type: Array as PropType<ActionItem[]>,
   },
 
   /**
@@ -654,7 +654,7 @@ const showRowActionMenu = computed<boolean>(() => {
   return rowActionsInternal.value.length > props.numberOfVisibleRowActions;
 });
 
-function rowActionMenuItems(row: CollectionItem): MenuItemInterface[] {
+function rowActionMenuItems(row: CollectionItem): ActionItem[] {
   return rowActionsInternal.value.map((action) => {
     return {
       label: action.label,

package/src/components/BaseHeader.vue

@@ -71,7 +71,7 @@
           <BaseActionItemButton
             v-for="(primaryAction, i) in primaryActions"
             :key="i"
-            :action="primaryAction"
+            :item="primaryAction"
             size="sm"
           />
           <BaseMenu
@@ -99,7 +99,8 @@
 </template>
 
 <script setup lang="ts">
-import { ActionItem, Breadcrumb } from '@/types';
+import { Breadcrumb } from '@/types';
+import { ActionItem } from '@/types/ActionItem';
 import { useResizeObserver } from '@vueuse/core';
 import { BaseBreadcrumbs, BaseIcon } from '..';
 import BaseActionItemButton from './BaseActionItemButton.vue';

package/src/components/BaseLayoutNotificationDropdown.vue

@@ -6,8 +6,12 @@
   >
     <template #button="{ open }">
       <div
-        class="relative flex items-center rounded-md p-1.5 hover:bg-slate-100"
-        :class="[open ? 'bg-slate-100' : '']"
+        class="relative flex items-center rounded-md p-1.5"
+        :class="[
+          dark ? 'hover:bg-slate-700' : 'hover:bg-slate-100',
+          open && !dark ? 'bg-slate-100' : '',
+          open && dark ? 'bg-slate-700' : '',
+        ]"
         @click="onOpen"
       >
         <BaseIcon
@@ -62,11 +66,7 @@
               class="hover block px-3 py-2 text-center text-sm font-medium text-primary-600 hover:bg-slate-100"
               :class="[active ? 'bg-slate-100' : '']"
             >
-              {{
-                notificationsConfig.footerLabel
-                  ? notificationsConfig.footerLabel
-                  : t('sui.see_all_notifications')
-              }}
+              {{ notificationsConfig.footerLabel ? notificationsConfig.footerLabel : t('sui.see_all_notifications') }}
             </div>
           </RouterLink>
         </MenuItem>

package/src/components/BaseLayoutSidebarConfigurable.stories.js

@@ -19,13 +19,32 @@ export default {
     },
     menu: [
       {
-        title: 'General',
+        label: 'Dashboard',
+        to: '/dashboard',
+        icon: 'heroicons:home-20-solid',
+        count: 1,
+        meta: {
+          showSubItems: 'always',
+        },
         actions: [
           {
-            label: 'Dashboard',
-            to: '/',
-            icon: 'heroicons:home-20-solid',
+            label: 'Sales',
+            to: '/dashboard/1',
+            count: 10,
+          },
+          {
+            label: 'Performance',
+            to: '/dashboard/2',
           },
+          {
+            label: 'Workload',
+            to: '/dashboard/3',
+          },
+        ],
+      },
+      {
+        label: 'General',
+        actions: [
           {
             label: 'Articles',
             to: '/articles',
@@ -35,6 +54,7 @@ export default {
               {
                 label: 'Articles',
                 to: '/articles/1',
+                count: 10,
               },
               {
                 label: 'Videos',
@@ -59,7 +79,7 @@ export default {
         ],
       },
       {
-        title: 'Settings',
+        label: 'Settings',
         actions: [
           {
             label: 'Account',

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,24 @@
       {{ systemAlert.message }}
     </BaseSystemAlert>
 
-    <BaseNavbar :dark="dark">
-      <template #navbar>
-        <slot name="navbar" />
+    <BaseNavbar
+      v-bind="navbar"
+      :dark="dark"
+      :size="size"
+      class="shadow"
+    >
+      <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 +40,33 @@
 </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 = withDefaults(defineProps<{
+  class?: string | string[];
+  dark?: boolean;
+  navbar?: Record<string, unknown>;
+  size?: 'xs' | 'sm' | 'md';
+}>(), {
+  class: '',
+  navbar: {} as any,
+  size: 'md',
 });
 
+const classInternal = computed(() => {
+  return twMerge(
+    'sticky top-0 z-20 w-full shadow-sm',
+    props.class,
+  )
+})
+
 /**
  * System Alerts
  */

package/src/components/BaseLayoutStackedConfigurable.stories.js

@@ -20,12 +20,37 @@ export default {
     menu: [
       {
         label: 'Products',
-        to: '/',
         count: 234,
+        actions: [
+          {
+            label: 'New product',
+            icon: 'heroicons:plus-20-solid',
+            description: 'Create a new product',
+            to: '/',
+          },
+          {
+            label: 'All products',
+            icon: 'heroicons:academic-cap-20-solid',
+            description: 'View all products',
+            to: '/',
+          },
+        ],
       },
       {
         label: 'Users',
         to: '/setup',
+        actions: [
+          {
+            label: 'New product',
+            icon: 'heroicons:plus-20-solid',
+            to: '/',
+          },
+          {
+            label: 'All products',
+            icon: 'heroicons:academic-cap-20-solid',
+            to: '/',
+          },
+        ],
       },
       {
         label: 'Account',
@@ -44,6 +69,9 @@ export default {
         to: '/account',
         icon: 'heroicons:cog',
       },
+      {
+        meta: { line: true }
+      },
       {
         label: 'Logout',
         action: logout,
@@ -107,3 +135,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',
+};