pukaad-ui-lib 1.15.1 → 1.16.0

package/dist/module.json

@@ -1,7 +1,7 @@
 {
   "name": "pukaad-ui-lib",
   "configKey": "pukaadUI",
-  "version": "1.15.1",
+  "version": "1.16.0",
   "builder": {
     "@nuxt/module-builder": "1.0.2",
     "unbuild": "3.6.1"

package/dist/runtime/components/input/input-autocomplete.d.vue.ts

@@ -36,8 +36,8 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {
     id: string;
     name: string;
     description: string;
-    options: AutocompleteOption[] | string[] | number[];
     placeholder: string;
+    options: AutocompleteOption[] | string[] | number[];
     limit: number;
     disabledErrorMessage: boolean;
     disabledBorder: boolean;

package/dist/runtime/components/input/input-autocomplete.vue.d.ts

@@ -36,8 +36,8 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {
     id: string;
     name: string;
     description: string;
-    options: AutocompleteOption[] | string[] | number[];
     placeholder: string;
+    options: AutocompleteOption[] | string[] | number[];
     limit: number;
     disabledErrorMessage: boolean;
     disabledBorder: boolean;

package/dist/runtime/components/tooltip.d.vue.ts

@@ -1,14 +1,17 @@
-import type { TooltipProps } from "@/types/components/tooltip";
-declare var __VLS_1: {}, __VLS_8: {};
+export interface TooltipProps {
+    text?: string;
+    delay?: number;
+    position?: "top" | "bottom" | "left" | "right";
+}
+declare var __VLS_17: {}, __VLS_24: {};
 type __VLS_Slots = {} & {
-    default?: (props: typeof __VLS_1) => any;
+    default?: (props: typeof __VLS_17) => any;
 } & {
-    text?: (props: typeof __VLS_8) => any;
+    text?: (props: typeof __VLS_24) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<TooltipProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<TooltipProps> & Readonly<{}>, {
     delay: number;
-    position: import("@/types/components/tooltip").TooltipPosition;
-    arrow: boolean;
+    position: "top" | "bottom" | "left" | "right";
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;

package/dist/runtime/components/tooltip.vue

@@ -1,63 +1,22 @@
 <template>
-  <div
-    class="relative inline-block"
-    @mouseenter="onMouseEnter"
-    @mouseleave="onMouseLeave"
-  >
-    <slot name="default" />
-    <transition name="fade">
-      <div
-        v-if="isShowTooltip"
-        :class="['tooltip', positionClass, { 'has-arrow': props.arrow }]"
-      >
-        <slot v-if="$slots.text || props.text" name="text">
-          <div class="font-body-small">
-            {{ props.text }}
-          </div>
+  <ShadTooltipProvider :delay-duration="props.delay">
+    <ShadTooltip>
+      <ShadTooltipTrigger as-child>
+        <slot />
+      </ShadTooltipTrigger>
+      <ShadTooltipContent :side="props.position">
+        <slot name="text">
+          <p>{{ props.text }}</p>
         </slot>
-      </div>
-    </transition>
-  </div>
+      </ShadTooltipContent>
+    </ShadTooltip>
+  </ShadTooltipProvider>
 </template>
 
 <script setup>
-import { ref, computed } from "vue";
 const props = defineProps({
+  text: { type: String, required: false },
   delay: { type: Number, required: false, default: 500 },
-  position: { type: String, required: false, default: "top" },
-  arrow: { type: Boolean, required: false, default: false },
-  text: { type: String, required: false }
+  position: { type: String, required: false, default: "top" }
 });
-const isShowTooltip = ref(false);
-let timer = null;
-const positionClass = computed(() => {
-  switch (props.position) {
-    case "bottom":
-      return "tooltip-bottom";
-    case "left":
-      return "tooltip-left";
-    case "right":
-      return "tooltip-right";
-    default:
-      return "tooltip-top";
-  }
-});
-const onMouseEnter = () => {
-  if (timer) clearTimeout(timer);
-  timer = setTimeout(() => {
-    isShowTooltip.value = true;
-    timer = null;
-  }, props.delay);
-};
-const onMouseLeave = () => {
-  if (timer) {
-    clearTimeout(timer);
-    timer = null;
-  }
-  isShowTooltip.value = false;
-};
 </script>
-
-<style scoped>
-.tooltip{background-color:#fff;border-radius:4px;box-shadow:0 2px 6px rgba(0,0,0,.2);color:#000;font-size:14px;padding:6px 10px;position:absolute;white-space:nowrap;z-index:10}.tooltip-top{bottom:100%;left:50%;margin-bottom:8px;transform:translateX(-50%)}.tooltip-top.has-arrow:after{border:6px solid transparent;border-top-color:#fff;content:"";left:50%;position:absolute;top:100%;transform:translateX(-50%)}.tooltip-bottom{left:50%;margin-top:8px;top:100%;transform:translateX(-50%)}.tooltip-bottom.has-arrow:after{border:6px solid transparent;border-bottom-color:#fff;bottom:100%;content:"";left:50%;position:absolute;transform:translateX(-50%)}.tooltip-left{margin-right:8px;right:100%;top:50%;transform:translateY(-50%)}.tooltip-left.has-arrow:after{border:6px solid transparent;border-left-color:#fff;content:"";left:100%;position:absolute;top:50%;transform:translateY(-50%)}.tooltip-right{left:100%;margin-left:8px;top:50%;transform:translateY(-50%)}.tooltip-right.has-arrow:after{border:6px solid transparent;border-right-color:#fff;content:"";position:absolute;right:100%;top:50%;transform:translateY(-50%)}.fade-enter-active,.fade-leave-active{transition:opacity .2s ease}.fade-enter-from,.fade-leave-to{opacity:0}
-</style>

package/dist/runtime/components/tooltip.vue.d.ts

@@ -1,14 +1,17 @@
-import type { TooltipProps } from "@/types/components/tooltip";
-declare var __VLS_1: {}, __VLS_8: {};
+export interface TooltipProps {
+    text?: string;
+    delay?: number;
+    position?: "top" | "bottom" | "left" | "right";
+}
+declare var __VLS_17: {}, __VLS_24: {};
 type __VLS_Slots = {} & {
-    default?: (props: typeof __VLS_1) => any;
+    default?: (props: typeof __VLS_17) => any;
 } & {
-    text?: (props: typeof __VLS_8) => any;
+    text?: (props: typeof __VLS_24) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<TooltipProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<TooltipProps> & Readonly<{}>, {
     delay: number;
-    position: import("@/types/components/tooltip").TooltipPosition;
-    arrow: boolean;
+    position: "top" | "bottom" | "left" | "right";
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;

package/dist/runtime/components/ui/tooltip/Tooltip.vue

@@ -14,11 +14,11 @@ const forwarded = useForwardPropsEmits(props, emits);
 </script>
 
 <template>
-  <TooltipRoot
-    v-slot="slotProps"
-    data-slot="tooltip"
-    v-bind="forwarded"
-  >
-    <slot v-bind="slotProps" />
-  </TooltipRoot>
+  <TooltipRoot
+    v-slot="slotProps"
+    data-slot="tooltip"
+    v-bind="forwarded"
+  >
+    <slot v-bind="slotProps" />
+  </TooltipRoot>
 </template>

package/dist/runtime/components/ui/tooltip/TooltipContent.vue

@@ -1,6 +1,11 @@
 <script setup>
 import { reactiveOmit } from "@vueuse/core";
-import { TooltipArrow, TooltipContent, TooltipPortal, useForwardPropsEmits } from "reka-ui";
+import {
+  TooltipArrow,
+  TooltipContent,
+  TooltipPortal,
+  useForwardPropsEmits
+} from "reka-ui";
 import { cn } from "@/runtime/plugins/shadcn";
 defineOptions({
   inheritAttrs: false
@@ -30,15 +35,22 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits);
 </script>
 
 <template>
-  <TooltipPortal>
-    <TooltipContent
-      data-slot="tooltip-content"
-      v-bind="{ ...forwarded, ...$attrs }"
-      :class="cn('bg-foreground text-background animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-fit rounded-md px-3 py-1.5 text-xs text-balance', props.class)"
-    >
-      <slot />
-
-      <TooltipArrow class="bg-foreground fill-foreground z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px]" />
-    </TooltipContent>
-  </TooltipPortal>
+  <TooltipPortal>
+    <TooltipContent
+      data-slot="tooltip-content"
+      v-bind="{ ...forwarded, ...$attrs }"
+      :class="
+  cn(
+    'bg-white text-black animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-fit rounded-md px-3 py-1.5 text-body-medium border border-silver shadow-md',
+    props.class
+  )
+"
+    >
+      <slot />
+
+      <TooltipArrow
+        class="bg-white fill-white z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px] border-b border-silver shadow-md"
+      />
+    </TooltipContent>
+  </TooltipPortal>
 </template>

package/dist/runtime/components/ui/tooltip/TooltipProvider.vue

@@ -11,7 +11,7 @@ const props = defineProps({
 </script>
 
 <template>
-  <TooltipProvider v-bind="props">
-    <slot />
-  </TooltipProvider>
+  <TooltipProvider v-bind="props">
+    <slot />
+  </TooltipProvider>
 </template>

package/dist/runtime/components/ui/tooltip/TooltipTrigger.vue

@@ -8,10 +8,10 @@ const props = defineProps({
 </script>
 
 <template>
-  <TooltipTrigger
-    data-slot="tooltip-trigger"
-    v-bind="props"
-  >
-    <slot />
-  </TooltipTrigger>
+  <TooltipTrigger
+    data-slot="tooltip-trigger"
+    v-bind="props"
+  >
+    <slot />
+  </TooltipTrigger>
 </template>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pukaad-ui-lib",
-  "version": "1.15.1",
+  "version": "1.16.0",
   "description": "pukaad-ui for MeMSG",
   "repository": {
     "type": "git",