@zeedhi/teknisa-components-vuetify 3.0.3 → 3.1.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zeedhi/teknisa-components-vuetify",
-  "version": "3.0.3",
+  "version": "3.1.0",
   "description": "Teknisa Components based on Vuetify",
   "author": "Zeedhi <zeedhi@teknisa.com>",
   "license": "ISC",
@@ -19,7 +19,7 @@
     "watch": "rollup -cw"
   },
   "dependencies": {
-    "@zeedhi/teknisa-components-common": "^3.0.3",
+    "@zeedhi/teknisa-components-common": "^3.1.0",
     "@zeedhi/vuetify": "^3.0.0",
     "@zeedhi/zd-user-info-common": "^3.0.0",
     "@zeedhi/zd-user-info-vue": "^3.0.0",
@@ -42,7 +42,7 @@
     "rollup-plugin-vue": "^6.0.0",
     "ts-jest": "26.5.*"
   },
-  "gitHead": "11a2585cf51e1493b086de34040c3f8115b0d5af",
+  "gitHead": "a59638c95db87930b47a12dd8aa8401bf2b906ca",
   "env": {
     "NODE_ENV": "production"
   }

package/src/components/index.ts

@@ -11,10 +11,12 @@ 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,
@@ -27,6 +29,7 @@ export const components: IDictionary<DefineComponent<any, any, any>> = {
   TekGridLayoutOptions,
   TekGridFooterRow,
   TekGridGroupRow,
+  TekLoading,
   TekUserInfo,
   TekUserInfoList,
 };

package/src/components/public.ts

@@ -11,6 +11,7 @@ import TekGridColumnFilter from './tek-grid/column-filter/TekGridColumnFilter';
 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';
@@ -32,6 +33,7 @@ export {
   TekGridColumnsButton,
   TekGridFilterButton,
   TekGridLayoutOptions,
+  TekLoading,
   // TekImage,
   // TekProductCard,
   // TekIterableComponentRender,
@@ -39,3 +41,5 @@ export {
   TekUserInfo,
   TekUserInfoList,
 };
+
+export { TekLoadingProps } from './tek-loading/TekLoading';

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

@@ -11,10 +11,12 @@ export const TekBreadcrumbHeaderProps = {
 	breadcrumb: {
 		type: Object,
 		default: {},
+		watch: false,
 	},
 	rightSlot: {
 		type: Array,
 		default: () => [],
+		watch: false,
 	},
 };
 
@@ -22,7 +24,12 @@ const breadcrumbHeaderComponent = defineComponent({
 	props: TekBreadcrumbHeaderProps,
 	inheritAttrs: false,
 	setup(props, ctx) {
-		const { instance, root } = useCreateInstance<BreadcrumbHeader>(props, ctx, BreadcrumbHeader);
+		const { instance, root } = useCreateInstance<BreadcrumbHeader>(
+			props,
+			ctx,
+			BreadcrumbHeader,
+			TekBreadcrumbHeaderProps,
+		);
 
 		return {
 			instance,

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

@@ -1,6 +1,7 @@
 <template>
   <div
     :id="instance.name"
+    ref="root"
     class="tek-breadcrumb-header">
     <zd-breadcrumbs
       v-bind="instance.breadcrumb"

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

@@ -19,6 +19,7 @@ export const TekGridProps = buildProps({
 	toolbarSlot: {
 		type: Array,
 		default: undefined,
+		watch: false,
 	},
 	title: {
 		type: String,
@@ -67,6 +68,7 @@ export const TekGridProps = buildProps({
 	actions: {
 		type: Array,
 		default: () => [],
+		watch: false,
 	},
 	dragColumns: {
 		type: [Boolean, String],
@@ -93,6 +95,7 @@ export const TekGridProps = buildProps({
 	},
 	exportActions: {
 		type: Array,
+		watch: false,
 	},
 	groupsOpened: {
 		type: [Boolean, String],
@@ -134,7 +137,7 @@ const gridEditableComponent = defineComponent({
 	props: TekGridProps,
 	inheritAttrs: false,
 	setup(props, ctx) {
-		const { instance, root } = useCreateInstance<TekGrid, ComponentPublicInstance>(props, ctx, TekGrid);
+		const { instance, root } = useCreateInstance<TekGrid, ComponentPublicInstance>(props, ctx, TekGrid, TekGridProps);
 
 		const renderedData = computed(() => {
 			if (instance.isGrouped()) {
@@ -147,7 +150,18 @@ const gridEditableComponent = defineComponent({
 			return renderedData.value.filter((row) => instance.isItemVisible(row));
 		});
 
-		const gridEditableScope = useGridEditableInstance({ instance, root, renderedData: visibleData });
+		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({

package/src/components/tek-grid/columns-button/TekGridColumnsButton.ts

@@ -20,6 +20,7 @@ const tekGridColumnsButton = defineComponent({
 			props,
 			ctx,
 			TekGridColumnsButton,
+			TekGridColumnsButtonProps,
 		);
 		const buttonScope = useButtonInstance({ instance, root });
 

package/src/components/tek-grid/columns-button/TekGridColumnsOptionsModal.ts

@@ -5,7 +5,7 @@ import { UnwrapNestedRefs } from 'vue';
 import TekGridColumnsOptionsController from './TekGridColumnsOptionsController';
 
 export default class TekGridColumnsOptionsModal {
-	private static controllerName = `TekGridColumnsOptionsController_${new Date().getTime()}`;
+	private static controllerName = `TekGridColumnsOptionsController_${Date.now()}`;
 
 	private static modalDef: IModal = {
 		name: 'tekGridColumnsOptionsModal',

package/src/components/tek-grid/filter-button/TekGridFilterButton.ts

@@ -28,6 +28,7 @@ const tekGridFilterButtonComponent = defineComponent({
 			props,
 			ctx,
 			TekGridFilterButton,
+			TekGridFilterButtonProps,
 		);
 		const buttonScope = useButtonInstance({ instance, root });
 

package/src/components/tek-grid/layout-options/TekGridLayoutOptions.ts

@@ -14,7 +14,12 @@ const layoutOptionsComponent = defineComponent({
 	props: TekGridLayoutOptionsProps,
 	inheritAttrs: false,
 	setup(props, ctx) {
-		const { instance, root } = useCreateInstance<TekGridLayoutOptions>(props, ctx, TekGridLayoutOptions);
+		const { instance, root } = useCreateInstance<TekGridLayoutOptions>(
+			props,
+			ctx,
+			TekGridLayoutOptions,
+			TekGridLayoutOptionsProps,
+		);
 
 		const { applyLayout: applyTekGridLayout, getColumnElements, getTableWidth } = useTableLayout();
 

package/src/components/tek-loading/TekLoading.ts

@@ -0,0 +1,30 @@
+import { Loading } from '@zeedhi/teknisa-components-common';
+import { useCreateInstance, ZdLoadingProps } from '@zeedhi/vuetify';
+import { defineComponent } from 'vue';
+
+export const TekLoadingProps = {
+	...ZdLoadingProps,
+	text: {
+		type: String,
+		default: '',
+	},
+	image: {
+		type: String,
+		default: undefined,
+	},
+};
+
+const loadingComponent = defineComponent({
+	props: TekLoadingProps,
+	inheritAttrs: false,
+	setup(props, ctx) {
+		const { instance, root } = useCreateInstance<Loading>(props, ctx, Loading, TekLoadingProps);
+
+		return {
+			instance,
+			root,
+		};
+	},
+});
+
+export default loadingComponent;

package/src/components/tek-loading/TekLoading.vue

@@ -0,0 +1,18 @@
+<template>
+  <zd-loading
+    ref="root"
+    v-bind="{
+      name: instance.name,
+      text: instance.text,
+      image: instance.image,
+      zIndex: instance.zIndex,
+      textColor,
+      loadingColor,
+      size,
+      loadingWidth,
+      opacity,
+    }"
+  />
+</template>
+
+<script lang="ts" src="./TekLoading.ts"></script>

package/src/components/tek-user-info/TekUserInfo.ts

@@ -25,6 +25,7 @@ export const TekUserInfoProps ={
   bottomSlot: {
     type: Array as () => IComponentRender[],
     default: undefined,
+		watch: false,
   },
 };
 
@@ -32,7 +33,7 @@ const tekUserInfoComponent = defineComponent({
   props: TekUserInfoProps,
   inheritAttrs: false,
   setup(props, ctx) {
-    const { instance, root } = useCreateInstance<TekUserInfoClass>(props, ctx, TekUserInfoClass);
+    const { instance, root } = useCreateInstance<TekUserInfoClass>(props, ctx, TekUserInfoClass, TekUserInfoProps);
 
     const { click, focus, blur, mouseenter, mouseleave } = useGetMethods(instance, root);
 

package/src/components/tek-user-info/TekUserInfoList.ts

@@ -19,7 +19,12 @@ const tekUserInfoListComponent = defineComponent({
   props: TekUserInfoListProps,
   inheritAttrs: false,
   setup(props,ctx) {
-    const { instance, root } = useCreateInstance<TekUserInfoListClass>(props, ctx, TekUserInfoListClass);
+    const { instance, root } = useCreateInstance<TekUserInfoListClass>(
+      props,
+      ctx,
+      TekUserInfoListClass,
+      TekUserInfoListProps,
+    );
 
     const { click, focus, blur, mouseenter, mouseleave } = useGetMethods(instance, root);
 

package/src/index.ts

@@ -1,7 +1,6 @@
 /* eslint-disable max-len */
 import type { App } from 'vue';
 import { Icons } from '@zeedhi/common';
-import ZdUserInfoComponent from '@zeedhi/zd-user-info-vue';
 import { components } from './components';
 
 Icons.addIcons({
@@ -20,8 +19,6 @@ const TeknisaComponents = {
     Object.keys(components).forEach((id) => {
       app.component(id, components[id]);
     });
-
-    app.component('ZdUserInfo', ZdUserInfoComponent);
   },
 };
 

package/types/components/index.d.ts

@@ -1,5 +1,6 @@
-import type { App, DefineComponent } from 'vue';
-import type { IDictionary } from '@zeedhi/core';
-export * from './tek-breadcrumb-header/TekBreadcrumbHeader';
-export declare const components: IDictionary<DefineComponent<any, any, any>>;
-export declare function RegisterComponents(app: App): void;
+import type { App, DefineComponent } from 'vue';
+import type { IDictionary } from '@zeedhi/core';
+export * from './tek-breadcrumb-header/TekBreadcrumbHeader';
+export * from './tek-loading/TekLoading';
+export declare const components: IDictionary<DefineComponent<any, any, any>>;
+export declare function RegisterComponents(app: App): void;

package/types/components/public.d.ts

@@ -1,9 +1,11 @@
-import TekBreadcrumbHeader from './tek-breadcrumb-header/TekBreadcrumbHeader';
-import TekGrid from './tek-grid/TekGrid';
-import TekGridColumnFilter from './tek-grid/column-filter/TekGridColumnFilter';
-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 TekUserInfo from './tek-user-info/TekUserInfo';
-import TekUserInfoList from './tek-user-info/TekUserInfoList';
-export { TekBreadcrumbHeader, TekGrid, TekGridColumnFilter, TekGridColumnsButton, TekGridFilterButton, TekGridLayoutOptions, TekUserInfo, TekUserInfoList, };
+import TekBreadcrumbHeader from './tek-breadcrumb-header/TekBreadcrumbHeader';
+import TekGrid from './tek-grid/TekGrid';
+import TekGridColumnFilter from './tek-grid/column-filter/TekGridColumnFilter';
+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 TekUserInfo from './tek-user-info/TekUserInfo';
+import TekUserInfoList from './tek-user-info/TekUserInfoList';
+export { TekBreadcrumbHeader, TekGrid, TekGridColumnFilter, TekGridColumnsButton, TekGridFilterButton, TekGridLayoutOptions, TekLoading, TekUserInfo, TekUserInfoList, };
+export { TekLoadingProps } from './tek-loading/TekLoading';