sprintify-ui 0.8.58 → 0.8.59

package/src/components/BaseDataTableTemplate.vue

@@ -25,7 +25,7 @@
       <BaseTableHead v-if="newColumns.length">
         <BaseTableRow>
           <BaseTableHeader
-            v-for="(column, index) in visibleColumns"
+            v-for="(column, index) in visibleColumnsInternal"
             :key="column.newKey + ':' + index + 'header'"
             :style="column.style"
             class="bg-slate-50"
@@ -112,7 +112,7 @@
             v-bind="rowBindings(row, index)"
           >
             <BaseTableCell
-              v-for="(column, columnIndex) in visibleColumns"
+              v-for="(column, columnIndex) in visibleColumnsInternal"
               :key="column.newKey + index + ':' + columnIndex"
               :class="[column.class, column.numeric ? 'tabular-nums' : '']"
               :align="column.align"
@@ -209,6 +209,7 @@ import BaseTableBody from './BaseTableBody.vue';
 import BaseTableRow from './BaseTableRow.vue';
 import BaseTableCell from './BaseTableCell.vue';
 import { RouteLocationRaw } from 'vue-router';
+import { customKeyActions } from '@/services/table/customKeyActions';
 
 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';
@@ -235,6 +236,10 @@ const props = defineProps({
     default: undefined,
     type: Array as PropType<string[]>,
   },
+  columnOrder: {
+    default: undefined,
+    type: Array as PropType<string[]>,
+  },
   /** Allow row details  */
   detailed: {
     default: false,
@@ -323,41 +328,85 @@ const lastCheckedRowIndex = ref<number | null>(null);
 const currentSortColumn = ref<BaseTableColumnData | null>(null);
 const isAsc = ref(true);
 const defaultSlots = ref<BaseTableColumnData[]>([]);
-const sequence = ref(1);
 
 const slot = ref<HTMLElement | null>(null);
 
 const newColumns = computed(() => {
-  return defaultSlots.value;
+  const cols = defaultSlots.value;
+
+  if (props.columnOrder && props.columnOrder.length) {
+
+    const colOrder = props.columnOrder;
+
+    return cols
+      .sort((a, b) => {
+
+        // Always put actions column at the end
+
+        if (a.newKey === customKeyActions) {
+          return 1;
+        }
+
+        if (b.newKey === customKeyActions) {
+          return -1;
+        }
+
+        // If not found, put it at the end
+
+        const existsA = colOrder.includes(a.newKey);
+        const existsB = colOrder.includes(b.newKey);
+
+        if (!existsA && !existsB) {
+          return 0;
+        }
+
+        if (!existsA) {
+          return 1;
+        }
+
+        if (!existsB) {
+          return -1;
+        }
+
+        // Sort based on the order
+
+        return colOrder.indexOf(a.newKey) - colOrder.indexOf(b.newKey);
+      });
+  }
+
+  return cols;
 });
 
-const visibleColumns = computed(() => {
+
+const visibleColumnsInternal = computed(() => {
+
   if (!newColumns.value) {
-    return newColumns.value;
+    return [];
   }
 
-  return newColumns.value.filter((column: BaseTableColumnData) => {
-    if (column.toggle === false) {
-      return true;
-    }
+  return newColumns.value
+    .filter((column: BaseTableColumnData) => {
+      if (column.toggle === false) {
+        return true;
+      }
 
-    if (!isArray(props.visibleColumns)) {
-      return true;
-    }
+      if (!isArray(props.visibleColumns)) {
+        return true;
+      }
 
-    if (props.visibleColumns.includes(column.newKey)) {
-      return true;
-    }
+      if (props.visibleColumns.includes(column.newKey)) {
+        return true;
+      }
 
-    return false;
-  });
+      return false;
+    });
 });
 
 /**
  * Return total column count based if it's checkable or expanded
  */
 const columnCount = computed(() => {
-  let count = visibleColumns.value.length;
+  let count = visibleColumnsInternal.value.length;
   count += props.checkable ? 1 : 0;
   count += props.detailed ? 1 : 0;
 
@@ -689,10 +738,6 @@ function onCellClick(row: CollectionItem, index: number, column: BaseTableColumn
   };
 }
 
-function nextSequence() {
-  return sequence.value++;
-}
-
 let warningNoRowKeyFoundShown = false;
 
 function getRowKey(row: Row): string {
@@ -735,10 +780,42 @@ function getRowKey(row: Row): string {
 
 provide('addColumn', addColumn);
 provide('removeColumn', removeColumn);
-provide('nextSequence', nextSequence);
 
 const baseTableRef = ref<InstanceType<typeof BaseTable> | null>(null);
 
+
+/*
+|--------------------------------------------------------------------------
+| Checks
+|--------------------------------------------------------------------------
+*/
+
+watch(
+  () => newColumns.value.map((item) => item.newKey),
+  (keys: string[]) => {
+
+    // check duplicates
+
+    const duplicates = keys.reduce((acc, key, index) => {
+      if (keys.indexOf(key) !== index && !acc.includes(key)) {
+        acc.push(key);
+      }
+
+      return acc;
+    }, [] as string[]);
+
+    if (duplicates.length) {
+      throw new Error(`Duplicate BaseTableColumn keys found: ${duplicates.join(', ')}`);
+    }
+  }
+)
+
+/*
+|--------------------------------------------------------------------------
+| Expose
+|--------------------------------------------------------------------------
+*/
+
 defineExpose({
   newColumns,
   uncheckAll,

package/src/components/BaseDraggable.vue

@@ -2,7 +2,7 @@
   <div ref="elementsRef">
     <slot
       v-for="(element, index) in modelValue"
-      :key="getKey(element, index)"
+      :key="getKey(element)"
       name="item"
       :element="element"
       :index="index"
@@ -11,22 +11,22 @@
 </template>
 
 <script lang="ts" setup>
-import { cloneDeep } from 'lodash';
+import { cloneDeep, uniqueId } from 'lodash';
 import Sortable from 'sortablejs';
 
 const props = defineProps<{
   modelValue: any[];
   itemKey: string;
   handle: string;
-  disabled: boolean;
+  disabled?: boolean;
 }>();
 
 const emit = defineEmits(['update:modelValue']);
 
 const elementsRef = ref<HTMLElement | null>(null);
 
-function getKey(element: any, index: number) {
-  return element[props.itemKey] ?? index;
+function getKey(element: any) {
+  return element[props.itemKey] ?? uniqueId();
 }
 
 let sortable = null as Sortable | null;

package/src/components/BaseTableColumn.vue

@@ -89,12 +89,10 @@ export default defineComponent({
     },
   },
   setup() {
-    const nextSequence = inject('nextSequence') as any;
     const addColumn = inject('addColumn') as any;
     const removeColumn = inject('removeColumn') as any;
 
     return {
-      nextSequence,
       addColumn,
       removeColumn,
     };
@@ -113,17 +111,18 @@ export default defineComponent({
     },
   },
   created() {
-    if (this.toggle && !this.customKey) {
-      throw new Error(
-        'BaseTableColumn: customKey props is required when toggle props is true'
-      );
-    }
-
     if (this.customKey) {
       this.newKey = this.customKey + '';
+    } else if (this.field) {
+      this.newKey = this.field + '';
+    } else if (this.label) {
+      this.newKey = this.label + '';
     } else {
-      this.newKey = this.nextSequence();
+      throw new Error(
+        'BaseTableColumn: customKey or field prop is required'
+      );
     }
+
     this.addColumn(this);
   },
   beforeUnmount() {

package/src/services/table/customKeyActions.ts

@@ -0,0 +1,3 @@
+const customKeyActions = 'sprintify_ui_actions';
+
+export { customKeyActions };