@indielayer/ui 1.15.2 → 1.16.0

package/lib/version.d.ts

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

package/lib/version.js

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@indielayer/ui",
-  "version": "1.15.2",
+  "version": "1.16.0",
   "description": "Indielayer UI Components with Tailwind CSS build for Vue 3",
   "author": {
     "name": "João Teixeira",

package/src/components/table/Table.vue

@@ -76,7 +76,7 @@ export default { name: 'XTable' }
 </script>
 
 <script setup lang="ts" generic="T">
-import { ref, type ExtractPublicPropTypes, type PropType, watch, computed } from 'vue'
+import { ref, type ExtractPublicPropTypes, type PropType, watch, computed, useSlots } from 'vue'
 import { useTheme, type ThemeComponent } from '../../composables/useTheme'
 import { useVirtualList } from '../../composables/useVirtualList'
 
@@ -375,6 +375,10 @@ watch(items, (newValue: T[]) => {
   }
 }, { immediate: true })
 
+const slots = useSlots()
+
+const hasFooter = computed(() => Object.keys(slots).some((key) => key.startsWith('footer-')))
+
 const { styles, classes, className } = useTheme('Table', {}, props)
 </script>
 
@@ -531,6 +535,23 @@ const { styles, classes, className } = useTheme('Table', {}, props)
             </tr>
           </template>
         </x-table-body>
+        <slot name="footer">
+          <tfoot v-if="hasFooter && !loading">
+            <x-table-row>
+              <x-table-cell v-if="props.selectable && !props.singleSelect" width="40" class="!pl-3.5 !pr-0.5" />
+              <x-table-cell v-if="expandable" width="48" class="!p-0" />
+              <x-table-cell
+                v-for="(header, index) in headers"
+                :key="index"
+                :text-align="header.align"
+                :width="header.width"
+                :dense="dense"
+              >
+                <slot :name="`footer-${header.value}`" :header="header"></slot>
+              </x-table-cell>
+            </x-table-row>
+          </tfoot>
+        </slot>
       </table>
       <div
         v-if="loading"

package/src/components/tooltip/Tooltip.vue

@@ -41,17 +41,21 @@ const hasTooltip = computed(() => props.tooltip || slots.tooltip)
 const computedDisabled = computed(() => props.disabled || !hasTooltip.value)
 
 const arrowPositionClasses = computed(() => {
+  if (computedDisabled.value) return ''
+
   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',
+    top: '-bottom-2.5 w-3.5',
+    bottom: '-top-2.5 w-3.5',
+    left: '-right-2.5 h-3.5',
+    right: '-left-2.5 h-3.5',
   }
 
   return placements[actualPosition.value]
 })
 
 const arrowRotationClasses = computed(() => {
+  if (computedDisabled.value) return ''
+
   const placements = {
     top: '-rotate-45 origin-top-left',
     bottom: 'rotate-45 origin-bottom-left',
@@ -63,6 +67,8 @@ const arrowRotationClasses = computed(() => {
 })
 
 const animationOriginClasses = computed(() => {
+  if (computedDisabled.value) return ''
+
   const origins = {
     top: 'origin-bottom',
     bottom: 'origin-top',
@@ -142,10 +148,27 @@ const calculatePosition = () => {
     }
   }
 
+  // Calculate arrow offset relative to trigger element center
+  const arrowOffset: Record<string, string> = {}
+
+  if (position === 'top' || position === 'bottom') {
+    const triggerCenter = triggerRect.left + triggerRect.width / 2
+    const offsetFromTooltipLeft = triggerCenter - left
+
+    arrowOffset.left = `${offsetFromTooltipLeft}px`
+  } else if (position === 'left' || position === 'right') {
+    const triggerCenter = triggerRect.top + triggerRect.height / 2
+    const offsetFromTooltipTop = triggerCenter - top
+
+    arrowOffset.top = `${offsetFromTooltipTop}px`
+  }
+
   actualPosition.value = position
   tooltipStyle.value = {
     top: `${top}px`,
     left: `${left}px`,
+    '--arrow-offset-x': arrowOffset.left || '0px',
+    '--arrow-offset-y': arrowOffset.top || '0px',
   }
 }
 
@@ -176,32 +199,35 @@ const { classes, className } = useTheme('Tooltip', {}, props)
     @mouseleave="hideTooltip"
   >
     <slot></slot>
-  </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
-        ]"
+    <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"
       >
-        <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
+          v-if="isVisible"
+          ref="tooltipRef"
+          :style="tooltipStyle"
+          class="fixed z-[10001] pointer-events-none"
+          :class="[
+            classes.tooltip,
+            animationOriginClasses
+          ]"
+        >
+          <slot name="tooltip">{{ tooltip }}</slot>
+          <div
+            :class="['absolute overflow-hidden shadow-lg z-10', arrowPositionClasses]"
+            :style="actualPosition === 'top' || actualPosition === 'bottom' ? { left: 'var(--arrow-offset-x)', transform: 'translateX(-50%)' } : { top: 'var(--arrow-offset-y)', transform: 'translateY(-50%)' }"
+          >
+            <div :class="['h-2.5 w-2.5 bg-secondary-700 transform border border-secondary-800', arrowRotationClasses]"></div>
+          </div>
         </div>
-      </div>
-    </transition>
-  </teleport>
+      </transition>
+    </teleport>
+  </component>
 </template>

package/src/components/tooltip/index.ts

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

package/src/version.ts

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