sprintify-ui 0.6.53 → 0.6.56

package/src/components/BaseDataTableTemplate.vue

@@ -0,0 +1,887 @@
+<template>
+  <div
+    class="base-table relative w-full overflow-hidden"
+    :class="maxHeight ? 'base-table--has-max-height' : ''"
+  >
+    <div
+      ref="slot"
+      style="display: none"
+    >
+      <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"
+              >
+                <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"
+                  >
+                    <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)"
+                  >
+                    <button
+                      type="button"
+                      class="flex w-full items-center bg-transparent text-left text-sm font-medium leading-tight text-slate-900"
+                      :class="{
+                        'text-blue-600':
+                          column.sortable && currentSortColumn === column,
+                      }"
+                    >
+                      <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"
+                  >
+                    <input
+                      autocomplete="off"
+                      type="checkbox"
+                      :checked="isAllChecked"
+                      :disabled="isAllUncheckable"
+                      :class="checkboxStyle"
+                    >
+                  </th>
+                </tr>
+              </thead>
+
+              <tbody class="bg-white">
+                <template
+                  v-for="(row, index) in data"
+                  :key="getRowIndex(row, index)"
+                >
+                  <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 font-light"
+                      :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="getRowIndex(row, index) + 'detail'"
+                    >
+                      <td
+                        :colspan="columnCount"
+                        :class="borderBottomDetailClasses(index)"
+                      >
+                        <slot
+                          name="detail"
+                          :row="row"
+                          :index="index"
+                        />
+                      </td>
+                    </tr>
+                  </transition>
+                </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"
+              >
+                <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>
+  </div>
+</template>
+
+<script lang="ts">
+export default {
+  name: 'BaseDataTableTemplate',
+  inheritAttrs: false,
+};
+</script>
+
+<script lang="ts" setup>
+import { PropType, ref } from 'vue';
+import { BaseTableColumn, 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 { Size } from '@/utils/sizes';
+
+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;
+
+provide('table', getCurrentInstance());
+
+const props = defineProps({
+  /** Table data */
+  data: {
+    type: Array as PropType<Row[]>,
+    default: () => [],
+  },
+  /** Loading state */
+  loading: {
+    default: false,
+    type: Boolean,
+  },
+  visibleColumns: {
+    default: undefined,
+    type: Array as PropType<number[]>,
+  },
+  /** Allow row details  */
+  detailed: {
+    default: false,
+    type: Boolean,
+  },
+  /** Rows can be checked (multiple) */
+  checkable: {
+    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,
+    default: () => true,
+  },
+  /** Set which rows are checked, use v-model:checkedRows to make it two-way binding */
+  checkedRows: {
+    default: () => [],
+    type: Array as PropType<Row[]>,
+  },
+  /** Sets the default sort column field */
+  sortField: {
+    type: String,
+    default: '',
+  },
+  /**
+   * Sets the default sort column direction
+   * @values asc, desc
+   */
+  sortDirection: {
+    type: String,
+    default: 'asc',
+  },
+  /** Controls the visibility of the trigger that toggles the detailed rows. */
+  hasDetailedVisible: {
+    type: Function,
+    default: () => true,
+  },
+  /** Use a unique key of your data Object when use detailed or opened detailed. (id recommended) */
+  rowKey: {
+    type: String,
+    default: 'id',
+  },
+  /* Transition name to use when toggling row details. */
+  detailTransition: {
+    type: String,
+    default: '',
+  },
+  /* Max height (in px) */
+  maxHeight: {
+    default: undefined,
+    type: Number,
+  },
+  size: {
+    type: String as PropType<Size>,
+    default: 'md',
+  },
+});
+
+const emit = defineEmits([
+  'check',
+  'check-all',
+  'update:checkedRows',
+  'details-open',
+  'details-close',
+  'update:openedDetailed',
+  'sort',
+  'cell-click',
+]);
+
+const visibleDetailRows = ref<Row[]>([]);
+// eslint-disable-next-line vue/no-setup-props-destructure
+const newCheckedRows = ref<Row[]>([...props.checkedRows]);
+const lastCheckedRowIndex = ref<number | null>(null);
+const currentSortColumn = ref<BaseTableColumn | null>(null);
+const isAsc = ref(true);
+const defaultSlots = ref<BaseTableColumn[]>([]);
+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;
+});
+
+const visibleColumns = computed(() => {
+  if (!newColumns.value) {
+    return newColumns.value;
+  }
+
+  return newColumns.value.filter((column: BaseTableColumn) => {
+    if (column.toggle === false) {
+      return true;
+    }
+
+    if (!isArray(props.visibleColumns)) {
+      return true;
+    }
+
+    if (props.visibleColumns.includes(column.newKey)) {
+      return true;
+    }
+
+    return false;
+  });
+});
+
+/**
+ * Return total column count based if it's checkable or expanded
+ */
+const columnCount = computed(() => {
+  let count = visibleColumns.value.length;
+  count += props.checkable ? 1 : 0;
+  count += props.detailed ? 1 : 0;
+
+  return count;
+});
+
+/**
+ * Return if detailed row tabled
+ * will be with chevron column & icon or not
+ */
+const showDetailRowIcon = computed(() => {
+  return props.detailed;
+});
+
+/**
+ * When checkedRows prop change, update internal value without
+ * mutating original data.
+ */
+watch(
+  () => props.checkedRows,
+  (rows) => {
+    newCheckedRows.value = [...rows];
+  },
+  { deep: true }
+);
+
+watch(
+  () => props.sortField,
+  () => {
+    updateSortState();
+  }
+);
+
+watch(
+  () => props.sortDirection,
+  () => {
+    updateSortState();
+  }
+);
+
+onMounted(() => {
+  nextTick(() => {
+    updateSortState();
+  });
+});
+
+/**
+ * Sort the column.
+ * Toggle current direction on column if it's sortable
+ * and not just updating the prop.
+ */
+function sort(column: BaseTableColumn, updatingData = false, event = null) {
+  if (!column || !column.sortable) {
+    return;
+  }
+
+  if (!updatingData) {
+    isAsc.value =
+      column === currentSortColumn.value
+        ? !isAsc.value
+        : props.sortDirection.toLowerCase() !== 'desc';
+  }
+
+  /**
+   * @property {string} field column field
+   * @property {boolean} direction 'asc' or 'desc'
+   * @property {Event} event native event
+   */
+  emit('sort', column.field, isAsc.value ? 'asc' : 'desc', event);
+
+  currentSortColumn.value = column;
+}
+
+/**
+ * Check if the row is checked (is added to the array).
+ */
+function isRowChecked(row: Row): boolean {
+  return (
+    newCheckedRows.value.find((r) => r[props.rowKey] == row[props.rowKey]) !==
+    undefined
+  );
+}
+
+/**
+ * Check if all rows in the page are checkable.
+ */
+const isAllUncheckable = computed(() => {
+  const validData = props.data.filter((row) => props.isRowCheckable(row));
+  return validData.length === 0;
+});
+
+/**
+ * Check if all rows in the page are checked.
+ */
+const isAllChecked = computed(() => {
+  const validData = props.data.filter((row) => {
+    return props.isRowCheckable(row);
+  });
+
+  if (validData.length === 0) {
+    return false;
+  }
+
+  const missingChecked = validData.some((currentRow) => {
+    return !isRowChecked(currentRow);
+  });
+
+  return !missingChecked;
+});
+
+function getCheckedRowIndex(row: Row) {
+  return newCheckedRows.value.findIndex(
+    (r) => r[props.rowKey] == row[props.rowKey]
+  );
+}
+
+/**
+ * Remove a checked row from the array.
+ */
+function removeCheckedRow(row: Row) {
+  const index = getCheckedRowIndex(row);
+  if (index >= 0) {
+    newCheckedRows.value.splice(index, 1);
+  }
+}
+
+/**
+ * Header checkbox click listener.
+ * Add or remove all rows in current page.
+ */
+function checkAll() {
+  if (isAllChecked.value) {
+    newCheckedRows.value = [];
+  } else {
+    props.data.forEach((currentRow) => {
+      if (props.isRowCheckable(currentRow) && !isRowChecked(currentRow)) {
+        newCheckedRows.value.push(currentRow);
+      }
+    });
+  }
+
+  sendCheckUpdate();
+}
+
+/**
+ * Remove all rows in current page.
+ */
+function uncheckAll() {
+  newCheckedRows.value = [];
+
+  sendCheckUpdate();
+}
+
+function sendCheckUpdate() {
+  emit('check', newCheckedRows.value);
+  emit('check-all', newCheckedRows.value);
+  emit('update:checkedRows', newCheckedRows.value);
+}
+
+/**
+ * Row checkbox click listener.
+ */
+function checkRow(row: Row, index: number, event: MouseEvent) {
+  if (!props.isRowCheckable(row)) {
+    return;
+  }
+
+  const lastIndex = lastCheckedRowIndex.value;
+  lastCheckedRowIndex.value = index;
+
+  if (event.shiftKey && lastIndex !== null && index !== lastIndex) {
+    shiftCheckRow(row, index, lastIndex);
+  } else if (!isRowChecked(row)) {
+    newCheckedRows.value.push(row);
+  } else {
+    removeCheckedRow(row);
+  }
+
+  emit('check', newCheckedRows.value, row);
+
+  // Emit checked rows to update user variable
+  emit('update:checkedRows', newCheckedRows.value);
+}
+
+/**
+ * Check row when shift is pressed.
+ */
+function shiftCheckRow(row: Row, index: number, lastCheckedRowIndex: number) {
+  // Get the subset of the list between the two indices
+  const subset = props.data.slice(
+    Math.min(index, lastCheckedRowIndex),
+    Math.max(index, lastCheckedRowIndex) + 1
+  );
+
+  // Determine the operation based on the state of the clicked checkbox
+  const shouldCheck = !isRowChecked(row);
+
+  subset.forEach((item) => {
+    removeCheckedRow(item);
+    if (shouldCheck && props.isRowCheckable(item)) {
+      newCheckedRows.value.push(item);
+    }
+  });
+}
+
+/**
+ * Toggle to show/hide details slot
+ */
+function toggleDetails(row: Row) {
+  const found = isVisibleDetailRow(row);
+
+  if (found) {
+    closeDetailRow(row);
+    emit('details-close', row);
+  } else {
+    openDetailRow(row);
+    emit('details-open', row);
+  }
+
+  // Syncs the detailed rows with the parent component
+  emit('update:openedDetailed', visibleDetailRows.value);
+}
+
+function openDetailRow(row: Row) {
+  const index = getDetailedIndex(row);
+  visibleDetailRows.value.push(index);
+}
+
+function closeDetailRow(row: Row) {
+  const index = getDetailedIndex(row);
+  const i = visibleDetailRows.value.indexOf(index);
+  if (i >= 0) {
+    visibleDetailRows.value.splice(i, 1);
+  }
+}
+
+function isVisibleDetailRow(row: Row) {
+  const index = getDetailedIndex(row);
+  return visibleDetailRows.value.indexOf(index) >= 0;
+}
+
+function isActiveDetailRow(row: Row) {
+  return props.detailed && isVisibleDetailRow(row);
+}
+
+/**
+ * When the rowKey is defined we use the object[rowKey] as index.
+ * If not, use the object reference by default.
+ */
+function getDetailedIndex(row: Row) {
+  const key = props.rowKey;
+  return !key.length || !row ? row : row[key];
+}
+
+/**
+ * Update sort state
+ */
+function updateSortState() {
+  const sortField = props.sortField;
+
+  const sortDirection = props.sortDirection;
+
+  const sortColumn = newColumns.value.filter(
+    (column) => column.field === sortField
+  )[0];
+
+  // Set sort state
+
+  if (sortColumn) {
+    currentSortColumn.value = sortColumn;
+    isAsc.value = sortDirection.toLowerCase() !== 'desc';
+  } else {
+    currentSortColumn.value = null;
+    return;
+  }
+}
+
+/*
+|--------------------------------------------------------------------------
+| BaseTableColumns functions
+|--------------------------------------------------------------------------
+*/
+
+function addColumn(column: BaseTableColumn) {
+  defaultSlots.value.push(column);
+
+  const slotHTMLElement = slot.value as HTMLElement;
+
+  if (slotHTMLElement && slotHTMLElement.children) {
+    nextTick(() => {
+      const ids = defaultSlots.value
+        .map((it) => `[data-id="${it.newKey}"]`)
+        .join(',');
+
+      const sortedIds = Array.from(slotHTMLElement.querySelectorAll(ids)).map(
+        (el: Element) => el.getAttribute('data-id')
+      );
+
+      defaultSlots.value = defaultSlots.value.sort((a, b) => {
+        return (
+          sortedIds.indexOf(`${a.newKey}`) - sortedIds.indexOf(`${b.newKey}`)
+        );
+      });
+    });
+  }
+}
+
+function removeColumn(column: BaseTableColumn) {
+  defaultSlots.value = defaultSlots.value.filter(
+    (d) => d.newKey !== column.newKey
+  );
+}
+
+const borderClasses = 'border-b border-slate-200';
+
+function borderBottomClasses(index: number, row: Record<string, any>): string {
+  if (index < props.data.length - 1) {
+    return borderClasses;
+  }
+
+  if (isActiveDetailRow(row)) {
+    return borderClasses;
+  }
+
+  return '';
+}
+
+function borderBottomDetailClasses(index: number): string {
+  if (index < props.data.length - 1) {
+    return borderClasses;
+  }
+
+  return '';
+}
+
+function onColumnClick(
+  row: Row,
+  column: BaseTableColumn,
+  index: number,
+  colindex: number,
+  event: MouseEvent
+) {
+  if (column.clickable) {
+    emit('cell-click', row, column, index, colindex, event);
+  }
+}
+
+function nextSequence() {
+  return sequence.value++;
+}
+
+function getRowIndex(row: Row, index: number): string {
+  if (row.id) {
+    return row.id;
+  }
+  if (row.key) {
+    return row.key;
+  }
+  if (row.uuid) {
+    return row.uuid;
+  }
+  return index + '';
+}
+
+// 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): any {
+  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): any {
+  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): any {
+  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);
+
+defineExpose({
+  newColumns,
+  uncheckAll,
+  scrollTop,
+});
+</script>