@zeedhi/vuetify 1.112.0 → 3.0.1

package/src/composables/gridColumns.ts

@@ -0,0 +1,112 @@
+import { IIterable } from '@zeedhi/common';
+import { IDictionary } from '@zeedhi/core';
+import { ComputedRef, UnwrapNestedRefs, computed } from 'vue';
+
+/**
+ * Composable for components that can have their columns fixed
+ */
+export function useGridColumns<T extends IIterable>({
+	instance,
+	rootEl,
+	visibilityCondition = (column) => column.isVisible,
+}: {
+	instance: UnwrapNestedRefs<T>;
+	rootEl: ComputedRef<HTMLElement | undefined>;
+	visibilityCondition?: (column: any) => boolean;
+}) {
+	const headers = computed(() => {
+		return instance.columns.map((column) => {
+			const alignMap: IDictionary<'start' | 'end' | 'center'> = {
+				left: 'start',
+				center: 'center',
+				right: 'end',
+			};
+
+			const align = alignMap[column.align];
+
+			return {
+				align,
+				key: column.name,
+				title: column.label,
+				type: column.type,
+				overflow: column.overflow,
+				helperText: column.helperText,
+				width: column.width,
+				sortable: column.sortable,
+			};
+		});
+	});
+
+	const setViewGetWidth = () => {
+		instance.columns.forEach((column) => {
+			column.setViewGetWidth(() => {
+				const index = instance.columns.filter((col) => col.isVisible).findIndex((col) => col.name === column.name);
+
+				const el = rootEl.value as HTMLElement;
+
+				const colEl = el.querySelector(`
+          .zd-grid-table-header .zd-table-cell[index='${index}']
+        `);
+
+				return colEl?.clientWidth || 0;
+			});
+		});
+	};
+
+	setViewGetWidth();
+
+	/**
+	 * Sorts instance columns and filters out invisible columns
+	 * - fixed columns should come first
+	 * - actionFixed columns should come last
+	 * - maintain original order for other columns
+	 */
+	const visibleColumns = computed(() => {
+		// Create a map to store original indices for stability
+		const indexMap = new Map();
+		instance.columns.forEach((item, index) => {
+			indexMap.set(item, index);
+		});
+
+		// Create a copy of the array to avoid mutating the original
+		const sortedArray = [...instance.columns].filter((column) => visibilityCondition(column));
+
+		sortedArray.sort((a, b) => {
+			// Both are fixed - maintain original order
+			if (a.fixed && b.fixed) {
+				return indexMap.get(a) - indexMap.get(b);
+			}
+			// Only a is fixed - a comes first
+			if (a.fixed) {
+				return -1;
+			}
+			// Only b is fixed - b comes first
+			if (b.fixed) {
+				return 1;
+			}
+
+			// Both are actionFixed - maintain original order
+			if (a.actionFixed && b.actionFixed) {
+				return indexMap.get(a) - indexMap.get(b);
+			}
+			// Only a is actionFixed - a comes last
+			if (a.actionFixed) {
+				return 1;
+			}
+			// Only b is actionFixed - b comes last
+			if (b.actionFixed) {
+				return -1;
+			}
+
+			// Neither fixed nor actionFixed - maintain original order
+			return indexMap.get(a) - indexMap.get(b);
+		});
+
+		return sortedArray;
+	});
+
+	return {
+		headers,
+		visibleColumns,
+	};
+}

package/src/composables/gridSelection.ts

@@ -0,0 +1,113 @@
+import { IGrid } from '@zeedhi/common';
+import { IDictionary } from '@zeedhi/core';
+import { ComputedRef, UnwrapNestedRefs, computed, nextTick } from 'vue';
+
+/**
+ * Composable for grid components that have selection
+ */
+export function useGridSelection<T extends IGrid>({
+	instance,
+	rootEl,
+}: {
+	instance: UnwrapNestedRefs<T>;
+	rootEl: ComputedRef<HTMLElement | undefined>;
+}) {
+	const getKeysFrom = (data: IDictionary[]) => {
+		const { uniqueKey } = instance.datasource;
+		return data.map((toggledRow) => toggledRow[uniqueKey]);
+	};
+
+	const selectedRows = computed({
+		get: () => {
+			if (!instance.selectAllPages) return instance.selectedRows;
+
+			if (instance.selectionState.allSelected) {
+				const toggledKeys = getKeysFrom(instance.selectionState.except);
+				const data = instance.getData().filter((row) => {
+					const rowKey = instance.getRowKey(row);
+					return !instance.callDisableSelection(row) && !toggledKeys.includes(rowKey);
+				});
+
+				return data;
+			}
+
+			return instance.selectionState.except;
+		},
+		set: (rows: IDictionary[]) => {
+			if (instance.selectAllPages) return;
+			instance.selectedRows = sortSelectionArray(rows);
+		},
+	});
+
+	const sortSelectionArray = (arr: IDictionary[]) => {
+		return arr.sort((a, b) => {
+			const aKey = instance.getRowKey(a);
+			const bKey = instance.getRowKey(b);
+
+			if (aKey < bKey) {
+				return -1;
+			}
+			if (aKey > bKey) {
+				return 1;
+			}
+			// a must be equal to b
+			return 0;
+		});
+	};
+
+	const allselectedState = computed(() => {
+		if (instance.selectAllPages) {
+			if (instance.selectionState.except.length > 0) return 2;
+
+			if (!instance.selectionState.allSelected) return 0;
+
+			return 1;
+		}
+
+		const selectedKeys = getKeysFrom(instance.selectedRows);
+		const { uniqueKey } = instance.datasource;
+		const data = instance.getData();
+
+		let disabledCount = 0;
+		let pageSelectionCount = 0;
+
+		data.forEach((row) => {
+			if (instance.callDisableSelection(row)) {
+				disabledCount += 1;
+				return;
+			}
+
+			if (selectedKeys.includes(row[uniqueKey])) {
+				pageSelectionCount += 1;
+			}
+		});
+
+		if (pageSelectionCount === 0) return 0;
+
+		if (pageSelectionCount < data.length - disabledCount) return 2;
+
+		return 1;
+	});
+
+	const selectAllClick = (event: Event) => {
+		nextTick(() => {
+			const isSelected = allselectedState.value !== 1;
+			instance.selectAll(isSelected);
+			instance.selectAllClick(isSelected, event, rootEl.value);
+		});
+	};
+
+	const selectRowClick = (row: IDictionary<any>, isSelected: boolean, event: Event) => {
+		nextTick(() => {
+			instance.selectRow(row, isSelected);
+			instance.selectClick(row, isSelected, event, rootEl.value);
+		});
+	};
+
+	return {
+		selectedRows,
+		allselectedState,
+		selectAllClick,
+		selectRowClick,
+	};
+}

package/src/composables/gridSorting.ts

@@ -0,0 +1,27 @@
+import { IGrid } from '@zeedhi/common';
+import { UnwrapNestedRefs, computed } from 'vue';
+
+/**
+ * Composable for components that use grid color vars
+ */
+export function useGridSorting<T extends IGrid>({
+	instance,
+}: {
+	instance: UnwrapNestedRefs<T>;
+}) {
+	const updateSortBy = (sortBy: { key: string; order: 'asc' | 'desc' }[]) => {
+		instance.changeOrder(sortBy);
+	};
+
+	const sortBy = computed(() => {
+		return instance.datasource.order.map((orderString) => {
+			const [key, order] = orderString.split('.');
+			return { key, order };
+		});
+	});
+
+	return {
+		updateSortBy,
+		sortBy,
+	};
+}

package/src/composables/hasSlot.ts

@@ -0,0 +1,32 @@
+import { IDictionary } from '@zeedhi/core';
+import { VNode, useSlots } from 'vue';
+
+/**
+ * Composable for components that need to check if a slot is defined
+ */
+export function useHasSlot() {
+	const slots = useSlots();
+
+	const result: IDictionary<{ slot: any; hasContent: boolean } | undefined> = {};
+
+	const checkHasContent = (vnode: VNode) => {
+		// Ignore fragment nodes (Symbol(v-fgt))
+		if (vnode.type === Symbol.for('v-fgt')) {
+			return false;
+		}
+
+		// Check for non-empty text content or elements
+		return vnode.type || (typeof vnode.children === 'string' && vnode.children.trim() !== '');
+	};
+
+	for (const slotName in slots) {
+		const slot = slots[slotName];
+		const hasContent = slot?.().some((vnode) => checkHasContent(vnode));
+		result[slotName] = {
+			slot,
+			hasContent: !!hasContent,
+		};
+	}
+
+	return result;
+}

package/src/composables/index.ts

@@ -0,0 +1,16 @@
+export * from './cellSelection';
+export * from './columnDrag';
+export * from './columnResize';
+export * from './density';
+export * from './doubleClick';
+export * from './fixedColumns';
+export * from './gridColorVars';
+export * from './gridColumns';
+export * from './gridSelection';
+export * from './gridSorting';
+export * from './hasSlot';
+export * from './maska';
+export * from './tableNavigation';
+export * from './virtualScroll';
+export * from './watchUrl';
+export * from './useTableLayout';

package/src/composables/maska.ts

@@ -0,0 +1,47 @@
+import { TextInput } from '@zeedhi/common';
+import { Mask } from '@zeedhi/core';
+import { MaskInputOptions } from 'maska';
+import { UnwrapNestedRefs, reactive, ref } from 'vue';
+
+interface ZeedhiMaskInputOptions extends Omit<MaskInputOptions, 'mask'> {
+	mask: () => string | undefined;
+}
+
+/**
+ * Composable for text inputs that need basic Mask formatting
+ * @returns options to be passed to a v-maska directive
+ */
+export function useMaska<TG extends TextInput>(instance: UnwrapNestedRefs<TG>, options: { disable?: boolean }) {
+	const currentMask = ref('');
+
+	/**
+	 * Get the current mask. If using dynamic mask, this will call the mask as a function
+	 */
+	const getCurrentMask = (value: string) => {
+		const mask = instance.getMask();
+		if (typeof mask === 'function') {
+			const parsedValue = Mask.getValueWithoutMask(value);
+			return mask(parsedValue);
+		}
+		return mask;
+	};
+
+	const getMaskOptions = () => {
+		if (options.disable) return {};
+
+		return {
+			mask: () => {
+				return currentMask.value || undefined;
+			},
+			preProcess: (value: string) => {
+				currentMask.value = getCurrentMask(value);
+				return value;
+			},
+			eager: false,
+		};
+	};
+
+	const maskOptions = reactive<ZeedhiMaskInputOptions | Record<string, undefined>>(getMaskOptions());
+
+	return { maskOptions };
+}

package/src/composables/tableNavigation.ts

@@ -0,0 +1,163 @@
+import { IDataNavigator, IViewNavigator, VerticalDirection } from '@zeedhi/common';
+import { ComputedRef, UnwrapNestedRefs } from 'vue';
+
+/**
+ * Composable for components that can use table navigation
+ */
+export function useTableNavigation<T extends IDataNavigator & IViewNavigator>({
+	instance,
+	rootEl,
+}: {
+	instance: UnwrapNestedRefs<T>;
+	rootEl: ComputedRef<HTMLElement | undefined>;
+}) {
+	const navigate = (direction: 'up' | 'down' | 'left' | 'right', event?: Event) => {
+		if (direction === 'up' || direction === 'down') {
+			navigateVertical(direction);
+			return;
+		}
+		if (direction === 'right') {
+			navigateRight(event);
+			return;
+		}
+
+		navigateLeft(event);
+	};
+
+	instance.setViewNavigate(navigate);
+
+	const navigateRight = (event?: Event) => {
+		event?.preventDefault();
+		const tdNode = getTdNode(document.activeElement as HTMLElement);
+		if (!tdNode) return;
+
+		let { nextElementSibling } = tdNode;
+
+		if (!nextElementSibling) {
+			const trNode = tdNode.parentElement;
+			if (!trNode) return;
+
+			let nextTr: Element | null;
+			do {
+				nextTr = trNode.nextElementSibling;
+
+				if (!nextTr) return;
+			} while (!isElementVisible(nextTr));
+
+			[nextElementSibling] = nextTr.children;
+		}
+
+		focusElement(nextElementSibling as HTMLElement);
+	};
+
+	const navigateLeft = (event?: Event) => {
+		event?.preventDefault();
+		const tdNode = getTdNode(document.activeElement as HTMLElement);
+		if (!tdNode) return;
+
+		let { previousElementSibling } = tdNode;
+
+		if (!previousElementSibling) {
+			const trNode = tdNode.parentElement;
+			if (!trNode) return;
+
+			let previousTr: Element | null;
+			do {
+				previousTr = trNode.previousElementSibling;
+
+				if (!previousTr) return;
+			} while (!isElementVisible(previousTr));
+
+			previousElementSibling = previousTr.children[previousTr.children.length - 1];
+		}
+
+		focusElement(previousElementSibling as HTMLElement);
+	};
+
+	const isElementVisible = (element: Element) => {
+		const style = window.getComputedStyle(element);
+		const isVisible = style.display !== 'none';
+		return isVisible;
+	};
+
+	// selector for input-type elements that are not disabled, or elements with tabindex
+	const focusableSelector =
+		'button:not([disabled]), a:not([disabled]), input:not([disabled]), select:not([disabled])' +
+		', textarea:not([disabled]), [tabindex]:not([tabindex="-1"])';
+
+	/**
+	 * Focus an element or its first focusable children
+	 * @param element element to be focused
+	 */
+	const focusElement = (element?: HTMLElement | null) => {
+		if (!element) return;
+
+		const focusableChild = element.querySelector<HTMLElement>(focusableSelector);
+		const nextFocusableElement = focusableChild && isElementVisible(focusableChild) ? focusableChild : element;
+		nextFocusableElement.focus({ preventScroll: true });
+
+		if (nextFocusableElement instanceof HTMLInputElement) nextFocusableElement.select();
+	};
+
+	const getTdNode = (element: HTMLElement | null): HTMLElement | null => {
+		if (!element) return null;
+		if (element.nodeName === 'TD') return element;
+		return getTdNode(element.parentElement);
+	};
+
+	const getArrayFromElementTag = (tagName: string, node: Element | HTMLElement | null) => {
+		if (node) return Array.from(node.getElementsByTagName(tagName));
+		return [];
+	};
+
+	const getArrayFromTdElement = (node: Element | HTMLElement | null) => {
+		return getArrayFromElementTag('TD', node);
+	};
+
+	const getArrayFromTrElement = (node: Element | HTMLElement | null) => {
+		return getArrayFromElementTag('TR', node).filter(isElementVisible);
+	};
+
+	const findNextTd = (
+		direction: VerticalDirection,
+		trIndex: number,
+		tdIndex: number,
+		trCollection: Element[],
+	): HTMLElement | undefined => {
+		const up = direction === 'up';
+		if ((up && trIndex <= 0) || (!up && trIndex >= trCollection.length - 1)) {
+			return undefined;
+		}
+
+		const nextTr = trCollection[up ? trIndex - 1 : trIndex + 1];
+		const index = Math.min(tdIndex, nextTr.childElementCount - 1);
+		const nextTd = getArrayFromTdElement(nextTr)[index];
+		return nextTd as HTMLElement;
+	};
+
+	const navigateVertical = (direction: VerticalDirection) => {
+		const hasActive = rootEl.value?.querySelector('tbody')?.contains(document.activeElement);
+
+		// if not cellSelection and activeElement is not inside tbody, should navigate from datasource
+		if (!hasActive) {
+			instance.navigateDatasource(direction);
+			return;
+		}
+
+		const tdNode = getTdNode(document.activeElement as HTMLElement);
+		const trNode = tdNode?.parentElement;
+
+		if (!tdNode || !trNode) return;
+
+		const tdIndex = getArrayFromTdElement(trNode).indexOf(tdNode);
+		const trCollection = getArrayFromTrElement(trNode.parentElement);
+		const trIndex = trCollection.indexOf(trNode);
+
+		const nextElement: HTMLElement | undefined = findNextTd(direction, trIndex, tdIndex, trCollection);
+		if (!nextElement) return;
+
+		focusElement(nextElement);
+	};
+
+	return { navigate };
+}