@zeedhi/vuetify 3.0.11 → 3.2.0

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
@@ -42,7 +43,12 @@ const selectMultipleComponent: any = defineComponent({
 	props: ZdSelectMultipleProps,
 	inheritAttrs: false,
 	setup(props, ctx) {
-		const { instance, root } = useCreateInputInstance<SelectMultiple>(props, ctx, SelectMultiple);
+		const { instance, root } = useCreateInputInstance<SelectMultiple>(
+			props,
+			ctx,
+			SelectMultiple,
+			ZdSelectMultipleProps,
+		);
 		const selectScope = useSelect(instance, ctx, root);
 		const element = ref<HTMLElement>();
 		const checkboxItem = ref<Array<any>>([]);
@@ -325,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(
@@ -340,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(() => {
@@ -376,6 +398,7 @@ const selectMultipleComponent: any = defineComponent({
 			selectClick,
 			selectBlur,
 			selectChange,
+			selectClear,
 			formattedDataDiscreteText,
 			ajustSize,
 			onLoadMoreIntersect,

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

@@ -21,7 +21,7 @@
         !(
           instance.alwaysShowError &&
           $refs.root &&
-          $refs.root.errorBucket.length
+          $refs.root.errorMessages.length
         ),
       'zd-no-border': !instance.showBorder,
       'zd-dense': instance.dense,
@@ -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-svg-map/ZdSvgMap.ts

@@ -57,7 +57,7 @@ export default defineComponent({
 
 	setup(props, ctx) {
 		const container = ref<HTMLElement | null>(null);
-		const { instance, root } = useCreateInputInstance<any>(props, ctx, SvgMap);
+		const { instance, root } = useCreateInputInstance<any>(props, ctx, SvgMap, ZdSvgMapProps);
 		const componentScope = useGetMethods(instance, root);
 		const theme = useTheme();
 

package/src/components/zd-switch/ZdSwitch.ts

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

package/src/components/zd-table/ZdTable.ts

@@ -28,7 +28,7 @@ const tableComponent = defineComponent({
 	props: ZdTableProps,
 	inheritAttrs: false,
 	setup(props, ctx) {
-		const { instance, root } = useCreateInstance<Table>(props, ctx, Table);
+		const { instance, root } = useCreateInstance<Table>(props, ctx, Table, ZdTableProps);
 
 		const { click, focus, blur, mouseenter, mouseleave } = useGetMethods(instance, root);
 

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

@@ -65,7 +65,7 @@ const tabComponent = defineComponent({
 	props: ZdTabProps,
 	inheritAttrs: false,
 	setup(props, ctx) {
-		const { instance, root } = useCreateInstance<Tab>(props, ctx, Tab);
+		const { instance, root } = useCreateInstance<Tab>(props, ctx, Tab, ZdTabProps);
 		const { density } = useDensity({ instance });
 
 		const { click, focus, blur, mouseenter, mouseleave } = useGetMethods(instance, root);

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>
@@ -27,6 +29,7 @@
 
     > .v-container {
       padding: 0;
+      height: 100%;
     }
   }
 

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

@@ -16,6 +16,7 @@ export const ZdTabsProps = buildProps({
 	tabs: {
 		type: [Array],
 		default: () => [],
+		watch: false,
 	},
 	color: {
 		type: [String],
@@ -53,14 +54,14 @@ const tabsComponent = defineComponent({
 	props: ZdTabsProps,
 	inheritAttrs: false,
 	setup(props, ctx) {
-		const { instance, root } = useCreateInstance<Tabs>(props, ctx, Tabs);
+		const { instance, root } = useCreateInstance<Tabs>(props, ctx, Tabs, ZdTabsProps);
 		const { density } = useDensity({ instance });
 
 		const { click, focus, blur, mouseenter, mouseleave } = useGetMethods(instance, root);
 
-		const change = (event: Event) => {
+		const change = () => {
 			const rootElement = getRootElement(root);
-			instance.change(event, rootElement.value);
+			instance.change(new Event('change'), rootElement.value);
 		};
 
 		const keydown = (event: Event, index: number) => {

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

@@ -1,5 +1,5 @@
 <template>
-  <div  
+  <div
     ref="root"
     :id="instance.name"
     v-show="instance.isVisible"
@@ -14,7 +14,7 @@
     <v-tabs
       v-model="instance.activeTab"
       show-arrows
-      @change="change($event)"
+      @update:model-value="change"
       :theme="instance.theme"
       :color="instance.color"
       :bg-color="instance.backgroudColor"
@@ -37,7 +37,7 @@
       >
       </zd-tab>
     </v-tabs>
-    
+
     <v-window
       v-model="instance.activeTab"
     >
@@ -94,13 +94,22 @@
 
   .v-tabs{
     flex-grow: 0;
+    flex-shrink: 0;
   }
 
-  .v-tabs-items {
+  .v-window {
     flex-grow: 1;
     overflow-y: auto;
 
-    .v-window__container {
+    &__container {
+      height: 100%;
+    }
+  }
+
+  .v-tabs-window-item {
+    height: 100%;
+
+    > .v-container {
       height:100% !important;
     }
   }

package/src/components/zd-tag/ZdTag.ts

@@ -20,7 +20,7 @@ const tagComponent = defineComponent({
 	props: ZdTagProps,
 	inheritAttrs: false,
 	setup(props, ctx) {
-		const { instance, root } = useCreateInstance<Tag>(props, ctx, Tag);
+		const { instance, root } = useCreateInstance<Tag>(props, ctx, Tag, ZdTagProps);
 
 		const { click, focus, blur, mouseenter, mouseleave } = useGetMethods(instance, root);
 

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

@@ -24,7 +24,7 @@ const textComponent = defineComponent({
 	props: ZdTextProps,
 	inheritAttrs: false,
 	setup(props, ctx) {
-		const { instance, root } = useCreateInstance<Text>(props, ctx, Text);
+		const { instance, root } = useCreateInstance<Text>(props, ctx, Text, ZdTextProps);
 
 		const { click, mouseenter, mouseleave } = useGetMethods(instance, root);
 

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

@@ -72,7 +72,7 @@ const textInputComponent = defineComponent({
 	props: ZdTextInputProps,
 	inheritAttrs: false,
 	setup(props, ctx) {
-		const { instance, root } = useCreateInstance<TextInput>(props, ctx, TextInput);
+		const { instance, root } = useCreateInstance<TextInput>(props, ctx, TextInput, ZdTextInputProps);
 
 		const textInputScope = useTextInput(instance, ctx, root);
 		const { maskOptions } = useMaska(instance, { disable: props.disableMaska });
@@ -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

@@ -19,8 +19,8 @@
           !instance.showHelper &&
           !(
             instance.alwaysShowError &&
-            $refs.instance &&
-            $refs.instance.errorBucket.length
+            $refs.root &&
+            $refs.root.errorMessages.length
           ),
         'zd-no-label': !instance.showLabel,
         'zd-text-input--suffix': !!instance.suffix,
@@ -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.ts

@@ -46,6 +46,10 @@ export const ZdTextareaProps = buildProps({
 		type: [Number, String],
 		default: 5,
 	},
+	maxRows: {
+		type: [Number, String],
+		default: 10,
+	},
 	height: {
 		type: [String, Number],
 		default: 'auto',
@@ -60,7 +64,7 @@ const textareaComponent = defineComponent({
 	props: ZdTextareaProps,
 	inheritAttrs: false,
 	setup(props, ctx) {
-		const { instance, root } = useCreateInstance<Textarea>(props, ctx, Textarea);
+		const { instance, root } = useCreateInstance<Textarea>(props, ctx, Textarea, ZdTextareaProps);
 
 		const { click, mouseenter, mouseleave, focus, blur } = useGetMethods(instance, root);
 

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

@@ -17,8 +17,8 @@
           !instance.showHelper &&
           !(
             instance.alwaysShowError &&
-            $refs.instance &&
-            $refs.instance.errorBucket.length
+            $refs.root &&
+            $refs.root.errorMessages.length
           ),
         'zd-no-label': !instance.showLabel,
         'zd-text-input--prepend-icon':
@@ -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) : '',
@@ -75,6 +76,7 @@
       rounded: instance.rounded,
       rowHeight: instance.rowHeight,
       rows: instance.rows,
+      maxRows: instance.maxRows,
       rules: instance.rules,
       singleLine: true,
       type: instance.type,
@@ -109,6 +111,8 @@
   textarea {
     padding: var(--spacing-2);
     line-height: unset;
+    -webkit-mask-image: none;
+    mask-image: none;
   }
 
   &.zd-text-align-left {

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

@@ -79,7 +79,7 @@ export default defineComponent({
 	name: 'ZdTime',
 	props: ZdTimeProps,
 	setup(props, ctx) {
-		const { instance, root } = useCreateInstance<Time>(props, ctx, Time);
+		const { instance, root } = useCreateInstance<Time>(props, ctx, Time, ZdTimeProps);
 		const { isMobile } = useIsMobile();
 		const textInputInstance = ref<any>(null);
 		const pickerRef = ref<any>(null);

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

@@ -69,7 +69,7 @@ const tooltipComponent = defineComponent({
 		ZdActivatorWrapper,
 	},
 	setup(props, ctx) {
-		const { instance, root } = useCreateInstance<Tooltip>(props, ctx, Tooltip);
+		const { instance, root } = useCreateInstance<Tooltip>(props, ctx, Tooltip, ZdTooltipProps);
 
 		const getLocation = (): any => {
 			if (instance.right) return 'right';

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/components/zd-tooltip-overflow/ZdTooltipOverflow.vue

@@ -0,0 +1,45 @@
+<template>
+  <v-tooltip
+    :model-value="isVisible"
+    :activator="targetElement"
+    :text="text"
+    location="bottom"
+    :openOnClick="false"
+  />
+</template>
+
+<script lang="ts" setup>
+import { useTooltipManager } from '../../composables/useTooltipManager';
+
+const { isVisible, text, targetElement} = useTooltipManager();
+</script>
+
+<style lang="scss">
+.zd-tooltip-overflow {
+  &--hidden {
+    text-overflow: unset;
+  }
+
+  &--wrap {
+    white-space: pre-wrap;
+  }
+
+  &--clamp {
+    white-space: normal;
+    -webkit-box-orient: vertical;
+    display: -webkit-box;
+
+    &-2 { -webkit-line-clamp: 2; line-clamp: 2; }
+    &-3 { -webkit-line-clamp: 3; line-clamp: 3; }
+    &-4 { -webkit-line-clamp: 4; line-clamp: 4; }
+    &-5 { -webkit-line-clamp: 5; line-clamp: 5; }
+  }
+
+  &--ellipsis {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    overflow-wrap: break-word;
+    white-space: pre;
+  }
+}
+</style>

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

@@ -48,18 +48,22 @@ export const ZdTreeProps = buildProps({
 	afterTitleSlot: {
 		type: [String, Object] as PropType<ITreeConditionComponent>,
 		default: () => [],
+		watch: false,
 	},
 	toolbarSlot: {
 		type: Array as PropType<IComponentRender[]>,
 		default: () => [],
+		watch: false,
 	},
 	titleSlot: {
 		type: Array as PropType<ITreeConditionComponent[]>,
 		default: () => [],
+		watch: false,
 	},
 	datasource: {
 		type: Object as PropType<IDatasource>,
 		default: () => ({}),
+		watch: false,
 	},
 	parentField: {
 		type: String,
@@ -125,7 +129,7 @@ export default defineComponent({
 	props: ZdTreeProps,
 	setup(props, ctx) {
 		const treeRef = ref<any>();
-		const { instance, root } = useCreateInstance<Tree>(props, ctx, Tree);
+		const { instance, root } = useCreateInstance<Tree>(props, ctx, Tree, ZdTreeProps);
 		const selectedNodesTitle = ref('');
 		const beforeNodeState = ref<IDictionary>({});
 		const proxy = getCurrentInstance()?.proxy;

package/src/components/zd-tree-grid/ZdTreeGrid.ts

@@ -38,6 +38,7 @@ export const ZdTreeGridProps = buildProps({
 	footerSlot: {
 		type: Array,
 		default: () => [],
+		watch: false,
 	},
 });
 
@@ -45,7 +46,7 @@ const treeGridComponent = defineComponent({
 	props: ZdTreeGridProps,
 	inheritAttrs: false,
 	setup(props, ctx) {
-		const { instance, root } = useCreateInstance<TreeGrid, ComponentPublicInstance>(props, ctx, TreeGrid);
+		const { instance, root } = useCreateInstance<TreeGrid, ComponentPublicInstance>(props, ctx, TreeGrid, ZdTreeGridProps);
 
 		const gridScope = useGridInstance({ instance, root });
 

package/src/composables/columnDrag.ts

@@ -1,6 +1,6 @@
 import { GridColumn, IGrid } from '@zeedhi/common';
 import Sortable, { MoveEvent, SortableEvent } from 'sortablejs';
-import { ComputedRef, UnwrapNestedRefs, UnwrapRef, onMounted, watch } from 'vue';
+import { ComputedRef, UnwrapNestedRefs, UnwrapRef, onMounted, onUnmounted, watch } from 'vue';
 
 /**
  * Composable for components that can have their columns dragged
@@ -33,10 +33,12 @@ export function useColumnDrag<T extends IGrid>({
 		return event.related.classList.contains('sort-handle');
 	};
 
+	let sortableInstance: Sortable | null = null;
+
 	const initDragColumns = () => {
 		const tr = rootEl.value?.querySelector<HTMLElement>('thead tr');
 		if (tr) {
-			Sortable.create(tr, {
+			sortableInstance = Sortable.create(tr, {
 				onEnd: sortColumns,
 				onMove: checkMove,
 				handle: '.sort-handle',
@@ -46,15 +48,7 @@ export function useColumnDrag<T extends IGrid>({
 	};
 
 	const destroyDragColumns = () => {
-		const tr = rootEl.value?.querySelector<HTMLElement>('thead tr');
-		if (tr) {
-			Sortable.create(tr, {
-				onEnd: sortColumns,
-				onMove: checkMove,
-				handle: '.sort-handle',
-				scroll: false,
-			}).destroy();
-		}
+		sortableInstance?.destroy();
 	};
 
 	const sortColumns = (event: SortableEvent) => {
@@ -101,5 +95,9 @@ export function useColumnDrag<T extends IGrid>({
 		return orderHeaders(instance.columns);
 	};
 
+	onUnmounted(() => {
+		destroyDragColumns();
+	});
+
 	return {};
 }

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;
 			});
 		});
 	};

package/src/composables/tableNavigation.ts

@@ -7,9 +7,11 @@ import { ComputedRef, UnwrapNestedRefs } from 'vue';
 export function useTableNavigation<T extends IDataNavigator & IViewNavigator>({
 	instance,
 	rootEl,
+	isNavigableRow,
 }: {
 	instance: UnwrapNestedRefs<T>;
 	rootEl: ComputedRef<HTMLElement | undefined>;
+	isNavigableRow?: (element: Element) => boolean;
 }) {
 	const navigate = (direction: 'up' | 'down' | 'left' | 'right', event?: Event) => {
 		if (direction === 'up' || direction === 'down') {
@@ -115,7 +117,9 @@ export function useTableNavigation<T extends IDataNavigator & IViewNavigator>({
 	};
 
 	const getArrayFromTrElement = (node: Element | HTMLElement | null) => {
-		return getArrayFromElementTag('TR', node).filter(isElementVisible);
+		return getArrayFromElementTag('TR', node).filter(
+			(element) => isElementVisible(element) && (isNavigableRow?.(element) ?? true),
+		);
 	};
 
 	const findNextTd = (

package/src/composables/useTooltipManager.ts

@@ -0,0 +1,24 @@
+import { computed, ref } from 'vue';
+
+export interface TooltipManager {
+	text: string;
+	targetElement: HTMLElement | null;
+	showTooltip: (element: HTMLElement, text: string) => void;
+	hideTooltip: () => void;
+}
+
+const text = ref('');
+
+const targetElement = ref<HTMLElement | null>(null);
+
+export function useTooltipManager() {
+	const showTooltip = (element: HTMLElement, content: string) => {
+		targetElement.value = element;
+		text.value = content;
+	}
+	const hideTooltip = () => {
+		targetElement.value = null;
+	}
+	const isVisible = computed(() => (targetElement.value !== null));
+	return { isVisible, text, targetElement, showTooltip, hideTooltip };
+}

package/src/directives/index.ts

@@ -0,0 +1 @@
+export { vTooltipOverflow } from './v-tooltip-overflow';