@indielayer/ui 1.15.1 → 1.15.2

package/lib/theme.d.ts

@@ -1,5 +1,5 @@
 import type { ColorLibrary } from './composables/useColors';
-import type { AccordionTheme, AccordionItemTheme, AlertTheme, AvatarTheme, BadgeTheme, BreadcrumbsTheme, ButtonTheme, ButtonGroupTheme, CardTheme, CarouselTheme, CarouselSlideTheme, CheckboxTheme, ContainerTheme, DatepickerTheme, DividerTheme, DrawerTheme, FormTheme, FormGroupTheme, IconTheme, ImageTheme, InputTheme, InputFooterTheme, LabelTheme, LinkTheme, LoaderTheme, MenuTheme, MenuItemTheme, ModalTheme, NotificationsTheme, PaginationTheme, PaginationItemTheme, PopoverTheme, PopoverContainerTheme, ProgressTheme, QrCodeTheme, RadioTheme, ScrollTheme, SelectTheme, SkeletonTheme, SliderTheme, StepperTheme, TabTheme, TabGroupTheme, TableTheme, TableCellTheme, TableHeadTheme, TableHeaderTheme, TableRowTheme, TagTheme, TextareaTheme, ToggleTheme, UploadTheme } from './components';
+import type { AccordionTheme, AccordionItemTheme, AlertTheme, AvatarTheme, BadgeTheme, BreadcrumbsTheme, ButtonTheme, ButtonGroupTheme, CardTheme, CarouselTheme, CarouselSlideTheme, CheckboxTheme, ContainerTheme, DatepickerTheme, DividerTheme, DrawerTheme, FormTheme, FormGroupTheme, IconTheme, ImageTheme, InputTheme, InputFooterTheme, LabelTheme, LinkTheme, LoaderTheme, MenuTheme, MenuItemTheme, ModalTheme, NotificationsTheme, PaginationTheme, PaginationItemTheme, PopoverTheme, PopoverContainerTheme, ProgressTheme, QrCodeTheme, RadioTheme, ScrollTheme, SelectTheme, SkeletonTheme, SliderTheme, StepperTheme, TabTheme, TabGroupTheme, TableTheme, TableCellTheme, TableHeadTheme, TableHeaderTheme, TableRowTheme, TagTheme, TextareaTheme, ToggleTheme, TooltipTheme, UploadTheme } from './components';
 export type ComponentThemes = {
     Accordion: AccordionTheme;
     AccordionItem: AccordionItemTheme;
@@ -52,6 +52,7 @@ export type ComponentThemes = {
     Tag: TagTheme;
     Textarea: TextareaTheme;
     Toggle: ToggleTheme;
+    Tooltip: TooltipTheme;
     Upload: UploadTheme;
 };
 export type UITheme = {

package/lib/themes/base/components.d.ts

@@ -49,4 +49,5 @@ export { default as TableRow } from '../../components/table/theme/TableRow.base.
 export { default as Tag } from '../../components/tag/theme/Tag.base.theme';
 export { default as Textarea } from '../../components/textarea/theme/Textarea.base.theme';
 export { default as Toggle } from '../../components/toggle/theme/Toggle.base.theme';
+export { default as Tooltip } from '../../components/tooltip/theme/Tooltip.base.theme';
 export { default as Upload } from '../../components/upload/theme/Upload.base.theme';

package/lib/themes/base/components.js

@@ -1,11 +1,11 @@
 import { default as a } from "../../components/accordion/theme/Accordion.base.theme.js";
 import { default as t } from "../../components/accordion/theme/AccordionItem.base.theme.js";
 import { default as l } from "../../components/alert/theme/Alert.base.theme.js";
-import { default as u } from "../../components/avatar/theme/Avatar.base.theme.js";
+import { default as p } from "../../components/avatar/theme/Avatar.base.theme.js";
 import { default as m } from "../../components/badge/theme/Badge.base.theme.js";
 import { default as x } from "../../components/breadcrumbs/theme/Breadcrumbs.base.theme.js";
 import { default as i } from "../../components/button/theme/Button.base.theme.js";
-import { default as b } from "../../components/button/theme/ButtonGroup.base.theme.js";
+import { default as T } from "../../components/button/theme/ButtonGroup.base.theme.js";
 import { default as g } from "../../components/card/theme/Card.base.theme.js";
 import { default as I } from "../../components/carousel/theme/Carousel.base.theme.js";
 import { default as P } from "../../components/carousel/theme/CarouselSlide.base.theme.js";
@@ -28,11 +28,11 @@ import { default as ee } from "../../components/menu/theme/MenuItem.base.theme.j
 import { default as ae } from "../../components/modal/theme/Modal.base.theme.js";
 import { default as te } from "../../components/notifications/theme/Notifications.base.theme.js";
 import { default as le } from "../../components/pagination/theme/Pagination.base.theme.js";
-import { default as ue } from "../../components/pagination/theme/PaginationItem.base.theme.js";
+import { default as pe } from "../../components/pagination/theme/PaginationItem.base.theme.js";
 import { default as me } from "../../components/popover/theme/Popover.base.theme.js";
 import { default as xe } from "../../components/popover/theme/PopoverContainer.base.theme.js";
 import { default as ie } from "../../components/progress/theme/Progress.base.theme.js";
-import { default as be } from "../../components/qrCode/theme/QrCode.base.theme.js";
+import { default as Te } from "../../components/qrCode/theme/QrCode.base.theme.js";
 import { default as ge } from "../../components/radio/theme/Radio.base.theme.js";
 import { default as Ie } from "../../components/scroll/theme/Scroll.base.theme.js";
 import { default as Pe } from "../../components/select/theme/Select.base.theme.js";
@@ -49,16 +49,17 @@ import { default as ze } from "../../components/table/theme/TableRow.base.theme.
 import { default as Je } from "../../components/tag/theme/Tag.base.theme.js";
 import { default as Oe } from "../../components/textarea/theme/Textarea.base.theme.js";
 import { default as We } from "../../components/toggle/theme/Toggle.base.theme.js";
-import { default as Ye } from "../../components/upload/theme/Upload.base.theme.js";
+import { default as Ye } from "../../components/tooltip/theme/Tooltip.base.theme.js";
+import { default as _e } from "../../components/upload/theme/Upload.base.theme.js";
 export {
   a as Accordion,
   t as AccordionItem,
   l as Alert,
-  u as Avatar,
+  p as Avatar,
   m as Badge,
   x as Breadcrumbs,
   i as Button,
-  b as ButtonGroup,
+  T as ButtonGroup,
   g as Card,
   I as Carousel,
   P as CarouselSlide,
@@ -81,11 +82,11 @@ export {
   ae as Modal,
   te as Notifications,
   le as Pagination,
-  ue as PaginationItem,
+  pe as PaginationItem,
   me as Popover,
   xe as PopoverContainer,
   ie as Progress,
-  be as QrCode,
+  Te as QrCode,
   ge as Radio,
   Ie as Scroll,
   Pe as Select,
@@ -102,5 +103,6 @@ export {
   Je as Tag,
   Oe as Textarea,
   We as Toggle,
-  Ye as Upload
+  Ye as Tooltip,
+  _e as Upload
 };

package/lib/themes/carbon/components.d.ts

@@ -49,4 +49,5 @@ export { default as TableRow } from '../../components/table/theme/TableRow.carbo
 export { default as Tag } from '../../components/tag/theme/Tag.carbon.theme';
 export { default as Textarea } from '../../components/textarea/theme/Textarea.carbon.theme';
 export { default as Toggle } from '../../components/toggle/theme/Toggle.carbon.theme';
+export { default as Tooltip } from '../../components/tooltip/theme/Tooltip.carbon.theme';
 export { default as Upload } from '../../components/upload/theme/Upload.carbon.theme';

package/lib/themes/carbon/components.js

@@ -1,11 +1,11 @@
 import { default as a } from "../../components/accordion/theme/Accordion.carbon.theme.js";
 import { default as t } from "../../components/accordion/theme/AccordionItem.carbon.theme.js";
 import { default as l } from "../../components/alert/theme/Alert.carbon.theme.js";
-import { default as u } from "../../components/avatar/theme/Avatar.carbon.theme.js";
+import { default as p } from "../../components/avatar/theme/Avatar.carbon.theme.js";
 import { default as m } from "../../components/badge/theme/Badge.carbon.theme.js";
 import { default as x } from "../../components/breadcrumbs/theme/Breadcrumbs.carbon.theme.js";
 import { default as i } from "../../components/button/theme/Button.carbon.theme.js";
-import { default as b } from "../../components/button/theme/ButtonGroup.carbon.theme.js";
+import { default as T } from "../../components/button/theme/ButtonGroup.carbon.theme.js";
 import { default as g } from "../../components/card/theme/Card.carbon.theme.js";
 import { default as I } from "../../components/carousel/theme/Carousel.carbon.theme.js";
 import { default as P } from "../../components/carousel/theme/CarouselSlide.carbon.theme.js";
@@ -28,11 +28,11 @@ import { default as ee } from "../../components/menu/theme/MenuItem.carbon.theme
 import { default as ae } from "../../components/modal/theme/Modal.carbon.theme.js";
 import { default as te } from "../../components/notifications/theme/Notifications.carbon.theme.js";
 import { default as le } from "../../components/pagination/theme/Pagination.carbon.theme.js";
-import { default as ue } from "../../components/pagination/theme/PaginationItem.carbon.theme.js";
+import { default as pe } from "../../components/pagination/theme/PaginationItem.carbon.theme.js";
 import { default as me } from "../../components/popover/theme/Popover.carbon.theme.js";
 import { default as xe } from "../../components/popover/theme/PopoverContainer.carbon.theme.js";
 import { default as ie } from "../../components/progress/theme/Progress.carbon.theme.js";
-import { default as be } from "../../components/qrCode/theme/QrCode.carbon.theme.js";
+import { default as Te } from "../../components/qrCode/theme/QrCode.carbon.theme.js";
 import { default as ge } from "../../components/radio/theme/Radio.carbon.theme.js";
 import { default as Ie } from "../../components/scroll/theme/Scroll.carbon.theme.js";
 import { default as Pe } from "../../components/select/theme/Select.carbon.theme.js";
@@ -49,16 +49,17 @@ import { default as ze } from "../../components/table/theme/TableRow.carbon.them
 import { default as Je } from "../../components/tag/theme/Tag.carbon.theme.js";
 import { default as Oe } from "../../components/textarea/theme/Textarea.carbon.theme.js";
 import { default as We } from "../../components/toggle/theme/Toggle.carbon.theme.js";
-import { default as Ye } from "../../components/upload/theme/Upload.carbon.theme.js";
+import { default as Ye } from "../../components/tooltip/theme/Tooltip.carbon.theme.js";
+import { default as _e } from "../../components/upload/theme/Upload.carbon.theme.js";
 export {
   a as Accordion,
   t as AccordionItem,
   l as Alert,
-  u as Avatar,
+  p as Avatar,
   m as Badge,
   x as Breadcrumbs,
   i as Button,
-  b as ButtonGroup,
+  T as ButtonGroup,
   g as Card,
   I as Carousel,
   P as CarouselSlide,
@@ -81,11 +82,11 @@ export {
   ae as Modal,
   te as Notifications,
   le as Pagination,
-  ue as PaginationItem,
+  pe as PaginationItem,
   me as Popover,
   xe as PopoverContainer,
   ie as Progress,
-  be as QrCode,
+  Te as QrCode,
   ge as Radio,
   Ie as Scroll,
   Pe as Select,
@@ -102,5 +103,6 @@ export {
   Je as Tag,
   Oe as Textarea,
   We as Toggle,
-  Ye as Upload
+  Ye as Tooltip,
+  _e as Upload
 };

package/lib/version.d.ts

@@ -1,2 +1,2 @@
-declare const _default: "1.15.1";
+declare const _default: "1.15.2";
 export default _default;

package/lib/version.js

@@ -1,4 +1,4 @@
-const e = "1.15.1";
+const e = "1.15.2";
 export {
   e as default
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@indielayer/ui",
-  "version": "1.15.1",
+  "version": "1.15.2",
   "description": "Indielayer UI Components with Tailwind CSS build for Vue 3",
   "author": {
     "name": "João Teixeira",
@@ -68,7 +68,7 @@
     "jsdom": "^22.1.0",
     "postcss": "^8.4.4",
     "rollup-plugin-visualizer": "^5.9.2",
-    "shiki": "1.0.0-beta.1",
+    "shiki": "^3.15.0",
     "stylelint": "^14.16.1",
     "tailwindcss": "^3.3.2",
     "typescript": "^5.2.2",

package/src/components/tooltip/ToggleTip.vue

@@ -22,7 +22,7 @@ const computedIcon = computed(() => props.icon || infoIcon)
 </script>
 
 <template>
-  <x-tooltip placement="auto">
+  <x-tooltip position="right">
     <x-icon :icon="computedIcon" class="text-secondary-500 dark:text-secondary-300 cursor-pointer" />
     <template #tooltip>
       <div v-html="content"></div>

package/src/components/tooltip/Tooltip.vue

@@ -1,37 +1,207 @@
 <script lang="ts">
 const tooltipProps = {
+  tag: {
+    type: String,
+    default: 'div',
+  },
   tooltip: String,
-  placement: {
-    type: String as PropType<PopoverPlacement>,
+  disabled: Boolean,
+  position: {
+    type: String as PropType<TooltipPosition>,
     default: 'bottom',
   },
 }
 
-export type PopoverPlacement = Placement
+export type TooltipPosition = 'top' | 'bottom' | 'left' | 'right'
 
 export type TooltipProps = ExtractPublicPropTypes<typeof tooltipProps>
 
+type InternalClasses = 'tooltip'
+export interface TooltipTheme extends ThemeComponent<TooltipProps, InternalClasses> {}
+
 export default { name: 'XTooltip' }
 </script>
 
 <script setup lang="ts">
+import { computed, ref, useSlots } from 'vue'
 import type { ExtractPublicPropTypes, PropType } from 'vue'
-import XPopover from '../../components/popover/Popover.vue'
-import XPopoverContainer from '../../components/popover/PopoverContainer.vue'
-import { type Placement } from 'floating-vue'
+import { useTheme, type ThemeComponent } from '../../composables/useTheme'
+
+const props = defineProps(tooltipProps)
+
+const triggerRef = ref<HTMLElement | null>(null)
+const tooltipRef = ref<HTMLElement | null>(null)
+const isVisible = ref(false)
+const tooltipStyle = ref<Record<string, string>>({})
+const actualPosition = ref<TooltipPosition>(props.position)
+
+const slots = useSlots()
+const hasTooltip = computed(() => props.tooltip || slots.tooltip)
+
+const computedDisabled = computed(() => props.disabled || !hasTooltip.value)
+
+const arrowPositionClasses = computed(() => {
+  const placements = {
+    top: '-bottom-2.5 left-1/2 -translate-x-1/2 w-3.5',
+    bottom: '-top-2.5 left-1/2 -translate-x-1/2 w-3.5',
+    left: '-right-2.5 top-1/2 -translate-y-1/2 h-3.5',
+    right: '-left-2.5 top-1/2 -translate-y-1/2 h-3.5',
+  }
+
+  return placements[actualPosition.value]
+})
+
+const arrowRotationClasses = computed(() => {
+  const placements = {
+    top: '-rotate-45 origin-top-left',
+    bottom: 'rotate-45 origin-bottom-left',
+    left: 'rotate-45 origin-top-left',
+    right: '-rotate-45 origin-top-right',
+  }
+
+  return placements[actualPosition.value]
+})
+
+const animationOriginClasses = computed(() => {
+  const origins = {
+    top: 'origin-bottom',
+    bottom: 'origin-top',
+    left: 'origin-right',
+    right: 'origin-left',
+  }
+
+  return origins[actualPosition.value]
+})
+
+const calculatePosition = () => {
+  if (!triggerRef.value || !tooltipRef.value) return
 
-defineProps(tooltipProps)
+  const triggerRect = triggerRef.value.getBoundingClientRect()
+  const tooltipRect = tooltipRef.value.getBoundingClientRect()
+  const spacing = 8 // 0.5rem = 8px
+  const viewportWidth = window.innerWidth
+  const viewportHeight = window.innerHeight
+
+  let position = props.position
+  let top = 0
+  let left = 0
+
+  // Calculate initial position based on placement
+  switch (position) {
+    case 'top':
+      top = triggerRect.top - tooltipRect.height - spacing
+      left = triggerRect.left + triggerRect.width / 2 - tooltipRect.width / 2
+      // Check if tooltip goes off-screen top
+      if (top < 0) {
+        position = 'bottom'
+        top = triggerRect.bottom + spacing
+      }
+      break
+    case 'bottom':
+      top = triggerRect.bottom + spacing
+      left = triggerRect.left + triggerRect.width / 2 - tooltipRect.width / 2
+      // Check if tooltip goes off-screen bottom
+      if (top + tooltipRect.height > viewportHeight) {
+        position = 'top'
+        top = triggerRect.top - tooltipRect.height - spacing
+      }
+      break
+    case 'left':
+      top = triggerRect.top + triggerRect.height / 2 - tooltipRect.height / 2
+      left = triggerRect.left - tooltipRect.width - spacing
+      // Check if tooltip goes off-screen left
+      if (left < 0) {
+        position = 'right'
+        left = triggerRect.right + spacing
+      }
+      break
+    case 'right':
+      top = triggerRect.top + triggerRect.height / 2 - tooltipRect.height / 2
+      left = triggerRect.right + spacing
+      // Check if tooltip goes off-screen right
+      if (left + tooltipRect.width > viewportWidth) {
+        position = 'left'
+        left = triggerRect.left - tooltipRect.width - spacing
+      }
+      break
+  }
+
+  // Adjust horizontal position to stay within viewport
+  if (position === 'top' || position === 'bottom') {
+    if (left < 0) left = spacing
+    if (left + tooltipRect.width > viewportWidth) {
+      left = viewportWidth - tooltipRect.width - spacing
+    }
+  }
+
+  // Adjust vertical position to stay within viewport
+  if (position === 'left' || position === 'right') {
+    if (top < 0) top = spacing
+    if (top + tooltipRect.height > viewportHeight) {
+      top = viewportHeight - tooltipRect.height - spacing
+    }
+  }
+
+  actualPosition.value = position
+  tooltipStyle.value = {
+    top: `${top}px`,
+    left: `${left}px`,
+  }
+}
+
+const showTooltip = () => {
+  if (computedDisabled.value) return
+  isVisible.value = true
+  setTimeout(calculatePosition, 0)
+}
+
+const hideTooltip = () => {
+  if (computedDisabled.value) return
+  isVisible.value = false
+}
+
+const { classes, className } = useTheme('Tooltip', {}, props)
 </script>
 
 <template>
-  <x-popover :triggers="['hover', 'click']" class="inline-block" :hide-arrow="false" :placement="placement">
+  <component
+    :is="tag"
+    ref="triggerRef"
+    :class="[
+      className,
+      {
+        'inline-block': !$attrs.class,
+      }]"
+    @mouseenter="showTooltip"
+    @mouseleave="hideTooltip"
+  >
     <slot></slot>
-    <template #content>
-      <div class="dark">
-        <x-popover-container class="p-2 text-white text-xs w-max max-w-xs">
-          <slot name="tooltip">{{ tooltip }}</slot>
-        </x-popover-container>
+  </component>
+
+  <teleport v-if="!computedDisabled" to="body">
+    <transition
+      enter-active-class="transition-opacity duration-150 ease-out"
+      leave-active-class="transition-opacity duration-150 ease-in"
+      enter-from-class="opacity-0"
+      enter-to-class="opacity-100"
+      leave-from-class="opacity-100"
+      leave-to-class="opacity-0"
+    >
+      <div
+        v-if="isVisible"
+        ref="tooltipRef"
+        :style="tooltipStyle"
+        class="fixed z-[9999] pointer-events-none"
+        :class="[
+          classes.tooltip,
+          animationOriginClasses
+        ]"
+      >
+        <slot name="tooltip">{{ tooltip }}</slot>
+        <div :class="['absolute overflow-hidden shadow-lg z-10', arrowPositionClasses]">
+          <div :class="['h-2.5 w-2.5 bg-secondary-700 transform border border-secondary-800', arrowRotationClasses]"></div>
+        </div>
       </div>
-    </template>
-  </x-popover>
+    </transition>
+  </teleport>
 </template>

package/src/components/tooltip/index.ts

@@ -1,5 +1,5 @@
 export { default as XTooltip } from './Tooltip.vue'
-export type { TooltipProps } from './Tooltip.vue'
+export type { TooltipProps, TooltipTheme } from './Tooltip.vue'
 
 export { default as XToggleTip } from './ToggleTip.vue'
 export type { ToggleTipProps } from './ToggleTip.vue'

package/src/components/tooltip/theme/Tooltip.base.theme.ts

@@ -0,0 +1,9 @@
+import type { TooltipTheme } from '../Tooltip.vue'
+
+const theme: TooltipTheme = {
+  classes: {
+    tooltip: 'bg-secondary-700 shadow-lg rounded-md border border-secondary-800 p-2 text-white text-xs w-max max-w-sm',
+  },
+}
+
+export default theme

package/src/components/tooltip/theme/Tooltip.carbon.theme.ts

@@ -0,0 +1,7 @@
+import type { TooltipTheme } from '../Tooltip.vue'
+
+import BaseTheme from './Tooltip.base.theme'
+
+const theme: TooltipTheme = BaseTheme
+
+export default theme

package/src/theme.ts

@@ -51,6 +51,7 @@ import type {
   TagTheme,
   TextareaTheme,
   ToggleTheme,
+  TooltipTheme,
   UploadTheme,
 } from './components'
 
@@ -106,6 +107,7 @@ export type ComponentThemes = {
   Tag: TagTheme;
   Textarea: TextareaTheme;
   Toggle: ToggleTheme;
+  Tooltip: TooltipTheme;
   Upload: UploadTheme;
 }
 

package/src/themes/base/components.ts

@@ -49,4 +49,5 @@ export { default as TableRow } from '../../components/table/theme/TableRow.base.
 export { default as Tag } from '../../components/tag/theme/Tag.base.theme'
 export { default as Textarea } from '../../components/textarea/theme/Textarea.base.theme'
 export { default as Toggle } from '../../components/toggle/theme/Toggle.base.theme'
+export { default as Tooltip } from '../../components/tooltip/theme/Tooltip.base.theme'
 export { default as Upload } from '../../components/upload/theme/Upload.base.theme'

package/src/themes/carbon/components.ts

@@ -49,4 +49,5 @@ export { default as TableRow } from '../../components/table/theme/TableRow.carbo
 export { default as Tag } from '../../components/tag/theme/Tag.carbon.theme'
 export { default as Textarea } from '../../components/textarea/theme/Textarea.carbon.theme'
 export { default as Toggle } from '../../components/toggle/theme/Toggle.carbon.theme'
+export { default as Tooltip } from '../../components/tooltip/theme/Tooltip.carbon.theme'
 export { default as Upload } from '../../components/upload/theme/Upload.carbon.theme'

package/src/version.ts

@@ -1 +1 @@
-export default '1.15.1'
+export default '1.15.2'