@zeedhi/vuetify 3.0.6 → 3.0.7

package/dist/components/zd-tree-grid/row/ZdTreeGridRow.js

@@ -0,0 +1,85 @@
+import { defineComponent } from 'vue';
+export default defineComponent({
+    props: {
+        isSelected: {
+            type: Boolean,
+            required: true,
+        },
+        isCurrentRow: {
+            type: Boolean,
+            required: true,
+        },
+        selectable: {
+            type: Boolean,
+            required: true,
+        },
+        selectionDisabled: {
+            type: Boolean,
+            required: true,
+        },
+        cellSelection: {
+            type: Boolean,
+            required: true,
+        },
+        isCurrent: {
+            type: Function,
+            required: true,
+        },
+        columns: {
+            type: Array,
+            required: true,
+        },
+        row: {
+            type: Object,
+            required: true,
+        },
+        fixedLeft: {
+            type: Object,
+            required: true,
+        },
+        fixedRight: {
+            type: Object,
+            required: true,
+        },
+        indeterminate: {
+            type: Boolean,
+            required: true,
+        },
+        hasChildOnDemand: {
+            type: Boolean,
+        },
+    },
+    emits: ['click', 'checkboxClick', 'focusin', 'cellFocus', 'cellClick', 'expandIconClick'],
+    setup(props, { emit }) {
+        const click = (event) => {
+            emit('click', event);
+        };
+        const checkboxClick = (event) => {
+            emit('checkboxClick', event);
+        };
+        const focusin = (event, column) => {
+            emit('focusin', { event, row: props.row, column });
+        };
+        const cellFocus = (event, column) => {
+            emit('cellFocus', { event, row: props.row, column });
+        };
+        const cellClick = (event, column) => {
+            emit('cellClick', { event, row: props.row, column });
+        };
+        const expandIconClick = (event) => {
+            emit('expandIconClick', event);
+        };
+        const isFirstCell = (index) => {
+            return index === 0 || (index === 1 && props.selectable);
+        };
+        return {
+            click,
+            focusin,
+            checkboxClick,
+            cellFocus,
+            cellClick,
+            expandIconClick,
+            isFirstCell,
+        };
+    },
+});

package/dist/composables/cellSelection.js

@@ -0,0 +1,37 @@
+import { ref } from 'vue';
+/**
+ * Composable for components that can have their cells selected
+ */
+export function useCellSelection({ instance, }) {
+    const currentCell = ref(null);
+    const isCurrent = ({ row, column }) => {
+        const rowCheck = currentCell.value?.key === instance.getRowKey(row);
+        if (!column)
+            return rowCheck;
+        return rowCheck && currentCell.value?.column === column.name;
+    };
+    /**
+     * When cell is focused, should set currentCell
+     * allows focusing cells that have no column (the checkbox cell)
+     */
+    const cellFocusIn = ({ row, column }) => {
+        if (!instance.cellSelection)
+            return;
+        const key = instance.getRowKey(row);
+        if (!column) {
+            currentCell.value = { key };
+            return;
+        }
+        const columnName = column.name;
+        currentCell.value = { key, column: columnName };
+    };
+    const isCurrentRow = (row) => {
+        const { uniqueKey } = instance.datasource;
+        return !instance.cellSelection && row[uniqueKey] && row[uniqueKey] === instance.datasource.currentRow[uniqueKey];
+    };
+    return {
+        isCurrent,
+        cellFocusIn,
+        isCurrentRow,
+    };
+}

package/dist/composables/columnDrag.js

@@ -0,0 +1,82 @@
+import Sortable from 'sortablejs';
+import { onMounted, watch } from 'vue';
+/**
+ * Composable for components that can have their columns dragged
+ */
+export function useColumnDrag({ instance, rootEl, }) {
+    onMounted(() => {
+        if (instance.dragColumns) {
+            initDragColumns();
+        }
+    });
+    watch(() => instance.dragColumns, (value) => {
+        if (value) {
+            initDragColumns();
+        }
+        else {
+            destroyDragColumns();
+        }
+    });
+    const checkMove = (event) => {
+        return event.related.classList.contains('sort-handle');
+    };
+    const initDragColumns = () => {
+        const tr = rootEl.value?.querySelector('thead tr');
+        if (tr) {
+            Sortable.create(tr, {
+                onEnd: sortColumns,
+                onMove: checkMove,
+                handle: '.sort-handle',
+                scroll: false,
+            });
+        }
+    };
+    const destroyDragColumns = () => {
+        const tr = rootEl.value?.querySelector('thead tr');
+        if (tr) {
+            Sortable.create(tr, {
+                onEnd: sortColumns,
+                onMove: checkMove,
+                handle: '.sort-handle',
+                scroll: false,
+            }).destroy();
+        }
+    };
+    const sortColumns = (event) => {
+        const { originalEvent } = event;
+        let touch = originalEvent;
+        if (originalEvent.changedTouches?.length) {
+            [touch] = originalEvent.changedTouches;
+        }
+        const target = document.elementFromPoint(touch.clientX, touch.clientY);
+        if (!rootEl.value?.contains(target)) {
+            hideColumn(event);
+            return;
+        }
+        const columnsTmp = getColumnsDOMOrder().filter((a) => a.isVisible);
+        let { oldIndex = 0, newIndex = 0 } = event;
+        if (instance.selectable) {
+            oldIndex -= 1;
+            newIndex -= 1;
+            if (newIndex < 0) {
+                newIndex = 0;
+            }
+        }
+        columnsTmp.splice(newIndex, 0, columnsTmp.splice(oldIndex, 1)[0]);
+        instance.columns = columnsTmp.concat(instance.columns.filter((a) => !a.isVisible));
+        instance.changeLayout(event, rootEl);
+    };
+    const hideColumn = (event) => {
+        const columnIndex = Number(event.item.getAttribute('index'));
+        const column = getColumnsDOMOrder()[columnIndex];
+        column.isVisible = false;
+        instance.changeLayout(event, rootEl);
+    };
+    const orderHeaders = (headers) => {
+        return headers.filter((item) => item.isVisible);
+    };
+    const getColumnsDOMOrder = () => {
+        return orderHeaders(instance.columns);
+    };
+    return {};
+}

package/dist/composables/columnResize.js

@@ -0,0 +1,115 @@
+import { nextTick } from 'vue';
+/**
+ * Composable for components that can have their columns resized
+ */
+export function useColumnResize({ instance, rootEl, onResizeCallback, }) {
+    let resizeX = 0;
+    let resizeWidth = 0;
+    let resizeTableWidth = 0;
+    let resizeColumn;
+    let resizeTableElement;
+    const getTotalWidth = (element) => {
+        const clientWidth = element.clientWidth; // Content + padding
+        const computedStyle = window.getComputedStyle(element);
+        const marginLeft = parseFloat(computedStyle.marginLeft);
+        const marginRight = parseFloat(computedStyle.marginRight);
+        const totalWidth = clientWidth + marginLeft + marginRight;
+        return totalWidth;
+    };
+    const parseWidth = (width) => {
+        if (width && width.indexOf('%') !== -1 && rootEl.value) {
+            const percent = Number(width?.replace('%', '')) / 100;
+            const tableWidth = rootEl.value.clientWidth;
+            const pxWidth = Number(tableWidth) * percent;
+            return pxWidth;
+        }
+        return Number(width?.replace('px', ''));
+    };
+    const resizeMouseMoveHandler = (event) => {
+        if (!resizeTableElement)
+            return;
+        // Determine how far the mouse has been moved
+        const dx = event.clientX - resizeX;
+        const headerEl = resizeColumnElement.parentElement;
+        if (!headerEl || !resizeColumn)
+            return;
+        const newWidth = resizeWidth + dx;
+        const { min, max } = getMinMaxColumnWidth(headerEl, resizeColumn);
+        const width = Math.max(min, Math.min(newWidth, max));
+        if (resizeColumn) {
+            // Update the width of column
+            resizeColumn.width = `${width}px`;
+        }
+        if (newWidth >= max) {
+            return;
+        }
+        if (newWidth >= min) {
+            // Update the width of the table
+            resizeTableElement.style.width = `${resizeTableWidth + dx}px`;
+        }
+        else {
+            resizeTableElement.style.width = `${resizeTableWidth - resizeWidth + min}px`;
+        }
+        nextTick(onResizeCallback);
+    };
+    const resizeMouseUpHandler = (event) => {
+        instance.changeLayout(event, rootEl.value);
+        document.removeEventListener('mousemove', resizeMouseMoveHandler);
+        document.removeEventListener('mouseup', resizeMouseUpHandler);
+    };
+    let resizeColumnElement;
+    const resizeMouseDownHandler = (column, { event, el }) => {
+        resizeX = event.clientX;
+        resizeColumn = column;
+        const resizeEl = el;
+        if (resizeEl) {
+            resizeColumnElement = resizeEl;
+            let styles = window.getComputedStyle(resizeColumnElement);
+            resizeWidth = parseInt(styles.width, 10);
+            resizeWidth -= parseInt(styles.paddingLeft, 10) + parseInt(styles.paddingRight, 10);
+            resizeTableElement = rootEl.value?.getElementsByTagName('table')[0];
+            if (!resizeTableElement)
+                return;
+            styles = window.getComputedStyle(resizeTableElement);
+            resizeTableWidth = parseInt(styles.width, 10);
+            // Attach listeners for document's events
+            document.addEventListener('mousemove', resizeMouseMoveHandler);
+            document.addEventListener('mouseup', resizeMouseUpHandler);
+        }
+        event.stopImmediatePropagation();
+        event.preventDefault();
+    };
+    const resizeClickHandler = ({ event }) => {
+        event.stopImmediatePropagation();
+        event.preventDefault();
+    };
+    const getMinMaxColumnWidth = (columnElement, column) => {
+        const headerIcons = Array.from(columnElement.querySelectorAll('.zd-grid__header-icon'));
+        const iconsWidth = headerIcons.reduce((result, item) => {
+            return result + getTotalWidth(item);
+        }, 0);
+        // minimum width occupied by the 'name' span inside header
+        const minNameWidth = 23;
+        const min = Math.max(iconsWidth + minNameWidth, parseWidth(column?.minWidth) || 0);
+        const max = parseWidth(column?.maxWidth) || Infinity;
+        return { min, max };
+    };
+    const calcWidth = (column) => {
+        const width = column.width || column.maxWidth || column.minWidth;
+        if (width?.length === 0 || width === undefined) {
+            return '';
+        }
+        const name = column.name;
+        const columnElement = rootEl.value?.querySelector(`th[column-name="${name}"]`);
+        if (!columnElement)
+            return;
+        const { min, max } = getMinMaxColumnWidth(columnElement, column);
+        const pxWidth = parseWidth(width);
+        return `${Math.max(min, Math.min(Math.trunc(pxWidth), max || Infinity))}px`;
+    };
+    return {
+        resizeMouseDownHandler,
+        resizeClickHandler,
+        calcWidth,
+    };
+}

package/dist/composables/density.js

@@ -0,0 +1,13 @@
+import { computed } from 'vue';
+/**
+ * Composable for components that have dense prop
+ * Converts the instance.dense prop into the values accepted by vuetify
+ */
+export function useDensity({ instance, }) {
+    const density = computed(() => {
+        return instance.dense ? 'compact' : 'default';
+    });
+    return {
+        density,
+    };
+}

package/dist/composables/doubleClick.js

@@ -0,0 +1,32 @@
+import { ref } from 'vue';
+/**
+ * Composable to check if a double click has occurred
+ */
+export function useDoubleClick() {
+    const clicks = ref(0);
+    const lastCellClicked = ref(null);
+    const timer = ref(0);
+    const doubleClick = (clickFn, dblclickFn, event, delay = 300) => {
+        if (lastCellClicked && lastCellClicked.value !== event.currentTarget) {
+            clicks.value = 0;
+        }
+        clicks.value += 1;
+        lastCellClicked.value = event.currentTarget;
+        if (clicks.value === 1) {
+            timer.value = window.setTimeout(() => {
+                // single click
+                clickFn();
+                clicks.value = 0;
+            }, delay);
+        }
+        else {
+            // double click
+            window.clearTimeout(timer.value);
+            dblclickFn();
+            clicks.value = 0;
+        }
+    };
+    return {
+        doubleClick,
+    };
+}

package/dist/composables/fixedColumns.js

@@ -0,0 +1,106 @@
+import { onMounted, onUnmounted, reactive } from 'vue';
+/**
+ * Composable for components that can have their columns fixed
+ */
+export function useFixedColumns({ instance, rootEl, }) {
+    let tableHeader;
+    let tableBody;
+    /**
+     * Left distance for each column
+     */
+    const fixedLeft = reactive({});
+    /**
+     * Right distance for each column
+     */
+    const fixedRight = reactive({});
+    const updateFixedColumns = () => {
+        if (instance.columns.filter((column) => column.fixed || column.actionFixed).length === 0)
+            return;
+        if (!tableHeader) {
+            tableHeader = rootEl.value?.querySelector('table thead tr');
+            tableBody = rootEl.value?.querySelector('table tbody');
+            if (!tableHeader || !tableBody)
+                return;
+        }
+        const headerColumns = Array.from(tableHeader.querySelectorAll('th'));
+        let left = instance.selectable ? 44 : 0;
+        headerColumns.forEach((column) => {
+            const name = column.getAttribute('column-name');
+            if (name && column.classList.contains('zd-grid__header--fixed')) {
+                column.style.left = `${left}px`;
+                fixedLeft[name] = column.style.left;
+                // left += column.clientWidth;
+                left += parseFloat(getComputedStyle(column).width);
+            }
+        });
+        let right = 0;
+        headerColumns.reverse().forEach((column) => {
+            const name = column.getAttribute('column-name');
+            const columnsWithClassFixed = column.classList.contains('zd-grid__action-header--fixed');
+            if (name && columnsWithClassFixed) {
+                column.style.right = `${right}px`;
+                fixedRight[name] = column.style.right;
+                const minActionWidth = column.clientWidth <= 16 ? 40 : column.clientWidth;
+                right += minActionWidth;
+            }
+        });
+    };
+    let observer;
+    let resizeObserver;
+    const registerResizeObserver = () => {
+        // disconnects current observer
+        observer.disconnect();
+        const table = rootEl.value?.querySelector('table');
+        if (!table)
+            return;
+        const targetRow = table.querySelector('tr');
+        if (!targetRow)
+            return;
+        resizeObserver = new ResizeObserver(() => {
+            updateFixedColumns();
+        });
+        // observe the resize of each of the table columns
+        for (const child of targetRow.children) {
+            resizeObserver.observe(child);
+        }
+    };
+    /**
+     * Register a mutation observer for the table TR
+     * this observer should call updateFixedColumns whenever the
+     * number of columns inside the table changes \
+     * This also takes into account columns that gets hidden via isVisible
+     */
+    const registerTrObserver = () => {
+        const table = rootEl.value?.querySelector('table');
+        if (!table)
+            return;
+        const targetRow = table.querySelector('tr');
+        if (!targetRow)
+            return;
+        observer = new MutationObserver((mutations) => {
+            mutations.forEach((mutation) => {
+                if (mutation.type === 'childList' && mutation.target instanceof Element && mutation.target.tagName === 'TR') {
+                    updateFixedColumns();
+                    registerResizeObserver();
+                }
+            });
+        });
+        observer.observe(targetRow, {
+            childList: true, // Listen for additions/removals of children
+        });
+    };
+    onMounted(() => {
+        updateFixedColumns();
+        registerTrObserver();
+        registerResizeObserver();
+    });
+    onUnmounted(() => {
+        observer.disconnect();
+        resizeObserver.disconnect();
+    });
+    return {
+        updateFixedColumns,
+        fixedLeft,
+        fixedRight,
+    };
+}

package/dist/composables/gridColorVars.js

@@ -0,0 +1,30 @@
+import { computed } from 'vue';
+import { useTheme } from 'vuetify';
+/**
+ * Composable for components that use grid color vars
+ */
+export function useGridColorVars({ instance, }) {
+    const getBackgroundColor = () => {
+        if (instance.backgroundColor && instance.backgroundColor !== 'transparent') {
+            return instance.backgroundColor;
+        }
+        return '';
+    };
+    const theme = useTheme();
+    const getThemeBackground = (background) => {
+        if (background && background !== 'transparent')
+            return background;
+        return theme.current.value.colors.surface;
+    };
+    const cssColorVars = computed(() => {
+        const bgColor = getBackgroundColor();
+        const themeBackground = getThemeBackground(bgColor);
+        return {
+            '--theme-background-color': themeBackground,
+            '--background-color': bgColor,
+        };
+    });
+    return {
+        cssColorVars,
+    };
+}

package/dist/composables/gridColumns.js

@@ -0,0 +1,87 @@
+import { computed } from 'vue';
+/**
+ * Composable for components that can have their columns fixed
+ */
+export function useGridColumns({ instance, rootEl, visibilityCondition = (column) => column.isVisible, }) {
+    const headers = computed(() => {
+        return instance.columns.map((column) => {
+            const alignMap = {
+                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;
+                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/dist/composables/gridSelection.js

@@ -0,0 +1,91 @@
+import { computed, nextTick } from 'vue';
+/**
+ * Composable for grid components that have selection
+ */
+export function useGridSelection({ instance, rootEl, }) {
+    const getKeysFrom = (data) => {
+        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) => {
+            if (instance.selectAllPages)
+                return;
+            instance.selectedRows = sortSelectionArray(rows);
+        },
+    });
+    const sortSelectionArray = (arr) => {
+        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) => {
+        nextTick(() => {
+            const isSelected = allselectedState.value !== 1;
+            instance.selectAll(isSelected);
+            instance.selectAllClick(isSelected, event, rootEl.value);
+        });
+    };
+    const selectRowClick = (row, isSelected, event) => {
+        nextTick(() => {
+            instance.selectRow(row, isSelected);
+            instance.selectClick(row, isSelected, event, rootEl.value);
+        });
+    };
+    return {
+        selectedRows,
+        allselectedState,
+        selectAllClick,
+        selectRowClick,
+    };
+}