sprintify-ui 0.7.11 → 0.8.0

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/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;
   };

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;
-      }
-}