@zeedhi/teknisa-components-vuetify 3.0.4 → 3.2.0

package/src/composables/useTableLayout.ts

@@ -1,290 +0,0 @@
-import { IIterable } from '@zeedhi/common';
-import { IDynamicFilterItem, IGroupedDataManager,
-	ITekGridLayout,
-	ITekGridLayoutColumn,
-	TekFilterHelper,
-	TekGridColumn,
-	TekRestDatasource, } from '@zeedhi/teknisa-components-common';
-import { IDictionary, Utils } from '@zeedhi/core';
-import cloneDeep from 'lodash.clonedeep';
-import { NotProvidedError } from '@zeedhi/vuetify';
-import { ComputedRef, UnwrapNestedRefs, computed, inject, nextTick, provide } from 'vue';
-
-export type DefaultLayout = {
-	originalDatasourceOrder: string[];
-	originalDatasourceFilter: IDictionary<any>;
-	originalColumnProps: ITekGridLayoutColumn[];
-	originalDatasourceDynamicFilter: IDictionary<IDynamicFilterItem[]>;
-};
-
-export type ApplyLayout = (params: {
-	layout?: ITekGridLayout;
-	defaultLayout: DefaultLayout;
-	changeLayoutCallback: (layout: ITekGridLayout) => void;
-}) => void;
-export type GetColumnElements = () => IDictionary<Element>;
-export type GetTableWidth = () => string;
-
-export function useTableLayout() {
-	const applyLayout = inject<ApplyLayout>('applyLayout');
-	const getColumnElements = inject<GetColumnElements>('getColumnElements');
-	const getTableWidth = inject<GetTableWidth>('getTableWidth');
-
-	if (!applyLayout) {
-		throw new NotProvidedError('applyLayout');
-	}
-
-	if (!getColumnElements) {
-		throw new NotProvidedError('getColumnElements');
-	}
-
-	if (!getTableWidth) {
-		throw new NotProvidedError('getTableWidth');
-	}
-
-	return { applyLayout, getColumnElements, getTableWidth };
-}
-
-export function provideTableLayout<T extends IIterable<TekGridColumn> & IGroupedDataManager>({
-	instance,
-	rootEl,
-}: {
-	instance: UnwrapNestedRefs<T>;
-	rootEl: ComputedRef<HTMLElement | undefined>;
-}) {
-	const tableElement = rootEl.value?.querySelector('table');
-
-	const columnDictionary = computed(() => getColumnDictionary(instance.columns));
-
-	const datasourceDynamicFilter = () => {
-		const datasource = instance.datasource;
-		if (datasource instanceof TekRestDatasource) return datasource.dynamicFilter;
-		return {};
-	};
-
-	const getColumnDictionary = (columns: UnwrapNestedRefs<TekGridColumn>[]) => {
-		const columnDictionary: IDictionary<UnwrapNestedRefs<TekGridColumn>> = {};
-		columns.forEach((column: UnwrapNestedRefs<TekGridColumn>) => {
-			columnDictionary[column.name] = column;
-		});
-		return columnDictionary;
-	};
-
-	const addMissingColumns = (layout: ITekGridLayout) => {
-		const layoutColumnNames: string[] = layout.columns?.map((column) => column.name) || [];
-		const columnNames: string[] = Object.keys(columnDictionary.value);
-		columnNames.forEach((columnName) => {
-			if (!layoutColumnNames.includes(columnName)) {
-				layout.columns?.push(columnDictionary.value[columnName]);
-			}
-		});
-	};
-
-	const setHelperValue = (column: any, value: string | IDictionary<any>) => {
-		if (column instanceof TekGridColumn) {
-			if (!Array.isArray(column.filterProps) && typeof value === 'string') {
-				column.filterProps.helperValue = value;
-			} else if (Array.isArray(column.filterProps) && Array.isArray(value)) {
-				column.filterProps.forEach((prop: any, index: number) => {
-					prop.value = value[index];
-				});
-			}
-		}
-	};
-
-	const getHelperValues = (dynamicFilter: IDictionary<IDynamicFilterItem[]>, columns: any[]) => {
-		const filter = cloneDeep(dynamicFilter);
-		Object.keys(filter).forEach((columnName) => {
-			const filterOptions = filter[columnName];
-			const column = columns[columns.findIndex((col) => col.name === columnName)];
-			const { filterHelperValue } = column;
-
-			filterOptions.forEach((item) => {
-				if (['IN', 'NOT_IN', 'BETWEEN'].includes(item.operation) && !Array.isArray(item.value)) {
-					item.value = item.value.split(';');
-				}
-
-				let helperValue = '';
-				if (!Array.isArray(filterHelperValue)) {
-					helperValue = filterHelperValue;
-				} else {
-					Object.keys(filterHelperValue).forEach((key: any) => {
-						const value = filterHelperValue[key] || '';
-						if (`${item.relation || 'AND'}-${item.operation || 'CONTAINS'}` === key) {
-							helperValue = value;
-						}
-					});
-				}
-
-				if (helperValue) {
-					const columnObj = instance.getColumn(column.name);
-					item.value = TekFilterHelper.getValue(helperValue, columnObj as any);
-				}
-			});
-		});
-
-		return filter;
-	};
-
-	/**
-	 * Applies the default grid layout
-	 * @returns a boolean to indicate whether the group parameters changed
-	 */
-	const applyDefaultLayout = (defaultLayout: DefaultLayout) => {
-		let groupParamsChanged = false;
-
-		instance.datasource.order = [...defaultLayout.originalDatasourceOrder];
-		instance.datasource.filter = { ...defaultLayout.originalDatasourceFilter };
-		if (instance.datasource instanceof TekRestDatasource) {
-			instance.datasource.dynamicFilter = getHelperValues(
-				defaultLayout.originalDatasourceDynamicFilter,
-				defaultLayout.originalColumnProps,
-			);
-		}
-		instance.columns = defaultLayout.originalColumnProps.map((defaultColumn) => {
-			const col = columnDictionary.value[defaultColumn.name];
-
-			groupParamsChanged =
-				groupParamsChanged ||
-				col.grouped !== defaultColumn.grouped ||
-				col.groupOpened !== defaultColumn.groupOpened ||
-				col.aggregation !== defaultColumn.aggregation;
-
-			col.isVisible = defaultColumn.isVisible ?? col.isVisible;
-			col.label = defaultColumn.label ?? col.label;
-			col.align = defaultColumn.align ?? col.align;
-			col.fixed = defaultColumn.fixed ?? col.fixed;
-			col.grouped = defaultColumn.grouped ?? col.grouped;
-			col.groupOpened = defaultColumn.groupOpened ?? col.groupOpened;
-			col.aggregation = defaultColumn.aggregation ?? col.aggregation;
-			col.minWidth = defaultColumn.minWidth ?? col.minWidth;
-			col.maxWidth = defaultColumn.maxWidth ?? col.maxWidth;
-			col.width = defaultColumn.width ?? col.width;
-
-			setHelperValue(col, defaultColumn.filterHelperValue || '');
-			return col;
-		});
-
-		if (tableElement) {
-			tableElement.style.width = '100%';
-			const columnElements = Array.from(tableElement.querySelectorAll('tr th:not(.selectable)'));
-			columnElements.forEach((item) => {
-				(item as HTMLElement).style.width = 'unset';
-			});
-		}
-
-		return groupParamsChanged;
-	};
-
-	const applyNewLayout = (layout: ITekGridLayout, changeLayoutCallback: (layout: ITekGridLayout) => void) => {
-		const gridColumnNames: string[] = Object.keys(columnDictionary.value);
-		let layoutChanged = false;
-
-		// removes columns that are in the layout but not in grid
-		layout.columns = layout.columns?.filter((column: any) => {
-			const isInGrid = gridColumnNames.includes(column.name);
-			if (!isInGrid) layoutChanged = true;
-
-			return isInGrid;
-		});
-
-		if (layoutChanged) {
-			changeLayoutCallback(layout);
-		}
-
-		if (tableElement) tableElement.style.width = layout.gridWidth || 'auto';
-
-		instance.datasource.order = layout.order !== undefined ? layout.order : instance.datasource.order;
-		instance.datasource.filter = layout.filter !== undefined ? layout.filter : instance.datasource.filter;
-		if (instance.datasource instanceof TekRestDatasource && layout.dynamicFilter !== undefined) {
-			instance.datasource.dynamicFilter = getHelperValues(layout.dynamicFilter, layout.columns || instance.columns);
-		}
-
-		if (layout.columns) {
-			instance.columns = layout.columns.map((column) => {
-				const col = columnDictionary.value[column.name];
-				col.label = column.label !== undefined ? column.label : col.label;
-				col.align = column.align !== undefined ? column.align : col.align;
-				col.isVisible = column.isVisible !== undefined ? column.isVisible : col.isVisible;
-				col.fixed = !!column.fixed;
-				col.grouped = !!column.grouped;
-				col.groupOpened = !!column.groupOpened;
-				col.aggregation = column.aggregation;
-				col.minWidth = column.minWidth || '';
-				col.maxWidth = column.maxWidth || '';
-				col.width = column.width;
-				setHelperValue(col, column.filterHelperValue || '');
-
-				return col;
-			});
-
-			// wait to change column orders
-			nextTick(() => {
-				gridColumnNames.forEach((_key, index) => {
-					const columnElement: HTMLElement | null | undefined = tableElement?.querySelector(
-						`tr th:not(.selectable)[index="${index}"]`,
-					);
-					if (columnElement) {
-						columnElement.style.width = layout.columns![index].width || 'unset';
-					}
-				});
-			});
-		}
-	};
-
-	const applyLayout: ApplyLayout = ({
-		layout,
-		defaultLayout,
-		changeLayoutCallback,
-	}: {
-		defaultLayout: DefaultLayout;
-		layout?: ITekGridLayout;
-		changeLayoutCallback: (layout: ITekGridLayout) => void;
-	}) => {
-		const oldOrder = instance.datasource.order;
-		const oldFilter = instance.datasource.filter;
-		const oldDynamicFilter = datasourceDynamicFilter();
-
-		let groupParamsChanged = false;
-
-		if (layout) {
-			addMissingColumns(layout);
-			applyNewLayout(layout, changeLayoutCallback);
-		} else {
-			groupParamsChanged = applyDefaultLayout(defaultLayout);
-		}
-
-		if (
-			(!Utils.isEqual(instance.datasource.order, oldOrder) ||
-				!Utils.isEqual(instance.datasource.filter, oldFilter) ||
-				!Utils.isEqual(datasourceDynamicFilter(), oldDynamicFilter)) &&
-			!groupParamsChanged
-		) {
-			// Se os parametros de agrupamento tiverem sido alterados um get é feito automaticamente
-			instance.loadAfterTasks();
-		}
-	};
-
-	const getColumnElements: GetColumnElements = () => {
-		const elementDict: IDictionary<Element> = {};
-
-		const columnElements = tableElement?.querySelectorAll('tr th:not(.selectable)[index]') || [];
-
-		columnElements.forEach((el) => {
-			const index = el.getAttribute('index');
-			if (index === null) return;
-
-			elementDict[index] = el;
-		});
-
-		return elementDict;
-	};
-
-	const getTableWidth: GetTableWidth = () => {
-		return tableElement ? window.getComputedStyle(tableElement).width : 'auto';
-	};
-
-	provide('applyLayout', applyLayout);
-	provide('getColumnElements', getColumnElements);
-	provide('getTableWidth', getTableWidth);
-}

package/src/shims-vue.d.ts

@@ -1,6 +0,0 @@
-declare module '*.vue' {
-  import type { DefineComponent } from 'vue';
-
-	const component: DefineComponent<object, object, any>;
-	export default component;
-}

package/src/utils/isArrayOperation.ts

@@ -1,5 +0,0 @@
-const isArrayOperation = (operation: string) => {
-	return ['IN', 'NOT_IN', 'BETWEEN'].includes(operation);
-};
-
-export { isArrayOperation };

package/tsconfig.eslint.json

@@ -1,9 +0,0 @@
-{
-  // extend your base config so you don't have to redefine your compilerOptions
-  "extends": "./tsconfig.json",
-  "include": [
-    "./src/**/*.ts",
-    "./tests/**/*.ts",
-  ],
-  "exclude": ["node_modules"]
-}

package/types/components/index.d.ts

@@ -1,5 +0,0 @@
-import type { App, DefineComponent } from 'vue';
-import type { IDictionary } from '@zeedhi/core';
-export * from './tek-breadcrumb-header/TekBreadcrumbHeader';
-export declare const components: IDictionary<DefineComponent<any, any, any>>;
-export declare function RegisterComponents(app: App): void;

package/types/components/public.d.ts

@@ -1,9 +0,0 @@
-import TekBreadcrumbHeader from './tek-breadcrumb-header/TekBreadcrumbHeader';
-import TekGrid from './tek-grid/TekGrid';
-import TekGridColumnFilter from './tek-grid/column-filter/TekGridColumnFilter';
-import TekGridColumnsButton from './tek-grid/columns-button/TekGridColumnsButton';
-import TekGridFilterButton from './tek-grid/filter-button/TekGridFilterButton';
-import TekGridLayoutOptions from './tek-grid/layout-options/TekGridLayoutOptions';
-import TekUserInfo from './tek-user-info/TekUserInfo';
-import TekUserInfoList from './tek-user-info/TekUserInfoList';
-export { TekBreadcrumbHeader, TekGrid, TekGridColumnFilter, TekGridColumnsButton, TekGridFilterButton, TekGridLayoutOptions, TekUserInfo, TekUserInfoList, };