@zeedhi/vuetify 1.112.0 → 3.0.0

package/src/components/zd-col/ZdCol.vue

@@ -0,0 +1,26 @@
+<template>
+  <v-col
+    :id="instance.name"
+    v-show="instance.isVisible"
+    :class="instance.cssClass"
+    :name="instance.name"
+    :cols="instance.cols"
+    :sm="instance.sm"
+    :md="instance.md"
+    :lg="instance.lg"
+    :xl="instance.xl"
+    :offset="instance.offset"
+    :style="$styleObject(instance.cssStyle)"
+  >
+    <component
+      v-for="child in instance.children"
+      :key="child.name"
+      :is="child.component"
+      v-bind="child"
+      :parent="instance"
+    >
+    </component>
+    <slot></slot>
+  </v-col>
+</template>
+<script lang="ts" src="./ZdCol.ts"></script>

package/src/components/zd-collapse-card/ZdCollapseCard.ts

@@ -0,0 +1,97 @@
+import { CollapseCard } from '@zeedhi/common';
+import { SetupContext, computed, defineComponent, getCurrentInstance } from 'vue';
+import { ZdCardProps } from '../zd-card/ZdCard';
+import { useCreateInstance, useGetMethods } from '../zd-component/ZdComponent';
+
+export const ZdCollapseCardProps = {
+	...ZdCardProps,
+	disableActionRotate: {
+		type: [Boolean, String],
+		default: false,
+	},
+	expandButton: {
+		type: [Object, String],
+		default: () => undefined,
+	},
+	expanded: {
+		type: [Boolean, String],
+		default: false,
+	},
+	header: {
+		type: [Array, String],
+		default: () => [],
+	},
+	hideAction: {
+		type: [Boolean, String],
+		default: false,
+	},
+	iconColor: {
+		type: String,
+		default: 'normal',
+	},
+	iconName: {
+		type: String,
+		default: 'expand',
+	},
+	lazyLoad: {
+		type: [Boolean, String],
+		default: false,
+	},
+	readonly: {
+		type: [Boolean, String],
+		default: false,
+	},
+};
+
+const collapseCardComponent = defineComponent({
+	name: 'ZdCollapseCard',
+	props: ZdCollapseCardProps,
+	inheritAttrs: false,
+
+	setup(props, ctx: SetupContext) {
+		const { instance, root } = useCreateInstance<CollapseCard>(props, ctx, CollapseCard);
+		const { click, mouseenter, mouseleave } = useGetMethods(instance, root);
+
+		const background = computed(() => ({
+			background: `url(${instance.img}) center center / cover no-repeat`,
+		}));
+
+		const elevationClass = computed(() => (instance.elevation ? `elevation-${instance.elevation}` : ''));
+
+		const proxy = getCurrentInstance()?.proxy;
+
+		const cssValue = (property?: string | number) => proxy?.$formatSize(property || '');
+
+		const heightStyles = computed(() => ({
+			height: cssValue('height'),
+			'max-height': cssValue('maxHeight'),
+			'min-height': cssValue('minHeight'),
+		}));
+
+		const widthStyles = computed(() => ({
+			width: cssValue('width'),
+			'max-width': cssValue('maxWidth'),
+			'min-width': cssValue('minWidth'),
+		}));
+
+		const headerStyle = computed(() => ({
+			...background.value,
+			...heightStyles.value,
+			...widthStyles.value,
+		}));
+
+		return {
+			instance,
+			background,
+			elevationClass,
+			headerStyle,
+			widthStyles,
+			click,
+			mouseenter,
+			mouseleave,
+			root,
+		};
+	},
+});
+
+export default collapseCardComponent;

package/src/components/zd-collapse-card/ZdCollapseCard.vue

@@ -0,0 +1,147 @@
+<template>
+  <v-expansion-panels
+    ref="root"
+    :id="instance.name"
+    :class="[
+      'zd-collapse-card',
+      instance.cssClass,
+      {
+        'v-expansion-panels--flat': instance.flat,
+        'v-expansion-panels--hover': instance.hover,
+        'tile': instance.tile,
+        'zd-collapse-card--expanded': instance.expanded
+      },
+    ]"
+    :dark="instance.dark"
+    :light="instance.light"
+    :style="[widthStyles, $styleObject(instance.cssStyle)]"
+    :model-value="instance.expanded ? [0] : []"
+    :color="instance.color"
+  >
+    <v-expansion-panel
+      :disabled="instance.disabled"
+      :readonly="instance.readonly"
+      :ripple="instance.ripple"
+    >
+      <v-expansion-panel-title
+        :class="[]"
+        @mouseenter="mouseenter($event)"
+        @mouseleave="mouseleave($event)"
+        @click="click($event)"
+        :style="headerStyle"
+        :disable-icon-rotate="instance.disableActionRotate"
+        :expand-icon="$getIcon(instance.iconName)"
+        :hide-actions="instance.hideAction"
+      >
+        <div>
+          <template v-if="!$slots.header">
+            <component
+              v-for="(item) in instance.header"
+              v-bind="item"
+              :key="item.name"
+              :is="item.component"
+              :parent="instance"
+            />
+          </template>
+          <slot name="header"></slot>
+        </div>
+
+        <template v-if="instance.expandButton && !$slots.expandButton" v-slot:actions>
+          <component
+            v-bind="instance.expandButton"
+            :is="instance.expandButton.component"
+            :parent="instance"
+          />
+        </template>
+        <template v-else-if="!instance.expandButton && !$slots.expandButton" v-slot:actions>
+          <v-icon :color="iconColor">
+            {{ $getIcon(iconName) }}
+          </v-icon>
+        </template>
+        <template v-else v-slot:actions>
+          <slot name="expandButton"></slot>
+        </template>
+      </v-expansion-panel-title>
+      <v-expansion-panel-text :eager="!instance.lazyLoad">
+        <component
+          v-for="(child) in instance.children"
+          v-bind="child"
+          :key="child.name"
+          :is="child.component"
+          :parent="instance"
+        />
+        <slot></slot>
+      </v-expansion-panel-text>
+    </v-expansion-panel>
+  </v-expansion-panels>
+</template>
+
+<script lang="ts" src="./ZdCollapseCard.ts" />
+
+<style lang="scss">
+.zd-collapse-card {
+  &.tile,
+  &.tile:not(.v-expansion-panels--accordion) > .v-expansion-panel--active,
+  &.tile:not(.v-expansion-panels--accordion) > .v-expansion-panel--next-active {
+    border-radius: var(--border-tile);
+  }
+
+  & > div:first-child.v-expansion-panel,
+  & > div:first-child.v-expansion-panel.v-expansion-panel--active,
+  & > div:first-child.v-expansion-panel.v-expansion-panel--next-active {
+    box-shadow: var(--shadow-3);
+    border-radius: var(--border);
+
+    &::before {
+      box-shadow: none;
+    }
+
+    &.outlined {
+      box-shadow: none;
+      border: var(--regular) solid var(--v-secondary-base);
+    }
+
+    &.raised {
+      box-shadow: var(--shadow-9);
+    }
+
+    .v-expansion-panel-content__wrap {
+      padding: 0 var(--spacing-4) var(--spacing-4) var(--spacing-4);
+    }
+
+    .v-expansion-panel-header {
+      border-bottom-left-radius: inherit;
+      border-bottom-right-radius: inherit;
+      min-height: 0;
+      padding: var(--spacing-4);
+
+      .v-expansion-panel-header__icon .v-btn .v-icon {
+        color: currentColor;
+      }
+
+      > :not(.v-expansion-panel-header__icon) {
+        padding-right: var(--spacing-4);
+      }
+    }
+  }
+
+  &--flat {
+    & > div:first-child.v-expansion-panel,
+    & > div:first-child.v-expansion-panel.v-expansion-panel--active,
+    & > div:first-child.v-expansion-panel.v-expansion-panel--next-active {
+      box-shadow: none;
+    }
+  }
+
+  &.v-expansion-panels--hover {
+    & > div:first-child.v-expansion-panel,
+    & > div:first-child.v-expansion-panel.v-expansion-panel--active,
+    & > div:first-child.v-expansion-panel.v-expansion-panel--next-active {
+      &:hover,
+      &:focus {
+        box-shadow: var(--shadow-5);
+      }
+    }
+  }
+}
+</style>

package/src/components/zd-component/ZdComponent.ts

@@ -0,0 +1,324 @@
+import { Component, IComponent } from '@zeedhi/common';
+import { IDictionary, IEvent, Event as ZdEvent } from '@zeedhi/core';
+import { SetupContext, ShallowRef, computed, getCurrentInstance, useTemplateRef } from 'vue';
+import {
+	ComponentPublicInstance,
+	StyleValue,
+	UnwrapNestedRefs,
+	inject,
+	onBeforeMount,
+	onBeforeUnmount,
+	onMounted,
+	onUnmounted,
+	provide,
+	reactive,
+} from 'vue';
+import { mergeDictionaries } from '../../utils';
+import { buildProps } from '../../utils';
+import { setFillHeight } from '../../utils/fillHeight';
+import { Logger } from '../../utils/logger/logger';
+
+type RootRef = ComponentPublicInstance | HTMLElement | null;
+
+export const ZdComponentProps = buildProps({
+	allowDuplicate: {
+		type: [String, Boolean],
+		default: false,
+	},
+	autofocus: {
+		type: [String, Boolean],
+		default: false,
+	},
+	children: {
+		type: [String, Array<IComponent>],
+		default() {
+			return [];
+		},
+	},
+	cssClass: {
+		type: String,
+		default: '',
+	},
+	cssStyle: {
+		type: [String, Object as () => StyleValue],
+		default: '',
+	},
+	dark: {
+		// deprecated
+		type: [String, Boolean],
+		default: false,
+	},
+	directives: {
+		type: Object,
+		default() {
+			return {};
+		},
+	},
+	events: {
+		type: Object,
+		default() {
+			return {};
+		},
+	},
+	instanceObject: {
+		type: Object,
+	},
+	isVisible: {
+		type: [String, Boolean],
+		default: true,
+	},
+	keyMap: {
+		type: Object,
+		default() {
+			return {};
+		},
+	},
+	light: {
+		// deprecated
+		type: [String, Boolean],
+		default: false,
+	},
+	name: {
+		type: String,
+		required: true,
+	},
+	parent: {
+		type: Object,
+	},
+	tabStop: {
+		type: [String, Boolean],
+		default: true,
+	},
+	// Zeedhi 3.0
+	theme: {
+		type: String,
+	},
+});
+
+type ParentItem = {
+	instance: UnwrapNestedRefs<Component>;
+	props: any;
+	parent?: ParentItem;
+};
+
+export function getRootElement(rootRef: Readonly<ShallowRef<RootRef | null>>) {
+	const rootElement = computed<HTMLElement | undefined>(() => {
+		if (rootRef.value instanceof HTMLElement) {
+			return rootRef.value;
+		}
+
+		return rootRef.value?.$el;
+	});
+
+	return rootElement;
+}
+
+function useComponentLifeCycles<T extends Component, G extends RootRef>(
+	instance: UnwrapNestedRefs<T>,
+	createdFromObject: boolean,
+	root: Readonly<ShallowRef<G | null>>,
+) {
+	onBeforeMount(() => {
+		if (!createdFromObject) {
+			instance.onBeforeMount();
+		}
+	});
+
+	function assignViewFocusFn<TA extends Component>(el: HTMLElement | null, instanceInAssignView: UnwrapNestedRefs<TA>) {
+		if (el) {
+			const focusableElements = 'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])';
+			let focusableChildren: HTMLElement;
+			if (el.matches(focusableElements)) {
+				focusableChildren = el;
+			} else {
+				[focusableChildren] = el.querySelectorAll<HTMLElement>(focusableElements);
+			}
+			const fn = () => {
+				focusableChildren?.focus();
+			};
+			instanceInAssignView.setViewFocus(fn);
+		}
+	}
+
+	onMounted(() => {
+		const rootElement = getRootElement(root);
+
+		if (!rootElement) {
+			Logger.warn('root element not found');
+		}
+
+		if (instance.fillHeight && rootElement.value) setFillHeight(rootElement.value);
+
+		if (rootElement.value) assignViewFocusFn(rootElement.value, instance);
+
+		if (instance.autofocus && !instance.isFocused) {
+			instance.setFocus();
+		}
+
+		if (!createdFromObject) {
+			instance.onMounted(rootElement.value);
+		}
+	});
+
+	onBeforeUnmount(() => {
+		if (!createdFromObject) {
+			instance.onBeforeDestroy();
+		}
+	});
+
+	onUnmounted(() => {
+		if (!createdFromObject) {
+			instance.onDestroyed();
+		}
+	});
+
+	// onUpdated
+	// onBeforeUpdate
+	// onErrorCaptured
+	// onActivated
+	// onDeactivated
+}
+
+export function useCreateInstance<T extends Component, G extends RootRef = RootRef>(
+	props: Record<string, any>,
+	ctx: SetupContext,
+	ObjectClass: new (args: any) => T,
+	checkParentTypeFn?: (parentInstance?: Component) => boolean,
+): { instance: UnwrapNestedRefs<T>; root: Readonly<ShallowRef<G | null>> } {
+	const { parents, addChild } = useVueParentComponent();
+	const root = useTemplateRef<G>('root');
+
+	let instanceObj: T;
+	let createdFromObject = false;
+
+	const checkParentType = checkParentTypeFn || ((parentInstance?: Component) => !!parentInstance);
+
+	const getListenersDictionary = () => {
+		const listeners = Object.keys(ctx.attrs).reduce((acc: IDictionary, key) => {
+			if (key.startsWith('on')) {
+				const newKey = key.slice(2).toLowerCase(); // onClick -> click
+				acc[newKey] = ctx.attrs[key];
+			}
+			return acc;
+		}, {});
+
+		return listeners;
+	};
+
+	/**
+	 * Merges the events passed via events prop with vue v-on events
+	 * @param eventsToBeMerged events passed via events prop
+	 * @returns Dictionary of events merged with vue v-on events
+	 */
+	const getInstanceEvents = (eventsToBeMerged: IDictionary<IEvent<any> | string | undefined>[]) => {
+		const listeners = getListenersDictionary();
+		const events = mergeDictionaries([...eventsToBeMerged, listeners]);
+		return events;
+	};
+
+	if (props.instanceObject) {
+		createdFromObject = true;
+
+		const vueInstance = getCurrentInstance();
+		const explicitlyPassedProps: IDictionary = {};
+
+		for (const key in props) {
+			// Check if the prop was explicitly passed (not using default)
+			if (vueInstance?.vnode.props && Object.prototype.hasOwnProperty.call(vueInstance.vnode.props, key)) {
+				explicitlyPassedProps[key] = props[key];
+			}
+		}
+		explicitlyPassedProps.instanceObj = undefined;
+
+		const events = getInstanceEvents([props.events, props.instanceObject.events]);
+
+		const factoredEvents = ZdEvent.factory(events);
+
+		instanceObj = Object.assign(props.instanceObject, ctx.attrs, explicitlyPassedProps, {
+			name: props.instanceObject.name,
+			events: factoredEvents,
+		});
+	} else {
+		let { parent, component } = props;
+		if (!parent && !component) {
+			parent = parents.at(-1);
+			while (parent && (!parent.instance || !checkParentType(parent.instance))) {
+				parent = parent.parent;
+			}
+		}
+
+		const userProperties = ctx.attrs || {};
+
+		instanceObj = new ObjectClass({
+			...props,
+			userProperties,
+			parent: parent?.instance || parent,
+			events: getInstanceEvents([props.events]),
+		} as IComponent);
+	}
+
+	const instance = reactive(instanceObj);
+	addChild({ instance, props });
+
+	if (!createdFromObject) instance.onCreated();
+
+	useComponentLifeCycles(instance, createdFromObject, root);
+
+	return {
+		instance,
+		root,
+	};
+}
+
+export function useGetMethods<TG extends Component, G extends RootRef>(
+	instance: UnwrapNestedRefs<TG>,
+	root: Readonly<ShallowRef<G | null>>,
+) {
+	return {
+		click: (event: Event) => {
+			const rootElement = getRootElement(root);
+			instance.click(event, rootElement.value);
+		},
+		focus: (event: Event) => {
+			const rootElement = getRootElement(root);
+			instance.focus(event, rootElement.value);
+		},
+		blur: (event: Event) => {
+			const rootElement = getRootElement(root);
+			instance.blur(event, rootElement.value);
+		},
+		mouseenter: (event: Event) => {
+			const rootElement = getRootElement(root);
+			instance.mouseenter(event, rootElement.value);
+		},
+		mouseleave: (event: Event) => {
+			const rootElement = getRootElement(root);
+			instance.mouseleave(event, rootElement.value);
+		},
+		mouseout: (event: Event) => {
+			const rootElement = getRootElement(root);
+			instance.mouseout(event, rootElement.value);
+		},
+		mouseover: (event: Event) => {
+			const rootElement = getRootElement(root);
+			instance.mouseover(event, rootElement.value);
+		},
+	};
+}
+
+export function useVueParentComponent() {
+	let parents: ParentItem[] = [];
+
+	const parentsInjection = inject<ParentItem[]>('parents', []);
+	if (parentsInjection.length > 0) {
+		parents = [...parentsInjection];
+	}
+
+	provide('parents', parents);
+
+	const addChild = (parent: ParentItem) => {
+		if (parents) parents.push({ ...parent, parent: parents.at(-1) });
+	};
+
+	return { parents, addChild };
+}

package/src/components/zd-component/ZdComponentRender.ts

@@ -0,0 +1,16 @@
+import { IComponentRender } from '@zeedhi/common';
+import { buildProps } from '../../utils';
+import { ZdComponentProps } from './ZdComponent';
+
+export const ZdComponentRenderProps = buildProps({
+	...ZdComponentProps,
+	children: {
+		type: [String, Array<IComponentRender>],
+		default() {
+			return [];
+		},
+	},
+	component: {
+		type: String,
+	},
+});

package/src/components/zd-container/ZdContainer.ts

@@ -0,0 +1,47 @@
+import { Container } 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 ZdContainerProps = buildProps({
+	...ZdComponentRenderProps,
+	...HeightProps,
+	...WidthProps,
+	fluid: {
+		type: [Boolean, String],
+		default: false,
+	},
+	scrollView: {
+		type: [Boolean, String],
+		default: false,
+	},
+	width: {
+		type: [Number, String],
+		default: '100%',
+	},
+});
+
+const containerComponent = defineComponent({
+	props: ZdContainerProps,
+	inheritAttrs: false,
+	setup(props, ctx) {
+		const { instance, root } = useCreateInstance<Container>(props, ctx, Container);
+
+		const { click, focus, blur, mouseenter, mouseleave } = useGetMethods(instance, root);
+
+		return {
+			instance,
+			root,
+			click,
+			focus,
+			blur,
+			mouseenter,
+			mouseleave,
+		};
+	},
+});
+
+export default containerComponent;

package/src/components/zd-container/ZdContainer.vue

@@ -0,0 +1,41 @@
+<template>
+  <v-container
+    :id="instance.name"
+    ref="root"
+    v-show="instance.isVisible"
+    :name="instance.name"
+    :fluid="instance.fluid"
+    :tag="instance.tag"
+    :class="['zd-container', instance.cssClass]"
+    :style="{
+      height: $formatSize(instance.height),
+      minHeight: $formatSize(instance.minHeight),
+      maxHeight: $formatSize(instance.maxHeight),
+      width: $formatSize(instance.width),
+      minWidth: $formatSize(instance.minWidth),
+      maxWidth: $formatSize(instance.maxWidth),
+      overflow: instance.scrollView ? 'hidden auto': 'none',
+      ...$styleObject(instance.cssStyle),
+    }"
+    @mouseenter="mouseenter($event)"
+    @click="click($event)"
+  >
+    <component
+      v-for="(child, index) in instance.children"
+      v-bind="child"
+      :key="index"
+      :is="child.component"
+      :parent="instance">
+    </component>
+    <slot></slot>
+  </v-container>
+</template>
+
+<script lang="ts" src="./ZdContainer.ts"></script>
+
+<style lang="scss" scoped>
+.zd-container {
+  padding: 1rem;
+  background: rgb(var(--v-theme-surface));
+}
+</style>