sprintify-ui 0.5.4 → 0.5.7

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

@@ -1,4 +1,4 @@
-import { ActionItem } from '@/types/ActionItem';
+import { ActionItem } from '@/types';
 declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
     item: {
         type: import("vue").PropType<ActionItem>;

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

@@ -1,4 +1,4 @@
-import { ActionItem } from '@/types/ActionItem';
+import { ActionItem } from '@/types';
 declare const _default: import("vue").DefineComponent<{
     item: {
         type: import("vue").PropType<ActionItem>;

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

@@ -1,6 +1,6 @@
 import { PropType } from 'vue';
 import { Collection, DataIteratorSection, DataTableQuery } from '@/types';
-import { ActionItem } from '@/types/ActionItem';
+import { ActionItem } from '@/types';
 type Direction = 'asc' | 'desc';
 declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
     /**

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

@@ -1,7 +1,7 @@
 import { PropType } from 'vue';
 import { CollectionItem, DataIteratorSection, DataTableQuery, RowAction } from '@/types';
 import { RouteLocationRaw } from 'vue-router';
-import { ActionItem } from '@/types/ActionItem';
+import { ActionItem } from '@/types';
 declare function fetch(): void;
 declare function fetchWithoutLoading(): void;
 declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{

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

@@ -1,5 +1,4 @@
-import { Breadcrumb } from '@/types';
-import { ActionItem } from '@/types/ActionItem';
+import { Breadcrumb, ActionItem } from '@/types';
 declare const _default: import("vue").DefineComponent<{
     title: {
         type: import("vue").PropType<string>;

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

@@ -1,7 +1,7 @@
 import { User } from '@/types/User';
+import { ActionItem } from '@/types';
 import { PropType } from 'vue';
 import { NotificationsConfig } from '../types';
-import { ActionItem } from '@/types/ActionItem';
 declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
     appName: {
         default: string;

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

@@ -36,6 +36,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
     navbar: Record<string, unknown>;
 }, {}>, {
     navbar?(_: {
+        mobile: boolean;
         dark: boolean;
         height: number;
     }): any;

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

@@ -1,7 +1,6 @@
 import { User } from '@/types/User';
+import { ActionItem, NotificationsConfig } from '@/types';
 import { PropType } from 'vue';
-import { NotificationsConfig } from '../types';
-import { ActionItem } from '@/types/ActionItem';
 declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
     appName: {
         default: string;

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

@@ -1,5 +1,5 @@
 import { PropType } from 'vue';
-import { ActionItem } from '@/types/ActionItem';
+import { ActionItem } from '@/types';
 declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
     items: {
         default: undefined;

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

@@ -52,6 +52,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
     breakpoint: number;
 }, {}>, {
     navbar?(_: {
+        mobile: boolean;
         dark: boolean;
         height: number;
     }): any;

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

@@ -1,5 +1,5 @@
 import { PropType } from 'vue';
-import { ActionItem } from '@/types/ActionItem';
+import { ActionItem } from '@/types';
 declare const _default: import("vue").DefineComponent<{
     item: {
         required: true;

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

@@ -1,5 +1,5 @@
 import { PropType } from 'vue';
-import { ActionItem } from '@/types/ActionItem';
+import { ActionItem } from '@/types';
 declare const _default: import("vue").DefineComponent<{
     item: {
         required: true;

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

@@ -52,6 +52,19 @@ export interface PaginatedCollection extends PaginationMetadata {
     data: Collection;
 }
 export type ActionColors = 'dark' | 'light' | 'danger' | 'success' | 'warning' | 'primary' | 'secondary';
+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[];
+}
 export type Row = Record<string, any>;
 export interface BaseTableColumn {
     id: string;
@@ -191,4 +204,3 @@ export interface BaseCropperConfig {
     presetOptions?: Record<string, any>;
     saveOptions?: ResultOptions;
 }
-export { ActionItem } from './ActionItem';

package/package.json

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

package/src/components/BaseActionItem.vue

@@ -46,7 +46,7 @@ export default {
 </script>
 
 <script setup lang="ts">
-import { ActionItem } from '@/types/ActionItem';
+import { ActionItem } from '@/types';
 import { twMerge } from 'tailwind-merge';
 
 const props = defineProps<{

package/src/components/BaseActionItemButton.vue

@@ -18,7 +18,7 @@
 
 <script lang="ts" setup>
 import { BaseIcon } from '..';
-import { ActionItem } from '@/types/ActionItem';
+import { ActionItem } from '@/types';
 import BaseActionItem from './BaseActionItem.vue';
 
 const props = withDefaults(

package/src/components/BaseDataIterator.vue

@@ -231,7 +231,7 @@ import {
   PaginatedCollection,
   ResourceCollection,
 } from '@/types';
-import { ActionItem } from '@/types/ActionItem';
+import { ActionItem } from '@/types';
 
 import BaseMenu from './BaseMenu.vue';
 import BasePagination from './BasePagination.vue';

package/src/components/BaseDataTable.vue

@@ -260,7 +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';
+import { ActionItem } from '@/types';
 
 const router = useRouter();
 

package/src/components/BaseHeader.vue

@@ -99,8 +99,7 @@
 </template>
 
 <script setup lang="ts">
-import { Breadcrumb } from '@/types';
-import { ActionItem } from '@/types/ActionItem';
+import { Breadcrumb, ActionItem } from '@/types';
 import { useResizeObserver } from '@vueuse/core';
 import { BaseBreadcrumbs, BaseIcon } from '..';
 import BaseActionItemButton from './BaseActionItemButton.vue';

package/src/components/BaseLayoutSidebarConfigurable.vue

@@ -101,9 +101,9 @@
 
 <script setup lang="ts">
 import { User } from '@/types/User';
+import { ActionItem } from '@/types';
 import { PropType } from 'vue';
 import { NotificationsConfig } from '../types';
-import { ActionItem } from '@/types/ActionItem';
 import BaseAvatar from './BaseAvatar.vue';
 import BaseLayoutNotificationDropdown from './BaseLayoutNotificationDropdown.vue';
 import BaseLayoutSidebar from './BaseLayoutSidebar.vue';

package/src/components/BaseLayoutStacked.vue

@@ -16,7 +16,6 @@
       v-bind="navbar"
       :dark="dark"
       :size="size"
-      class="shadow"
     >
       <template #navbar="navbarProps">
         <slot

package/src/components/BaseLayoutStackedConfigurable.stories.js

@@ -8,6 +8,10 @@ export default {
     layout: 'fullscreen',
   },
   args: {
+    navbar: {
+      dark: true,
+      class: 'shadow-sm border-t-[3px] border-primary-500'
+    },
     appName: 'Sprintify',
     user: {
       email: 'jane@witify.io',

package/src/components/BaseLayoutStackedConfigurable.vue

@@ -2,8 +2,9 @@
   <BaseLayoutStacked
     :size="size"
     :dark="dark"
+    :navbar="navbar"
   >
-    <template #navbar>
+    <template #navbar="{ mobile }">
       <div class="flex w-full justify-between">
         <!-- Left -->
 
@@ -21,7 +22,15 @@
           </RouterLink>
 
           <!-- Links (desktop) -->
-          <div class="ml-10 hidden space-x-2 md:flex">
+          <div
+            v-if="!mobile"
+            class="flex"
+            :class="{
+              'ml-4': size == 'xs',
+              'ml-6 space-x-0.5': size == 'sm',
+              'ml-8 space-x-1': size == 'md',
+            }"
+          >
             <BaseNavbarItem
               v-for="item in menu"
               :key="item.label"
@@ -33,11 +42,14 @@
         </div>
 
         <!-- Right -->
-        <div class="flex shrink-0 items-center md:ml-6">
+        <div
+          class="flex shrink-0 items-center"
+          :class="[mobile ? '' : 'ml-6']"
+        >
           <!-- Notification dropdown -->
           <BaseLayoutNotificationDropdown
             v-if="notifications"
-            class="mr-4 md:mr-5"
+            :class="[mobile ? 'mr-4' : 'mr-5']"
             :dark="dark"
             :size="size"
             :notifications-config="notifications"
@@ -47,9 +59,9 @@
 
           <!-- Profile dropdown -->
           <BaseMenu
+            v-if="!mobile"
             tw-menu="w-52"
-            :size="size == 'xs' ? 'xs' : 'sm'"
-            class="hidden md:block"
+            :size="size"
             :items="userMenu"
           >
             <template #button="{ open }">
@@ -71,11 +83,12 @@
 
     <template #mobile>
       <!-- Links mobile -->
-      <div class="space-y-1 p-2 pt-0">
+      <div class="space-y-0.5 p-2 pt-0">
         <BaseNavbarSideItem
           v-for="item in menu"
           :key="item.label"
           :item="item"
+          size="sm"
           :dark="dark"
         />
       </div>
@@ -99,6 +112,7 @@
             v-for="item in userMenu"
             :key="item.label"
             :item="item"
+            size="sm"
             :dark="dark"
           />
         </div>
@@ -113,9 +127,8 @@
 
 <script lang="ts" setup>
 import { User } from '@/types/User';
+import { ActionItem, NotificationsConfig } from '@/types';
 import { PropType } from 'vue';
-import { NotificationsConfig } from '../types';
-import { ActionItem } from '@/types/ActionItem';
 import BaseAvatar from './BaseAvatar.vue';
 import BaseLayoutStacked from './BaseLayoutStacked.vue';
 import BaseMenu from './BaseMenu.vue';

package/src/components/BaseMenu.vue

@@ -120,7 +120,7 @@ import { PropType } from 'vue';
 import { Menu, MenuButton, MenuItem, MenuItems } from '@headlessui/vue';
 import BaseMenuItem from './BaseMenuItem.vue';
 import { twMerge } from 'tailwind-merge';
-import { ActionItem } from '@/types/ActionItem';
+import { ActionItem } from '@/types';
 
 const props = defineProps({
   items: {

package/src/components/BaseNavbar.vue

@@ -11,6 +11,7 @@
         <div class="grow flex">
           <slot
             name="navbar"
+            :mobile="mobile"
             :dark="dark"
             :height="heightInner"
           />
@@ -52,7 +53,7 @@
     <!-- Mobile -->
     <div
       v-if="mobile && showMobileMenu"
-      class="absolute w-full"
+      class="w-full"
       :class="backgroundClass"
     >
       <slot
@@ -72,6 +73,7 @@ import BaseContainer from './BaseContainer.vue';
 import { twMerge } from 'tailwind-merge';
 import { PropType } from 'vue';
 import { useWindowSize } from '@vueuse/core';
+import { disableScroll, enableScroll } from '..';
 
 defineOptions({
   inheritAttrs: false,
@@ -106,6 +108,15 @@ const mobile = computed(() => {
   return window.width.value < props.breakpoint;
 });
 
+watch(
+  () => window.width.value,
+  () => {
+    if (!mobile.value) {
+      closeMenu();
+    }
+  },
+);
+
 const heightInner = computed(() => {
   if (props.height) {
     return props.height;
@@ -123,28 +134,40 @@ const heightInner = computed(() => {
 });
 
 const backgroundClass = computed(() => {
-  return props.dark ? 'bg-slate-900' : 'bg-white';
+  return props.dark ? 'bg-slate-800' : 'bg-white';
 });
 
 const classInternal = computed(() => {
-  return twMerge(
-    'w-full',
+
+  const classes = [
+    'fixed flex flex-col top-0 left-0 w-full max-h-screen',
     backgroundClass.value,
-    props.class,
-  )
+  ];
+
+  if (mobile.value) {
+    classes.push('overflow-y-auto');
+  }
+
+  return twMerge(classes, props.class)
 })
 
 const showMobileMenu = ref(false);
 
 function toggleMenu() {
-  showMobileMenu.value = !showMobileMenu.value;
+  if (showMobileMenu.value) {
+    closeMenu();
+  } else {
+    openMenu();
+  }
 }
 
 function openMenu() {
+  disableScroll();
   showMobileMenu.value = true;
 }
 
 function closeMenu() {
+  enableScroll();
   showMobileMenu.value = false;
 }
 

package/src/components/BaseNavbarItem.vue

@@ -47,7 +47,7 @@
 
 <script setup lang="ts">
 import { PropType, Ref } from 'vue';
-import { ActionItem } from '@/types/ActionItem';
+import { ActionItem } from '@/types';
 import BaseActionItem from './BaseActionItem.vue';
 import BaseNavbarItemContent from './BaseNavbarItemContent.vue';
 import BaseMenuItem from './BaseMenuItem.vue';

package/src/components/BaseNavbarItemContent.vue

@@ -14,6 +14,7 @@
         class="relative -top-px ml-[5px]"
       >
         <BaseCounter
+          :size="size"
           :count="count"
           :max-digit="2"
           color="danger"
@@ -64,11 +65,11 @@ const classes = computed(() => {
     if (props.dark) {
       classList.push('text-white');
     } else {
-      classList.push('text-slate-900');
+      classList.push('text-primary-600');
     }
   } else {
     if (props.dark) {
-      classList.push('hover:text-white text-slate-200');
+      classList.push('hover:text-white text-slate-300');
     } else {
       classList.push(
         'hover:text-slate-900 text-slate-800'
@@ -81,9 +82,17 @@ const classes = computed(() => {
 
 const classesInner = computed(() => {
   const classList = [
-    'px-3 py-1 grow rounded-md duration-100 flex items-center font-medium',
+    'py-1 grow rounded-md duration-100 flex items-center font-medium',
   ];
 
+  if (props.size == 'xs') {
+    classList.push('px-2 h-7')
+  } else if (props.size == 'sm') {
+    classList.push('px-2 h-8')
+  } else {
+    classList.push('px-3 h-10')
+  }
+
   if (props.dark) {
     classList.push('hover:bg-slate-700');
   } else {

package/src/components/BaseNavbarSideItem.vue

@@ -1,6 +1,7 @@
 <template>
   <div>
     <BaseActionItem
+      v-if="!item.meta?.line"
       :item="item"
       class="flex w-full"
       @click="onClick"
@@ -19,7 +20,7 @@
 
     <div
       v-if="showSubActions && item.actions && item.actions.length"
-      class="mt-2 mb-3"
+      class="mt-1 sm:mt-2 mb-3"
     >
       <div
         v-for="subItem in item.actions"
@@ -51,7 +52,7 @@
 
 <script setup lang="ts">
 import { PropType } from 'vue';
-import { ActionItem } from '@/types/ActionItem';
+import { ActionItem } from '@/types';
 import BaseActionItem from './BaseActionItem.vue';
 import BaseNavbarSideItemContent from './BaseNavbarSideItemContent.vue';
 import BaseCounter from './BaseCounter.vue';
@@ -107,11 +108,11 @@ const subItemClasses = computed((): string[] => {
   }
 
   if (props.size == 'xs') {
-    classList.push('pl-[33.5px] text-[13px] mb-1 pr-2.5');
+    classList.push('pl-3 sm:pl-[33.5px] text-[13px] mb-1 pr-2.5');
   } else if (props.size == 'sm') {
-    classList.push('pl-[36px] text-sm mb-1.5 pr-3');
+    classList.push('pl-3 sm:pl-[36px] text-sm mb-1.5 pr-3');
   } else {
-    classList.push('pl-[40px] text-base mb-1 pr-3');
+    classList.push('pl-3 sm:pl-[40px] text-base mb-1 pr-3');
   }
 
   return classList;

package/src/types/index.ts

@@ -75,6 +75,20 @@ export type ActionColors =
   | 'primary'
   | 'secondary';
 
+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[];
+}
+
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 export type Row = Record<string, any>;
 
@@ -236,6 +250,4 @@ export interface BaseCropperConfig {
   preset?: CropperPreset;
   presetOptions?: Record<string, any>;
   saveOptions?: ResultOptions;
-}
-
-export { ActionItem } from './ActionItem';
+}

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

@@ -1,15 +0,0 @@
-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/src/types/ActionItem.ts

@@ -1,16 +0,0 @@
-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[];
-}