@zeedhi/vuetify 1.112.0 → 3.0.1

package/src/components/zd-iterable/ZdIterableNoData.vue

@@ -0,0 +1,53 @@
+<template>
+  <div
+    :id="instance.name"
+  >
+    <template v-if="instance.datasource.error">
+      <slot name="errorSlot"></slot>
+      <template v-if="!hasErrorSlot">
+        <component
+          v-for="(child, index) in instance.errorSlot"
+          :key="index"
+          :is="child.component"
+          :parent="instance"
+          v-bind="child"
+        ></component>
+      </template>
+      <span v-if="instance.errorSlot.length === 0 && !hasErrorSlot" class="error--text">{{
+        $t(instance.datasource.error)
+      }}</span>
+    </template>
+    <template v-else-if="!instance.datasource.data.length">
+      <template v-if="instance.datasource.search">
+        <slot name="noResultSlot"></slot>
+        <template
+          v-if="!hasNoResultSlot"
+        >
+          <component
+            v-for="(child, index) in instance.noResultSlot"
+            :key="index"
+            :is="child.component"
+            :parent="instance"
+            v-bind="child"
+          ></component>
+        </template>
+      </template>
+      <template v-else>
+        <slot name="noDataSlot"></slot>
+        <template
+          v-if="!hasNoDataSlot"
+        >
+          <component
+            v-for="(child, index) in instance.noDataSlot"
+            :key="index"
+            :is="child.component"
+            :parent="instance"
+            v-bind="child"
+          ></component>
+        </template>
+      </template>
+    </template>
+  </div>
+</template>
+
+<script lang="ts" src="./ZdIterableNoData.ts"></script>

package/src/components/zd-iterable/zd-iterable-columns-button/ZdIterableColumnsButton.ts

@@ -0,0 +1,56 @@
+import { IterableColumnsButton } from '@zeedhi/common';
+import { defineComponent } from 'vue';
+import { useCreateInstance } from '../..';
+import { ZdButtonProps } from '../../zd-button/ZdButton';
+
+export const ZdIterableColumnsButtonProps = {
+	...ZdButtonProps,
+	iterableComponentName: {
+		type: String,
+	},
+	iconName: {
+		type: String,
+		default: 'mdi-table-headers-eye',
+	},
+	icon: {
+		type: [Boolean, String],
+		default: true,
+	},
+	ignoreColumns: {
+		type: [Array, String],
+		default: () => [],
+	},
+};
+
+/**
+ * Iterable Columns Button component
+ */
+const iterableColumnsButton = defineComponent({
+	name: 'ZdIterableColumnsButton',
+	props: ZdIterableColumnsButtonProps,
+	setup(props, ctx) {
+		const { instance } = useCreateInstance<IterableColumnsButton>(props, ctx, IterableColumnsButton);
+
+		const getEvents = (on: any) => {
+			const events = { ...instance.events };
+			Object.keys(on).forEach((eventName) => {
+				const callback = instance.events[eventName];
+				events[eventName] = ({ event, component, element }: any) => {
+					if (callback && typeof callback === 'function') {
+						callback({ event, component, element });
+					}
+
+					on[eventName](event);
+				};
+			});
+			return events;
+		};
+
+		return {
+			instance,
+			getEvents,
+		};
+	},
+});
+
+export default iterableColumnsButton;

package/src/components/zd-iterable/zd-iterable-columns-button/ZdIterableColumnsButton.vue

@@ -0,0 +1,50 @@
+<template>
+  <v-menu
+    :id="instance.name"
+    :class="['zd-iterable-columns-button', instance.cssClass]"
+    :style="instance.cssStyle"
+    :closeOnContentClick="false"
+    offset-y
+    content-class="zd-iterable-columns-button-options"
+  >
+    <template v-slot:activator="{ props }">
+      <zd-activator-wrapper
+        :child-props="{
+          component: 'ZdButton',
+          name: instance.name,
+          instanceObject: instance,
+        }"
+        v-bind="props"
+      ></zd-activator-wrapper>
+    </template>
+    <v-list>
+      <v-list-item
+        v-for="column in instance.filteredColumns()"
+        :key="column.name"
+        class="zd-iterable-columns-button-option"
+      >
+        <zd-checkbox
+          :name="instance.name + '_column_' + column.name"
+          :value="column.isVisible"
+          :label="column.label"
+          :events="{
+            change: instance.controller.showHideColumn.bind(instance.controller, column)
+          }"
+        />
+      </v-list-item>
+    </v-list>
+  </v-menu>
+</template>
+
+<script lang="ts" src="./ZdIterableColumnsButton.ts"></script>
+
+<style lang="scss">
+.zd-iterable-columns-button-option {
+  min-height: 32px;
+}
+
+.zd-iterable-columns-button-options {
+  max-height: 200px;
+  overflow: auto;
+}
+</style>

package/src/components/zd-iterable/zd-iterable-page-info/ZdIterablePageInfo.ts

@@ -0,0 +1,24 @@
+import { IterablePageInfo } from '@zeedhi/common';
+import { defineComponent } from 'vue';
+import { useCreateInstance } from '../../zd-component/ZdComponent';
+import { ZdComponentRenderProps } from '../../zd-component/ZdComponentRender';
+
+export const ZdIterablePageInfoProps = {
+	...ZdComponentRenderProps,
+	iterableComponentName: {
+		type: String,
+	},
+	// Zeedhi 3.0
+};
+
+export default defineComponent({
+	props: ZdIterablePageInfoProps,
+	inheritAttrs: false,
+	setup(props, ctx) {
+		const { instance } = useCreateInstance<IterablePageInfo>(props, ctx, IterablePageInfo);
+
+		return {
+			instance,
+		};
+	},
+});

package/src/components/zd-iterable/zd-iterable-page-info/ZdIterablePageInfo.vue

@@ -0,0 +1,21 @@
+<template>
+  <span
+    :id="instance.name"
+    v-show="instance.isVisible"
+    :class="[
+      instance.cssClass,
+      'zd-iterable-page-info'
+    ]"
+  >
+    {{ instance.iterableComponent.pageText }}
+  </span>
+</template>
+
+<script lang="ts" src="./ZdIterablePageInfo.ts"></script>
+
+<style lang="scss">
+.zd-iterable-page-info {
+  margin-left: 1rem;
+  white-space: nowrap;
+}
+</style>

package/src/components/zd-iterable/zd-iterable-page-size/ZdIterablePageSize.ts

@@ -0,0 +1,60 @@
+import { IterablePageSize } from '@zeedhi/common';
+import { IDictionary } from '@zeedhi/core';
+import { PropType, defineComponent, onMounted } from 'vue';
+import { useCreateInstance } from '../../zd-component/ZdComponent';
+import { ZdSelectProps } from '../../zd-select/ZdSelect';
+
+export const ZdIterablePageSizeProps = {
+	...ZdSelectProps,
+	iterableComponentName: {
+		type: String,
+	},
+	clearable: {
+		type: [Boolean, String] as PropType<boolean | string>,
+	},
+	dataText: {
+		type: [String, Array] as PropType<string | string[]>,
+	},
+	dataValue: {
+		type: String,
+	},
+	dense: {
+		type: [Boolean, String] as PropType<boolean | string>,
+		default: false,
+	},
+	autocomplete: {
+		type: [Boolean, String] as PropType<boolean | string>,
+	},
+	showHelper: {
+		type: [Boolean, String] as PropType<boolean | string>,
+	},
+	showLabel: {
+		type: [Boolean, String] as PropType<boolean | string>,
+	},
+	validations: {
+		type: [Object, String] as PropType<IDictionary<IDictionary<string | number>>>,
+	},
+	// Zeedhi 3.0
+};
+
+export default defineComponent({
+	props: ZdIterablePageSizeProps,
+	inheritAttrs: false,
+	setup(props, ctx) {
+		const { instance } = useCreateInstance<IterablePageSize>(props, ctx, IterablePageSize);
+
+		onMounted(() => {
+			const data = instance.iterableComponent.pageSizes.map((size: string) => ({ value: size }));
+			instance.updateData(data).then(() => {
+				const parentDatasource = instance.iterableComponent.datasource;
+				if (parentDatasource) {
+					instance.setValue((parentDatasource.limit || 10).toString());
+				}
+			});
+		});
+
+		return {
+			instance,
+		};
+	},
+});

package/src/components/zd-iterable/zd-iterable-page-size/ZdIterablePageSize.vue

@@ -0,0 +1,17 @@
+<template>
+  <zd-select
+    :id="instance.name"
+    name="iterable-page-size"
+    :instance-object="instance"
+    :cssClass="`${instance.cssClass} zd-iterable-page-size`"
+  />
+</template>
+
+<script lang="ts" src="./ZdIterablePageSize.ts"></script>
+
+<style lang="scss">
+.zd-iterable-page-size {
+  max-width: 80px;
+  min-width: 80px;
+}
+</style>

package/src/components/zd-iterable/zd-iterable-pagination/ZdIterablePagination.ts

@@ -0,0 +1,39 @@
+import { IterablePagination } from '@zeedhi/common';
+import { PropType, defineComponent } from 'vue';
+import { useCreateInstance } from '../../zd-component/ZdComponent';
+import { ZdTextInputProps } from '../../zd-text-input/ZdTextInput';
+
+export const ZdSearchProps = {
+	...ZdTextInputProps,
+	iterableComponentName: {
+		type: String,
+	},
+	circle: {
+		type: [Boolean, String] as PropType<boolean | string>,
+		default: false,
+	},
+	maxButtons: {
+		type: [Number, String] as PropType<number | string>,
+	},
+	nextIcon: {
+		type: String,
+		default: 'next',
+	},
+	prevIcon: {
+		type: String,
+		default: 'prev',
+	},
+	// Zeedhi 3.0
+};
+
+export default defineComponent({
+	props: ZdSearchProps,
+	inheritAttrs: false,
+	setup(props, ctx) {
+		const { instance } = useCreateInstance<IterablePagination>(props, ctx, IterablePagination);
+
+		return {
+			instance,
+		};
+	},
+});

package/src/components/zd-iterable/zd-iterable-pagination/ZdIterablePagination.vue

@@ -0,0 +1,42 @@
+<template>
+  <v-pagination
+    :id="instance.name"
+    v-show="instance.isVisible"
+    ref="root"
+    v-model="instance.iterableComponent.datasource.page"
+    :prev-icon="$getIcon(instance.prevIcon)"
+    :next-icon="$getIcon(instance.nextIcon)"
+    :class="[
+      'zd-iterable-pagination',
+      instance.cssClass
+    ]"
+    :style="instance.cssStyle"
+    color="grey lighten-4"
+    size="x-small"
+    :rounded="instance.circle ? 'circle' : undefined"
+    :length="instance.iterableComponent.paginationLength"
+    @update:model-value="instance.iterableComponent.setPage($event)"
+  ></v-pagination>
+</template>
+
+<script lang="ts" src="./ZdIterablePagination.ts"></script>
+
+<style lang="scss">
+.zd-iterable-pagination {
+  flex-grow: 1;
+
+  .v-btn {
+    font-size: var(--zd-font-body1-size);
+  }
+
+  .v-pagination__prev, .v-pagination__next {
+    .v-btn {
+      border: solid var(--regular) rgb(var(--v-theme-grey-lighten-3));
+    }
+  }
+
+  .v-pagination__list {
+    justify-content: start;
+  }
+}
+</style>

package/src/components/zd-iterable/zd-search/ZdSearch.ts

@@ -0,0 +1,46 @@
+import { Search } from '@zeedhi/common';
+import { PropType, defineComponent } from 'vue';
+import { useCreateInstance } from '../../zd-component/ZdComponent';
+import { ZdTextInputProps, useTextInput } from '../../zd-text-input/ZdTextInput';
+
+export const ZdSearchProps = {
+	...ZdTextInputProps,
+	iterableComponentName: {
+		type: String,
+	},
+	showLabel: {
+		type: [Boolean, String] as PropType<boolean | string>,
+		default: false,
+	},
+	showHelper: {
+		type: [Boolean, String] as PropType<boolean | string>,
+		default: false,
+	},
+	appendIcon: {
+		type: String,
+		default: 'magnify',
+	},
+	placeholder: {
+		type: String,
+		default: 'SEARCH',
+	},
+	lazyAttach: {
+		type: [Boolean, String] as PropType<boolean | string>,
+		default: false,
+	},
+	// Zeedhi 3.0
+};
+
+export default defineComponent({
+	props: ZdSearchProps,
+	inheritAttrs: false,
+	setup(props, ctx) {
+		const { instance, root } = useCreateInstance<Search>(props, ctx, Search);
+
+		const textInputScope = useTextInput(instance, ctx, root);
+
+		return {
+			...textInputScope,
+		};
+	},
+});

package/src/components/zd-iterable/zd-search/ZdSearch.vue

@@ -0,0 +1,18 @@
+<template>
+  <zd-text-input
+    :id="instance.name"
+    name="zdGridSearch"
+    :cssClass="`${instance.cssClass} zd-search zd-float-right`"
+    :instance-object="instance"
+  >
+  </zd-text-input>
+</template>
+
+<script lang="ts" src="./ZdSearch.ts"></script>
+
+<style lang="scss">
+.zd-search {
+  width: 100%;
+  max-width: 200px;
+}
+</style>

package/src/components/zd-iterable-component-render/ZdIterableComponentRender.ts

@@ -0,0 +1,115 @@
+import { IComponentRender, IterableComponentRender } from '@zeedhi/common';
+import { defineComponent, getCurrentInstance, onMounted } from 'vue';
+import { buildProps } from '../../utils';
+import { setFillHeight } from '../../utils/fillHeight';
+import { useCreateInstance, useGetMethods } from '../zd-component/ZdComponent';
+import { ZdIterableProps } from '../zd-iterable/ZdIterable';
+
+export const ZdIterableComponentRenderProps = buildProps({
+	...ZdIterableProps,
+	footerSlot: {
+		type: Array<IComponentRender>,
+		default() {
+			return [];
+		},
+	},
+	toolbarSlot: {
+		type: Array<IComponentRender>,
+		default() {
+			return [];
+		},
+	},
+	componentMetadata: {
+		type: [Object, String],
+	},
+	rowPropName: {
+		type: String,
+		default: 'row',
+	},
+	errorSlot: {
+		type: Array<IComponentRender>,
+		default() {
+			return [];
+		},
+	},
+	noDataSlot: {
+		type: Array<IComponentRender>,
+		default: () => [
+			{
+				name: '<<NAME>>_no-data',
+				component: 'ZdText',
+				cssClass: 'no-data',
+				text: 'NO_DATA',
+			},
+		],
+	},
+	noResultSlot: {
+		type: Array<IComponentRender>,
+		default: () => [
+			{
+				name: '<<NAME>>_no-result',
+				component: 'ZdText',
+				cssClass: 'no-result',
+				text: 'NO_RESULT',
+			},
+		],
+	},
+	height: {
+		type: [Number, String],
+		default: 'auto',
+	},
+	minHeight: {
+		type: [Number, String],
+		default: 'auto',
+	},
+	maxHeight: {
+		type: [Number, String],
+		default: 'none',
+	},
+	width: {
+		type: [Number, String],
+		default: '100%',
+	},
+	minWidth: {
+		type: [Number, String],
+		default: 'auto',
+	},
+	maxWidth: {
+		type: [Number, String],
+		default: 'none',
+	},
+	fillHeight: {
+		type: [Boolean, String],
+		default: false,
+	},
+});
+
+const iterableComponentRender = defineComponent({
+	props: ZdIterableComponentRenderProps,
+	inheritAttrs: false,
+
+	setup(props, ctx) {
+		const { instance, root } = useCreateInstance<IterableComponentRender>(props, ctx, IterableComponentRender);
+
+		const { click, focus, blur, mouseenter, mouseleave } = useGetMethods(instance, root);
+
+		onMounted(() => {
+			const instance = getCurrentInstance();
+			if (props.fillHeight) {
+				setFillHeight(instance?.proxy?.$el as HTMLElement);
+			}
+		});
+
+		return {
+			instance,
+			root,
+			click,
+			focus,
+			blur,
+			mouseenter,
+			mouseleave,
+		};
+	},
+});
+
+export default iterableComponentRender;

package/src/components/zd-iterable-component-render/ZdIterableComponentRender.vue

@@ -0,0 +1,152 @@
+<template>
+  <div
+    :id="instance.name"
+    ref="root"
+    v-if="instance.isVisible"
+    :class="['zd-iterable-component-render', instance.cssClass]"
+    :style="{
+      height: $formatSize(instance.height),
+      width: $formatSize(instance.width),
+      maxHeight: $formatSize(instance.maxHeight),
+      minHeight: $formatSize(instance.minHeight),
+      maxWidth: $formatSize(instance.maxWidth),
+      minWidth: $formatSize(instance.minWidth),
+      ...$styleObject(instance.cssStyle),
+    }"
+  >
+    <div
+      class="zd-iterable-toolbar"
+      v-if="instance.toolbarSlot.length || !!$slots.toolbarSlot"
+    >
+      <div class="zd-iterable-toolbar-slot">
+        <component
+          v-for="(child, index) in instance.toolbarSlot"
+          :key="index"
+          :is="child.component"
+          :parent="instance"
+          v-bind="child"
+        ></component>
+        <slot name="toolbarSlot"></slot>
+      </div>
+    </div>
+
+    <div class="zd-iterable-content">
+      <div class="zd-display-flex zd-flex-wrap">
+        <v-progress-circular
+          v-if="instance.datasource.loading"
+          indeterminate
+          class="zd-frame"
+          size="64"
+          color="primary"
+        ></v-progress-circular>
+
+        <template v-else-if="instance.datasource.error">
+          <component
+            v-for="(child, index) in instance.errorSlot"
+            :key="index"
+            :is="child.component"
+            :parent="instance"
+            v-bind="child"
+          ></component>
+          <slot name="errorSlot"></slot>
+          <span v-if="instance.errorSlot.length === 0" class="error--text">{{
+            $t(instance.datasource.error)
+          }}</span>
+        </template>
+
+        <component
+          v-else-if="instance.datasource.data.length"
+          v-for="row in instance.datasource.data"
+          :key="JSON.stringify(row)"
+          :is="instance.componentMetadata.component"
+          v-bind="instance.getComponentMetadata(row)"
+        />
+
+        <template
+          v-else-if="!instance.datasource.currentRow[instance.datasource.uniqueKey]"
+          class="no--data"
+        >
+          <template v-if="instance.datasource.search">
+            <component
+              v-for="(child, index) in instance.noResultSlot"
+              :key="index"
+              :is="child.component"
+              :parent="instance"
+              v-bind="child"
+            ></component>
+            <slot name="noResultSlot"></slot>
+          </template>
+          <template v-else>
+            <component
+              v-for="(child, index) in instance.noDataSlot"
+              :key="index"
+              :is="child.component"
+              :parent="instance"
+              v-bind="child"
+            ></component>
+            <slot name="noDataSlot"></slot>
+          </template>
+        </template>
+
+        <component
+          v-else
+          :key="JSON.stringify(instance.datasource.currentRow)"
+          :is="instance.componentMetadata.component"
+          v-bind="instance.getComponentMetadata(instance.datasource.currentRow)"
+        />
+      </div>
+    </div>
+
+    <div v-if="instance.footerSlot.length || !!$slots.footerSlot" class="zd-iterable-footer">
+      <template>
+        <component
+          v-for="(child, index) in instance.footerSlot"
+          :key="index"
+          :is="child.component"
+          :parent="instance"
+          v-bind="child"
+        ></component>
+        <slot name="footerSlot"></slot>
+      </template>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" src="./ZdIterableComponentRender.ts"></script>
+
+<style lang="scss" scoped>
+.zd-iterable-component-render {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+
+  .error--text,
+  .no--data {
+    text-align: center;
+    width: 100%;
+    font-size: 14px;
+  }
+
+  .no--data {
+    color: rgba(0, 0, 0, 0.38);
+  }
+
+  .zd-iterable-toolbar {
+    display: flex;
+    justify-content: space-between;
+    margin-bottom: 16px;
+    align-items: center;
+    width: 100%;
+  }
+
+  .zd-iterable-content {
+    overflow: auto;
+  }
+
+  .zd-iterable-footer {
+    padding: 5px 0;
+    display: flex;
+    width: 100%;
+  }
+}
+</style>