@indielayer/ui 1.15.3 → 1.16.0

package/lib/version.d.ts

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

package/lib/version.js

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@indielayer/ui",
-  "version": "1.15.3",
+  "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

@@ -44,10 +44,10 @@ 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]
@@ -148,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',
   }
 }
 
@@ -203,7 +220,10 @@ const { classes, className } = useTheme('Tooltip', {}, props)
           ]"
         >
           <slot name="tooltip">{{ tooltip }}</slot>
-          <div :class="['absolute overflow-hidden shadow-lg z-10', arrowPositionClasses]">
+          <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>

package/src/version.ts

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