@zeedhi/vuetify 3.0.9 → 3.0.10

package/dist/components/tek-grid/TekGrid.js

@@ -0,0 +1,287 @@
+import { TekGrid, TekMemoryDatasource, TekRestDatasource, } from '@zeedhi/common';
+import { Config, Utils } from '@zeedhi/core';
+import cloneDeep from 'lodash.clonedeep';
+import debounce from 'lodash.debounce';
+import { computed, defineComponent, nextTick } from 'vue';
+import { provideTableLayout, useGridColumns } from '../../composables';
+import { buildProps } from '../../utils';
+import { getRootElement, useCreateInstance } from '../zd-component/ZdComponent';
+import { ZdGridEditableProps, useGridEditableInstance } from '../zd-grid-editable/ZdGridEditable';
+export const TekGridProps = buildProps({
+    ...ZdGridEditableProps,
+    toolbarSlot: {
+        type: Array,
+        default: undefined,
+    },
+    title: {
+        type: String,
+        default: '',
+    },
+    addButton: {
+        type: [Boolean, String],
+        default: false,
+    },
+    deleteButton: {
+        type: [String, Boolean],
+        default: 'none',
+    },
+    columnsButton: {
+        type: [Boolean, String],
+        default: false,
+    },
+    columnsButtonIgnore: {
+        type: [Array, String],
+        default: () => [],
+    },
+    showEditButtons: {
+        type: [Boolean, String],
+        default: true,
+    },
+    filterButton: {
+        type: [Boolean, String],
+        default: false,
+    },
+    modalFilterProps: {
+        type: Object,
+        default: () => ({}),
+    },
+    showSearch: {
+        type: [Boolean, String],
+        default: true,
+    },
+    columnFilterButton: {
+        type: [Boolean, String],
+        default: false,
+    },
+    hideActions: {
+        type: [Boolean, String],
+        default: false,
+    },
+    actions: {
+        type: Array,
+        default: () => [],
+    },
+    dragColumns: {
+        type: [Boolean, String],
+        default: true,
+    },
+    resizeColumns: {
+        type: [Boolean, String],
+        default: true,
+    },
+    showLayoutOptions: {
+        type: [Boolean, String],
+        default: true,
+    },
+    showExport: {
+        type: [String, Boolean],
+        default: false,
+    },
+    showReload: {
+        type: [Boolean, String],
+        default: true,
+    },
+    exportConfig: {
+        type: Array,
+    },
+    exportActions: {
+        type: Array,
+    },
+    groupsOpened: {
+        type: [Boolean, String],
+        default: false,
+    },
+    showSummaryTotal: {
+        type: [Boolean, String],
+        default: true,
+    },
+    mainGrid: {
+        type: [Boolean, String],
+        default: true,
+    },
+    xlsDefaultType: {
+        type: String,
+        default: undefined,
+    },
+    showCheckboxAllFilter: {
+        type: [Boolean, String],
+        default: Config.gridShowCheckboxAllFilter,
+    },
+    toolbarOpened: {
+        type: [Boolean],
+        default: true,
+    },
+    defaultFilter: {
+        type: Object,
+    },
+    reportTitle: {
+        type: String,
+    },
+    editNewRowsOnly: {
+        type: [Boolean, String],
+        default: false,
+    },
+});
+const gridEditableComponent = defineComponent({
+    props: TekGridProps,
+    inheritAttrs: false,
+    setup(props, ctx) {
+        const { instance, root } = useCreateInstance(props, ctx, TekGrid);
+        const renderedData = computed(() => {
+            if (instance.isGrouped()) {
+                return instance.getGroupedData();
+            }
+            return instance.getData();
+        });
+        const visibleData = computed(() => {
+            return renderedData.value.filter((row) => instance.isItemVisible(row));
+        });
+        const gridEditableScope = useGridEditableInstance({ instance, root, renderedData: visibleData });
+        const rootEl = getRootElement(root);
+        const { visibleColumns } = useGridColumns({
+            instance,
+            rootEl,
+            visibilityCondition: (column) => column.isVisible && !column.grouped,
+        });
+        provideTableLayout({ instance, rootEl });
+        const debouncedDatasourceGet = debounce((instance) => {
+            const event = new Event('change', { cancelable: true });
+            instance.callEvent('beforeApplyFilter', { component: instance, event });
+            if (event.defaultPrevented)
+                return;
+            const { datasource } = instance;
+            if (datasource instanceof TekRestDatasource || datasource instanceof TekMemoryDatasource) {
+                datasource.updateDynamicFilter();
+            }
+            else {
+                datasource.get();
+            }
+        }, 500);
+        const filter = computed(() => {
+            if (instance.datasource instanceof TekRestDatasource || instance.datasource instanceof TekMemoryDatasource) {
+                return instance.datasource.dynamicFilter;
+            }
+            const datasourceFilter = instance.datasource.filter;
+            const simpleFilter = {};
+            Object.keys(datasourceFilter).forEach((key) => {
+                simpleFilter[key] = [{ relation: 'AND', operation: 'CONTAINS', value: datasourceFilter[key] }];
+            });
+            return simpleFilter;
+        });
+        const setFilter = (newFilter) => {
+            if (Utils.isEqual(filter, newFilter))
+                return;
+            if (instance.datasource instanceof TekRestDatasource || instance.datasource instanceof TekMemoryDatasource) {
+                instance.datasource.dynamicFilter = cloneDeep(newFilter);
+            }
+            else {
+                const normalFilter = {};
+                Object.keys(newFilter).forEach((key) => {
+                    if (!newFilter[key][0].value)
+                        return;
+                    normalFilter[key] = newFilter[key][0].value;
+                });
+                instance.datasource.filter = normalFilter;
+            }
+            debouncedDatasourceGet(instance);
+            instance.changeLayout();
+        };
+        const columnHasFilter = (columnName) => {
+            return instance.columnHasFilter(columnName);
+        };
+        const isRowVisible = (row, index) => {
+            return instance.isItemVisible(row) && gridEditableScope.shouldRender(index);
+        };
+        const isCurrentRowGroup = (row) => {
+            const { uniqueKey, currentRow } = instance.datasource;
+            return !!((row.group && row.groupValue === currentRow.groupValue) ||
+                (row[uniqueKey] && row[uniqueKey] === currentRow[uniqueKey]));
+        };
+        const isGroupSelectIndeterminate = (item) => {
+            let hasSelected = false;
+            let hasNotSelected = false;
+            const { uniqueKey } = instance.datasource;
+            item.children.forEach((child) => {
+                const idx = instance.selectedRows.findIndex((row) => child[uniqueKey] === row[uniqueKey]);
+                hasSelected = hasSelected || idx !== -1;
+                hasNotSelected = hasNotSelected || idx === -1;
+            });
+            return hasSelected && hasNotSelected;
+        };
+        const isGroupSelected = (item) => {
+            return item.children.every((child) => {
+                const { uniqueKey } = instance.datasource;
+                const idx = instance.selectedRows.findIndex((row) => child[uniqueKey] === row[uniqueKey]);
+                return idx !== -1;
+            });
+        };
+        const selectGroupRowClick = (row, isSelected, event) => {
+            nextTick(() => {
+                const rootElement = getRootElement(root);
+                instance.selectGroupClick(row, isSelected, event, rootElement.value);
+            });
+        };
+        const selectGroup = (item, event) => {
+            const { uniqueKey } = instance.datasource;
+            const isSelected = isGroupSelected(item);
+            if (!isSelected) {
+                // here we fetch the item from renderedData because vuetify isSelected checks for object reference
+                // so we need to find the item inside renderedData to call selectRow() with the correct reference
+                // https://github.com/vuetifyjs/vuetify/blob/master/packages/vuetify/src/components/VDataTable/composables/select.ts#L128
+                const items = item.children.map((child) => {
+                    return renderedData.value.find((row) => child[uniqueKey] === row[uniqueKey]);
+                });
+                items.forEach((child) => {
+                    if (!child)
+                        return;
+                    const idx = instance.selectedRows.findIndex((row) => child[uniqueKey] === row[uniqueKey]);
+                    if (idx === -1) {
+                        instance.selectRow(child, true);
+                    }
+                });
+            }
+            else {
+                item.children.forEach((child) => {
+                    const idx = instance.selectedRows.findIndex((row) => child[uniqueKey] === row[uniqueKey]);
+                    if (idx !== -1) {
+                        instance.selectRow(child, false);
+                    }
+                });
+            }
+            selectGroupRowClick(item, !isSelected, event);
+        };
+        const openGroup = (item) => {
+            instance.openGroup(item);
+        };
+        const isGroup = (item) => {
+            return !!item.group;
+        };
+        const isFooter = (item) => {
+            return !!item.groupFooter;
+        };
+        const groupColumnNames = computed(() => {
+            return instance.columns.filter((column) => column.grouped).map((column) => column.name) || [];
+        });
+        return {
+            ...gridEditableScope,
+            instance,
+            root,
+            filter,
+            setFilter,
+            columnHasFilter,
+            visibleColumns,
+            isRowVisible,
+            isCurrentRowGroup,
+            isGroupSelectIndeterminate,
+            selectGroup,
+            isGroup,
+            openGroup,
+            renderedData,
+            isGroupSelected,
+            groupColumnNames,
+            isFooter,
+            visibleData,
+        };
+    },
+});
+export default gridEditableComponent;

package/dist/components/tek-grid/column-filter/TekGridColumnFilter.js

@@ -0,0 +1,201 @@
+import { Config, Metadata, Utils, dayjs } from '@zeedhi/core';
+import cloneDeep from 'lodash.clonedeep';
+import debounce from 'lodash.debounce';
+import { computed, defineComponent, reactive } from 'vue';
+import { isArrayOperation } from '../../../utils';
+export const TekGridColumnFilterProps = {
+    hasFilterData: {
+        type: Boolean,
+        default: false,
+    },
+    column: {
+        type: Object,
+        required: true,
+    },
+    modelValue: {
+        type: Array,
+        default: [],
+    },
+    instanceName: {
+        type: String,
+        required: true,
+    },
+    filterRelationsDatasource: {
+        type: [Object, null],
+        required: false,
+    },
+    filterOperationsDatasource: {
+        type: [Object, null],
+        required: false,
+    },
+    isHovering: {
+        type: Boolean,
+        default: false,
+    },
+    multiple: {
+        type: Boolean,
+        required: true,
+    },
+};
+const tekGridColumnFilter = defineComponent({
+    props: TekGridColumnFilterProps,
+    inheritAttrs: false,
+    emits: ['update:modelValue'],
+    setup(props, ctx) {
+        const getValueInputName = (index) => `${props.instanceName}-${props.column.name}-filter-value-${index}`;
+        const focusValueInput = (index) => {
+            const valueInputName = getValueInputName(index);
+            const input = Metadata.getInstance(valueInputName);
+            input.setFocus();
+        };
+        const createNewFilter = () => {
+            return reactive({
+                operation: 'CONTAINS',
+                relation: 'AND',
+                value: undefined,
+            });
+        };
+        let newFilter = createNewFilter();
+        const convertToDateFormat = (value, revert) => {
+            const dateFormat = props.column.componentProps.dateFormat || Config.dateFormat;
+            const displayFormat = props.column.componentProps.displayFormat || Config.displayFormat;
+            if (revert) {
+                if (dayjs(value, displayFormat).isValid() || !dayjs(value, dateFormat).isValid()) {
+                    return value;
+                }
+                return dayjs(value, dateFormat).format(displayFormat);
+            }
+            if (dayjs(value, dateFormat).isValid() || !dayjs(value, displayFormat).isValid()) {
+                return value;
+            }
+            return dayjs(value, displayFormat).format(dateFormat);
+        };
+        const checkDateValueFormat = (value, revert = false) => {
+            if (!['ZdDate', 'ZdDateRange'].includes(props.column.componentProps.component))
+                return value;
+            if (Array.isArray(value)) {
+                return value.map((item) => convertToDateFormat(item, revert));
+            }
+            return convertToDateFormat(value, revert);
+        };
+        // use WeakMap to avoid memory leaks
+        const idMap = new WeakMap();
+        let idCounter = 0;
+        // retrieves a unique id for each item
+        const getId = (item) => {
+            if (!idMap.has(item)) {
+                idMap.set(item, `__item__${idCounter++}`);
+            }
+            return idMap.get(item);
+        };
+        // use computed to generate unique ids for each filter item
+        // this is needed for the v-for :key updates
+        const modelWithIds = computed(() => {
+            if (!props.multiple) {
+                if (props.modelValue.length > 0) {
+                    return [{ id: getId(props.modelValue[0]), item: props.modelValue[0] }];
+                }
+                return [{ id: getId(newFilter), item: newFilter }];
+            }
+            return [...props.modelValue, newFilter].map((item) => ({
+                id: getId(item),
+                item,
+            }));
+        });
+        const debounceUpdateModel = debounce((modelValue) => {
+            if (Utils.isEqual(modelValue, props.modelValue))
+                return;
+            ctx.emit('update:modelValue', modelValue);
+            newFilter = createNewFilter();
+        }, 500);
+        const changeRelation = (index, { component }) => {
+            const modelValue = cloneDeep(props.modelValue);
+            const isNewFilter = index === modelValue.length;
+            const filter = isNewFilter ? newFilter : modelValue[index];
+            const { value } = component;
+            focusValueInput(index);
+            // update item type value
+            filter.relation = value;
+            if (isNewFilter)
+                return;
+            debounceUpdateModel(modelValue);
+        };
+        const changeOperation = (index, { component }) => {
+            const modelValue = cloneDeep(props.modelValue);
+            const filterItem = modelValue[index];
+            const isNewFilter = index === modelValue.length;
+            const filter = isNewFilter ? newFilter : filterItem;
+            const { value } = component;
+            focusValueInput(index);
+            // if operation is IN, NOT_IN or BETWEEN, value should be an array
+            if (isArrayOperation(value)) {
+                filter.value = Array.isArray(filterItem.value) ? filterItem.value : [filterItem.value];
+            }
+            // update item type value
+            filter.operation = value;
+            if (isNewFilter)
+                return;
+            debounceUpdateModel(modelValue);
+        };
+        const changeValue = (item, index, { component }) => {
+            const modelValue = cloneDeep(props.modelValue);
+            const filter = cloneDeep(item);
+            const { value } = component;
+            const isNewFilter = props.multiple && index === modelValue.length;
+            let formattedValue = value;
+            if (value && isArrayOperation(filter.operation)) {
+                formattedValue = value.split(';');
+            }
+            filter.value = checkDateValueFormat(formattedValue);
+            if (!props.multiple) {
+                debounceUpdateModel([filter]);
+                return;
+            }
+            if (isNewFilter) {
+                // only emit event when newFilter has value
+                if (!filter.value)
+                    return;
+                debounceUpdateModel([...modelValue, filter]);
+                return;
+            }
+            if (!filter.value) {
+                // when removing the last (not new) filter, should pass its operation and relation to the new filter
+                if (index === modelValue.length - 1) {
+                    newFilter.operation = filter.operation;
+                    newFilter.relation = filter.relation;
+                }
+                modelValue.splice(index, 1);
+                // if the removed filter was the first, should set the new first relation to AND
+                if (modelValue.length > 0 && index === 0) {
+                    modelValue[0].relation = 'AND';
+                }
+                // if the removed filter was the last, should set the newFilter relation to AND
+                if (modelValue.length === 0) {
+                    newFilter.relation = 'AND';
+                }
+            }
+            debounceUpdateModel(modelValue);
+        };
+        const getComponentType = (operation) => {
+            return isArrayOperation(operation) ? 'ZdTextInput' : props.column.componentProps.component;
+        };
+        const getComponentHint = (operation) => {
+            return isArrayOperation(operation) ? 'TEKGRID_MULTIPLE_VALUE_HINT' : '';
+        };
+        const getItemValue = (item) => {
+            return isArrayOperation(item.operation) ? item.value.join(';') : item.value;
+        };
+        return {
+            changeValue,
+            changeRelation,
+            changeOperation,
+            getValueInputName,
+            newFilter,
+            getComponentType,
+            getComponentHint,
+            modelWithIds,
+            getItemValue,
+        };
+    },
+});
+export default tekGridColumnFilter;

package/dist/components/tek-grid/column-header/TekGridHeaderRow.js

@@ -0,0 +1,134 @@
+import { defineComponent, inject } from 'vue';
+export default defineComponent({
+    props: {
+        selectable: {
+            type: Boolean,
+            default: false,
+        },
+        headerBackground: {
+            type: String,
+            default: '',
+        },
+        showSelectAll: {
+            type: Boolean,
+            default: false,
+        },
+        allselectedState: {
+            type: Number,
+            default: 0,
+        },
+        visibleColumns: {
+            type: Array,
+            default: () => [],
+        },
+        dragColumns: {
+            type: Boolean,
+            default: false,
+        },
+        headerCellTextColor: {
+            type: String,
+            default: '',
+        },
+        resizeColumns: {
+            type: Boolean,
+            default: false,
+        },
+        getSortIcon: {
+            type: Function,
+            default: () => { },
+        },
+        isSorted: {
+            type: Function,
+            default: () => { },
+        },
+        toggleSort: {
+            type: Function,
+            default: () => { },
+        },
+        tableColumns: {
+            type: Array,
+            default: () => [],
+        },
+        sortBy: {
+            type: Array,
+            default: () => [],
+        },
+        disableCheckbox: {
+            type: Boolean,
+            default: false,
+        },
+        sortable: {
+            type: Boolean,
+            default: true,
+        },
+        name: {
+            type: String,
+            default: '',
+        },
+        modelValue: {
+            type: Object,
+            default: () => [],
+        },
+        instanceName: {
+            type: String,
+            required: true,
+        },
+        filterRelationsDatasource: {
+            type: [Object, null],
+            required: false,
+        },
+        filterOperationsDatasource: {
+            type: [Object, null],
+            required: false,
+        },
+        columnFilterButton: {
+            type: Boolean,
+            required: true,
+        },
+        columnHasFilter: {
+            type: Function,
+            required: true,
+        },
+        level: {
+            type: Number,
+            default: 0,
+        },
+    },
+    emits: ['selectAllClick', 'resizeMousedown', 'resizeClick', 'update:modelValue'],
+    setup(props, { emit }) {
+        const calcWidth = inject('calcWidth');
+        if (!calcWidth) {
+            // TODO: use NotProvidedError
+            throw new Error('calcWidth');
+        }
+        const selectAllClick = (event) => {
+            emit('selectAllClick', event);
+        };
+        const resizeMousedown = (column, event) => {
+            emit('resizeMousedown', { event, column });
+        };
+        const resizeClick = (event) => {
+            emit('resizeClick', { event });
+        };
+        const findOrderIndex = (sortBy, column) => {
+            return sortBy.findIndex((sort) => sort.key === column.name);
+        };
+        const updateModelValue = (columnName, value) => {
+            const modelValue = { ...props.modelValue };
+            modelValue[columnName] = value;
+            emit('update:modelValue', modelValue);
+        };
+        const showFilterButton = (column) => {
+            return column.type !== 'action' && props.columnFilterButton && column.filterable;
+        };
+        return {
+            calcWidth,
+            resizeMousedown,
+            resizeClick,
+            findOrderIndex,
+            updateModelValue,
+            showFilterButton,
+            selectAllClick,
+        };
+    },
+});

package/dist/components/tek-grid/columns-button/TekGridColumnsButton.js

@@ -0,0 +1,79 @@
+import { TekGridColumnsButton } from '@zeedhi/common';
+import sortable from 'sortablejs';
+import { computed, defineComponent, mergeProps, nextTick, ref, watch } from 'vue';
+import { useButtonInstance, useCreateInstance } from '../..';
+import { ZdIterableColumnsButtonProps } from '../../zd-iterable/zd-iterable-columns-button/ZdIterableColumnsButton';
+import optionsModal from './TekGridColumnsOptionsModal';
+export const TekGridColumnsButtonProps = {
+    ...ZdIterableColumnsButtonProps,
+    hideGroups: {
+        type: [Boolean, String],
+        default: false,
+    },
+};
+const tekGridColumnsButton = defineComponent({
+    props: TekGridColumnsButtonProps,
+    inheritAttrs: false,
+    setup(props, ctx) {
+        const { instance, root } = useCreateInstance(props, ctx, TekGridColumnsButton);
+        const buttonScope = useButtonInstance({ instance, root });
+        const menuIsOpened = ref(false);
+        const sortableInitialized = ref(false);
+        const teste = (a) => {
+            console.warn(a);
+        };
+        watch(menuIsOpened, () => {
+            if (!menuIsOpened.value || sortableInitialized.value)
+                return;
+            sortableInitialized.value = true;
+            nextTick(() => {
+                const columnsTableBody = document.querySelector(`#${instance.name}_columns_table tbody`);
+                if (columnsTableBody) {
+                    sortable.create(columnsTableBody, {
+                        handle: '.sortHandle',
+                        dragClass: 'tek-grid-columns-button-sortable-drag',
+                        onEnd: sortEnd,
+                    });
+                }
+            });
+        });
+        const gridGroupColumnNames = computed(() => {
+            return instance.iterableComponent.columns.filter((column) => column.grouped).map((column) => column.name) || [];
+        });
+        const sortEnd = (event) => {
+            const grid = instance.iterableComponent;
+            const newOrder = Array.from(event.srcElement.querySelectorAll('tr')).map((row) => row.getAttribute('name'));
+            const groupColumnNames = [];
+            const newColumns = newOrder.map((columnName) => {
+                const column = grid.getColumn(columnName);
+                if (column.grouped) {
+                    groupColumnNames.push(columnName);
+                }
+                return column;
+            });
+            const ignoredColumns = grid.columns.filter((column) => instance.ignoreColumns.indexOf(column.name) !== -1);
+            grid.columns = newColumns.concat(ignoredColumns);
+            if (grid.updateGrouping && JSON.stringify(groupColumnNames) !== JSON.stringify(gridGroupColumnNames)) {
+                grid.updateGrouping();
+            }
+            grid.changeLayout();
+        };
+        const moreOptions = () => {
+            optionsModal.show(instance);
+        };
+        const close = () => {
+            menuIsOpened.value = false;
+        };
+        return {
+            ...buttonScope,
+            instance,
+            root,
+            menuIsOpened,
+            moreOptions,
+            close,
+            teste,
+            mergeProps,
+        };
+    },
+});
+export default tekGridColumnsButton;