@zeedhi/vuetify 1.112.0 → 3.0.0

package/src/components/zd-carousel/ZdCarousel.ts

@@ -0,0 +1,268 @@
+import { Carousel as CarouselClass, ISlideData } from '@zeedhi/common';
+import { ComponentPublicInstance, computed, defineComponent, onBeforeUnmount, onMounted, ref, watch } from 'vue';
+import { setFillHeight } from '../../utils/fillHeight';
+import { useCreateInstance, useGetMethods } from '../zd-component/ZdComponent';
+import { ZdComponentRenderProps } from '../zd-component/ZdComponentRender';
+import 'vue3-carousel/dist/carousel.css';
+import { Carousel, Navigation, Pagination, Slide } from 'vue3-carousel';
+import { buildProps } from '../../utils';
+
+export const ZdCarouselProps = buildProps({
+	...ZdComponentRenderProps,
+	autoPlay: {
+		type: [Boolean, String],
+		default: false,
+	},
+	buttonsOutside: {
+		type: [Boolean, String],
+		default: true,
+	},
+	center: {
+		type: [Boolean, String],
+		default: false,
+	},
+	currentSlide: {
+		type: [Number, String],
+	},
+	fractionPagination: {
+		type: [Boolean, String],
+		default: false,
+	},
+	height: {
+		type: [Number, String],
+		default: 'auto',
+	},
+	maxHeight: {
+		type: [Number, String],
+		default: 'none',
+	},
+	minHeight: {
+		type: [Number, String],
+		default: 'auto',
+	},
+	fillHeight: {
+		type: [Boolean, String],
+		default: false,
+	},
+	infiniteScroll: {
+		type: [Boolean, String],
+		default: true,
+	},
+	initialSlide: {
+		type: [Number, String],
+		default: 0,
+	},
+	interval: {
+		type: [Number, String],
+		default: 4000,
+	},
+	keysControl: {
+		type: [Boolean, String],
+		default: true,
+	},
+	mouseControl: {
+		type: [Boolean, String],
+		default: false,
+	},
+	paginationBackground: {
+		type: [Boolean, String],
+		default: true,
+	},
+	pauseOnHover: {
+		type: [Boolean, String],
+		default: true,
+	},
+	showArrows: {
+		type: [Boolean, String],
+		default: true,
+	},
+	showArrowsOnHover: {
+		type: [Boolean, String],
+		default: false,
+	},
+	showPagination: {
+		type: [Boolean, String],
+		default: false,
+	},
+	showProgress: {
+		type: [Boolean, String],
+		default: false,
+	},
+	slideCssClass: {
+		type: String,
+		default: 'zd-pa-4',
+	},
+	slidesPerView: {
+		type: [Number, String],
+		default: 1,
+	},
+	slidesToSlide: {
+		type: [Number, String],
+		default: 1,
+	},
+	touchControl: {
+		type: [Boolean, String],
+		default: true,
+	},
+	transitionDuration: {
+		type: [Number, String],
+		default: 300,
+	},
+	wheelControl: {
+		type: [Boolean, String],
+		default: false,
+	},
+	nextButton: {
+		type: Object,
+		default: () => ({
+			name: '<<NAME>>_nextButton',
+			component: 'ZdButton',
+			iconName: 'next',
+			icon: true,
+			large: true,
+		}),
+	},
+	prevButton: {
+		type: Object,
+		default: () => ({
+			name: '<<NAME>>_prevButton',
+			component: 'ZdButton',
+			iconName: 'prev',
+			icon: true,
+			large: true,
+		}),
+	},
+});
+
+const carouselComponent = defineComponent({
+	props: ZdCarouselProps,
+	inheritAttrs: false,
+	components: {
+		Carousel,
+		Slide,
+		Pagination,
+		Navigation,
+	},
+	setup(props, ctx) {
+		const { instance, root } = useCreateInstance<CarouselClass>(props, ctx, CarouselClass);
+		const carouselRef = ref<any>(null);
+		const resizeObserver = ref<ResizeObserver | null>(null);
+		const lastEvent = ref<Event | undefined>(undefined);
+
+		const { click, focus, blur, mouseenter, mouseleave } = useGetMethods(instance, root);
+
+		function isComponentInstance(obj: any): obj is ComponentPublicInstance {
+			return obj && '$refs' in obj;
+		}
+
+		onMounted(() => {
+			if (isComponentInstance(root.value)) {
+				carouselRef.value = root.value;
+			}
+
+			if (carouselRef.value) {
+				setTimeout(() => {
+					carouselRef.value.update();
+				}, 200);
+			}
+
+			if (props.fillHeight) {
+				setFillHeight(root.value as HTMLElement);
+			}
+
+			addResizeObserver();
+		});
+
+		onBeforeUnmount(() => {
+			removeObserver();
+		});
+
+		const addResizeObserver = () => {
+			resizeObserver.value = new ResizeObserver(() => {
+				carouselRef.value?.update();
+			});
+			if (carouselRef.value?.$el) {
+				resizeObserver.value.observe(carouselRef.value.$el);
+			}
+		};
+
+		const removeObserver = () => {
+			resizeObserver.value?.disconnect();
+		};
+
+		const setEvent = (event: any) => {
+			lastEvent.value = event;
+		};
+
+		watch(
+			() => instance.currentSlide,
+			(newVal) => {
+				if (carouselRef.value) {
+					carouselRef.value.slideTo(newVal);
+				}
+			},
+		);
+
+		watch(
+			() => instance.isVisible,
+			(newVal) => {
+				if (newVal) {
+					carouselRef.value?.restart();
+				}
+			},
+		);
+
+		const slide = (slideData: ISlideData) => {
+			instance.currentSlide = slideData.currentSlide;
+			instance.slide(root.value as HTMLElement, slideData, lastEvent.value);
+			ctx.emit('slide', lastEvent.value);
+			lastEvent.value = undefined;
+		};
+
+		const beforeSlide = (slideData: ISlideData) => {
+			instance.beforeSlide(root.value as HTMLElement, slideData, lastEvent.value);
+			ctx.emit('beforeSlide', lastEvent.value);
+		};
+
+		const infiniteScrollProp = computed(() => {
+			return instance.infiniteScroll && instance.children.length > instance.slidesPerView;
+		});
+
+		const initialSlideProp = computed(() => {
+			if (instance.children.length <= instance.slidesPerView && props.center) {
+				return Math.ceil(instance.children.length / 2) - 1;
+			}
+			return props.initialSlide;
+		});
+
+		const progressWidth = computed(() => {
+			const totalSlides = instance.children.length;
+			if (totalSlides === 0) return '0%';
+			const progress = (instance.currentSlide / (totalSlides - 1)) * 100;
+			return `${progress}%`;
+		});
+
+		return {
+			instance,
+			root,
+			infiniteScrollProp,
+			initialSlideProp,
+			progressWidth,
+			isHovered: false,
+			click,
+			focus,
+			blur,
+			mouseenter,
+			mouseleave,
+			beforeSlide,
+			slide,
+			setEvent,
+			Carousel,
+			Slide,
+			Navigation,
+			Pagination,
+		};
+	},
+});
+
+export default carouselComponent;

package/src/components/zd-carousel/ZdCarousel.vue

@@ -0,0 +1,243 @@
+<template>
+  <div
+    :id="instance.name"
+    v-if="instance.isVisible"
+    @click="click($event)"
+    :class="[
+      instance.cssClass,
+      'zd-carousel',
+      {
+        'buttons-outside': instance.buttonsOutside && instance.showArrows,
+        'hide-arrows': !instance.showArrows,
+        'show-progress': instance.showProgress,
+      }
+    ]"
+    :style="{
+      height: $formatSize(instance.height),
+      maxHeight: $formatSize(instance.maxHeight),
+      minHeight: $formatSize(instance.minHeight),
+      ...$styleObject(instance.cssStyle),
+    }"
+  >
+      <carousel 
+        ref="carousel"
+        @beforeSlide="beforeSlide($event)"
+        @slide="slide($event)"
+        @keydown.left.native="setEvent($event)"
+        @keydown.right.native="setEvent($event)"
+        @wheel.native="setEvent($event)"
+        @mouseup.native="setEvent($event)"
+        @touchend.native="setEvent($event)"
+        @mouseenter="isHovered = true"
+        @mouseleave="isHovered = false"
+        :style="{
+          height: '100%',
+        }"
+        v-bind="{gap: 15}"
+        :items-to-show="instance.slidesPerView"
+        :items-to-scroll="instance.slidesToSlide"
+        :wrap-around="infiniteScrollProp"
+        :autoplay="instance.autoPlay ? instance.interval : 0"
+        :pause-autoplay-on-hover="instance.pauseOnHover"
+        :transition="instance.transitionDuration"
+        :mouse-drag="instance.mouseControl"
+        :touch-drag="instance.touchControl"
+        :wheel-control="instance.wheelControl"
+        :keys-control="instance.keysControl"
+        :initial-slide="initialSlideProp"
+        v-model="instance.currentSlide"
+      >
+        <slide
+          v-for="(item) in instance.children"
+          :key="item.name"
+          :class="instance.slideCssClass"
+        >
+          <component
+            :is="item.component"
+            :key="item.name"
+            v-bind="item"
+          />
+        </slide>
+        <template #addons>
+          <Navigation>
+            <template #prev>
+              <div class="prev-button" v-show="!instance.showArrowsOnHover || isHovered">
+                <slot name="prevButton">
+                  <component :is="instance.prevButton.component" v-bind="instance.prevButton" />
+                </slot>
+              </div>
+            </template>
+            <template #next>
+              <div class="next-button" v-show="!instance.showArrowsOnHover || isHovered">
+                <slot name="nextButton">
+                  <component :is="instance.nextButton.component" v-bind="instance.nextButton" />
+                </slot>
+              </div>
+            </template>
+          </Navigation>
+          <Pagination
+            v-if="instance.showPagination && !instance.fractionPagination"
+            :class="[ instance.dark ? 'theme--dark' : 'theme--light', { 'show-background': instance.paginationBackground } ]"
+            @click.native="setEvent($event)"
+          />
+          <div 
+            v-else-if="instance.fractionPagination"
+            class="fraction-pagination"
+            :class="{ 'show-background': instance.paginationBackground }"
+          >
+            {{ Number(instance.currentSlide) + 1 }} / {{ instance.children.length }}
+          </div>
+          <div 
+            v-if="instance.showProgress" 
+            class="progress-bar"
+          >
+            <div 
+              class="progress" 
+              :style="{ width: progressWidth }"
+            ></div>
+          </div>
+        </template>
+      </carousel>
+  </div>
+</template>
+
+<script lang="ts" src="./ZdCarousel.ts"></script>
+
+<style lang="scss">
+.zd-carousel {
+  height: 100%;
+
+  .carousel {
+    outline: none;
+
+    * {
+      outline: none;
+    }
+
+    .carousel__track {
+      .carousel__slide {
+        align-self: center;
+        overflow: hidden;
+
+        > .row {
+          height: 100%;
+          align-items: center;
+        }
+      }
+    }
+
+    .carousel__pagination {
+      padding: 0;
+      width: 100%;
+      height: 50px;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+
+      .carousel__pagination-button {
+        display: inline-block;
+        margin: 0 var(--spacing-2);
+        width: 18px;
+        height: 18px;
+        border-radius: 50%;
+      }
+    }
+
+    .carousel__pagination.show-background {
+      background: rgba(0, 0, 0, 0.3);
+    }
+
+    .carousel__pagination.theme--light {
+      .carousel__pagination-button {
+        opacity: 0.25;
+        background-color: black;
+
+        &.carousel__pagination-button--active {
+          opacity: 0.6;
+        }
+
+        &:hover:not(.is-active) {
+          opacity: 0.4;
+        }
+      }
+    }
+
+    .carousel__pagination.theme--dark {
+      color: white;
+
+      .carousel__pagination-button {
+        opacity: 0.5;
+        background-color: white;
+
+        &.is-active {
+          opacity: 0.8;
+        }
+
+        &:hover:not(.is-active) {
+          opacity: 0.6;
+        }
+      }
+    }
+
+    .prev-button, .next-button {
+      transition: 0.1s;
+    }
+
+    .fraction-pagination {
+      position: absolute;
+      bottom: 20px;
+      left: 50%;
+      transform: translateX(-50%);
+      color: white;
+      font-size: 14px;
+      background: rgba(0, 0, 0, 0.3);
+      padding: 5px 10px;
+      border-radius: 5px;
+    }
+
+    .progress-bar {
+      position: absolute;
+      top: 0;
+      right: 0;
+      left: 0;
+      height: 4px;
+      background-color: #efefef;
+      overflow: hidden;
+      border-radius: 2px;
+      z-index: 1;
+
+      .progress {
+        height: 100%;
+        background-color: var(--v-primary-base);
+        transition: width 0.3s ease;
+      }
+    }
+  }
+
+  &.buttons-outside {
+    .carousel__viewport {
+      width: calc(100% - 2*var(--spacing-8));
+      margin-left: var(--spacing-8);
+    }
+  }
+
+  &.hide-arrows {
+    width: calc(100% - 2*var(--spacing-8));
+    margin-left: var(--spacing-8);
+
+    button.carousel__next, button.carousel__prev {
+      opacity: 0;
+    }
+
+    &:hover {
+      button.carousel__next, button.carousel__prev {
+        display: block;
+      }
+    }
+  }
+}
+
+li.carousel__slide {
+  overflow: hidden;
+}
+</style>

package/src/components/zd-checkbox/ZdCheckbox.ts

@@ -0,0 +1,47 @@
+import { Checkbox } from '@zeedhi/common';
+import { ComponentPublicInstance, Ref, SetupContext, UnwrapNestedRefs, defineComponent } from 'vue';
+import { buildProps } from '../../utils';
+import { getRootElement, useCreateInstance } from '../zd-component/ZdComponent';
+import { useInput } from '../zd-input/ZdInput';
+import { ZdToggleableProps } from '../zd-toggleable/ZdToggleable';
+
+export const ZdCheckboxProps = buildProps({
+	...ZdToggleableProps,
+});
+
+const checkboxComponent = defineComponent({
+	props: ZdCheckboxProps,
+	inheritAttrs: false,
+	setup(props, ctx) {
+		const { instance, root } = useCreateInstance<Checkbox>(props, ctx, Checkbox);
+
+		const checkboxScope = useCheckbox(instance, ctx, root);
+
+		return {
+			...checkboxScope,
+		};
+	},
+});
+
+export default checkboxComponent;
+
+export function useCheckbox<TG extends Checkbox>(
+	instance: UnwrapNestedRefs<TG>,
+	ctx: SetupContext,
+	root: Ref<ComponentPublicInstance | HTMLElement | null>,
+) {
+	const inputScope = useInput(instance, ctx, root);
+
+	const checkboxChange = () => {
+		ctx.emit('update:value', instance.value);
+		const rootElement = getRootElement(root);
+		instance.change(undefined, rootElement.value);
+	};
+
+	return {
+		...inputScope,
+		instance,
+		root,
+		checkboxChange,
+	};
+}

package/src/components/zd-checkbox/ZdCheckbox.vue

@@ -0,0 +1,50 @@
+<template>
+  <v-checkbox
+    ref="root"
+    :id="instance.name"
+    v-show="instance.isVisible"
+    v-model="instance.displayValue"
+    validate-on="blur"
+    :color="instance.color"
+    :class="[
+      instance.cssClass,
+      'zd-checkbox',
+      {
+        'zd-no-helper': !instance.showHelper,
+        'zd-no-label': !instance.showLabel,
+        'zd-input-required': instance.validations.required,
+      },
+    ]"
+    :style="instance.cssStyle"
+    :tabindex="instance.tabStop ? '' : '-1'"
+    @click="click($event)"
+    @mouseenter="mouseenter($event)"
+    @mouseleave="mouseleave($event)"
+    @focus="focus($event)"
+    @blur="blur($event)"
+    @change="checkboxChange($event)"
+    v-bind="{
+      disabled: instance.disabled,
+      label: instance.showLabel ? $t(instance.label) : undefined,
+      name: instance.name,
+      readonly: instance.readonly,
+      falseValue: instance.falseValue,
+      trueValue: instance.trueValue,
+      theme: instance.theme,
+      hideDetails: 'auto',
+      density: 'compact',
+    }"
+  ></v-checkbox>
+  </template>
+  <script lang="ts" src="./ZdCheckbox.ts"></script>
+  
+  <style lang="scss">
+  .zd-checkbox {
+    .v-label {
+      font-weight: var(--zd-font-body1-weight);
+      color: var(--zd-font-color);
+      font-size: var(--zd-font-body1-size);
+    }
+  }
+  </style>
+  

package/src/components/zd-checkbox-multiple/ZdCheckboxMultiple.ts

@@ -0,0 +1,69 @@
+import { CheckboxMultiple } from '@zeedhi/common';
+import { IDatasource } from '@zeedhi/core';
+import { PropType, computed, defineComponent } from 'vue';
+import { buildProps } from '../../utils';
+import { getRootElement, useCreateInstance, useGetMethods } from '../zd-component/ZdComponent';
+import { ZdInputProps } from '../zd-input/ZdInput';
+
+export const CheckboxMultipleProps = buildProps({
+	...ZdInputProps,
+	columns: {
+		type: [Number, String],
+		default: 4,
+	},
+	dataLabel: {
+		type: String,
+		default: '',
+	},
+	dataValue: {
+		type: String,
+		default: '',
+	},
+	datasource: {
+		type: Object as PropType<IDatasource>,
+		default: {},
+	},
+	returnObject: {
+		type: [Boolean, String],
+		default: false,
+	},
+	value: {
+		type: [Array, String] as any[],
+		default: () => [],
+	},
+	vertical: {
+		type: [Boolean, String],
+		default: true,
+	},
+});
+
+export default defineComponent({
+	name: 'ZdCheckboxMultiple',
+	props: CheckboxMultipleProps,
+	inheritAttrs: false,
+
+	setup(props, ctx) {
+		const { instance, root } = useCreateInstance<CheckboxMultiple>(props, ctx, CheckboxMultiple);
+		const { click, mouseenter, mouseleave } = useGetMethods(instance, root);
+
+		const checkboxHorizontalColumns = computed(() => {
+			const columns = Number(instance.columns);
+			return `repeat(${columns}, 1fr)`;
+		});
+
+		const change = () => {
+			const rootElement = getRootElement(root);
+			instance.change(undefined, rootElement.value);
+		};
+
+		return {
+			instance,
+			root,
+			click,
+			mouseenter,
+			mouseleave,
+			checkboxHorizontalColumns,
+			change,
+		};
+	},
+});