@zeedhi/vuetify 3.0.9 → 3.0.10

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-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>

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-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.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"

package/src/components/zd-tabs/ZdTab.ts

@@ -12,9 +12,6 @@ export const ZdTabProps = buildProps({
 		type: [Boolean, String],
 		default: false,
 	},
-	index: {
-		type: [Number, String],
-	},
 	tabTitle: {
 		type: [String],
 	},

package/src/components/zd-tabs/ZdTab.vue

@@ -1,11 +1,11 @@
 <template>
   <v-tab
     :id="instance.name"
+    ref="root"
     v-show="instance.isVisible"
     :class="['zd-tabs-tab', instance.cssClass]"
     :style="$styleObject(instance.cssStyle)"
     :name="instance.tabName"
-    :key="instance.index"
     :disabled="instance.disabled"
     :theme="instance.theme"
     :color="instance.color"

package/src/components/zd-tabs/ZdTabItem.vue

@@ -1,20 +1,21 @@
 <template>
-    <v-window-item
+    <v-tabs-window-item
       class="zd-tabs-tab-item"
       v-show="isVisible"
       :value="index"
     >
       <v-container fluid>
-        <component
-          v-for="(child, index) in children"
-          v-bind="child"
-          :key="index"
-          :is="child.component"
-        >
-        </component>
-        <slot></slot>
+        <slot>
+          <component
+            v-for="(child) in children"
+            v-bind="child"
+            :key="child.name"
+            :is="child.component"
+          >
+          </component>
+        </slot>
       </v-container>
-    </v-window-item>
+    </v-tabs-window-item>
 </template>
 
 <script lang="ts" src="./ZdTabItem.ts"></script>

package/src/components/zd-tabs/ZdTabs.vue

@@ -25,28 +25,12 @@
       :max="instance.max"
     >
       <zd-tab
-        v-for="(tab, index) in instance.tabs " :key="index"
+        v-for="(tab, index) in instance.tabs " :key="tab.name"
         v-bind="{
-          key: index,
-          name: instance.name+'-tab-'+index,
-          disabled: tab.disabled,
-          cssClass: tab.cssClass,
-          cssStyle: tab.cssStyle,
+          ...tab,
+          name: tab.name,
           tabName: tab.name,
-          index: index,
-          isVisible: tab.isVisible,
-          tabTitle: tab.tabTitle,
-          theme: tab.theme,
-          color: tab.color,
           dense: tab.dense || instance.dense,
-          direction: tab.direction,
-          fixed: tab.fixed,
-          iconName: tab.iconName,
-          rounded: tab.rounded,
-          selectedClass: tab.selectedClass,
-          value: tab.value,
-          variant:tab.variant,
-          width: tab.width,
         }"
         @click="clickTab($event, index)"
         @keydown="keydown($event, index)"
@@ -60,7 +44,7 @@
         <zd-tab-item
           v-for="(tab, index) in instance.tabs"
           v-show="tab.isVisible && index === instance.activeTab"
-          :key="index"
+          :key="tab.name"
           :value="index"
           :children ="tab.children"
           v-bind ="{

package/src/components/zd-text/ZdText.ts

@@ -1,10 +1,11 @@
 import { Text } from '@zeedhi/common';
 import { defineComponent } from 'vue';
 import { buildProps } from '../../utils';
-import { ZdComponentProps, useCreateInstance, useGetMethods } from '../zd-component/ZdComponent';
+import { useCreateInstance, useGetMethods } from '../zd-component/ZdComponent';
+import { ZdComponentRenderProps } from '../zd-component/ZdComponentRender';
 
 export const ZdTextProps = buildProps({
-	...ZdComponentProps,
+	...ZdComponentRenderProps,
 	compile: {
 		type: [Boolean, String],
 		default: false,

package/src/components/zd-time/ZdTime.vue

@@ -1,6 +1,7 @@
 <template>
   <div
     :id="instance.name"
+    ref="root"
     class="zd-time"
   >
     <component

package/src/components/zd-tooltip/ZdTooltip.vue

@@ -15,8 +15,8 @@
   >
     <template v-slot:activator="{ props }">
       <zd-activator-wrapper
-        v-for="(child, index) in instance.children"
-        :key="index"
+        v-for="(child) in instance.children"
+        :key="child.name"
         v-bind="mergeProps(props, $attrs)"
         :child-props="child"
         :parent="instance.parent"

package/src/components/zd-tree/ZdTree.vue

@@ -21,8 +21,8 @@
   >
     <div v-if="instance.toolbarSlot.length && !$slots.toolbarSlot" class="zd-mb-4 zd-tree-toolbar">
       <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"
@@ -85,12 +85,12 @@
               </span>
               <span v-else class='zd-display-inline-flex'>
                 <component
-                  v-for="(comp, index) in instance.getSlotComponent(instance.titleSlot, node)"
+                  v-for="(comp) in instance.getSlotComponent(instance.titleSlot, node)"
                   :class="[
                     'item-title', 
                     { 'has-children': node.children.length }
                   ]"
-                  :key="index"
+                  :key="comp.name"
                   :is="comp.component"
                   v-bind="comp"
                 />

package/src/composables/index.ts

@@ -13,4 +13,6 @@ export * from './maska';
 export * from './tableNavigation';
 export * from './virtualScroll';
 export * from './watchUrl';
+export * from './usePickerValue';
 export * from './useIsMobile';
+export * from './useDateKeydown';

package/src/composables/useDateKeydown.ts

@@ -0,0 +1,109 @@
+import { DateInput, DateRange } from '@zeedhi/common';
+import { Mask } from '@zeedhi/core';
+import { UnwrapNestedRefs, onMounted } from 'vue';
+
+ const isPrintableKey = (key: string) => {
+   return key.length === 1;
+ };
+ 
+ const keyAllowed = (key: string) => {
+   return ['Tab', 'ArrowLeft', 'ArrowRight', 'Enter', 'Delete', 'Backspace'].includes(
+     key,
+   );
+ };
+
+export function useDateKeydown(
+	instance: UnwrapNestedRefs<DateRange | DateInput >,
+	options: {
+		isMaskDelimiterFn: (value: string, position: number) => boolean;
+	},
+) {
+	const { isMaskDelimiterFn } = options;
+
+	const findNextEditablePosition = (value: string, start: number) => {
+    let editablePosition = start;
+		while (isMaskDelimiterFn(value, editablePosition)) {
+			editablePosition += 1;
+		}
+		return editablePosition;
+	};
+
+   const keydown = (event?: Event) => {
+     if (!(event instanceof KeyboardEvent)) return;
+ 
+     const inputEl = event.target as HTMLInputElement;
+     let start = inputEl.selectionStart;
+     const end = inputEl.selectionEnd;
+     const { value } = inputEl;
+     const numbers = /[0-9]/;
+ 
+     if (start === null || end === null) return;
+ 
+     if (!numbers.test(event.key) && !keyAllowed(event.key)) {
+       event.preventDefault();
+       return;
+     }
+ 
+     if (event.key === 'Backspace' && start === end && start > 0) {
+       while (
+         isMaskDelimiterFn(inputEl.value, start - 1) &&
+         inputEl.value[start - 1] !== ' '
+       ) {
+         start -= 1;
+       }
+       inputEl.value = `${value.slice(0, start - 1)} ${value.substring(start)}`; // Keep this for mask behavior
+       inputEl.selectionStart = start - 1;
+       inputEl.selectionEnd = start - 1;
+       if (Mask.getValueWithoutMask(inputEl.value) === '') {
+			if (instance instanceof DateRange) {
+				instance.value = [];
+			} else {
+				instance.value = '';
+			}
+       }
+       event.preventDefault();
+     } else if (
+       (event.key === 'Backspace' || event.key === 'Delete') &&
+       (start !== 0 || end !== value.length)
+     ) {
+       const selectionText = value.substring(start, end).replace(/[0-9]/g, ' ');
+       inputEl.value = value.slice(0, start) + selectionText + value.substring(end);
+       event.preventDefault();
+     } else if (
+       (event.key === 'Backspace' || event.key === 'Delete') &&
+       start === 0 && end === value.length
+     ) { // Clear all
+		if (instance instanceof DateRange) {
+			instance.value = [];
+		} else {
+			instance.value = '';
+		}
+       event.preventDefault();
+     } else {
+       if (!isPrintableKey(event.key) || isMaskDelimiterFn(event.key, 0)) {
+         return;
+       }
+       // Adjust cursor position to the next editable character for both DateInput and DateRange
+		start = findNextEditablePosition(value, start);
+
+		const firstSlice = value.slice(0, start);
+		const secondSlice = value.slice(start + 1);
+ 
+		inputEl.value = firstSlice + event.key + secondSlice;
+		const nextPos = findNextEditablePosition(value, start + 1);
+		inputEl.selectionStart = nextPos;
+		inputEl.selectionEnd = nextPos;
+     }
+   };
+ 
+   onMounted(() => {
+     const afterKeydown = instance.events.afterKeydown;
+		const afterKeydownEvents = Array.isArray(afterKeydown) ? afterKeydown : [afterKeydown];
+ 
+		afterKeydownEvents.push(({ event }: { event?: Event }) => keydown(event));
+ 
+		instance.events.afterKeydown = afterKeydownEvents.filter((f) => f);
+
+   });
+ 
+ }

package/src/composables/usePickerValue.ts

@@ -0,0 +1,22 @@
+import { DateInput, DateRange } from '@zeedhi/common';
+import { UnwrapNestedRefs, computed } from 'vue';
+
+/**
+ * Composable to create a computed property to be used as a v-model for a date picker.
+ * It acts as a bridge between the date picker and the component's `getNativeDate` and `setNativeDate` methods.
+ * @param instance The instance of the date component (e.g., DateInput, DateRange).
+ */
+export function usePickerValue(instance: UnwrapNestedRefs<DateInput | DateRange>) {
+	const pickerValue = computed({
+		get: () => {
+			return instance.getNativeDate();
+		},
+		set: (value: any) => {
+			instance.setNativeDate(value);
+		},
+	});
+
+	return {
+		pickerValue,
+	};
+}