@zeedhi/vuetify 3.0.11 → 3.1.0

package/src/components/zd-grid-editable/ZdGridEditable.ts

@@ -44,14 +44,16 @@ export function useGridEditableInstance({
 	instance,
 	root,
 	renderedData,
+	isNavigableRow,
 }: {
 	instance: UnwrapNestedRefs<IGridEditable>;
 	root: Readonly<ShallowRef<ComponentPublicInstance | null>>;
 	renderedData?: ComputedRef<IDictionary<any>[]>;
+	isNavigableRow?: (element: Element) => boolean;
 }) {
 	const rootEl = getRootElement(root);
 
-	const gridScope = useGridInstance({ instance, root, renderedData });
+	const gridScope = useGridInstance({ instance, root, renderedData, isNavigableRow });
 
 	const { doubleClick } = useDoubleClick();
 
@@ -221,7 +223,12 @@ const gridEditableComponent = defineComponent({
 	props: ZdGridEditableProps,
 	inheritAttrs: false,
 	setup(props, ctx) {
-		const { instance, root } = useCreateInstance<GridEditable, ComponentPublicInstance>(props, ctx, GridEditable);
+		const { instance, root } = useCreateInstance<GridEditable, ComponentPublicInstance>(
+			props,
+			ctx,
+			GridEditable,
+			ZdGridEditableProps,
+		);
 		const gridEditableScope = useGridEditableInstance({ instance, root });
 
 		return {

package/src/components/zd-grid-editable/cell/ZdGridEditableCell.vue

@@ -78,6 +78,7 @@
 .zd-grid__cell {
   .zd-grid-editable__cell-content {
     height: 100%;
+    width: 100%;
     align-content: center;
     display: flex;
     flex-direction: row;

package/src/components/zd-header/ZdHeader.ts

@@ -23,6 +23,7 @@ export const ZdHeaderProps = buildProps({
 	centerSlot: {
 		type: Array,
 		default: () => [],
+		watch: false,
 	},
 	color: {
 		type: String,
@@ -43,6 +44,7 @@ export const ZdHeaderProps = buildProps({
 	leftSlot: {
 		type: Array,
 		default: () => [],
+		watch: false,
 	},
 	padless: {
 		type: [Boolean, String],
@@ -51,6 +53,7 @@ export const ZdHeaderProps = buildProps({
 	rightSlot: {
 		type: Array,
 		default: () => [],
+		watch: false,
 	},
 	// Zeedhi 3.0
 	image: {
@@ -67,7 +70,7 @@ const headerComponent = defineComponent({
 	props: ZdHeaderProps,
 	inheritAttrs: false,
 	setup(props, ctx) {
-		const { instance, root } = useCreateInstance<Header>(props, ctx, Header);
+		const { instance, root } = useCreateInstance<Header>(props, ctx, Header, ZdHeaderProps);
 
 		const { click, mouseenter, mouseleave } = useGetMethods(instance, root);
 

package/src/components/zd-icon/ZdIcon.ts

@@ -51,7 +51,7 @@ const iconComponent = defineComponent({
 	props: ZdIconProps,
 	inheritAttrs: false,
 	setup(props, ctx) {
-		const { instance, root } = useCreateInstance<Icon>(props, ctx, Icon);
+		const { instance, root } = useCreateInstance<Icon>(props, ctx, Icon, ZdIconProps);
 		const { click, mouseenter, mouseleave } = useGetMethods(instance, root);
 
 		return {

package/src/components/zd-image/ZdImage.ts

@@ -34,7 +34,7 @@ const imageComponent = defineComponent({
 	props: ZdImageProps,
 	inheritAttrs: false,
 	setup(props, ctx) {
-		const { instance, root } = useCreateInstance<Image>(props, ctx, Image);
+		const { instance, root } = useCreateInstance<Image>(props, ctx, Image, ZdImageProps);
 
 		const { click, focus, blur, mouseenter, mouseleave } = useGetMethods(instance, root);
 

package/src/components/zd-increment/ZdIncrement.ts

@@ -25,7 +25,7 @@ export default defineComponent({
 	props: ZdIncrementProps,
 	inheritAttrs: false,
 	setup(props, ctx) {
-		const { instance, root } = useCreateInstance<Increment>(props, ctx, Increment);
+		const { instance, root } = useCreateInstance<Increment>(props, ctx, Increment, ZdIncrementProps);
 
 		const { click, focus, blur, mouseenter, mouseleave } = useGetMethods(instance, root);
 

package/src/components/zd-input/ZdInput.ts

@@ -92,6 +92,7 @@ export const ZdInputProps = buildProps({
 	validations: {
 		type: [Object, String],
 		default: {},
+		watch: false,
 	},
 	value: {
 		default: null,
@@ -107,7 +108,7 @@ const inputComponent: any = defineComponent({
 	props: ZdInputProps,
 	inheritAttrs: false,
 	setup(props, ctx) {
-		const { instance, root } = useCreateInputInstance(props, ctx, Input);
+		const { instance, root } = useCreateInputInstance(props, ctx, Input, ZdInputProps);
 		const inputScope = useInput(instance, ctx, root);
 
 		return {
@@ -150,7 +151,6 @@ export function useInput<TG extends Input>(
 	const input = () => {
 		const rootElement = getRootElement(root);
 		emit('update:value', instance.value);
-		emit('input', instance.value);
 		instance.input(undefined, rootElement.value);
 	};
 
@@ -184,10 +184,17 @@ export function useCreateInputInstance<TG extends Input>(
 	props: Record<string, any>,
 	ctx: SetupContext,
 	ObjectClass: new (args: any) => TG,
+	propsDefs: Record<string, any>,
 ) {
 	const checkParentType = (parentInstance?: Component) => {
 		return !!(parentInstance && parentInstance instanceof Form);
 	};
 
-	return useCreateInstance<TG>(props, ctx, ObjectClass, checkParentType);
+	return useCreateInstance<TG>(
+		props,
+		ctx,
+		ObjectClass,
+		propsDefs,
+		checkParentType,
+	);
 }

package/src/components/zd-iterable/ZdIterable.ts

@@ -10,12 +10,14 @@ export const ZdIterableProps = buildProps({
 		default() {
 			return [];
 		},
+		watch: false,
 	},
 	datasource: {
 		type: Object,
 		defaut() {
 			return {};
 		},
+		watch: false,
 	},
 	pageSizes: {
 		type: [String, Array<string>],

package/src/components/zd-iterable/zd-iterable-columns-button/ZdIterableColumnsButton.ts

@@ -29,7 +29,12 @@ const iterableColumnsButton = defineComponent({
 	name: 'ZdIterableColumnsButton',
 	props: ZdIterableColumnsButtonProps,
 	setup(props, ctx) {
-		const { instance } = useCreateInstance<IterableColumnsButton>(props, ctx, IterableColumnsButton);
+		const { instance } = useCreateInstance<IterableColumnsButton>(
+			props,
+			ctx,
+			IterableColumnsButton,
+			ZdIterableColumnsButtonProps,
+		);
 
 		const getEvents = (on: any) => {
 			const events = { ...instance.events };

package/src/components/zd-iterable/zd-iterable-page-info/ZdIterablePageInfo.ts

@@ -15,7 +15,7 @@ export default defineComponent({
 	props: ZdIterablePageInfoProps,
 	inheritAttrs: false,
 	setup(props, ctx) {
-		const { instance } = useCreateInstance<IterablePageInfo>(props, ctx, IterablePageInfo);
+		const { instance } = useCreateInstance<IterablePageInfo>(props, ctx, IterablePageInfo, ZdIterablePageInfoProps);
 
 		return {
 			instance,

package/src/components/zd-iterable/zd-iterable-page-size/ZdIterablePageSize.ts

@@ -33,6 +33,7 @@ export const ZdIterablePageSizeProps = {
 	},
 	validations: {
 		type: [Object, String] as PropType<IDictionary<IDictionary<string | number>>>,
+		watch: false,
 	},
 	// Zeedhi 3.0
 };
@@ -41,7 +42,7 @@ export default defineComponent({
 	props: ZdIterablePageSizeProps,
 	inheritAttrs: false,
 	setup(props, ctx) {
-		const { instance } = useCreateInstance<IterablePageSize>(props, ctx, IterablePageSize);
+		const { instance } = useCreateInstance<IterablePageSize>(props, ctx, IterablePageSize, ZdIterablePageSizeProps);
 
 		onMounted(() => {
 			const data = instance.iterableComponent.pageSizes.map((size: string) => ({ value: size }));

package/src/components/zd-iterable/zd-iterable-pagination/ZdIterablePagination.ts

@@ -3,7 +3,7 @@ import { PropType, defineComponent } from 'vue';
 import { useCreateInstance } from '../../zd-component/ZdComponent';
 import { ZdTextInputProps } from '../../zd-text-input/ZdTextInput';
 
-export const ZdSearchProps = {
+export const ZdIterablePaginationProps = {
 	...ZdTextInputProps,
 	iterableComponentName: {
 		type: String,
@@ -27,10 +27,15 @@ export const ZdSearchProps = {
 };
 
 export default defineComponent({
-	props: ZdSearchProps,
+	props: ZdIterablePaginationProps,
 	inheritAttrs: false,
 	setup(props, ctx) {
-		const { instance } = useCreateInstance<IterablePagination>(props, ctx, IterablePagination);
+		const { instance } = useCreateInstance<IterablePagination>(
+			props,
+			ctx,
+			IterablePagination,
+			ZdIterablePaginationProps,
+		);
 
 		return {
 			instance,

package/src/components/zd-iterable/zd-search/ZdSearch.ts

@@ -35,7 +35,7 @@ export default defineComponent({
 	props: ZdSearchProps,
 	inheritAttrs: false,
 	setup(props, ctx) {
-		const { instance, root } = useCreateInstance<Search>(props, ctx, Search);
+		const { instance, root } = useCreateInstance<Search>(props, ctx, Search, ZdSearchProps);
 
 		const textInputScope = useTextInput(instance, ctx, root);
 

package/src/components/zd-iterable-component-render/ZdIterableComponentRender.ts

@@ -12,15 +12,18 @@ export const ZdIterableComponentRenderProps = buildProps({
 		default() {
 			return [];
 		},
+		watch: false,
 	},
 	toolbarSlot: {
 		type: Array<IComponentRender>,
 		default() {
 			return [];
 		},
+		watch: false,
 	},
 	componentMetadata: {
 		type: [Object, String],
+		watch: false,
 	},
 	rowPropName: {
 		type: String,
@@ -31,6 +34,7 @@ export const ZdIterableComponentRenderProps = buildProps({
 		default() {
 			return [];
 		},
+		watch: false,
 	},
 	noDataSlot: {
 		type: Array<IComponentRender>,
@@ -42,6 +46,7 @@ export const ZdIterableComponentRenderProps = buildProps({
 				text: 'NO_DATA',
 			},
 		],
+		watch: false,
 	},
 	noResultSlot: {
 		type: Array<IComponentRender>,
@@ -53,6 +58,7 @@ export const ZdIterableComponentRenderProps = buildProps({
 				text: 'NO_RESULT',
 			},
 		],
+		watch: false,
 	},
 	height: {
 		type: [Number, String],
@@ -89,7 +95,12 @@ const iterableComponentRender = defineComponent({
 	inheritAttrs: false,
 
 	setup(props, ctx) {
-		const { instance, root } = useCreateInstance<IterableComponentRender>(props, ctx, IterableComponentRender);
+		const { instance, root } = useCreateInstance<IterableComponentRender>(
+			props,
+			ctx,
+			IterableComponentRender,
+			ZdIterableComponentRenderProps,
+		);
 
 		const { click, focus, blur, mouseenter, mouseleave } = useGetMethods(instance, root);
 

package/src/components/zd-layout/ZdLayout.ts

@@ -27,7 +27,7 @@ const layoutComponent = defineComponent({
 	props: ZdLayoutProps,
 	inheritAttrs: false,
 	setup(props, ctx) {
-		const { instance, root } = useCreateInstance<Layout>(props, ctx, Layout);
+		const { instance, root } = useCreateInstance<Layout>(props, ctx, Layout, ZdLayoutProps);
 
 		const { click, focus, blur, mouseenter, mouseleave } = useGetMethods(instance, root);
 

package/src/components/zd-list/ZdList.scss

@@ -32,6 +32,9 @@
       font-size: var(--zd-font-body3-size) !important;
       font-weight: var(--zd-font-body3-weight) !important;
     }
+    .v-list-item__content { 
+      flex: 1 1; 
+    }
   }
 .v-list-item__spacer {
   width: 5px !important;

package/src/components/zd-list/ZdList.ts

@@ -65,6 +65,7 @@ export const ZdListProps = buildProps({
 	items: {
 		type: Array,
 		default: () => [],
+		watch: false,
 	},
 });
 
@@ -72,7 +73,7 @@ const listComponent = defineComponent({
 	props: ZdListProps,
 	inheritAttrs: false,
 	setup(props, ctx) {
-		const { instance, root } = useCreateInstance<List>(props, ctx, List);
+		const { instance, root } = useCreateInstance<List>(props, ctx, List, ZdListProps);
 
 		const isLastItem = (index: any) => {
 			return index + 1 === instance.items.length;

package/src/components/zd-list/ZdListGroup.ts

@@ -17,6 +17,7 @@ export const ZdListGroupProps = buildProps({
 	items: {
 		type: [Array, String],
 		default: () => [],
+		watch: false,
 	},
 });
 
@@ -24,7 +25,7 @@ const listGroupComponent = defineComponent({
 	props: ZdListGroupProps,
 	inheritAttrs: false,
 	setup(props, ctx) {
-		const { instance, root } = useCreateInstance<ListGroup>(props, ctx, ListGroup);
+		const { instance, root } = useCreateInstance<ListGroup>(props, ctx, ListGroup, ZdListGroupProps);
 
 		const { click, focus, blur, mouseenter, mouseleave } = useGetMethods(instance, root);
 

package/src/components/zd-list/ZdListGroup.vue

@@ -3,7 +3,7 @@
     ref="root"
     :id="instance.name"
   >
-    <template #activator="{ props }">
+    <template #activator="{ props, isOpen }">
       <v-list-item
         v-bind="props"
         class="d-flex align-center"
@@ -26,23 +26,21 @@
           </v-icon>
         </template>
 
-        <template #append="{ isActive }">
-          <slot name="rightField"></slot>
-          <component
-            v-if="instance.rightField && !$slots.rightField"
-            :is="instance.rightField.component"
-            v-bind="instance.rightField"
-            :parent="instance"
-          ></component>
-          <v-icon
-            v-else
-            class="ml-2 rotate-icon"
-            :class="{ 'rotate-180': isActive }"
-          >
+        <template #append>
+            <slot name="rightField"></slot>
+            <component
+              v-if="instance.rightField && !$slots.rightField"
+              :is="instance.rightField.component"
+              v-bind="instance.rightField"
+              :parent="instance"
+            ></component>
+            <v-icon v-else 
+            class="ml-2 rotate-icon" 
+            :class="{ 'rotate-180': isOpen }">
             {{ $getIcon(instance.appendIcon) }}
-          </v-icon>
+            </v-icon>
         </template>
-      </v-list-item>
+        </v-list-item>
     </template>
     
     <v-list :class="['zd-list zd-pl-4 zd-py-0 group-list']">

package/src/components/zd-list/ZdListItem.ts

@@ -52,7 +52,7 @@ const listItemComponent = defineComponent({
 	props: ZdListItemProps,
 	inheritAttrs: false,
 	setup(props, ctx) {
-		const { instance, root } = useCreateInstance<ListItem>(props, ctx, ListItem);
+		const { instance, root } = useCreateInstance<ListItem>(props, ctx, ListItem, ZdListItemProps);
 
 		const { click, focus, blur, mouseenter, mouseleave } = useGetMethods(instance, root);
 

package/src/components/zd-loading/ZdLoading.ts

@@ -42,7 +42,7 @@ const loadingComponent = defineComponent({
 	props: ZdLoadingProps,
 	inheritAttrs: false,
 	setup(props, ctx) {
-		const { root } = useCreateInstance<Loading>(props, ctx, Loading);
+		const { root } = useCreateInstance<Loading>(props, ctx, Loading, ZdLoadingProps);
 
 		const loading = useLoading(Loading, props);
 		LoadingService.loading = loading;

package/src/components/zd-loading/ZdLoading.vue

@@ -1,66 +1,43 @@
   <template>
     <div ref="root" class="test">
-    <v-overlay
-      :id="loading.name"
-      :opacity="opacity"
-      v-model="loading.isVisible"
-      persistent
-      :z-index="zIndex"
-      :style="[cssStyle]"
-      :class="[cssClass]"
-      :theme="loading.theme"
-    >
-      <div
-        v-if="loading.isVisible"
-        class="center-div zd-loading"
+      <v-overlay
+        :id="loading.name"
+        :opacity="opacity"
+        v-model="loading.isVisible"
+        persistent
+        :z-index="zIndex"
+        :style="[cssStyle]"
+        :class="[cssClass, 'zd-loading']"
+        :theme="loading.theme"
       >
-        <v-progress-circular
-          v-if="!image"
-          indeterminate
-          :color="loadingColor"
-          :size="size"
-          :width="loadingWidth"
-          class="zd-loading-progress"
-        ></v-progress-circular>
-        <v-img
-          v-else
-          :src="image"
-          :width="$formatSize(size)"
-        ></v-img>
-        <div
-          v-html="$sanitize($t(loading.text))"
-          class="h3 text"
-          :style="'color: ' + textColor + ';'"
-        >
+        <div v-if="loading.isVisible" class="center-div">
+          <v-progress-circular v-if="!image" indeterminate :color="loadingColor" :size="size" :width="loadingWidth"
+            class="zd-loading-progress"></v-progress-circular>
+          <v-img v-else :src="image" :width="$formatSize(size)"></v-img>
+          <div v-html="$sanitize($t(loading.text))" class="zd-loading__text" :style="'color: ' + textColor + ';'">
+          </div>
         </div>
-      </div>
-    </v-overlay>
+      </v-overlay>
     </div>
   </template>
-  
-  <script lang="ts" src="./ZdLoading.ts"></script>
-  
-  <style lang="scss">
-  .zd-loading {
-    .text{
+
+<script lang="ts" src="./ZdLoading.ts"></script>
+
+<style lang="scss">
+.zd-loading {
+  justify-content: center;
+  align-items: center;
+
+  &__text {
     font-size: var(--zd-font-headline-size);
     margin-top: 15px;
-    }
-    .v-overlay {
-    justify-content: center;
-    align-items: center;
-    }
-    .center-div{
+  }
+
+  .center-div {
     display: flex;
     align-items: center;
     justify-content: center;
     flex-flow: column;
-    }
-    .zd-loading .zd-loading-progress > svg,
-    .zd-loading .zd-loading-progress > svg .v-progress-circular__overlay {
-    -webkit-animation-play-state: running !important;
-    animation-play-state: running !important;
-    }
   }
-  </style>
-  
+}
+</style>

package/src/components/zd-login/ZdLogin.ts

@@ -14,6 +14,7 @@ export const ZdLoginProps = buildProps({
 	bottomLink: {
 		type: Array as () => IComponentRender[],
 		default: () => [],
+		watch: false,
 	},
 	cardWidth: {
 		type: [String, Number],
@@ -54,6 +55,7 @@ export const ZdLoginProps = buildProps({
 	socialLogin: {
 		type: Array as () => IComponentRender[],
 		default: () => [],
+		watch: false,
 	},
 });
 
@@ -61,7 +63,7 @@ const loginComponent = defineComponent({
 	props: ZdLoginProps,
 	inheritAttrs: false,
 	setup(props, ctx) {
-		const { instance, root } = useCreateInstance<Login>(props, ctx, Login);
+		const { instance, root } = useCreateInstance<Login>(props, ctx, Login, ZdLoginProps);
 
 		return {
 			instance,

package/src/components/zd-login/ZdLoginButton.ts

@@ -20,7 +20,7 @@ const loginButtonComponent = defineComponent({
 	props: ZdLoginButtonProps,
 	inheritAttrs: false,
 	setup(props, ctx) {
-		const { instance, root } = useCreateInstance<LoginButton>(props, ctx, LoginButton);
+		const { instance, root } = useCreateInstance<LoginButton>(props, ctx, LoginButton, ZdLoginButtonProps);
 
 		return {
 			instance,

package/src/components/zd-main/ZdMain.ts

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

package/src/components/zd-master-detail/ZdMasterDetail.ts

@@ -37,7 +37,7 @@ const masterDetailComponent = defineComponent({
 	props: ZdMasterDetailProps,
 	inheritAttrs: false,
 	setup(props, ctx) {
-		const { instance, root } = useCreateInstance<MasterDetail>(props, ctx, MasterDetail);
+		const { instance, root } = useCreateInstance<MasterDetail>(props, ctx, MasterDetail, ZdMasterDetailProps);
 		const { click, mouseenter, mouseleave } = useGetMethods(instance, root);
 
 		return {

package/src/components/zd-menu/ZdMenu.ts

@@ -11,7 +11,7 @@ import {
 } from '@zeedhi/common';
 import { IEventParam, KeyMap, Metadata } from '@zeedhi/core';
 import debounce from 'lodash.debounce';
-import { defineComponent, onBeforeUnmount, onMounted, watch } from 'vue';
+import { computed, defineComponent, onBeforeUnmount, onMounted, watch } from 'vue';
 import { useRoute } from 'vue-router';
 import { useDisplay } from 'vuetify';
 import { buildProps } from '../../utils';
@@ -58,7 +58,7 @@ export const ZdMenuProps = buildProps({
 	},
 	miniWidth: {
 		type: [Number, String],
-		default: 58,
+		default: 50,
 	},
 	temporary: {
 		type: [Boolean, String],
@@ -87,6 +87,7 @@ export const ZdMenuProps = buildProps({
 	topSlot: {
 		type: Array<IComponentRender>,
 		default: () => [] as IComponentRender[],
+		watch: false,
 	},
 	width: {
 		type: [Number, String],
@@ -103,6 +104,7 @@ export const ZdMenuProps = buildProps({
 	items: {
 		type: Array<IMenuItem>,
 		default: () => [],
+		watch: false,
 	},
 	// Zeedhi 3.x
 	permanent: {
@@ -136,12 +138,14 @@ const menuComponent = defineComponent({
 	props: ZdMenuProps,
 	inheritAttrs: false,
 	setup(props, ctx) {
-		const { instance, root } = useCreateInstance<Menu>(props, ctx, Menu);
+		const { instance, root } = useCreateInstance<Menu>(props, ctx, Menu, ZdMenuProps);
 
 		const { click, focus, blur, mouseenter, mouseleave } = useGetMethods(instance, root);
 
 		const { mobile } = useDisplay();
 
+		const menuTheme = computed(() => instance.theme);
+
 		const checkMiniVariant = () => {
 			return !!(
 				(!instance.opened && instance.mini) ||
@@ -180,7 +184,7 @@ const menuComponent = defineComponent({
 		};
 
 		const getParentComp = (): IMenu | IMenuGroup | undefined => {
-			return instance.currentItem?.parentGroup || instance.currentItem?.parentMenu;
+			return instance.currentItem?.parentGroup || (instance.currentItem?.parentMenu as Menu);
 		};
 
 		const navigateNextItem = () => {
@@ -329,6 +333,7 @@ const menuComponent = defineComponent({
 			mouseleave,
 			searchInputProps,
 			navigationKeyMapping,
+			menuTheme,
 			// methods
 			checkMiniVariant,
 			showSlotOnHover,