sprintify-ui 0.10.33 → 0.10.35

package/dist/tailwindcss/table.js

@@ -33,7 +33,6 @@ export default function ({ addVariant, addComponents, e, theme }) {
             'border-bottom-style': borderStyle,
             'border-bottom-color': borderColor,
             'border-radius': theme('borderRadius.md'),
-            'table-layout': 'fixed',
         },
         '.tabulation thead': {
             'background-color': theme('colors.slate.100'),
@@ -41,6 +40,7 @@ export default function ({ addVariant, addComponents, e, theme }) {
         '.tabulation th, .tabulation td': {
             'padding': theme('spacing.3') + ' ' + theme('spacing.2'),
             'text-align': 'left',
+            'vertical-align': 'top',
             'border-bottom-width': borderWidth,
             'border-bottom-style': borderStyle,
             'border-bottom-color': borderColor,
@@ -89,4 +89,4 @@ export default function ({ addVariant, addComponents, e, theme }) {
             'border-color': borderColor,
         },
     });
-};
+}

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

@@ -174,6 +174,7 @@ declare const table: import("vue").Ref<({
         newColumns: import("vue").ComputedRef<{
             id: string;
             label: string;
+            tooltip?: string | undefined;
             field: string;
             meta: undefined | Record<string, any>;
             newKey: string;
@@ -363,6 +364,7 @@ declare const table: import("vue").Ref<({
     newColumns: import("vue").ComputedRef<{
         id: string;
         label: string;
+        tooltip?: string | undefined;
         field: string;
         meta: undefined | Record<string, any>;
         newKey: string;
@@ -552,6 +554,7 @@ declare const table: import("vue").Ref<({
         newColumns: import("vue").ComputedRef<{
             id: string;
             label: string;
+            tooltip?: string | undefined;
             field: string;
             meta: undefined | Record<string, any>;
             newKey: string;
@@ -741,6 +744,7 @@ declare const table: import("vue").Ref<({
     newColumns: import("vue").ComputedRef<{
         id: string;
         label: string;
+        tooltip?: string | undefined;
         field: string;
         meta: undefined | Record<string, any>;
         newKey: string;

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

@@ -13,6 +13,7 @@ declare const checkboxStyle = "disabled:bg-slate-100 group-hover:shadow-md  disa
 declare const currentSortColumn: import("vue").Ref<{
     id: string;
     label: string;
+    tooltip?: string | undefined;
     field: string;
     meta: undefined | Record<string, any>;
     newKey: string;
@@ -35,6 +36,7 @@ declare const currentSortColumn: import("vue").Ref<{
 } | null, BaseTableColumnData | {
     id: string;
     label: string;
+    tooltip?: string | undefined;
     field: string;
     meta: undefined | Record<string, any>;
     newKey: string;
@@ -60,6 +62,7 @@ declare const slot: import("vue").Ref<HTMLElement | null, HTMLElement | null>;
 declare const newColumns: import("vue").ComputedRef<{
     id: string;
     label: string;
+    tooltip?: string | undefined;
     field: string;
     meta: undefined | Record<string, any>;
     newKey: string;
@@ -83,6 +86,7 @@ declare const newColumns: import("vue").ComputedRef<{
 declare const visibleColumnsInternal: import("vue").ComputedRef<{
     id: string;
     label: string;
+    tooltip?: string | undefined;
     field: string;
     meta: undefined | Record<string, any>;
     newKey: string;
@@ -668,6 +672,7 @@ declare const __VLS_component: import("vue").DefineComponent<import("vue").Extra
     newColumns: import("vue").ComputedRef<{
         id: string;
         label: string;
+        tooltip?: string | undefined;
         field: string;
         meta: undefined | Record<string, any>;
         newKey: string;

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

@@ -6,6 +6,10 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         default: string;
         type: StringConstructor;
     };
+    tooltip: {
+        default: undefined;
+        type: StringConstructor;
+    };
     customKey: {
         default: string;
         type: (NumberConstructor | StringConstructor)[];
@@ -97,6 +101,10 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         default: string;
         type: StringConstructor;
     };
+    tooltip: {
+        default: undefined;
+        type: StringConstructor;
+    };
     customKey: {
         default: string;
         type: (NumberConstructor | StringConstructor)[];
@@ -184,6 +192,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     meta: Record<string, any> | unknown[];
     width: number;
     padding: string;
+    tooltip: string;
     align: "left" | "center" | "right";
     field: string;
     searchable: boolean;

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

@@ -5,19 +5,39 @@ type __VLS_Props = {
     style?: StyleValue;
     align?: 'left' | 'center' | 'right';
     colspan?: number;
+    tooltip?: string;
 };
 declare function onClick(event: MouseEvent): void;
 declare const thRef: import("vue").Ref<HTMLTableCellElement | null, HTMLTableCellElement | null>;
 declare const classes: ComputedRef<string | string[]>;
+declare const tooltipRef: import("vue").Ref<HTMLElement | null, HTMLElement | null>;
+declare const floatingStyles: Readonly<import("vue").Ref<{
+    position: import("@floating-ui/utils").Strategy;
+    top: string;
+    left: string;
+    transform?: string;
+    willChange?: string;
+}, {
+    position: import("@floating-ui/utils").Strategy;
+    top: string;
+    left: string;
+    transform?: string;
+    willChange?: string;
+}>>, showTooltip: import("vue").Ref<boolean, boolean>;
 declare const __VLS_ctx: InstanceType<__VLS_PickNotAny<typeof __VLS_self, new () => {}>>;
-declare var __VLS_1: {};
+declare var __VLS_1: {}, __VLS_11: {};
 type __VLS_Slots = __VLS_PrettifyGlobal<__VLS_OmitStringIndex<typeof __VLS_ctx.$slots> & {
     default?: (props: typeof __VLS_1) => any;
+} & {
+    tooltip?: (props: typeof __VLS_11) => any;
 }>;
 declare const __VLS_self: import("vue").DefineComponent<__VLS_Props, {
     onClick: typeof onClick;
     thRef: typeof thRef;
     classes: typeof classes;
+    tooltipRef: typeof tooltipRef;
+    floatingStyles: typeof floatingStyles;
+    showTooltip: typeof showTooltip;
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     click: (...args: any[]) => void;
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
@@ -25,6 +45,7 @@ declare const __VLS_self: import("vue").DefineComponent<__VLS_Props, {
 }>, {
     class: string | false | 0 | 0n | ClassNameValue[] | null;
     style: string | false | import("vue").CSSProperties | StyleValue[] | null;
+    tooltip: string;
     align: "left" | "center" | "right";
     colspan: number;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
@@ -35,6 +56,7 @@ declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, {}, {}
 }>, {
     class: string | false | 0 | 0n | ClassNameValue[] | null;
     style: string | false | import("vue").CSSProperties | StyleValue[] | null;
+    tooltip: string;
     align: "left" | "center" | "right";
     colspan: number;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

package/dist/types/types/index.d.ts

@@ -77,6 +77,7 @@ export type Row = Record<string, any>;
 export interface BaseTableColumnData {
     id: string;
     label: string;
+    tooltip?: string;
     field: string;
     meta: undefined | Record<string, any>;
     newKey: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sprintify-ui",
-  "version": "0.10.33",
+  "version": "0.10.35",
   "type": "module",
   "scripts": {
     "build": "rimraf dist && vue-tsc && vite build",

package/src/components/BaseDataTableTemplate.vue

@@ -28,6 +28,7 @@
             v-for="(column, index) in visibleColumnsInternal"
             :key="column.newKey + ':' + index + 'header'"
             :style="column.style"
+            :tooltip="column.tooltip"
             class="bg-slate-50"
           >
             <div class="flex gap-4">
@@ -67,9 +68,8 @@
                     'text-[12px]': size == 'sm',
                     'text-xs': size == 'md',
                   }"
-                >
-                  {{ column.label }}
-                </span>
+                  v-html="column.label"
+                />
                 <div
                   v-if="column.sortable"
                   :class="[

package/src/components/BaseTable.stories.js

@@ -28,7 +28,7 @@ export default {
 
 const headTemplate = `<BaseTableHead>
 <BaseTableRow>
-  <BaseTableHeader sortable>Label</BaseTableHeader>
+  <BaseTableHeader tooltip="Lorem ipsum" sortable>Label</BaseTableHeader>
   <BaseTableHeader sortable>ID</BaseTableHeader>
   <BaseTableHeader>Type</BaseTableHeader>
   <BaseTableHeader>Description</BaseTableHeader>

package/src/components/BaseTableColumn.vue

@@ -11,6 +11,10 @@ export default defineComponent({
       default: '',
       type: String,
     },
+    tooltip: {
+      default: undefined,
+      type: String,
+    },
     customKey: {
       default: '',
       type: [String, Number],

package/src/components/BaseTableHeader.vue

@@ -8,10 +8,41 @@
     @click="onClick"
   >
     <slot />
-  </th> 
+  </th>
+
+  <Teleport
+    v-if="tooltip"
+    to="body"
+  >
+    <div
+      ref="tooltipRef"
+      class="fixed top-0 left-0 z-tooltip pointer-events-none"
+      :style="floatingStyles"
+    >
+      <transition
+        enter-active-class="transition duration-200 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-from-class="transform scale-100 opacity-100"
+        leave-to-class="transform scale-90 opacity-0"
+      >
+        <slot
+          v-if="showTooltip"
+          name="tooltip"
+        >
+          <div
+            class="text-xs max-w-xs leading-snug rounded-md pt-1.5 pb-2 px-3 bg-slate-900 text-white"
+            v-html="tooltip"
+          />
+        </slot>
+      </transition>
+    </div>
+  </Teleport>
 </template>
 
 <script lang="ts" setup>
+import { useTooltip } from '@/composables/tooltip';
 import { cellClasses } from '@/services/table/classes';
 import { CellConfig, TableProps } from '@/services/table/types';
 import { ClassNameValue, twMerge } from 'tailwind-merge';
@@ -36,11 +67,13 @@ const props = withDefaults(defineProps<{
   style?: StyleValue,
   align?: 'left' | 'center' | 'right',
   colspan?: number,
+  tooltip?: string,
 }>(), {
   class: undefined,
   style: undefined,
   align: 'left',
   colspan: undefined,
+  tooltip: undefined,
 });
 
 function onClick(event: MouseEvent) {
@@ -89,5 +122,19 @@ const classes = computed(() => {
   );
 });
 
+// Tooltip
+
+const tooltipRef = ref<HTMLElement | null>(null);
+
+const { floatingStyles, showTooltip } = useTooltip(
+  thRef,
+  tooltipRef,
+  false,
+  400,
+  {
+    placement: 'top-start',
+  },
+  3
+);
 
 </script>

package/src/services/table/classes.ts

@@ -1,7 +1,7 @@
 import { CellConfig, CellSize } from "./types";
 
 export function cellClasses(config: CellConfig): string {
-    const base = '';
+    const base = 'align-top';
     const space = size(config.size ?? 'md');
 
     return [base, space].join(' ');

package/src/types/index.ts

@@ -103,6 +103,7 @@ export type Row = Record<string, any>;
 export interface BaseTableColumnData {
   id: string;
   label: string;
+  tooltip?: string;
   field: string;
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   meta: undefined | Record<string, any>;