sprintify-ui 0.7.10 → 0.8.0

package/src/components/BaseTableHeader.vue

@@ -1,23 +1,27 @@
 <template>
   <th
-    class="p-0 border-b border-slate-200"
+    ref="thRef"
+    :class="classes"
     :align="align"
     :colspan="colspan"
+    :style="style"
+    @click="onClick"
   >
-    <div :class="classes">
-      <slot />  
-    </div>
+    <slot />
   </th> 
 </template>
 
 <script lang="ts" setup>
+import { useIsFirstColumn } from '@/composables/isFirstColumn';
+import { useIsLastColumn } from '@/composables/isLastColumn';
 import { cellClasses } from '@/services/table/classes';
 import { CellConfig, TableProps } from '@/services/table/types';
 import { ClassNameValue, twMerge } from 'tailwind-merge';
-import { ComputedRef } from 'vue';
+import { ComputedRef, StyleValue } from 'vue';
 
-const baseTable = inject('BaseTable') as ComputedRef<TableProps> | undefined;
-const baseTableHead = inject('BaseTableHead', undefined);
+const baseTable = inject('table:props') as ComputedRef<TableProps> | undefined;
+const baseTableHead = inject('tableHead:props', undefined);
+const baseTableHorizontalScrolling = inject('table:horizontalScrolling', undefined) as ComputedRef<boolean> | undefined;
 
 if (!baseTableHead) {
   throw new Error('BaseTableCell must be used within a BaseTableHead.');
@@ -27,33 +31,58 @@ defineOptions({
   inheritAttrs: false,
 });
 
+const emit = defineEmits(['click']);
+
 const props = withDefaults(defineProps<{
   class?: ClassNameValue,
+  style?: StyleValue,
   align?: 'left' | 'center' | 'right',
   colspan?: number,
 }>(), {
   class: undefined,
+  style: undefined,
   align: 'left',
   colspan: undefined,
 });
 
+function onClick(event: MouseEvent) {
+  emit('click', event);
+}
+
 const cellConfig = computed<CellConfig>(() => {
   return {
-    spacing: baseTable?.value?.spacing,
+    size: baseTable?.value?.size,
     flush: baseTable?.value?.flush,
     head: true,
   }
 });
 
+const thRef = ref<HTMLTableCellElement | null>(null);
+
+const { isFirstColumn } = useIsFirstColumn(thRef);
+const { isLastColumn } = useIsLastColumn(thRef);
+
+
 const classes = computed(() => {
   const base = cellClasses(cellConfig.value);
+  const baseTh = 'bg-white text-slate-500 border-b border-slate-300 group';
+  const sticky = baseTable?.value.fixedHeader ? 'sticky top-0 z-[2]' : '';
+  const firstCol = isFirstColumn.value ? 'duration-300 transition-[border] border-r border-r-transparent' : '';
+  const horizontalScrolling = baseTable?.value.fixedColumn && baseTableHorizontalScrolling?.value && isFirstColumn.value ? 'sticky z-[3] left-0 border-r-slate-200' : '';
+  const flushLeft = baseTable?.value.flush && isFirstColumn.value ? 'pl-0' : '';
+  const flushRight = baseTable?.value.flush && isLastColumn.value ? 'pr-0' : '';
 
   return twMerge(
-    'text-slate-500 font-normal',
     base,
+    baseTh,
+    sticky,
+    firstCol,
+    horizontalScrolling,
+    flushLeft,
+    flushRight,
     props.class,
   );
-})
+});
 
 
 </script>

package/src/components/BaseTableRow.vue

@@ -1,9 +1,8 @@
 <template>
   <tr
     :class="classes"
-    @click="emit('click')"
-    @mouseenter="emit('mouseenter')"
-    @mouseleave="emit('mouseleave')"
+    @mouseenter="onMouseEnter"
+    @mouseleave="onMouseLeave"
   >
     <slot />  
   </tr> 
@@ -17,7 +16,7 @@ defineOptions({
   inheritAttrs: false,
 });
 
-const baseTable = inject('BaseTable');
+const baseTable = inject('table:props');
 
 if (!baseTable) {
   throw new Error('baseTable must be used within a BaseTable.');
@@ -31,16 +30,16 @@ const props = withDefaults(defineProps<{
   target?: '_blank' | '_self' | '_parent' | '_top',
   title?: string,
   class?: ClassNameValue,
+  onClick?: (e: MouseEvent) => void,
 }>(), {
   href: undefined,
   to: undefined,
   target: undefined,
   title: undefined,
   class: undefined,
+  onClick: undefined,
 });
 
-provide('BaseTableRow', computed(() => props));
-
 const classes = computed(() => {
   const base = 'group/row';
 
@@ -50,4 +49,26 @@ const classes = computed(() => {
   );
 });
 
+const hover = ref(false);
+const hoverForFullRow = ref(false);
+
+function setHoverForFullRow(active: boolean) {
+  hoverForFullRow.value = active;
+}
+
+function onMouseEnter() {
+  emit('mouseenter');
+  hover.value = true;
+}
+
+function onMouseLeave() {
+  emit('mouseleave');
+  hover.value = false;
+}
+
+provide('tableRow:props', computed(() => props));
+provide('tableRow:hover', computed(() => hover.value));
+provide('tableRow:setHoverForFullRow', setHoverForFullRow);
+provide('tableRow:hoverForFullRow', computed(() => hoverForFullRow.value));
+
 </script>

package/src/composables/isFirstColumn.ts

@@ -0,0 +1,31 @@
+import { MaybeRef } from "vue";
+
+export function useIsFirstColumn(tdOrTh: MaybeRef<HTMLTableCellElement | null>) {
+
+    const leftCol = ref<HTMLTableCellElement | null>();
+
+    onMounted(() => {
+        leftCol.value = unref(tdOrTh)?.previousElementSibling as HTMLTableCellElement | null;
+    });
+
+    const isFirstColumn = computed(() => {
+
+        if (!leftCol.value) {
+            return true;
+        }
+
+        if (leftCol.value.tagName.toLowerCase() === 'th') {
+            return false;
+        }
+
+        if (leftCol.value.tagName.toLowerCase() === 'td') {
+            return false;
+        }
+
+        return true;
+    });
+
+    return {
+        isFirstColumn,
+    };
+}

package/src/composables/isLastColumn.ts

@@ -0,0 +1,31 @@
+import { MaybeRef } from "vue";
+
+export function useIsLastColumn(tdOrTh: MaybeRef<HTMLTableCellElement | null>) {
+
+    const rightCol = ref<HTMLTableCellElement | null>();
+
+    onMounted(() => {
+        rightCol.value = unref(tdOrTh)?.nextElementSibling as HTMLTableCellElement | null;
+    });
+
+    const isLastColumn = computed(() => {
+
+        if (!rightCol.value) {
+            return true;
+        }
+
+        if (rightCol.value.tagName.toLowerCase() === 'th') {
+            return false;
+        }
+
+        if (rightCol.value.tagName.toLowerCase() === 'td') {
+            return false;
+        }
+
+        return true;
+    });
+
+    return {
+        isLastColumn,
+    };
+}

package/src/composables/paginatedData.ts

@@ -1,4 +1,4 @@
-import { Ref } from 'vue';
+import { ComputedRef, Ref } from 'vue';
 import {
   Collection,
   PaginatedCollection,
@@ -9,26 +9,38 @@ import { isArray } from 'lodash';
 import { getItems } from '@/utils/getApiData';
 
 export function useHasPaginatedData(
-  data: Ref<Collection | PaginatedCollection | ResourceCollection | null>
+  data: Ref<Collection | PaginatedCollection | ResourceCollection | null | undefined>,
+  page?: ComputedRef<number>,
+  perPage?: ComputedRef<number>,
 ) {
   const items = computed(() => {
     return getItems(data.value);
   });
 
   const paginationMetadata = computed<PaginationMetadata | null>(() => {
-    const defaultMeta = {
-      current_page: 1,
-      last_page: 1,
-      per_page: 1,
-      total: 0,
-    };
 
     if (!data.value) {
-      return defaultMeta;
+      return null;
     }
+
     if (isArray(data.value)) {
-      return defaultMeta;
+
+      const perPageUnref = unref(perPage);
+      const pageUnref = unref(page);
+
+      const total = data.value.length;
+      const perPageArr = perPageUnref ? perPageUnref : total;
+      const pageArr = pageUnref ? pageUnref : 1;
+      const lastPage = Math.ceil(total / perPageArr);
+
+      return {
+        current_page: pageArr,
+        last_page: lastPage,
+        per_page: perPageArr,
+        total: total,
+      };
     }
+
     if ('meta' in data.value) {
       return data.value.meta;
     }

package/src/services/table/classes.ts

@@ -1,24 +1,28 @@
 import { twMerge } from "tailwind-merge";
-import { CellConfig, CellSpacing } from "./types";
+import { CellConfig, CellSize } from "./types";
 
 export function cellClasses(config: CellConfig): string {
-    const base = 'block';
-    const space = spacing(config.spacing ?? 'md');
-    const flush = config.flush ? 'px-0' : '';
+    const base = '';
+    const space = size(config.size ?? 'md');
 
-    return twMerge([base, space, flush]);
+    return twMerge([base, space]);
 }
 
-function spacing(spacing: CellSpacing): string {
-    if (spacing == 'sm') {
+function size(size: CellSize): string {
+
+    if (size == 'xs') {
         return 'px-1 py-0.5';
     }
 
-    if (spacing == 'md') {
+    if (size == 'sm') {
+        return 'px-2 py-1';
+    }
+
+    if (size == 'md') {
         return 'px-2 py-2';
     }
 
-    if (spacing == 'lg') {
+    if (size == 'lg') {
         return 'px-4 py-3';
     }
 

package/src/services/table/types.ts

@@ -1,19 +1,20 @@
 import { RouteLocationRaw } from "vue-router";
 
-export type CellSpacing = 'none' | 'sm' | 'md' | 'lg';
+export type CellSize = 'none' | 'xs' | 'sm' | 'md' | 'lg';
 
 export interface TableProps {
-    spacing?: CellSpacing;
+    size?: CellSize;
     flush?: boolean;
+    fixedHeader?: boolean;
+    fixedColumn?: boolean;
 }
 
-export type CellConfig = {
-    flush?: boolean;
-} & TableProps;
+export type CellConfig = TableProps;
 
 export interface CellProps {
     title?: string;
     href?: string;
     to?: RouteLocationRaw;
     target?: string;
+    onClick?: (e: MouseEvent) => void;
 }

package/src/stores/dialogs.ts

@@ -17,6 +17,7 @@ export const useDialogsStore = defineStore('dialogs', {
         color: options.color ?? 'info',
         title: options.title,
         message: options.message,
+        html: options.html ?? false,
         confirmText: options.confirmText ?? t('sui.confirm'),
         cancelText: options.cancelText ?? t('sui.cancel'),
         closeOnOutsideClick: options.closeOnOutsideClick ?? true,

package/src/stories/List.stories.js

@@ -125,7 +125,11 @@ const Template = (args) => ({
             alert('Cell click: ' + row.id);
         }
 
-        return { args, onCellClick, DateTime };
+        function onRowClick(row) {
+            alert('Row click: ' + row.id);
+        }
+
+        return { args, onCellClick, onRowClick, DateTime };
     },
 });
 

package/src/types/index.ts

@@ -103,15 +103,20 @@ export interface BaseTableColumnData {
   field: string;
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   meta: undefined | Record<string, any>;
-  newKey: number;
+  newKey: string;
   numeric: boolean;
   position: 'left' | 'right';
   searchable: boolean;
   sortable: boolean;
-  clickable: boolean;
+  ignoreRowInteractions: boolean;
   toggle: boolean;
   toggleDefault: boolean;
   width: number;
+  class?: string | string[];
+  to?: (row: Row) => RouteLocationRaw;
+  href?: (row: Row) => string;
+  target?: '_blank' | '_self' | '_parent' | '_top';
+  onClick?: (row: Row, index: number, column: BaseTableColumnData, colIndex: number, event: MouseEvent) => void;
   style: {
     width: undefined | number;
   };
@@ -150,6 +155,7 @@ export interface DialogOptions {
   color?: 'info' | 'success' | 'danger' | 'warning';
   title: string;
   message: string;
+  html?: boolean;
   confirmText?: string;
   cancelText?: string;
   closeOnOutsideClick?: boolean;
@@ -162,6 +168,7 @@ export interface Dialog {
   color: 'info' | 'success' | 'danger' | 'warning';
   title: string;
   message: string;
+  html: boolean;
   confirmText: string;
   cancelText: string;
   closeOnOutsideClick: boolean;

package/src/utils/getApiData.ts

@@ -1,7 +1,7 @@
 import { Collection, PaginatedCollection, ResourceCollection } from "@/types";
 import { isArray } from "lodash";
 
-export function getItems(data: Collection | PaginatedCollection | ResourceCollection | null) {
+export function getItems(data: Collection | PaginatedCollection | ResourceCollection | null | undefined) {
     if (!data) {
         return [];
     }

package/src/assets/base-table.css

@@ -1,17 +0,0 @@
-.base-table {
-    .th {
-        @apply relative z-[2];
-        @apply bg-slate-50;
-        @apply border-b border-slate-300;
-      }
-      
-      .base-table--has-max-height .th {
-        @apply sticky;
-        @apply top-0;
-        @apply bg-opacity-75 backdrop-blur backdrop-filter;
-      }
-      
-      tbody tr.item-row:hover td {
-        @apply bg-slate-50;
-      }
-}