@zeedhi/vuetify 1.112.0 → 3.0.0

package/src/components/zd-textarea/ZdTextarea.vue

@@ -0,0 +1,204 @@
+<template>
+  <v-textarea
+    :id="instance.name"
+    v-show="instance.isVisible"
+    v-model="instance.displayValue"
+    ref="root"
+    :name="instance.name"
+    :class="[
+      'zd-input',
+      'zd-text-input',
+      'zd-textarea',
+      {
+        'zd-clearable-append-icon': instance.clearable && instance.appendIcon,
+        'zd-clearable': instance.clearable,
+        'zd-no-border': !instance.showBorder,
+        'zd-no-helper':
+          !instance.showHelper &&
+          !(
+            instance.alwaysShowError &&
+            $refs.instance &&
+            $refs.instance.errorBucket.length
+          ),
+        'zd-no-label': !instance.showLabel,
+        'zd-text-input--prepend-icon':
+          !!instance.prependIcon && !instance.prefix,
+        'v-textarea--no-resize': !instance.resize,
+        'zd-input-required': instance.validations.required,
+      },
+      'zd-text-align-' + (instance.reverse ? 'right' : instance.align),
+    ]"
+    :style="[
+      {
+        height: instance.fillHeight || instance.cssClass.indexOf('zd-form-child') !== -1 ? undefined : $formatSize(instance.height),
+        minHeight: instance.minHeight || instance.cssClass.indexOf('zd-form-child') !== -1 ? undefined : $formatSize(instance.minHeight),
+        maxHeight: instance.maxHeight || instance.cssClass.indexOf('zd-form-child') !== -1 ? undefined : $formatSize(instance.maxHeight),
+      },
+      $styleObject(instance.cssStyle),
+      cssVars
+    ]"
+    :tabindex="instance.tabStop ? '' : '-1'"
+    v-on="getIconClickEvents()"
+    :variant="instance.filled ? 'filled' : 'solo'"
+    @click="click($event)"
+    @mouseenter="mouseenter($event)"
+    @mouseleave="mouseleave($event)"
+    @focus="focus($event)"
+    @input="input()"
+    @keydown="keydown($event)"
+    @change="change($event)"
+    @blur="blur($event)"
+    v-bind="{
+      'append-inner-icon': !instance.suffix ? $getIcon(instance.appendIcon) : '',
+      'append-icon': $getIcon(instance.appendOuterIcon),
+      autoGrow: instance.autoGrow,
+      autofocus: instance.autofocus,
+      backgroundColor: instance.backgroundColor,
+      clearIcon: $getIcon(instance.clearIcon),
+      clearable: instance.clearable && !instance.readonly && !instance.disabled,
+      color: instance.color,
+      counter: instance.counter,
+      disabled: instance.disabled,
+      hint: $t(instance.hint),
+      label: instance.showLabel ? $t(instance.label) : undefined,
+      loading: instance.loading,
+      maxLength: instance.maxLength,
+      'persistent-hint': instance.persistentHint,
+      placeholder: $t(instance.placeholder),
+      prefix: instance.prefix,
+      'prepend-icon': $getIcon(instance.prependOuterIcon),
+      'prepend-inner-icon': !instance.prefix
+        ? $getIcon(instance.prependIcon)
+        : '',
+      readonly: instance.readonly,
+      reverse: instance.reverse,
+      rounded: instance.rounded,
+      rowHeight: instance.rowHeight,
+      rows: instance.rows,
+      rules: instance.rules,
+      singleLine: true,
+      type: instance.type,
+      value: instance.value,
+    }"
+  ></v-textarea>
+</template>
+<script lang="ts" src="./ZdTextarea.ts"></script>
+
+<style lang="scss">
+.v-input.zd-textarea {
+  height: 100%;
+  overflow-x: hidden;
+
+  > .v-input__control {
+    height: 100%;
+
+    > .v-input__slot {
+      height: auto;
+      flex: 1 1 auto;
+      .v-text-field__slot{
+        height: 100%;
+        box-sizing: border-box;
+      }
+    }
+
+    > .v-text-field__details {
+      flex: 0 0 auto;
+    }
+  }
+
+  textarea {
+    padding: var(--spacing-2);
+    line-height: unset;
+  }
+
+  &.zd-text-align-left {
+    > .v-input__control {
+      > .v-input__slot {
+        input {
+          text-align: left;
+        }
+      }
+    }
+  }
+
+  &.zd-text-align-center {
+    > .v-input__control {
+      > .v-input__slot {
+        input {
+          text-align: center;
+        }
+      }
+    }
+  }
+
+  &.zd-text-align-right {
+    > .v-input__control {
+      > .v-input__slot {
+        input {
+          text-align: right;
+        }
+      }
+    }
+  }
+
+  .v-input {
+    &__prepend,
+    &__append,
+    &__append-inner,
+    &__prepend-inner {
+      .v-icon {
+        font-size: var(--icon-size);
+      }
+    }
+  }
+
+  .v-field {
+    padding-left: 0;
+    &__append-inner,
+    &__prepend-inner {
+      align-self: flex-start;
+      margin-top: var(--spacing-2);
+      padding-top: 0;
+      height: var(--icon-size-small);
+      width: var(--icon-size-small);
+      min-width: var(--icon-size-small);
+
+      .v-icon {
+        font-size: var(--icon-size-small);
+      }
+    }
+  }
+
+  &.zd-no-border:not(.error--text) {
+    .v-input__append-inner,
+    .v-input__prepend-inner {
+      margin-top: 0;
+    }
+
+    > .v-input__control {
+      > .v-input__slot {
+        textarea {
+          margin-top: 0;
+          margin-bottom: 0;
+        }
+      }
+    }
+  }
+
+  &.zd-clearable{
+    .v-field__clearable{
+      padding: 0 !important;
+      margin: 0 !important;
+    }
+  }
+}
+
+.v-input.zd-textarea .v-field__clearable .v-icon {
+  margin-top: 8px;
+}
+
+.v-textarea .v-field__input {
+  -webkit-mask-image: none;
+  mask-image: none;
+}
+</style>

package/src/components/zd-time/ZdTime.ts

@@ -0,0 +1,209 @@
+import { Time } from '@zeedhi/common';
+import { dayjs } from '@zeedhi/core';
+import { computed, defineComponent, nextTick, onMounted, ref, watch } from 'vue';
+import { useDisplay } from 'vuetify';
+import { buildProps } from '../../utils/buildProps';
+import { useCreateInstance } from '../zd-component/ZdComponent';
+import { ZdTextInputProps } from '../zd-text-input/ZdTextInput';
+
+export const ZdTimeProps = buildProps({
+	...ZdTextInputProps,
+	allowedHours: {
+		type: [Array, String],
+		default: undefined,
+	},
+	allowedMinutes: {
+		type: [Array, String],
+		default: undefined,
+	},
+	allowedSeconds: {
+		type: [Array, String],
+		default: undefined,
+	},
+	autofill: {
+		type: [Boolean, String],
+		default: false,
+	},
+	timeFormat: {
+		type: String,
+		default: 'ampm',
+	},
+	fullWidth: {
+		type: [String, Boolean],
+		default: false,
+	},
+	maxTime: {
+		type: String,
+		default: '',
+	},
+	minTime: {
+		type: String,
+		default: '',
+	},
+	scrollable: {
+		type: [String, Boolean],
+		default: false,
+	},
+	showTimePicker: {
+		type: [String, Boolean],
+		default: false,
+	},
+	useSeconds: {
+		type: [String, Boolean],
+		default: false,
+	},
+	mask: {
+		type: String,
+		default: undefined,
+	},
+	valueFormat: {
+		type: String,
+		required: false,
+	},
+	inputFormat: {
+		type: String,
+		required: false,
+	},
+	displayFormat: {
+		type: String,
+		required: false,
+	},
+});
+
+export default defineComponent({
+	name: 'ZdTime',
+	props: ZdTimeProps,
+	setup(props, ctx) {
+		const { instance, root } = useCreateInstance<Time>(props, ctx, Time);
+
+		const display = useDisplay();
+
+		const isMobile = computed(() => display.mobile.value);
+
+		const textInputInstance = ref<any>(null);
+		const pickerRef = ref<any>(null);
+
+		const convert = (value?: string | null, toPicker = true) => {
+			if (!value) return null;
+			const { valueFormat, useSeconds } = instance;
+			const pickerFormat = useSeconds ? 'HH:mm:ss' : 'HH:mm';
+			return toPicker ? dayjs(value, valueFormat).format(pickerFormat) : dayjs(value, pickerFormat).format(valueFormat);
+		};
+
+		const pickerMinTime = computed(() => convert(instance.minTime));
+		const pickerMaxTime = computed(() => convert(instance.maxTime));
+		const onChangeTimePicker = () => {
+			if (!instance.isoValue || instance.isoValue.length < 7) return;
+			const textInput = textInputInstance.value?.$refs?.input || textInputInstance.value?.$children?.[0];
+			textInput?.validate(false);
+		};
+
+		const setFocus = (selectAll = false) => {
+			nextTick(() => {
+				textInputInstance.value?.focus();
+				if (selectAll) {
+					nextTick(() => {
+						textInputInstance.value?.$el?.querySelector('input')?.select();
+					});
+				}
+			});
+		};
+
+		const getEvents = (props: Record<string, (e: Event) => void>) => {
+			const events: Record<string, (e: Event) => void> = {};
+			Object.entries(props).forEach(([key, fn]) => {
+				events[key] = (e: Event) => {
+					if (e && typeof e.stopPropagation === 'function') fn(e);
+				};
+			});
+			return events;
+		};
+
+		const onSelectTime = (time: string, event: MouseEvent) => {
+			instance.selectTime(time, event, root.value);
+		};
+
+		const onPickerMousedown = (event: Event) => {
+			event.preventDefault();
+		};
+
+		const pickerMounted = () => {
+			pickerRef.value?.$el?.addEventListener('mousedown', onPickerMousedown);
+		};
+
+		const pickerDestroyed = () => {
+			pickerRef.value?.$el?.removeEventListener('mousedown', onPickerMousedown);
+		};
+
+		const setMobileProps = (input: HTMLInputElement) => {
+			input.min = pickerMinTime.value || '';
+			input.max = pickerMaxTime.value || '';
+			input.step = instance.useSeconds ? '1' : '60';
+
+			watch(pickerMinTime, (val) => {
+				input.min = val || '';
+			});
+			watch(pickerMaxTime, (val) => {
+				input.max = val || '';
+			});
+			watch(
+				() => instance.useSeconds,
+				(val) => {
+					input.step = val ? '1' : '60';
+				},
+			);
+		};
+
+		onMounted(() => {
+			const input = textInputInstance.value?.$el?.querySelector('input');
+			if (!input) return;
+
+			input.addEventListener('blur', () => {
+				if (!isMobile.value) instance.showTimePicker = false;
+			});
+
+			if (isMobile.value) setMobileProps(input);
+
+			watch(isMobile, (newVal) => {
+				if (newVal) setMobileProps(input);
+			});
+		});
+
+		const handleOkClick = (event?: MouseEvent) => {
+			instance.showTimePicker = false;
+			if (instance.events && typeof instance.events.click === 'function') {
+				instance.events.click({ component: instance, event });
+			}
+		};
+
+		const handleClearClick = (event?: MouseEvent) => {
+			instance.isoValue = '';
+			if (instance.events && typeof instance.events.click === 'function') {
+				instance.events.click({ component: instance, event });
+			}
+		};
+
+		const setBlur = () => {
+			textInputInstance.value?.blur();
+		};
+
+		return {
+			root,
+			textInputInstance,
+			pickerRef,
+			instance,
+			onChangeTimePicker,
+			setFocus,
+			pickerMinTime,
+			pickerMaxTime,
+			onSelectTime,
+			pickerMounted,
+			pickerDestroyed,
+			getEvents,
+			isMobile,
+			handleOkClick,
+			handleClearClick,
+			setBlur,
+		};
+	},
+});

package/src/components/zd-time/ZdTime.vue

@@ -0,0 +1,65 @@
+<template>
+  <div
+    :id="instance.name"
+    class="zd-time"
+  >
+    <v-menu
+      v-show="instance.isVisible"
+      :id="instance.name"
+      offset-overflow
+      offset-y
+      :is="isMobile ? 'v-dialog' : 'span'"
+      content-class="zd-mx-0"
+      min-width="320px"
+      transition="scale-transition"
+      :model-value="instance.showTimePicker"
+      :theme="instance.theme"
+      :disabled="instance.disabled || instance.readonly"
+      :close-on-content-click="false"
+      ref="timeMenu"
+    >
+      <template v-slot:activator="{ props }">
+        <zd-activator-wrapper
+          :child-props="{
+            component: 'ZdTextInput',
+            name: instance.name + '_text-input',
+            instanceObject: instance,
+            autofill: false,
+            events: getEvents(props)
+          }"
+          v-bind="props"
+        ></zd-activator-wrapper>
+      </template>
+
+      <v-time-picker
+        ref="picker"
+        v-model="instance.isoValue"
+        v-show="instance.isVisible"
+        :allowed-hours="instance.allowedHours"
+        :allowed-minutes="instance.allowedMinutes"
+        :allowed-seconds="instance.allowedSeconds"
+        :max="pickerMaxTime || undefined"
+        :min="pickerMinTime || undefined"
+        :name="instance.name"
+        :theme="instance.theme"
+        @click:time="onSelectTime"
+        @change="onChangeTimePicker()"
+        :format="instance.timeFormat === '24hr' ? '24hr' : 'ampm'"
+        v-bind="{
+          color: instance.color,
+          fullWidth: instance.fullWidth,
+          useSeconds: instance.useSeconds,
+          scrollable: instance.scrollable,
+          width: '320px'
+        }"
+      >
+      </v-time-picker>
+    </v-menu>
+  </div>
+</template>
+
+<script lang="ts" src="./ZdTime.ts"></script>
+
+<style lang="scss">
+
+</style>

package/src/components/zd-toggleable/ZdToggleable.ts

@@ -0,0 +1,16 @@
+import { buildProps } from '../../utils';
+import { ZdInputProps } from '../zd-input/ZdInput';
+
+export const ZdToggleableProps = buildProps({
+	...ZdInputProps,
+
+	falseValue: {
+		type: [Boolean, String, Number, Object],
+		default: false,
+	},
+
+	trueValue: {
+		type: [Boolean, String, Number, Object],
+		default: true,
+	},
+});

package/src/components/zd-tooltip/ZdTooltip.ts

@@ -0,0 +1,97 @@
+import { Tooltip } from '@zeedhi/common';
+import { computed, defineComponent, mergeProps } from 'vue';
+import { buildProps } from '../../utils';
+import ZdActivatorWrapper from '../zd-activator-wrapper/ZdActivatorWrapper.vue';
+import { useCreateInstance } from '../zd-component/ZdComponent';
+import { ZdComponentRenderProps } from '../zd-component/ZdComponentRender';
+
+export const ZdTooltipProps = buildProps({
+	...ZdComponentRenderProps,
+	bottom: {
+		type: [Boolean, String],
+		default: false,
+	},
+	color: {
+		type: String,
+		default: '',
+	},
+	disabled: {
+		type: [Boolean, String],
+		default: false,
+	},
+	label: {
+		type: String,
+		default: '',
+	},
+	left: {
+		type: [Boolean, String],
+		default: false,
+	},
+	maxWidth: {
+		type: [Number, String],
+		default: undefined,
+	},
+	minWidth: {
+		type: [Number, String],
+		default: undefined,
+	},
+	nudge: {
+		type: [Number, String],
+		default: 10,
+	},
+	openOnClick: {
+		type: [Boolean, String],
+		default: false,
+	},
+	openOnFocus: {
+		type: [Boolean, String],
+		default: true,
+	},
+	openOnHover: {
+		type: [Boolean, String],
+		default: true,
+	},
+	right: {
+		type: [Boolean, String],
+		default: false,
+	},
+	top: {
+		type: [Boolean, String],
+		default: false,
+	},
+	// Zeedhi 3.0
+});
+
+const tooltipComponent = defineComponent({
+	props: ZdTooltipProps,
+	inheritAttrs: false,
+	components: {
+		ZdActivatorWrapper,
+	},
+	setup(props, ctx) {
+		const { instance, root } = useCreateInstance<Tooltip>(props, ctx, Tooltip);
+
+		const getLocation = (): any => {
+			if (instance.right) return 'right';
+
+			if (instance.left) return 'left';
+
+			if (instance.top) return 'top';
+
+			if (instance.bottom) return 'bottom';
+		};
+
+		const location = computed(() => {
+			return getLocation();
+		});
+
+		return {
+			instance,
+			root,
+			location,
+			mergeProps,
+		};
+	},
+});
+
+export default tooltipComponent;

package/src/components/zd-tooltip/ZdTooltip.vue

@@ -0,0 +1,34 @@
+<template>
+  <v-tooltip
+    :id="instance.name"
+    content-class="zd-tooltip"
+    :text="$t(instance.label)"
+    :location="location"
+    :disabled="instance.disabled || !instance.label"
+    :open-on-click="instance.openOnClick"
+    :open-on-focus="instance.openOnFocus"
+    :open-on-hover="instance.openOnHover"
+    :maxWidth="instance.maxWidth"
+    :minWidth="instance.minWidth"
+    :offset="instance.nudge"
+    :style="instance.cssStyle"
+  >
+    <template v-slot:activator="{ props }">
+      <zd-activator-wrapper
+        v-for="(child, index) in instance.children"
+        :key="index"
+        v-bind="mergeProps(props, $attrs)"
+        :child-props="child"
+        :parent="instance.parent"
+      ></zd-activator-wrapper>
+    </template>
+  </v-tooltip>
+</template>
+
+<script lang="ts" src="./ZdTooltip.ts"></script>
+
+<style lang="scss">
+.zd-tooltip.v-overlay__content {
+  opacity: 0.9;
+}
+</style>