@zeedhi/vuetify 3.0.7 → 3.0.9

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zeedhi/vuetify",
-  "version": "3.0.7",
+  "version": "3.0.9",
   "description": "Zeedhi Components based on Vuetify",
   "author": "Zeedhi <zeedhi@teknisa.com>",
   "license": "ISC",
@@ -25,7 +25,7 @@
   "dependencies": {
     "@zeedhi/common": "^3.0.0",
     "@zeedhi/core": "^3.0.0",
-    "@zeedhi/vue": "^3.0.7",
+    "@zeedhi/vue": "^3.0.9",
     "lodash.camelcase": "^4.3.0",
     "lodash.clonedeep": "^4.5.0",
     "lodash.debounce": "^4.0.*",
@@ -51,5 +51,5 @@
   "env": {
     "NODE_ENV": "production"
   },
-  "gitHead": "dcb84a1fc749588a4a0b26fbb576e872df0afe5c"
+  "gitHead": "72192175bdfe55b7fb9e10b40c323f9e226a04e7"
 }

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

@@ -1,287 +0,0 @@
-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

@@ -1,201 +0,0 @@
-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

@@ -1,134 +0,0 @@
-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,
-        };
-    },
-});