@zeedhi/teknisa-components-vuetify 3.1.0 → 3.2.0

package/environments.json

@@ -1,16 +0,0 @@
-{
-  "development": {
-    "dependencies": {
-      "@zeedhi/vuetify": "file:../../../zeedhi-vue/packages/vuetify",
-      "@zeedhi/zd-user-info-common": "file:../../../userinfo/packages/common",
-      "@zeedhi/zd-user-info-vue": "file:../../../userinfo/packages/vue"
-    }
-  },
-  "production": {
-    "dependencies": {
-      "@zeedhi/vuetify": "^3.0.0",
-      "@zeedhi/zd-user-info-common": "^3.0.0",
-      "@zeedhi/zd-user-info-vue": "^3.0.0"
-    }
-  }
-}

package/jest.config.cjs

@@ -1,31 +0,0 @@
-module.exports = {
-  moduleFileExtensions: [
-    'js',
-    'jsx',
-    'json',
-    'vue',
-    'ts',
-    'tsx'
-  ],
-  transform: {
-    '^.+\\.vue$': 'vue-jest',
-    '^.+\\.tsx?$': 'ts-jest'
-  },
-  transformIgnorePatterns: [
-    '/node_modules/'
-  ],
-  moduleNameMapper: {
-    '^@/(.*)$': '<rootDir>/src/$1'
-  },
-  snapshotSerializers: [
-    'jest-serializer-vue'
-  ],
-  testMatch: [
-    '**/tests/unit/**/*.spec.(js|jsx|ts|tsx)|**/__tests__/*.(js|jsx|ts|tsx)'
-  ],
-  testURL: 'http://localhost/',
-  watchPlugins: [
-    'jest-watch-typeahead/filename',
-    'jest-watch-typeahead/testname'
-  ]
-}

package/rollup.scss.config.js

@@ -1,13 +0,0 @@
-import scss from 'rollup-plugin-scss';
-
-export default {
-  input: './src/styles/index.scss',
-  output: {
-    format: 'esm',
-  },
-  plugins: [
-    scss({
-      output: 'dist/tek-style.css',
-    }),
-  ],
-};

package/src/components/index.ts

@@ -1,41 +0,0 @@
-import type { App, DefineComponent } from 'vue';
-import type { IDictionary } from '@zeedhi/core';
-
-import TekBreadcrumbHeader from './tek-breadcrumb-header/TekBreadcrumbHeader.vue';
-import TekGrid from './tek-grid/TekGrid.vue';
-import TekGridColumnFilter from './tek-grid/column-filter/TekGridColumnFilter.vue';
-import TekGridHeaderRow from './tek-grid/column-header/TekGridHeaderRow.vue';
-import TekGridColumnsButton from './tek-grid/columns-button/TekGridColumnsButton.vue';
-import TekGridFilterButton from './tek-grid/filter-button/TekGridFilterButton.vue';
-import TekGridIndentation from './tek-grid/indentation/TekGridIndentation.vue';
-import TekGridLayoutOptions from './tek-grid/layout-options/TekGridLayoutOptions.vue';
-import TekGridFooterRow from './tek-grid/row/TekGridFooterRow.vue';
-import TekGridGroupRow from './tek-grid/row/TekGridGroupRow.vue';
-import TekLoading from './tek-loading/TekLoading.vue';
-import TekUserInfo from './tek-user-info/TekUserInfo.vue';
-import TekUserInfoList from './tek-user-info/TekUserInfoList.vue';
-
-export * from './tek-breadcrumb-header/TekBreadcrumbHeader';
-export * from './tek-loading/TekLoading';
-
-export const components: IDictionary<DefineComponent<any, any, any>> = {
-  TekBreadcrumbHeader,
-  TekGrid,
-  TekGridColumnFilter,
-  TekGridHeaderRow,
-  TekGridColumnsButton,
-  TekGridFilterButton,
-  TekGridIndentation,
-  TekGridLayoutOptions,
-  TekGridFooterRow,
-  TekGridGroupRow,
-  TekLoading,
-  TekUserInfo,
-  TekUserInfoList,
-};
-
-export function RegisterComponents(app: App) {
-	for (const name in components) {
-		app.component(name, components[name]);
-	}
-}

package/src/components/public.ts

@@ -1,45 +0,0 @@
-import TekBreadcrumbHeader from './tek-breadcrumb-header/TekBreadcrumbHeader';
-// import TekCardTitle from './tek-card-title/TekCardTitle';
-// import TekCrudAddButton from './crud/TekCrudAddButton';
-// import TekCrudCancelButton from './crud/TekCrudCancelButton';
-// import TekCrudDeleteButton from './crud/TekCrudDeleteButton';
-// import TekCrudForm from './crud/TekCrudForm';
-// import TekCrudSaveButton from './crud/TekCrudSaveButton';
-import TekGrid from './tek-grid/TekGrid';
-import TekGridColumnFilter from './tek-grid/column-filter/TekGridColumnFilter';
-// import TekDragGrid from './tek-drag-grid/TekDragGrid';
-import TekGridColumnsButton from './tek-grid/columns-button/TekGridColumnsButton';
-import TekGridFilterButton from './tek-grid/filter-button/TekGridFilterButton';
-import TekGridLayoutOptions from './tek-grid/layout-options/TekGridLayoutOptions';
-import TekLoading from './tek-loading/TekLoading.vue';
-// import TekImage from './tek-image/TekImage';
-// import TekIterableComponentRender from './tek-iterable-component-render/TekIterableComponentRender';
-// import TekProductCard from './tek-product-card/TekProductCard';
-// import TekTreeGrid from './tek-tree-grid/TekTreeGrid';
-import TekUserInfo from './tek-user-info/TekUserInfo';
-import TekUserInfoList from './tek-user-info/TekUserInfoList';
-
-export {
-  TekBreadcrumbHeader,
-  // TekCardTitle,
-  // TekCrudAddButton,
-  // TekCrudCancelButton,
-  // TekCrudDeleteButton,
-  // TekCrudForm,
-  // TekCrudSaveButton,
-  TekGrid,
-  TekGridColumnFilter,
-  // TekDragGrid,
-  TekGridColumnsButton,
-  TekGridFilterButton,
-  TekGridLayoutOptions,
-  TekLoading,
-  // TekImage,
-  // TekProductCard,
-  // TekIterableComponentRender,
-  // TekTreeGrid,
-  TekUserInfo,
-  TekUserInfoList,
-};
-
-export { TekLoadingProps } from './tek-loading/TekLoading';

package/src/components/tek-breadcrumb-header/TekBreadcrumbHeader.ts

@@ -1,41 +0,0 @@
-import { BreadcrumbHeader } from '@zeedhi/teknisa-components-common';
-import { defineComponent } from 'vue';
-import { useCreateInstance, ZdComponentRenderProps } from '@zeedhi/vuetify';
-
-export const TekBreadcrumbHeaderProps = {
-	...ZdComponentRenderProps,
-	title: {
-		type: String,
-		default: '',
-	},
-	breadcrumb: {
-		type: Object,
-		default: {},
-		watch: false,
-	},
-	rightSlot: {
-		type: Array,
-		default: () => [],
-		watch: false,
-	},
-};
-
-const breadcrumbHeaderComponent = defineComponent({
-	props: TekBreadcrumbHeaderProps,
-	inheritAttrs: false,
-	setup(props, ctx) {
-		const { instance, root } = useCreateInstance<BreadcrumbHeader>(
-			props,
-			ctx,
-			BreadcrumbHeader,
-			TekBreadcrumbHeaderProps,
-		);
-
-		return {
-			instance,
-			root,
-		};
-	},
-});
-
-export default breadcrumbHeaderComponent;

package/src/components/tek-breadcrumb-header/TekBreadcrumbHeader.vue

@@ -1,76 +0,0 @@
-<template>
-  <div
-    :id="instance.name"
-    ref="root"
-    class="tek-breadcrumb-header">
-    <zd-breadcrumbs
-      v-bind="instance.breadcrumb"
-      :theme="instance.theme"
-    />
-    <v-col class="tek-breadcrumb-header-title-col" cols="12">
-      <zd-text
-        v-bind="{
-          name: `${instance.name}-title`,
-          cssClass: 'tek-breadcrumb-header-title',
-          text: $t(instance.title),
-        }"
-      />
-      <span class="tek-breadcrumb-header-slot-right" >
-        <span v-if="instance.rightSlot.length">
-          <component
-            v-for="(child) in instance.rightSlot"
-            v-bind="child"
-            :is="child.component"
-            :key="child.name"
-            >
-          </component>
-        </span>
-        <slot name="rightSlot"></slot>
-      </span>
-    </v-col>
-  </div>
-</template>
-
-<script lang="ts" src="./TekBreadcrumbHeader.ts"></script>
-
-<style lang="scss">
-.tek-breadcrumb-header {
-  .v-breadcrumbs-item {
-    padding: 0;
-  }
-
-  .tek-breadcrumb-header-title-col {
-    display: flex;
-    padding-top: 5px;
-    padding-left: 0;
-
-    .tek-breadcrumb-header-slot-right {
-      margin-left: auto;
-    }
-  }
-
-  .zd-breadcrumbs {
-    padding: 0;
-    font-size: var(--zd-font-body2-size);
-
-    .v-breadcrumbs__item--disabled {
-      color: #667080;
-    }
-  }
-
-  .zd-text {
-    color: #667080;
-
-    &.tek-breadcrumb-header-title {
-      font-size: 32px;
-      font-weight: bold;
-      line-height: 35px;
-      margin-bottom: 10px;
-    }
-
-    > p {
-      margin: 0;
-    }
-  }
-}
-</style>

package/src/components/tek-grid/TekGrid.ts

@@ -1,332 +0,0 @@
-import {
-	IDynamicFilterItem,
-	ITekConfig,
-	ITekGridGroupFooter,
-	ITekGridGroupHeader,
-	TekGrid,
-	TekMemoryDatasource,
-	TekRestDatasource,
-} from '@zeedhi/teknisa-components-common';
-import { Config, IDictionary, Utils } from '@zeedhi/core';
-import cloneDeep from 'lodash.clonedeep';
-import debounce from 'lodash.debounce';
-import { ComponentPublicInstance, computed, defineComponent, nextTick } from 'vue';
-import { buildProps, useGridColumns, getRootElement, useCreateInstance, ZdGridEditableProps, useGridEditableInstance } from '@zeedhi/vuetify';
-import { provideTableLayout } from '../../composables/useTableLayout'
-
-export const TekGridProps = buildProps({
-	...ZdGridEditableProps,
-	toolbarSlot: {
-		type: Array,
-		default: undefined,
-		watch: false,
-	},
-	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: () => [],
-		watch: false,
-	},
-	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,
-		watch: false,
-	},
-	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 as ITekConfig).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<TekGrid, ComponentPublicInstance>(props, ctx, TekGrid, TekGridProps);
-
-		const renderedData = computed(() => {
-			if (instance.isGrouped()) {
-				return instance.getGroupedData();
-			}
-			return instance.getData();
-		});
-
-		const visibleData = computed(() => {
-			return renderedData.value.filter((row) => instance.isItemVisible(row));
-		});
-
-		const isNavigableRow = (element: Element) => {
-			return element.classList.contains('zd-grid__row')
-				&& !element.classList.contains('tek-grid-group-row')
-				&& !element.classList.contains('tek-grid-footer-row');
-		};
-
-		const gridEditableScope = useGridEditableInstance({
-			instance,
-			root,
-			renderedData: visibleData,
-			isNavigableRow,
-		});
-
-		const rootEl = getRootElement(root);
-		const { visibleColumns } = useGridColumns({
-			instance,
-			rootEl,
-			visibilityCondition: (column: any) => 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<IDictionary<IDynamicFilterItem[]>>(() => {
-			if (instance.datasource instanceof TekRestDatasource || instance.datasource instanceof TekMemoryDatasource) {
-				return instance.datasource.dynamicFilter;
-			}
-
-			const datasourceFilter = instance.datasource.filter;
-			const simpleFilter: IDictionary<IDynamicFilterItem[]> = {};
-			Object.keys(datasourceFilter).forEach((key) => {
-				simpleFilter[key] = [{ relation: 'AND', operation: 'CONTAINS', value: datasourceFilter[key] }];
-			});
-			return simpleFilter;
-		});
-
-		const setFilter = (newFilter: IDictionary<IDynamicFilterItem[]>) => {
-			if (Utils.isEqual(filter, newFilter)) return;
-
-			if (instance.datasource instanceof TekRestDatasource || instance.datasource instanceof TekMemoryDatasource) {
-				instance.datasource.dynamicFilter = cloneDeep(newFilter);
-			} else {
-				const normalFilter: IDictionary<any> = {};
-				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: string) => {
-			return instance.columnHasFilter(columnName);
-		};
-
-		const isRowVisible = (row: IDictionary<any>, index: number) => {
-			return instance.isItemVisible(row) && gridEditableScope.shouldRender(index);
-		};
-
-		const isCurrentRowGroup = (row: IDictionary<any>) => {
-			const { uniqueKey, currentRow } = instance.datasource;
-
-			return !!(
-				(row.group && row.groupValue === currentRow.groupValue) ||
-				(row[uniqueKey] && row[uniqueKey] === currentRow[uniqueKey])
-			);
-		};
-
-		const isGroupSelectIndeterminate = (item: ITekGridGroupHeader) => {
-			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: ITekGridGroupHeader) => {
-			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: IDictionary<any>, isSelected: boolean, event: Event) => {
-			nextTick(() => {
-				const rootElement = getRootElement(root);
-				instance.selectGroupClick(row, isSelected, event, rootElement.value);
-			});
-		};
-
-		const selectGroup = (item: ITekGridGroupHeader, event: 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: ITekGridGroupHeader) => {
-			instance.openGroup(item);
-		};
-
-		const isGroup = (item: IDictionary<any>): item is ITekGridGroupHeader => {
-			return !!item.group;
-		};
-
-		const isFooter = (item: IDictionary<any>): item is ITekGridGroupFooter => {
-			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;