@zeedhi/vuetify 1.111.0 → 3.0.0

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

@@ -0,0 +1,144 @@
+<template>
+  <component
+    :is="instance.app ? 'v-app-bar' : 'v-toolbar'"
+    ref="root"
+    :id="instance.name"
+    v-show="instance.isVisible"
+    :name="instance.name"
+    :app="instance.app"
+    :color="instance.color"
+    :dense="instance.dense"
+    :elevation="instance.elevation"
+    :absolute="instance.absolute"
+    :fixed="instance.fixed"
+    :theme="instance.theme"
+    :max-height="instance.maxHeight"
+    :max-width="instance.maxWidth"
+    :min-height="instance.minHeight"
+    :min-width="instance.minWidth"
+    :order="instance.order"
+    :class="[
+      'zd-header',
+      instance.cssClass,
+      {
+        padless: instance.padless,
+      },
+    ]"
+    @click="click($event)"
+    @mouseenter="mouseenter($event)"
+    @mouseleave="mouseleave($event)"
+  >
+    <v-col
+      v-if="instance.namedSlotsIsVisible"
+      cols="12"
+      :class="[
+        'zd-header-slot',
+        'zd-mx-0',
+        { 'zd-header-slot-children': instance.children.length },
+      ]"
+    >
+      <span class="zd-header-slot-left" v-if="instance.leftSlot.length || !!$slots.leftSlot">
+        <template v-if="!$slots.leftSlot">
+          <span
+            v-for="(child, index) in instance.leftSlot"
+            :key="index"
+            :class="['zd-col-12', { 'zd-ml-2': index !== 0 }]"
+          >
+            <component v-bind="child" :is="child.component" :parent="instance"> </component>
+          </span>
+        </template>
+        <slot name="leftSlot"></slot>
+      </span>
+      <span
+        class="zd-header-slot-center"
+        v-if="instance.centerSlot.length || !!$slots.centerSlot"
+        ref="centerSlot"
+      >
+        <template v-if="!$slots.centerSlot">
+          <span
+            v-for="(child, index) in instance.centerSlot"
+            :key="index"
+            :class="['zd-col-12', { 'zd-ml-2': index !== 0 }]"
+          >
+            <component v-bind="child" :is="child.component" :parent="instance"> </component>
+          </span>
+        </template>
+        <slot name="centerSlot"></slot>
+      </span>
+      <span class="zd-header-slot-right" v-if="instance.rightSlot.length || !!$slots.rightSlot">
+        <template v-if="!$slots.rightSlot">
+          <span
+            v-for="(child, index) in instance.rightSlot"
+            :key="index"
+            :class="['zd-col-12', { 'zd-ml-2': index !== 0 }]"
+          >
+            <component v-bind="child" :is="child.component" :parent="instance"> </component>
+          </span>
+        </template>
+        <slot name="rightSlot"></slot>
+      </span>
+      </v-col>
+    
+      <v-col cols="12" class="pa-0">
+      <component
+      v-for="(child, index) in instance.children"
+      v-bind="child"
+      :key="index"
+      :is="child.component"
+      :parent="instance"
+      >
+      </component>
+      <slot></slot>
+    </v-col>
+  </component>
+</template>
+  
+<script lang="ts" src="./ZdHeader.ts"></script>
+
+<style lang="scss">
+.zd-header {
+  &.theme--light.v-app-bar.v-toolbar.v-sheet {
+    background-color: #fff;
+  }
+
+  &-slot {
+    display: flex;
+    padding: 0;
+    align-items: center;
+
+    &-children {
+      padding-bottom: var(--spacing-2);
+    }
+
+    &-left,
+    &-center,
+    &-right {
+      > * {
+        margin: 0 var(--spacing-1);
+        display: inline-flex;
+        vertical-align: middle;
+      }
+    }
+
+    &-center {
+      position: absolute;
+      left: 50%;
+      transform: translateX(-50%);
+    }
+
+    &-right {
+      margin-left: auto;
+    }
+  }
+
+  .v-toolbar__content {
+    padding: 4px 16px;
+  }
+
+  &.padless {
+    > .v-toolbar__content {
+      padding: 0;
+    }
+  }
+}
+</style>

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

@@ -0,0 +1,67 @@
+import { Icon } 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 ZdIconProps = buildProps({
+	...ZdComponentRenderProps,
+	color: {
+		type: String,
+		default: '',
+	},
+	dense: {
+		type: [Boolean, String],
+		default: false,
+	},
+	disabled: {
+		type: [Boolean, String],
+		default: false,
+	},
+	large: {
+		type: [Boolean, String],
+		default: false,
+	},
+	left: {
+		type: [Boolean, String],
+		default: false,
+	},
+	right: {
+		type: [Boolean, String],
+		default: false,
+	},
+	size: {
+		type: [Number, String],
+	},
+	small: {
+		type: [Boolean, String],
+		default: false,
+	},
+	tag: {
+		type: String,
+		default: 'i',
+	},
+	iconName: {
+		type: String,
+		default: '',
+	},
+});
+
+const iconComponent = defineComponent({
+	props: ZdIconProps,
+	inheritAttrs: false,
+	setup(props, ctx) {
+		const { instance, root } = useCreateInstance<Icon>(props, ctx, Icon);
+		const { click, mouseenter, mouseleave } = useGetMethods(instance, root);
+
+		return {
+			instance: instance as InstanceType<typeof Icon>,
+			root,
+			click,
+			mouseenter,
+			mouseleave,
+		};
+	},
+});
+
+export default iconComponent;

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

@@ -0,0 +1,32 @@
+<template>
+  <v-icon
+    :id="instance.name"
+    v-show="instance.isVisible"
+    :class="[instance.cssClass, 'zd-icon']"
+    :tabindex="instance.tabStop ? '' : '-1'"
+    @click="click($event)"
+    @mouseenter="mouseenter($event)"
+    @mouseleave="mouseleave($event)"
+    v-bind="{
+      color: instance.color,
+      dense: instance.dense,
+      disabled: instance.disabled,
+      large: instance.large,
+      left: instance.left,
+      right: instance.right,
+      size: instance.size,
+      small: instance.small,
+      tag: instance.tag,
+    }"
+  >
+    {{ $getIcon(instance.iconName) }}
+  </v-icon>
+</template>
+
+<script lang="ts" src="./ZdIcon.ts"></script>
+
+<style lang="scss">
+.zd-icon .v-icon {
+  font-size: var(--icon-size);
+}
+</style>

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

@@ -0,0 +1,53 @@
+import { Image } from '@zeedhi/common';
+import { defineComponent } from 'vue';
+import { HeightProps, WidthProps } from '../../propsMixins';
+import { buildProps } from '../../utils';
+import { ZdComponentProps, useCreateInstance, useGetMethods } from '../zd-component/ZdComponent';
+
+export const ZdImageProps = buildProps({
+	...ZdComponentProps,
+	...HeightProps,
+	...WidthProps,
+	alt: {
+		type: String,
+		default: '',
+	},
+	errorImagePath: {
+		type: String,
+		default: '',
+	},
+	errorImageText: {
+		type: String,
+		default: '',
+	},
+	objectFit: {
+		type: String,
+		default: '',
+	},
+	src: {
+		type: String,
+		default: '',
+	},
+});
+
+const imageComponent = defineComponent({
+	props: ZdImageProps,
+	inheritAttrs: false,
+	setup(props, ctx) {
+		const { instance, root } = useCreateInstance<Image>(props, ctx, Image);
+
+		const { click, focus, blur, mouseenter, mouseleave } = useGetMethods(instance, root);
+
+		return {
+			instance,
+			root,
+			click,
+			focus,
+			blur,
+			mouseenter,
+			mouseleave,
+		};
+	},
+});
+
+export default imageComponent;

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

@@ -0,0 +1,80 @@
+<template>
+  <span
+    :id="instance.name"
+    v-show="instance.isVisible"
+    :name="instance.name"
+    :class="['zd-image', instance.cssClass]"
+    :style="{
+      height: $formatSize(instance.height),
+      width: $formatSize(instance.width),
+      maxHeight: $formatSize(instance.maxHeight),
+      minHeight: $formatSize(instance.minHeight),
+      maxWidth: $formatSize(instance.maxWidth),
+      minWidth: $formatSize(instance.minWidth),
+      ...$styleObject(instance.cssStyle),
+    }"
+  >
+    <img
+      v-if="instance.errorImagePath && instance.validImage !== true"
+      class="zd-image-not-found"
+      v-bind="{
+        src: instance.errorImagePath,
+        alt: instance.alt,
+      }"
+      @click="click($event)"
+    />
+    <zd-text
+      :name="`${instance.name}_error`"
+      v-if="instance.validImage === false && instance.errorImageText"
+      :text="$t(instance.errorImageText)"
+      class="zd-image-error-text"
+    />
+    <img
+      v-if="!instance.errorImagePath || instance.validImage !== false"
+      v-show="!instance.errorImagePath || instance.validImage === true"
+      class="zd-image-valid"
+      @click="click($event)"
+      @mouseenter="mouseenter($event)"
+      @mouseleave="mouseleave($event)"
+      @load="instance.loadImage()"
+      @error="instance.errorImage()"
+      v-bind="{
+        src: instance.src,
+        alt: instance.alt,
+      }"
+      :style="{ objectFit: instance.objectFit }"
+    />
+  </span>
+</template>
+
+<script lang="ts" src="./ZdImage.ts"></script>
+
+<style lang="scss">
+.zd-image {
+  position: relative;
+  display: inline-block;
+  overflow: hidden;
+
+  img {
+    height: 100%;
+    width: 100%;
+
+    &.zd-image-not-found {
+      background-color: #f8f8f8;
+      object-fit: scale-down !important;
+      padding: 0.625rem;
+    }
+  }
+
+  .zd-image-error-text {
+    position: absolute;
+    bottom: var(--spacing-5);
+    width: 100%;
+    text-align: center;
+    font-style: normal;
+    font-size: 1rem;
+    line-height: var(--zd-font-title-size);
+    color: var(--zd-font-color);
+  }
+}
+</style>

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

@@ -0,0 +1,42 @@
+import { Increment } from '@zeedhi/common';
+import { defineComponent } from 'vue';
+import { buildProps } from '../../utils/buildProps';
+import { useCreateInstance, useGetMethods } from '../zd-component/ZdComponent';
+import { ZdNumberInputProps } from '../zd-number-input/ZdNumberInput';
+
+export const ZdIncrementProps = buildProps({
+	...ZdNumberInputProps,
+	maxValue: {
+		type: [Number, String],
+		default: undefined,
+	},
+	minValue: {
+		type: [Number, String],
+		default: undefined,
+	},
+	step: {
+		type: [Number, String],
+		default: 1,
+	},
+});
+
+export default defineComponent({
+	name: 'ZdIncrement',
+	props: ZdIncrementProps,
+	inheritAttrs: false,
+	setup(props, ctx) {
+		const { instance, root } = useCreateInstance<Increment>(props, ctx, Increment);
+
+		const { click, focus, blur, mouseenter, mouseleave } = useGetMethods(instance, root);
+
+		return {
+			instance,
+			root,
+			click,
+			focus,
+			blur,
+			mouseenter,
+			mouseleave,
+		};
+	},
+});

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

@@ -0,0 +1,23 @@
+<template>
+  <zd-number-input
+    :id="instance.name"
+    :class="['zd-increment']"
+    name="increment"
+    :instance-object="instance"
+  />
+</template>
+
+<script lang="ts" src="./ZdIncrement.ts"></script>
+
+<style lang="scss">
+.zd-increment.align-right {
+  > .v-input__control {
+    > .v-input__slot {
+      width: 120px;
+      input {
+        text-align: center;
+      }
+    }
+  }
+}
+</style>

package/src/components/zd-input/ZdInput.ts

@@ -0,0 +1,189 @@
+import { Component, Form, Input } from '@zeedhi/common';
+import { ComponentPublicInstance, Ref, SetupContext, UnwrapNestedRefs, defineComponent, onMounted } from 'vue';
+import { HeightProps } from '../../propsMixins/heightProps';
+import { WidthProps } from '../../propsMixins/widthProps';
+import { buildProps } from '../../utils';
+import { getRootElement, useCreateInstance, useGetMethods } from '../zd-component/ZdComponent';
+import { ZdComponentRenderProps } from '../zd-component/ZdComponentRender';
+
+export const ZdInputProps = buildProps({
+	...ZdComponentRenderProps,
+	...HeightProps,
+	...WidthProps,
+	align: {
+		type: String,
+		default: 'left',
+	},
+	alwaysShowError: {
+		type: [Boolean, String],
+		default: false,
+	},
+	autofill: {
+		type: [Boolean, String],
+		default: true,
+	},
+	clearable: {
+		type: [Boolean, String],
+		default: true,
+	},
+	color: {
+		type: String,
+		default: 'primary',
+	},
+	dense: {
+		type: [Boolean, String],
+		default: true,
+	},
+	disabled: {
+		type: [Boolean, String],
+		default: false,
+	},
+	hint: {
+		type: String,
+		default: '',
+	},
+	label: {
+		type: String,
+		default: '',
+	},
+	mask: {
+		default: '',
+	},
+	maxLength: {
+		type: [Number, String],
+		default: undefined,
+	},
+	persistentHint: {
+		type: [Boolean, String],
+		default: false,
+	},
+	placeholder: {
+		type: String,
+		default: '',
+	},
+	readonly: {
+		type: [Boolean, String],
+		default: false,
+	},
+	autoHintDetails: {
+		type: [Boolean, String],
+		default: false,
+	},
+	reverse: {
+		type: [Boolean, String],
+		default: false,
+	},
+	showBorder: {
+		type: [Boolean, String],
+		default: true,
+	},
+	showHelper: {
+		type: [Boolean, String],
+		default: true,
+	},
+	showLabel: {
+		type: [Boolean, String],
+		default: true,
+	},
+	storePath: {
+		type: String,
+		default: '',
+	},
+	validations: {
+		type: [Object, String],
+		default: {},
+	},
+	value: {
+		default: null,
+	},
+	// Zeedhi 3.0
+});
+
+const inputComponent: any = defineComponent({
+	props: ZdInputProps,
+	inheritAttrs: false,
+	setup(props, ctx) {
+		const { instance, root } = useCreateInputInstance(props, ctx, Input);
+		const inputScope = useInput(instance, ctx, root);
+
+		return {
+			...inputScope,
+			instance,
+			root,
+		};
+	},
+});
+
+export default inputComponent;
+
+type Validable = {
+	validate: (silent?: boolean) => Promise<string[]>;
+	resetValidation: () => void;
+};
+
+export function useInput<TG extends Input>(
+	instance: UnwrapNestedRefs<TG>,
+	ctx: SetupContext,
+	root: Ref<ComponentPublicInstance | HTMLElement | null>,
+): any {
+	const componentScope = useGetMethods(instance, root);
+	const { emit } = ctx;
+
+	onMounted(() => {
+		if (root.value && hasValidation(root.value)) {
+			instance.setViewValidate(root.value.validate);
+			instance.setViewResetValidation(root.value.resetValidation);
+		}
+	});
+
+	const hasValidation = (instance: unknown): instance is Validable => {
+		return (
+			typeof (instance as Validable).validate === 'function' &&
+			typeof (instance as Validable).resetValidation === 'function'
+		);
+	};
+
+	const input = () => {
+		const rootElement = getRootElement(root);
+		emit('update:value', instance.value);
+		emit('input', instance.value);
+		instance.input(undefined, rootElement.value);
+	};
+
+	const change = () => {
+		const rootElement = getRootElement(root);
+		instance.change(undefined, rootElement.value);
+	};
+
+	const keyup = (event: Event) => {
+		const rootElement = getRootElement(root);
+		instance.keyup(event, rootElement.value);
+	};
+
+	const keydown = (event: any) => {
+		const rootElement = getRootElement(root);
+		instance.keydown(event, rootElement.value);
+	};
+
+	return {
+		...componentScope,
+		input,
+		change,
+		keyup,
+		keydown,
+		// refs
+		root,
+	};
+}
+
+export function useCreateInputInstance<TG extends Input>(
+	props: Record<string, any>,
+	ctx: SetupContext,
+	ObjectClass: new (args: any) => TG,
+) {
+	const checkParentType = (parentInstance?: Component) => {
+		return !!(parentInstance && parentInstance instanceof Form);
+	};
+
+	return useCreateInstance<TG>(props, ctx, ObjectClass, checkParentType);
+}

package/src/components/zd-iterable/ZdIterable.ts

@@ -0,0 +1,40 @@
+import { IColumn } from '@zeedhi/common';
+import { Config } from '@zeedhi/core';
+import { buildProps } from '../../utils';
+import { ZdComponentRenderProps } from '../zd-component/ZdComponentRender';
+
+export const ZdIterableProps = buildProps({
+	...ZdComponentRenderProps,
+	columns: {
+		type: Array<IColumn>,
+		default() {
+			return [];
+		},
+	},
+	datasource: {
+		type: Object,
+		defaut() {
+			return {};
+		},
+	},
+	pageSizes: {
+		type: [String, Array<string>],
+		default() {
+			return ['5', '10', '25', '50'];
+		},
+	},
+	searchVisibleOnly: {
+		type: [String, Boolean],
+		default() {
+			return Config.iterableSearchVisibleOnly ?? true;
+		},
+	},
+	virtualScroll: {
+		type: [String, Boolean],
+		default: false,
+	},
+	virtualScrollCache: {
+		type: [String, Number],
+		default: 5,
+	},
+});

package/src/components/zd-iterable/ZdIterableNoData.ts

@@ -0,0 +1,23 @@
+import { defineComponent } from 'vue';
+import { useHasSlot } from '../../composables/hasSlot';
+import { useGridInstance } from '../zd-grid/composables/grid-instance';
+
+export default defineComponent({
+	props: {},
+	setup(props) {
+		const slots = useHasSlot();
+		const instance = useGridInstance();
+
+		const hasErrorSlot = !!slots.errorSlot?.hasContent;
+		const hasNoResultSlot = !!slots.noResultSlot?.hasContent;
+		const hasNoDataSlot = !!slots.noDataSlot?.hasContent;
+
+		return {
+			props,
+			instance,
+			hasErrorSlot,
+			hasNoResultSlot,
+			hasNoDataSlot,
+		};
+	},
+});