sprintify-ui 0.4.11 → 0.5.2

package/dist/types/src/components/BaseRichText.vue.d.ts

@@ -12,7 +12,7 @@ declare const _default: import("vue").DefineComponent<{
         default: string;
     };
     toolbar: {
-        type: PropType<string | unknown[] | Record<string, any> | undefined>;
+        type: PropType<string | Record<string, any> | unknown[] | undefined>;
         default(): string[];
     };
     placeholder: {
@@ -51,7 +51,7 @@ declare const _default: import("vue").DefineComponent<{
         default: string;
     };
     toolbar: {
-        type: PropType<string | unknown[] | Record<string, any> | undefined>;
+        type: PropType<string | Record<string, any> | unknown[] | undefined>;
         default(): string[];
     };
     placeholder: {
@@ -81,14 +81,14 @@ declare const _default: import("vue").DefineComponent<{
 }>> & {
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
 }, {
-    name: string;
     required: boolean;
+    name: string;
     theme: "" | "snow" | "bubble";
     modelValue: string | Delta | null | undefined;
     placeholder: string;
     disabled: boolean;
     hasError: boolean;
     enable: boolean;
-    toolbar: string | unknown[] | Record<string, any> | undefined;
+    toolbar: string | Record<string, any> | unknown[] | undefined;
 }, {}>;
 export default _default;

package/dist/types/src/components/BaseSelect.vue.d.ts

@@ -80,8 +80,8 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
 }>> & {
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
 }, {
-    name: string;
     required: boolean;
+    name: string;
     modelValue: SelectOption | undefined;
     placeholder: string;
     disabled: boolean;

package/dist/types/src/components/BaseShortcut.vue.d.ts

@@ -77,10 +77,10 @@ declare const _default: import("vue").DefineComponent<{
 }>>, {
     to: RouteLocationRaw | undefined;
     href: string | undefined;
-    action: () => Promise<void> | undefined;
     color: string;
     description: string;
     contrast: "high" | "low";
+    action: () => Promise<void> | undefined;
     linkText: string;
 }, {}>;
 export default _default;

package/dist/types/src/components/BaseStatistic.vue.d.ts

@@ -47,8 +47,8 @@ declare const _default: import("vue").DefineComponent<{
         type: PropType<string | null>;
     };
 }>>, {
-    caption: string | null;
     label: string | null;
+    caption: string | null;
     secondaryValue: string | null;
     trend: "up" | "down" | null;
 }, {}>;

package/dist/types/src/components/BaseSwitch.vue.d.ts

@@ -70,9 +70,9 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
 }>> & {
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
 }, {
+    required: boolean;
     name: string;
     color: "dark" | "light" | "danger" | "success" | "warning" | "primary" | "info";
-    required: boolean;
     modelValue: string | number | boolean | null | undefined;
     hasError: boolean;
     size: "base" | "xs" | "sm" | "lg" | "xl";

package/dist/types/src/components/BaseSystemAlert.vue.d.ts

@@ -40,8 +40,8 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
     onClose?: ((...args: any[]) => any) | undefined;
 }, {
     to: RouteLocationRaw | undefined;
-    action: () => void | Promise<void>;
     color: "danger" | "success" | "warning" | "info";
+    action: () => void | Promise<void>;
     closable: boolean;
 }, {}>, {
     default?(_: {}): any;

package/dist/types/src/components/BaseTableColumn.vue.d.ts

@@ -154,7 +154,7 @@ declare const _default: import("vue").DefineComponent<{
     };
 }>>, {
     label: string;
-    meta: unknown[] | Record<string, any>;
+    meta: Record<string, any> | unknown[];
     width: number;
     toggle: boolean;
     field: string;

package/dist/types/src/components/BaseTagAutocomplete.vue.d.ts

@@ -163,8 +163,8 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
     onOpen?: ((...args: any[]) => any) | undefined;
 }, {
     filter: (option: NormalizedOption) => boolean;
-    name: string;
     required: boolean;
+    name: string;
     inline: boolean;
     placeholder: string;
     disabled: boolean;

package/dist/types/src/components/BaseTextarea.vue.d.ts

@@ -92,8 +92,8 @@ declare const _default: import("vue").DefineComponent<{
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
 }, {
     type: string;
-    name: string;
     required: boolean;
+    name: string;
     modelValue: string | null | undefined;
     autocomplete: boolean;
     preventSubmit: boolean;

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

@@ -0,0 +1,14 @@
+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/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.2",
   "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/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,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',
 };