@zeedhi/vuetify 1.111.0 → 3.0.0

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

@@ -0,0 +1,28 @@
+import { Currency } from '@zeedhi/common';
+import { Config } from '@zeedhi/core';
+import { defineComponent } from 'vue';
+import { buildProps } from '../../utils/buildProps';
+import { useCreateInstance } from '../zd-component/ZdComponent';
+import { ZdNumberInputProps } from '../zd-number-input/ZdNumberInput';
+
+export const ZdCurrencyProps = buildProps({
+	...ZdNumberInputProps,
+	mask: {
+		type: [Object, Function],
+		default: () => ({ ...Config.masks.numberMask, ...Config.masks.currencyMask }),
+	},
+});
+
+const currencyComponent = defineComponent({
+	props: ZdCurrencyProps,
+	setup(props, ctx) {
+		const { instance, root } = useCreateInstance<Currency>(props, ctx, Currency);
+
+		return {
+			instance,
+			root,
+		};
+	},
+});
+
+export default currencyComponent;

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

@@ -0,0 +1,9 @@
+<template>
+  <zd-number-input
+    :id="instance.name"
+    name="currency"
+    :instance-object="instance"
+  />
+</template>
+
+<script lang="ts" src="./ZdCurrency.ts"></script>

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

@@ -0,0 +1,265 @@
+import { DateInput } from '@zeedhi/common';
+import { DateHelper, Mask } from '@zeedhi/core';
+import { computed, defineComponent, mergeProps, onMounted, ref } from 'vue';
+import { PropType } from 'vue';
+import { useDisplay } from 'vuetify';
+import { getRootElement, useCreateInputInstance, useTextInput } from '..';
+import { ZdTextInputProps } from '../zd-text-input/ZdTextInput';
+
+export const ZdDateInputProps = {
+	...ZdTextInputProps,
+	allowedDates: {
+		type: [Function, Array, String] as PropType<((date: string) => boolean) | string[] | string>,
+		default: undefined,
+	},
+	appendIcon: {
+		type: String,
+		default: 'calendar',
+	},
+	appendOuterIcon: {
+		type: String,
+		default: '',
+	},
+	autocomplete: {
+		type: [Boolean, String],
+		default: false,
+	},
+	color: {
+		type: String,
+		default: 'primary',
+	},
+	dateFormat: {
+		type: [String, Array<string>],
+	},
+	displayFormat: {
+		type: String,
+	},
+	firstDayOfWeek: {
+		type: [Number, String],
+		default: 0,
+	},
+	fullWidth: {
+		type: [Boolean, String],
+		default: false,
+	},
+	prependIcon: {
+		type: String,
+		default: '',
+	},
+	prependOuterIcon: {
+		type: String,
+		default: '',
+	},
+	showWeek: {
+		type: [Boolean, String],
+		default: false,
+	},
+	showDatePicker: {
+		type: [Boolean, String],
+		default: false,
+	},
+	width: {
+		type: [Number, String],
+		default: 248,
+	},
+	mask: {
+		type: String,
+		default: undefined,
+	},
+	inputFormat: {
+		type: String,
+	},
+	helperOptions: {
+		type: [String, Array],
+		default: () => [],
+	},
+	helperValue: {
+		type: String,
+		default: '',
+	},
+	max: {
+		type: String,
+		default: '',
+	},
+	min: {
+		type: String,
+		default: '',
+	},
+	viewMode: {
+		type: String,
+		default: 'month',
+	},
+};
+
+const dateInputComponent = defineComponent({
+	props: ZdDateInputProps,
+	inheritAttrs: false,
+	setup(props, ctx) {
+		const { instance, root } = useCreateInputInstance<DateInput>(props, ctx, DateInput);
+		const textInputScope = useTextInput(instance, ctx, root);
+		const picker = ref<HTMLElement | null>(null);
+		const display = useDisplay();
+
+		const isMobile = computed(() => {
+			return display.mobile.value;
+		});
+
+		onMounted(() => {
+			const afterKeydown = instance.events.afterKeydown;
+			const afterKeydownEvents = Array.isArray(afterKeydown) ? afterKeydown : [afterKeydown];
+
+			afterKeydownEvents.push(({ event }) => keydown(event));
+		});
+
+		const keyAllowed = (key: string) => {
+			if (key === 'ArrowRight' || key === 'ArrowLeft' || key === 'Delete' || key === 'Backspace' || key === 'Tab') {
+				return true;
+			}
+			return false;
+		};
+
+		const keydown = (event?: Event) => {
+			if (!(event instanceof KeyboardEvent)) return;
+
+			const inputEl = event.target as HTMLInputElement;
+			let start = inputEl.selectionStart;
+			const end = inputEl.selectionEnd;
+			const { value } = inputEl;
+			const numbers = /[0-9]/;
+			if (start === null || end === null) return;
+			if (!numbers.test(event.key) && !keyAllowed(event.key)) {
+				event.preventDefault();
+				return;
+			}
+			if (event.key === 'Backspace' && start === end && start > 0) {
+				while (Mask.isMaskDelimiter(inputEl.value[start - 1]) && inputEl.value[start - 1] !== ' ') {
+					start -= 1;
+				}
+				inputEl.value = `${value.slice(0, start - 1)} ${value.substring(start)}`;
+				inputEl.selectionStart = start - 1;
+				inputEl.selectionEnd = start - 1;
+				if (Mask.getValueWithoutMask(inputEl.value) === '') {
+					instance.value = '';
+				}
+				event.preventDefault();
+			} else {
+				if ((event.key === 'Backspace' || event.key === 'Delete') && (start !== 0 || end !== value.length)) {
+					const selectionText = value.substring(start, end).replace(/[0-9]/g, ' ');
+					inputEl.value = value.slice(0, start) + selectionText + value.substring(end);
+					event.preventDefault();
+				} else if ((event.key === 'Backspace' || event.key === 'Delete') && start === 0 && end === value.length) {
+					instance.value = '';
+					event.preventDefault();
+				} else {
+					if (!isPrintableKey(event.key) || Mask.isMaskDelimiter(event.key)) {
+						return;
+					}
+
+					while (Mask.isMaskDelimiter(value[start]) && value[start] !== ' ') {
+						start += 1;
+					}
+
+					const firstSlice = value.substring(0, start);
+					const secondSlice = value.substring(start + 1);
+
+					inputEl.value = firstSlice + secondSlice;
+				}
+
+				inputEl.selectionStart = start;
+				inputEl.selectionEnd = start;
+			}
+		};
+
+		const onSelectDate = (date: string, event: MouseEvent) => {
+			const rootElement = getRootElement(root);
+			instance.selectDate(date, event, rootElement.value as HTMLElement);
+		};
+
+		const isPrintableKey = (key?: string): boolean => {
+			return !!key && key.length === 1;
+		};
+
+		const onChangeDatePicker = () => {
+			if (!isMobile.value) {
+				instance.showDatePicker = false;
+			}
+			instance.validate();
+		};
+
+		const helperValuesOptionClick = (helper: string) => {
+			const value = DateHelper.getValue(helper, instance.dateFormat);
+
+			if (Array.isArray(value)) return;
+
+			const rootElement = getRootElement(root);
+			instance.value = value;
+			instance.helperValue = helper;
+
+			instance.change(undefined, rootElement.value as HTMLElement);
+
+			instance.helperValue = helper;
+			instance.updateHelperHint();
+		};
+
+		const getLabel = (name: string) => {
+			return DateHelper.getLabel(name);
+		};
+
+		const pickerValue = computed({
+			set: (value: Date) => {
+				instance.setNativeDate(value);
+				instance.change();
+			},
+			get: () => {
+				return instance.getNativeDate();
+			},
+		});
+
+		const onPickerMousedown = (event: Event) => {
+			event.preventDefault();
+		};
+
+		const getAllowedDates = (date: Date) => {
+			return instance.getAllowedDates(date);
+		};
+
+		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();
+
+			ctx.emit('month-or-year-change', newValue, type);
+		};
+
+		return {
+			...textInputScope,
+			onPickerMousedown,
+			instance,
+			root,
+			picker,
+			isMobile,
+			keydown,
+			onSelectDate,
+			isPrintableKey,
+			onChangeDatePicker,
+			keyAllowed,
+			helperValuesOptionClick,
+			getLabel,
+			mergeProps,
+			pickerValue,
+			getAllowedDates,
+			onMonthOrYearChange,
+		};
+	},
+});
+
+export default dateInputComponent;

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

@@ -0,0 +1,156 @@
+<template>
+  <zd-tag
+    :name="instance.name + '_helperspan'"
+    ref="root"
+    tag="span"
+    cssClass="zd-display-flex"
+    :grid="instance.grid"
+  >
+    <v-menu
+      :id="instance.name"
+      v-if="instance.isVisible"
+      offset-overflow
+      offset-y
+      :min-width="instance.width"
+      transition="scale-transition"
+      class="zd-date-input__picker"
+      :model-value="instance.showDatePicker"
+      :disabled="instance.disabled || instance.readonly"
+      :close-on-content-click="false"
+    >
+      <template v-slot:activator="{ props }">
+        <zd-activator-wrapper
+          :child-props="{
+            component: 'ZdTextInput',
+            name: instance.name + '_text-input',
+            instanceObject: instance,
+            autofill: false,
+          }"
+          v-bind="props"
+        ></zd-activator-wrapper>
+      </template>
+
+      <v-card
+        v-if="!instance.readonly"
+      >
+        <v-date-picker
+          ref="picker"
+          v-if="instance.isVisible"
+          v-model="pickerValue"
+          show-adjacent-months
+          :allowed-dates="getAllowedDates"
+          :color="instance.color"
+          v-model:month="month"
+          v-model:year="year"
+          v-model:view-mode="instance.viewMode"
+          :hide-header="!isMobile"
+          :firstDayOfWeek="instance.firstDayOfWeek"
+          :fullWidth="instance.fullWidth"
+          :hide-weekdays="!instance.showWeek"
+          :width="isMobile ? '290px' : instance.width"
+          :max="instance.formatISODateValue(instance.max)"
+          :min="instance.formatISODateValue(instance.min)"
+          @update:modelValue="onChangeDatePicker"
+          @mousedown="onPickerMousedown"
+          @update:month="onMonthOrYearChange($event, 'month')"
+          @update:year="onMonthOrYearChange($event, 'year')"
+        >
+          <span v-if="isMobile">
+            <zd-button
+              v-if="isMobile"
+              :name="instance.name + '-done-button'"
+              flat
+              label="OK"
+              @click="instance.showDatePicker = false; setBlur();"
+            />
+            <zd-button
+              v-if="isMobile && instance.clearable"
+              :name="instance.name + '-clear-button'"
+              flat
+              label="CLEAR"
+              @click="instance.isoValue = ''"
+            />
+          </span>
+        </v-date-picker>
+      </v-card>
+    </v-menu>
+    <zd-dropdown
+      v-if="instance.helperOptions && instance.helperOptions.length"
+      :name="instance.name + '_helperdropdown'"
+      offset-y
+      :activator="{
+        name: instance.name + '_helperbutton',
+        component: 'ZdButton',
+        iconName: 'magnify',
+        icon: true,
+        small: true,
+        tabStop: false,
+        cssClass: `zd-date-input__helper ${ instance.showLabel ? 'zd-form-input-align' : '' }`
+      }"
+    >
+      <v-list-item
+        v-for="(value, index) in instance.helperOptions"
+        :min-height="0"
+        :class="[
+          'zd-px-4',
+          'zd-py-2',
+        ]"
+        :key="index"
+        @click="helperValuesOptionClick(value)"
+      >
+        {{ getLabel(value) }}
+      </v-list-item>
+    </zd-dropdown>
+  </zd-tag>
+</template>
+
+<script lang="ts" src="./ZdDateInput.ts"></script>
+<style lang="scss">
+button.v-btn.zd-button.v-btn--icon.v-btn--density-default.zd-date-input__helper {
+  height: 24px !important;
+  width: 24px !important;
+}
+
+.zd-date-input__picker {
+  .v-date-picker-controls {
+    height: 40px;
+
+    .v-date-picker-controls__month-btn {
+      height: 24px;
+    }
+
+    .v-btn--icon {
+      height: 28px;
+      width: 28px;
+    }
+  }
+
+  .v-date-picker-months, .v-date-picker-years {
+    height: 176px;
+
+    .v-btn {
+      height: 24px;
+    }
+  }
+
+  .v-date-picker-month__days {
+    row-gap: 4px;
+  }
+
+  .v-date-picker-month__day {
+    &, button {
+      height: 24px;
+      width: 24px;
+    }
+
+    button {
+      font-size: 12px;
+    }
+  }
+
+  .v-date-picker-years__content {
+    gap: 8px 16px;
+    padding-inline: 8px;
+  }
+}
+</style>

package/src/components/zd-dialog/ZdDialog.ts

@@ -0,0 +1,39 @@
+import { Dialog, DialogService } from '@zeedhi/common';
+import { defineComponent, reactive } from 'vue';
+import { buildProps } from '../../utils';
+import { ZdComponentRenderProps } from '../zd-component/ZdComponentRender';
+
+/**
+ * Dialog component
+ */
+export const ZdDialogProps = buildProps({
+	...ZdComponentRenderProps,
+});
+
+const dialogComponent = defineComponent({
+	props: ZdDialogProps,
+	inheritAttrs: false,
+	setup() {
+		const dialogProxy = DialogService.instance;
+		const dialog = reactive(dialogProxy) as Dialog;
+		DialogService.instance = dialog;
+		dialog.assignDialogProperties({
+			name: 'fixed-dialog-instance',
+			isVisible: false,
+		});
+
+		const icons = {
+			success: 'shield-check',
+			error: 'alert-octagon',
+			info: 'info-outline',
+			warning: 'message-alert',
+		};
+
+		return {
+			dialog,
+			icons,
+		};
+	},
+});
+
+export default dialogComponent;

package/src/components/zd-dialog/ZdDialog.vue

@@ -0,0 +1,80 @@
+<template>
+    <v-dialog
+      :id="dialog.name"
+      :key="`${dialog.name}${dialog.isVisible}`"
+      v-model="dialog.isVisible"
+      :max-width="dialog.maxWidth"
+      :persistent="dialog.persistent"
+      :theme="dialog.theme"
+    >
+      <v-card class="zd-dialog">
+        <v-card-title v-if="dialog.title" class="zd-dialog-title">
+          <v-icon
+            medium
+            v-if="dialog.type !== 'normal'"
+            class="zd-dialog-icon"
+            :color="dialog.type"
+          >
+          {{ $getIcon(icons[dialog.type]) }}
+          </v-icon>
+          {{ $t(dialog.title) }}
+          <v-spacer></v-spacer>
+          <v-icon v-if="dialog.exit === true" class="exit zd-float-right" @click="dialog.hide()">{{ $getIcon('close') }}</v-icon>
+        </v-card-title>
+  
+        <v-card-text class="zd-dialog-text" v-html="$sanitize($t(dialog.text))" />
+        <v-card-actions
+          v-if="dialog.buttons && dialog.buttons.length > 0"
+          class="zd-dialog-buttons"
+        >
+          <v-spacer></v-spacer>
+          <component
+            v-for="button in dialog.buttons"
+            :key="dialog.name + JSON.stringify(button)"
+            :is="button.component"
+            v-bind="button"
+          ></component>
+        </v-card-actions>
+      </v-card>
+    </v-dialog>
+  </template>
+  
+  <script lang="ts" src="./ZdDialog.ts"></script>
+  
+  <style lang="scss">
+  .zd-dialog-title {
+    padding: var(--spacing-4);
+    padding-bottom: 0;
+    color: var(--zd-font-color);
+    font-size: var(--zd-font-title-size);
+    font-weight: var(--zd-font-title-weight);
+    display: flex;
+  }
+
+  .zd-dialog-buttons {
+    padding: var(--spacing-4);
+    padding-top: 0;
+  
+    .zd-button {
+      margin-left: var(--spacing-2);
+    }
+  }
+
+  .zd-dialog-text {
+    padding: 14px var(--spacing-4) var(--spacing-4) var(--spacing-4);
+    color: var(--zd-font-color);
+    font-size: var(--zd-font-body3-size);
+    font-weight: var(--zd-font-body3-weight);
+  }
+
+  .zd-dialog-icon {
+    width: var(--icon-size);
+    height: var(--icon-size);
+    margin-right: var(--spacing-2);
+  }
+
+  .exit {
+    color: var(--v-primary-base)
+  }
+  </style>
+  

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

@@ -0,0 +1,32 @@
+import { Divider } from '@zeedhi/common';
+import { defineComponent } from 'vue';
+import { buildProps } from '../../utils';
+import { useCreateInstance } from '../zd-component/ZdComponent';
+import { ZdComponentRenderProps } from '../zd-component/ZdComponentRender';
+
+export const ZdDividerProps = buildProps({
+	...ZdComponentRenderProps,
+	inset: {
+		type: [Boolean, String],
+		default: false,
+	},
+	vertical: {
+		type: [Boolean, String],
+		default: false,
+	},
+});
+
+const dividerComponent = defineComponent({
+	props: ZdDividerProps,
+	inheritAttrs: false,
+	setup(props, ctx) {
+		const { instance, root } = useCreateInstance<Divider>(props, ctx, Divider);
+
+		return {
+			instance,
+			root,
+		};
+	},
+});
+
+export default dividerComponent;

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

@@ -0,0 +1,14 @@
+<template>
+  <v-divider
+    :id="instance.name"
+    v-show="instance.isVisible"
+    :class="[instance.cssClass]"
+    :name="instance.name"
+    :dark="instance.dark"
+    :inset="instance.inset"
+    :light="instance.light"
+    :vertical="instance.vertical"
+  ></v-divider>
+</template>
+
+<script lang="ts" src="./ZdDivider.ts"></script>