sprintify-ui 0.7.10 → 0.8.0

package/src/components/BaseDataTableTemplate.vue

@@ -1,7 +1,6 @@
 <template>
   <div
-    class="base-table relative w-full overflow-hidden"
-    :class="maxHeight ? 'base-table--has-max-height' : ''"
+    class="relative w-full overflow-hidden"
   >
     <div
       ref="slot"
@@ -10,282 +9,204 @@
       <slot />
     </div>
 
-    <div class="flex flex-col">
-      <div
-        ref="scrollable"
-        class="overflow-x-auto overflow-y-auto"
-        data-scroll-lock-scrollable
-        :style="{ maxHeight: maxHeight ? maxHeight + 'px' : undefined }"
-      >
-        <div class="inline-block min-w-full align-middle">
-          <div class="relative min-h-[300px]">
-            <table class="min-w-full border-separate border-spacing-0">
-              <thead
-                v-if="newColumns.length"
-                ref="thead"
+    <BaseTable
+      ref="baseTableRef"
+      class="min-w-full"
+      :size="size"
+      :fixed-header="(maxHeight && maxHeight > 0) == true"
+      :fixed-column="true"
+      :max-height="maxHeight"
+      :loading="loading"
+    >
+      <BaseTableHead v-if="newColumns.length">
+        <BaseTableRow>
+          <BaseTableHeader
+            v-for="(column, index) in visibleColumns"
+            :key="column.newKey + ':' + index + 'header'"
+            v-bind="column.thAttrs && column.thAttrs(column)"
+            :style="column.style"
+            class="bg-slate-50"
+          >
+            <div class="flex gap-4">
+              <template v-if="index == 0">
+                <div
+                  v-if="showDetailRowIcon"
+                  class="flex h-5 w-5 shrink-0 grow-0"
+                />
+
+                <div
+                  v-if="checkable"
+                  class="flex items-center cursor-pointer"
+                  @click="checkAll"
+                >
+                  <input
+                    type="checkbox"
+                    autocomplete="off"
+                    :checked="isAllChecked"
+                    :disabled="isAllUncheckable"
+                    :class="checkboxStyle"
+                  >
+                </div>
+              </template>
+
+              <button
+                type="button"
+                class="flex gap-1 w-full items-center bg-transparent text-left text-sm font-medium leading-tight text-slate-900"
+                :class="{
+                  'cursor-pointer': column.sortable,
+                }"
+                @click="sort(column, undefined, $event as any)"
               >
-                <tr>
-                  <th
-                    v-if="showDetailRowIcon"
-                    class="th"
-                    :style="detailsStyles(true)"
-                  />
-                  <th
-                    v-if="checkable && checkboxPosition === 'left'"
-                    class="th group cursor-pointer py-0 pl-3"
-                    align="left"
-                    :style="checkStyles(true)"
-                    @click="checkAll"
+                <span
+                  class="whitespace-nowrap text-slate-600"
+                  :class="{
+                    'text-[12px]': size == 'sm',
+                    'text-xs': size == 'md',
+                  }"
+                >
+                  {{ column.label }}
+                </span>
+                <div
+                  v-if="column.sortable"
+                  :class="[
+                    currentSortColumn === column
+                      ? ''
+                      : 'opacity-0 duration-200 group-hover:opacity-100',
+                  ]"
+                >
+                  <svg
+                    viewBox="0 0 20 20"
+                    class="h-5 w-5"
                   >
-                    <div class="flex items-center">
-                      <input
-                        type="checkbox"
-                        autocomplete="off"
-                        :checked="isAllChecked"
-                        :disabled="isAllUncheckable"
-                        :class="checkboxStyle"
-                      >
-                    </div>
-                  </th>
-                  <th
-                    v-for="(column, index) in visibleColumns"
-                    :key="column.newKey + ':' + index + 'header'"
-                    v-bind="column.thAttrs && column.thAttrs(column)"
-                    :style="[
-                      column.style,
-                      index == 0 ? firstColStyles(true) : {},
-                    ]"
-                    class="th group text-left px-3 py-2"
-                    :class="{
-                      'cursor-pointer': column.sortable,
-                    }"
-                    @click.stop="sort(column, undefined, $event as any)"
+                    <path
+                      :opacity="!isAsc ? '0.5' : '1'"
+                      fill="currentColor"
+                      d="M9.116 4.823a1.25 1.25 0 0 1 1.768 0l2.646 2.647a.75.75 0 0 1-1.06 1.06l-2.47-2.47-2.47 2.47a.75.75 0 1 1-1.06-1.06l2.646-2.647Z"
+                    ></path>
+                    <path
+                      :opacity="isAsc ? '0.5' : '1'"
+                      fill="currentColor"
+                      d="M9.116 15.177a1.25 1.25 0 0 0 1.768 0l2.646-2.647a.75.75 0 0 0-1.06-1.06l-2.47 2.47-2.47-2.47a.75.75 0 0 0-1.06 1.06l2.646 2.647Z"
+                    ></path>
+                  </svg>
+                </div>
+              </button>
+            </div>  
+          </BaseTableHeader>
+        </BaseTableRow>
+      </BaseTableHead>
+
+      <BaseTableBody class="bg-white">
+        <template
+          v-for="(row, index) in data"
+          :key="getRowKey(row)"
+        >
+          <BaseTableRow
+            :to="rowTo ? rowTo(row) : undefined"
+            v-bind="rowBindings(row, index)"
+          >
+            <BaseTableCell
+              v-for="(column, columnIndex) in visibleColumns"
+              :key="column.newKey + index + ':' + columnIndex"
+              v-bind="column.tdAttrs && column.tdAttrs(row, column)"
+              :class="column.class"
+              :style="column.style"
+              :to="column.to ? column.to(row) : undefined"
+              :href="column.href ? column.href(row) : undefined"
+              :target="column.target"
+              :ignore-row-interactions="column.ignoreRowInteractions"
+              :on-click="onCellClick(row, index, column, columnIndex)"
+            >
+              <div :class="[columnIndex == 0 ? 'flex items-center gap-4' : '']">
+                <template v-if="columnIndex == 0">
+                  <div
+                    v-if="showDetailRowIcon"
+                    class="relative z-[1] || flex h-5 w-5 shrink-0 grow-0 appearance-none items-center justify-center rounded-full border border-slate-300 bg-white text-slate-400 shadow duration-100 hover:text-slate-600 hover:shadow-md"
+                    @click.stop="toggleDetails(row)"
                   >
-                    <button
-                      type="button"
-                      class="flex w-full items-center bg-transparent text-left text-sm font-medium leading-tight text-slate-900"
+                    <BaseIcon
+                      v-if="hasDetailedVisible(row)"
+                      icon="mdi:chevron-down"
+                      class="h-5 w-5 duration-300"
                       :class="{
-                        'text-blue-600':
-                          column.sortable && currentSortColumn === column,
+                        'rotate-180': isVisibleDetailRow(row)
                       }"
-                    >
-                      <span
-                        class="whitespace-nowrap text-slate-600"
-                        :class="{
-                          'text-[12px]': size == 'sm',
-                          'text-xs': size == 'md',
-                        }"
-                      >
-                        {{ column.label }}
-                      </span>
-                      <div
-                        v-if="column.sortable"
-                        class="w-3"
-                        :class="[
-                          currentSortColumn === column
-                            ? ''
-                            : 'opacity-0 duration-200 group-hover:opacity-100',
-                        ]"
-                      >
-                        <svg
-                          viewBox="0 0 20 20"
-                          class="absolute top-1/2 h-5 w-5 -translate-y-1/2"
-                        >
-                          <path
-                            :opacity="!isAsc ? '0.5' : '1'"
-                            fill="currentColor"
-                            d="M9.116 4.823a1.25 1.25 0 0 1 1.768 0l2.646 2.647a.75.75 0 0 1-1.06 1.06l-2.47-2.47-2.47 2.47a.75.75 0 1 1-1.06-1.06l2.646-2.647Z"
-                          ></path>
-                          <path
-                            :opacity="isAsc ? '0.5' : '1'"
-                            fill="currentColor"
-                            d="M9.116 15.177a1.25 1.25 0 0 0 1.768 0l2.646-2.647a.75.75 0 0 0-1.06-1.06l-2.47 2.47-2.47-2.47a.75.75 0 0 0-1.06 1.06l2.646 2.647Z"
-                          ></path>
-                        </svg>
-                      </div>
-                    </button>
-                  </th>
-                  <th
-                    v-if="checkable && checkboxPosition === 'right'"
-                    class="th group cursor-pointer pr-3"
-                    align="right"
-                    @click="checkAll"
+                    />
+                  </div>
+
+                  <div
+                    v-if="checkable"
+                    class="relative z-[1] || flex items-center group cursor-pointer bg-white"
+                    @click.stop="checkRow(row, index, $event as MouseEvent)"
                   >
                     <input
-                      autocomplete="off"
                       type="checkbox"
-                      :checked="isAllChecked"
-                      :disabled="isAllUncheckable"
+                      autocomplete="off"
+                      :disabled="!isRowCheckable(row)"
+                      :checked="isRowChecked(row)"
                       :class="checkboxStyle"
                     >
-                  </th>
-                </tr>
-              </thead>
-
-              <tbody class="bg-white">
-                <template
-                  v-for="(row, index) in data"
-                  :key="getRowKey(row)"
-                >
-                  <tr class="item-row">
-                    <td
-                      v-if="showDetailRowIcon"
-                      class="group cursor-pointer bg-white pl-3"
-                      :class="borderBottomClasses(index, row)"
-                      :style="detailsStyles(false)"
-                      @click.stop="toggleDetails(row)"
-                    >
-                      <button
-                        type="button"
-                        class="mr-0 flex h-5 w-5 appearance-none items-center justify-center rounded-full border border-slate-300 bg-white text-slate-400 shadow duration-100 group-hover:text-slate-600 group-hover:shadow-md"
-                      >
-                        <BaseIcon
-                          v-if="hasDetailedVisible(row)"
-                          icon="mdi:chevron-down"
-                          class="h-5 w-5 duration-300"
-                          :class="{
-                            'rotate-180': isVisibleDetailRow(row),
-                          }"
-                        />
-                      </button>
-                    </td>
-
-                    <td
-                      v-if="checkable && checkboxPosition === 'left'"
-                      class="group z-[1] cursor-pointer bg-white pl-3"
-                      :class="borderBottomClasses(index, row)"
-                      :style="checkStyles(false)"
-                      @click="checkRow(row, index, $event as MouseEvent)"
-                    >
-                      <div class="flex items-center">
-                        <input
-                          type="checkbox"
-                          autocomplete="off"
-                          :disabled="!isRowCheckable(row)"
-                          :checked="isRowChecked(row)"
-                          :class="checkboxStyle"
-                        >
-                      </div>
-                    </td>
-
-                    <SlotComponent
-                      v-for="(column, colindex) in visibleColumns"
-                      :key="column.newKey + index + ':' + colindex"
-                      v-bind="column.tdAttrs && column.tdAttrs(row, column)"
-                      :component="column"
-                      scoped
-                      name="default"
-                      tag="td"
-                      class="bg-white text-sm"
-                      :class="[
-                        borderBottomClasses(index, row),
-                        column.clickable ? 'cursor-pointer' : '',
-                        {
-                          'py-1 px-3': size == 'sm',
-                          'py-2 px-3': size == 'md',
-                        }
-                      ]"
-                      :style="[
-                        column.style,
-                        colindex === 0 ? firstColStyles(false) : {}
-                      ]"
-                      :data-label="column.label"
-                      :props="{ row, column, index, colindex, toggleDetails }"
-                      @click="onColumnClick(row, column, index, colindex, $event)"
-                    />
-
-                    <td
-                      v-if="checkable && checkboxPosition === 'right'"
-                      class="group cursor-pointer"
-                      :class="[
-                        borderBottomClasses(index, row),
-                        {
-                          'px-3 py-1': size == 'sm',
-                          'p-3': size == 'md',
-                        }
-                      ]"
-                      align="right"
-                      @click="checkRow(row, index, $event as MouseEvent)"
-                    >
-                      <input
-                        type="checkbox"
-                        autocomplete="off"
-                        :disabled="!isRowCheckable(row)"
-                        :checked="isRowChecked(row)"
-                        :class="checkboxStyle"
-                      >
-                    </td>
-                  </tr>
-
-                  <transition :name="detailTransition">
-                    <tr
-                      v-if="isActiveDetailRow(row)"
-                      :key="getRowKey(row) + 'detail'"
-                    >
-                      <td
-                        :colspan="columnCount"
-                        :class="borderBottomDetailClasses(index)"
-                      >
-                        <slot
-                          name="detail"
-                          :row="row"
-                          :index="index"
-                        />
-                      </td>
-                    </tr>
-                  </transition>
+                  </div>
                 </template>
 
-                <tr v-if="data.length == 0">
-                  <td :colspan="columnCount">
-                    <slot name="empty" />
-                  </td>
-                </tr>
-              </tbody>
-            </table>
-
-            <slot name="loading">
-              <Transition
-                enter-active-class="transition ease-out duration-200"
-                enter-from-class="opacity-0"
-                enter-to-class="opacity-100"
-                leave-active-class="transition ease-in duration-200"
-                leave-from-class="opacity-100"
-                leave-to-class="opacity-0"
+                <SlotComponent
+                  :component="column"
+                  scoped
+                  name="default"
+                  tag="div"
+                  class="text-sm"
+                  :data-label="column.label"
+                  :props="{ row, column, index, columnIndex, toggleDetails }"
+                />
+              </div>
+            </BaseTableCell>
+          </BaseTableRow>
+
+          <transition :name="detailTransition">
+            <BaseTableRow
+              v-if="isActiveDetailRow(row)"
+              :key="getRowKey(row) + 'detail'"
+            >
+              <BaseTableCell
+                :colspan="columnCount"
               >
-                <div
-                  v-if="loading"
-                  class="absolute inset-0 z-[1] flex h-full w-full items-start justify-center"
-                >
-                  <div class="absolute h-full w-full bg-white bg-opacity-60" />
-
-                  <div class="pt-20">
-                    <BaseSpinnerLarge class="h-10 w-10 text-blue-500" />
-                  </div>
-                </div>
-              </Transition>
-            </slot>
-          </div>
-        </div>
-      </div>
-    </div>
+                <slot
+                  name="detail"
+                  :row="row"
+                  :index="index"
+                />
+              </BaseTableCell>
+            </BaseTableRow>
+          </transition>
+        </template>
+
+        <BaseTableRow v-if="data.length == 0">
+          <BaseTableCell :colspan="columnCount">
+            <slot name="empty" />
+          </BaseTableCell>
+        </BaseTableRow>
+      </BaseTableBody>
+    </BaseTable>
   </div>
 </template>
 
 <script lang="ts" setup>
-import { PropType, StyleValue, ref } from 'vue';
-import { BaseTableColumnData, Row } from '@/types';
+import { PropType, ref } from 'vue';
+import { BaseTableColumnData, CollectionItem, Row } from '@/types';
 import SlotComponent from './SlotComponent';
-import { useResizeObserver, useScroll } from '@vueuse/core';
-import { debounce, isArray } from 'lodash';
-import BaseSpinnerLarge from '../svg/BaseSpinnerLarge.vue';
+import { isArray } from 'lodash';
 import { Size } from '@/utils/sizes';
 import objectHash from 'object-hash';
+import BaseTable from './BaseTable.vue';
+import BaseTableHead from './BaseTableHead.vue';
+import BaseTableHeader from './BaseTableHeader.vue';
+import BaseTableBody from './BaseTableBody.vue';
+import BaseTableRow from './BaseTableRow.vue';
+import BaseTableCell from './BaseTableCell.vue';
+import { RouteLocationRaw } from 'vue-router';
 
 const checkboxStyle =
   'disabled:bg-slate-100 group-hover:shadow-md  disabled:border-slate-300 disabled:cursor-not-allowed duration-300 cursor-pointer focus:ring-blue-300 border border-slate-300 shadow h-[18px] w-[18px] rounded';
-const DETAIL_ROW_WIDTH = 36;
-const CHECK_ROW_WIDTH = 36;
 
 defineOptions({
   name: 'BaseDataTableTemplate',
@@ -307,7 +228,7 @@ const props = defineProps({
   },
   visibleColumns: {
     default: undefined,
-    type: Array as PropType<number[]>,
+    type: Array as PropType<string[]>,
   },
   /** Allow row details  */
   detailed: {
@@ -319,14 +240,6 @@ const props = defineProps({
     default: false,
     type: Boolean,
   },
-  /**
-   * Position of the checkbox (if checkable is true)
-   * @values left, right
-   */
-  checkboxPosition: {
-    type: String as PropType<'left' | 'right'>,
-    default: 'left',
-  },
   /** Custom method to verify if a row is checkable, works when is checkable */
   isRowCheckable: {
     type: Function,
@@ -369,6 +282,18 @@ const props = defineProps({
     type: String as PropType<Size>,
     default: 'md',
   },
+  rowTo: {
+    default: undefined,
+    type: Function as PropType<((row: CollectionItem) => RouteLocationRaw) | undefined>,
+  },
+  rowHref: {
+    default: undefined,
+    type: Function as PropType<((row: CollectionItem) => string) | undefined>,
+  },
+  onRowClick: {
+    default: undefined,
+    type: Function as PropType<((row: CollectionItem, index: number, event: MouseEvent) => void) | undefined>,
+  },
 });
 
 const emit = defineEmits([
@@ -380,6 +305,7 @@ const emit = defineEmits([
   'update:openedDetailed',
   'sort',
   'cell-click',
+  'row-click',
 ]);
 
 const visibleDetailRows = ref<string[]>([]);
@@ -392,20 +318,6 @@ const defaultSlots = ref<BaseTableColumnData[]>([]);
 const sequence = ref(1);
 
 const slot = ref<HTMLElement | null>(null);
-const thead = ref<HTMLElement | null>(null);
-const theadHeight = ref(0);
-
-useResizeObserver(thead, () => setTheadHeightDebounce());
-
-const setTheadHeightDebounce = debounce(() => {
-  setTheadHeight();
-}, 100);
-
-function setTheadHeight() {
-  if (thead.value) {
-    theadHeight.value = thead.value.clientHeight;
-  }
-}
 
 const newColumns = computed(() => {
   return defaultSlots.value;
@@ -749,38 +661,24 @@ function removeColumn(column: BaseTableColumnData) {
   );
 }
 
-const borderClasses = 'border-b border-slate-200';
-
-function borderBottomClasses(index: number, row: Row): string {
-  if (index < props.data.length - 1) {
-    return borderClasses;
-  }
-
-  if (isActiveDetailRow(row)) {
-    return borderClasses;
+function rowBindings(row: CollectionItem, index: number) {
+  return {
+    onClick: props.onRowClick ? (event: MouseEvent) => props.onRowClick && props.onRowClick(row, index, event) : undefined,
   }
-
-  return '';
 }
 
-function borderBottomDetailClasses(index: number): string {
-  if (index < props.data.length - 1) {
-    return borderClasses;
+function onCellClick(row: CollectionItem, index: number, column: BaseTableColumnData, columnIndex: number) {
+  if (!column.onClick) {
+    return undefined;
   }
 
-  return '';
-}
+  return (event: MouseEvent) => {
+    if (!column.onClick) {
+      return;
+    }
 
-function onColumnClick(
-  row: Row,
-  column: BaseTableColumnData,
-  index: number,
-  colindex: number,
-  event: MouseEvent
-) {
-  if (column.clickable) {
-    emit('cell-click', row, column, index, colindex, event);
-  }
+    column.onClick(row, index, column, columnIndex, event);
+  };
 }
 
 function nextSequence() {
@@ -800,80 +698,17 @@ function getRowKey(row: Row): string {
   return objectHash(row);
 }
 
-// Sticky styles
-
-const horizontalScrolling = ref(false);
-const scrollable = ref<null | HTMLElement>(null);
-
-const { x } = useScroll(scrollable);
-watch(x, (value) => {
-  horizontalScrolling.value = value > 0;
-});
-
-function zIndex(th: boolean) {
-  if (th) {
-    return props.maxHeight ? 3 : 2;
-  }
-  return 1;
-}
-
-function detailsStyles(th: boolean): StyleValue {
-  if (props.detailed) {
-    return {
-      zIndex: zIndex(th) + 1,
-      position: 'sticky',
-      left: 0,
-      width: DETAIL_ROW_WIDTH + 'px',
-      minWidth: DETAIL_ROW_WIDTH + 'px',
-      maxWidth: DETAIL_ROW_WIDTH + 'px',
-    };
-  }
-  return {};
-}
-
-function checkStyles(th: boolean): StyleValue {
-  if (props.checkable) {
-    return {
-      zIndex: zIndex(th) + 1,
-      position: 'sticky',
-      left: props.detailed ? DETAIL_ROW_WIDTH + 'px' : 0,
-      width: CHECK_ROW_WIDTH + 'px',
-      minWidth: CHECK_ROW_WIDTH + 'px',
-      maxWidth: CHECK_ROW_WIDTH + 'px',
-    };
-  }
-  return {};
-}
-
-function firstColStyles(th: boolean): StyleValue {
-  let left = 0;
-  if (props.checkable) {
-    left += CHECK_ROW_WIDTH;
-  }
-  if (props.detailed) {
-    left += DETAIL_ROW_WIDTH;
-  }
-  return {
-    zIndex: zIndex(th) + 1,
-    position: 'sticky',
-    left: left + 'px',
-    borderRight: horizontalScrolling.value ? '1px solid #e2e8f0' : 'none',
-  };
-}
-
-function scrollTop() {
-  if (scrollable.value) {
-    scrollable.value.scrollTo({ top: 0, behavior: 'smooth' });
-  }
-}
-
 provide('addColumn', addColumn);
 provide('removeColumn', removeColumn);
 provide('nextSequence', nextSequence);
 
+const baseTableRef = ref<InstanceType<typeof BaseTable> | null>(null);
+
 defineExpose({
   newColumns,
   uncheckAll,
-  scrollTop,
+  scrollTop: () => {
+    baseTableRef.value?.scrollTop();
+  },
 });
 </script>