@zeedhi/vuetify 1.111.0 → 3.0.0

package/src/components/zd-password/ZdPassword.vue

@@ -0,0 +1,9 @@
+<template>
+    <zd-text-input
+      :id="instance.name"
+      name="password"
+      :instance-object="instance"
+    />
+  </template>
+  <script lang="ts" src="./ZdPassword.ts"></script>
+  

package/src/components/zd-progress/ZdProgress.ts

@@ -0,0 +1,56 @@
+import { IComponentRender, Progress } from '@zeedhi/common';
+import { PropType, defineComponent } from 'vue';
+import { buildProps } from '../../utils';
+import { useCreateInstance, useGetMethods } from '../zd-component/ZdComponent';
+import { ZdComponentRenderProps } from '../zd-component/ZdComponentRender';
+
+export const ZdProgressProps = buildProps({
+	...ZdComponentRenderProps,
+
+	backgroundColor: {
+		type: String as PropType<string>,
+		default: 'primary',
+	},
+	backgroundOpacity: {
+		type: String as PropType<string>,
+		default: '0.5',
+	},
+	color: {
+		type: String as PropType<string>,
+		default: 'primary',
+	},
+	height: {
+		type: [Number, String] as PropType<number | string>,
+		default: 4,
+	},
+	indeterminate: {
+		type: [Boolean, String] as PropType<boolean | string>,
+		default: false,
+	},
+	centerSlot: {
+		type: [Array, String] as PropType<IComponentRender[] | string>,
+		default: () => [],
+	},
+	value: {
+		type: [Number, String] as PropType<number | string>,
+		default: 0,
+	},
+});
+const progressComponent = defineComponent({
+	props: ZdProgressProps,
+	inheritAttrs: false,
+	setup(props, ctx) {
+		const { instance, root } = useCreateInstance<Progress>(props, ctx, Progress);
+		const { click, mouseenter, mouseleave } = useGetMethods(instance, root);
+
+		return {
+			instance,
+			root,
+			click,
+			mouseenter,
+			mouseleave,
+		};
+	},
+});
+
+export default progressComponent;

package/src/components/zd-progress/ZdProgress.vue

@@ -0,0 +1,31 @@
+<template>
+  <v-progress-linear
+    ref="root"
+    :id="instance.name"
+    @click="click"
+    @mouseenter="mouseenter"
+    @mouseleave="mouseleave"
+    :class="instance.cssClass"
+    v-show="instance.isVisible"
+    :active="instance.isVisible"
+    :bg-color="instance.backgroundColor"
+    :bg-opacity="instance.backgroundOpacity"
+    :color="instance.color"
+    :height="instance.height"
+    :indeterminate="instance.indeterminate"
+    :model-value="instance.value"
+    :style="instance.cssStyle"
+  >
+    <slot name="centerSlot">
+      <component
+        v-for="(child, index) in instance.centerSlot"
+        :is="child.component"
+        v-bind="child"
+        :key="index"
+        :parent="instance"
+      />
+    </slot>
+  </v-progress-linear>
+</template>
+
+<script lang="ts" src="./ZdProgress.ts"></script>

package/src/components/zd-radio/ZdRadio.ts

@@ -0,0 +1,71 @@
+import { Radio } from '@zeedhi/common';
+import { IDatasource } from '@zeedhi/core';
+import { ComponentPublicInstance, Ref, SetupContext, UnwrapNestedRefs, defineComponent } from 'vue';
+import { PropType } from 'vue';
+import { buildProps } from '../../utils';
+import { getRootElement, useCreateInstance } from '../zd-component/ZdComponent';
+import { ZdInputProps, useInput } from '../zd-input/ZdInput';
+
+export const ZdRadioProps = buildProps({
+	...ZdInputProps,
+
+	dataColor: {
+		type: String,
+		default: '',
+	},
+	dataLabel: {
+		type: String,
+		default: '',
+	},
+	datasource: {
+		type: Object as PropType<IDatasource>,
+		defaut() {
+			return {};
+		},
+	},
+	dataValue: {
+		type: String,
+		default: '',
+	},
+	vertical: {
+		type: [String, Boolean],
+		default: true,
+	},
+});
+
+const radioComponent = defineComponent({
+	props: ZdRadioProps,
+	inheritAttrs: false,
+	setup(props, ctx) {
+		const { instance, root } = useCreateInstance<Radio>(props, ctx, Radio);
+
+		const radioScope = useRadio(instance, ctx, root);
+
+		return {
+			...radioScope,
+		};
+	},
+});
+
+export default radioComponent;
+
+export function useRadio<TG extends Radio>(
+	instance: UnwrapNestedRefs<TG>,
+	ctx: SetupContext,
+	root: Ref<ComponentPublicInstance | HTMLElement | null>,
+) {
+	const inputScope = useInput(instance, ctx, root);
+
+	const radioChange = () => {
+		ctx.emit('update:value', instance.value);
+		const rootElement = getRootElement(root);
+		instance.change(undefined, rootElement.value);
+	};
+
+	return {
+		...inputScope,
+		instance,
+		root,
+		radioChange,
+	};
+}

package/src/components/zd-radio/ZdRadio.vue

@@ -0,0 +1,57 @@
+<template>
+  <v-radio-group
+    ref="root"
+    :id="instance.name"
+    v-show="instance.isVisible"
+    v-model="instance.displayValue"
+    :class="[ 
+      'zd-radio', 
+      instance.cssClass, 
+      { 
+        'zd-input-required': instance.validations.required 
+      } 
+    ]"
+    :style="instance.cssStyle"
+    :tabindex="instance.tabStop ? '' : '-1'"
+    v-bind="{
+      disabled: instance.disabled,
+      'hide-details': !instance.showHelper,
+      hint: $t(instance.hint),
+      label: $t(instance.label),
+      'persistent-hint': instance.persistentHint,
+      readonly: instance.readonly,
+      inline: !instance.vertical
+    }"
+  >
+    <v-radio
+      v-for="row in instance.datasource.data"
+      :key="row[instance.dataValue]"
+      :tabindex="instance.tabStop ? '' : '-1'"
+      :color="row[instance.dataColor] || instance.color"
+      :label="$t(row[instance.dataLabel])"
+      :value="row[instance.dataValue]"
+      :theme="instance.theme"
+      :density="'compact'"
+      @click="click($event)"
+      @change="radioChange($event)"
+      @mouseenter="mouseenter($event)"
+      @mouseleave="mouseleave($event)"
+      @focus="focus($event)"
+      @blur="blur($event)"
+    />
+  </v-radio-group>
+</template>
+
+  
+  <script lang="ts" src="./ZdRadio.ts"></script>
+  
+  <style lang="scss">
+  .zd-radio {
+    .v-label {
+      color: var(--zd-font-color);
+      font-size: var(--zd-font-body1-size) !important;
+      font-weight: var(--zd-font-body1-weight);
+    }
+  }
+  </style>
+  

package/src/components/zd-row/ZdRow.ts

@@ -0,0 +1,48 @@
+import { Row } from '@zeedhi/common';
+import { defineComponent } from 'vue';
+import { HeightProps, WidthProps } from '../../propsMixins';
+import { buildProps } from '../../utils';
+import { useCreateInstance, useGetMethods } from '../zd-component/ZdComponent';
+import { ZdComponentRenderProps } from '../zd-component/ZdComponentRender';
+
+export const ZdRowProps = buildProps({
+	...ZdComponentRenderProps,
+	...HeightProps,
+	...WidthProps,
+	align: {
+		type: String,
+	},
+	dense: {
+		type: [String, Boolean],
+		default: true,
+	},
+	justify: {
+		type: String,
+	},
+	noGutters: {
+		type: [String, Boolean],
+		default: true,
+	},
+});
+
+const rowComponent = defineComponent({
+	props: ZdRowProps,
+	inheritAttrs: false,
+	setup(props, ctx) {
+		const { instance, root } = useCreateInstance<Row>(props, ctx, Row);
+
+		const { click, focus, blur, mouseenter, mouseleave } = useGetMethods(instance, root);
+
+		return {
+			instance,
+			root,
+			click,
+			focus,
+			blur,
+			mouseenter,
+			mouseleave,
+		};
+	},
+});
+
+export default rowComponent;

package/src/components/zd-row/ZdRow.vue

@@ -0,0 +1,39 @@
+<template>
+  <v-row
+    :id="instance.name"
+    v-show="instance.isVisible"
+    :class="['zd-row', instance.cssClass]"
+    :name="instance.name"
+    :dense="instance.dense"
+    :justify="instance.justify"
+    :no-gutters="instance.noGutters"
+    :align="instance.align"
+    :style="{
+      height: $formatSize(instance.height),
+      maxHeight: $formatSize(instance.maxHeight),
+      minHeight: $formatSize(instance.minHeight),
+      ...$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-row>
+</template>
+<script lang="ts" src="./ZdRow.ts"></script>
+<style lang="scss">
+.zd-row.row {
+  margin: 0 -12px;
+
+  &.row--dense {
+    margin: 0 -4px;
+  }
+}
+
+</style>

package/src/components/zd-select/ZdSelect.ts

@@ -0,0 +1,222 @@
+import { Select } from '@zeedhi/common';
+import { FormatterParserProvider, IDictionary } from '@zeedhi/core';
+import { ComponentPublicInstance, Ref, SetupContext, UnwrapNestedRefs, computed, defineComponent, useSlots } from 'vue';
+import { useDensity } from '../../composables';
+import { buildProps } from '../../utils';
+import { getRootElement } from '../zd-component/ZdComponent';
+import { useCreateInputInstance } from '../zd-input/ZdInput';
+import { ZdTextInputProps, useTextInput } from '../zd-text-input/ZdTextInput';
+
+export const ZdSelectProps = buildProps({
+	...ZdTextInputProps,
+	appendIcon: {
+		type: String,
+		default: 'expand',
+	},
+	dataText: {
+		type: [String, Array],
+		default: '',
+	},
+	dataTextDiscrete: {
+		type: [String, Array],
+		default: '',
+	},
+	dataTextSeparator: {
+		type: String,
+		default: ' | ',
+	},
+	dataValue: {
+		type: String,
+		default: '',
+	},
+	dataDisabled: {
+		type: String,
+		default: 'disabled',
+	},
+	returnObject: {
+		type: [Boolean, String],
+		default: false,
+	},
+	autocomplete: {
+		type: [Boolean, String],
+		default: true,
+	},
+	autoSelection: {
+		type: [Boolean, String],
+		default: true,
+	},
+	disabledItems: {
+		type: [String, Array],
+		default: () => [],
+	},
+	preventLoadOnFocus: {
+		type: Boolean,
+		validator: (prop: unknown) => typeof prop === 'boolean' || prop === null,
+	},
+	datasource: {
+		type: Object,
+		default: () => ({}),
+	},
+	value: {
+		type: [String, Number, Object],
+		default: '',
+	},
+	menuMaxHeight: {
+		type: [String, Number],
+		default: 304,
+	},
+	menuMaxWidth: {
+		type: [String, Number],
+		default: 'auto',
+	},
+	itemAfterSlot: {
+		type: Array,
+		default: () => [],
+	},
+	itemBeforeSlot: {
+		type: Array,
+		default: () => [],
+	},
+	manualMode: {
+		type: [Boolean, String],
+		default: false,
+	},
+	searchParam: {
+		type: String,
+		default: 'SEARCH',
+	},
+	dataValueOut: {
+		type: [String, Array],
+		default: () => [],
+	},
+	dataValueOutFormName: {
+		type: String,
+		default: '',
+	},
+	// Zeedhi 3.0
+});
+
+const selectComponent: any = defineComponent({
+	props: ZdSelectProps,
+	inheritAttrs: false,
+	setup(props, ctx) {
+		const { instance, root } = useCreateInputInstance<Select>(props, ctx, Select);
+
+		const selectScope = useSelect(instance, ctx, root);
+
+		return {
+			...selectScope,
+		};
+	},
+});
+
+export default selectComponent;
+
+export function useSelect<TG extends Select>(
+	instance: UnwrapNestedRefs<TG>,
+	ctx: SetupContext,
+	root: Ref<ComponentPublicInstance | HTMLElement | null>,
+) {
+	const textInputScope = useTextInput(instance, ctx, root);
+	const { density } = useDensity({ instance });
+	const { emit } = ctx;
+
+	const slots = useSlots();
+
+	const hasItemBeforeSlot = !!slots.itemBeforeSlot;
+	const hasItemAfterSlot = !!slots.itemAfterSlot;
+
+	const items = computed<IDictionary[]>(() => {
+		const data = instance.items;
+
+		const disabledValues = instance.disabledItems.map((item: IDictionary) => {
+			if (item && typeof item === 'object') {
+				return item[instance.dataValue];
+			}
+
+			return item;
+		});
+
+		return data.map((row: IDictionary) => {
+			const newRow = { ...row };
+			const isDisabled = newRow[instance.dataDisabled];
+
+			delete newRow[instance.dataDisabled];
+
+			const rowValue = row[instance.dataValue];
+			return { ...newRow, disabled: isDisabled || disabledValues.includes(rowValue) };
+		});
+	});
+
+	const formattedDataText = (item: IDictionary<any>) => {
+		return instance.formatter(item);
+	};
+
+	const selectFormatterFn = FormatterParserProvider.getFormatter('ZdSelect');
+
+	const formattedDataDiscreteText = (item: IDictionary<any>) => {
+		if (!instance.dataTextDiscrete) {
+			return formattedDataText(item);
+		}
+
+		const text: string = selectFormatterFn(item, {
+			dataText: instance.dataTextDiscrete,
+			dataTextSeparator: instance.dataTextSeparator,
+		});
+		return text;
+	};
+
+	const selectChange = (value: any) => {
+		const rootElement = getRootElement(root);
+		instance.selectChange(value, undefined, rootElement.value);
+	};
+
+	const selectInput = (value: any) => {
+		emit('update:value', instance.value);
+		emit('input', instance.value);
+		instance.search = value;
+		const rootElement = getRootElement(root);
+		instance.selectInput(value, undefined, rootElement.value);
+	};
+
+	const selectKeydown = (event: KeyboardEvent) => {
+		const rootElement = getRootElement(root);
+		instance.keydown(event, rootElement.value);
+	};
+
+	const autoSelectFirst = computed(() => instance.autoSelection && items.value.length === 1);
+
+	const menuClass = computed(() => {
+		const align = instance.reverse ? 'right' : instance.align;
+
+		let menuClass = `zd-select-menu zd-select-align-${align}`;
+		menuClass += instance.dense ? ' zd-dense' : '';
+
+		return menuClass;
+	});
+
+	const onLoadMoreIntersect = (isIntersecting: boolean, entries: IntersectionObserverEntry[]) => {
+		const { intersectionRatio } = entries[0];
+		if (intersectionRatio === 1 || !isIntersecting || instance.datasource.loading) return;
+
+		instance.loadMore();
+	};
+
+	return {
+		...textInputScope,
+		autoSelectFirst,
+		instance,
+		root,
+		items,
+		menuClass,
+		formattedDataDiscreteText,
+		formattedDataText,
+		selectChange,
+		selectInput,
+		selectKeydown,
+		hasItemBeforeSlot,
+		hasItemAfterSlot,
+		onLoadMoreIntersect,
+		density,
+	};
+}