sprintify-ui 0.8.58 → 0.8.60

package/dist/types/components/BaseDataIteratorSectionColumns.vue.d.ts

@@ -9,8 +9,13 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         required: true;
         type: PropType<string[]>;
     };
+    columnOrder: {
+        required: true;
+        type: PropType<string[]>;
+    };
 }>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:visibleColumns": (...args: any[]) => void;
+    "update:columnOrder": (...args: any[]) => void;
 }, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     table: {
         required: true;
@@ -20,7 +25,12 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         required: true;
         type: PropType<string[]>;
     };
+    columnOrder: {
+        required: true;
+        type: PropType<string[]>;
+    };
 }>> & Readonly<{
     "onUpdate:visibleColumns"?: ((...args: any[]) => any) | undefined;
+    "onUpdate:columnOrder"?: ((...args: any[]) => any) | undefined;
 }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 export default _default;

package/dist/types/components/BaseDataTable.vue.d.ts

@@ -426,6 +426,7 @@ declare function __VLS_template(): {
                 maxHeight: number;
                 virtualScrolling: boolean;
                 visibleColumns: string[];
+                columnOrder: string[];
                 detailed: boolean;
                 checkable: boolean;
                 isRowCheckable: Function;
@@ -449,6 +450,7 @@ declare function __VLS_template(): {
                 readonly hasDetailedVisible: Function;
                 readonly maxHeight?: number | undefined;
                 readonly visibleColumns?: string[] | undefined;
+                readonly columnOrder?: string[] | undefined;
                 readonly rowTo?: ((row: CollectionItem) => RouteLocationRaw) | undefined;
                 readonly rowHref?: ((row: CollectionItem) => string) | undefined;
                 readonly onRowClick?: ((row: CollectionItem, index: number, event: MouseEvent) => void) | undefined;
@@ -475,6 +477,10 @@ declare function __VLS_template(): {
                     default: undefined;
                     type: PropType<string[]>;
                 };
+                columnOrder: {
+                    default: undefined;
+                    type: PropType<string[]>;
+                };
                 detailed: {
                     default: boolean;
                     type: BooleanConstructor;
@@ -541,7 +547,7 @@ declare function __VLS_template(): {
                 "onUpdate:openedDetailed"?: ((...args: any[]) => any) | undefined;
                 "onCell-click"?: ((...args: any[]) => any) | undefined;
                 "onRow-click"?: ((...args: any[]) => any) | undefined;
-            }>, "data" | "size" | "loading" | "sortField" | "sortDirection" | "maxHeight" | "virtualScrolling" | "visibleColumns" | "detailed" | "checkable" | "isRowCheckable" | "checkedRows" | "hasDetailedVisible" | "rowTo" | "rowHref" | "onRowClick" | "rowKey">;
+            }>, "data" | "size" | "loading" | "sortField" | "sortDirection" | "maxHeight" | "virtualScrolling" | "visibleColumns" | "columnOrder" | "detailed" | "checkable" | "isRowCheckable" | "checkedRows" | "hasDetailedVisible" | "rowTo" | "rowHref" | "onRowClick" | "rowKey">;
             $attrs: {
                 [x: string]: unknown;
             };
@@ -569,6 +575,10 @@ declare function __VLS_template(): {
                     default: undefined;
                     type: PropType<string[]>;
                 };
+                columnOrder: {
+                    default: undefined;
+                    type: PropType<string[]>;
+                };
                 detailed: {
                     default: boolean;
                     type: BooleanConstructor;
@@ -680,6 +690,7 @@ declare function __VLS_template(): {
                 maxHeight: number;
                 virtualScrolling: boolean;
                 visibleColumns: string[];
+                columnOrder: string[];
                 detailed: boolean;
                 checkable: boolean;
                 isRowCheckable: Function;
@@ -718,6 +729,7 @@ declare function __VLS_template(): {
             maxHeight: number;
             virtualScrolling: boolean;
             visibleColumns: string[];
+            columnOrder: string[];
             detailed: boolean;
             checkable: boolean;
             isRowCheckable: Function;
@@ -740,6 +752,10 @@ declare function __VLS_template(): {
                 default: undefined;
                 type: PropType<string[]>;
             };
+            columnOrder: {
+                default: undefined;
+                type: PropType<string[]>;
+            };
             detailed: {
                 default: boolean;
                 type: BooleanConstructor;
@@ -806,7 +822,7 @@ declare function __VLS_template(): {
             "onUpdate:openedDetailed"?: ((...args: any[]) => any) | undefined;
             "onCell-click"?: ((...args: any[]) => any) | undefined;
             "onRow-click"?: ((...args: any[]) => any) | undefined;
-        }>, "scrollTop" | "newColumns" | "uncheckAll" | ("data" | "size" | "loading" | "sortField" | "sortDirection" | "maxHeight" | "virtualScrolling" | "visibleColumns" | "detailed" | "checkable" | "isRowCheckable" | "checkedRows" | "hasDetailedVisible" | "rowTo" | "rowHref" | "onRowClick" | "rowKey")> & import("vue").ShallowUnwrapRef<{
+        }>, "scrollTop" | "newColumns" | "uncheckAll" | ("data" | "size" | "loading" | "sortField" | "sortDirection" | "maxHeight" | "virtualScrolling" | "visibleColumns" | "columnOrder" | "detailed" | "checkable" | "isRowCheckable" | "checkedRows" | "hasDetailedVisible" | "rowTo" | "rowHref" | "onRowClick" | "rowKey")> & import("vue").ShallowUnwrapRef<{
             newColumns: import("vue").ComputedRef<{
                 id: string;
                 label: string;

package/dist/types/components/BaseDataTableTemplate.vue.d.ts

@@ -144,6 +144,10 @@ declare const __VLS_component: import("vue").DefineComponent<import("vue").Extra
         default: undefined;
         type: PropType<string[]>;
     };
+    columnOrder: {
+        default: undefined;
+        type: PropType<string[]>;
+    };
     /** Allow row details  */
     detailed: {
         default: boolean;
@@ -261,6 +265,10 @@ declare const __VLS_component: import("vue").DefineComponent<import("vue").Extra
         default: undefined;
         type: PropType<string[]>;
     };
+    columnOrder: {
+        default: undefined;
+        type: PropType<string[]>;
+    };
     /** Allow row details  */
     detailed: {
         default: boolean;
@@ -346,6 +354,7 @@ declare const __VLS_component: import("vue").DefineComponent<import("vue").Extra
     maxHeight: number;
     virtualScrolling: boolean;
     visibleColumns: string[];
+    columnOrder: string[];
     detailed: boolean;
     checkable: boolean;
     isRowCheckable: Function;

package/dist/types/components/BaseDraggable.vue.d.ts

@@ -16,14 +16,14 @@ declare const __VLS_component: import("vue").DefineComponent<{
     modelValue: any[];
     itemKey: string;
     handle: string;
-    disabled: boolean;
+    disabled?: boolean;
 }, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:modelValue": (...args: any[]) => void;
 }, string, import("vue").PublicProps, Readonly<{
     modelValue: any[];
     itemKey: string;
     handle: string;
-    disabled: boolean;
+    disabled?: boolean;
 }> & Readonly<{
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
 }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

package/dist/types/components/BaseMediaGallery.vue.d.ts

@@ -60,8 +60,8 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
 }>, {
     size: number;
     disabled: boolean;
-    showRemove: boolean;
     draggable: boolean;
+    showRemove: boolean;
     itemMaxWidth: number;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 export default _default;

package/dist/types/components/BaseMediaGalleryItem.vue.d.ts

@@ -41,7 +41,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     onRemove?: ((...args: any[]) => any) | undefined;
 }>, {
     disabled: boolean;
-    showRemove: boolean;
     draggable: boolean;
+    showRemove: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 export default _default;

package/dist/types/components/BaseMediaLibrary.vue.d.ts

@@ -193,10 +193,10 @@ declare const __VLS_component: import("vue").DefineComponent<import("vue").Extra
     cropper: boolean | BaseCropperConfig | null;
     multiple: boolean;
     layout: "list" | "gallery" | "images";
+    draggable: boolean;
     maxSize: number;
     accept: string;
     acceptedExtensions: string[];
-    draggable: boolean;
     currentMedia: Media[];
     uploadUrl: string;
     pickerComponent: "BaseFilePicker" | "BaseFilePickerCrop";

package/dist/types/components/BaseMediaList.vue.d.ts

@@ -43,7 +43,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     onRemove?: ((...args: any[]) => any) | undefined;
 }>, {
     disabled: boolean;
-    showRemove: boolean;
     draggable: boolean;
+    showRemove: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 export default _default;

package/dist/types/components/BaseMediaListItem.vue.d.ts

@@ -43,7 +43,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     onUpdate?: ((...args: any[]) => any) | undefined;
 }>, {
     disabled: boolean;
-    showRemove: boolean;
     draggable: boolean;
+    showRemove: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 export default _default;

package/dist/types/components/BaseMediaPictures.vue.d.ts

@@ -52,7 +52,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
 }>, {
     size: number;
     disabled: boolean;
-    showRemove: boolean;
     draggable: boolean;
+    showRemove: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 export default _default;

package/dist/types/components/BaseMediaPicturesItem.vue.d.ts

@@ -50,7 +50,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
 }>, {
     size: number;
     disabled: boolean;
-    showRemove: boolean;
     draggable: boolean;
+    showRemove: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 export default _default;

package/dist/types/components/BaseTableColumn.vue.d.ts

@@ -83,7 +83,6 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         type: PropType<(row: CollectionItem, index: number, column: BaseTableColumnData, colIndex: number, event: MouseEvent) => void>;
     };
 }>, {
-    nextSequence: any;
     addColumn: any;
     removeColumn: any;
 }, {

package/dist/types/services/table/customKeyActions.d.ts

@@ -0,0 +1,2 @@
+declare const customKeyActions = "sprintify_ui_actions";
+export { customKeyActions };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sprintify-ui",
-  "version": "0.8.58",
+  "version": "0.8.60",
   "type": "module",
   "scripts": {
     "build": "rimraf dist && vue-tsc && vite build",

package/src/components/BaseDataIteratorSectionColumns.vue

@@ -1,29 +1,70 @@
 <template>
-  <ul>
-    <li
-      v-for="col in toggleableColumns"
-      :key="col.newKey"
+  <div class="-mx-4 -my-2">
+
+    <div class="px-4 w-full">
+      <BaseInput 
+        v-model="search" 
+        size="sm" 
+        class="w-full mb-2" 
+        :placeholder="t('sui.search')"
+      />
+    </div>
+
+    <BaseDraggable
+      :model-value="filteredColumns"
+      item-key="newKey"
+      handle=".handle"
+      :disabled="dragDisabled"
+      @update:model-value="onDragUpdate"
     >
-      <label class="cursor-pointer">
-        <input
-          :checked="visibleColumns.includes(col.newKey)"
-          type="checkbox"
-          class="mr-2 h-3.5 w-3.5 cursor-pointer rounded focus:ring-1 focus:ring-primary-300 focus:ring-offset-1"
-          :value="col.newKey"
-          @change="onVisibleColumnChange($event, col.newKey)"
-        >
-        <span class="text-xs text-slate-700">
-          {{ col.label }}
-        </span>
-      </label>
-    </li>
-  </ul>
+      <template #item="{ element }">
+        <div class="flex items-center border-b">
+
+          <div 
+            class="handle shrink-0 relative py-1 pl-4 pr-1 -left-1"
+            :class="[dragDisabled ? 'cursor-not-allowed opacity-50' : 'cursor-move']"
+          >
+            <BaseIcon
+              icon="mdi:drag"
+              class="text-slate-400 w-5 h-5"
+            />
+          </div>
+
+          <div class="grow py-1.5 pr-4">      
+            <label class="flex items-center gap-1" :class="[element.toggle ? 'cursor-pointer' : 'cursor-not-allowed']">
+              <input
+                :checked="visibleColumns.includes(element.newKey)"
+                type="checkbox"
+                :disabled="!element.toggle"
+                class="mr-2 shrink-0 h-3.5 w-3.5 rounded focus:ring-1 focus:ring-primary-300 focus:ring-offset-1"
+                :class="[element.toggle ? 'cursor-pointer' : 'cursor-not-allowed border-slate-300 bg-slate-100']"
+                :value="element.newKey"
+                @change="onVisibleColumnChange($event, element.newKey)"
+              >
+              <span 
+                class="text-xs grow leading-tight"
+                :class="[element.toggle ? 'text-slate-700' : 'text-slate-400']"
+              >
+                {{ element.label }}
+              </span>
+            </label>
+          </div>
+        </div>
+      </template>
+    </BaseDraggable>
+  </div> 
 </template>
 
 <script lang="ts" setup>
 import { cloneDeep } from 'lodash';
 import { PropType } from 'vue';
 import BaseDataTableTemplate from './BaseDataTableTemplate.vue';
+import BaseDraggable from './BaseDraggable.vue';
+import { BaseIcon } from '.';
+import { BaseTableColumnData } from '@/types';
+import { customKeyActions } from '@/services/table/customKeyActions';
+import BaseInput from './BaseInput.vue';
+import { t } from '@/i18n';
 
 const props = defineProps({
   table: {
@@ -34,9 +75,16 @@ const props = defineProps({
     required: true,
     type: Array as PropType<string[]>,
   },
+  columnOrder: {
+    required: true,
+    type: Array as PropType<string[]>,
+  },
 });
 
-const emit = defineEmits(['update:visibleColumns']);
+const emit = defineEmits([
+  'update:visibleColumns',
+  'update:columnOrder'
+]);
 
 const toggleableColumns = computed(() => {
   const tableVue = props.table;
@@ -49,9 +97,33 @@ const toggleableColumns = computed(() => {
     return [];
   }
 
-  return tableVue.newColumns.filter((c) => c.toggle);
+  return tableVue.newColumns.filter((col) => col.newKey != customKeyActions);
 });
 
+const columns = ref([] as BaseTableColumnData[]);
+
+watch(
+  toggleableColumns,
+  (newVal) => {
+    columns.value = newVal;
+  },
+  { immediate: true }
+);
+
+// Search
+
+const search = ref('');
+
+const filteredColumns = computed(() => {
+  return columns.value.filter((col) => col.label.toLowerCase().includes(search.value.toLowerCase()));
+});
+
+const dragDisabled = computed(() => {
+  return filteredColumns.value.length != columns.value.length;
+});
+
+// Visible columns
+
 function onVisibleColumnChange(event: any, newKey: string) {
   const checked = event.target.checked as boolean;
 
@@ -67,4 +139,11 @@ function onVisibleColumnChange(event: any, newKey: string) {
 
   emit('update:visibleColumns', newVisibleColumns);
 }
+
+// Drag
+
+function onDragUpdate(value: BaseTableColumnData[]) {
+  emit('update:columnOrder', value.map((v) => v.newKey));
+}
+
 </script>

package/src/components/BaseDataTable.stories.js

@@ -31,7 +31,7 @@ export default {
   args: {
     url: "https://effettandem.com/api/content/articles",
     urlQuery: {
-      per_page: 100,
+      per_page: 32,
     },
     historyMode: false,
   },

package/src/components/BaseDataTable.vue

@@ -78,6 +78,7 @@
           :sort-direction="dataIteratorProps.sortDirection"
           :max-height="maxHeight"
           :visible-columns="visibleColumns"
+          :column-order="columnOrder"
           :size="sizeInternal.size.value"
           :row-to="rowToInternal"
           :row-href="rowHref"
@@ -95,7 +96,7 @@
               :visible="rowActionsInternal.length > 0"
               :toggle="false"
               ignore-row-interactions
-              custom-key="actions"
+              :custom-key="customKeyActions"
               class="overflow-hidden"
             >
               <div class="flex justify-end gap-1 text-right w-full">
@@ -206,9 +207,11 @@
       #columns
     >
       <BaseDataIteratorSectionColumns
-        v-model:visibleColumns="visibleColumns"
         :table="table"
+        :visibleColumns="visibleColumns"
+        :column-order="columnOrder"
         @update:visible-columns="onUpdateVisibleColumn"
+        @update:column-order="onUpdateColumnOrder"
       />
     </template>
 
@@ -252,6 +255,7 @@ import { Size } from '@/utils/sizes';
 import { useInputSize } from '@/composables/inputSize';
 import BaseButton from './BaseButton.vue';
 import BaseDataTableTemplate from './BaseDataTableTemplate.vue';
+import { customKeyActions } from '@/services/table/customKeyActions';
 
 const http = config.http;
 
@@ -653,8 +657,7 @@ const visibleColumns = ref<string[]>([]);
 
 // Find visible columns in local storage
 const VISIBLE_COLUMNS_LOCAL_STORAGE = 'sprintify.visible_columns.';
-const VISIBLE_COLUMNS_LOCAL_STORAGE_KEY =
-  VISIBLE_COLUMNS_LOCAL_STORAGE + window.location.pathname;
+const VISIBLE_COLUMNS_LOCAL_STORAGE_KEY = VISIBLE_COLUMNS_LOCAL_STORAGE + window.location.pathname;
 
 const visibleColumnsFromStorage = JSON.parse(
   localStorage.getItem(VISIBLE_COLUMNS_LOCAL_STORAGE_KEY) + ''
@@ -691,13 +694,58 @@ const unWatchTable = watch(
 /**
  * Update local storage when check input update
  */
-function onUpdateVisibleColumn() {
+function onUpdateVisibleColumn(columns: string[]) {
+
+  visibleColumns.value = columns;
+
   localStorage.setItem(
     VISIBLE_COLUMNS_LOCAL_STORAGE_KEY,
     JSON.stringify(visibleColumns.value)
   );
 }
 
+/*
+|--------------------------------------------------------------------------
+| Order columns
+|--------------------------------------------------------------------------
+*/
+
+const columnOrder = ref<string[]>([]);
+
+const COLUMN_ORDER_LOCAL_STORAGE = 'sprintify.column_order.';
+const COLUMN_ORDER_LOCAL_STORAGE_KEY = COLUMN_ORDER_LOCAL_STORAGE + window.location.pathname;
+
+onMounted(() => {
+  const columnOrderFromStorage = JSON.parse(
+    localStorage.getItem(COLUMN_ORDER_LOCAL_STORAGE_KEY) + ''
+  ) as string[];
+
+  // If found, set columnOrder
+  if (
+    columnOrderFromStorage &&
+    isArray(columnOrderFromStorage) &&
+    columnOrderFromStorage.length > 0
+  ) {
+
+    const colKeys = table.value?.newColumns.map((c) => c.newKey) ?? [];
+
+    columnOrder.value = columnOrderFromStorage.filter((c) => {
+      return colKeys.includes(c);
+    });
+  }
+});
+
+function onUpdateColumnOrder(value: string[]) {
+
+  columnOrder.value = value;
+
+  localStorage.setItem(
+    COLUMN_ORDER_LOCAL_STORAGE_KEY,
+    JSON.stringify(value)
+  );
+
+}
+
 /*
 |--------------------------------------------------------------------------
 | Row Actions