sprintify-ui 0.8.9 → 0.8.11

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

@@ -49,7 +49,9 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
     logoUrl: string;
     logoTo: RouteLocationRaw;
 }, {}>, {
-    menu?(_: {}): any;
+    menu?(_: {
+        collapsed: boolean;
+    }): any;
     navbar?(_: {}): any;
     default?(_: {}): any;
 }>;

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

@@ -13,6 +13,10 @@ declare const _default: import("vue").DefineComponent<{
         default: string;
         type: PropType<"xs" | "sm" | "md">;
     };
+    collapsed: {
+        default: boolean;
+        type: BooleanConstructor;
+    };
 }, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     click: (...args: any[]) => void;
 }, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
@@ -28,10 +32,15 @@ declare const _default: import("vue").DefineComponent<{
         default: string;
         type: PropType<"xs" | "sm" | "md">;
     };
+    collapsed: {
+        default: boolean;
+        type: BooleanConstructor;
+    };
 }>> & {
     onClick?: ((...args: any[]) => any) | undefined;
 }, {
     size: "xs" | "sm" | "md";
     dark: boolean;
+    collapsed: boolean;
 }, {}>;
 export default _default;

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

@@ -24,6 +24,10 @@ declare const _default: import("vue").DefineComponent<{
         default: string;
         type: PropType<"xs" | "sm" | "md">;
     };
+    collapsed: {
+        default: boolean;
+        type: BooleanConstructor;
+    };
 }, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     label: {
         default: undefined;
@@ -49,6 +53,10 @@ declare const _default: import("vue").DefineComponent<{
         default: string;
         type: PropType<"xs" | "sm" | "md">;
     };
+    collapsed: {
+        default: boolean;
+        type: BooleanConstructor;
+    };
 }>>, {
     size: "xs" | "sm" | "md";
     icon: string;
@@ -56,5 +64,6 @@ declare const _default: import("vue").DefineComponent<{
     dark: boolean;
     label: string;
     active: boolean;
+    collapsed: boolean;
 }, {}>;
 export default _default;

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

@@ -1,23 +1,34 @@
+import { UseFloatingOptions } from '@floating-ui/vue';
 declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToOption<{
     visible?: boolean | undefined;
     text?: string | null | undefined;
     class?: string | string[] | null | undefined;
+    floatingOptions?: UseFloatingOptions | undefined;
+    interactive?: boolean | undefined;
 }>, {
     visible: boolean;
     text: null;
     class: null;
+    floatingOptions: undefined;
+    interactive: boolean;
 }>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToOption<{
     visible?: boolean | undefined;
     text?: string | null | undefined;
     class?: string | string[] | null | undefined;
+    floatingOptions?: UseFloatingOptions | undefined;
+    interactive?: boolean | undefined;
 }>, {
     visible: boolean;
     text: null;
     class: null;
+    floatingOptions: undefined;
+    interactive: boolean;
 }>>>, {
     class: string | string[] | null;
     text: string | null;
     visible: boolean;
+    floatingOptions: UseFloatingOptions;
+    interactive: boolean;
 }, {}>, {
     default?(_: {}): any;
     tooltip?(_: {}): any;

package/dist/types/composables/tooltip.d.ts

@@ -3,5 +3,5 @@ type ReturnType = UseFloatingReturn & {
     showTooltip: Ref<boolean>;
 };
 import { Ref } from "vue";
-declare function useTooltip(reference: Readonly<Ref<MaybeElement<any>>>, floating: Readonly<Ref<MaybeElement<HTMLElement>>>, options?: UseFloatingOptions | undefined): ReturnType;
+declare function useTooltip(reference: Readonly<Ref<MaybeElement<any>>>, floating: Readonly<Ref<MaybeElement<HTMLElement>>>, interactive?: boolean, options?: UseFloatingOptions | undefined): ReturnType;
 export { useTooltip };

package/package.json

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

package/src/components/BaseLayoutSidebar.vue

@@ -70,6 +70,7 @@
                   :alt="appName"
                 >
               </RouterLink>
+
               <div
                 data-scroll-lock-scrollable
                 class="flex-1 h-0 mt-5 overflow-y-auto"
@@ -90,7 +91,10 @@
       </Dialog>
     </TransitionRoot>
 
-    <div class="flex flex-col min-h-full || xl:pl-64 || xl:print:pl-0">
+    <div
+      class="flex flex-col min-h-full || xl:print:pl-0"
+      :class="[collapsed ? 'xl:pl-16' : 'xl:pl-64']"  
+    >
       <div class="sticky top-0 left-0 z-10 shadow shrink-0 || print:hidden">
         <BaseSystemAlert
           v-for="systemAlert in systemAlerts"
@@ -135,29 +139,56 @@
     </div>
 
     <!-- Static sidebar for desktop -->
-    <div class="z-10 hidden || xl:fixed xl:inset-y-0 xl:flex xl:w-64 xl:flex-col || xl:print:hidden">
+    <div
+      class="z-10 hidden || xl:fixed xl:inset-y-0 xl:flex xl:flex-col || xl:print:hidden"
+      :class="[collapsed ? 'xl:w-16' : 'xl:w-64']"  
+    >
       <!-- Sidebar component, swap this element with another sidebar if you like -->
       <div
         data-scroll-lock-scrollable
         class="flex flex-col flex-1 min-h-0 overflow-y-auto"
         :class="[dark ? 'bg-slate-800' : 'bg-slate-50 ring-1 ring-black ring-opacity-10']"
       >
-        <RouterLink
-          :to="logoTo"
-          class="flex items-center flex-shrink-0 px-4"
-          :style="{ height: navbarHeight + 'px' }"
+        <div
+          class="flex"
           :class="[dark ? 'bg-slate-900' : 'border-b']"
-          @click="closeMenu"
+          :style="{ height: navbarHeight + 'px' }"
         >
-          <img
-            class="block w-auto h-8"
-            :src="logoUrl"
-            :alt="appName"
+          <RouterLink
+            v-if="!collapsed"
+            :to="logoTo"
+            class="flex items-center flex-shrink-0 grow px-4"
+            
+            @click="closeMenu"
           >
-        </RouterLink>
+            <img
+              class="block w-auto h-8"
+              :src="logoUrl"
+              :alt="appName"
+            >
+          </RouterLink>
+          <button
+            type="button"
+            class="px-3 flex justify-center items-center"
+            :class="[
+              dark ? 'text-slate-400 hover:text-slate-50' : 'text-slate-500 hover:text-slate-900',
+              collapsed ? 'grow' : 'shrink-0'
+            ]"
+            @click="toggleCollapse"
+          >
+            <BaseIcon
+              icon="mdi:dock-left"
+              class="w-6 h-6"
+            />
+          </button>
+        </div>
+
         <div class="flex flex-1">
           <nav class="flex-1">
-            <slot name="menu" />
+            <slot
+              name="menu"
+              :collapsed="collapsed"
+            />
           </nav>
         </div>
       </div>
@@ -230,6 +261,16 @@ function closeMenu() {
   showMobileMenu.value = false;
 }
 
+/**
+ * Collapse
+ */
+
+const collapsed = ref(false);
+
+function toggleCollapse() {
+  collapsed.value = !collapsed.value;
+}
+
 const navbarHeight = computed<number>(() => {
   if (props.size === 'xs') {
     return 50;

package/src/components/BaseLayoutSidebarConfigurable.vue

@@ -6,10 +6,13 @@
     :dark="dark"
     :size="size"
   >
-    <template #menu>
-      <div class="px-3 py-6">
-        <div class="space-y-8">
-          <div
+    <template #menu="{ collapsed }">
+      <div
+        class="py-6"
+        :class="[collapsed ? '' : 'px-3']"
+      >
+        <div :class="[collapsed ? 'space-y-2' : 'space-y-8']">
+          <template
             v-for="section in menu"
             :key="section.label"
           >
@@ -18,19 +21,27 @@
               :key="section.label"
             >
               <h2
+                v-if="!collapsed"
                 class="pl-3"
                 :class="sectionLabelClasses"
               >
                 {{ section.label }}
               </h2>
 
-              <div :class="[size == 'md' ? 'space-y-1' : 'space-y-0.5']">
+              <div
+                :class="[
+                  collapsed ? 'space-y-2' : '',
+                  !collapsed && size == 'md' ? 'space-y-1' : '',
+                  !collapsed && size != 'md' ? 'space-y-0.5' : '',
+                ]"
+              >
                 <BaseNavbarSideItem
                   v-for="item in section.actions"
                   :key="item.label"
                   :item="item"
                   :dark="dark"
                   :size="size"
+                  :collapsed="collapsed"
                 />
               </div>
             </div>
@@ -40,8 +51,9 @@
               :item="section"
               :dark="dark"
               :size="size"
+              :collapsed="collapsed"
             />
-          </div>
+          </template>
         </div>
       </div>
     </template>

package/src/components/BaseLayoutStackedConfigurable.vue

@@ -14,6 +14,11 @@
             v-if="logoUrl"
             :to="logoTo"
             class="flex flex-shrink-0 items-center p-2 pl-0"
+            :class="{
+              'mr-4': size == 'xs',
+              'mr-6': size == 'sm',
+              'mr-8': size == 'md',
+            }"
           >
             <img
               class="block h-8 w-auto"
@@ -27,9 +32,8 @@
             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',
+              'space-x-0.5': size == 'sm',
+              'space-x-1': size == 'md',
             }"
           >
             <BaseNavbarItem

package/src/components/BaseNavbarSideItem.vue

@@ -1,25 +1,76 @@
 <template>
   <div>
-    <BaseActionItem
-      v-if="!item.meta?.line"
-      :item="item"
-      class="flex w-full"
-      @click="onClick"
+    <BaseTooltip
+      :floating-options="{
+        placement: 'right-start',
+      }"
+      :visible="collapsed"
+      :interactive="hasItems"
     >
-      <template #default="{ active }">
-        <BaseNavbarSideItemContent
-          :label="item.label"
-          :icon="item.icon"
-          :active="active"
-          :count="item.count"
-          :dark="dark"
-          :size="size"
-        />
+      <template #default>
+        <BaseActionItem
+          v-if="!item.meta?.line"
+          :item="item"
+          class="flex w-full"
+          @click="onClick"
+        >
+          <template #default="{ active }">
+            <BaseNavbarSideItemContent
+              :label="item.label"
+              :icon="item.icon"
+              :active="active"
+              :count="item.count"
+              :dark="dark"
+              :size="size"
+              :collapsed="collapsed"
+            />
+          </template>
+        </BaseActionItem>
+      </template>
+
+      <template
+        v-if="collapsed"
+        #tooltip
+      >
+        <div
+          v-if="hasItems"
+          class="bg-white px-4 py-3 shadow-lg ring-1 ring-black ring-opacity-10 rounded-md"
+        >
+          <div
+            v-for="subItem in item.actions"
+            :key="subItem.label"
+          >
+            <BaseActionItem
+              :item="subItem"
+              class="flex gap-1 items-center justify-start"
+            >
+              <template #default="{ active }">
+                <div
+                  class="text-sm text-slate-600 hover:text-slate-950"
+                  :class="{ 'font-medium': active }"
+                >
+                  {{ subItem.label }}
+                </div>
+                <BaseCounter
+                  v-if="subItem.count"
+                  :count="subItem.count"
+                  size="xs"
+                />
+              </template>
+            </BaseActionItem>
+          </div>
+        </div>
+        <div
+          v-else
+          class="bg-slate-900 text-white rounded shadow-lg px-2 py-1.5 text-xs"
+        >
+          <span>{{ item.label }}</span>
+        </div>
       </template>
-    </BaseActionItem>
+    </BaseTooltip>
 
     <div
-      v-if="showSubActions && item.actions && item.actions.length"
+      v-if="!collapsed && hasItems && showSubActions"
       class="mt-1 sm:mt-2 mb-3"
     >
       <div
@@ -56,6 +107,8 @@ import { ActionItem } from '@/types';
 import BaseActionItem from './BaseActionItem.vue';
 import BaseNavbarSideItemContent from './BaseNavbarSideItemContent.vue';
 import BaseCounter from './BaseCounter.vue';
+import BaseTooltip from './BaseTooltip.vue';
+import { flip, shift } from '@floating-ui/vue';
 
 const router = useRouter();
 
@@ -72,6 +125,10 @@ const props = defineProps({
     default: 'md',
     type: String as PropType<'xs' | 'sm' | 'md'>,
   },
+  collapsed: {
+    default: false,
+    type: Boolean,
+  },
 });
 
 const emit = defineEmits(['click']);
@@ -80,6 +137,10 @@ async function onClick() {
   emit('click');
 }
 
+const hasItems = computed((): boolean => {
+  return !!props.item.actions && props.item.actions.length > 0;
+});
+
 const routeActive = computed((): boolean => {
   if (!props.item.to) {
     return false;

package/src/components/BaseNavbarSideItemContent.vue

@@ -1,15 +1,18 @@
 <template>
   <div :class="classes">
-    <div class="group flex grow items-center">
+    <div
+      class="group flex grow items-center"
+      :class="[collapsed ? 'justify-center' : 'justify-start']"
+    >
       <BaseIcon
         v-if="icon"
         :icon="icon"
         :class="iconClasses"
       />
-      <span>{{ label }}</span>
+      <span v-if="!collapsed">{{ label }}</span>
     </div>
     <div
-      v-if="count"
+      v-if="count && !collapsed"
       class="relative -top-px ml-[5px]"
     >
       <BaseCounter
@@ -52,10 +55,18 @@ const props = defineProps({
     default: 'md',
     type: String as PropType<'xs' | 'sm' | 'md'>,
   },
+  collapsed: {
+    default: false,
+    type: Boolean,
+  },
 });
 
 const classes = computed(() => {
-  const classList = ['text-left rounded-md flex w-full'];
+  const classList = ['text-left flex w-full'];
+
+  if (!props.collapsed) {
+    classList.push('rounded-md');
+  }
 
   if (props.active) {
     if (props.dark) {
@@ -95,15 +106,19 @@ const iconClasses = computed((): string[] => {
   }
 
   if (props.size == 'xs') {
-    classList.push('w-3.5 h-3.5 mr-2');
+    classList.push('w-3.5 h-3.5');
   }
 
   if (props.size == 'sm') {
-    classList.push('w-4 h-4 mr-2');
+    classList.push('w-4 h-4');
   }
 
   if (props.size == 'md') {
-    classList.push('w-5 h-5 mr-2');
+    classList.push('w-5 h-5');
+  }
+
+  if (!props.collapsed) {
+    classList.push('mr-2');
   }
 
   return classList;

package/src/components/BaseTooltip.vue

@@ -11,7 +11,8 @@
   >
     <div
       ref="tooltipRef"
-      class="fixed top-0 left-0 pointer-events-none z-tooltip"
+      class="fixed top-0 left-0 z-tooltip"
+      :class="[!interactive ? 'pointer-events-none' : '']"
       :style="floatingStyles"
     >
       <transition
@@ -39,6 +40,7 @@
 <script lang="ts" setup>
 import { useTooltip } from '@/composables/tooltip';
 import { unrefElement } from '@vueuse/core';
+import { UseFloatingOptions } from '@floating-ui/vue';
 
 defineOptions({
   inheritAttrs: false,
@@ -48,10 +50,14 @@ const props = withDefaults(defineProps<{
   visible?: boolean,
   text?: string | null | undefined;
   class?: string[] | string | null | undefined;
+  floatingOptions?: UseFloatingOptions,
+  interactive?: boolean,
 }>(), {
   visible: true,
   text: null,
   class: null,
+  floatingOptions: undefined,
+  interactive: false,
 });
 
 const targetRef = ref<HTMLElement | null>(null);
@@ -60,6 +66,6 @@ const targetInternal = computed(() => unrefElement(targetRef));
 
 const tooltipRef = ref<HTMLElement | null>(null)
 
-const { floatingStyles, showTooltip } = useTooltip(targetInternal, tooltipRef);
+const { floatingStyles, showTooltip } = useTooltip(targetInternal, tooltipRef, props.interactive, props.floatingOptions);
 
 </script>

package/src/composables/tooltip.ts

@@ -1,5 +1,6 @@
 import { UseFloatingOptions, MaybeElement, UseFloatingReturn, autoUpdate, flip, offset, shift, useFloating } from "@floating-ui/vue";
 import { unrefElement, useEventListener, } from "@vueuse/core";
+import { debounce } from "lodash";
 
 type ReturnType = UseFloatingReturn & {
     showTooltip: Ref<boolean>;
@@ -10,6 +11,7 @@ import { Ref } from "vue";
 function useTooltip(
     reference: Readonly<Ref<MaybeElement<any>>>,
     floating: Readonly<Ref<MaybeElement<HTMLElement>>>,
+    interactive: boolean = false,
     options: UseFloatingOptions | undefined = undefined
 ): ReturnType {
 
@@ -19,14 +21,42 @@ function useTooltip(
         return unrefElement(reference);
     });
 
+    const floatingRef = computed(() => {
+        return unrefElement(floating);
+    });
+
+    let nextShow = false;
+
     useEventListener(elementRef, 'mouseenter', () => {
-        show.value = true;
+        nextShow = true;
+        renderShow();
     });
 
     useEventListener(elementRef, 'mouseleave', () => {
-        show.value = false;
+        nextShow = false;
+        renderShow();
+    });
+
+    useEventListener(floatingRef, 'mouseenter', () => {
+        if (!interactive) {
+            return;
+        }
+        nextShow = true;
+        renderShow();
+    });
+
+    useEventListener(floatingRef, 'mouseleave', () => {
+        if (!interactive) {
+            return;
+        }
+        nextShow = false;
+        renderShow();
     });
 
+    const renderShow = debounce(() => {
+        show.value = nextShow;
+    }, interactive ? 150 : 0);
+
     const config = {
         placement: 'top',
         middleware: [offset(6), flip(), shift()],