@zeedhi/vuetify 1.112.0 → 3.0.1

package/src/components/zd-layout/ZdLayout.ts

@@ -0,0 +1,46 @@
+import { Layout } from '@zeedhi/common';
+import { defineComponent } from 'vue';
+import { buildProps } from '../../utils';
+import { ZdComponentProps, useCreateInstance, useGetMethods } from '../zd-component/ZdComponent';
+
+export const ZdLayoutProps = buildProps({
+	...ZdComponentProps,
+	fullHeight: {
+		type: [Boolean, String],
+		default: false,
+	},
+	scrollable: {
+		type: [Boolean, String],
+		default: false,
+	},
+	tag: {
+		type: String,
+		default: 'main',
+	},
+	height: {
+		type: [String, Number],
+		default: '100%',
+	},
+});
+
+const layoutComponent = defineComponent({
+	props: ZdLayoutProps,
+	inheritAttrs: false,
+	setup(props, ctx) {
+		const { instance, root } = useCreateInstance<Layout>(props, ctx, Layout);
+
+		const { click, focus, blur, mouseenter, mouseleave } = useGetMethods(instance, root);
+
+		return {
+			instance,
+			root,
+			click,
+			focus,
+			blur,
+			mouseenter,
+			mouseleave,
+		};
+	},
+});
+
+export default layoutComponent;

package/src/components/zd-layout/ZdLayout.vue

@@ -0,0 +1,22 @@
+<template>
+  <v-layout 
+    :name="instance.name"
+    :full-height="instance.fullHeight"
+    :class="instance.cssClass"
+  >
+    <component
+      v-for="(child, index) in instance.children"
+      v-bind="child"
+      :key="index"
+      :is="child.component"
+      :parent="instance"
+    ></component>
+    <v-main
+      :name="`${instance.name}-main`"
+      :scrollable="instance.scrollable"
+      :style="`height: ${instance.height}`"
+    />
+  </v-layout>
+</template>
+
+<script lang="ts" src="./ZdLayout.ts"></script>  

package/src/components/zd-list/ZdList.scss

@@ -0,0 +1,41 @@
+.zd-list {
+    overflow: auto;
+
+    &.v-list--dense .zd-list-group.v-list-item--three-line {
+      min-height: 76px;
+    }
+  
+    .v-list-item {
+      .v-list-item__icon {
+        flex-direction: column;
+        justify-content: center;
+        align-self: center;
+        height: auto;
+        margin: 4px 16px 4px 0;
+  
+        &.v-list-group__header__prepend-icon {
+          margin: 4px 16px 4px 0;
+        }
+  
+        &.v-list-group__header__append-icon {
+          margin: 4px 0 4px 16px;
+        }
+      }
+    }
+  
+    .v-list-item-title {
+      font-size: var(--zd-font-body4-size);
+      font-weight: var(--zd-font-body4-weight);
+    }
+  
+    .v-list-item-subtitle {
+      font-size: var(--zd-font-body3-size) !important;
+      font-weight: var(--zd-font-body3-weight) !important;
+    }
+  }
+.v-list-item__content {
+  width: 90%;
+}
+.v-list-item__spacer {
+  width: 5px !important;
+}

package/src/components/zd-list/ZdList.ts

@@ -0,0 +1,89 @@
+import { List } 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 ZdListProps = buildProps({
+	...ZdComponentRenderProps,
+	dense: {
+		type: [Boolean, String],
+		default: false,
+	},
+	disabled: {
+		type: [Boolean, String],
+		default: false,
+	},
+	divided: {
+		type: [Boolean, String],
+		default: false,
+	},
+	lines: {
+		type: [Boolean, String],
+		default: 'one',
+	},
+	color: {
+		type: String,
+		default: 'primary',
+	},
+	elevation: {
+		type: [Number, String],
+		default: 0,
+	},
+	openStrategy: {
+		type: [Boolean, String],
+		default: 'single',
+	},
+	height: {
+		type: [Number, String],
+		default: 'auto',
+	},
+	minHeight: {
+		type: [Number, String],
+		default: 'auto',
+	},
+	maxHeight: {
+		type: [Number, String],
+		default: 'none',
+	},
+	width: {
+		type: [Number, String],
+		default: '100%',
+	},
+	minWidth: {
+		type: [Number, String],
+		default: 'auto',
+	},
+	maxWidth: {
+		type: [Number, String],
+		default: 'none',
+	},
+	fillHeight: {
+		type: [Boolean, String],
+		default: false,
+	},
+	items: {
+		type: Array,
+		default: () => [],
+	},
+});
+
+const listComponent = defineComponent({
+	props: ZdListProps,
+	inheritAttrs: false,
+	setup(props, ctx) {
+		const { instance, root } = useCreateInstance<List>(props, ctx, List);
+
+		const isLastItem = (index: any) => {
+			return index + 1 === instance.items.length;
+		};
+
+		return {
+			instance,
+			root,
+			isLastItem,
+		};
+	},
+});
+
+export default listComponent;

package/src/components/zd-list/ZdList.vue

@@ -0,0 +1,41 @@
+<template>
+    <v-list
+      ref="root"
+      :id="instance.name"
+      v-show="instance.isVisible"
+      :class="['zd-list', instance.cssClass]"
+      :theme="instance.theme"
+      :density="instance.dense ? 'compact' : 'default'"
+      :disabled="instance.disabled"
+      :lines="instance.lines"
+      :color="instance.color"
+      :elevation="instance.elevation"
+      :openStrategy="instance.openStrategy"
+      :height="instance.height"
+      :minHeight="instance.minHeight"
+      :maxHeight="instance.maxHeight"
+      :width="instance.width"
+      :minWidth="instance.minWidth"
+      :maxWidth="instance.maxWidth"
+    >
+      <template v-if="!$slots.items">
+        <template  v-for="(item, index) in instance.items">
+          <component
+            :value="item.name"
+            :is="item.component"
+            v-bind="{...item,
+            dense: instance.dense
+            }"
+            :parent="instance"
+          />
+          <v-divider :key="`divider-${index}`" v-if="instance.divided && !isLastItem(index)"></v-divider>
+        </template>
+      </template>
+      <slot name="items"></slot>
+    </v-list>
+  </template>
+  
+  <script lang="ts" src="./ZdList.ts"></script>
+  
+  <style lang="scss" src="./ZdList.scss"></style>
+  

package/src/components/zd-list/ZdListGroup.ts

@@ -0,0 +1,43 @@
+import { ListGroup } from '@zeedhi/common';
+import { defineComponent } from 'vue';
+import { buildProps } from '../../utils';
+import { useCreateInstance, useGetMethods } from '../zd-component/ZdComponent';
+import { ZdListItemProps } from './ZdListItem';
+
+export const ZdListGroupProps = buildProps({
+	...ZdListItemProps,
+	opened: {
+		type: [Boolean, String],
+		default: false,
+	},
+	lazyLoad: {
+		type: [Boolean, String],
+		default: false,
+	},
+	items: {
+		type: [Array, String],
+		default: () => [],
+	},
+});
+
+const listGroupComponent = defineComponent({
+	props: ZdListGroupProps,
+	inheritAttrs: false,
+	setup(props, ctx) {
+		const { instance, root } = useCreateInstance<ListGroup>(props, ctx, ListGroup);
+
+		const { click, focus, blur, mouseenter, mouseleave } = useGetMethods(instance, root);
+
+		return {
+			instance,
+			root,
+			click,
+			focus,
+			blur,
+			mouseenter,
+			mouseleave,
+		};
+	},
+});
+
+export default listGroupComponent;

package/src/components/zd-list/ZdListGroup.vue

@@ -0,0 +1,88 @@
+<template>
+  <v-list-group
+    ref="root"
+    :id="instance.name"
+  >
+    <template #activator="{ props }">
+      <v-list-item
+        v-bind="props"
+        class="d-flex align-center"
+        :title="instance.title"
+        :subtitle="instance.subtitle"
+      >
+        <template #prepend>
+          <slot name="leftField"></slot>
+          <component
+            v-if="instance.leftField && !$slots.leftField"
+            :is="instance.leftField.component"
+            v-bind="instance.leftField"
+            :parent="instance"
+          ></component>
+          <v-icon
+            v-else-if="instance.prependIcon"
+            class="mr-2"
+          >
+            {{ $getIcon(instance.prependIcon) }}
+          </v-icon>
+        </template>
+
+        <template #append="{ isActive }">
+          <slot name="rightField"></slot>
+          <component
+            v-if="instance.rightField && !$slots.rightField"
+            :is="instance.rightField.component"
+            v-bind="instance.rightField"
+            :parent="instance"
+          ></component>
+          <v-icon
+            v-else
+            class="ml-2 rotate-icon"
+            :class="{ 'rotate-180': isActive }"
+          >
+            {{ $getIcon(instance.appendIcon) }}
+          </v-icon>
+        </template>
+      </v-list-item>
+    </template>
+    
+    <v-list :class="['zd-list zd-pl-4 zd-py-0 group-list']">
+      <template v-if="!$slots.items">
+        <component
+          v-for="(item) in instance.items"
+          :key="item.name"
+          :is="item.component"
+          v-bind="{...item,
+            dense:instance.dense,
+          }"
+          :parent="instance"
+        />
+      </template>
+      <slot name="items"></slot>
+    </v-list>
+  </v-list-group>
+</template>
+
+<script lang="ts" src="./ZdListGroup.ts"></script>
+
+<style lang="scss">
+.zd-list-group {
+  .group-list {
+    background-color: inherit;
+  }
+
+  &.v-list-item--two-line,
+  &.v-list-item--three-line {
+    & > .v-list-item {
+      min-height: inherit;
+    }
+  }
+}
+
+.rotate-icon {
+  transition: transform 0.3s ease;
+}
+
+.rotate-icon.rotate-180 {
+  transform: rotate(-180deg);
+}
+</style>

package/src/components/zd-list/ZdListItem.ts

@@ -0,0 +1,71 @@
+import { ListItem } 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 ZdListItemProps = buildProps({
+	...ZdComponentRenderProps,
+	appendIcon: {
+		type: String,
+		default: undefined,
+	},
+	disabled: {
+		type: [Boolean, String],
+		default: false,
+	},
+	leftField: {
+		type: Object,
+		default: undefined,
+	},
+	prependIcon: {
+		type: String,
+		default: undefined,
+	},
+	rightField: {
+		type: Object,
+		default: undefined,
+	},
+	ripple: {
+		type: [Boolean, String],
+		default: true,
+	},
+	subtitle: {
+		type: String,
+		default: undefined,
+	},
+	lines: {
+		type: [Boolean, String],
+		default: 'one',
+	},
+	title: {
+		type: String,
+		default: undefined,
+	},
+	dense: {
+		type: [Boolean, String],
+		default: false,
+	},
+});
+
+const listItemComponent = defineComponent({
+	props: ZdListItemProps,
+	inheritAttrs: false,
+	setup(props, ctx) {
+		const { instance, root } = useCreateInstance<ListItem>(props, ctx, ListItem);
+
+		const { click, focus, blur, mouseenter, mouseleave } = useGetMethods(instance, root);
+
+		return {
+			instance,
+			root,
+			click,
+			focus,
+			blur,
+			mouseenter,
+			mouseleave,
+		};
+	},
+});
+
+export default listItemComponent;

package/src/components/zd-list/ZdListItem.vue

@@ -0,0 +1,55 @@
+<template>
+    <v-list-item
+      ref="root"
+      :id="instance.name"
+      v-show="instance.isVisible"
+      :class="['zd-list-item', instance.cssClass]"
+      :disabled="instance.disabled"
+      :ripple="instance.ripple"
+      :lines="instance.lines"
+      :theme="instance.theme"
+      :title= "$t(instance.title)"
+      :subtitle="instance.subtitle"
+      :density="instance.dense ? 'compact' : 'default'"
+      @click="click($event)"
+      @focus="focus($event)"
+      @blur="blur($event)"
+      @mouseenter="mouseenter($event)"
+      @mouseleave="mouseleave($event)"
+    >
+      <template #prepend>
+        <div v-if="instance.leftField || instance.prependIcon" class="v-list-item__icon">
+          <component
+            v-if="instance.leftField"
+            :is="instance.leftField.component"
+            v-bind="instance.leftField"
+            :parent="instance"
+          ></component>
+          <v-icon v-else-if="instance.prependIcon">
+            {{ $getIcon(instance.prependIcon) }}
+          </v-icon>
+        </div>
+      </template>
+  
+      <template #append>
+        <div v-if="instance.rightField || instance.appendIcon" class="v-list-item__icon">
+          <component
+            v-if="instance.rightField"
+            :is="instance.rightField.component"
+            v-bind="instance.rightField"
+            :parent="instance"
+          ></component>
+          <v-icon v-else-if="instance.appendIcon">
+            {{ $getIcon(instance.appendIcon) }}
+          </v-icon>
+        </div>
+      </template>
+      
+    </v-list-item>
+  </template>
+  
+  <script lang="ts" src="./ZdListItem.ts"></script>
+  
+  <style lang="scss">
+  </style>
+  

package/src/components/zd-loading/ZdLoading.ts

@@ -0,0 +1,68 @@
+import { ILoading, Loading, LoadingService } from '@zeedhi/common';
+import { defineComponent, reactive } from 'vue';
+import { buildProps } from '../../utils';
+import { ZdComponentProps, useCreateInstance } from '../zd-component/ZdComponent';
+
+export const ZdLoadingProps = buildProps({
+	...ZdComponentProps,
+	image: {
+		type: String,
+		default: undefined,
+	},
+	text: {
+		type: String,
+		default: 'Loading',
+	},
+	opacity: {
+		type: [String, Number],
+		default: 0.5,
+	},
+	size: {
+		type: [String, Number],
+		default: 70,
+	},
+	loadingColor: {
+		type: String,
+		default: 'primary',
+	},
+	loadingWidth: {
+		type: [String, Number],
+		default: 7,
+	},
+	zIndex: {
+		type: [String, Number],
+		default: 1999,
+	},
+	textColor: {
+		type: String,
+		default: 'white',
+	},
+});
+const loadingComponent = defineComponent({
+	props: ZdLoadingProps,
+	inheritAttrs: false,
+	setup(props, ctx) {
+		const { root } = useCreateInstance<Loading>(props, ctx, Loading);
+
+		const loading = useLoading(Loading, props);
+		LoadingService.loading = loading;
+
+		const parseToPixel = (number: number): string => {
+			return `${number}px`;
+		};
+
+		return {
+			root,
+			loading,
+			parseToPixel,
+		};
+	},
+});
+
+export function useLoading(LoadingClass: any, props: any) {
+	const loading = reactive(new LoadingClass(props as ILoading));
+
+	return loading;
+}
+
+export default loadingComponent;

package/src/components/zd-loading/ZdLoading.vue

@@ -0,0 +1,66 @@
+  <template>
+    <div ref="root" class="test">
+    <v-overlay
+      :id="loading.name"
+      :opacity="opacity"
+      v-model="loading.isVisible"
+      persistent
+      :z-index="zIndex"
+      :style="[cssStyle]"
+      :class="[cssClass]"
+      :theme="loading.theme"
+    >
+      <div
+        v-if="loading.isVisible"
+        class="center-div zd-loading"
+      >
+        <v-progress-circular
+          v-if="!image"
+          indeterminate
+          :color="loadingColor"
+          :size="size"
+          :width="loadingWidth"
+          class="zd-loading-progress"
+        ></v-progress-circular>
+        <v-img
+          v-else
+          :src="image"
+          :width="$formatSize(size)"
+        ></v-img>
+        <div
+          v-html="$sanitize($t(loading.text))"
+          class="h3 text"
+          :style="'color: ' + textColor + ';'"
+        >
+        </div>
+      </div>
+    </v-overlay>
+    </div>
+  </template>
+  
+  <script lang="ts" src="./ZdLoading.ts"></script>
+  
+  <style lang="scss">
+  .zd-loading {
+    .text{
+    font-size: var(--zd-font-headline-size);
+    margin-top: 15px;
+    }
+    .v-overlay {
+    justify-content: center;
+    align-items: center;
+    }
+    .center-div{
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-flow: column;
+    }
+    .zd-loading .zd-loading-progress > svg,
+    .zd-loading .zd-loading-progress > svg .v-progress-circular__overlay {
+    -webkit-animation-play-state: running !important;
+    animation-play-state: running !important;
+    }
+  }
+  </style>
+  

package/src/components/zd-login/ZdLogin.ts

@@ -0,0 +1,73 @@
+import { Login } from '@zeedhi/common';
+import type { IComponentRender } 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 ZdLoginProps = buildProps({
+	...ZdComponentRenderProps,
+	backgroundStyle: {
+		type: String,
+		default: '',
+	},
+	bottomLink: {
+		type: Array as () => IComponentRender[],
+		default: () => [],
+	},
+	cardWidth: {
+		type: [String, Number],
+		default: '33%',
+	},
+	color: {
+		type: String,
+		default: '',
+	},
+	dark: {
+		type: [Boolean, String],
+		default: false,
+	},
+	layout: {
+		type: String,
+		default: 'center',
+	},
+	logo: {
+		type: String,
+		default: '',
+	},
+	logoMessage: {
+		type: String,
+		default: '',
+	},
+	poweredByImage: {
+		type: String,
+		default: '',
+	},
+	poweredByImageCard: {
+		type: String,
+		default: '',
+	},
+	flatForm: {
+		type: [Boolean, String],
+		default: false,
+	},
+	socialLogin: {
+		type: Array as () => IComponentRender[],
+		default: () => [],
+	},
+});
+
+const loginComponent = defineComponent({
+	props: ZdLoginProps,
+	inheritAttrs: false,
+	setup(props, ctx) {
+		const { instance, root } = useCreateInstance<Login>(props, ctx, Login);
+
+		return {
+			instance,
+			root,
+		};
+	},
+});
+
+export default loginComponent;