sprintify-ui 0.10.57 → 0.10.58

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

@@ -37,6 +37,7 @@ type __VLS_Props = {
     align?: 'center' | 'between';
     color?: keyof typeof colors | string;
     to?: RouteLocationRaw;
+    tooltip?: string | null | undefined;
 };
 declare const classes: import("vue").ComputedRef<string>;
 declare const styles: import("vue").ComputedRef<{
@@ -56,10 +57,26 @@ declare const containerClass: import("vue").ComputedRef<string[]>;
 declare const iconClass: import("vue").ComputedRef<string[]>;
 declare const buttonRef: import("vue").Ref<HTMLElement | undefined, HTMLElement | undefined>;
 declare function focus(): void;
+declare const tooltipRef: import("vue").Ref<HTMLElement | undefined, HTMLElement | undefined>;
+declare const floatingStyles: Readonly<import("vue").Ref<{
+    position: import("@floating-ui/utils").Strategy;
+    top: string;
+    left: string;
+    transform?: string;
+    willChange?: string;
+}, {
+    position: import("@floating-ui/utils").Strategy;
+    top: string;
+    left: string;
+    transform?: string;
+    willChange?: string;
+}>>, showTooltip: import("vue").Ref<boolean, boolean>;
 declare const __VLS_ctx: InstanceType<__VLS_PickNotAny<typeof __VLS_self, new () => {}>>;
-declare var __VLS_18: {};
+declare var __VLS_18: {}, __VLS_32: {};
 type __VLS_Slots = __VLS_PrettifyGlobal<__VLS_OmitStringIndex<typeof __VLS_ctx.$slots> & {
     default?: (props: typeof __VLS_18) => any;
+} & {
+    tooltip?: (props: typeof __VLS_32) => any;
 }>;
 declare const __VLS_self: import("vue").DefineComponent<__VLS_Props, {
     BaseIcon: typeof BaseIcon;
@@ -68,6 +85,9 @@ declare const __VLS_self: import("vue").DefineComponent<__VLS_Props, {
     containerClass: typeof containerClass;
     iconClass: typeof iconClass;
     buttonRef: typeof buttonRef;
+    tooltipRef: typeof tooltipRef;
+    floatingStyles: typeof floatingStyles;
+    showTooltip: typeof showTooltip;
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     click: (...args: any[]) => void;
     mouseenter: (...args: any[]) => void;
@@ -88,6 +108,7 @@ declare const __VLS_self: import("vue").DefineComponent<__VLS_Props, {
     color: keyof typeof colors | string;
     disabled: boolean;
     as: string;
+    tooltip: string | null;
     loading: boolean;
     iconPosition: "start" | "end";
     sizeBehavior: SizeBehavior;
@@ -115,6 +136,7 @@ declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, {
     color: keyof typeof colors | string;
     disabled: boolean;
     as: string;
+    tooltip: string | null;
     loading: boolean;
     iconPosition: "start" | "end";
     sizeBehavior: SizeBehavior;

package/package.json

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

package/src/components/BaseButton.stories.js

@@ -118,3 +118,9 @@ Icon.args = {
   icon: "mdi:plus",
   color: "primary",
 };
+
+export const Tooltip = Template.bind({});
+Tooltip.args = {
+  color: "primary",
+  tooltip: "This is a tooltip",
+};

package/src/components/BaseButton.vue

@@ -45,6 +45,36 @@
       </svg>
     </div>
   </component>
+
+  <Teleport
+    v-if="tooltip"
+    to="body"
+  >
+    <div
+      ref="tooltipRef"
+      class="fixed top-0 left-0 z-tooltip pointer-events-none"
+      :style="floatingStyles"
+    >
+      <transition
+        enter-active-class="transition duration-200 ease-out"
+        enter-from-class="transform scale-90 opacity-0"
+        enter-to-class="transform scale-100 opacity-100"
+        leave-active-class="transition duration-75 ease-in"
+        leave-from-class="transform scale-100 opacity-100"
+        leave-to-class="transform scale-90 opacity-0"
+      >
+        <slot
+          v-if="showTooltip"
+          name="tooltip"
+        >
+          <div
+            class="text-xs max-w-xs leading-snug rounded-md pt-1.5 pb-2 px-3 bg-slate-900 text-white"
+            v-html="tooltip"
+          />
+        </slot>
+      </transition>
+    </div>
+  </Teleport>
 </template>
 
 <script lang="ts" setup>
@@ -56,6 +86,7 @@ import { isSlotEmpty } from '@/utils/slots';
 import { Size, sizes } from '@/utils/sizes';
 import { SizeBehavior } from '@/utils/sizeBehaviors';
 import { useInputSize } from '@/composables/inputSize';
+import { useTooltip } from '@/composables/tooltip';
 
 defineOptions({
   inheritAttrs: false,
@@ -98,6 +129,7 @@ const props = withDefaults(defineProps<{
   align?: 'center' | 'between';
   color?: keyof typeof colors | string;
   to?: RouteLocationRaw;
+  tooltip?: string | null | undefined;
 }>(), {
   as: 'button',
   disabled: false,
@@ -112,6 +144,7 @@ const props = withDefaults(defineProps<{
   color: '',
   align: 'center',
   to: undefined,
+  tooltip: undefined,
 });
 
 defineEmits(['click', 'mouseover', 'mouseleave', 'mouseenter']);
@@ -235,6 +268,10 @@ function focus() {
   }
 }
 
+const tooltipRef = ref<HTMLElement | undefined>(undefined);
+
+const { floatingStyles, showTooltip } = useTooltip(buttonRef, tooltipRef, true, 0, {}, 2);
+
 defineExpose({
   focus,
 });

package/src/components/BaseDataTableRowAction.vue

@@ -5,6 +5,7 @@
     :loading="loading"
     :size="sizeInternal"
     :icon="rowAction.icon"
+    :tooltip="rowAction.label"
     :disabled="rowAction.disabled && rowAction.disabled(row)"
     @click="completeAction()"
   />
@@ -14,6 +15,7 @@
     :href="rowAction.href(row)"
     :size="sizeInternal"
     :icon="rowAction.icon"
+    :tooltip="rowAction.label"
     :disabled="rowAction.disabled && rowAction.disabled(row)"
   />
   <BaseButton
@@ -22,6 +24,7 @@
     :to="rowAction.to(row)"
     :size="sizeInternal"
     :icon="rowAction.icon"
+    :tooltip="rowAction.label"
     :disabled="rowAction.disabled && rowAction.disabled(row)"
   />
 </template>