@webitel/ui-datalist 26.12.6 → 26.12.7

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@webitel/ui-datalist",
-	"version": "26.12.6",
+	"version": "26.12.7",
 	"description": "Toolkit for building data lists in webitel ui system",
 	"scripts": {
 		"build:types": "vue-tsc -b tsconfig.build.json",

package/src/modules/headers/__tests__/createTableHeadersStore.spec.ts

@@ -146,6 +146,86 @@ describe('tableHeadersStoreBody', () => {
 		});
 	});
 
+	it('marks a resized column as resized', () => {
+		const store = createStore();
+
+		store.columnResize({
+			columnName: 'name',
+			columnWidth: '100px',
+		});
+
+		expect(store.headers.value[0]).toMatchObject({
+			width: '100px',
+			resized: true,
+		});
+		expect(store.headers.value[1].resized).toBeUndefined();
+	});
+
+	describe('column widths persistence', () => {
+		const resizedWidthsKey = `${id}/resizedColumnWidths`;
+		const legacyWidthsKey = `${id}/columnWidths`;
+
+		it('saves resized widths only, not default ones from header definitions', async () => {
+			const store = createStore();
+			store.headers.value[1].width = '300px'; // default width
+			await runWithRouter(() => store.setupPersistence());
+
+			store.columnResize({
+				columnName: 'name',
+				columnWidth: '100px',
+			});
+			await flushWrites();
+
+			expect(JSON.parse(localStorage.getItem(resizedWidthsKey) ?? '')).toEqual({
+				name: '100px',
+			});
+		});
+
+		it('restores saved widths as resized', async () => {
+			localStorage.setItem(
+				resizedWidthsKey,
+				JSON.stringify({
+					name: '100px',
+				}),
+			);
+
+			const store = await setUpStore();
+
+			expect(store.headers.value[0]).toMatchObject({
+				width: '100px',
+				resized: true,
+			});
+			expect(store.headers.value[1].resized).toBeUndefined();
+		});
+
+		it('restores legacy widths as plain widths, overridden by resized ones', async () => {
+			localStorage.setItem(
+				legacyWidthsKey,
+				JSON.stringify({
+					name: '50px',
+					subject: '60px',
+				}),
+			);
+			localStorage.setItem(
+				resizedWidthsKey,
+				JSON.stringify({
+					name: '100px',
+				}),
+			);
+
+			const store = await setUpStore();
+
+			expect(store.headers.value[0]).toMatchObject({
+				width: '100px',
+				resized: true,
+			});
+			expect(store.headers.value[1]).toMatchObject({
+				width: '60px',
+				resized: false,
+			});
+		});
+	});
+
 	describe('persistence', () => {
 		it('restores shown fields from the route query', async () => {
 			await router.push({

package/src/modules/headers/createTableHeadersStore.ts

@@ -81,6 +81,16 @@ export const tableHeadersStoreBody = ({
 		}, {});
 	});
 
+	// [Claude] widths of columns resized by the user only, default widths from header definitions are not included
+	const resizedColumnWidths = computed(() => {
+		return headers.value.reduce<Record<string, string>>((acc, header) => {
+			if (header.resized && header.width) {
+				acc[header.field] = header.width;
+			}
+			return acc;
+		}, {});
+	});
+
 	const $reset = () => {
 		headers.value = allowedHeaders;
 	};
@@ -294,29 +304,58 @@ export const tableHeadersStoreBody = ({
 			}),
 		});
 
+		/*
+		 * [Claude] stored under a new name: legacy "columnWidths" mixes resized widths with default ones,
+		 * so it can't tell which columns were resized. It's still restored, but as plain (min) widths
+		 */
+		const legacyColumnWidthsName = 'columnWidths';
+
+		const restoreWidths = async (
+			restore: (name: string) => Promise<unknown>,
+			name: string,
+			{
+				resized,
+			}: {
+				resized: boolean;
+			},
+		) => {
+			const value = (await restore(name)) as string;
+			if (!value) return;
+
+			const parsedWidths = JSON.parse(value);
+			headers.value = headers.value.map((header) =>
+				parsedWidths[header.field]
+					? {
+							...header,
+							width: parsedWidths[header.field],
+							resized,
+						}
+					: header,
+			);
+		};
+
 		const columnWidthsStorage = usePersistedStorage({
-			name: 'columnWidths',
-			value: columnWidths,
+			name: 'resizedColumnWidths',
+			value: resizedColumnWidths,
 			storages: [
 				PersistedStorageType.LocalStorage,
 			],
 			storagePath: id,
 			onStore: (save, { name }) => {
-				const value = JSON.stringify(columnWidths.value);
+				const value = JSON.stringify(resizedColumnWidths.value);
 				return save({
 					name,
 					value,
 				});
 			},
 			onRestore: async (restore, name) => {
-				const value = (await restore(name)) as string;
-				if (value) {
-					const parsedWidths = JSON.parse(value);
-					headers.value = headers.value.map((header) => ({
-						...header,
-						width: parsedWidths[header.field] || header.width,
-					}));
-				}
+				// [Claude] sequentially, so resized widths override legacy ones
+				await restoreWidths(restore, legacyColumnWidthsName, {
+					resized: false,
+				});
+				await restoreWidths(restore, name, {
+					resized: true,
+				});
 			},
 		});
 
@@ -355,6 +394,7 @@ export const tableHeadersStoreBody = ({
 
 		if (column) {
 			column.width = columnWidth;
+			column.resized = true;
 		}
 	};