@zeedhi/vuetify 3.0.11 → 3.2.0

package/src/components/zd-menu/ZdMenu.ts

@@ -11,7 +11,7 @@ import {
 } from '@zeedhi/common';
 import { IEventParam, KeyMap, Metadata } from '@zeedhi/core';
 import debounce from 'lodash.debounce';
-import { defineComponent, onBeforeUnmount, onMounted, watch } from 'vue';
+import { computed, defineComponent, onBeforeUnmount, onMounted, watch } from 'vue';
 import { useRoute } from 'vue-router';
 import { useDisplay } from 'vuetify';
 import { buildProps } from '../../utils';
@@ -58,7 +58,7 @@ export const ZdMenuProps = buildProps({
 	},
 	miniWidth: {
 		type: [Number, String],
-		default: 58,
+		default: 50,
 	},
 	temporary: {
 		type: [Boolean, String],
@@ -87,6 +87,7 @@ export const ZdMenuProps = buildProps({
 	topSlot: {
 		type: Array<IComponentRender>,
 		default: () => [] as IComponentRender[],
+		watch: false,
 	},
 	width: {
 		type: [Number, String],
@@ -103,6 +104,7 @@ export const ZdMenuProps = buildProps({
 	items: {
 		type: Array<IMenuItem>,
 		default: () => [],
+		watch: false,
 	},
 	// Zeedhi 3.x
 	permanent: {
@@ -136,12 +138,14 @@ const menuComponent = defineComponent({
 	props: ZdMenuProps,
 	inheritAttrs: false,
 	setup(props, ctx) {
-		const { instance, root } = useCreateInstance<Menu>(props, ctx, Menu);
+		const { instance, root } = useCreateInstance<Menu>(props, ctx, Menu, ZdMenuProps);
 
 		const { click, focus, blur, mouseenter, mouseleave } = useGetMethods(instance, root);
 
 		const { mobile } = useDisplay();
 
+		const menuTheme = computed(() => instance.theme);
+
 		const checkMiniVariant = () => {
 			return !!(
 				(!instance.opened && instance.mini) ||
@@ -180,7 +184,7 @@ const menuComponent = defineComponent({
 		};
 
 		const getParentComp = (): IMenu | IMenuGroup | undefined => {
-			return instance.currentItem?.parentGroup || instance.currentItem?.parentMenu;
+			return instance.currentItem?.parentGroup || (instance.currentItem?.parentMenu as Menu);
 		};
 
 		const navigateNextItem = () => {
@@ -329,6 +333,7 @@ const menuComponent = defineComponent({
 			mouseleave,
 			searchInputProps,
 			navigationKeyMapping,
+			menuTheme,
 			// methods
 			checkMiniVariant,
 			showSlotOnHover,

package/src/components/zd-menu/ZdMenu.vue

@@ -10,7 +10,7 @@
       v-model="instance.showTooltip"
       :attach="instance.tooltipAnchor"
       :content-props="instance.tooltipContentProps"
-      :theme="instance.theme"
+      :theme="menuTheme"
       location="end"
       class="zd-menu-tooltip"
     >
@@ -31,14 +31,14 @@
         width: instance.width,
         absolute: !!instance.absolute,
         rail: instance.miniState,
-        theme: instance.theme,
+        theme: menuTheme,
         'rail-width': instance.miniWidth,
-        'expand-on-hover': true,
+        'expand-on-hover': !instance.mini,
         permanent: !!instance.permanent,
         'disable-route-watcher': instance.disableRouteWatcher,
       }"
     >
-      <v-list nav :dense="instance.dense" expand :theme="instance.theme">
+      <v-list nav :dense="instance.dense" expand :theme="menuTheme">
         <!-- SLOT -->
         <span
           class="zd-menu-top-slot"
@@ -143,7 +143,8 @@
     }
   }
 
-  &.theme--dark {
+  &.theme--dark,
+  &.v-theme--dark {
     .v-list {
       .v-list-item {
         .v-list-item-title {

package/src/components/zd-menu/ZdMenuButton.ts

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

package/src/components/zd-menu/ZdMenuGroup.ts

@@ -22,6 +22,7 @@ export const ZdMenuGroupProps = buildProps({
 	items: {
 		type: Array<IMenuItem>,
 		default: () => [] as IMenuItem[],
+		watch: false,
 	},
 	menuLevel: {
 		type: Number,
@@ -46,7 +47,7 @@ const menuGroupComponent = defineComponent({
 	props: ZdMenuGroupProps,
 	inheritAttrs: false,
 	setup(props, ctx) {
-		const { instance, root } = useCreateInstance<MenuGroup>(props, ctx, MenuGroup);
+		const { instance, root } = useCreateInstance<MenuGroup>(props, ctx, MenuGroup, ZdMenuGroupProps);
 
 		const { click, focus, blur, mouseenter, mouseleave } = useGetMethods(instance, root);
 

package/src/components/zd-menu/ZdMenuLink.ts

@@ -38,7 +38,7 @@ const menuLinkComponent = defineComponent({
 	props: ZdMenuLinkProps,
 	inheritAttrs: false,
 	setup(props, ctx) {
-		const { instance, root } = useCreateInstance<MenuLink>(props, ctx, MenuLink);
+		const { instance, root } = useCreateInstance<MenuLink>(props, ctx, MenuLink, ZdMenuLinkProps);
 
 		const { click, focus, blur, mouseenter, mouseleave } = useGetMethods(instance, root);
 

package/src/components/zd-menu/ZdMenuSeparator.ts

@@ -12,7 +12,7 @@ const menuSeparatorComponent = defineComponent({
 	props: ZdMenuSeparatorProps,
 	inheritAttrs: false,
 	setup(props, ctx) {
-		const { instance, root } = useCreateInstance<MenuSeparator>(props, ctx, MenuSeparator);
+		const { instance, root } = useCreateInstance<MenuSeparator>(props, ctx, MenuSeparator, ZdMenuSeparatorProps);
 
 		const { click, focus, blur, mouseenter, mouseleave } = useGetMethods(instance, root);
 

package/src/components/zd-modal/ZdModal.ts

@@ -1,4 +1,4 @@
-import { IModalGrid, Modal, ModalService } from '@zeedhi/common';
+import { Modal, ModalService } from '@zeedhi/common';
 import { RendererNode, defineComponent, reactive } from 'vue';
 
 export default defineComponent({
@@ -12,13 +12,6 @@ export default defineComponent({
 		let elDragged: RendererNode | null = null;
 		let dragHandle: HTMLElement | null = null;
 
-		const getGridClasses = (grid: IModalGrid) =>
-			Object.keys(grid).reduce((previous, key) => `${previous} zd-col-${key}-${grid[key as keyof IModalGrid]}`, '');
-
-		const getSizeClass = (modal: Modal): string => {
-			return !modal.fullscreen ? getGridClasses(modal.grid) : '';
-		};
-
 		const initializeModalPosition = (modalEl: HTMLElement) => {
 			const rect = modalEl.getBoundingClientRect();
 
@@ -107,17 +100,6 @@ export default defineComponent({
 			};
 		};
 
-		const getContentClass = (modal: Modal) => {
-			const classes: string[] = [
-				'zd-modal-content',
-				getSizeClass(modal),
-				modal.cssClass,
-				modal.draggable ? 'zd-modal-draggable' : '',
-				modal.draggable && !modal.dragHandle ? 'zd-modal-draggable-handle' : '',
-			];
-			return classes.join(' ');
-		};
-
 		const registerDragEvents = (modal: Modal, el: RendererNode | null) => {
 			if (!el || !(el instanceof HTMLElement)) return;
 
@@ -137,8 +119,6 @@ export default defineComponent({
 
 		return {
 			modals,
-			dragStart,
-			getContentClass,
 			registerDragEvents,
 			unregisterDragEvents,
 		};

package/src/components/zd-modal/ZdModal.vue

@@ -13,47 +13,28 @@
       :fullscreen="modal.fullscreen"
       :theme="modal.theme"
     >
-      <v-card
-        :class="[
-          'zd-modal-card',
-          'zd-modal-card-' + modal.name,
-          'zd-display-flex',
-          'zd-flex-column',
-          modal.cssClass,
-          getContentClass(modal)
-        ]"
-        :style="modal.cssStyle"
-        ref="modalRef"
-        @vue:mounted="modal.draggable && registerDragEvents(modal, $event.el)"
-        @vue:destroyed="unregisterDragEvents(modal, $event.el)"
+      <zd-modal-card
+        :name="modal.name"
+        :title="modal.title"
+        :children="modal.children"
+        :css-class="modal.cssClass"
+        :css-style="modal.cssStyle"
+        :fullscreen="modal.fullscreen"
+        :grid="modal.grid"
+        :draggable="modal.draggable"
+        :drag-handle="modal.dragHandle"
+        :parent="modal"
+        :register-drag-events="registerDragEvents"
+        :unregister-drag-events="unregisterDragEvents"
       >
-        <v-card-title v-if="modal.title" class="zd-theme-font-title zd-modal-title">
-          {{ $t(modal.title) }}
-        </v-card-title>
-        <v-card-text class="zd-modal-card-text">
-          <v-container
-            fluid
-            class="zd-modal-container"
-          >
-          <v-layout style="flex-direction: column;">
-            <component
-              v-for="(child) in modal.children"
-              v-bind="child"
-              :key="child.name"
-              :is="child.component"
-              :parent="modal">
-            </component>
-            <slot></slot>
-          </v-layout>
-          </v-container>
-        </v-card-text>
-      </v-card>
+        <slot></slot>
+      </zd-modal-card>
     </v-dialog>
   </div>
 </template>
-  
+
 <script lang="ts" src="./ZdModal.ts"></script>
-  
+
 <style lang="scss">
 .zd-modal {
   &-title {
@@ -94,10 +75,6 @@
   }
 }
 
-.v-dialog .v-overlay__content .v-card .v-card-text{
-  padding: 0px !important;
-}
-
 .v-overlay.v-dialog {
   > .v-overlay__content {
     flex-direction: row;
@@ -105,40 +82,4 @@
     max-width: none;
   }
 }
-
-.zd-modal-content {
-  > .zd-modal-card {
-    > .zd-modal-title {
-      padding: var(--zd-default-padding);
-      padding-bottom: 0px;
-      font-size: var(--zd-font-title-size);
-      font-weight: var(--zd-font-title-weight);
-      color: var(--zd-font-color);
-    }
-
-    > .zd-modal-card-text {
-      padding: var(--zd-default-padding);
-      display: flex;
-      flex: 1 1 auto;
-    }
-  }
-
-  .zd-modal-content {
-    > .zd-modal-card {
-      > .zd-modal-title {
-        padding: var(--zd-default-padding);
-        padding-bottom: 0px;
-        font-size: var(--zd-font-title-size);
-        font-weight: var(--zd-font-title-weight);
-        color: var(--zd-font-color);
-      }
-
-      > .zd-modal-card-text {
-        padding: var(--zd-default-padding);
-        display: flex;
-        flex: 1 1 auto;
-      }
-    }
-  }
-}
-</style>
+</style>

package/src/components/zd-modal/ZdModalCard.ts

@@ -0,0 +1,100 @@
+import { IModalGrid, Modal } from '@zeedhi/common';
+import { PropType, defineComponent } from 'vue';
+
+export default defineComponent({
+	inheritAttrs: false,
+	props: {
+		name: {
+			type: String,
+			required: true,
+		},
+		title: {
+			type: String,
+			required: false,
+		},
+		children: {
+			type: Array as PropType<any[]>,
+			required: false,
+			default: () => [],
+		},
+		cssClass: {
+			type: String,
+			required: false,
+			default: '',
+		},
+		cssStyle: {
+			type: String,
+			required: false,
+			default: '',
+		},
+		fullscreen: {
+			type: Boolean,
+			required: false,
+			default: false,
+		},
+		grid: {
+			type: Object as PropType<IModalGrid>,
+			required: false,
+			default: () => ({}),
+		},
+		draggable: {
+			type: Boolean,
+			required: false,
+			default: false,
+		},
+		dragHandle: {
+			type: String,
+			required: false,
+		},
+		parent: {
+			type: Object as PropType<Modal>,
+			required: false,
+		},
+		registerDragEvents: {
+			type: Function as PropType<(modal: Modal, el: any) => void>,
+			required: false,
+		},
+		unregisterDragEvents: {
+			type: Function as PropType<(modal: Modal, el: any) => void>,
+			required: false,
+		},
+	},
+	setup(props) {
+		const getGridClasses = (grid: IModalGrid) =>
+			Object.keys(grid).reduce((previous, key) => `${previous} zd-col-${key}-${grid[key as keyof IModalGrid]}`, '');
+
+		const getSizeClass = (): string => {
+			return !props.fullscreen ? getGridClasses(props.grid) : '';
+		};
+
+		const getContentClass = () => {
+			const classes: string[] = [
+				getSizeClass(),
+				props.cssClass,
+				props.draggable ? 'zd-modal-draggable' : '',
+				props.draggable && !props.dragHandle ? 'zd-modal-draggable-handle' : '',
+			];
+			return classes.join(' ');
+		};
+
+		const handleMounted = (modal: Modal, el: any) => {
+			modal.onMounted(el);
+
+			if (props.draggable && props.registerDragEvents) {
+				props.registerDragEvents(modal, el);
+			}
+		};
+
+		const handleDestroyed = (modal: Modal, el: any) => {
+			if (props.draggable && props.unregisterDragEvents) {
+				props.unregisterDragEvents(modal, el);
+			}
+		};
+
+		return {
+			getContentClass,
+			handleMounted,
+			handleDestroyed,
+		};
+	},
+});

package/src/components/zd-modal/ZdModalCard.vue

@@ -0,0 +1,47 @@
+<template>
+  <v-card
+    :class="[
+      'zd-modal-card',
+      'zd-modal-card-' + name,
+      'zd-display-flex',
+      'zd-flex-column',
+      cssClass,
+      getContentClass()
+    ]"
+    :style="cssStyle"
+    ref="root"
+    @vue:mounted="parent && handleMounted(parent, $event.el)"
+    @vue:destroyed="parent && handleDestroyed(parent, $event.el)"
+  >
+    <v-card-title v-if="title" class="zd-theme-font-title zd-modal-title">
+      {{ $t(title) }}
+    </v-card-title>
+    <v-card-text class="zd-modal-card-text">
+      <v-container
+        fluid
+        class="zd-modal-container"
+      >
+      <v-layout style="flex-direction: column;">
+        <component
+          v-for="(child) in children"
+          v-bind="child"
+          :key="child.name"
+          :is="child.component"
+          :parent="parent">
+        </component>
+        <slot></slot>
+      </v-layout>
+      </v-container>
+    </v-card-text>
+  </v-card>
+</template>
+
+<script lang="ts" src="./ZdModalCard.ts"></script>
+
+<style lang="scss">
+.zd-modal-card {
+  &-text {
+    padding: 0px !important;
+  }
+}
+</style>

package/src/components/zd-modal/ZdModalCloseButton.ts

@@ -28,7 +28,7 @@ const modalCloseButton = defineComponent({
 	props: ZdModalCloseButtonProps,
 	inheritAttrs: false,
 	setup(props, ctx) {
-		const { instance, root } = useCreateInstance<ModalCloseButton>(props, ctx, ModalCloseButton);
+		const { instance, root } = useCreateInstance<ModalCloseButton>(props, ctx, ModalCloseButton, ZdModalCloseButtonProps);
 
 		return {
 			instance,

package/src/components/zd-month/ZdMonth.ts

@@ -19,7 +19,7 @@ export default defineComponent({
 	props: ZdMonthProps,
 	inheritAttrs: false,
 	setup(props, ctx) {
-		const { instance, root } = useCreateInstance<Month>(props, ctx, Month);
+		const { instance, root } = useCreateInstance<Month>(props, ctx, Month, ZdMonthProps);
 
 		watch(
 			() => instance.viewMode,

package/src/components/zd-number-input/ZdNumberInput.ts

@@ -25,7 +25,7 @@ const numberInputComponent = defineComponent({
 	props: ZdNumberInputProps,
 	inheritAttrs: false,
 	setup(props, ctx) {
-		const { instance, root } = useCreateInstance<NumberInput>(props, ctx, NumberInput);
+		const { instance, root } = useCreateInstance<NumberInput>(props, ctx, NumberInput, ZdNumberInputProps);
 
 		const autoNumericInit = ref(false);
 

package/src/components/zd-password/ZdPassword.ts

@@ -15,7 +15,7 @@ const passwordComponent = defineComponent({
 	props: ZdPasswordProps,
 	inheritAttrs: false,
 	setup(props, ctx) {
-		const { instance, root } = useCreateInstance<Password>(props, ctx, Password);
+		const { instance, root } = useCreateInstance<Password>(props, ctx, Password, ZdPasswordProps);
 
 		return {
 			instance,

package/src/components/zd-progress/ZdProgress.ts

@@ -30,6 +30,7 @@ export const ZdProgressProps = buildProps({
 	centerSlot: {
 		type: [Array, String] as PropType<IComponentRender[] | string>,
 		default: () => [],
+		watch: false,
 	},
 	value: {
 		type: [Number, String] as PropType<number | string>,
@@ -40,7 +41,7 @@ const progressComponent = defineComponent({
 	props: ZdProgressProps,
 	inheritAttrs: false,
 	setup(props, ctx) {
-		const { instance, root } = useCreateInstance<Progress>(props, ctx, Progress);
+		const { instance, root } = useCreateInstance<Progress>(props, ctx, Progress, ZdProgressProps);
 		const { click, mouseenter, mouseleave } = useGetMethods(instance, root);
 
 		return {

package/src/components/zd-radio/ZdRadio.ts

@@ -22,6 +22,7 @@ export const ZdRadioProps = buildProps({
 		defaut() {
 			return {};
 		},
+		watch: false,
 	},
 	dataValue: {
 		type: String,
@@ -37,7 +38,7 @@ const radioComponent = defineComponent({
 	props: ZdRadioProps,
 	inheritAttrs: false,
 	setup(props, ctx) {
-		const { instance, root } = useCreateInstance<Radio>(props, ctx, Radio);
+		const { instance, root } = useCreateInstance<Radio>(props, ctx, Radio, ZdRadioProps);
 
 		const radioScope = useRadio(instance, ctx, root);
 

package/src/components/zd-row/ZdRow.ts

@@ -29,7 +29,7 @@ const rowComponent = defineComponent({
 	props: ZdRowProps,
 	inheritAttrs: false,
 	setup(props, ctx) {
-		const { instance, root } = useCreateInstance<Row>(props, ctx, Row);
+		const { instance, root } = useCreateInstance<Row>(props, ctx, Row, ZdRowProps);
 
 		const { click, focus, blur, mouseenter, mouseleave } = useGetMethods(instance, root);
 

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';
@@ -56,6 +64,7 @@ export const ZdSelectProps = buildProps({
 	datasource: {
 		type: Object,
 		default: () => ({}),
+		watch: false,
 	},
 	value: {
 		type: [String, Number, Object],
@@ -72,10 +81,12 @@ export const ZdSelectProps = buildProps({
 	itemAfterSlot: {
 		type: Array,
 		default: () => [],
+		watch: false,
 	},
 	itemBeforeSlot: {
 		type: Array,
 		default: () => [],
+		watch: false,
 	},
 	manualMode: {
 		type: [Boolean, String],
@@ -100,7 +111,12 @@ const selectComponent: any = defineComponent({
 	props: ZdSelectProps,
 	inheritAttrs: false,
 	setup(props, ctx) {
-		const { instance, root } = useCreateInputInstance<Select>(props, ctx, Select);
+		const { instance, root } = useCreateInputInstance<Select>(
+			props,
+			ctx,
+			Select,
+			ZdSelectProps,
+		);
 
 		const selectScope = useSelect(instance, ctx, root);
 
@@ -127,7 +143,7 @@ export function useSelect<TG extends Select>(
 	const hasItemAfterSlot = !!slots.itemAfterSlot;
 
 	const items = computed<IDictionary[]>(() => {
-		const data = instance.items;
+		const data = instance.items || [];
 
 		const disabledValues = instance.disabledItems.map((item: IDictionary) => {
 			if (item && typeof item === 'object') {
@@ -184,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(() => {
@@ -214,6 +238,7 @@ export function useSelect<TG extends Select>(
 		selectChange,
 		selectInput,
 		selectKeydown,
+		selectClear,
 		hasItemBeforeSlot,
 		hasItemAfterSlot,
 		onLoadMoreIntersect,

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

@@ -20,8 +20,8 @@
           !instance.showHelper &&
           !(
             instance.alwaysShowError &&
-            $refs.instance &&
-            $refs.instance.errorBucket.length
+            $refs.root &&
+            $refs.root.errorMessages.length
           ),
         'zd-no-border': !instance.showBorder,
         'zd-dense': instance.dense,
@@ -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)"
@@ -174,15 +175,11 @@
     font-size: var(--zd-font-body1-size);
   }
 
-  .v-label {
-    opacity: 1;
-  }
-
   &.zd-dense .v-field__input {
     min-height: 22px;
     padding: 0;
   }
-  
+
   .v-field__input {
     padding: 0;
     min-height: 34px;
@@ -211,4 +208,4 @@
     }
   }
 }
-</style>
+</style>