@zeedhi/teknisa-components-vuetify 1.117.1 → 3.0.1

package/environments.json

@@ -0,0 +1,16 @@
+{
+  "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/package.json

@@ -1,12 +1,13 @@
 {
   "name": "@zeedhi/teknisa-components-vuetify",
-  "version": "1.117.1",
+  "version": "3.0.1",
   "description": "Teknisa Components based on Vuetify",
   "author": "Zeedhi <zeedhi@teknisa.com>",
   "license": "ISC",
-  "main": "dist/tek-components-vuetify.umd.js",
-  "module": "dist/tek-components-vuetify.esm.js",
+  "main": "src/index.ts",
+  "module": "dist/teknisa-vuetify.js",
   "typings": "types/index.d.ts",
+  "type": "module",
   "publishConfig": {
     "access": "public"
   },
@@ -18,31 +19,31 @@
     "watch": "rollup -cw"
   },
   "dependencies": {
-    "@zeedhi/zd-drag-grid-common": "<=1.0.6",
-    "@zeedhi/zd-drag-grid-vue": "<=1.0.6",
-    "@zeedhi/zd-user-info-common": "^1.3.2",
-    "@zeedhi/zd-user-info-vue": "^1.3.2",
+    "@zeedhi/teknisa-components-common": "^3.0.1",
+    "@zeedhi/vuetify": "^3.0.0",
+    "@zeedhi/zd-user-info-common": "^3.0.0",
+    "@zeedhi/zd-user-info-vue": "^3.0.0",
     "lodash.clonedeep": "4.5.*",
     "lodash.debounce": "4.0.*",
     "lodash.merge": "4.6.*",
     "sortablejs": "1.15.*",
-    "vue-class-component": "7.2.*",
-    "vue-property-decorator": "9.1.*",
-    "vuedraggable": "^2.24.3"
+    "vue": "^3.0.0",
+    "vuetify": "~3.9.0"
   },
   "devDependencies": {
+    "@rollup/plugin-commonjs": "^24.0.1",
+    "@rollup/plugin-json": "^6.0.0",
+    "@rollup/plugin-typescript": "^11.1.1",
     "@types/jest": "26.0.*",
     "@types/lodash.clonedeep": "4.5.*",
     "@types/lodash.debounce": "4.0.*",
     "@types/lodash.merge": "4.6.*",
     "@types/sortablejs": "1.15.*",
-    "@vue/test-utils": "1.3.*",
+    "rollup-plugin-vue": "^6.0.0",
     "ts-jest": "26.5.*"
   },
-  "peerDependencies": {
-    "@zeedhi/teknisa-components-common": "^1.97.0",
-    "vue": "2.7.*",
-    "vuetify": "2.6.*"
-  },
-  "gitHead": "af96b05ecd9d257920b9244fdd82f9502e70722c"
+  "gitHead": "1c6ee6c23a7e75036a459ada909c934d00f63373",
+  "env": {
+    "NODE_ENV": "production"
+  }
 }

package/src/components/index.ts

@@ -0,0 +1,38 @@
+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 TekUserInfo from './tek-user-info/TekUserInfo.vue';
+import TekUserInfoList from './tek-user-info/TekUserInfoList.vue';
+
+export * from './tek-breadcrumb-header/TekBreadcrumbHeader';
+
+export const components: IDictionary<DefineComponent<any, any, any>> = {
+  TekBreadcrumbHeader,
+  TekGrid,
+  TekGridColumnFilter,
+  TekGridHeaderRow,
+  TekGridColumnsButton,
+  TekGridFilterButton,
+  TekGridIndentation,
+  TekGridLayoutOptions,
+  TekGridFooterRow,
+  TekGridGroupRow,
+  TekUserInfo,
+  TekUserInfoList,
+};
+
+export function RegisterComponents(app: App) {
+	for (const name in components) {
+		app.component(name, components[name]);
+	}
+}

package/src/components/public.ts

@@ -0,0 +1,41 @@
+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 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,
+  // TekImage,
+  // TekProductCard,
+  // TekIterableComponentRender,
+  // TekTreeGrid,
+  TekUserInfo,
+  TekUserInfoList,
+};

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

@@ -0,0 +1,34 @@
+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: {},
+	},
+	rightSlot: {
+		type: Array,
+		default: () => [],
+	},
+};
+
+const breadcrumbHeaderComponent = defineComponent({
+	props: TekBreadcrumbHeaderProps,
+	inheritAttrs: false,
+	setup(props, ctx) {
+		const { instance, root } = useCreateInstance<BreadcrumbHeader>(props, ctx, BreadcrumbHeader);
+
+		return {
+			instance,
+			root,
+		};
+	},
+});
+
+export default breadcrumbHeaderComponent;

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

@@ -0,0 +1,75 @@
+<template>
+  <div
+    :id="instance.name"
+    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, index) in instance.rightSlot"
+            v-bind="child"
+            :is="child.component"
+            :key="index"
+            >
+          </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

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