@zeedhi/vuetify 3.0.9 → 3.0.11

package/src/components/zd-footer/ZdFooter.vue

@@ -2,6 +2,7 @@
   <v-footer
     :id="instance.name"
     v-show="instance.isVisible"
+    ref="root"
     :name="instance.name"
     :app="instance.app"
     :color="instance.color"
@@ -84,10 +85,13 @@
 
 <script lang="ts" src="./ZdFooter.ts"></script>
 
-<style lang="scss" scoped>
+<style lang="scss">
 .zd-footer {
   &-slot{
     padding: 0;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
   }
 
   &-row {
@@ -97,6 +101,7 @@
   &-slot-left, &-slot-center, &-slot-right {
     display: flex;
     align-items: center;
+    flex: 1;
 
     > * {
       margin: 0 var(--spacing-1);

package/src/components/zd-form/ZdForm.ts

@@ -1,6 +1,6 @@
 import { ChildNotFoundError, ComponentRender, Form, IComponent, IFormComponent } from '@zeedhi/common';
 import { defineComponent, onMounted } from 'vue';
-import { VForm } from 'vuetify/components';
+import type { VForm } from 'vuetify/components';
 import { HeightProps } from '../../propsMixins/heightProps';
 import { WidthProps } from '../../propsMixins/widthProps';
 import { buildProps } from '../../utils';

package/src/components/zd-grid/cell/ZdGridCell.vue

@@ -36,5 +36,5 @@
 
 <script lang="ts" src="./ZdGridCell.ts"></script>
 
-<style lang="scss" scoped>
+<style lang="scss">
 </style>

package/src/components/zd-grid/column-header/ZdGridColumnHeader.ts

@@ -1,6 +1,6 @@
 import { ColumnAlign } from '@zeedhi/common';
 import { IDictionary } from '@zeedhi/core';
-import { ResizeParams } from 'packages/vuetify/src/composables';
+import { ResizeParams } from '../../../composables/columnResize';
 import { PropType, defineComponent, useTemplateRef } from 'vue';
 
 export default defineComponent({

package/src/components/zd-grid/footer/ZdGridFooter.vue

@@ -3,8 +3,8 @@
     :id="`${instance.name}-footer`"
     class="zd-grid-footer"
     v-if="instance.footerSlot.length || hasDefaultSlot">
-    <component  v-for="(child, index) in instance.footerSlot"
-      :key="index"
+    <component  v-for="(child) in instance.footerSlot"
+      :key="child.name"
       :is="child.component"
       :parent="instance"
       v-bind="child"

package/src/components/zd-grid/toolbar/ZdGridToolbar.vue

@@ -6,8 +6,8 @@
     class="zd-grid__toolbar"
   >
     <div class="zd-grid__toolbar-content">
-      <component v-for="(child, index) in instance.toolbarSlot"
-        :key="index"
+      <component v-for="(child) in instance.toolbarSlot"
+        :key="child.name"
         :is="child.component"
         :parent="instance"
         v-bind="child"

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

@@ -74,7 +74,7 @@
 
 <script lang="ts" src="./ZdGridEditableCell.ts"></script>
 
-<style lang="scss" scoped>
+<style lang="scss">
 .zd-grid__cell {
   .zd-grid-editable__cell-content {
     height: 100%;

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

@@ -3,12 +3,15 @@ import { defineComponent, onMounted, ref } from 'vue';
 import { buildProps } from '../../utils';
 import { useCreateInstance, useGetMethods } from '../zd-component/ZdComponent';
 import { ZdComponentRenderProps } from '../zd-component/ZdComponentRender';
+import { HeightProps, WidthProps } from '../../propsMixins';
 
 /**
  * Header component
  */
 export const ZdHeaderProps = buildProps({
 	...ZdComponentRenderProps,
+	...HeightProps,
+	...WidthProps,
 	absolute: {
 		type: [Boolean, String],
 		default: false,
@@ -37,26 +40,10 @@ export const ZdHeaderProps = buildProps({
 		type: [Boolean, String],
 		default: false,
 	},
-	height: {
-		type: [Number, String],
-		default: '',
-	},
 	leftSlot: {
 		type: Array,
 		default: () => [],
 	},
-	maxHeight: {
-		type: [Number, String],
-	},
-	maxWidth: {
-		type: [Number, String],
-	},
-	minHeight: {
-		type: [Number, String],
-	},
-	minWidth: {
-		type: [Number, String],
-	},
 	padless: {
 		type: [Boolean, String],
 		default: false,
@@ -65,9 +52,6 @@ export const ZdHeaderProps = buildProps({
 		type: Array,
 		default: () => [],
 	},
-	width: {
-		type: [Number, String],
-	},
 	// Zeedhi 3.0
 	image: {
 		type: String,

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

@@ -41,7 +41,7 @@
         <template v-if="!$slots.leftSlot">
           <span
             v-for="(child, index) in instance.leftSlot"
-            :key="index"
+            :key="child.name"
             :class="['zd-col-12', { 'zd-ml-2': index !== 0 }]"
           >
             <component v-bind="child" :is="child.component" :parent="instance"> </component>
@@ -57,7 +57,7 @@
         <template v-if="!$slots.centerSlot">
           <span
             v-for="(child, index) in instance.centerSlot"
-            :key="index"
+            :key="child.name"
             :class="['zd-col-12', { 'zd-ml-2': index !== 0 }]"
           >
             <component v-bind="child" :is="child.component" :parent="instance"> </component>
@@ -69,7 +69,7 @@
         <template v-if="!$slots.rightSlot">
           <span
             v-for="(child, index) in instance.rightSlot"
-            :key="index"
+            :key="child.name"
             :class="['zd-col-12', { 'zd-ml-2': index !== 0 }]"
           >
             <component v-bind="child" :is="child.component" :parent="instance"> </component>
@@ -81,9 +81,9 @@
     
       <v-col cols="12" class="pa-0">
       <component
-      v-for="(child, index) in instance.children"
+      v-for="(child) in instance.children"
       v-bind="child"
-      :key="index"
+      :key="child.name"
       :is="child.component"
       :parent="instance"
       >
@@ -97,6 +97,8 @@
 
 <style lang="scss">
 .zd-header {
+  height: fit-content;
+
   &.theme--light.v-app-bar.v-toolbar.v-sheet {
     background-color: #fff;
   }

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

@@ -1,6 +1,7 @@
 <template>
   <v-icon
     :id="instance.name"
+    ref="root"
     v-show="instance.isVisible"
     :class="[instance.cssClass, 'zd-icon']"
     :tabindex="instance.tabStop ? '' : '-1'"

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

@@ -1,6 +1,7 @@
 <template>
   <span
     :id="instance.name"
+    ref="root"
     v-show="instance.isVisible"
     :name="instance.name"
     :class="['zd-image', instance.cssClass]"

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

@@ -3,6 +3,7 @@
     :id="instance.name"
     :class="['zd-increment']"
     name="increment"
+    ref="root"
     :instance-object="instance"
   />
 </template>

package/src/components/zd-iterable/ZdIterableNoData.vue

@@ -6,8 +6,8 @@
       <slot name="errorSlot"></slot>
       <template v-if="!hasErrorSlot">
         <component
-          v-for="(child, index) in instance.errorSlot"
-          :key="index"
+          v-for="(child) in instance.errorSlot"
+          :key="child.name"
           :is="child.component"
           :parent="instance"
           v-bind="child"
@@ -24,8 +24,8 @@
           v-if="!hasNoResultSlot"
         >
           <component
-            v-for="(child, index) in instance.noResultSlot"
-            :key="index"
+            v-for="(child) in instance.noResultSlot"
+            :key="child.name"
             :is="child.component"
             :parent="instance"
             v-bind="child"
@@ -38,8 +38,8 @@
           v-if="!hasNoDataSlot"
         >
           <component
-            v-for="(child, index) in instance.noDataSlot"
-            :key="index"
+            v-for="(child) in instance.noDataSlot"
+            :key="child.name"
             :is="child.component"
             :parent="instance"
             v-bind="child"

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

@@ -2,6 +2,7 @@
   <zd-select
     :id="instance.name"
     name="iterable-page-size"
+    ref="root"
     :instance-object="instance"
     :cssClass="`${instance.cssClass} zd-iterable-page-size`"
   />

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

@@ -2,6 +2,7 @@
   <zd-text-input
     :id="instance.name"
     name="zdGridSearch"
+    ref="root"
     :cssClass="`${instance.cssClass} zd-search zd-float-right`"
     :instance-object="instance"
   >

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

@@ -20,8 +20,8 @@
     >
       <div class="zd-iterable-toolbar-slot">
         <component
-          v-for="(child, index) in instance.toolbarSlot"
-          :key="index"
+          v-for="(child) in instance.toolbarSlot"
+          :key="child.name"
           :is="child.component"
           :parent="instance"
           v-bind="child"
@@ -42,8 +42,8 @@
 
         <template v-else-if="instance.datasource.error">
           <component
-            v-for="(child, index) in instance.errorSlot"
-            :key="index"
+            v-for="(child) in instance.errorSlot"
+            :key="child.name"
             :is="child.component"
             :parent="instance"
             v-bind="child"
@@ -68,8 +68,8 @@
         >
           <template v-if="instance.datasource.search">
             <component
-              v-for="(child, index) in instance.noResultSlot"
-              :key="index"
+              v-for="(child) in instance.noResultSlot"
+              :key="child.name"
               :is="child.component"
               :parent="instance"
               v-bind="child"
@@ -78,8 +78,8 @@
           </template>
           <template v-else>
             <component
-              v-for="(child, index) in instance.noDataSlot"
-              :key="index"
+              v-for="(child) in instance.noDataSlot"
+              :key="child.name"
               :is="child.component"
               :parent="instance"
               v-bind="child"
@@ -100,8 +100,8 @@
     <div v-if="instance.footerSlot.length || !!$slots.footerSlot" class="zd-iterable-footer">
       <template>
         <component
-          v-for="(child, index) in instance.footerSlot"
-          :key="index"
+          v-for="(child) in instance.footerSlot"
+          :key="child.name"
           :is="child.component"
           :parent="instance"
           v-bind="child"
@@ -114,7 +114,7 @@
 
 <script lang="ts" src="./ZdIterableComponentRender.ts"></script>
 
-<style lang="scss" scoped>
+<style lang="scss">
 .zd-iterable-component-render {
   width: 100%;
   display: flex;

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

@@ -5,9 +5,9 @@
     :class="instance.cssClass"
   >
     <component
-      v-for="(child, index) in instance.children"
+      v-for="(child) in instance.children"
       v-bind="child"
-      :key="index"
+      :key="child.name"
       :is="child.component"
       :parent="instance"
     ></component>

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

@@ -1,6 +1,7 @@
 <template>
   <div
     :id="instance.name"
+    ref="root"
     v-show="instance.isVisible"
     :class="[instance.cssClass, 'zd-login']"
     :name="instance.name"
@@ -38,9 +39,9 @@
             :class="[
               'zd-login-card-content'
               ]"
-            v-for="(child, index) in instance.children"
+            v-for="(child) in instance.children"
             v-bind="child"
-            :key="index"
+            :key="child.name"
             :is="child.component"
             :parent="instance"
           ></component>
@@ -58,9 +59,9 @@
 
         <div v-if="instance.bottomLink.length && !$slots.bottomLink" class="zd-login-sign-in">
           <component
-            v-for="(child, index) in instance.bottomLink"
+            v-for="(child) in instance.bottomLink"
             v-bind="child"
-            :key="index"
+            :key="child.name"
             :is="child.component"
             :parent="instance"
           ></component>

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

@@ -3,6 +3,7 @@
     :id="instance.name"
     cssClass="zd-login-button"
     name="login-button"
+    ref="root"
     :instance-object="instance"
   />
 </template>

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

@@ -5,9 +5,9 @@
     :style="$styleObject(instance.cssStyle)"
   >
     <component
-      v-for="(child, index) in instance.children"
+      v-for="(child) in instance.children"
       v-bind="child"
-      :key="index"
+      :key="child.name"
       :is="child.component"
       :parent="instance"
     ></component>

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

@@ -14,9 +14,9 @@
     @mouseleave="mouseleave"
   >
     <component
-      v-for="(child, index) in instance.children"
+      v-for="(child) in instance.children"
       :is="child.component"
-      :key="index"
+      :key="child.name"
       :parent="instance"
       :theme="instance.theme"
       v-bind="child"

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

@@ -185,6 +185,8 @@ const menuComponent = defineComponent({
 
 		const navigateNextItem = () => {
 			const parentComp = getParentComp();
+			if (!parentComp) return;
+
 			let currentItemIndex = findIndex(parentComp, instance.currentItem);
 			let nextItemName;
 			if (instance.showSearch && document.activeElement?.id === searchInputProps.name) {
@@ -205,13 +207,13 @@ const menuComponent = defineComponent({
 					if (instance.currentItem!.component !== 'ZdMenu') {
 						let newIndex;
 
-						if (currentItemIndex < parentComp!.items!.length - 1) {
+						if (currentItemIndex < parentComp.items!.length - 1) {
 							newIndex = currentItemIndex + 1;
 						} else {
 							newIndex = currentItemIndex;
 						}
 
-						nextItemName = parentComp!.items![newIndex].name;
+						nextItemName = parentComp.items![newIndex].name;
 					} else {
 						instance.currentItem = lastItem;
 						nextItemName = lastItemName;

package/src/components/zd-menu/ZdMenuLink.vue

@@ -21,7 +21,7 @@
 
 <script lang="ts" src="./ZdMenuLink.ts"></script>
 
-<style lang="scss" scoped>
+<style lang="scss">
 .zd-menu-link {
   .zd-menu-link-icon {
     margin-right: var(--zd-default-padding);

package/src/components/zd-menu/ZdMenuSeparator.vue

@@ -10,7 +10,7 @@
 
 <script lang="ts" src="./ZdMenuSeparator.ts"></script>
 
-<style lang="scss" scoped>
+<style lang="scss">
 .zd-menu-separator {
   margin-bottom: 4px;
 }

package/src/components/zd-modal/ZdModal.vue

@@ -37,9 +37,9 @@
           >
           <v-layout style="flex-direction: column;">
             <component
-              v-for="(child, index) in modal.children"
+              v-for="(child) in modal.children"
               v-bind="child"
-              :key="index"
+              :key="child.name"
               :is="child.component"
               :parent="modal">
             </component>
@@ -84,14 +84,14 @@
       cursor: -webkit-grabbing;
     }
   }
-}
 
-.zd-header-slot {
-  padding: 0px !important;
-}
+  .zd-header-slot {
+    padding: 0px !important;
+  }
 
-.zd-footer-slot {
-  padding: 0px !important;
+  .zd-footer-slot {
+    padding: 0px !important;
+  }
 }
 
 .v-dialog .v-overlay__content .v-card .v-card-text{

package/src/components/zd-modal/ZdModalCloseButton.vue

@@ -1,6 +1,6 @@
 <template>
     <zd-button
-    ref="root"
+      ref="root"
       :id="instance.name"
       class="zd-modal-close-button"
       name="modal-close-button"

package/src/components/zd-month/ZdMonth.vue

@@ -2,6 +2,7 @@
   <zd-date-input
     :id="instance.name"
     name="month-picker"
+    ref="root"
     :instance-object="instance"
   />
 </template>

package/src/components/zd-password/ZdPassword.vue

@@ -2,6 +2,7 @@
     <zd-text-input
       :id="instance.name"
       name="password"
+      ref="root"
       :instance-object="instance"
     />
   </template>

package/src/components/zd-progress/ZdProgress.vue

@@ -18,10 +18,10 @@
   >
     <slot name="centerSlot">
       <component
-        v-for="(child, index) in instance.centerSlot"
+        v-for="(child) in instance.centerSlot"
         :is="child.component"
         v-bind="child"
-        :key="index"
+        :key="child.name"
         :parent="instance"
       />
     </slot>

package/src/components/zd-radio/ZdRadio.vue

@@ -43,15 +43,19 @@
 </template>
 
   
-  <script lang="ts" src="./ZdRadio.ts"></script>
-  
-  <style lang="scss">
-  .zd-radio {
-    .v-label {
-      color: var(--zd-font-color);
-      font-size: var(--zd-font-body1-size) !important;
-      font-weight: var(--zd-font-body1-weight);
-    }
+<script lang="ts" src="./ZdRadio.ts"></script>
+
+<style lang="scss">
+.zd-radio {
+  &.v-input {
+    height: fit-content;
+  }
+
+  .v-label {
+    color: var(--zd-font-color);
+    font-size: var(--zd-font-body1-size) !important;
+    font-weight: var(--zd-font-body1-weight);
   }
-  </style>
+}
+</style>
   

package/src/components/zd-row/ZdRow.vue

@@ -2,6 +2,7 @@
   <v-row
     :id="instance.name"
     v-show="instance.isVisible"
+    ref="root"
     :class="['zd-row', instance.cssClass]"
     :name="instance.name"
     :dense="instance.dense"

package/src/components/zd-select/ZdSelect.vue

@@ -89,8 +89,8 @@
         <template v-if="!hasItemBeforeSlot">
           <component
             ref="itemBefore"
-            v-for="(child, index) in instance.itemBeforeSlot"
-            :key="index"
+            v-for="(child) in instance.itemBeforeSlot"
+            :key="child.name"
             :is="child.component"
             :parent="instance"
             v-bind="child"
@@ -128,8 +128,8 @@
         >
           <template v-if="!hasItemAfterSlot">
             <component
-              v-for="(child, index) in instance.itemAfterSlot"
-              :key="index"
+              v-for="(child) in instance.itemAfterSlot"
+              :key="child.name"
               :is="child.component"
               :parent="instance"
               v-bind="child"

package/src/components/zd-select-multiple/ZdSelectMultiple.ts

@@ -1,7 +1,7 @@
 import { SelectMultiple } from '@zeedhi/common';
 import { FormatterParserProvider, IDictionary } from '@zeedhi/core';
 import { computed, defineComponent, nextTick, onMounted, onUnmounted, ref } from 'vue';
-import { VSelect } from 'vuetify/components';
+import type { VSelect } from 'vuetify/components';
 import { buildProps } from '../../utils';
 import { getRootElement } from '../zd-component/ZdComponent';
 import { useCreateInputInstance } from '../zd-input/ZdInput';

package/src/components/zd-select-multiple/ZdSelectMultiple.vue

@@ -114,8 +114,8 @@
             <template v-if="!hasItemBeforeSlot">
               <component
                 ref="itemBefore"
-                v-for="(child, index) in instance.itemBeforeSlot"
-                :key="index"
+                v-for="(child) in instance.itemBeforeSlot"
+                :key="child.name"
                 :is="child.component"
                 :parent="instance"
                 v-bind="child"
@@ -188,8 +188,8 @@
           >
             <template v-if="!hasItemAfterSlot">
               <component
-                v-for="(child, index) in instance.itemAfterSlot"
-                :key="index"
+                v-for="(child) in instance.itemAfterSlot"
+                :key="child.name"
                 :is="child.component"
                 :parent="instance"
                 v-bind="child"