@zeedhi/vuetify 3.1.0 → 3.3.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zeedhi/vuetify",
-  "version": "3.1.0",
+  "version": "3.3.0",
   "description": "Zeedhi Components based on Vuetify",
   "author": "Zeedhi <zeedhi@teknisa.com>",
   "license": "ISC",
@@ -42,7 +42,7 @@
     "@vitest/coverage-v8": "^2.1.3",
     "@zeedhi/common": "^3.0.0",
     "@zeedhi/core": "^3.0.0",
-    "@zeedhi/vue": "^3.1.0",
+    "@zeedhi/vue": "^3.3.0",
     "vue": "^3.0.0",
     "vue-router": "^4.2.2",
     "vuetify": "^3.11.0"
@@ -58,5 +58,5 @@
   "env": {
     "NODE_ENV": "production"
   },
-  "gitHead": "adbb8c173143730e93a0c76804ffb53e608a9fdb"
+  "gitHead": "3398ef763d8812e5b8feb5b8f06db1b377271fde"
 }

package/src/components/zd-checkbox/ZdCheckbox.vue

@@ -42,6 +42,10 @@
   .zd-checkbox {
     &.v-input {
       height: fit-content;
+
+      .v-selection-control {
+        min-height: 28px !important;
+      }
     }
 
     .v-label {

package/src/components/zd-component/ZdComponent.ts

@@ -235,7 +235,7 @@ export function useCreateInstance<T extends Component, G extends RootRef = RootR
 				explicitlyPassedProps[key] = props[key];
 			}
 		}
-		explicitlyPassedProps.instanceObj = undefined;
+		delete explicitlyPassedProps.instanceObject;
 
 		const events = getInstanceEvents([props.events, props.instanceObject.events]);
 
@@ -267,18 +267,20 @@ export function useCreateInstance<T extends Component, G extends RootRef = RootR
 	const instance = reactive(instanceObj);
 
 	// criar reatividades nas propriedades. (PropWatch)
-	Object.keys(props).forEach((key: string) => {
-		if (!(key in instance)) return;
-		if (typeof props[key] === 'function') return;
-		if (propsDefs[key] && !propsDefs[key].watch) return;
-
-		watch(
-			() => props[key],
-			(value) => {
-				(instance as any)[key] = value;
-			}
-		);
-	});
+	if (!createdFromObject) {
+		Object.keys(props).forEach((key: string) => {
+			if (!(key in instance)) return;
+			if (typeof props[key] === 'function') return;
+			if (propsDefs[key]?.watch === false) return;
+
+			watch(
+				() => props[key],
+				value => {
+					(instance as any)[key] = value;
+				},
+			);
+		});
+	}
 
 	addChild({ instance, props });
 

package/src/components/zd-date-input/ZdDateInput.ts

@@ -118,6 +118,7 @@ const dateInputComponent = defineComponent({
 				instance.showDatePicker = false;
 			}
 			instance.validate();
+			instance.change();
 		};
 
 		const helperValuesOptionClick = (helper: string) => {

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

@@ -16,6 +16,7 @@ import { RowNotFoundError } from '../../errors';
 import { buildProps } from '../../utils';
 import { getRootElement, useCreateInstance } from '../zd-component/ZdComponent';
 import { ZdGridProps, useGridInstance } from '../zd-grid/ZdGrid';
+import debounce from 'lodash.debounce';
 
 export const ZdGridEditableProps = buildProps({
 	...ZdGridProps,
@@ -89,22 +90,24 @@ export function useGridEditableInstance({
 		const key = instance.getRowKey(row);
 		editingCell.value = { key, column: column.name };
 
-		setTimeout(() => {
-			const key = instance.getRowKey(row);
+		checkToggleComponent(row, column);
+	};
 
-			try {
-				const component = instance.getComponent<Input>(String(key), column.name);
-				component?.setFocus();
+	const checkToggleComponent = debounce((row: IDictionary, column: GridColumnEditable) => {
+		const key = instance.getRowKey(row);
 
-				if (component instanceof Toggleable) {
-					component.toggleValue();
-					component.change();
-				}
-			} catch (e) {
-				if (!(e instanceof InstanceNotFoundError)) throw e;
+		try {
+			const component = instance.getComponent<Input>(String(key), column.name);
+			component?.setFocus();
+
+			if (component instanceof Toggleable) {
+				component.toggleValue();
+				component.change();
 			}
-		});
-	};
+		} catch (e) {
+			if (!(e instanceof InstanceNotFoundError)) throw e;
+		}
+	});
 
 	const viewEnterEdit = (key: string, columnName: string) => {
 		editingCell.value = { key, column: columnName };

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

@@ -1,6 +1,14 @@
 import { Select } from '@zeedhi/common';
 import { FormatterParserProvider, IDictionary } from '@zeedhi/core';
-import { ComponentPublicInstance, Ref, SetupContext, UnwrapNestedRefs, computed, defineComponent, useSlots } from 'vue';
+import {
+	ComponentPublicInstance,
+	Ref,
+	SetupContext,
+	UnwrapNestedRefs,
+	computed,
+	defineComponent,
+	useSlots,
+} from 'vue';
 import { useDensity } from '../../composables';
 import { buildProps } from '../../utils';
 import { getRootElement } from '../zd-component/ZdComponent';
@@ -192,6 +200,14 @@ export function useSelect<TG extends Select>(
 		instance.keydown(event, rootElement.value);
 	};
 
+	const selectClear = () => {
+		// trigger input for non-autocomplete selects
+		// it is already automatically triggered for autocomplete selects
+		if (!instance.autocomplete) {
+			textInputScope.input();
+		}
+	};
+
 	const autoSelectFirst = computed(() => instance.autoSelection && items.value.length === 1);
 
 	const menuClass = computed(() => {
@@ -222,6 +238,7 @@ export function useSelect<TG extends Select>(
 		selectChange,
 		selectInput,
 		selectKeydown,
+		selectClear,
 		hasItemBeforeSlot,
 		hasItemAfterSlot,
 		onLoadMoreIntersect,

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

@@ -74,6 +74,7 @@
     @mouseleave="mouseleave($event)"
     @click="click($event)"
     @update:modelValue="selectChange($event)"
+    @click:clear="selectClear()"
     @blur="blur($event)"
     @focus="focus($event)"
     @update:search="selectInput($event)"
@@ -178,7 +179,7 @@
     min-height: 22px;
     padding: 0;
   }
-  
+
   .v-field__input {
     padding: 0;
     min-height: 34px;
@@ -207,4 +208,4 @@
     }
   }
 }
-</style>
+</style>

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

@@ -6,6 +6,7 @@ import { buildProps } from '../../utils';
 import { getRootElement } from '../zd-component/ZdComponent';
 import { useCreateInputInstance } from '../zd-input/ZdInput';
 import { ZdSelectProps, useSelect } from '../zd-select/ZdSelect';
+import { ListItem } from 'vuetify/lib/composables/list-items';
 
 /**
  * Select Multiple component
@@ -330,12 +331,12 @@ const selectMultipleComponent: any = defineComponent({
 			return selectFormatterFn(item, formatterProps);
 		};
 
-		const removeItem = (item: IDictionary<any>) => {
+		const removeItem = (item: ListItem<any>) => {
 			const rootValue = root.value as VSelect;
-			rootValue.select(item.value, false);
+			rootValue.select(item, false);
 		};
 
-		const selectChange = (value: any, event: Event) => {
+		const selectChange = (value: any[], event?: Event) => {
 			const input = getRootElement(root);
 
 			instance.selectChange(
@@ -345,6 +346,22 @@ const selectMultipleComponent: any = defineComponent({
 			);
 		};
 
+		const selectClear = () => {
+			const input = getRootElement(root);
+			const hasSelectedValue = Array.isArray(instance.value) && instance.value.length > 0;
+			const hasSearchText = !!instance.search;
+
+			if (hasSelectedValue) {
+				instance.selectChange([], undefined, input.value);
+			}
+
+			if (hasSearchText) {
+				selectScope.selectInput('');
+			} else {
+				instance.search = '';
+			}
+		};
+
 		let observer: ResizeObserver | undefined;
 
 		onMounted(() => {
@@ -381,6 +398,7 @@ const selectMultipleComponent: any = defineComponent({
 			selectClick,
 			selectBlur,
 			selectChange,
+			selectClear,
 			formattedDataDiscreteText,
 			ajustSize,
 			onLoadMoreIntersect,

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

@@ -80,6 +80,15 @@
   @keydown="instance.keydown($event)"
   v-on="getIconClickEvents()"
   >
+      <template #clear="{ props }">
+        <v-icon
+          :tabindex="props.tabindex"
+          @focus="props.onFocus"
+          @blur="props.onBlur"
+          @click="selectClear"
+        ></v-icon>
+      </template>
+
       <template #prepend-item v-if="instance.itemBeforeSlot.length || instance.showSelectAll">
         <template v-if="instance.showSelectAll">
           <v-list-item
@@ -297,4 +306,4 @@
 .zd-select__menu .v-list-item-title, .zd-select__menu .v-list-item__content {
   font-size: var(--zd-font-body1-size);
 }
-</style>
+</style>

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

@@ -1,6 +1,6 @@
-import { Tab } from '@zeedhi/common';
+import { Tab, Tabs } from '@zeedhi/common';
 import { Event } from '@zeedhi/core';
-import { defineComponent } from 'vue';
+import { computed, defineComponent, ref } from 'vue';
 import { useDensity } from '../../composables';
 import { buildProps } from '../../utils';
 import { useCreateInstance, useGetMethods } from '../zd-component/ZdComponent';
@@ -15,9 +15,6 @@ export const ZdTabProps = buildProps({
 	tabTitle: {
 		type: [String],
 	},
-	tabName: {
-		type: [String],
-	},
 	color: {
 		type: [String],
 		default: 'primary',
@@ -70,6 +67,8 @@ const tabComponent = defineComponent({
 
 		const { click, focus, blur, mouseenter, mouseleave } = useGetMethods(instance, root);
 
+    const isDragging = ref<boolean>(false);
+
 		const clickTab = (event: Event) => {
 			ctx.emit('click', event);
 		};
@@ -78,9 +77,43 @@ const tabComponent = defineComponent({
 			ctx.emit('keydown', event);
 		};
 
+		const sortable = computed(() => {
+			return (instance.parent as Tabs)?.sortable;
+		})
+
+    const handleDragStart = (event: DragEvent): void => {
+      if (!sortable.value) {
+        event.preventDefault();
+        return;
+      }
+
+			if (event.dataTransfer) {
+				event.dataTransfer.effectAllowed = 'move';
+
+				// Compatibilidade Firefox
+				event.dataTransfer.setData('text/plain', '');
+
+				const tabsInstance = instance.parent as Tabs;
+				const sourceIndex = tabsInstance.tabs.findIndex((tab) => tab.name === instance.name);
+
+				event.dataTransfer.setData(`application/x-zd-tabs-owner-${tabsInstance.name.toLowerCase()}`, '');
+				event.dataTransfer.setData('application/x-zd-tab-index', String(sourceIndex));
+			}
+
+      isDragging.value = true;
+
+      event.stopPropagation();
+    };
+
+    const handleDragEnd = (): void => {
+      isDragging.value = false;
+    };
+
 		return {
 			instance,
 			root,
+			density,
+			sortable,
 			click,
 			focus,
 			blur,
@@ -89,7 +122,8 @@ const tabComponent = defineComponent({
 			// methods
 			clickTab,
 			keydown,
-			density,
+			handleDragStart,
+			handleDragEnd,
 		};
 	},
 });

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

@@ -3,9 +3,11 @@
     :id="instance.name"
     ref="root"
     v-show="instance.isVisible"
-    :class="['zd-tabs-tab', instance.cssClass]"
+    :class="['zd-tabs-tab', instance.cssClass, {
+      'zd-tabs-tab-sortable': sortable,
+    }]"
     :style="$styleObject(instance.cssStyle)"
-    :name="instance.tabName"
+    :name="instance.tabTitle"
     :disabled="instance.disabled"
     :theme="instance.theme"
     :color="instance.color"
@@ -15,11 +17,14 @@
     :iconName="instance.iconName"
     :rounded="instance.rounded"
     :selected-class="'v-tab--selected '+instance.selectedClass"
-    :value="instance.value"
+    :value="instance.name || instance.value"
     :variant="instance.variant"
     :width="instance.width"
+    :draggable="sortable"
     @click="clickTab($event)"
     @keydown="keydown($event)"
+    @dragstart="handleDragStart"
+    @dragend="handleDragEnd"
   >
     <span class="zd-tabs-tab-text">
       {{ $t(instance.tabTitle) }}
@@ -46,6 +51,14 @@
       line-height: 15px;
       margin-bottom: 1px;
     }
+
+    &-sortable::before {
+      content: "⋮";
+      position: absolute;
+      left: 1px;
+      width: 10px;
+      cursor: grab;
+    }
   }
 }
 </style>

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

@@ -4,8 +4,8 @@ import { ZdComponentRenderProps } from '../zd-component/ZdComponentRender';
 
 export const ZdTabItemProps = buildProps({
 	...ZdComponentRenderProps,
-	index: {
-		type: [Number],
+	value: {
+		type: [String],
 	},
 	lazyLoad: {
 		type: [Boolean],

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

@@ -2,7 +2,9 @@
     <v-tabs-window-item
       class="zd-tabs-tab-item"
       v-show="isVisible"
-      :value="index"
+      :value="value"
+      :transition="false"
+      :reverse-transition="false"
     >
       <v-container fluid>
         <slot>

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

@@ -1,5 +1,5 @@
 import { Tabs } from '@zeedhi/common';
-import { defineComponent } from 'vue';
+import { computed, defineComponent, ref } from 'vue';
 import { useDensity } from '../../composables';
 import { HeightProps } from '../../propsMixins/heightProps';
 import { buildProps } from '../../utils';
@@ -45,6 +45,10 @@ export const ZdTabsProps = buildProps({
 	max: {
 		type: [Number, String],
 	},
+	sortable: {
+		type: [Boolean, String],
+		default: false,
+	},
 });
 
 /**
@@ -56,9 +60,13 @@ const tabsComponent = defineComponent({
 	setup(props, ctx) {
 		const { instance, root } = useCreateInstance<Tabs>(props, ctx, Tabs, ZdTabsProps);
 		const { density } = useDensity({ instance });
+    const rootElement = getRootElement(root);
 
 		const { click, focus, blur, mouseenter, mouseleave } = useGetMethods(instance, root);
 
+		const isDragOver = ref<boolean>(false);
+		const dragOverIndex = ref<number>(-1);
+
 		const change = () => {
 			const rootElement = getRootElement(root);
 			instance.change(new Event('change'), rootElement.value);
@@ -73,10 +81,93 @@ const tabsComponent = defineComponent({
 			const rootElement = getRootElement(root);
 			instance.beforeChange(event, index, rootElement.value);
 		};
+		
+		const isTabOK = (event: DragEvent): boolean => {
+			return !!event.dataTransfer?.types.includes(`application/x-zd-tabs-owner-${instance.name.toLowerCase()}`);
+		};
+
+		const getTabsBarRect = (): DOMRect | undefined => {
+			return rootElement.value?.querySelector('.v-tabs')?.getBoundingClientRect();
+		};
+
+		const handleDragOver = (event: DragEvent): void => {
+			event.preventDefault();
+
+			if (!isTabOK(event)) {
+				dragOverIndex.value = -1;
+				return;
+			}
+
+			const tabsRect = getTabsBarRect();
+			if (!tabsRect) return;
+
+			if (event.clientY < tabsRect.top - 10 || event.clientY > tabsRect.bottom + 10) {
+				dragOverIndex.value = -1;
+				return;
+			}
+
+			const tabs = rootElement.value!.querySelectorAll('.zd-tabs-tab');
+			let targetIndex = instance.tabs.length;
+
+			tabs.forEach((tabEl, index) => {
+				const rect = tabEl.getBoundingClientRect();
+
+				if (event.clientX < rect.left + rect.width / 2) {
+					targetIndex = Math.min(targetIndex, index);
+				}
+			});
+
+			dragOverIndex.value = targetIndex;
+			event.stopPropagation();
+		};
+
+		const handleDrop = (event: DragEvent): void => {
+			event.preventDefault();
+
+			if (!isTabOK(event) || dragOverIndex.value === -1) return;
+
+			event.stopPropagation();
+
+			const sourceIndex = Number(event.dataTransfer?.getData('application/x-zd-tab-index'));
+			instance.moveTab(sourceIndex, dragOverIndex.value);
+
+			isDragOver.value = false;
+			dragOverIndex.value = -1;
+		};
+
+		const handleDragEnter = (event: DragEvent): void => {
+			event.preventDefault();
+
+			if (!isTabOK(event)) {
+				isDragOver.value = false;
+				dragOverIndex.value = -1;
+				return;
+			}
+
+			isDragOver.value = true;
+		};
+
+		const handleDragLeave = (event: DragEvent): void => {
+			if (rootElement.value && event.relatedTarget && rootElement.value.contains(event.relatedTarget as Node)) return;
+
+			isDragOver.value = false;
+			dragOverIndex.value = -1;
+		};
+
+		const activeTabName = computed<string | undefined>({
+			get: () => instance.tabs[instance.activeTab]?.name,
+			set: (name) => {
+				const index = instance.tabs.findIndex((tab) => tab.name === name);
+				if (index !== -1) instance.activeTab = index;
+			},
+		});
 
 		return {
 			instance,
 			root,
+      dragOverIndex,
+			density,
+			activeTabName,
 			click,
 			focus,
 			blur,
@@ -85,7 +176,10 @@ const tabsComponent = defineComponent({
 			clickTab,
 			keydown,
 			change,
-			density,
+      handleDragOver,
+      handleDrop,
+      handleDragEnter,
+      handleDragLeave,
 		};
 	},
 });

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

@@ -10,9 +10,13 @@
       maxHeight: instance.maxHeight,
       minHeight:instance.minHeight,
     }"
+    @dragenter="handleDragEnter"
+    @dragleave="handleDragLeave"
+    @dragover="handleDragOver"
+    @drop="handleDrop"
   >
     <v-tabs
-      v-model="instance.activeTab"
+      v-model="activeTabName"
       show-arrows
       @update:model-value="change"
       :theme="instance.theme"
@@ -24,31 +28,39 @@
       :grow="instance.grow"
       :max="instance.max"
     >
-      <zd-tab
-        v-for="(tab, index) in instance.tabs " :key="tab.name"
-        v-bind="{
-          ...tab,
-          name: tab.name,
-          tabName: tab.name,
-          dense: tab.dense || instance.dense,
-        }"
-        @click="clickTab($event, index)"
-        @keydown="keydown($event, index)"
-      >
-      </zd-tab>
+      <template v-for="(tab, index) in instance.tabs " :key="tab.name">
+        <span
+          v-if="dragOverIndex === index"
+          class="zd-tabs-sortable-drop-indicator"
+        />
+
+        <zd-tab
+          v-bind="{
+            ...tab,
+            name: tab.name,
+            dense: tab.dense || instance.dense,
+          }"
+          @click="clickTab($event, index)"
+          @keydown="keydown($event, index)"
+        />
+      </template>
+
+      <span
+        v-if="dragOverIndex === instance.tabs.length"
+        class="zd-tabs-sortable-drop-indicator"
+      />
     </v-tabs>
 
     <v-window
-      v-model="instance.activeTab"
+      :model-value="activeTabName"
     >
         <zd-tab-item
           v-for="(tab, index) in instance.tabs"
-          v-show="tab.isVisible && index === instance.activeTab"
+          v-show="tab.isVisible && tab.name === activeTabName"
           :key="tab.name"
-          :value="index"
+          :value="tab.name"
           :children ="tab.children"
           v-bind ="{
-            index: index,
             name: instance.name+'-tab-item-'+index,
             lazyLoad: tab.lazyLoad,
           }"
@@ -113,5 +125,22 @@
       height:100% !important;
     }
   }
+
+  &-sortable-drop-indicator {
+    display: inline-block;
+    position: relative;
+    height: 100%;
+    width: 0;
+    z-index: 1;
+
+    &::after {
+      content: '';
+      width: 3px;
+      background-color: var(--v-primary-base);
+      height: 100%;
+      position: absolute;
+      opacity: 0.75;
+    }    
+  }
 }
 </style>

package/src/components/zd-text-input/ZdTextInput.ts

@@ -171,6 +171,11 @@ export function useTextInput<TG extends TextInput>(
 		});
 	};
 
+	const clearInput = () => {
+		inputScope.input();
+		inputScope.change();
+	};
+
 	const getIconClickEvents = () => {
 		const events: any = {};
 		if (instance.events.appendIconClick) {
@@ -207,6 +212,7 @@ export function useTextInput<TG extends TextInput>(
 		appendOuterIconClick,
 		prependOuterIconClick,
 		setBlur,
+		clearInput,
 		getIconClickEvents,
 	};
 }

package/src/components/zd-text-input/ZdTextInput.vue

@@ -47,7 +47,7 @@
     @change="change()"
     @keyup="keyup($event)"
     @keydown="keydown($event)"
-    @click:clear="change()"
+    @click:clear="clearInput()"
     :hide-details="instance.autoHintDetails ? 'auto' : false"
     :tabindex="instance.tabStop ? '' : '-1'"
     v-bind="{