sprintify-ui 0.10.12 → 0.10.14

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

@@ -42,10 +42,10 @@ declare function __VLS_template(): {
             $props: Partial<{
                 filter: (option: import("@/types").NormalizedOption) => boolean;
                 size: "xs" | "sm" | "md" | "lg" | "xl";
-                name: string;
-                disabled: boolean;
                 required: boolean;
                 inline: boolean;
+                disabled: boolean;
+                name: string;
                 placeholder: string;
                 hasError: boolean;
                 max: number;
@@ -56,9 +56,9 @@ declare function __VLS_template(): {
                 focusOnMount: boolean;
                 twContainer: string | string[];
             }> & Omit<{
-                readonly options: RawOption[];
-                readonly disabled: boolean;
                 readonly inline: boolean;
+                readonly disabled: boolean;
+                readonly options: RawOption[];
                 readonly modelValue: RawOption[] | null;
                 readonly hasError: boolean;
                 readonly visibleFocus: boolean;
@@ -71,16 +71,16 @@ declare function __VLS_template(): {
                 readonly twContainer: string | string[];
                 readonly filter?: ((option: import("@/types").NormalizedOption) => boolean) | undefined;
                 readonly size?: "xs" | "sm" | "md" | "lg" | "xl" | undefined;
-                readonly name?: string | undefined;
                 readonly required?: boolean | undefined;
+                readonly name?: string | undefined;
                 readonly placeholder?: string | undefined;
                 readonly max?: number | undefined;
                 readonly onClose?: ((...args: any[]) => any) | undefined;
+                readonly onOpen?: ((...args: any[]) => any) | undefined;
                 readonly "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
                 readonly onScrollBottom?: ((...args: any[]) => any) | undefined;
                 readonly onTyping?: ((...args: any[]) => any) | undefined;
-                readonly onOpen?: ((...args: any[]) => any) | undefined;
-            } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, "filter" | "size" | "name" | "disabled" | "required" | "inline" | "placeholder" | "hasError" | "max" | "visibleFocus" | "loading" | "loadingBottom" | "dropdownShow" | "focusOnMount" | "twContainer">;
+            } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, "filter" | "size" | "required" | "inline" | "disabled" | "name" | "placeholder" | "hasError" | "max" | "visibleFocus" | "loading" | "loadingBottom" | "dropdownShow" | "focusOnMount" | "twContainer">;
             $attrs: {
                 [x: string]: unknown;
             };
@@ -93,7 +93,7 @@ declare function __VLS_template(): {
             $root: import("vue").ComponentPublicInstance | null;
             $parent: import("vue").ComponentPublicInstance | null;
             $host: Element | null;
-            $emit: ((event: "close", ...args: any[]) => void) & ((event: "update:modelValue", ...args: any[]) => void) & ((event: "scrollBottom", ...args: any[]) => void) & ((event: "typing", ...args: any[]) => void) & ((event: "open", ...args: any[]) => void);
+            $emit: ((event: "close", ...args: any[]) => void) & ((event: "open", ...args: any[]) => void) & ((event: "update:modelValue", ...args: any[]) => void) & ((event: "scrollBottom", ...args: any[]) => void) & ((event: "typing", ...args: any[]) => void);
             $el: HTMLDivElement;
             $options: import("vue").ComponentOptionsBase<Readonly<import("vue").ExtractPropTypes<{
                 modelValue: {
@@ -174,10 +174,10 @@ declare function __VLS_template(): {
                 };
             }>> & Readonly<{
                 onClose?: ((...args: any[]) => any) | undefined;
+                onOpen?: ((...args: any[]) => any) | undefined;
                 "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
                 onScrollBottom?: ((...args: any[]) => any) | undefined;
                 onTyping?: ((...args: any[]) => any) | undefined;
-                onOpen?: ((...args: any[]) => any) | undefined;
             }>, {
                 focus: () => void;
                 blur: () => void;
@@ -186,17 +186,17 @@ declare function __VLS_template(): {
                 setKeywords: (input: string) => void;
             }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
                 close: (...args: any[]) => void;
+                open: (...args: any[]) => void;
                 "update:modelValue": (...args: any[]) => void;
                 scrollBottom: (...args: any[]) => void;
                 typing: (...args: any[]) => void;
-                open: (...args: any[]) => void;
             }, string, {
                 filter: (option: import("@/types").NormalizedOption) => boolean;
                 size: "xs" | "sm" | "md" | "lg" | "xl";
-                name: string;
-                disabled: boolean;
                 required: boolean;
                 inline: boolean;
+                disabled: boolean;
+                name: string;
                 placeholder: string;
                 hasError: boolean;
                 max: number;
@@ -229,10 +229,10 @@ declare function __VLS_template(): {
         } & Readonly<{
             filter: (option: import("@/types").NormalizedOption) => boolean;
             size: "xs" | "sm" | "md" | "lg" | "xl";
-            name: string;
-            disabled: boolean;
             required: boolean;
             inline: boolean;
+            disabled: boolean;
+            name: string;
             placeholder: string;
             hasError: boolean;
             max: number;
@@ -321,11 +321,11 @@ declare function __VLS_template(): {
             };
         }>> & Readonly<{
             onClose?: ((...args: any[]) => any) | undefined;
+            onOpen?: ((...args: any[]) => any) | undefined;
             "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
             onScrollBottom?: ((...args: any[]) => any) | undefined;
             onTyping?: ((...args: any[]) => any) | undefined;
-            onOpen?: ((...args: any[]) => any) | undefined;
-        }>, "blur" | "close" | "focus" | "open" | "setKeywords" | ("filter" | "size" | "name" | "disabled" | "required" | "inline" | "placeholder" | "hasError" | "max" | "visibleFocus" | "loading" | "loadingBottom" | "dropdownShow" | "focusOnMount" | "twContainer")> & import("vue").ShallowUnwrapRef<{
+        }>, "blur" | "close" | "focus" | "open" | "setKeywords" | ("filter" | "size" | "required" | "inline" | "disabled" | "name" | "placeholder" | "hasError" | "max" | "visibleFocus" | "loading" | "loadingBottom" | "dropdownShow" | "focusOnMount" | "twContainer")> & import("vue").ShallowUnwrapRef<{
             focus: () => void;
             blur: () => void;
             close: () => void;
@@ -476,8 +476,8 @@ declare const __VLS_component: import("vue").DefineComponent<import("vue").Extra
     onScrollBottom?: ((...args: any[]) => any) | undefined;
     onTyping?: ((...args: any[]) => any) | undefined;
 }>, {
-    disabled: boolean;
     required: boolean;
+    disabled: boolean;
     placeholder: string;
     hasError: boolean;
     max: number;

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

@@ -115,9 +115,9 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     class: string | string[];
     type: string;
     size: "xs" | "sm" | "md" | "lg" | "xl";
-    name: string;
-    disabled: boolean;
     required: boolean;
+    disabled: boolean;
+    name: string;
     modelValue: string | null | undefined;
     autocomplete: boolean;
     preventSubmit: boolean;

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

@@ -115,9 +115,9 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
 }>, {
     size: "xs" | "sm" | "md" | "lg" | "xl";
-    name: string;
-    disabled: boolean;
     required: boolean;
+    disabled: boolean;
+    name: string;
     modelValue: string | null;
     placeholder: string;
     hasError: boolean;

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

@@ -105,9 +105,9 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
 }>, {
     class: string | string[];
     size: "xs" | "sm" | "md" | "lg" | "xl";
-    name: string;
-    disabled: boolean;
     required: boolean;
+    disabled: boolean;
+    name: string;
     modelValue: string | null | undefined;
     placeholder: string;
     hasError: boolean;

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

@@ -4,8 +4,14 @@ type __VLS_Props = {
     text?: string | null | undefined;
     class?: string[] | string | null | undefined;
     floatingOptions?: UseFloatingOptions;
+    /**
+     * Whether the tooltip content is interactive or not.
+     * When true, hovering the tooltip content will keep it visible.
+     */
     interactive?: boolean;
+    delay?: number;
     dark?: boolean;
+    offset?: number;
 };
 declare function __VLS_template(): {
     attrs: Partial<{}>;
@@ -27,6 +33,8 @@ declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, {}, {}
     visible: boolean;
     floatingOptions: UseFloatingOptions;
     interactive: boolean;
+    delay: number;
+    offset: number;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
 export default _default;

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

@@ -1,3 +1,4 @@
+import BaseActionButtons from './BaseActionButtons.vue';
 import BaseActionItem from './BaseActionItem.vue';
 import BaseAddressForm from './BaseAddressForm.vue';
 import BaseAlert from './BaseAlert.vue';
@@ -105,4 +106,4 @@ import BaseLayoutStacked from './BaseLayoutStacked.vue';
 import BaseLayoutStackedConfigurable from './BaseLayoutStackedConfigurable.vue';
 import BaseLayoutSidebar from './BaseLayoutSidebar.vue';
 import BaseLayoutSidebarConfigurable from './BaseLayoutSidebarConfigurable.vue';
-export { BaseActionItem, BaseAddressForm, BaseAlert, BaseApp, BaseAppDialogs, BaseAppSnackbars, BaseAssign, BaseAutocomplete, BaseAutocompleteFetch, BaseAvatar, BaseAvatarGroup, BaseBadge, BaseBelongsTo, BaseBelongsToFetch, BaseBoolean, BaseBreadcrumbs, BaseButton, BaseButtonGroup, BaseCard, BaseCardRow, BaseCharacterCounter, BaseClipboard, BaseCollapse, BaseColor, BaseContainer, BaseCounter, BaseCropper, BaseCropperModal, BaseDataIterator, BaseDataTable, BaseDatePicker, BaseDateSelect, BaseDescriptionList, BaseDescriptionListItem, BaseDialog, BaseDisplayRelativeTime, BaseDropdown, BaseDropdownAutocomplete, BaseEmptyState, BaseField, BaseFieldI18n, BaseFilePicker, BaseFilePickerCrop, BaseFileUploader, BaseForm, BaseGantt, BaseHasMany, BaseHasManyFetch, BaseHeader, BaseIcon, BaseIconPicker, BaseInput, BaseInputLabel, BaseInputPercent, BaseJsonReader, BaseLazy, BaseLoadingCover, BaseMediaItem, BaseMediaLibrary, BaseMediaPreview, BaseMenu, BaseMenuItem, BaseModalCenter, BaseModalSide, BaseNavbar, BaseNavbarItem, BaseNavbarItemContent, BaseNavbarSideItem, BasePagination, BasePanel, BasePassword, BaseProgressCircle, BaseRadioGroup, BaseReadMore, BaseRichText, BaseSelect, BaseShortcut, BaseSideNavigation, BaseSideNavigationItem, BaseSkeleton, BaseStatistic, BaseStepper, BaseStepperItem, BaseSwitch, BaseSystemAlert, BaseTable, BaseTableBody, BaseTableCell, BaseTableHead, BaseTableHeader, BaseTableRow, BaseTabs, BaseTabItem, BaseTagAutocomplete, BaseTagAutocompleteFetch, BaseTableColumn, BaseTextarea, BaseTextareaAutoresize, BaseTimeline, BaseTimelineItem, BaseTimePicker, BaseTooltip, BaseUniqueCode, BaseLayoutStacked, BaseLayoutStackedConfigurable, BaseLayoutSidebar, BaseLayoutSidebarConfigurable, };
+export { BaseActionButtons, BaseActionItem, BaseAddressForm, BaseAlert, BaseApp, BaseAppDialogs, BaseAppSnackbars, BaseAssign, BaseAutocomplete, BaseAutocompleteFetch, BaseAvatar, BaseAvatarGroup, BaseBadge, BaseBelongsTo, BaseBelongsToFetch, BaseBoolean, BaseBreadcrumbs, BaseButton, BaseButtonGroup, BaseCard, BaseCardRow, BaseCharacterCounter, BaseClipboard, BaseCollapse, BaseColor, BaseContainer, BaseCounter, BaseCropper, BaseCropperModal, BaseDataIterator, BaseDataTable, BaseDatePicker, BaseDateSelect, BaseDescriptionList, BaseDescriptionListItem, BaseDialog, BaseDisplayRelativeTime, BaseDropdown, BaseDropdownAutocomplete, BaseEmptyState, BaseField, BaseFieldI18n, BaseFilePicker, BaseFilePickerCrop, BaseFileUploader, BaseForm, BaseGantt, BaseHasMany, BaseHasManyFetch, BaseHeader, BaseIcon, BaseIconPicker, BaseInput, BaseInputLabel, BaseInputPercent, BaseJsonReader, BaseLazy, BaseLoadingCover, BaseMediaItem, BaseMediaLibrary, BaseMediaPreview, BaseMenu, BaseMenuItem, BaseModalCenter, BaseModalSide, BaseNavbar, BaseNavbarItem, BaseNavbarItemContent, BaseNavbarSideItem, BasePagination, BasePanel, BasePassword, BaseProgressCircle, BaseRadioGroup, BaseReadMore, BaseRichText, BaseSelect, BaseShortcut, BaseSideNavigation, BaseSideNavigationItem, BaseSkeleton, BaseStatistic, BaseStepper, BaseStepperItem, BaseSwitch, BaseSystemAlert, BaseTable, BaseTableBody, BaseTableCell, BaseTableHead, BaseTableHeader, BaseTableRow, BaseTabs, BaseTabItem, BaseTagAutocomplete, BaseTagAutocompleteFetch, BaseTableColumn, BaseTextarea, BaseTextareaAutoresize, BaseTimeline, BaseTimelineItem, BaseTimePicker, BaseTooltip, BaseUniqueCode, BaseLayoutStacked, BaseLayoutStackedConfigurable, BaseLayoutSidebar, BaseLayoutSidebarConfigurable, };

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>>>, interactive?: boolean, options?: UseFloatingOptions | undefined): ReturnType;
+declare function useTooltip(reference: Readonly<Ref<MaybeElement<any>>>, floating: Readonly<Ref<MaybeElement<HTMLElement>>>, interactive?: boolean, delay?: number, options?: UseFloatingOptions | undefined, offset?: number): ReturnType;
 export { useTooltip };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sprintify-ui",
-  "version": "0.10.12",
+  "version": "0.10.14",
   "type": "module",
   "scripts": {
     "build": "rimraf dist && vue-tsc && vite build",

package/src/components/BaseActionButtons.vue

@@ -0,0 +1,77 @@
+<template>
+  <div
+    :class="[
+      variant === 'buttons' ? 'flex space-x-2' : 'btn-group',
+    ]"
+  >
+    <BaseActionItemButton
+      v-for="(primaryAction, i) in primaryActions"
+      :key="i"
+      :item="primaryAction"
+      size="sm"
+    />
+    <BaseMenu
+      v-if="secondaryActions.length"
+      :items="secondaryActions"
+      size="sm"
+    >
+      <template #button="{ open }">
+        <div
+          class="btn btn-sm flex items-center p-2 hover:border-slate-400"
+          :class="[open ? 'bg-slate-100' : '']"
+        >
+          <BaseIcon
+            icon="heroicons-outline:dots-horizontal"
+            class="h-4 w-4 text-slate-500"
+          />
+        </div>
+      </template>
+    </BaseMenu>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ActionItem } from '@/types';
+import { cloneDeep } from 'lodash';
+import BaseActionItemButton from './BaseActionItemButton.vue';
+import BaseMenu from './BaseMenu.vue';
+
+interface PropsInterface {
+  actions: ActionItem[],
+  maxActions?: number,
+  compact?: boolean,
+  variant?: 'buttons' | 'button-group',
+}
+
+const props = withDefaults(defineProps<PropsInterface>(), {
+  maxActions: 3,
+  compact: false,
+  variant: 'buttons',
+});
+
+const maxActionsInternal = computed(() => {
+  if (props.compact) {
+    return 1;
+  }
+  return Math.max(1, props.maxActions);
+});
+
+const primaryActions = computed(() => {
+  if (!props.actions) {
+    return [];
+  }
+
+  return cloneDeep(props.actions).slice(0, maxActionsInternal.value);
+});
+
+
+const secondaryActions = computed(() => {
+  if (!props.actions) {
+    return [];
+  }
+
+  return props.actions.filter(
+    (a) => !primaryActions.value.map((a) => a.label).includes(a.label)
+  );
+});
+</script>

package/src/components/BaseDataTable.stories.js

@@ -83,9 +83,33 @@ const componentProps = {
   ],
   checkableActions: [
     {
-      label: "Delete all",
+      label: "Close",
+      icon: "mdi:check",
+      color: 'primary',
+      action: () => {
+        alert("Close!");
+      },
+    },
+    {
+      label: "Duplicate",
+      icon: "mdi:content-copy",
+      action: () => {
+        alert("Duplicate!");
+      },
+    },
+    {
+      label: "Edit",
+      icon: "mdi:pencil",
+      action: () => {
+        alert("Edit!");
+      },
+    },
+    {
+      label: "Delete",
+      color: 'danger',
+      icon: "mdi:trash-can",
       action: () => {
-        alert("delete!");
+        alert("Delete!");
       },
     },
   ],

package/src/components/BaseDataTable.vue

@@ -40,28 +40,12 @@
                 {{ t('sui.deselect_all') }}
               </button>
             </div>
-            <BaseMenu
+            <BaseActionButtons
               v-if="checkableActions?.length"
-              :items="checkableActions"
-            >
-              <template #button="{ open }">
-                <div
-                  class="flex pl-2 pr-4 items-center justify-center btn btn-sm"
-                  :class="[
-                    open ? 'ring-2 ring-primary-500 ring-offset-2' : false,
-                  ]"
-                >
-                  <BaseIcon
-                    icon="heroicons-solid:dots-vertical"
-                    class="mr-2"
-                  />
-
-                  <span>
-                    {{ t('sui.bulk_actions') }}
-                  </span>
-                </div>
-              </template>
-            </BaseMenu>
+              :actions="checkableActions"
+              :max-actions="2"
+              variant="button-group"
+            />
           </div>
         </div>
 
@@ -259,6 +243,7 @@ import { useInputSize } from '@/composables/inputSize';
 import BaseButton from './BaseButton.vue';
 import BaseDataTableTemplate from './BaseDataTableTemplate.vue';
 import { customKeyActions } from '@/services/table/customKeyActions';
+import BaseActionButtons from './BaseActionButtons.vue';
 
 const http = config.http;
 

package/src/components/BaseHeader.stories.js

@@ -34,10 +34,13 @@ const attributes = [
     label: "Full Time",
     icon: "heroicons:briefcase-solid",
     tooltip: "40h a week",
+    to: '/articles'
   },
   {
     label: "Remote",
     icon: "heroicons:map-pin-solid",
+    tooltip: "Anywhere",
+    to: '/articles'
   },
 ];
 

package/src/components/BaseHeader.vue

@@ -48,16 +48,23 @@
             :visible="!!attribute.tooltip"
             :text="attribute.tooltip"
             dark
+            :delay="400"
           >
-            <BaseIcon
-              v-if="attribute.icon"
-              :icon="attribute.icon"
-              class="h-4 w-4 shrink-0 text-slate-600"
-              aria-hidden="true"
-            />
-            <span class="text-sm text-slate-600">
-              {{ attribute.label }}
-            </span>
+            <component
+              :is="attribute.to ? 'router-link' : 'div'"
+              :to="attribute.to"
+              class="flex items-center gap-1.5"
+            >
+              <BaseIcon
+                v-if="attribute.icon"
+                :icon="attribute.icon"
+                class="h-4 w-4 shrink-0 text-slate-600"
+                aria-hidden="true"
+              />
+              <span class="text-sm text-slate-600">
+                {{ attribute.label }}
+              </span>
+            </component>
           </BaseTooltip>
         </div>
       </div>
@@ -66,34 +73,16 @@
         class="mt-3 lg:mt-0 mb-2 lg:mb-0"
       >
         <div
-          class="flex gap-2"
           :class="{
             'lg:mt-0 lg:ml-4': !compactLayout,
           }"
         >
-          <BaseActionItemButton
-            v-for="(primaryAction, i) in primaryActions"
-            :key="i"
-            :item="primaryAction"
-            size="sm"
+          <BaseActionButtons
+            v-if="actions"
+            :actions="actions"
+            :max-actions="maxActions"
+            :compact="compactLayout"
           />
-          <BaseMenu
-            v-if="secondaryActions.length"
-            :items="secondaryActions"
-            size="sm"
-          >
-            <template #button="{ open }">
-              <div
-                class="btn btn-sm flex items-center rounded-full p-2 hover:border-slate-400"
-                :class="[open ? 'bg-slate-100' : '']"
-              >
-                <BaseIcon
-                  icon="heroicons-outline:dots-horizontal"
-                  class="h-4 w-4 text-slate-500"
-                />
-              </div>
-            </template>
-          </BaseMenu>
         </div>
       </div>
     </div>
@@ -104,11 +93,10 @@
 import { Breadcrumb, ActionItem } from '@/types';
 import { useResizeObserver } from '@vueuse/core';
 import { BaseBreadcrumbs, BaseIcon } from '..';
-import BaseActionItemButton from './BaseActionItemButton.vue';
 import BaseBadge from './BaseBadge.vue';
-import BaseMenu from './BaseMenu.vue';
-import { cloneDeep } from 'lodash';
 import BaseTooltip from './BaseTooltip.vue';
+import BaseActionButtons from './BaseActionButtons.vue';
+import { RouteRecordRaw } from 'vue-router';
 
 type BaseBadgeProps = InstanceType<typeof BaseBadge>["$props"] & {
   label: string;
@@ -118,7 +106,7 @@ const props = withDefaults(
   defineProps<{
     title: string;
     subtitle?: string;
-    attributes?: { icon?: string; label: string; tooltip?: string }[];
+    attributes?: { icon?: string; label: string; tooltip?: string, to?: RouteRecordRaw }[];
     actions?: ActionItem[];
     badge?: BaseBadgeProps;
     layout?: 'default' | 'compact';
@@ -150,46 +138,4 @@ const compactLayout = computed(() => {
   return width.value < 500;
 });
 
-const maxActionsInternal = computed(() => {
-  if (compactLayout.value) {
-    return 1;
-  }
-  return Math.max(1, props.maxActions);
-});
-
-const primaryActions = computed(() => {
-  if (!props.actions) {
-    return [];
-  }
-
-  return cloneDeep(props.actions)
-    .sort(sortByColor(false))
-    .slice(0, maxActionsInternal.value)
-    .sort(sortByColor(true));
-});
-
-function sortByColor(reverse = false) {
-  const sortingArr = ['secondary', 'primary'];
-
-  return (a: ActionItem, b: ActionItem) => {
-    if (!reverse) {
-      return (
-        sortingArr.indexOf(b.color ?? '') - sortingArr.indexOf(a.color ?? '')
-      );
-    }
-    return (
-      sortingArr.indexOf(a.color ?? '') - sortingArr.indexOf(b.color ?? '')
-    );
-  };
-}
-
-const secondaryActions = computed(() => {
-  if (!props.actions) {
-    return [];
-  }
-
-  return props.actions.filter(
-    (a) => !primaryActions.value.map((a) => a.label).includes(a.label)
-  );
-});
 </script>

package/src/components/BaseNavbarSideItem.vue

@@ -6,6 +6,7 @@
       }"
       :visible="collapsed"
       :interactive="hasItems"
+      :offset="hasItems ? 0 : 6"
     >
       <template #default>
         <BaseActionItem
@@ -34,7 +35,7 @@
       >
         <div
           v-if="hasItems"
-          class="bg-white px-4 py-3 shadow-lg ring-1 ring-black ring-opacity-10 rounded-md"
+          class="bg-white shadow-lg py-2 ring-1 ring-black ring-opacity-10 rounded-r-md w-[180px]"
         >
           <div
             v-for="subItem in item.actions"
@@ -42,20 +43,22 @@
           >
             <BaseActionItem
               :item="subItem"
-              class="flex gap-1 items-center justify-start"
+              class="flex gap-1 items-center px-4 py-1.5 hover:bg-slate-100"
             >
               <template #default="{ active }">
-                <div
-                  class="text-sm text-slate-600 hover:text-slate-950"
-                  :class="{ 'font-medium': active }"
-                >
-                  {{ subItem.label }}
+                <div class="flex justify-between gap-2 items-center w-full">
+                  <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="sm"
+                  />
                 </div>
-                <BaseCounter
-                  v-if="subItem.count"
-                  :count="subItem.count"
-                  size="xs"
-                />
               </template>
             </BaseActionItem>
           </div>
@@ -108,7 +111,6 @@ 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();
 

package/src/components/BaseTooltip.vue

@@ -54,8 +54,14 @@ const props = withDefaults(defineProps<{
   text?: string | null | undefined;
   class?: string[] | string | null | undefined;
   floatingOptions?: UseFloatingOptions,
+  /**
+   * Whether the tooltip content is interactive or not.
+   * When true, hovering the tooltip content will keep it visible.
+   */
   interactive?: boolean,
+  delay?: number,
   dark?: boolean,
+  offset?: number,
 }>(), {
   visible: true,
   text: null,
@@ -65,8 +71,10 @@ const props = withDefaults(defineProps<{
       placement: 'top-start',
     };
   },
-  interactive: false,
+  interactive: true,
+  delay: 0,
   dark: false,
+  offset: 6,
 });
 
 const targetRef = ref<HTMLElement | null>(null);
@@ -75,7 +83,7 @@ const targetInternal = computed(() => unrefElement(targetRef));
 
 const tooltipRef = ref<HTMLElement | null>(null)
 
-const { floatingStyles, showTooltip } = useTooltip(targetInternal, tooltipRef, props.interactive, props.floatingOptions);
+const { floatingStyles, showTooltip } = useTooltip(targetInternal, tooltipRef, props.interactive, props.delay, props.floatingOptions, props.offset);
 
 const classInternal = computed(() => {
   return [

package/src/components/index.ts

@@ -1,3 +1,4 @@
+import BaseActionButtons from './BaseActionButtons.vue';
 import BaseActionItem from './BaseActionItem.vue';
 import BaseAddressForm from './BaseAddressForm.vue';
 import BaseAlert from './BaseAlert.vue';
@@ -108,6 +109,7 @@ import BaseLayoutSidebar from './BaseLayoutSidebar.vue';
 import BaseLayoutSidebarConfigurable from './BaseLayoutSidebarConfigurable.vue';
 
 export {
+  BaseActionButtons,
   BaseActionItem,
   BaseAddressForm,
   BaseAlert,