sprintify-ui 0.8.59 → 0.8.61

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

@@ -1101,6 +1101,14 @@ declare const __VLS_component: import("vue").DefineComponent<import("vue").Extra
         default: boolean;
         type: BooleanConstructor;
     };
+    /**
+     * Storage key to save visible columns and order settings.
+     * By default, it uses the current URL path, without query params.
+     */
+    storageKey: {
+        type: StringConstructor;
+        default: string;
+    };
 }>, {
     fetch: typeof fetch;
     fetchWithoutLoading: typeof fetchWithoutLoading;
@@ -1349,6 +1357,14 @@ declare const __VLS_component: import("vue").DefineComponent<import("vue").Extra
         default: boolean;
         type: BooleanConstructor;
     };
+    /**
+     * Storage key to save visible columns and order settings.
+     * By default, it uses the current URL path, without query params.
+     */
+    storageKey: {
+        type: StringConstructor;
+        default: string;
+    };
 }>> & Readonly<{
     onDelete?: ((...args: any[]) => any) | undefined;
     "onUpdate:checked-rows"?: ((...args: any[]) => any) | undefined;
@@ -1389,6 +1405,7 @@ declare const __VLS_component: import("vue").DefineComponent<import("vue").Extra
     toggleable: boolean;
     rowActions: RowAction[];
     numberOfVisibleRowActions: number;
+    storageKey: string;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
 export default _default;

package/dist/types/utils/storage.d.ts

@@ -0,0 +1,2 @@
+declare const storageKeyPrefix = "sui.";
+export { storageKeyPrefix };

package/package.json

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

package/src/components/BaseDataIteratorSectionColumns.vue

@@ -1,15 +1,30 @@
 <template>
   <div class="-mx-4 -my-2">
+
+    <div class="px-4 w-full">
+      <BaseInput 
+        v-model="search" 
+        size="sm" 
+        icon-left="heroicons:magnifying-glass"
+        class="w-full mb-3" 
+        :placeholder="t('sui.search')"
+      />
+    </div>
+
     <BaseDraggable
-      :model-value="columns"
+      :model-value="filteredColumns"
       item-key="newKey"
       handle=".handle"
+      :disabled="dragDisabled"
       @update:model-value="onDragUpdate"
     >
       <template #item="{ element }">
-        <div class="flex items-center border-b">
+        <div class="flex items-center border-t">
 
-          <div class="handle shrink-0 cursor-move relative py-1 pl-4 pr-1 -left-1">
+          <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"
@@ -49,6 +64,8 @@ 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: {
@@ -94,6 +111,20 @@ watch(
   { 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;
 
@@ -110,7 +141,10 @@ 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.vue

@@ -256,6 +256,7 @@ import { useInputSize } from '@/composables/inputSize';
 import BaseButton from './BaseButton.vue';
 import BaseDataTableTemplate from './BaseDataTableTemplate.vue';
 import { customKeyActions } from '@/services/table/customKeyActions';
+import { storageKeyPrefix } from '@/utils/storage';
 
 const http = config.http;
 
@@ -555,6 +556,15 @@ const props = defineProps({
     default: false,
     type: Boolean,
   },
+
+  /**
+   * Storage key to save visible columns and order settings.
+   * By default, it uses the current URL path, without query params.
+   */
+  storageKey: {
+    type: String,
+    default: window.location.pathname,
+  },
 });
 
 const sizeInternal = useInputSize(props.size);
@@ -647,6 +657,8 @@ const onDelete = (row: CollectionItem) => {
     });
 };
 
+const componentStorageKey = 'base_data_table.';
+
 /*
 |--------------------------------------------------------------------------
 | Toggle columns
@@ -656,8 +668,7 @@ const onDelete = (row: CollectionItem) => {
 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 = storageKeyPrefix + componentStorageKey + props.storageKey + '.visible_columns';
 
 const visibleColumnsFromStorage = JSON.parse(
   localStorage.getItem(VISIBLE_COLUMNS_LOCAL_STORAGE_KEY) + ''
@@ -712,8 +723,7 @@ function onUpdateVisibleColumn(columns: string[]) {
 
 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;
+const COLUMN_ORDER_LOCAL_STORAGE_KEY = storageKeyPrefix + componentStorageKey + props.storageKey + '.column_order';
 
 onMounted(() => {
   const columnOrderFromStorage = JSON.parse(

package/src/utils/storage.ts

@@ -0,0 +1,3 @@
+const storageKeyPrefix = 'sui.';
+
+export { storageKeyPrefix };