sprintify-ui 0.11.22 → 0.11.24

package/dist/sprintify-ui.es.js

@@ -7444,9 +7444,9 @@ function Vu(n, t, e = !1, r = 0, o = void 0, i = 6) {
   Tl(l, "mouseenter", () => {
     u = !0, c();
   }), Tl(l, "mouseleave", () => {
-    u = !1, d();
+    u = !1, e ? d() : s.value = !1;
   }), Tl(a, "mouseenter", () => {
-    e && (u = !0, c());
+    e && (u = !0, e ? c() : s.value = !0);
   }), Tl(a, "mouseleave", () => {
     e && (u = !1, d());
   });
@@ -7454,7 +7454,7 @@ function Vu(n, t, e = !1, r = 0, o = void 0, i = 6) {
     u && (s.value = !0);
   }, r), d = sn(() => {
     u || (s.value = !1);
-  }, e ? 0 : 150), f = {
+  }, 0), f = {
     placement: "top",
     middleware: [hl(i), ml(), Rv()],
     whileElementsMounted: pl
@@ -7472,12 +7472,12 @@ const BC = ["innerHTML"], Ji = /* @__PURE__ */ te({
     text: { default: null },
     floatingOptions: { default() {
       return {
-        placement: "top-start"
+        placement: "top"
       };
     } },
     interactive: { type: Boolean, default: !1 },
     delay: { default: 0 },
-    dark: { type: Boolean, default: !1 },
+    dark: { type: Boolean, default: !0 },
     offset: { default: 6 }
   },
   setup(n) {
@@ -7499,10 +7499,10 @@ const BC = ["innerHTML"], Ji = /* @__PURE__ */ te({
             style: Fe(g(i))
           }, [
             ee(An, {
-              "enter-active-class": "transition duration-200 ease-out",
+              "enter-active-class": "transition duration-100 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-active-class": "transition duration-0 ease-in",
               "leave-from-class": "transform scale-100 opacity-100",
               "leave-to-class": "transform scale-90 opacity-0"
             }, {
@@ -22422,6 +22422,14 @@ const GA = /* @__PURE__ */ zu(YA), JA = { class: "text-xs text-slate-600" }, Y0
     focusOnMount: {
       default: !1,
       type: Boolean
+    },
+    optionColor: {
+      default: void 0,
+      type: Function
+    },
+    optionIcon: {
+      default: void 0,
+      type: Function
     }
   },
   emits: ["update:modelValue", "typing", "focus", "scrollBottom"],
@@ -22496,6 +22504,8 @@ const GA = /* @__PURE__ */ zu(YA), JA = { class: "text-xs text-slate-600" }, Y0
       max: n.max,
       filter: () => !0,
       "focus-on-mount": n.focusOnMount,
+      "option-color": n.optionColor,
+      "option-icon": n.optionIcon,
       onOpen: m,
       onTyping: h,
       onScrollBottom: g(v),
@@ -22516,7 +22526,7 @@ const GA = /* @__PURE__ */ zu(YA), JA = { class: "text-xs text-slate-600" }, Y0
         ])
       ]),
       _: 3
-    }, 8, ["loading", "loading-bottom", "model-value", "disabled", "placeholder", "options", "value-key", "label-key", "has-error", "max", "focus-on-mount", "onScrollBottom"]));
+    }, 8, ["loading", "loading-bottom", "model-value", "disabled", "placeholder", "options", "value-key", "label-key", "has-error", "max", "focus-on-mount", "option-color", "option-icon", "onScrollBottom"]));
   }
 }), oI = { class: "inline-block w-[320px] input-rounded bg-white shadow-2xl" }, iI = { class: "flex grow items-center" }, sI = { class: "shrink-0" }, lI = /* @__PURE__ */ te({
   __name: "BaseDropdownAutocomplete",

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

@@ -84,6 +84,14 @@ declare const __VLS_component: import("vue").DefineComponent<import("vue").Extra
         default: boolean;
         type: BooleanConstructor;
     };
+    optionColor: {
+        default: undefined;
+        type: PropType<(option: RawOption) => string>;
+    };
+    optionIcon: {
+        default: undefined;
+        type: PropType<(option: RawOption) => string>;
+    };
 }>, {
     focus: () => void | undefined;
     blur: () => void | undefined;
@@ -140,6 +148,14 @@ declare const __VLS_component: import("vue").DefineComponent<import("vue").Extra
         default: boolean;
         type: BooleanConstructor;
     };
+    optionColor: {
+        default: undefined;
+        type: PropType<(option: RawOption) => string>;
+    };
+    optionIcon: {
+        default: undefined;
+        type: PropType<(option: RawOption) => string>;
+    };
 }>> & Readonly<{
     onFocus?: ((...args: any[]) => any) | undefined;
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
@@ -151,6 +167,8 @@ declare const __VLS_component: import("vue").DefineComponent<import("vue").Extra
     disabled: boolean;
     hasError: boolean;
     max: number;
+    optionColor: (option: RawOption) => string;
+    optionIcon: (option: RawOption) => string;
     focusOnMount: boolean;
     queryKey: string;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sprintify-ui",
-  "version": "0.11.22",
+  "version": "0.11.24",
   "type": "module",
   "scripts": {
     "generate-llm-txt": "node scripts/generate-llm-txt.js",

package/src/components/BaseTagAutocompleteFetch.stories.js

@@ -47,6 +47,30 @@ const Template = (args) => {
 export const Demo = Template.bind({});
 Demo.args = {};
 
+export const OptionColor = Template.bind({});
+OptionColor.args = {};
+
+export const OptionIcon = Template.bind({});
+OptionIcon.args = {
+  optionColor: undefined,
+  optionIcon: (option) => {
+    if (option.type === "work") return "heroicons:briefcase";
+    if (option.type === "personal") return "heroicons:user";
+    if (option.type === "family") return "heroicons:home";
+    return "heroicons:tag";
+  },
+};
+
+export const OptionIconWithColor = Template.bind({});
+OptionIconWithColor.args = {
+  optionIcon: (option) => {
+    if (option.type === "work") return "heroicons:briefcase";
+    if (option.type === "personal") return "heroicons:user";
+    if (option.type === "family") return "heroicons:home";
+    return "heroicons:tag";
+  },
+};
+
 export const LabelFunction = Template.bind({});
 LabelFunction.args = {
   labelKey: (option) => {

package/src/components/BaseTagAutocompleteFetch.vue

@@ -13,6 +13,8 @@
     :max="max"
     :filter="() => true"
     :focus-on-mount="focusOnMount"
+    :option-color="optionColor"
+    :option-icon="optionIcon"
     @open="onOpen"
     @typing="onTyping"
     @scroll-bottom="scrollBottom"
@@ -116,6 +118,14 @@ const props = defineProps({
     default: false,
     type: Boolean,
   },
+  optionColor: {
+    default: undefined,
+    type: Function as PropType<(option: RawOption) => string>,
+  },
+  optionIcon: {
+    default: undefined,
+    type: Function as PropType<(option: RawOption) => string>,
+  },
 });
 
 defineEmits(['update:modelValue', 'typing', 'focus', 'scrollBottom']);

package/src/components/BaseTooltip.stories.js

@@ -5,9 +5,6 @@ import { BaseCardRow } from "."
 export default {
   title: "Components/BaseTooltip",
   component: BaseTooltip,
-  args: {
-    text: "Click here to learn more about this button",
-  },
 };
 
 const Template = (args) => ({
@@ -22,8 +19,16 @@ const Template = (args) => ({
   template: `
     <BaseCard>
         <BaseCardRow size=sm>
-        <BaseTooltip class="inline-block" title="test" v-bind="args">
-            <div>Hover me, the tooltip show appear outside the BaseCard</div>
+        <BaseTooltip class="inline-block" text="test 1" v-bind="args">
+            <div>TEST 1</div>
+        </BaseTooltip>
+
+        <BaseTooltip class="inline-block" text="test 2" v-bind="args">
+            <div>TEST 2</div>
+        </BaseTooltip>
+
+        <BaseTooltip class="inline-block" text="test 3" v-bind="args">
+            <div>TEST 3</div>
         </BaseTooltip>
         </BaseCardRow>
     </BaseCard>

package/src/components/BaseTooltip.vue

@@ -15,10 +15,10 @@
         :style="floatingStyles"
       >
         <transition
-          enter-active-class="transition duration-200 ease-out"
+          enter-active-class="transition duration-100 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-active-class="transition duration-0 ease-in"
           leave-from-class="transform scale-100 opacity-100"
           leave-to-class="transform scale-90 opacity-0"
         >
@@ -64,12 +64,12 @@ const props = withDefaults(defineProps<{
   text: null,
   floatingOptions() {
     return {
-      placement: 'top-start',
+      placement: 'top',
     };
   },
   interactive: false,
   delay: 0,
-  dark: false,
+  dark: true,
   offset: 6,
 });
 

package/src/composables/tooltip.ts

@@ -36,15 +36,26 @@ function useTooltip(
 
     useEventListener(elementRef, 'mouseleave', () => {
         nextShow = false;
-        hideDebounce();
+
+        if (interactive) {
+            hideDebounce();
+        } else {
+            show.value = false;
+        }
     });
 
     useEventListener(floatingRef, 'mouseenter', () => {
         if (!interactive) {
             return;
         }
+
         nextShow = true;
-        showDebounce();
+
+        if (interactive) {
+            showDebounce();
+        } else {
+            show.value = true;
+        }
     });
 
     useEventListener(floatingRef, 'mouseleave', () => {
@@ -67,7 +78,7 @@ function useTooltip(
             return;
         }
         show.value = false;
-    }, interactive ? 0 : 150);
+    }, 0);
 
     const config = {
         placement: 'top',