@zeedhi/vuetify 1.111.0 → 3.0.0

package/src/components/zd-text/ZdText.ts

@@ -0,0 +1,40 @@
+import { Text } from '@zeedhi/common';
+import { defineComponent } from 'vue';
+import { buildProps } from '../../utils';
+import { ZdComponentProps, useCreateInstance, useGetMethods } from '../zd-component/ZdComponent';
+
+export const ZdTextProps = buildProps({
+	...ZdComponentProps,
+	compile: {
+		type: [Boolean, String],
+		default: false,
+	},
+	text: {
+		type: [String, Array<string>],
+		default: '',
+	},
+	tag: {
+		type: String,
+		default: 'p',
+	},
+});
+
+const textComponent = defineComponent({
+	props: ZdTextProps,
+	inheritAttrs: false,
+	setup(props, ctx) {
+		const { instance, root } = useCreateInstance<Text>(props, ctx, Text);
+
+		const { click, mouseenter, mouseleave } = useGetMethods(instance, root);
+
+		return {
+			instance,
+			root,
+			click,
+			mouseenter,
+			mouseleave,
+		};
+	},
+});
+
+export default textComponent;

package/src/components/zd-text/ZdText.vue

@@ -0,0 +1,44 @@
+<template>
+  <div
+    :id="instance.name"
+    ref="root"
+    v-show="instance.isVisible"
+    :name="instance.name"
+    :class="['zd-text', instance.cssClass]"
+    :style="$styleObject(instance.cssStyle)"
+    @click="click"
+    @mouseenter="mouseenter($event)"
+    @mouseleave="mouseleave($event)"
+  >
+    <template v-if="Array.isArray(instance.text)">
+      <template v-for="(p, index) in instance.text">
+        <zd-render v-if="instance.compile" :template="$t(p)" :key="index" />
+        <component
+          v-else
+          v-html="$t($sanitize(p))"
+          :is="instance.tag"
+          :key="`${instance.tag}-${index}`"
+        />
+      </template>
+    </template>
+    <template v-else>
+      <zd-render v-if="instance.compile" :template="$t(instance.text)" />
+      <component
+        v-on="{ ...$attrs['dropdown-activator'] }"
+        v-else
+        v-html="$t($sanitize(instance.text))"
+        :is="instance.tag"
+      />
+    </template>
+  </div>
+</template>
+
+<script lang="ts" src="./ZdText.ts"></script>
+
+<style lang="scss">
+  .zd-text {
+    p {
+      margin-bottom: 0;
+    }
+  }
+</style>

package/src/components/zd-text-input/ZdTextInput.ts

@@ -0,0 +1,208 @@
+import { TextInput } from '@zeedhi/common';
+import {
+	ComponentPublicInstance,
+	Ref,
+	SetupContext,
+	UnwrapNestedRefs,
+	computed,
+	defineComponent,
+	nextTick,
+	onMounted,
+} from 'vue';
+import { useTheme } from 'vuetify';
+import { useMaska } from '../../composables/maska';
+import { HeightProps } from '../../propsMixins/heightProps';
+import { WidthProps } from '../../propsMixins/widthProps';
+import { buildProps } from '../../utils';
+import { getRootElement, useCreateInstance } from '../zd-component/ZdComponent';
+import { ZdInputProps, useInput } from '../zd-input/ZdInput';
+
+export const ZdTextInputProps = buildProps({
+	...ZdInputProps,
+	...HeightProps,
+	...WidthProps,
+	appendIcon: {
+		type: String,
+		default: '',
+	},
+	appendOuterIcon: {
+		type: String,
+		default: '',
+	},
+	prefix: {
+		type: String,
+		default: '',
+	},
+	prependIcon: {
+		type: String,
+		default: '',
+	},
+	prependOuterIcon: {
+		type: String,
+		default: '',
+	},
+	suffix: {
+		type: String,
+		default: '',
+	},
+	valueWithPrefix: {
+		type: [Boolean, String],
+		default: false,
+	},
+	valueWithSuffix: {
+		type: [Boolean, String],
+		default: false,
+	},
+	type: {
+		type: String,
+		default: '',
+	},
+	// Zeedhi 3.0
+	disableMaska: {
+		type: Boolean,
+		default: false,
+	},
+});
+
+const textInputComponent = defineComponent({
+	props: ZdTextInputProps,
+	inheritAttrs: false,
+	setup(props, ctx) {
+		const { instance, root } = useCreateInstance<TextInput>(props, ctx, TextInput);
+
+		const textInputScope = useTextInput(instance, ctx, root);
+		const { maskOptions } = useMaska(instance, { disable: props.disableMaska });
+
+		return {
+			...textInputScope,
+			maskOptions,
+		};
+	},
+});
+
+export default textInputComponent;
+
+export function useTextInput<TG extends TextInput>(
+	instance: UnwrapNestedRefs<TG>,
+	ctx: SetupContext,
+	root: Ref<ComponentPublicInstance | HTMLElement | null>,
+) {
+	const inputScope = useInput(instance, ctx, root);
+	const theme = useTheme();
+
+	const appendIconClick = (event: Event) => {
+		inputScope.root.value.$el.focus();
+
+		const newEvent = cloneClickEvent(event);
+
+		const rootElement = getRootElement(root);
+		instance.appendIconClick(newEvent, rootElement.value);
+	};
+
+	const prependIconClick = (event: Event) => {
+		inputScope.root.value.$el.focus();
+
+		const newEvent = cloneClickEvent(event);
+
+		const rootElement = getRootElement(root);
+		instance.prependIconClick(newEvent, rootElement.value);
+	};
+
+	const prependOuterIconClick = (event: Event) => {
+		inputScope.root.value.$el.focus();
+
+		const newEvent = cloneClickEvent(event);
+
+		const rootElement = getRootElement(root);
+		instance.prependOuterIconClick(newEvent, rootElement.value);
+	};
+
+	const appendOuterIconClick = (event: Event) => {
+		inputScope.root.value.$el.focus();
+
+		const newEvent = cloneClickEvent(event);
+
+		const rootElement = getRootElement(root);
+		instance.appendOuterIconClick(newEvent, rootElement.value);
+	};
+
+	const cloneClickEvent = (event: any) => {
+		if (!event) return undefined;
+		const clone: any = {};
+
+		/* eslint-disable guard-for-in, no-restricted-syntax */
+		for (const key in event) {
+			const desc = Object.getOwnPropertyDescriptor(event, key);
+			if (desc && (desc.get || desc.set)) Object.defineProperty(clone, key, desc);
+			else clone[key] = event[key];
+		}
+		Object.setPrototypeOf(clone, event);
+
+		clone.defaultPrevented = false;
+		return clone;
+	};
+
+	onMounted(() => {
+		const rootElement = getRootElement(root);
+		if (rootElement.value?.querySelector) {
+			const clearableButton = rootElement.value.querySelector('div.v-input__icon.v-input__icon--clear button');
+			clearableButton?.setAttribute('tabIndex', '-1');
+		}
+	});
+
+	const blur = (event: Event) => {
+		const rootElement = getRootElement(root);
+		instance.blur(event, rootElement.value);
+	};
+
+	const focus = (event: Event) => {
+		const rootElement = getRootElement(root);
+		instance.focus(event, rootElement.value);
+	};
+
+	const setBlur = () => {
+		nextTick(() => {
+			const rootElement = getRootElement(root);
+			rootElement.value?.getElementsByTagName('input')[0].blur();
+		});
+	};
+
+	const getIconClickEvents = () => {
+		const events: any = {};
+		if (instance.events.appendIconClick) {
+			events['click:appendInner'] = appendIconClick;
+		}
+		if (instance.events.appendOuterIconClick) {
+			events['click:append'] = appendOuterIconClick;
+		}
+		if (instance.events.prependOuterIconClick) {
+			events['click:prepend'] = prependOuterIconClick;
+		}
+		if (instance.events.prependIconClick) {
+			events['click:prependInner'] = prependIconClick;
+		}
+		return events;
+	};
+
+	const cssVars = computed(() => {
+		const color = instance.color;
+		return {
+			'--input-color': theme.current.value.colors[color] || color,
+		};
+	});
+
+	return {
+		...inputScope,
+		instance,
+		root,
+		cssVars,
+		blur,
+		focus,
+		appendIconClick,
+		prependIconClick,
+		appendOuterIconClick,
+		prependOuterIconClick,
+		setBlur,
+		getIconClickEvents,
+	};
+}

package/src/components/zd-text-input/ZdTextInput.vue

@@ -0,0 +1,347 @@
+<template>
+  <v-text-field
+    :id="instance.name"
+    v-show="instance.isVisible"
+    v-model="instance.displayValue"
+    v-maska="maskOptions"
+    ref="root"
+    :mask="getTimeMask"
+    validate-on-blur
+    variant="solo"
+    :class="[
+      instance.cssClass,
+      'zd-input',
+      'zd-text-input',
+      {
+        'zd-dense': instance.dense,
+        '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--suffix': !!instance.suffix,
+        'zd-text-input--prepend-icon':
+          !!instance.prependIcon && !instance.prefix,
+        'zd-text-input--append-icon': !!instance.appendIcon && !instance.suffix,
+        'zd-input-required': instance.validations.required,
+        'zd-text-input--clearable': instance.clearable,
+      },
+      'zd-text-align-' + (instance.reverse ? 'right' : instance.align),
+      instance.type === 'color' ? 'zd-color-type' : '',
+    ]"
+    :style="{
+      ...$styleObject(instance.cssStyle),
+      ...cssVars,
+      }"
+    v-on="getIconClickEvents()"
+    @click.stop="click($event)"
+    @mouseenter="mouseenter($event)"
+    @mouseleave="mouseleave($event)"
+    @focus="focus($event)"
+    @blur="blur($event)"
+    @input="input()"
+    @change="change()"
+    @keyup="keyup($event)"
+    @keydown="keydown($event)"
+    @click:clear="change()"
+    :hide-details="instance.autoHintDetails ? 'auto' : false"
+    :tabindex="instance.tabStop ? '' : '-1'"
+    v-bind="{
+      'append-inner-icon': !instance.suffix ? $getIcon(instance.appendIcon) : '',
+      'append-icon': $getIcon(instance.appendOuterIcon),
+      autocomplete: instance.autofill ? 'on' : 'off',
+      autofocus: instance.autofocus,
+      clearable: instance.clearable && !instance.readonly && !instance.disabled,
+      color: instance.color,
+      disabled: instance.disabled,
+      hint: $t(instance.hint),
+      theme: instance.theme,
+      label: instance.showLabel ? $t(instance.label) : undefined,
+      maxLength: instance.maxLength,
+      name: instance.name,
+      'persistent-hint': instance.persistentHint,
+      placeholder: $t(instance.placeholder),
+      'persistent-placeholder': true,
+      prefix: instance.prefix,
+      suffix: instance.suffix,
+      'prepend-icon': $getIcon(instance.prependOuterIcon),
+      'prepend-inner-icon': !instance.prefix
+        ? $getIcon(instance.prependIcon)
+        : '',
+      readonly: instance.readonly,
+      reverse: instance.reverse,
+      rules: instance.rules,
+      type: instance.type,
+      value: instance.displayValue,
+    }"
+  >
+  </v-text-field>
+</template>
+<script lang="ts" src="./ZdTextInput.ts"></script>
+<style lang="scss">
+.zd-text-input__affix {
+  font-weight: var(--zd-font-body2-weight);
+  color: rgb(var(--v-theme-grey-lighten-2));
+  font-size: var(--zd-font-body2-size);
+  line-height: 15px;
+  padding: 3px 0 4px 0;
+}
+.v-input--readonly {
+  .v-field {
+    background-color: rgb(var(--v-theme-grey-lighten-5))
+  }
+  &.v-theme--dark {
+    .v-field {
+      background-color: rgb(var(--v-theme-grey-darken-2))
+    }
+  }
+}
+
+.zd-text-input{
+  .v-input{
+    width: 162px;
+  } 
+}
+
+.v-text-field__prefix,
+.v-text-field__suffix {
+  min-height: unset !important;
+  padding-top: unset !important;
+  padding-bottom: unset !important;
+}
+
+.v-input.zd-text-input {
+  padding-top: var(--spacing-4);
+
+  .v-input {
+    &__prepend-outer {
+      margin-right: var(--spacing-1);
+    }
+
+    &__append-outer {
+      margin-left: var(--spacing-1);
+    }
+
+    &__prepend-outer,
+    &__append-outer {
+      margin-top: calc(var(--spacing-7) / 2 - var(--icon-size) / 2);
+      margin-bottom: calc(var(--spacing-7) / 2 - var(--icon-size) / 2);
+    }
+
+    &__append-inner,
+    &__prepend-inner {
+      padding: 0;
+      margin: 0;
+      align-self: unset;
+    }
+
+    &__prepend,
+    &__append,
+    &__append-inner,
+    &__prepend-inner {
+      .v-icon {
+        font-size: var(--icon-size);
+      }
+    }
+  }
+
+  .v-input__append {
+  margin-left: 4px;
+  width: 24px;
+  height: 24px;
+  display: flex;
+  justify-content: flex-start;
+  }
+
+  .v-input__prepend {
+  margin-right: 4px;
+  height: 24px;
+  width: 24px;
+  display: flex;
+  justify-content: flex-end;
+  }
+
+  > .v-input__control {
+    .v-field--appended {
+      padding-inline-end: 0px !important;
+    }
+    > .v-field {
+      .v-field__field {
+        position: static;
+      }
+    }
+  }
+
+  &.v-field--reverse {
+    > .v-input__control > .v-field {
+      label {
+        left: auto !important;
+      }
+    }
+  }
+
+  &:not(.v-input--dirty.zd-text-input--clearable) .v-text-field__suffix {
+    padding-inline-end: var(--spacing-2);
+  }
+
+  .v-text-field__prefix {
+    padding-left: var(--spacing-2);
+
+    &__text {
+      @extend .zd-text-input__affix;
+    }
+  }
+
+  &--suffix {
+    .v-text-field__suffix {
+      padding-inline-end: 0;
+
+      &__text {
+        @extend .zd-text-input__affix;
+      }
+    }
+  }
+
+  &--prepend-icon {
+    > .v-input__control {
+      > .v-field {
+        > .v-field__prepend-inner {
+          padding: 0;
+        }
+      }
+    }
+  }
+
+  &--append-icon {
+    > .v-input__control {
+      > .v-field {
+        > .v-field__append-inner {
+          padding: 0;
+        }
+      }
+    }
+  }
+
+  &.zd-dense {
+    .v-field {
+      padding-left: 0px;
+      &__prepend-outer,
+      &__append-outer {
+        margin-top: calc(var(--icon-size) / 2 - var(--icon-size) / 2);
+        margin-bottom: calc(var(--icon-size) / 2 - var(--icon-size) / 2);
+      }
+
+      &__append-inner,
+      &__prepend-inner {
+        .v-icon {
+          font-size: var(--icon-size-small);
+        }
+      }
+
+      &__slot {
+        .v-field__prefix {
+          height: auto;
+        }
+      }
+    }
+
+    .v-input{
+      &__prepend,
+      &__append {
+        .v-icon {
+          font-size: var(--icon-size-small);
+        }
+      }
+    }
+  }
+
+  &:not(.zd-dense) {
+    .v-input{
+      &__prepend,
+      &__append {
+        margin-top: calc(var(--spacing-7) / 2 - var(--icon-size) / 2);
+        margin-bottom: calc(var(--spacing-7) / 2 - var(--icon-size) / 2);
+      }
+    }
+
+    .v-field {
+      padding-left: 0px;
+    }
+  }
+
+  &.zd-no-border:not(.error--text) {
+    .v-field__append-inner:last-child,
+    .v-field__prepend-inner:first-child {
+      margin: 0;
+    }
+
+    > .v-input__control {
+      > .v-field {
+        input {
+          padding: 0;
+        }
+      }
+    }
+  }
+
+  &.zd-text-align-left {
+    > .v-input__control {
+      > .v-field {
+        input {
+          text-align: left;
+        }
+      }
+    }
+  }
+
+  &.zd-color-type {
+    > .v-input__control {
+      > .v-field {
+        input {
+          padding: 0;
+          cursor: pointer;
+          max-height: 22px;
+        }
+      }
+    }
+  }
+
+  &.zd-color-type:not(.zd-dense) {
+    > .v-input__control {
+      > .v-field {
+        input {
+          max-height: 34px;
+        }
+      }
+    }
+  }
+
+  &.zd-text-align-center {
+    > .v-input__control {
+      > .v-field {
+        input {
+          text-align: center;
+        }
+      }
+    }
+  }
+
+  &.zd-text-align-right {
+    > .v-input__control {
+      > .v-field {
+        input {
+          text-align: right;
+        }
+      }
+    }
+  }
+}
+
+.v-text-field {
+  margin-top: 4px;
+}
+</style>

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

@@ -0,0 +1,82 @@
+import { Textarea } from '@zeedhi/common';
+import { defineComponent } from 'vue';
+import { buildProps } from '../../utils';
+import { useCreateInstance, useGetMethods } from '../zd-component/ZdComponent';
+import { ZdTextInputProps, useTextInput } from '../zd-text-input/ZdTextInput';
+
+export const ZdTextareaProps = buildProps({
+	...ZdTextInputProps,
+	autoGrow: {
+		type: [Boolean, String],
+		default: false,
+	},
+	backgroundColor: {
+		type: String,
+		default: '',
+	},
+	clearIcon: {
+		type: String,
+		default: 'clear',
+	},
+	counter: {
+		type: [Boolean, String, Number],
+		default: undefined,
+	},
+	filled: {
+		type: [Boolean, String],
+		default: false,
+	},
+	loading: {
+		type: [Boolean, String],
+		default: false,
+	},
+	resize: {
+		type: [Boolean, String],
+		default: false,
+	},
+	rounded: {
+		type: [Boolean, String],
+		default: false,
+	},
+	rowHeight: {
+		type: [Number, String],
+		default: 24,
+	},
+	rows: {
+		type: [Number, String],
+		default: 5,
+	},
+	height: {
+		type: [String, Number],
+		default: 'auto',
+	},
+	fillHeight: {
+		type: [String, Number, Boolean],
+		default: false,
+	},
+});
+
+const textareaComponent = defineComponent({
+	props: ZdTextareaProps,
+	inheritAttrs: false,
+	setup(props, ctx) {
+		const { instance, root } = useCreateInstance<Textarea>(props, ctx, Textarea);
+
+		const { click, mouseenter, mouseleave, focus, blur } = useGetMethods(instance, root);
+
+		const textInputScope = useTextInput(instance, ctx, root);
+
+		return {
+			...textInputScope,
+			instance,
+			root,
+			click,
+			mouseenter,
+			mouseleave,
+			focus,
+			blur,
+		};
+	},
+});
+
+export default textareaComponent;