@zeedhi/vuetify 1.112.0 → 3.0.1

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

@@ -0,0 +1,303 @@
+<template>
+  <div
+    :id="instance.name"
+    v-show="instance.isVisible"
+    :class="[instance.cssClass, 'zd-login']"
+    :name="instance.name"
+    :style="instance.cssStyle"
+  >
+
+    <div
+      class="container"
+      :class="[
+        'layout',
+        'align-center',
+        'position-'+instance.layout,
+        'zd-login-content'
+      ]"
+      :style="{
+        'background': !instance.flatForm || instance.layout === 'center'? instance.backgroundStyle:'',
+        'flex-direction': instance.flatForm && instance.layout === 'right'? 'row-reverse':'row',
+      }"
+    >
+      <v-card
+        :class="[
+          'zd-login-card',
+          (instance.flatForm ? 'zd-login-flat-card':''),
+        ]"
+        :width="instance.cardWidth"
+        :dark="instance.dark"
+        :light="instance.light"
+      >
+        <div class="zd-login-toolbar">
+          <img class="zd-login-logo" :src="instance.logo" />
+          <div class="zd-login-message">{{ $t(instance.logoMessage) }}</div>
+        </div>
+        <v-form>
+          <component
+            :class="[
+              'zd-login-card-content'
+              ]"
+            v-for="(child, index) in instance.children"
+            v-bind="child"
+            :key="index"
+            :is="child.component"
+            :parent="instance"
+          ></component>
+          <slot></slot>
+        </v-form>
+        <div class="zd-login-card-actions" v-if="instance.socialLogin.length">
+          <div
+            class="zd-login-social-buttons"
+            v-for="(child, index) in instance.socialLogin"
+            :key="index"
+          >
+            <img :src="child.icon" />
+          </div>
+        </div>
+
+        <div v-if="instance.bottomLink.length && !$slots.bottomLink" class="zd-login-sign-in">
+          <component
+            v-for="(child, index) in instance.bottomLink"
+            v-bind="child"
+            :key="index"
+            :is="child.component"
+            :parent="instance"
+          ></component>
+        </div>
+        <slot name="bottomLink"></slot>
+        <img
+          v-if="instance.poweredByImageCard"
+          :class="['zd-login-powered-by-card', !instance.poweredByImage ? 'zd-login-powered-by-card-always-visible' : '']"
+          :src="instance.poweredByImageCard"
+        />
+      </v-card>
+      <img
+        v-if="instance.poweredByImage"
+        class="zd-login-powered-by"
+        :src="instance.poweredByImage"
+      />
+
+    <div
+      v-if="instance.backgroundStyle && instance.flatForm && instance.layout !== 'center'"
+      :class="[
+      'background-div',
+      ]"
+      :style="[
+        {
+          'width': `calc(100% - ${instance.cardWidth})`,
+          'background': instance.backgroundStyle,
+        }
+      ]
+      ">
+</div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" src="./ZdLogin.ts"></script>
+
+<style lang="scss">
+.container{
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+}
+.zd-login {
+  height: 100vh;
+
+  .zd-login-content {
+    height: 100%;
+    background-size: cover !important;
+  }
+
+  .zd-login-card {
+    z-index: 1;
+  }
+
+  .zd-login-flat-card{
+    margin: 0px !important;
+    height: 100%;
+    border-radius: 0px !important;
+  }
+
+  .zd-login-background-image{
+    z-index: 0;
+  }
+
+  .background-div{
+    background-position-x: left !important;
+    background-size: cover !important;
+    height: 100%;
+  }
+
+  .zd-login-powered-by {
+    z-index: 1;
+  }
+
+  .zd-login-powered-by-card {
+    z-index: 1;
+  }
+
+  @media screen and (max-width: 730px) {
+      div.zd-login-card {
+        border-radius: unset;
+        width: 100% !important;
+        height: 90%;
+      }
+
+      .zd-login-flat-card{
+        margin: 0px !important;
+        height: 100% !important;
+        border-radius: 0px !important;
+      }
+
+      .flex {
+        height: 100%;
+      }
+      .background-div{
+        position: absolute;
+      }
+    }
+
+  @media screen and (max-width: 960px) {
+    .zd-login-powered-by {
+      display: none;
+    }
+    .zd-login-powered-by-card {
+      display: block;
+    }
+  }
+
+  .zd-login-button {
+    width: 100%;
+  }
+
+  .zd-login-powered-by-card-always-visible {
+    display: block !important;
+  }
+
+  .v-card {
+    box-shadow: none;
+    margin: 20px;
+  }
+
+  .position-left {
+    justify-content: flex-start;
+    .zd-login-powered-by {
+      position: absolute;
+      bottom: 48px;
+      right: 48px;
+    }
+    .v-sheet {
+      border-radius: 0px;
+    }
+    .zd-login-background-image{
+      position: absolute;
+      right: 0px;
+      height: 100%;
+    }
+  }
+
+  .position-right {
+    width: unset;
+    justify-content: flex-end;
+    .zd-login-powered-by {
+      position: absolute;
+      bottom: 48px;
+      left: 48px;
+    }
+    .v-sheet {
+      border-radius: 0px;
+    }
+    .zd-login-background-image {
+      position: absolute;
+      left: 0px;
+      height: 100%;
+    }
+  }
+
+  .position-center {
+    justify-content: center;
+    .zd-login-powered-by {
+      position: absolute;
+      bottom: 48px;
+      left: 48px;
+    }
+
+    .backgroud-div{
+      position: absolute !important;
+    }
+
+    .zd-login-background-image {
+      position: absolute;
+      height: 100%;
+    }
+  }
+
+  .zd-login-powered-by-card {
+    padding: 10px;
+    display: none;
+    margin-left: auto;
+    margin-right: auto;
+  }
+
+  &-card {
+    height: 90%;
+    padding: 40px;
+    background-color: #fff;
+
+    .zd-login-message {
+      font-size: var(--zd-font-headline-size);
+      font-weight: var(--zd-font-headline-weight);
+      color: var(--zd-font-default-color);
+      line-height: 24px;
+      margin-bottom: 20px;
+    }
+
+    .zd-login-logo {
+      margin-bottom: 20px;
+    }
+
+    .zd-login-toolbar {
+      .v-card__title {
+        padding: 0;
+        align-items: center;
+        display: flex;
+        flex-wrap: wrap;
+      }
+    }
+
+    .zd-login-card-actions {
+      display: flex;
+      justify-content: center;
+      flex-wrap: wrap;
+      margin-top: 20px;
+      margin-bottom: 20px;
+    }
+
+    .zd-login-sign-in {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      border-top: solid var(--regular) #f5f5f5;
+      padding-top: 10px;
+      text-align: center;
+      font-size: var(--zd-font-body1-size);
+    }
+
+    .zd-login-social-buttons {
+      padding: 10px;
+      > img {
+        border: solid var(--regular) #e0e0e0;
+        border-radius: 50%;
+        vertical-align: top;
+        position: relative;
+        cursor: pointer;
+        align-items: center;
+        align-content: center;
+      }
+    }
+  }
+}
+</style>

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

@@ -0,0 +1,32 @@
+import { LoginButton } from '@zeedhi/common';
+import { defineComponent } from 'vue';
+import { buildProps } from '../../utils';
+import { ZdButtonProps } from '../zd-button/ZdButton';
+import { useCreateInstance } from '../zd-component/ZdComponent';
+
+export const ZdLoginButtonProps = buildProps({
+	...ZdButtonProps,
+	authUrl: {
+		type: String,
+		default: '',
+	},
+	grantType: {
+		type: String,
+		default: 'password',
+	},
+});
+
+const loginButtonComponent = defineComponent({
+	props: ZdLoginButtonProps,
+	inheritAttrs: false,
+	setup(props, ctx) {
+		const { instance, root } = useCreateInstance<LoginButton>(props, ctx, LoginButton);
+
+		return {
+			instance,
+			root,
+		};
+	},
+});
+
+export default loginButtonComponent;

package/src/components/zd-login/ZdLoginButton.vue

@@ -0,0 +1,10 @@
+<template>
+  <zd-button
+    :id="instance.name"
+    cssClass="zd-login-button"
+    name="login-button"
+    :instance-object="instance"
+  />
+</template>
+
+<script lang="ts" src="./ZdLoginButton.ts"></script>

package/src/components/zd-main/ZdMain.ts

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

package/src/components/zd-main/ZdMain.vue

@@ -0,0 +1,18 @@
+<template>
+  <v-main
+    :name="instance.name"
+    :scrollable="instance.scrollable"
+    :style="$styleObject(instance.cssStyle)"
+  >
+    <component
+      v-for="(child, index) in instance.children"
+      v-bind="child"
+      :key="index"
+      :is="child.component"
+      :parent="instance"
+    ></component>
+  </v-main>
+</template>
+  
+<script lang="ts" src="./ZdMain.ts"></script>
+  

package/src/components/zd-master-detail/ZdMasterDetail.ts

@@ -0,0 +1,53 @@
+import { MasterDetail } from '@zeedhi/common';
+import { IDictionary } from '@zeedhi/core';
+import { PropType, defineComponent } from 'vue';
+import { buildProps } from '../../utils';
+import { useCreateInstance, useGetMethods } from '../zd-component/ZdComponent';
+import { ZdComponentRenderProps } from '../zd-component/ZdComponentRender';
+
+export const ZdMasterDetailProps = buildProps({
+	...ZdComponentRenderProps,
+	config: {
+		type: [Object, String] as PropType<IDictionary<any> | string>,
+		default: () => ({}),
+	},
+	lazyRelate: {
+		type: [Boolean, String] as PropType<boolean | string>,
+		default: false,
+	},
+	height: {
+		type: [Number, String] as PropType<number | string>,
+		default: 'auto',
+	},
+	minHeight: {
+		type: [Number, String] as PropType<number | string>,
+		default: 'auto',
+	},
+	maxHeight: {
+		type: [Number, String] as PropType<number | string>,
+		default: 'none',
+	},
+	fillHeight: {
+		type: [Boolean, String] as PropType<boolean | string>,
+		default: false,
+	},
+});
+
+const masterDetailComponent = defineComponent({
+	props: ZdMasterDetailProps,
+	inheritAttrs: false,
+	setup(props, ctx) {
+		const { instance, root } = useCreateInstance<MasterDetail>(props, ctx, MasterDetail);
+		const { click, mouseenter, mouseleave } = useGetMethods(instance, root);
+
+		return {
+			instance,
+			root,
+			click,
+			mouseenter,
+			mouseleave,
+		};
+	},
+});
+
+export default masterDetailComponent;

package/src/components/zd-master-detail/ZdMasterDetail.vue

@@ -0,0 +1,31 @@
+<template>
+  <div
+    ref="root"
+    :id="instance.name"
+    v-show="instance.isVisible"
+    :style="{
+      height: $formatSize(instance.height),
+      maxHeight: $formatSize(instance.maxHeight),
+      minHeight: $formatSize(instance.minHeight),
+      ...$styleObject(instance.cssStyle),
+    }"
+    @click="click"
+    @mouseenter="mouseenter"
+    @mouseleave="mouseleave"
+  >
+    <component
+      v-for="(child, index) in instance.children"
+      :is="child.component"
+      :key="index"
+      :parent="instance"
+      :theme="instance.theme"
+      v-bind="child"
+    />
+    <slot />
+  </div>
+</template>
+
+<script lang="ts" src="./ZdMasterDetail.ts"></script>
+
+<style lang="scss">
+</style>