@zeedhi/vuetify 3.0.10 → 3.0.11

package/package.json

@@ -1,23 +1,24 @@
 {
   "name": "@zeedhi/vuetify",
-  "version": "3.0.10",
+  "version": "3.0.11",
   "description": "Zeedhi Components based on Vuetify",
   "author": "Zeedhi <zeedhi@teknisa.com>",
   "license": "ISC",
   "main": "src/index.ts",
-  "module": "dist/zd-vuetify.js",
+  "module": "dist/zd-vuetify.mjs",
   "typings": "types/index.d.ts",
   "type": "module",
   "publishConfig": {
     "access": "public"
   },
   "scripts": {
-    "build": "rollup -c rollup.config.js",
-    "check-types": "tsc",
-    "types": "tsc --noEmit false",
+    "build:lib": "vite build --config vite.config.lib.ts",
+    "build:browser": "vite build --config vite.config.browser.ts",
+    "build": "npm run build:lib && npm run build:browser",
+    "check-types": "tsc --noEmit",
+    "types": "tsc --emitDeclarationOnly",
     "build:prod": "npm run build && npm run types",
     "clean": "rm -rf ./dist",
-    "docs": "typedoc --out docs src/",
     "test": "vitest",
     "watch": "npm run build -- --watch",
     "coverage": "vitest run --coverage"
@@ -25,31 +26,37 @@
   "dependencies": {
     "@zeedhi/common": "^3.0.0",
     "@zeedhi/core": "^3.0.0",
-    "@zeedhi/vue": "^3.0.10",
-    "lodash.camelcase": "^4.3.0",
     "lodash.clonedeep": "^4.5.0",
     "lodash.debounce": "^4.0.*",
-    "lodash.kebabcase": "^4.1.1",
     "prismjs": "1.29.*",
     "sl-vue-tree-next": "^0.0.14",
     "sortablejs": "^1.15.6",
-    "vue": "^3.0.0",
     "vue-prism-editor": "2.0.0-alpha.2",
-    "vue-router": "^4.2.2",
-    "vuetify": "~3.11.0"
+    "vue3-carousel": "0.17.0"
   },
   "devDependencies": {
-    "@types/lodash.camelcase": "^4.3.7",
     "@types/lodash.clonedeep": "^4.5.9",
     "@types/lodash.debounce": "4.0.*",
-    "@types/lodash.kebabcase": "^4.1.7",
     "@types/prismjs": "1.26.*",
     "@types/sortablejs": "^1.15.8",
     "@vitest/coverage-v8": "^2.1.3",
-    "sass": "^1.93.2"
+    "@zeedhi/common": "^3.0.0",
+    "@zeedhi/core": "^3.0.0",
+    "@zeedhi/vue": "^3.0.11",
+    "vue": "^3.0.0",
+    "vue-router": "^4.2.2",
+    "vuetify": "^3.11.0"
+  },
+  "peerDependencies": {
+    "@zeedhi/common": "^3.0.0",
+    "@zeedhi/core": "^3.0.0",
+    "@zeedhi/vue": "^3.0.10",
+    "vue": "^3.0.0",
+    "vue-router": "^4.2.2",
+    "vuetify": "^3.11.0"
   },
   "env": {
     "NODE_ENV": "production"
   },
-  "gitHead": "93b5f9f42f0678c6eaf21ecdefb9b44abc72b419"
+  "gitHead": "c6c6951fd1cb5e2a8ad03425d0e139c1583bb230"
 }

package/src/components/tooltip-overflow/ZdTooltipOverflow.vue

@@ -32,7 +32,7 @@
 
 <script lang="ts" src="./ZdTooltipOverflow.ts"></script>
 
-<style lang="scss" scoped>
+<style lang="scss">
 .zd-tooltip-overflow {
   &--hidden {
     text-overflow: unset;

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

@@ -56,7 +56,7 @@
 
 <script lang="ts" src='./ZdButton.ts' />
 
-<style lang="scss" scoped>
+<style lang="scss">
 .v-btn.zd-button,
 a.v-btn.zd-button,
 button.v-btn.zd-button {

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

@@ -106,6 +106,7 @@
 <style lang="scss">
 .zd-carousel {
   height: 100%;
+  width: 100%;
 
   .carousel {
     outline: none;

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

@@ -40,6 +40,10 @@
   
   <style lang="scss">
   .zd-checkbox {
+    &.v-input {
+      height: fit-content;
+    }
+
     .v-label {
       font-weight: var(--zd-font-body1-weight);
       color: var(--zd-font-color);

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

@@ -224,7 +224,7 @@ export function useCreateInstance<T extends Component, G extends RootRef = RootR
 
 		for (const key in props) {
 			// Check if the prop was explicitly passed (not using default)
-			if (vueInstance?.vnode.props && Object.prototype.hasOwnProperty.call(vueInstance.vnode.props, key)) {
+			if (vueInstance?.vnode.props && Object.hasOwn(vueInstance.vnode.props, key)) {
 				explicitlyPassedProps[key] = props[key];
 			}
 		}

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

@@ -33,7 +33,7 @@
 
 <script lang="ts" src="./ZdContainer.ts"></script>
 
-<style lang="scss" scoped>
+<style lang="scss">
 .zd-container {
   padding: 1rem;
   background: rgb(var(--v-theme-surface));

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

@@ -1,6 +1,7 @@
 <template>
   <zd-number-input
     :id="instance.name"
+    ref="root"
     name="currency"
     :instance-object="instance"
   />

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

@@ -1,5 +1,5 @@
 import { DateInput } from '@zeedhi/common';
-import { DateHelper, Mask } from '@zeedhi/core';
+import { DateHelper } from '@zeedhi/core';
 import { computed, defineComponent, mergeProps, ref } from 'vue';
 import { getRootElement, useCreateInputInstance, useTextInput } from '..';
 import { PropType } from 'vue';
@@ -105,16 +105,8 @@ const dateInputComponent = defineComponent({
 		const textInputScope = useTextInput(instance, ctx, root);
 		const picker = ref<HTMLElement | null>(null);
 		const { isMobile } = useIsMobile();
-		const { pickerValue } = usePickerValue(instance as any);
-		useDateKeydown(instance, {
-			isMaskDelimiterFn: (_value: string, position: number) => {
-				const mask = instance.mask;
-				if (typeof mask === 'string' && mask[position]) {
-					return mask[position] !== '#' && Mask.isMaskDelimiter(mask[position]);
-				}
-				return false;
-			},
-		});
+		const { pickerValue } = usePickerValue(instance);
+		useDateKeydown(instance);
 
 		const onSelectDate = (date: string, event: MouseEvent) => {
 			const rootElement = getRootElement(root);

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

@@ -10,11 +10,11 @@
       :is="isMobile ? 'v-dialog' : 'v-menu'"
       :id="instance.name"
       v-if="instance.isVisible"
-      persistent
+      :persistent="isMobile"
       class="zd-date-input__picker"
       offset-overflow
       offset-y
-      :width="isMobile ? '290px' : instance.width"
+      :width="isMobile ? '290px' : 'auto'"
       transition="scale-transition"
       :model-value="instance.showDatePicker"
       :disabled="instance.disabled || instance.readonly"
@@ -27,7 +27,6 @@
             name: instance.name + '_text-input',
             instanceObject: instance,
             autofill: false,
-            mask: getDateMask,
           }"
           v-bind="props"
         ></zd-activator-wrapper>
@@ -45,7 +44,7 @@
         :firstDayOfWeek="instance.firstDayOfWeek"
         :fullWidth="instance.fullWidth"
         :hide-weekdays="!instance.showWeek"
-        :width="isMobile ? '290px' : instance.width"
+        :width="isMobile ? '290px' : 'auto'"
         :max="instance.formatISODateValue(instance.max)"
         :min="instance.formatISODateValue(instance.min)"
         @update:modelValue="onChangeDatePicker"
@@ -115,11 +114,6 @@ button.v-btn.zd-button.v-btn--icon.v-btn--density-default.zd-date-input__helper
     .v-date-picker-controls__month-btn {
       height: 24px;
     }
-
-    .v-btn--icon {
-      height: 28px;
-      width: 28px;
-    }
   }
 
   .v-date-picker-months, .v-date-picker-years {

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

@@ -1,7 +1,7 @@
 import { DateRange } from '@zeedhi/common';
 import { DateHelper, I18n } from '@zeedhi/core';
 import { getRootElement, useCreateInputInstance } from '..';
-import { computed, defineComponent, nextTick, ref, PropType } from 'vue';
+import { defineComponent, nextTick, ref, PropType } from 'vue';
 import { ZdTextInputProps } from '../zd-text-input/ZdTextInput';
 import { useIsMobile } from '../../composables/useIsMobile';
 import { usePickerValue } from '../../composables/usePickerValue';
@@ -122,12 +122,7 @@ export default defineComponent({
 		const picker = ref<HTMLElement | null>(null);
 		const { isMobile } = useIsMobile();
 		const { pickerValue } = usePickerValue(instance);
-		useDateKeydown(instance, {
-			isMaskDelimiterFn: (_value: string, position: number) => {
-				const maskValue = instance.getMaskValue();
-				return maskValue[position] && maskValue[position] !== '#';
-			},
-		});
+		useDateKeydown(instance);
 		const onPickerMousedown = (event: Event) => {
 			event.preventDefault();
 		};
@@ -158,14 +153,6 @@ export default defineComponent({
 			});
 		};
 
-		const getDateMask = computed(() => {
-			if (instance.isFocused) {
-				const finalMask = instance.getMaskValue();
-				return finalMask;
-			}
-			return '';
-		});
-
 		const helperValuesOptionClick = (helper: string) => {
 			const value = DateHelper.getValue(helper, instance.dateFormat);
 
@@ -187,7 +174,6 @@ export default defineComponent({
 			instance,
 			root,
 			picker,
-			getDateMask,
 			onChangeDatePicker,
 			setFocus,
 			helperValuesOptionClick,

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

@@ -11,9 +11,8 @@
       v-if="instance.isVisible"
       offset-overflow
       offset-y
-      persistent
       class="zd-date-input__picker"
-      :width="isMobile ? '290px' : instance.width"
+      :width="isMobile ? '290px' : 'auto'"
       transition="scale-transition"
       :model-value="instance.showDatePicker"
       :disabled="instance.disabled || instance.readonly"
@@ -26,7 +25,6 @@
             name: instance.name + '_text-input',
             instanceObject: instance,
             autofill: false,
-            mask: getDateMask,
           }"
           v-bind="props"
         ></zd-activator-wrapper>
@@ -35,7 +33,7 @@
       <v-date-picker
         ref="picker"
         v-if="instance.isVisible"
-        v-model="datePickerValue"
+        v-model="pickerValue"
         multiple="range"
         show-adjacent-months
         :color="instance.color"
@@ -44,7 +42,7 @@
         :firstDayOfWeek="instance.firstDayOfWeek"
         :fullWidth="instance.fullWidth"
         :hide-weekdays="!instance.showWeek"
-        :width="isMobile ? '290px' : instance.width"
+        :width="isMobile ? '290px' : 'auto'"
         :max="instance.max ? instance.formatISODateRangeValue(instance.max)[0] : undefined"
         :min="instance.min ? instance.formatISODateRangeValue(instance.min)[0] : undefined"
         @update:modelValue="onChangeDatePicker"

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

@@ -1,6 +1,7 @@
 <template>
   <v-divider
     :id="instance.name"
+    ref="root"
     v-show="instance.isVisible"
     :class="[instance.cssClass]"
     :name="instance.name"

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

@@ -3,9 +3,12 @@ import { defineComponent } from 'vue';
 import { buildProps } from '../../utils';
 import { useCreateInstance, useGetMethods } from '../zd-component/ZdComponent';
 import { ZdComponentRenderProps } from '../zd-component/ZdComponentRender';
+import { HeightProps, WidthProps } from '../../propsMixins';
 
 export const ZdFooterProps = buildProps({
 	...ZdComponentRenderProps,
+	...HeightProps,
+	...WidthProps,
 	absolute: {
 		type: [Boolean, String],
 		default: false,
@@ -34,18 +37,6 @@ export const ZdFooterProps = buildProps({
 		type: Array as () => IComponentRender[],
 		default: () => [],
 	},
-	maxHeight: {
-		type: [Number, String],
-	},
-	maxWidth: {
-		type: [Number, String],
-	},
-	minHeight: {
-		type: [Number, String],
-	},
-	minWidth: {
-		type: [Number, String],
-	},
 	padless: {
 		type: [Boolean, String],
 		default: false,
@@ -54,9 +45,6 @@ export const ZdFooterProps = buildProps({
 		type: Array as () => IComponentRender[],
 		default: () => [],
 	},
-	width: {
-		type: [Number, String],
-	},
 });
 
 const FooterComponent = defineComponent({

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

@@ -85,10 +85,13 @@
 
 <script lang="ts" src="./ZdFooter.ts"></script>
 
-<style lang="scss" scoped>
+<style lang="scss">
 .zd-footer {
   &-slot{
     padding: 0;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
   }
 
   &-row {
@@ -98,6 +101,7 @@
   &-slot-left, &-slot-center, &-slot-right {
     display: flex;
     align-items: center;
+    flex: 1;
 
     > * {
       margin: 0 var(--spacing-1);

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

@@ -1,6 +1,6 @@
 import { ChildNotFoundError, ComponentRender, Form, IComponent, IFormComponent } from '@zeedhi/common';
 import { defineComponent, onMounted } from 'vue';
-import { VForm } from 'vuetify/components';
+import type { VForm } from 'vuetify/components';
 import { HeightProps } from '../../propsMixins/heightProps';
 import { WidthProps } from '../../propsMixins/widthProps';
 import { buildProps } from '../../utils';

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

@@ -36,5 +36,5 @@
 
 <script lang="ts" src="./ZdGridCell.ts"></script>
 
-<style lang="scss" scoped>
+<style lang="scss">
 </style>

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

@@ -1,6 +1,6 @@
 import { ColumnAlign } from '@zeedhi/common';
 import { IDictionary } from '@zeedhi/core';
-import { ResizeParams } from 'packages/vuetify/src/composables';
+import { ResizeParams } from '../../../composables/columnResize';
 import { PropType, defineComponent, useTemplateRef } from 'vue';
 
 export default defineComponent({

package/src/components/zd-grid-editable/cell/ZdGridEditableCell.vue

@@ -74,7 +74,7 @@
 
 <script lang="ts" src="./ZdGridEditableCell.ts"></script>
 
-<style lang="scss" scoped>
+<style lang="scss">
 .zd-grid__cell {
   .zd-grid-editable__cell-content {
     height: 100%;

package/src/components/zd-header/ZdHeader.ts

@@ -3,12 +3,15 @@ import { defineComponent, onMounted, ref } from 'vue';
 import { buildProps } from '../../utils';
 import { useCreateInstance, useGetMethods } from '../zd-component/ZdComponent';
 import { ZdComponentRenderProps } from '../zd-component/ZdComponentRender';
+import { HeightProps, WidthProps } from '../../propsMixins';
 
 /**
  * Header component
  */
 export const ZdHeaderProps = buildProps({
 	...ZdComponentRenderProps,
+	...HeightProps,
+	...WidthProps,
 	absolute: {
 		type: [Boolean, String],
 		default: false,
@@ -37,26 +40,10 @@ export const ZdHeaderProps = buildProps({
 		type: [Boolean, String],
 		default: false,
 	},
-	height: {
-		type: [Number, String],
-		default: '',
-	},
 	leftSlot: {
 		type: Array,
 		default: () => [],
 	},
-	maxHeight: {
-		type: [Number, String],
-	},
-	maxWidth: {
-		type: [Number, String],
-	},
-	minHeight: {
-		type: [Number, String],
-	},
-	minWidth: {
-		type: [Number, String],
-	},
 	padless: {
 		type: [Boolean, String],
 		default: false,
@@ -65,9 +52,6 @@ export const ZdHeaderProps = buildProps({
 		type: Array,
 		default: () => [],
 	},
-	width: {
-		type: [Number, String],
-	},
 	// Zeedhi 3.0
 	image: {
 		type: String,

package/src/components/zd-header/ZdHeader.vue

@@ -97,6 +97,8 @@
 
 <style lang="scss">
 .zd-header {
+  height: fit-content;
+
   &.theme--light.v-app-bar.v-toolbar.v-sheet {
     background-color: #fff;
   }

package/src/components/zd-icon/ZdIcon.vue

@@ -1,6 +1,7 @@
 <template>
   <v-icon
     :id="instance.name"
+    ref="root"
     v-show="instance.isVisible"
     :class="[instance.cssClass, 'zd-icon']"
     :tabindex="instance.tabStop ? '' : '-1'"

package/src/components/zd-image/ZdImage.vue

@@ -1,6 +1,7 @@
 <template>
   <span
     :id="instance.name"
+    ref="root"
     v-show="instance.isVisible"
     :name="instance.name"
     :class="['zd-image', instance.cssClass]"

package/src/components/zd-increment/ZdIncrement.vue

@@ -3,6 +3,7 @@
     :id="instance.name"
     :class="['zd-increment']"
     name="increment"
+    ref="root"
     :instance-object="instance"
   />
 </template>

package/src/components/zd-iterable/zd-iterable-page-size/ZdIterablePageSize.vue

@@ -2,6 +2,7 @@
   <zd-select
     :id="instance.name"
     name="iterable-page-size"
+    ref="root"
     :instance-object="instance"
     :cssClass="`${instance.cssClass} zd-iterable-page-size`"
   />

package/src/components/zd-iterable/zd-search/ZdSearch.vue

@@ -2,6 +2,7 @@
   <zd-text-input
     :id="instance.name"
     name="zdGridSearch"
+    ref="root"
     :cssClass="`${instance.cssClass} zd-search zd-float-right`"
     :instance-object="instance"
   >

package/src/components/zd-iterable-component-render/ZdIterableComponentRender.vue

@@ -114,7 +114,7 @@
 
 <script lang="ts" src="./ZdIterableComponentRender.ts"></script>
 
-<style lang="scss" scoped>
+<style lang="scss">
 .zd-iterable-component-render {
   width: 100%;
   display: flex;

package/src/components/zd-login/ZdLogin.vue

@@ -1,6 +1,7 @@
 <template>
   <div
     :id="instance.name"
+    ref="root"
     v-show="instance.isVisible"
     :class="[instance.cssClass, 'zd-login']"
     :name="instance.name"

package/src/components/zd-login/ZdLoginButton.vue

@@ -3,6 +3,7 @@
     :id="instance.name"
     cssClass="zd-login-button"
     name="login-button"
+    ref="root"
     :instance-object="instance"
   />
 </template>

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

@@ -185,6 +185,8 @@ const menuComponent = defineComponent({
 
 		const navigateNextItem = () => {
 			const parentComp = getParentComp();
+			if (!parentComp) return;
+
 			let currentItemIndex = findIndex(parentComp, instance.currentItem);
 			let nextItemName;
 			if (instance.showSearch && document.activeElement?.id === searchInputProps.name) {
@@ -205,13 +207,13 @@ const menuComponent = defineComponent({
 					if (instance.currentItem!.component !== 'ZdMenu') {
 						let newIndex;
 
-						if (currentItemIndex < parentComp!.items!.length - 1) {
+						if (currentItemIndex < parentComp.items!.length - 1) {
 							newIndex = currentItemIndex + 1;
 						} else {
 							newIndex = currentItemIndex;
 						}
 
-						nextItemName = parentComp!.items![newIndex].name;
+						nextItemName = parentComp.items![newIndex].name;
 					} else {
 						instance.currentItem = lastItem;
 						nextItemName = lastItemName;

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

@@ -21,7 +21,7 @@
 
 <script lang="ts" src="./ZdMenuLink.ts"></script>
 
-<style lang="scss" scoped>
+<style lang="scss">
 .zd-menu-link {
   .zd-menu-link-icon {
     margin-right: var(--zd-default-padding);

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

@@ -10,7 +10,7 @@
 
 <script lang="ts" src="./ZdMenuSeparator.ts"></script>
 
-<style lang="scss" scoped>
+<style lang="scss">
 .zd-menu-separator {
   margin-bottom: 4px;
 }

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

@@ -84,14 +84,14 @@
       cursor: -webkit-grabbing;
     }
   }
-}
 
-.zd-header-slot {
-  padding: 0px !important;
-}
+  .zd-header-slot {
+    padding: 0px !important;
+  }
 
-.zd-footer-slot {
-  padding: 0px !important;
+  .zd-footer-slot {
+    padding: 0px !important;
+  }
 }
 
 .v-dialog .v-overlay__content .v-card .v-card-text{

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

@@ -1,6 +1,6 @@
 <template>
     <zd-button
-    ref="root"
+      ref="root"
       :id="instance.name"
       class="zd-modal-close-button"
       name="modal-close-button"

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

@@ -2,6 +2,7 @@
   <zd-date-input
     :id="instance.name"
     name="month-picker"
+    ref="root"
     :instance-object="instance"
   />
 </template>

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

@@ -2,6 +2,7 @@
     <zd-text-input
       :id="instance.name"
       name="password"
+      ref="root"
       :instance-object="instance"
     />
   </template>