@zeedhi/vuetify 1.112.0 → 3.0.1

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

@@ -0,0 +1,69 @@
+import { Menu, MenuGroup, MenuLink } from '@zeedhi/common';
+import { defineComponent, onMounted } from 'vue';
+import { buildProps } from '../../utils';
+import { getRootElement, useCreateInstance, useGetMethods } from '../zd-component/ZdComponent';
+import { ZdComponentRenderProps } from '../zd-component/ZdComponentRender';
+import { positionTooltip } from './ZdMenu';
+
+export const ZdMenuLinkProps = buildProps({
+	...ZdComponentRenderProps,
+	route: {
+		type: String,
+		default: '',
+	},
+	label: {
+		type: String,
+		default: '',
+	},
+	icon: {
+		type: String,
+		default: '',
+	},
+	menuLevel: {
+		type: Number,
+		default: 1,
+	},
+	parentMenu: {
+		type: Menu,
+	},
+	parentGroup: {
+		type: MenuGroup,
+	},
+	miniVariant: {
+		type: Boolean,
+	},
+});
+
+const menuLinkComponent = defineComponent({
+	props: ZdMenuLinkProps,
+	inheritAttrs: false,
+	setup(props, ctx) {
+		const { instance, root } = useCreateInstance<MenuLink>(props, ctx, MenuLink);
+
+		const { click, focus, blur, mouseenter, mouseleave } = useGetMethods(instance, root);
+
+		const mouseEnter = () => {
+			const rootElement = getRootElement(root);
+			positionTooltip(instance, rootElement.value);
+		};
+
+		onMounted(() => {
+			const rootElement = getRootElement(root);
+			if (instance.isSelected() && rootElement.value) rootElement.value.scrollIntoView();
+		});
+
+		return {
+			instance,
+			root,
+			click,
+			focus,
+			blur,
+			mouseenter,
+			mouseleave,
+			// methods
+			mouseEnter,
+		};
+	},
+});
+
+export default menuLinkComponent;

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

@@ -0,0 +1,31 @@
+<template>
+  <v-list-item
+    v-show="instance.isVisible && !(miniVariant && menuLevel !== 1)"
+    :id="instance.name"
+    :to="instance.route"
+    :class="[{ selected: instance.isSelected() }, instance.cssClass]"
+    :style="{
+      ...$styleObject(instance.cssStyle),
+    }"
+    :prepend-icon="$getIcon(instance.icon)"
+    :title="$t(instance.label)"
+    :value="$t(instance.label)"
+    ref="root"
+    class="zd-menu-link"
+    link
+    @mouseenter="mouseEnter"
+    @focus="instance.focus($event)"
+    @click="instance.click($event)"
+  />
+</template>
+
+<script lang="ts" src="./ZdMenuLink.ts"></script>
+
+<style lang="scss" scoped>
+.zd-menu-link {
+  .zd-menu-link-icon {
+    margin-right: var(--zd-default-padding);
+    margin-left: 2px;
+  }
+}
+</style>

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

@@ -0,0 +1,31 @@
+import { MenuSeparator } from '@zeedhi/common';
+import { defineComponent } from 'vue';
+import { buildProps } from '../../utils';
+import { useCreateInstance, useGetMethods } from '../zd-component/ZdComponent';
+import { ZdComponentRenderProps } from '../zd-component/ZdComponentRender';
+
+export const ZdMenuSeparatorProps = buildProps({
+	...ZdComponentRenderProps,
+});
+
+const menuSeparatorComponent = defineComponent({
+	props: ZdMenuSeparatorProps,
+	inheritAttrs: false,
+	setup(props, ctx) {
+		const { instance, root } = useCreateInstance<MenuSeparator>(props, ctx, MenuSeparator);
+
+		const { click, focus, blur, mouseenter, mouseleave } = useGetMethods(instance, root);
+
+		return {
+			instance,
+			root,
+			click,
+			focus,
+			blur,
+			mouseenter,
+			mouseleave,
+		};
+	},
+});
+
+export default menuSeparatorComponent;

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

@@ -0,0 +1,17 @@
+
+<template>
+  <v-divider
+    :id="instance.name"
+    v-show="instance.isVisible"
+    class="zd-menu-separator"
+    :theme="instance.theme"
+  />
+</template>
+
+<script lang="ts" src="./ZdMenuSeparator.ts"></script>
+
+<style lang="scss" scoped>
+.zd-menu-separator {
+  margin-bottom: 4px;
+}
+</style>

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

@@ -0,0 +1,146 @@
+import { IModalGrid, Modal, ModalService } from '@zeedhi/common';
+import { RendererNode, defineComponent, reactive } from 'vue';
+
+export default defineComponent({
+	inheritAttrs: false,
+	setup() {
+		ModalService.modals = reactive([]);
+		const modals = ModalService.modals;
+		let x = 0;
+		let y = 0;
+		let modalDragged: Modal | undefined;
+		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();
+
+			const computedStyle = window.getComputedStyle(modalEl);
+			const marginTop = parseFloat(computedStyle.marginTop) || 0;
+			const marginLeft = parseFloat(computedStyle.marginLeft) || 0;
+
+			modalEl.style.top = modalEl.style.top || `${rect.top - marginTop}px`;
+			modalEl.style.left = modalEl.style.left || `${rect.left - marginLeft}px`;
+		};
+
+		const dragStart = (modal: Modal, el: HTMLElement, event: MouseEvent | TouchEvent) => {
+			if (!modal) return;
+
+			const dragHandleClass = modal.dragHandle?.replace('.', '');
+			const targetElement = event.target as HTMLElement;
+
+			if (dragHandleClass && !targetElement.classList.contains(dragHandleClass)) {
+				return;
+			}
+
+			const modalEl = el.parentElement;
+			if (!modalEl) return;
+			initializeModalPosition(modalEl);
+
+			modalDragged = modal;
+			elDragged = el;
+			const { x: startX, y: startY } = getEventCoordinates(event);
+			x = startX;
+			y = startY;
+
+			if (isTouchEvent(event)) {
+				document.addEventListener('touchmove', dragMove, { passive: false });
+				document.addEventListener('touchend', dragEnd);
+			} else {
+				document.addEventListener('mousemove', dragMove);
+				document.addEventListener('mouseup', dragEnd);
+			}
+		};
+
+		const dragMove = (event: MouseEvent | TouchEvent) => {
+			if (!modalDragged) return;
+
+			const modalEl = elDragged?.parentElement;
+			if (!modalEl) return;
+
+			event.preventDefault();
+
+			const { x: newX, y: newY } = getEventCoordinates(event);
+			const dy = newY - y;
+			const dx = newX - x;
+
+			const toNum = (str: string) => Number(str.slice(0, -2));
+			const toPx = (num: number) => `${num}px`;
+
+			modalEl.style.top = toPx(toNum(modalEl.style.top) + dy);
+			modalEl.style.left = toPx(toNum(modalEl.style.left) + dx);
+
+			x = newX;
+			y = newY;
+		};
+
+		const dragEnd = () => {
+			modalDragged = undefined;
+
+			document.removeEventListener('mousemove', dragMove);
+			document.removeEventListener('mouseup', dragEnd);
+			document.removeEventListener('touchmove', dragMove);
+			document.removeEventListener('touchend', dragEnd);
+		};
+
+		const isTouchEvent = (event: Event): event is TouchEvent => {
+			return 'touches' in event;
+		};
+
+		const getEventCoordinates = (event: MouseEvent | TouchEvent) => {
+			if (isTouchEvent(event)) {
+				return {
+					x: event.touches[0].clientX,
+					y: event.touches[0].clientY,
+				};
+			}
+			return {
+				x: event.clientX,
+				y: event.clientY,
+			};
+		};
+
+		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;
+
+			dragHandle = modal.dragHandle ? el.querySelector<HTMLElement>(modal.dragHandle) : el;
+			if (!dragHandle) return;
+
+			dragHandle.addEventListener('mousedown', dragStart.bind(null, modal, el));
+			dragHandle.addEventListener('touchstart', dragStart.bind(null, modal, el), { passive: false });
+		};
+
+		const unregisterDragEvents = (modal: Modal, el: RendererNode | null) => {
+			if (!dragHandle || !(el instanceof HTMLElement)) return;
+
+			dragHandle.removeEventListener('mousedown', dragStart.bind(null, modal, el));
+			dragHandle.removeEventListener('touchstart', dragStart.bind(null, modal, el));
+		};
+
+		return {
+			modals,
+			dragStart,
+			getContentClass,
+			registerDragEvents,
+			unregisterDragEvents,
+		};
+	},
+});

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

@@ -0,0 +1,144 @@
+<template>
+  <div
+    class="zd-modal"
+    ref="root"
+  >
+    <v-dialog
+      v-for="(modal) in modals"
+      v-model="modal.isVisible"
+      :key="modal.name"
+      :id="modal.name"
+      eager
+      :persistent="modal.persistent"
+      :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)"
+      >
+        <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, index) in modal.children"
+              v-bind="child"
+              :key="index"
+              :is="child.component"
+              :parent="modal">
+            </component>
+            <slot></slot>
+          </v-layout>
+          </v-container>
+        </v-card-text>
+      </v-card>
+    </v-dialog>
+  </div>
+</template>
+  
+<script lang="ts" src="./ZdModal.ts"></script>
+  
+<style lang="scss">
+.zd-modal {
+  &-title {
+    padding-bottom: 0px;
+  }
+
+  &-container {
+    padding: 0;
+    cursor: default;
+  }
+
+  &-flex {
+    width: 100%;
+  }
+
+  &-draggable {
+    position: relative;
+
+    &-handle {
+      cursor: grab;
+      cursor: -moz-grab;
+      cursor: -webkit-grab;
+    }
+
+    &-handle:active {
+      cursor: grabbing;
+      cursor: -moz-grabbing;
+      cursor: -webkit-grabbing;
+    }
+  }
+}
+
+.zd-header-slot {
+  padding: 0px !important;
+}
+
+.zd-footer-slot {
+  padding: 0px !important;
+}
+
+.v-dialog .v-overlay__content .v-card .v-card-text{
+  padding: 0px !important;
+}
+
+.v-overlay.v-dialog {
+  > .v-overlay__content {
+    flex-direction: row;
+    justify-content: center;
+    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>

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

@@ -0,0 +1,40 @@
+import { ModalCloseButton } from '@zeedhi/common';
+import { defineComponent } from 'vue';
+import { buildProps } from '../../utils';
+import { ZdButtonProps } from '../zd-button/ZdButton';
+import { useCreateInstance } from '../zd-component/ZdComponent';
+
+export const ZdModalCloseButtonProps = buildProps({
+	...ZdButtonProps,
+	modalName: {
+		type: String,
+		default: '',
+	},
+	iconName: {
+		type: String,
+		default: 'close',
+	},
+	flat: {
+		type: [Boolean, String],
+		default: true,
+	},
+	icon: {
+		type: [Boolean, String],
+		default: true,
+	},
+});
+
+const modalCloseButton = defineComponent({
+	props: ZdModalCloseButtonProps,
+	inheritAttrs: false,
+	setup(props, ctx) {
+		const { instance, root } = useCreateInstance<ModalCloseButton>(props, ctx, ModalCloseButton);
+
+		return {
+			instance,
+			root,
+		};
+	},
+});
+
+export default modalCloseButton;

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

@@ -0,0 +1,12 @@
+<template>
+    <zd-button
+    ref="root"
+      :id="instance.name"
+      class="zd-modal-close-button"
+      name="modal-close-button"
+      :instance-object="instance"
+    />
+  </template>
+  
+  <script lang="ts" src="./ZdModalCloseButton.ts"></script>
+  

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

@@ -0,0 +1,55 @@
+import { Month } from '@zeedhi/common';
+import { defineComponent, watch } from 'vue';
+import { buildProps } from '../../utils/buildProps';
+import { useCreateInstance } from '../zd-component/ZdComponent';
+import { ZdDateInputProps } from '../zd-date-input/ZdDateInput';
+
+export const ZdMonthProps = buildProps({
+	...ZdDateInputProps,
+	dateFormat: {
+		type: String,
+	},
+	displayFormat: {
+		type: String,
+	},
+});
+
+export default defineComponent({
+	name: 'ZdMonth',
+	props: ZdMonthProps,
+	inheritAttrs: false,
+	setup(props, ctx) {
+		const { instance, root } = useCreateInstance<Month>(props, ctx, Month);
+
+		watch(
+			() => instance.viewMode,
+			() => {
+				if (instance.viewMode === 'month') {
+					instance.viewMode = 'months';
+				}
+			},
+		);
+
+		const onMonthOrYearChange = (newValue: number, type: 'month' | 'year') => {
+			let currentDate = instance.getNativeDate();
+			if (!currentDate) {
+				currentDate = new Date();
+				currentDate.setDate(1);
+			}
+			if (type === 'month') {
+				currentDate.setMonth(newValue);
+			} else if (type === 'year') {
+				currentDate.setFullYear(newValue);
+			}
+			instance.setNativeDate(currentDate);
+			instance.change();
+			instance.showDatePicker = false;
+		};
+
+		return {
+			instance,
+			root,
+			onMonthOrYearChange,
+		};
+	},
+});

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

@@ -0,0 +1,11 @@
+<template>
+  <zd-date-input
+    :id="instance.name"
+    name="month-picker"
+    :instance-object="instance"
+    @month-or-year-change="onMonthOrYearChange"
+  />
+</template>
+
+
+<script lang="ts" src="./ZdMonth.ts"></script>

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

@@ -0,0 +1,96 @@
+import { AutoNumeric, NumberInput } from '@zeedhi/common';
+import { Config, Utils } from '@zeedhi/core';
+import { defineComponent, onBeforeUnmount, onMounted, ref } from 'vue';
+import { buildProps } from '../../utils';
+import { getRootElement, useCreateInstance } from '../zd-component/ZdComponent';
+import { ZdTextInputProps } from '../zd-text-input/ZdTextInput';
+
+export const ZdNumberInputProps = buildProps({
+	...ZdTextInputProps,
+	align: {
+		type: String,
+		default: 'right',
+	},
+	mask: {
+		type: Object,
+		default: () => Config.masks.numberMask || {},
+	},
+	value: {
+		type: [Number, String],
+		default: null,
+	},
+});
+
+const numberInputComponent = defineComponent({
+	props: ZdNumberInputProps,
+	inheritAttrs: false,
+	setup(props, ctx) {
+		const { instance, root } = useCreateInstance<NumberInput>(props, ctx, NumberInput);
+
+		const autoNumericInit = ref(false);
+
+		onMounted(() => {
+			if ((ctx as any).createdFromObject) return;
+
+			autoNumericInit.value = true;
+			const rootElement = getRootElement(root);
+			const inputRef = rootElement.value?.querySelector('input');
+
+			if (inputRef) {
+				instance.autoNumericObj = new AutoNumeric(inputRef, {
+					...instance.mask,
+					emptyInputBehavior: 'null',
+				});
+				inputRef.inputMode = 'numeric';
+
+				if (Utils.isMobile()) {
+					inputRef.addEventListener('keydown', alterMask);
+				}
+			}
+		});
+
+		onBeforeUnmount(() => {
+			const rootElement = getRootElement(root);
+			const inputRef = rootElement.value?.querySelector('input');
+
+			if (inputRef) {
+				inputRef.removeEventListener('keydown', alterMask);
+				if (autoNumericInit.value) {
+					instance.autoNumericObj.remove();
+				}
+			}
+		});
+
+		const numberInput = (value: any) => {
+			const rootElement = getRootElement(root);
+			ctx.emit('update:value', instance.parser(value));
+			ctx.emit('input', instance.parser(value));
+			instance.input(undefined, rootElement.value as HTMLElement);
+		};
+
+		const alterMask = (event: KeyboardEvent) => {
+			const rootElement = getRootElement(root);
+			const inputRef = rootElement.value?.querySelector('input');
+
+			if (!inputRef) return;
+			if (event.key !== 'Unidentified') return;
+			event.preventDefault();
+			inputRef.value += instance.mask.decimalCharacter;
+		};
+
+		const getInputAutocompleteValue = () => {
+			const isChrome = navigator.userAgent.indexOf('Chrome') > -1;
+			return isChrome ? 'one-time-code' : 'off';
+		};
+
+		return {
+			instance,
+			root,
+			numberInput,
+			alterMask,
+			getInputAutocompleteValue,
+		};
+	},
+});
+
+export default numberInputComponent;

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

@@ -0,0 +1,17 @@
+<template>
+  <zd-text-input
+    :id="instance.name"
+    v-show="instance.isVisible"
+    disable-maska
+    ref="root"
+    :class="[
+      'zd-number-input'
+    ]"
+    name="number-input"
+    :instance-object="instance"
+    v-bind="{
+      autocomplete: getInputAutocompleteValue(),
+    }"
+  />
+</template>
+<script lang="ts" src="./ZdNumberInput.ts"></script>

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

@@ -0,0 +1,27 @@
+import { Password } from '@zeedhi/common';
+import { defineComponent } from 'vue';
+import { buildProps } from '../../utils';
+import { useCreateInstance } from '../zd-component/ZdComponent';
+import { ZdTextInputProps } from '../zd-text-input/ZdTextInput';
+
+/**
+ * Password component
+ */
+export const ZdPasswordProps = buildProps({
+	...ZdTextInputProps,
+});
+
+const passwordComponent = defineComponent({
+	props: ZdPasswordProps,
+	inheritAttrs: false,
+	setup(props, ctx) {
+		const { instance, root } = useCreateInstance<Password>(props, ctx, Password);
+
+		return {
+			instance,
+			root,
+		};
+	},
+});
+
+export default passwordComponent;