@zeedhi/vuetify 3.0.6 → 3.0.7

package/dist/components/index.js

@@ -0,0 +1,275 @@
+import ZdTooltipOverflow from './tooltip-overflow/ZdTooltipOverflow.vue';
+import ZdActivatorWrapper from './zd-activator-wrapper/ZdActivatorWrapper.vue';
+import ZdAlert from './zd-alert/ZdAlert.vue';
+import ZdBadge from './zd-badge/ZdBadge.vue';
+import ZdBreadcrumbs from './zd-breadcrumbs/ZdBreadcrumbs.vue';
+import ZdButtonGroup from './zd-button-group/ZdButtonGroup.vue';
+import ZdButton from './zd-button/ZdButton.vue';
+import ZdCard from './zd-card/ZdCard.vue';
+import ZdCarousel from './zd-carousel/ZdCarousel.vue';
+import ZdCheckboxMultiple from './zd-checkbox-multiple/ZdCheckboxMultiple.vue';
+import ZdCheckbox from './zd-checkbox/ZdCheckbox.vue';
+import ZdChip from './zd-chip/ZdChip.vue';
+import ZdCodeViewer from './zd-code-viewer/ZdCodeViewer.vue';
+import ZdCol from './zd-col/ZdCol.vue';
+import ZdCollapseCard from './zd-collapse-card/ZdCollapseCard.vue';
+import ZdContainer from './zd-container/ZdContainer.vue';
+import ZdCurrency from './zd-currency/ZdCurrency.vue';
+import ZdDateInput from './zd-date-input/ZdDateInput.vue';
+import ZdDateRange from './zd-date-range/ZdDateRange.vue';
+import ZdDialog from './zd-dialog/ZdDialog.vue';
+import ZdDivider from './zd-divider/ZdDivider.vue';
+import ZdDropdown from './zd-dropdown/ZdDropdown.vue';
+import ZdFooter from './zd-footer/ZdFooter.vue';
+import ZdForm from './zd-form/ZdForm.vue';
+import ZdFramePage from './zd-frame-page/ZdFramePage.vue';
+import ZdFrame from './zd-frame/ZdFrame.vue';
+import ZdGridEditable from './zd-grid-editable/ZdGridEditable.vue';
+import ZdGridEditableCell from './zd-grid-editable/cell/ZdGridEditableCell.vue';
+import ZdGridEditableRow from './zd-grid-editable/row/ZdGridEditableRow.vue';
+import ZdGrid from './zd-grid/ZdGrid.vue';
+import ZdGridAction from './zd-grid/cell/ZdGridAction.vue';
+import ZdGridCell from './zd-grid/cell/ZdGridCell.vue';
+import ZdGridCellContent from './zd-grid/cell/ZdGridCellContent.vue';
+import ZdGridCheckbox from './zd-grid/cell/ZdGridCheckbox.vue';
+import ZdGridColumnHeader from './zd-grid/column-header/ZdGridColumnHeader.vue';
+import ZdGridHeaderIcon from './zd-grid/column-header/ZdGridHeaderIcon.vue';
+import ZdGridHeaderRow from './zd-grid/column-header/ZdGridHeaderRow.vue';
+import ZdGridSort from './zd-grid/column-header/ZdGridSort.vue';
+import ZdGridFooter from './zd-grid/footer/ZdGridFooter.vue';
+import ZdGridHelper from './zd-grid/helper/ZdGridHelper.vue';
+import TableRow from './zd-grid/row/TableRow.vue';
+import ZdGridRow from './zd-grid/row/ZdGridRow.vue';
+import ZdGridToolbar from './zd-grid/toolbar/ZdGridToolbar.vue';
+import ZdHeader from './zd-header/ZdHeader.vue';
+import ZdIcon from './zd-icon/ZdIcon.vue';
+import ZdImage from './zd-image/ZdImage.vue';
+import ZdIncrement from './zd-increment/ZdIncrement.vue';
+import ZdIterableComponentRender from './zd-iterable-component-render/ZdIterableComponentRender.vue';
+import ZdIterableNoData from './zd-iterable/ZdIterableNoData.vue';
+import ZdIterableColumnsButton from './zd-iterable/zd-iterable-columns-button/ZdIterableColumnsButton.vue';
+import ZdIterablePageInfo from './zd-iterable/zd-iterable-page-info/ZdIterablePageInfo.vue';
+import ZdIterablePageSize from './zd-iterable/zd-iterable-page-size/ZdIterablePageSize.vue';
+import ZdIterablePagination from './zd-iterable/zd-iterable-pagination/ZdIterablePagination.vue';
+import ZdSearch from './zd-iterable/zd-search/ZdSearch.vue';
+import ZdLayout from './zd-layout/ZdLayout.vue';
+import ZdList from './zd-list/ZdList.vue';
+import ZdListGroup from './zd-list/ZdListGroup.vue';
+import ZdListItem from './zd-list/ZdListItem.vue';
+import ZdLoading from './zd-loading/ZdLoading.vue';
+import ZdLogin from './zd-login/ZdLogin.vue';
+import ZdLoginButton from './zd-login/ZdLoginButton.vue';
+import ZdMain from './zd-main/ZdMain.vue';
+import ZdMasterDetail from './zd-master-detail/ZdMasterDetail.vue';
+import ZdMenu from './zd-menu/ZdMenu.vue';
+import ZdMenuButton from './zd-menu/ZdMenuButton.vue';
+import ZdMenuGroup from './zd-menu/ZdMenuGroup.vue';
+import ZdMenuLink from './zd-menu/ZdMenuLink.vue';
+import ZdMenuSeparator from './zd-menu/ZdMenuSeparator.vue';
+import ZdModal from './zd-modal/ZdModal.vue';
+import ZdModalCloseButton from './zd-modal/ZdModalCloseButton.vue';
+import ZdMonth from './zd-month/ZdMonth.vue';
+import ZdNumberInput from './zd-number-input/ZdNumberInput.vue';
+import ZdPassword from './zd-password/ZdPassword.vue';
+import ZdProgress from './zd-progress/ZdProgress.vue';
+import ZdRadio from './zd-radio/ZdRadio.vue';
+import ZdRow from './zd-row/ZdRow.vue';
+import ZdSelectMultiple from './zd-select-multiple/ZdSelectMultiple.vue';
+import ZdSelect from './zd-select/ZdSelect.vue';
+import ZdSvgMap from './zd-svg-map/ZdSvgMap.vue';
+import ZdSwitch from './zd-switch/ZdSwitch.vue';
+import ZdTable from './zd-table/ZdTable.vue';
+import ZdTab from './zd-tabs/ZdTab.vue';
+import ZdTabItem from './zd-tabs/ZdTabItem.vue';
+import ZdTabs from './zd-tabs/ZdTabs.vue';
+import ZdTag from './zd-tag/ZdTag.vue';
+import ZdTextInput from './zd-text-input/ZdTextInput.vue';
+import ZdText from './zd-text/ZdText.vue';
+import ZdTextarea from './zd-textarea/ZdTextarea.vue';
+import ZdTime from './zd-time/ZdTime.vue';
+import ZdTooltip from './zd-tooltip/ZdTooltip.vue';
+import ZdTreeGrid from './zd-tree-grid/ZdTreeGrid.vue';
+import ZdTreeGridCell from './zd-tree-grid/cell/ZdTreeGridCell.vue';
+import ZdTreeGridRow from './zd-tree-grid/row/ZdTreeGridRow.vue';
+import ZdTree from './zd-tree/ZdTree.vue';
+import ZdTreeAfterTitle from './zd-tree/ZdTreeAfterTitle.vue';
+import ZdTreeCheckbox from './zd-tree/ZdTreeCheckbox.vue';
+export * from './zd-component/ZdComponent';
+export * from './zd-component/ZdComponentRender';
+export * from './zd-chip/ZdChip';
+export * from './zd-alert/ZdAlert';
+export * from './zd-activator-wrapper/ZdActivatorWrapper';
+export * from './zd-breadcrumbs/ZdBreadcrumbs';
+export * from './zd-badge/ZdBadge';
+export * from './zd-button/ZdButton';
+export * from './zd-button-group/ZdButtonGroup';
+export * from './zd-card/ZdCard';
+export * from './zd-carousel/ZdCarousel';
+export * from './zd-checkbox/ZdCheckbox';
+export * from './zd-code-viewer/ZdCodeViewer';
+export * from './zd-col/ZdCol';
+export * from './zd-container/ZdContainer';
+export * from './zd-date-input/ZdDateInput';
+export * from './zd-divider/ZdDivider';
+export * from './zd-form/ZdForm';
+export * from './zd-footer/ZdFooter';
+export * from './zd-frame-page/ZdFramePage';
+export * from './zd-frame/ZdFrame';
+export * from './zd-header/ZdHeader';
+export * from './zd-icon/ZdIcon';
+export * from './zd-image/ZdImage';
+export * from './zd-iterable/ZdIterable';
+export * from './zd-layout/ZdLayout';
+export * from './zd-main/ZdMain';
+export * from './zd-menu/ZdMenu';
+export * from './zd-menu/ZdMenuButton';
+export * from './zd-menu/ZdMenuGroup';
+export * from './zd-menu/ZdMenuLink';
+export * from './zd-menu/ZdMenuSeparator';
+export * from './zd-radio/ZdRadio';
+export * from './zd-row/ZdRow';
+export * from './zd-table/ZdTable';
+export * from './zd-tabs/ZdTab';
+export * from './zd-tabs/ZdTabItem';
+export * from './zd-tabs/ZdTabs';
+export * from './zd-tag/ZdTag';
+export * from './zd-text/ZdText';
+export * from './zd-input/ZdInput';
+export * from './zd-text-input/ZdTextInput';
+export * from './zd-loading/ZdLoading';
+export * from './zd-login/ZdLogin';
+export * from './zd-login/ZdLoginButton';
+export * from './zd-switch/ZdSwitch';
+export * from './zd-textarea/ZdTextarea';
+export * from './zd-tooltip/ZdTooltip';
+export * from './zd-dropdown/ZdDropdown';
+export * from './zd-select/ZdSelect';
+export * from './zd-select-multiple/ZdSelectMultiple';
+export * from './zd-dialog/ZdDialog';
+export * from './zd-password/ZdPassword';
+export * from './zd-modal/ZdModal';
+export * from './zd-modal/ZdModalCloseButton';
+export * from './zd-number-input/ZdNumberInput';
+export * from './zd-list/ZdList';
+export * from './zd-list/ZdListItem';
+export * from './zd-grid/ZdGrid';
+export * from './zd-collapse-card/ZdCollapseCard';
+export * from './zd-grid-editable/ZdGridEditable';
+export * from './zd-iterable/zd-iterable-columns-button/ZdIterableColumnsButton';
+export * from './zd-progress/ZdProgress';
+export * from './zd-svg-map/ZdSvgMap';
+export * from './zd-checkbox-multiple/ZdCheckboxMultiple';
+export * from './zd-master-detail/ZdMasterDetail';
+export * from './zd-currency/ZdCurrency';
+export * from './zd-time/ZdTime';
+export * from './zd-month/ZdMonth';
+export * from './zd-tree/ZdTree';
+export * from './zd-tree/ZdTreeCheckbox';
+export * from './zd-tree/ZdTreeAfterTitle';
+export * from './zd-increment/ZdIncrement';
+export * from './zd-currency/ZdCurrency';
+export * from './zd-month/ZdMonth';
+export * from './zd-date-range/ZdDateRange';
+export const components = {
+    ZdAlert,
+    ZdActivatorWrapper,
+    ZdBreadcrumbs,
+    ZdBadge,
+    ZdButton,
+    ZdButtonGroup,
+    ZdCard,
+    ZdCarousel,
+    ZdCheckbox,
+    ZdContainer,
+    ZdDateInput,
+    ZdDialog,
+    ZdDivider,
+    ZdForm,
+    ZdChip,
+    ZdFooter,
+    ZdFrame,
+    ZdFramePage,
+    ZdCodeViewer,
+    ZdCol,
+    ZdHeader,
+    ZdIcon,
+    ZdImage,
+    ZdIterableComponentRender,
+    ZdLayout,
+    ZdMain,
+    ZdTable,
+    ZdTab,
+    ZdTabs,
+    ZdTabItem,
+    ZdMenu,
+    ZdMenuButton,
+    ZdMenuGroup,
+    ZdMenuLink,
+    ZdMenuSeparator,
+    ZdTag,
+    ZdText,
+    ZdRadio,
+    ZdRow,
+    ZdTextInput,
+    ZdTextarea,
+    ZdLoading,
+    ZdLogin,
+    ZdLoginButton,
+    ZdSwitch,
+    ZdTooltip,
+    ZdDropdown,
+    ZdSelect,
+    ZdSelectMultiple,
+    ZdPassword,
+    ZdModal,
+    ZdNumberInput,
+    ZdModalCloseButton,
+    ZdList,
+    ZdListItem,
+    ZdListGroup,
+    ZdGrid,
+    ZdGridColumnHeader,
+    ZdGridHelper,
+    ZdGridSort,
+    ZdGridHeaderRow,
+    ZdGridToolbar,
+    ZdIterableNoData,
+    ZdGridFooter,
+    ZdGridCell,
+    ZdGridCellContent,
+    ZdGridAction,
+    ZdTooltipOverflow,
+    ZdGridHeaderIcon,
+    ZdGridCheckbox,
+    ZdSearch,
+    ZdIterablePagination,
+    ZdIterablePageSize,
+    ZdIterablePageInfo,
+    ZdIterableColumnsButton,
+    ZdGridRow,
+    TableRow,
+    ZdGridEditable,
+    ZdGridEditableRow,
+    ZdGridEditableCell,
+    ZdTreeGrid,
+    ZdTreeGridCell,
+    ZdTreeGridRow,
+    ZdCollapseCard,
+    ZdProgress,
+    ZdSvgMap,
+    ZdCheckboxMultiple,
+    ZdMasterDetail,
+    ZdCurrency,
+    ZdMonth,
+    ZdTime,
+    ZdTree,
+    ZdTreeCheckbox,
+    ZdTreeAfterTitle,
+    ZdIncrement,
+    ZdDateRange,
+};
+export function RegisterComponents(app) {
+    for (const name in components) {
+        app.component(name, components[name]);
+    }
+}

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;