@zeedhi/vuetify 3.1.0 → 3.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zeedhi/vuetify",
-  "version": "3.1.0",
+  "version": "3.2.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.2.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": "324909706bf7955d5275f878496732f3d14c68cd"
 }

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

@@ -270,7 +270,7 @@ export function useCreateInstance<T extends Component, G extends RootRef = RootR
 	Object.keys(props).forEach((key: string) => {
 		if (!(key in instance)) return;
 		if (typeof props[key] === 'function') return;
-		if (propsDefs[key] && !propsDefs[key].watch) return;
+		if (propsDefs[key] && propsDefs[key].watch === false) return;
 
 		watch(
 			() => props[key],

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/ZdTabItem.vue

@@ -3,6 +3,8 @@
       class="zd-tabs-tab-item"
       v-show="isVisible"
       :value="index"
+      :transition="false"
+      :reverse-transition="false"
     >
       <v-container fluid>
         <slot>

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="{

package/src/components/zd-textarea/ZdTextarea.vue

@@ -47,6 +47,7 @@
     @input="input()"
     @keydown="keydown($event)"
     @change="change($event)"
+    @click:clear="clearInput()"
     @blur="blur($event)"
     v-bind="{
       'append-inner-icon': !instance.suffix ? $getIcon(instance.appendIcon) : '',

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

@@ -29,6 +29,7 @@
 
 <style lang="scss">
 .zd-tooltip.v-overlay__content {
-  opacity: 0.9;
+  opacity: 0.9 !important;
+  white-space: pre-line;
 }
 </style>

package/src/composables/gridColumns.ts

@@ -40,15 +40,20 @@ export function useGridColumns<T extends IIterable>({
 	const setViewGetWidth = () => {
 		instance.columns.forEach((column) => {
 			column.setViewGetWidth(() => {
-				const index = instance.columns.filter((col) => col.isVisible).findIndex((col) => col.name === column.name);
+				const el = rootEl.value;
+				if (!el) return 0;
+
+				const headerColumns = Array.from(el.querySelectorAll<HTMLTableCellElement>('table thead tr th[column-name]'));
+				const namedColumnEl = headerColumns.find((col) => col.getAttribute('column-name') === column.name);
 
-				const el = rootEl.value as HTMLElement;
+				if (namedColumnEl) {
+					return parseFloat(getComputedStyle(namedColumnEl).width) || namedColumnEl.clientWidth || 0;
+				}
 
-				const colEl = el.querySelector(`
-          .zd-grid-table-header .zd-table-cell[index='${index}']
-        `);
+				const index = instance.columns.filter((col) => col.isVisible).findIndex((col) => col.name === column.name);
+				const indexedColumnEl = el.querySelector<HTMLElement>(`table thead tr th[index='${index}']`);
 
-				return colEl?.clientWidth || 0;
+				return indexedColumnEl?.clientWidth || 0;
 			});
 		});
 	};