@zeedhi/vuetify 1.112.0 → 3.0.1

package/src/components/zd-button/ZdButton.vue

@@ -0,0 +1,135 @@
+<template>
+  <v-btn
+    data-test="button"
+    ref="root"
+    :id="instance.name"
+    v-show="instance.isVisible"
+    :class="[instance.cssClass, 'zd-button',
+      { 'zd-button-fab': instance.fab }
+    ]"
+    :name="instance.name"
+    :style="{
+      ...$styleObject(instance.cssStyle),
+      ...getCssPositioning(),
+    }"
+    :tabindex="instance.tabStop ? '' : '-1'"
+    @click="click($event)"
+    @focus="focus($event)"
+    @blur="blur($event)"
+    @mouseenter="mouseenter($event)"
+    @mouseleave="mouseleave($event)"
+    @mouseover="mouseover($event)"
+    @mouseout="mouseout($event)"
+    v-bind="{
+      active: instance.active,
+      appendIcon: getIcon('append'),
+      block: instance.block,
+      border: instance.border,
+      color: instance.color,
+      density: instance.density,
+      disabled: instance.disabled,
+      elevation: instance.elevation,
+      flat: instance.flat,
+      href: instance.href,
+      icon: (instance.icon || instance.fab) && $getIcon(instance.iconName),
+      loading: instance.loading,
+      position: getPosition(),
+      prependIcon: getIcon('prepend'),
+      replace: instance.replace,
+      ripple: instance.ripple,
+      rounded: getRounded(),
+      selectedClass: instance.selectedClass,
+      size: getSize(),
+      stacked: instance.stacked,
+      tag: instance.tag,
+      to: instance.to,
+      variant: getVariant(),
+      width: instance.width,
+      theme: instance.theme,
+    }"
+  >
+    <template #default v-if="instance.label">
+      {{ $t(instance.label) }}
+    </template>
+  </v-btn>
+</template>
+
+<script lang="ts" src='./ZdButton.ts' />
+
+<style lang="scss" scoped>
+.v-btn.zd-button,
+a.v-btn.zd-button,
+button.v-btn.zd-button {
+  letter-spacing: unset;
+  text-transform: none;
+
+  &:not(.zd-button-fab) {
+    box-shadow: none;
+  }
+
+  &.zd-button-fab {
+    &.v-btn--icon.v-btn--density-default {
+      width: calc(var(--v-btn-height) + 12px) !important;
+      height: calc(var(--v-btn-height) + 12px) !important;
+    }
+  }
+
+  &.v-size--default {
+    min-width: 0;
+  }
+
+  &.v-btn--icon.v-btn--density-default {
+    width: var(--v-btn-height) !important;
+    height: var(--v-btn-height) !important;
+  }
+
+  &.v-size--default {
+    min-height: var(--spacing-6);
+
+    &.v-btn--icon {
+      min-width: var(--spacing-6);
+    }
+  }
+
+  &.v-size--small:not(.v-btn--fab) {
+    height: auto;
+    width: auto;
+    min-height: 24px;
+    padding: 0 var(--spacing-4);
+
+    &.v-btn--icon {
+      padding: 0;
+      min-width: 24px;
+    }
+  }
+
+  &.v-size--large:not(.v-btn--fab) {
+    height: auto;
+    min-height: 56px;
+    padding: 0 var(--spacing-4);
+
+    &.v-btn--icon {
+      min-width: 56px;
+    }
+  }
+
+  &.v-btn--outlined {
+    border: var(--regular) solid;
+  }
+
+  .v-btn__content {
+    .v-icon {
+      height: var(--icon-size);
+      width: var(--icon-size);
+
+      &--left {
+        margin-right: var(--spacing-1);
+      }
+
+      &--right {
+        margin-left: var(--spacing-1);
+      }
+    }
+  }
+}
+</style>

package/src/components/zd-button-group/ZdButtonGroup.ts

@@ -0,0 +1,113 @@
+import { ButtonGroup, IButton } from '@zeedhi/common';
+import { SetupContext, defineComponent } from 'vue';
+import { useDensity } from '../../composables/density';
+import { buildProps } from '../../utils';
+import { getRootElement, useCreateInstance, useGetMethods } from '../zd-component/ZdComponent';
+import { ZdComponentRenderProps } from '../zd-component/ZdComponentRender';
+
+export const ZdButtonGroupProps = buildProps({
+	...ZdComponentRenderProps,
+	absolute: {
+		type: [Boolean, String],
+		default: false,
+	},
+	small: {
+		type: [Boolean, String],
+		default: false,
+	},
+	large: {
+		type: [Boolean, String],
+		default: false,
+	},
+	backgroundColor: {
+		type: String,
+		default: '',
+	},
+	borderless: {
+		type: [Boolean, String],
+		default: false,
+	},
+	color: {
+		type: String,
+		default: 'primary',
+	},
+	dense: {
+		type: [Boolean, String],
+		default: false,
+	},
+	mandatory: {
+		type: [Boolean, String],
+		default: false,
+	},
+	multiple: {
+		type: [Boolean, String],
+		default: false,
+	},
+	rounded: {
+		type: [Boolean, String],
+		default: false,
+	},
+	shaped: {
+		type: [Boolean, String],
+		default: false,
+	},
+	tag: {
+		type: String,
+		default: 'div',
+	},
+	round: {
+		type: [Boolean, String],
+		default: false,
+	},
+	tile: {
+		type: [Boolean, String],
+		default: false,
+	},
+	top: {
+		type: [Boolean, String],
+		default: false,
+	},
+	selectedButtons: {
+		type: [Number, String, Array],
+		default: null,
+	},
+	children: {
+		type: Array as () => IButton[],
+		default: () => [],
+	},
+});
+
+export default defineComponent({
+	name: 'ZdButtonGroup',
+	props: ZdButtonGroupProps,
+	inheritAttrs: false,
+
+	setup(props, ctx: SetupContext) {
+		const { instance, root } = useCreateInstance<ButtonGroup>(props, ctx, ButtonGroup);
+		const { density } = useDensity({ instance });
+		const { click, mouseenter, mouseleave } = useGetMethods(instance, root);
+
+		function change() {
+			const rootElement = getRootElement(root);
+			instance.change(undefined, rootElement.value);
+		}
+
+		const getRounded = () => {
+			if (instance.tile) return '0';
+			if (instance.rounded) return instance.rounded === true ? 'xl' : instance.rounded;
+			if (instance.shaped) return 'shaped';
+			return undefined;
+		};
+
+		return {
+			instance,
+			change,
+			click,
+			density,
+			mouseenter,
+			mouseleave,
+			root,
+			getRounded,
+		};
+	},
+});

package/src/components/zd-button-group/ZdButtonGroup.vue

@@ -0,0 +1,66 @@
+<template>
+  <v-btn-toggle
+    ref="root"
+    :id="instance.name"
+    v-model="instance.selectedButtons"
+    :class="[
+      instance.cssClass,
+      'zd-button-group',
+      {
+        'zd-shaped': instance.shaped,
+        'zd-dark-theme': instance.theme === 'dark',
+        'zd-tile': instance.tile,
+        'zd-button-group--small': small,
+        'zd-button-group--large': large,
+      }
+    ]"
+    :style="[instance.cssStyle, { basecolor: instance.backgroundColor }]"
+    :divided="!instance.borderless"
+    :rounded="getRounded()"
+    :tile="instance.tile"
+    :theme="instance.theme"
+    :density="density"
+    variant="outlined"
+    v-bind="{
+      baseColor: instance.backgroundColor,
+      color: instance.color,
+      mandatory: instance.mandatory ? 'force' : instance.mandatory,
+      multiple: instance.multiple,
+      tag: instance.tag,
+    }"
+    @update:model-value="change"
+  >
+    <component
+      v-for="(child, index) in instance.children"
+      :key="`${child.name || index}`"
+      :is="child.component"
+      :parent="instance"
+      outline
+      v-bind="{
+        small: instance.small,
+        large: instance.large,
+        ...child
+      }"
+      @click="click($event)"
+      @mouseenter="mouseenter($event)"
+      @mouseleave="mouseleave($event)"
+    />
+    <slot></slot>
+  </v-btn-toggle>
+</template>
+
+<script lang="ts" src="./ZdButtonGroup.ts"></script>
+
+<style lang="scss">
+.zd-button-group {
+  height: 36px !important;
+
+  &--small {
+    height: 28px !important;
+  }
+
+  &--large {
+    height: 48px !important;
+  }
+}
+</style>

package/src/components/zd-card/ZdCard.ts

@@ -0,0 +1,139 @@
+import { Card } from '@zeedhi/common';
+import { defineComponent } from 'vue';
+import { HeightProps } from '../../propsMixins/heightProps';
+import { WidthProps } from '../../propsMixins/widthProps';
+import { buildProps } from '../../utils';
+import { useCreateInstance, useGetMethods } from '../zd-component/ZdComponent';
+import { ZdComponentRenderProps } from '../zd-component/ZdComponentRender';
+
+export const ZdCardProps = buildProps({
+	...ZdComponentRenderProps,
+	...HeightProps,
+	...WidthProps,
+	activeClass: {
+		type: String,
+		default: '',
+	},
+	append: {
+		type: [Boolean, String],
+		default: false,
+	},
+	color: {
+		type: String,
+		default: '',
+	},
+	disabled: {
+		type: [Boolean, String],
+		default: false,
+	},
+	elevation: {
+		type: [Number, String],
+	},
+	flat: {
+		type: [Boolean, String],
+		default: false,
+	},
+	hover: {
+		type: [Boolean, String],
+		default: false,
+	},
+	href: {
+		type: String,
+		default: '',
+	},
+	img: {
+		type: String,
+		default: '',
+	},
+	link: {
+		type: [Boolean, String],
+		default: null,
+	},
+	outlined: {
+		type: [Boolean, String],
+		default: false,
+	},
+	raised: {
+		type: [Boolean, String],
+		default: false,
+	},
+	ripple: {
+		type: [Boolean, String],
+		default: false,
+	},
+	tile: {
+		type: [Boolean, String],
+		default: false,
+	},
+	to: {
+		type: String,
+		default: '',
+	},
+	// Zeedhi 3.0
+	border: {
+		type: [String, Number, Boolean],
+		default: false,
+	},
+	density: {
+		type: String,
+		default: 'default',
+	},
+	loading: {
+		type: [String, Boolean],
+		default: false,
+	},
+	position: {
+		type: String,
+	},
+	replace: {
+		type: [Boolean, String],
+		default: false,
+	},
+	round: {
+		type: [String, Boolean, Number],
+		default: true,
+	},
+	subtitle: {
+		type: String,
+	},
+	tag: {
+		type: String,
+	},
+	text: {
+		type: String,
+	},
+	title: {
+		type: String,
+	},
+	variant: {
+		type: String,
+	},
+});
+
+const cardComponent = defineComponent({
+	props: ZdCardProps,
+	inheritAttrs: false,
+	setup(props, ctx) {
+		const { instance, root } = useCreateInstance<Card>(props, ctx, Card);
+
+		const { click, focus, blur, mouseenter, mouseleave, mouseout, mouseover } = useGetMethods(instance, root);
+
+		const getVariant = () =>
+			instance.variant || (instance.outlined && 'outlined') || (instance.flat && 'flat') || 'elevated';
+
+		return {
+			instance,
+			root,
+			click,
+			focus,
+			blur,
+			mouseenter,
+			mouseleave,
+			mouseout,
+			mouseover,
+			getVariant,
+		};
+	},
+});
+
+export default cardComponent;

package/src/components/zd-card/ZdCard.vue

@@ -0,0 +1,113 @@
+<template >
+  <v-card
+    ref="root"
+    :id="instance.name"
+    v-show="instance.isVisible"
+    @click="click($event)"
+    @mouseenter="mouseenter($event)"
+    @mouseleave="mouseleave($event)"
+    @mouseover="mouseover($event)"
+    @mouseout="mouseout($event)"
+    :class="[
+      instance.cssClass,
+      'zd-card',
+      {
+        'zd-card--link':
+          instance.link ||
+          instance.href ||
+          instance.to ||
+          instance.events.click,
+      },
+    ]"
+    :style="{
+      ...$styleObject(instance.cssStyle),
+    }"
+    :name="instance.name"
+    :border="instance.border"
+    :color="instance.color"
+    :density="instance.density"
+    :disabled="instance.disabled"
+    :elevation="instance.raised ? 8 : instance.elevation"
+    :flat="instance.flat"
+    :height="instance.height"
+    :hover="instance.hover"
+    :href="instance.href"
+    :image="instance.img"
+    :link="instance.link"
+    :loading="instance.loading"
+    :maxHeight="instance.maxHeight"
+    :maxWidth="instance.maxWidth"
+    :minHeight="instance.minHeight"
+    :minWidth="instance.minWidth"
+    :position="instance.position"    
+    :replace="instance.replace"
+    :ripple="instance.ripple"
+    :rounded="!instance.tile && instance.round"
+    :subtitle="instance.subtitle"
+    :tag="instance.tag"
+    :text="instance.text"
+    :title="instance.title"
+    :to="instance.to"
+    :variant="getVariant()"
+    :width="instance.width"
+    :theme="instance.theme"
+  >
+    <component
+      v-for="(child, index) in instance.children"
+      v-bind="child"
+      :key="index"
+      :is="child.component"
+      :parent="instance"
+    ></component>
+    <slot></slot>
+  </v-card>
+</template>
+<script lang="ts" src="./ZdCard.ts"></script>
+
+<style lang="scss">
+.zd-card {
+  padding: var(--spacing-4) !important;
+  overflow: auto;
+
+  &::before {
+    content: none;
+  }
+
+  &:not(.zd-card--link) {
+    cursor: auto;
+  }
+
+  &.v-sheet.v-card {
+    border-radius: var(--border);
+  }
+
+  &.v-sheet.v-card:not(.v-sheet--outlined) {
+    box-shadow: var(--shadow-3);
+
+    &.v-card--raised {
+      box-shadow: var(--shadow-9);
+    }
+  }
+
+  &.v-sheet.v-card--hover:focus,
+  &.v-sheet.v-card--hover:hover {
+    box-shadow: var(--shadow-5);
+  }
+
+  &.v-sheet.v-card.v-sheet--outlined {
+    border: var(--regular) solid var(--v-secondary-base);
+  }
+
+  &.v-card--variant-elevated.v-theme--dark {
+    border: solid 1px #333;
+  }
+}
+
+.v-card {
+  &:hover {
+    > .v-card__overlay {
+      opacity: 0 !important;
+    }
+  }
+}
+</style>