@zeedhi/vuetify 3.0.11 → 3.1.0

package/environments.json

@@ -3,12 +3,28 @@
     "dependencies": {
       "@zeedhi/common": "file:../../../zeedhi-client-core/packages/common",
       "@zeedhi/core": "file:../../../zeedhi-client-core/packages/core"
+    },
+    "devDependencies": {
+      "@zeedhi/common": "file:../../../zeedhi-client-core/packages/common",
+      "@zeedhi/core": "file:../../../zeedhi-client-core/packages/core"
+    },
+    "peerDependencies": {
+      "@zeedhi/common": "file:../../../zeedhi-client-core/packages/common",
+      "@zeedhi/core": "file:../../../zeedhi-client-core/packages/core"
     }
   },
   "production": {
     "dependencies": {
       "@zeedhi/common": "^3.0.0",
       "@zeedhi/core": "^3.0.0"
+    },
+    "devDependencies": {
+      "@zeedhi/common": "^3.0.0",
+      "@zeedhi/core": "^3.0.0"
+    },
+    "peerDependencies": {
+      "@zeedhi/common": "^3.0.0",
+      "@zeedhi/core": "^3.0.0"
     }
   }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zeedhi/vuetify",
-  "version": "3.0.11",
+  "version": "3.1.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.0.11",
+    "@zeedhi/vue": "^3.1.0",
     "vue": "^3.0.0",
     "vue-router": "^4.2.2",
     "vuetify": "^3.11.0"
@@ -58,5 +58,5 @@
   "env": {
     "NODE_ENV": "production"
   },
-  "gitHead": "c6c6951fd1cb5e2a8ad03425d0e139c1583bb230"
+  "gitHead": "adbb8c173143730e93a0c76804ffb53e608a9fdb"
 }

package/src/components/index.ts

@@ -1,7 +1,7 @@
 import { IDictionary } from '@zeedhi/core';
 import { App, DefineComponent } from 'vue';
 
-import ZdTooltipOverflow from './tooltip-overflow/ZdTooltipOverflow.vue';
+import ZdTooltipOverflow from './zd-tooltip-overflow/ZdTooltipOverflow.vue';
 import ZdActivatorWrapper from './zd-activator-wrapper/ZdActivatorWrapper.vue';
 import ZdAlert from './zd-alert/ZdAlert.vue';
 import ZdBadge from './zd-badge/ZdBadge.vue';
@@ -70,6 +70,7 @@ import ZdMenuGroup from './zd-menu/ZdMenuGroup.vue';
 import ZdMenuLink from './zd-menu/ZdMenuLink.vue';
 import ZdMenuSeparator from './zd-menu/ZdMenuSeparator.vue';
 import ZdModal from './zd-modal/ZdModal.vue';
+import ZdModalCard from './zd-modal/ZdModalCard.vue';
 import ZdModalCloseButton from './zd-modal/ZdModalCloseButton.vue';
 import ZdMonth from './zd-month/ZdMonth.vue';
 import ZdNumberInput from './zd-number-input/ZdNumberInput.vue';
@@ -227,6 +228,7 @@ export const components: IDictionary<DefineComponent<object, object, any>> = {
 	ZdSelectMultiple,
 	ZdPassword,
 	ZdModal,
+	ZdModalCard,
 	ZdNumberInput,
 	ZdModalCloseButton,
 	ZdList,

package/src/components/zd-alert/ZdAlert.ts

@@ -16,7 +16,7 @@ const alertComponent = defineComponent({
 	props: ZdAlertProps,
 	inheritAttrs: false,
 	setup(props, ctx) {
-		const { instance, root } = useCreateInstance<Alert>(props, ctx, Alert);
+		const { instance, root } = useCreateInstance<Alert>(props, ctx, Alert, ZdAlertProps);
 
 		const manager = AlertService.instantiateManager(props.multiple);
 		const managerProxy = reactive(manager) as IAlertsManager;

package/src/components/zd-badge/ZdBadge.ts

@@ -20,7 +20,7 @@ const badgeComponent = defineComponent({
 	props: ZdBadgeProps,
 	inheritAttrs: false,
 	setup(props, ctx) {
-		const { instance, root } = useCreateInstance<Badge>(props, ctx, Badge);
+		const { instance, root } = useCreateInstance<Badge>(props, ctx, Badge, ZdBadgeProps);
 
 		return {
 			instance,

package/src/components/zd-breadcrumbs/ZdBreadcrumbs.ts

@@ -21,6 +21,7 @@ export const ZdBreadcrumbsProps = buildProps({
 	items: {
 		type: [Array, String],
 		default: () => [],
+		watch: false,
 	},
 	large: {
 		type: [Boolean, String],
@@ -36,7 +37,7 @@ const breadcrumbsComponent = defineComponent({
 	props: ZdBreadcrumbsProps,
 	inheritAttrs: false,
 	setup(props, ctx) {
-		const { instance, root } = useCreateInstance<Breadcrumbs>(props, ctx, Breadcrumbs);
+		const { instance, root } = useCreateInstance<Breadcrumbs>(props, ctx, Breadcrumbs, ZdBreadcrumbsProps);
 		const { t } = useTranslation();
 
 		const getTranslatedItems = () => {

package/src/components/zd-button/ZdButton.ts

@@ -235,7 +235,7 @@ const buttonComponent = defineComponent({
 	props: ZdButtonProps,
 	inheritAttrs: false,
 	setup(props, ctx) {
-		const { instance, root } = useCreateInstance<Button>(props, ctx, Button);
+		const { instance, root } = useCreateInstance<Button>(props, ctx, Button, ZdButtonProps);
 		const buttonScope = useButtonInstance({ instance, root });
 
 		return {

package/src/components/zd-button-group/ZdButtonGroup.ts

@@ -83,7 +83,7 @@ export default defineComponent({
 	inheritAttrs: false,
 
 	setup(props, ctx: SetupContext) {
-		const { instance, root } = useCreateInstance<ButtonGroup>(props, ctx, ButtonGroup);
+		const { instance, root } = useCreateInstance<ButtonGroup>(props, ctx, ButtonGroup, ZdButtonGroupProps);
 		const { density } = useDensity({ instance });
 		const { click, mouseenter, mouseleave } = useGetMethods(instance, root);
 

package/src/components/zd-card/ZdCard.ts

@@ -114,7 +114,7 @@ const cardComponent = defineComponent({
 	props: ZdCardProps,
 	inheritAttrs: false,
 	setup(props, ctx) {
-		const { instance, root } = useCreateInstance<Card>(props, ctx, Card);
+		const { instance, root } = useCreateInstance<Card>(props, ctx, Card, ZdCardProps);
 
 		const { click, focus, blur, mouseenter, mouseleave, mouseout, mouseover } = useGetMethods(instance, root);
 

package/src/components/zd-card/ZdCard.vue

@@ -65,8 +65,8 @@
 <script lang="ts" src="./ZdCard.ts"></script>
 
 <style lang="scss">
-.zd-card {
-  padding: var(--spacing-4) !important;
+.v-card.zd-card {
+  padding: var(--spacing-4);
   overflow: auto;
 
   &::before {

package/src/components/zd-carousel/ZdCarousel.ts

@@ -121,6 +121,7 @@ export const ZdCarouselProps = buildProps({
 			icon: true,
 			large: true,
 		}),
+		watch: false,
 	},
 	prevButton: {
 		type: Object,
@@ -131,6 +132,7 @@ export const ZdCarouselProps = buildProps({
 			icon: true,
 			large: true,
 		}),
+		watch: false,
 	},
 });
 
@@ -144,7 +146,7 @@ const carouselComponent = defineComponent({
 		Navigation,
 	},
 	setup(props, ctx) {
-		const { instance, root } = useCreateInstance<CarouselClass>(props, ctx, CarouselClass);
+		const { instance, root } = useCreateInstance<CarouselClass>(props, ctx, CarouselClass, ZdCarouselProps);
 		const carouselRef = ref<any>(null);
 		const resizeObserver = ref<ResizeObserver | null>(null);
 		const lastEvent = ref<Event | undefined>(undefined);

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

@@ -13,7 +13,7 @@ const checkboxComponent = defineComponent({
 	props: ZdCheckboxProps,
 	inheritAttrs: false,
 	setup(props, ctx) {
-		const { instance, root } = useCreateInstance<Checkbox>(props, ctx, Checkbox);
+		const { instance, root } = useCreateInstance<Checkbox>(props, ctx, Checkbox, ZdCheckboxProps);
 
 		const checkboxScope = useCheckbox(instance, ctx, root);
 

package/src/components/zd-checkbox-multiple/ZdCheckboxMultiple.ts

@@ -22,6 +22,7 @@ export const CheckboxMultipleProps = buildProps({
 	datasource: {
 		type: Object as PropType<IDatasource>,
 		default: {},
+		watch: false,
 	},
 	returnObject: {
 		type: [Boolean, String],
@@ -30,6 +31,7 @@ export const CheckboxMultipleProps = buildProps({
 	value: {
 		type: [Array, String] as any[],
 		default: () => [],
+		watch: false,
 	},
 	vertical: {
 		type: [Boolean, String],
@@ -43,7 +45,7 @@ export default defineComponent({
 	inheritAttrs: false,
 
 	setup(props, ctx) {
-		const { instance, root } = useCreateInstance<CheckboxMultiple>(props, ctx, CheckboxMultiple);
+		const { instance, root } = useCreateInstance<CheckboxMultiple>(props, ctx, CheckboxMultiple, CheckboxMultipleProps);
 		const { click, mouseenter, mouseleave } = useGetMethods(instance, root);
 
 		const checkboxHorizontalColumns = computed(() => {

package/src/components/zd-chip/ZdChip.ts

@@ -62,7 +62,7 @@ const chipComponent = defineComponent({
 	inheritAttrs: false,
 
 	setup(props, ctx: SetupContext) {
-		const { instance, root } = useCreateInstance<Chip>(props, ctx, Chip);
+		const { instance, root } = useCreateInstance<Chip>(props, ctx, Chip, ZdChipProps);
 		const { blur, focus, click, mouseenter, mouseleave } = useGetMethods(instance, root);
 
 		const variant = computed(() => {

package/src/components/zd-code-viewer/ZdCodeViewer.ts

@@ -33,7 +33,7 @@ const codeViewerComponent = defineComponent({
 	props: ZdCodeViewerProps,
 	inheritAttrs: false,
 	setup(props, ctx) {
-		const { instance, root } = useCreateInstance<CodeViewer>(props, ctx, CodeViewer);
+		const { instance, root } = useCreateInstance<CodeViewer>(props, ctx, CodeViewer, ZdCodeViewerProps);
 
 		const { click, focus, blur, mouseenter, mouseleave } = useGetMethods(instance, root);
 

package/src/components/zd-col/ZdCol.ts

@@ -31,7 +31,7 @@ const colComponent = defineComponent({
 	props: ZdColProps,
 	inheritAttrs: false,
 	setup(props, ctx) {
-		const { instance, root } = useCreateInstance<Col>(props, ctx, Col);
+		const { instance, root } = useCreateInstance<Col>(props, ctx, Col, ZdColProps);
 
 		const { click, focus, blur, mouseenter, mouseleave } = useGetMethods(instance, root);
 

package/src/components/zd-collapse-card/ZdCollapseCard.ts

@@ -12,6 +12,7 @@ export const ZdCollapseCardProps = {
 	expandButton: {
 		type: [Object, String],
 		default: () => undefined,
+		watch: false,
 	},
 	expanded: {
 		type: [Boolean, String],
@@ -20,6 +21,7 @@ export const ZdCollapseCardProps = {
 	header: {
 		type: [Array, String],
 		default: () => [],
+		watch: false,
 	},
 	hideAction: {
 		type: [Boolean, String],
@@ -49,7 +51,7 @@ const collapseCardComponent = defineComponent({
 	inheritAttrs: false,
 
 	setup(props, ctx: SetupContext) {
-		const { instance, root } = useCreateInstance<CollapseCard>(props, ctx, CollapseCard);
+		const { instance, root } = useCreateInstance<CollapseCard>(props, ctx, CollapseCard, ZdCollapseCardProps);
 		const { click, mouseenter, mouseleave } = useGetMethods(instance, root);
 
 		const background = computed(() => ({

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

@@ -17,6 +17,7 @@ import { mergeDictionaries } from '../../utils';
 import { buildProps } from '../../utils';
 import { setFillHeight } from '../../utils/fillHeight';
 import { Logger } from '../../utils/logger/logger';
+import { watch } from 'vue';
 
 type RootRef = ComponentPublicInstance | HTMLElement | null;
 
@@ -34,6 +35,7 @@ export const ZdComponentProps = buildProps({
 		default() {
 			return [];
 		},
+		watch: false,
 	},
 	cssClass: {
 		type: String,
@@ -53,12 +55,14 @@ export const ZdComponentProps = buildProps({
 		default() {
 			return {};
 		},
+		watch: false,
 	},
 	events: {
 		type: Object,
 		default() {
 			return {};
 		},
+		watch: false,
 	},
 	instanceObject: {
 		type: Object,
@@ -72,6 +76,7 @@ export const ZdComponentProps = buildProps({
 		default() {
 			return {};
 		},
+		watch: false,
 	},
 	light: {
 		// deprecated
@@ -84,6 +89,7 @@ export const ZdComponentProps = buildProps({
 	},
 	parent: {
 		type: Object,
+		watch: false,
 	},
 	tabStop: {
 		type: [String, Boolean],
@@ -147,7 +153,7 @@ function useComponentLifeCycles<T extends Component, G extends RootRef>(
 			Logger.warn('root element not found');
 		}
 
-		if (instance.fillHeight && rootElement.value) setFillHeight(rootElement.value);
+		if (instance.fillHeight && rootElement.value) setFillHeight(rootElement.value, instance.fillHeight);
 
 		if (rootElement.value) assignViewFocusFn(rootElement.value, instance);
 
@@ -183,6 +189,7 @@ export function useCreateInstance<T extends Component, G extends RootRef = RootR
 	props: Record<string, any>,
 	ctx: SetupContext,
 	ObjectClass: new (args: any) => T,
+	propsDefs: Record<string, any> = {},
 	checkParentTypeFn?: (parentInstance?: Component) => boolean,
 ): { instance: UnwrapNestedRefs<T>; root: Readonly<ShallowRef<G | null>> } {
 	const { parents, addChild } = useVueParentComponent();
@@ -258,6 +265,21 @@ 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;
+			}
+		);
+	});
+
 	addChild({ instance, props });
 
 	if (!createdFromObject) instance.onCreated();

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

@@ -9,8 +9,10 @@ export const ZdComponentRenderProps = buildProps({
 		default() {
 			return [];
 		},
+		watch: false,
 	},
 	component: {
 		type: String,
+		watch: false,
 	},
 });

package/src/components/zd-container/ZdContainer.ts

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

package/src/components/zd-currency/ZdCurrency.ts

@@ -16,7 +16,7 @@ export const ZdCurrencyProps = buildProps({
 const currencyComponent = defineComponent({
 	props: ZdCurrencyProps,
 	setup(props, ctx) {
-		const { instance, root } = useCreateInstance<Currency>(props, ctx, Currency);
+		const { instance, root } = useCreateInstance<Currency>(props, ctx, Currency, ZdCurrencyProps);
 
 		return {
 			instance,

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

@@ -101,7 +101,7 @@ const dateInputComponent = defineComponent({
 	props: ZdDateInputProps,
 	inheritAttrs: false,
 	setup(props, ctx) {
-		const { instance, root } = useCreateInputInstance<DateInput>(props, ctx, DateInput);
+		const { instance, root } = useCreateInputInstance<DateInput>(props, ctx, DateInput, ZdDateInputProps);
 		const textInputScope = useTextInput(instance, ctx, root);
 		const picker = ref<HTMLElement | null>(null);
 		const { isMobile } = useIsMobile();

package/src/components/zd-date-range/ZdDateRange.ts

@@ -118,7 +118,7 @@ export default defineComponent({
 	props: ZdDateRangeProps,
 	inheritAttrs: false,
 	setup(props, ctx) {
-		const { instance, root } = useCreateInputInstance<DateRange>(props, ctx, DateRange);
+		const { instance, root } = useCreateInputInstance<DateRange>(props, ctx, DateRange, ZdDateRangeProps);
 		const picker = ref<HTMLElement | null>(null);
 		const { isMobile } = useIsMobile();
 		const { pickerValue } = usePickerValue(instance);

package/src/components/zd-divider/ZdDivider.ts

@@ -20,7 +20,7 @@ const dividerComponent = defineComponent({
 	props: ZdDividerProps,
 	inheritAttrs: false,
 	setup(props, ctx) {
-		const { instance, root } = useCreateInstance<Divider>(props, ctx, Divider);
+		const { instance, root } = useCreateInstance<Divider>(props, ctx, Divider, ZdDividerProps);
 
 		return {
 			instance,

package/src/components/zd-dropdown/ZdDropdown.ts

@@ -13,6 +13,7 @@ const ZdDropdownProps = buildProps({
 	},
 	activator: {
 		type: [Object, String],
+		watch: false,
 	},
 	closeOnContentClick: {
 		type: [Boolean, String],
@@ -78,7 +79,7 @@ const dropdown = defineComponent({
 		ZdActivatorWrapper,
 	},
 	setup(props, ctx) {
-		const { instance, root } = useCreateInstance<Dropdown>(props, ctx, Dropdown);
+		const { instance, root } = useCreateInstance<Dropdown>(props, ctx, Dropdown, ZdDropdownProps);
 
 		const cssVars = computed(() => {
 			return {

package/src/components/zd-dropdown/ZdDropdown.vue

@@ -76,7 +76,7 @@
   overflow: auto;
   text-overflow: unset;
 
-  padding: 2px;
+  padding: 2px !important;
 }
 
 .zd-dropdown-hover {

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

@@ -51,7 +51,7 @@ const FooterComponent = defineComponent({
 	props: ZdFooterProps,
 	inheritAttrs: false,
 	setup(props, ctx) {
-		const { instance, root } = useCreateInstance<Footer>(props, ctx, Footer);
+		const { instance, root } = useCreateInstance<Footer>(props, ctx, Footer, ZdFooterProps);
 
 		const { click, mouseenter, mouseleave, mouseout, mouseover } = useGetMethods(instance, root);
 

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

@@ -28,6 +28,7 @@ export const ZdFormProps = buildProps({
 		default() {
 			return {};
 		},
+		watch: false,
 	},
 });
 
@@ -35,7 +36,7 @@ const formComponent: any = defineComponent({
 	props: ZdFormProps,
 	inheritAttrs: false,
 	setup(props, ctx) {
-		const { instance, root } = useCreateInstance<Form>(props, ctx, Form);
+		const { instance, root } = useCreateInstance<Form>(props, ctx, Form, ZdFormProps);
 
 		const { click, focus, blur, mouseenter, mouseleave } = useGetMethods(instance, root);
 

package/src/components/zd-frame/ZdFrame.ts

@@ -24,10 +24,12 @@ export const ZdFrameProps = buildProps({
 	override: {
 		type: Object,
 		default: () => ({}),
+		watch: false,
 	},
 	overrideNamedProps: {
 		type: Object,
 		default: () => ({}),
+		watch: false,
 	},
 	cache: {
 		type: [Boolean, String],
@@ -71,7 +73,7 @@ const frameComponent: any = defineComponent({
 	props: ZdFrameProps,
 	inheritAttrs: false,
 	setup(props, ctx) {
-		const { instance, root } = useCreateInstance<Frame>(props, ctx, Frame);
+		const { instance, root } = useCreateInstance<Frame>(props, ctx, Frame, ZdFrameProps);
 
 		return { instance, root };
 	},

package/src/components/zd-frame-page/ZdFramePage.ts

@@ -16,7 +16,7 @@ const framePageComponent = defineComponent({
 	props: ZdFramePageProps,
 	inheritAttrs: false,
 	setup(props, ctx) {
-		const { instance, root } = useCreateInstance<FramePage>(props, ctx, FramePage);
+		const { instance, root } = useCreateInstance<FramePage>(props, ctx, FramePage, ZdFramePageProps);
 
 		return { instance, root };
 	},

package/src/components/zd-frame-page/ZdFramePage.vue

@@ -4,7 +4,7 @@
     :name="`${instance.name}_frame_page`"
     :path="instance.path"
     :instance-object="instance"
-    class="zd-frame-page"
+    :cssClass="`zd-frame-page ${instance.cssClass || ''}`"
   />
 </template>
 

package/src/components/zd-grid/ZdGrid.ts

@@ -46,6 +46,7 @@ export const ZdGridProps = buildProps({
 	disableSelection: {
 		type: [String, Function],
 		default: undefined,
+		watch: false,
 	},
 	dragColumns: {
 		type: [Boolean, String],
@@ -54,6 +55,7 @@ export const ZdGridProps = buildProps({
 	errorSlot: {
 		type: Array,
 		default: () => [],
+		watch: false,
 	},
 	fillHeight: {
 		type: [Boolean, String],
@@ -82,6 +84,7 @@ export const ZdGridProps = buildProps({
 				],
 			},
 		],
+		watch: false,
 	},
 	headerBackground: {
 		type: String,
@@ -124,6 +127,7 @@ export const ZdGridProps = buildProps({
 				text: 'NO_DATA',
 			},
 		],
+		watch: false,
 	},
 	noDataText: {
 		type: String,
@@ -139,6 +143,7 @@ export const ZdGridProps = buildProps({
 				text: 'NO_RESULT',
 			},
 		],
+		watch: false,
 	},
 	noResultsText: {
 		type: String,
@@ -181,6 +186,7 @@ export const ZdGridProps = buildProps({
 				cssClass: 'zd-grid-search',
 			},
 		],
+		watch: false,
 	},
 	width: {
 		type: [Number, String],
@@ -196,7 +202,7 @@ const gridComponent = defineComponent({
 	props: ZdGridProps,
 	inheritAttrs: false,
 	setup(props, ctx) {
-		const { instance, root } = useCreateInstance<Grid, ComponentPublicInstance>(props, ctx, Grid);
+		const { instance, root } = useCreateInstance<Grid, ComponentPublicInstance>(props, ctx, Grid, ZdGridProps);
 
 		const gridScope = useGridInstance({ instance, root });
 
@@ -222,16 +228,18 @@ export function useGridInstance({
 	instance,
 	root,
 	renderedData,
+	isNavigableRow,
 }: {
 	instance: UnwrapNestedRefs<IGrid>;
 	root: Readonly<ShallowRef<ComponentPublicInstance | null>>;
 	renderedData?: ComputedRef<IDictionary<any>[]>;
+	isNavigableRow?: (element: Element) => boolean;
 }) {
 	useWatchUrl(instance);
 
 	const rootEl = getRootElement(root);
 	useColumnDrag({ instance, rootEl });
-	useTableNavigation({ instance, rootEl });
+	useTableNavigation({ instance, rootEl, isNavigableRow });
 
 	const { updateFixedColumns, fixedLeft, fixedRight } = useFixedColumns({ instance, rootEl });
 

package/src/components/zd-grid/ZdGrid.vue

@@ -162,7 +162,7 @@
 
     .zd-grid__checkbox {
       .v-icon {
-        font-size: 1rem;
+        font-size: 1.25rem;
       }
 
       .v-checkbox-btn {

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

@@ -1,18 +1,16 @@
 <template>
-  <zd-tooltip-overflow
-    :overflow="column.overflow"
-    :value="value"
-    :classes="[
+  <span
+    :class="[
       'zd-grid__cell-content',
       ...cssClass,
     ]"
-    :styles="[{
-      ...cssStyle,
+    :style="[{
       width,
     }]"
+    v-tooltip-overflow="value"
   >
     <slot :value="value" :formattedValue="formattedValue">{{ value }}</slot>
-  </zd-tooltip-overflow>
+  </span>
 </template>
 
 <script lang="ts" src="./ZdGridCellContent.ts"></script>

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

@@ -25,17 +25,14 @@
         ></zd-grid-sort>
       </template>
 
-      <zd-tooltip-overflow
-        :overflow="overflow"
-        :value="label"
-        :classes="[
-          'zd-grid__header-name',
-        ]"
+      <span
+        class="zd-grid__header-name"
         @click="click($event)"
+        v-tooltip-overflow.ellipsis="label"
       >
         {{ $t(label)}}
         <slot name="label"></slot>
-      </zd-tooltip-overflow>
+      </span>
 
       <zd-grid-helper v-if="helperText" :helper-text="helperText"></zd-grid-helper>