@zeedhi/vuetify 1.112.0 → 3.0.0

package/src/components/tek-grid/layout-options/TekGridLayoutOptions.ts

@@ -0,0 +1,117 @@
+import { ITekGridLayout, Input, TekGridLayoutOptions, TekRestDatasource } from '@zeedhi/common';
+import { IEventParam } from '@zeedhi/core';
+import { defineComponent, mergeProps, onMounted, ref } from 'vue';
+import { ZdComponentRenderProps, useCreateInstance, useTableLayout } from '../../..';
+
+export const TekGridLayoutOptionsProps = {
+	...ZdComponentRenderProps,
+	// Zeedhi 3.0
+};
+
+const layoutOptionsComponent = defineComponent({
+	props: TekGridLayoutOptionsProps,
+	inheritAttrs: false,
+	setup(props, ctx) {
+		const { instance, root } = useCreateInstance<TekGridLayoutOptions>(props, ctx, TekGridLayoutOptions);
+
+		const { applyLayout: applyTekGridLayout, getColumnElements, getTableWidth } = useTableLayout();
+
+		onMounted(() => {
+			instance.viewApplyLayout = applyLayout;
+			instance.viewGetCurrentLayout = getCurrentLayout;
+		});
+
+		const confirmLayoutClick = ({ component }: IEventParam<Input>) => {
+			const layoutName = component.value;
+			if (layoutName) {
+				const newLayout: ITekGridLayout = getCurrentLayout(layoutName);
+				instance.newLayout(newLayout);
+			}
+
+			menuActive.value = false;
+			component.value = '';
+		};
+
+		const datasourceDynamicFilter = () => {
+			const datasource = instance.grid.datasource;
+			if (datasource instanceof TekRestDatasource) return datasource.dynamicFilter;
+			return {};
+		};
+
+		const changeLayout = (layout: ITekGridLayout) => {
+			instance.updateLayout(layout.name, getCurrentLayout(layout.name));
+		};
+
+		const applyLayout = (layout?: ITekGridLayout) => {
+			const defaultLayout = {
+				originalDatasourceOrder: instance.originalDatasourceOrder,
+				originalDatasourceFilter: instance.originalDatasourceFilter,
+				originalColumnProps: instance.originalColumnProps,
+				originalDatasourceDynamicFilter: instance.originalDatasourceDynamicFilter,
+			};
+			applyTekGridLayout({ layout, defaultLayout, changeLayoutCallback: changeLayout });
+			menuActive.value = false;
+		};
+
+		const getCurrentLayout = (layoutName: string) => {
+			const { grid } = instance;
+
+			const gridWidth = getTableWidth();
+			const columnElementsDict = getColumnElements();
+
+			return {
+				name: layoutName,
+				gridWidth,
+				order: grid.datasource.order,
+				filter: grid.datasource.filter,
+				dynamicFilter: datasourceDynamicFilter(),
+				columns: grid.columns.map((column: any, index) => {
+					const columnElement = columnElementsDict[index];
+					return {
+						name: column.name,
+						label: column.label,
+						align: column.align,
+						width: columnElement ? window.getComputedStyle(columnElement).width : 'unset',
+						minWidth: column.minWidth,
+						maxWidth: column.maxWidth,
+						isVisible: column.isVisible,
+						fixed: column.fixed,
+						grouped: column.grouped,
+						groupOpened: column.groupOpened,
+						aggregation: column.aggregation,
+						filterHelperValue: instance.getHelperValue(column),
+					};
+				}),
+			};
+		};
+
+		const menuActive = ref(false);
+
+		const applyOrUpdateLayout = (event: Event, layoutName: string) => {
+			if (instance.layoutEdited) {
+				instance.updateLayout(layoutName, getCurrentLayout(layoutName));
+				event.stopImmediatePropagation();
+				menuActive.value = false;
+			} else {
+				instance.applyLayout(layoutName);
+			}
+		};
+
+		const deleteLayout = (event: Event, layoutName: string) => {
+			instance.deleteLayout(layoutName);
+			event.stopImmediatePropagation();
+		};
+
+		return {
+			instance,
+			root,
+			menuActive,
+			confirmLayoutClick,
+			applyOrUpdateLayout,
+			deleteLayout,
+			mergeProps,
+		};
+	},
+});
+
+export default layoutOptionsComponent;

package/src/components/tek-grid/layout-options/TekGridLayoutOptions.vue

@@ -0,0 +1,172 @@
+<template>
+  <v-menu
+    :id="instance.name"
+    :name="instance.name"
+    :class="['tek-grid-layout-options', instance.cssClass]"
+    :style="instance.cssStyle"
+    v-model="menuActive"
+    offset-y
+    :closeOnContentClick="false"
+  >
+    <template v-slot:activator="{ props: onMenu }">
+      <v-tooltip bottom>
+        <template v-slot:activator="{ props: onTooltip }">
+          <v-badge
+            v-show="instance.isVisible"
+            overlap
+            class="tek-grid-layout-options-badge"
+            dot
+            :offsetX="12"
+            :offsetY="12"
+            :value="instance.layoutEdited"
+          >
+            <zd-activator-wrapper
+              ref="root"
+              v-bind="mergeProps(onMenu, onTooltip)"
+              :child-props="{
+                component: 'ZdButton',
+                name: instance.name + '_button',
+                icon: true,
+                iconName: 'mdi-table-star',
+                isVisible: instance.isVisible,
+              }"
+            ></zd-activator-wrapper>
+          </v-badge>
+        </template>
+        <span>{{ $t('LAYOUT') + (instance.currentLayoutName || $t('DEFAULT_LAYOUT')) }}</span>
+      </v-tooltip>
+    </template>
+    <v-list>
+      <v-list-item
+        :class="['tek-grid-layout-item-header', { edited: instance.layoutEdited }]"
+      >
+        {{ instance.layoutEdited ? $t('LAYOUT_MODIFIED') : $t('LAYOUT_NOT_MODIFIED')}}
+      </v-list-item>
+      <v-list-item>
+        <zd-text-input
+          :name="instance.name+'_new_layout'"
+          ref="inputNewLayout"
+          v-bind="{
+            showHelper: false,
+            showLabel: false,
+            placeholder: 'NEW_LAYOUT',
+            appendOuterIcon: 'mdi-check',
+            autofocus: true,
+            autofill: false,
+            keyMap: {
+              enter: {
+                event: confirmLayoutClick,
+                input: true,
+                active: true,
+              },
+            },
+            events: {
+              appendOuterIconClick: confirmLayoutClick,
+            },
+          }"
+        />
+      </v-list-item>
+      <v-list-item
+        v-if="!instance.layoutEdited"
+        :class="['tek-grid-layout-item', {
+          selected: instance.currentLayoutName === ''
+        }]"
+        @click="instance.applyLayout('')"
+      >
+      {{ $t('DEFAULT_LAYOUT') }}
+      </v-list-item>
+      <v-list-item
+        v-for="item in instance.layoutNames"
+        :key="item"
+        :class="['tek-grid-layout-item', {
+          selected: item === instance.currentLayoutName
+        }]"
+        @click="applyOrUpdateLayout($event, item)"
+      >
+        {{ item }}
+        <span v-if="!instance.layoutEdited" class="tek-grid-layout-item-buttons">
+          <zd-button
+            :name="'tek-grid-layout-item-delete_' + instance.name + item"
+            v-bind="{
+              small: true,
+              icon: true,
+              iconName: 'mdi-trash-can-outline',
+              events: {
+                click: ({ event }) => { deleteLayout(event, item) },
+              },
+            }"
+          />
+        </span>
+      </v-list-item>
+      <v-list-item
+        v-if="instance.layoutEdited"
+        :class="['tek-grid-layout-item-discard']"
+        @click="instance.discardChanges()"
+      >
+        <zd-button small color="error darken-2" width="100%" name="tek-grid-layout-item-discard-changes" label="LAYOUT_DISCART_CHANGES"></zd-button>
+      </v-list-item>
+    </v-list>
+  </v-menu>
+</template>
+
+<script lang="ts" src="./TekGridLayoutOptions.ts"></script>
+
+<style lang="scss">
+.tek-grid-layout-options {
+  &-badge {
+    .v-badge__badge {
+      font-size: var(--zd-font-caption-size);
+      font-weight: var(--zd-font-caption-weight);
+      line-height: 14px;
+      pointer-events: none;
+      background-color: var(--zd-badge-background-color) !important;
+
+      span {
+        color: var(--zd-badge-text-color) !important;
+      }
+    }
+  }
+}
+
+.tek-grid-layout-item {
+  font-size: 13px;
+  cursor: pointer;
+  min-height: 30px;
+
+  &.selected {
+    font-weight: 700;
+  }
+
+  &:hover {
+    &.theme--light {
+      background: #eee;
+    }
+  }
+
+  .tek-grid-layout-item-buttons {
+    position: absolute;
+    right: 16px;
+
+    .v-icon {
+      font-size: 18px;
+    }
+  }
+}
+
+.tek-grid-layout-item-header {
+  max-width: 270px;
+  font-size: 13px;
+  font-weight: bold;
+  color: var(--v-primary-base) !important;
+  line-height: 18px;
+
+  &.edited {
+    color: var(--v-error-darken2) !important;
+  }
+}
+
+.tek-grid-layout-item-discard {
+  min-height: 30px;
+  padding-top: 10px;
+}
+</style>

package/src/components/tek-grid/row/TekGridFooterRow.ts

@@ -0,0 +1,62 @@
+import { GridColumn } from '@zeedhi/common';
+import { IDictionary } from '@zeedhi/core';
+import { PropType, defineComponent } from 'vue';
+
+export default defineComponent({
+	props: {
+		isSelected: {
+			type: Boolean,
+			required: true,
+		},
+		selectable: {
+			type: Boolean,
+			required: true,
+		},
+		selectionDisabled: {
+			type: Boolean,
+			required: true,
+		},
+		cellSelection: {
+			type: Boolean,
+			required: true,
+		},
+		isCurrent: {
+			type: Function as PropType<(args: { row: IDictionary; column?: GridColumn }) => boolean>,
+			required: true,
+		},
+		columns: {
+			type: Array as PropType<GridColumn[]>,
+			required: true,
+		},
+		row: {
+			type: Object as PropType<IDictionary>,
+			required: true,
+		},
+		fixedLeft: {
+			type: Object as PropType<IDictionary>,
+			required: true,
+		},
+		fixedRight: {
+			type: Object as PropType<IDictionary>,
+			required: true,
+		},
+	},
+	emits: ['focusin'],
+	setup(props, { emit }) {
+		const focusin = (event: Event) => {
+			emit('focusin', { event, row: props.row });
+		};
+
+		const getLevel = (row: IDictionary) => {
+			if (!row.groupHeaders) return 0;
+
+			const { length } = row.groupHeaders;
+			return length + 1;
+		};
+
+		return {
+			focusin,
+			getLevel,
+		};
+	},
+});

package/src/components/tek-grid/row/TekGridFooterRow.vue

@@ -0,0 +1,64 @@
+<template>
+  <table-row
+    :cssClass="[
+      'tek-grid-footer-row',
+      { 'tek-grid-footer-row--summary': row.groupSummary }
+    ]"
+  >
+    <td
+      v-if="selectable"
+      :class="[
+        'zd-grid__cell',
+        'zd-grid__cell--fixed',
+        'zd-grid__selectable-cell',
+      ]"
+    ></td>
+    <zd-grid-cell
+      v-for="(column, index) in columns" :key="column.name"
+      :row="row"
+      :column="column"
+      :cssClass="[
+        {
+          'zd-grid__cell--fixed': column.fixed,
+          'zd-grid__action-cell--fixed': column.actionFixed,
+        },
+      ]"
+      :cssStyle="[{
+        left: column.fixed ? fixedLeft[column.name] : 'unset',
+        right: column.actionFixed ? fixedRight[column.name] : 'unset',
+      }]"
+      :cellSelection="cellSelection"
+      :isCurrent="isCurrent({ row, column })"
+      v-memo="[row, column, fixedLeft, fixedRight, cellSelection, isCurrent({ row, column })]"
+      @focus="cellFocus($event, column)"
+      @focusin="focusin($event, column)"
+    >
+      <template #prepend>
+        <tek-grid-indentation
+          v-if="index === 0"
+          footer
+          :level="getLevel(row)"
+        ></tek-grid-indentation>
+      </template>
+    </zd-grid-cell>
+  </table-row>
+</template>
+
+<script lang="ts" src="./TekGridFooterRow"></script>
+
+<style lang="scss">
+.tek-grid-footer-row {
+  &--summary {
+    background: var(--row-active-color);
+
+    .zd-grid__cell-content {
+      font-size: 15px;
+    }
+  }
+
+  .zd-grid__cell-content {
+    padding: 0 8px;
+    font-weight: bold;
+  }
+}
+</style>

package/src/components/tek-grid/row/TekGridGroupRow.ts

@@ -0,0 +1,65 @@
+import { GridColumn } from '@zeedhi/common';
+import { IDictionary } from '@zeedhi/core';
+import { PropType, defineComponent } from 'vue';
+
+export default defineComponent({
+	props: {
+		isSelected: {
+			type: Boolean,
+			required: true,
+		},
+		isCurrentRow: {
+			type: Boolean,
+			required: true,
+		},
+		selectable: {
+			type: Boolean,
+			required: true,
+		},
+		selectionDisabled: {
+			type: Boolean,
+			required: true,
+		},
+		cellSelection: {
+			type: Boolean,
+			required: true,
+		},
+		isCurrent: {
+			type: Function as PropType<(args: { row: IDictionary; column?: GridColumn }) => boolean>,
+			required: true,
+		},
+		row: {
+			type: Object as PropType<IDictionary>,
+			required: true,
+		},
+		indeterminate: {
+			type: Boolean,
+			required: true,
+		},
+	},
+	emits: ['click', 'checkboxClick', 'focusin', 'expandClick'],
+	setup(props, { emit }) {
+		const click = (event: Event) => {
+			emit('click', event);
+		};
+
+		const checkboxClick = (event: Event) => {
+			emit('checkboxClick', event);
+		};
+
+		const focusin = (event: Event) => {
+			emit('focusin', { event, row: props.row });
+		};
+
+		const expandClick = (event: Event) => {
+			emit('expandClick', { event, row: props.row });
+		};
+
+		return {
+			click,
+			focusin,
+			checkboxClick,
+			expandClick,
+		};
+	},
+});

package/src/components/tek-grid/row/TekGridGroupRow.vue

@@ -0,0 +1,65 @@
+<template>
+  <table-row
+    :class="[
+      'tek-grid-group-row',
+      { 'tek-grid-row-group--summary': row.groupSummary }
+    ]"
+    :isCurrentRow="isCurrentRow"
+    @click="click($event)"
+  >
+    <zd-grid-checkbox
+      v-if="selectable"
+      :disabled="selectionDisabled"
+      :isSelected="isSelected"
+      :indeterminate="indeterminate"
+      :cellSelection="cellSelection"
+      :isCurrent="isCurrent({ row })"
+      @focusin="focusin($event)"
+      @click.stop="checkboxClick($event)"
+    />
+
+    <td
+      :colspan="999"
+      :class="
+        [
+          'zd-grid__cell',
+          'text-left',
+          'tek-grid-group-cell',
+          'zd-grid__cell--fixed',
+        ]"
+      :style="`left: ${(selectable ? 40 : 0)}px`"
+      :tabindex="cellSelection ? 0 : ''"
+    >
+      <span
+        :class="[
+          'tek-grid-group-cell__container'
+        ]"
+        :style="`left: ${(selectable ? 48 : 8)}px`"
+      >
+        <tek-grid-indentation
+          :level="row.groupHeaders.length"
+        ></tek-grid-indentation>
+        <v-icon
+          :class="{ closed: !row.groupOpened }"
+          @click="expandClick($event)"
+          :key="`${row.groupIndex}_${row.groupValue}`"
+        >{{ $getIcon('expand') }}</v-icon>
+        <span class="tek-grid__group-text zd-ml-2">{{ (row.groupLabel? row.groupLabel + ': ': '') + row.groupValue }}</span>
+      </span>
+    </td>
+  </table-row>
+</template>
+
+<script lang="ts" src="./TekGridGroupRow"></script>
+
+<style lang="scss">
+.tek-grid-group-cell {
+  font-weight: bold;
+
+  &__container {
+    height: 100%;
+    align-items: center;
+    position: sticky;
+  }
+}
+</style>

package/src/components/tooltip-overflow/ZdTooltipOverflow.ts

@@ -0,0 +1,63 @@
+import { computed, defineComponent, onMounted, onUnmounted, ref, useTemplateRef } from 'vue';
+
+export default defineComponent({
+	props: {
+		overflow: {
+			type: [String, Number],
+		},
+		value: {
+			type: [String, Number, Boolean],
+		},
+		classes: {
+			type: Array,
+			default: () => [],
+		},
+		styles: {
+			type: Array,
+			default: () => [],
+		},
+		tag: {
+			type: String,
+			default: 'span',
+		},
+	},
+	emits: ['click'],
+	setup(props, { emit }) {
+		let observer: ResizeObserver;
+
+		const labelRef = useTemplateRef<HTMLElement | null>('value');
+		const clientWidth = ref(0);
+
+		onMounted(() => {
+			observer = new ResizeObserver(() => {
+				if (labelRef.value) {
+					clientWidth.value = labelRef.value.clientWidth;
+				}
+			});
+			if (labelRef.value) observer.observe(labelRef.value);
+		});
+
+		onUnmounted(() => {
+			if (observer) observer.disconnect();
+		});
+
+		const tooltipDisabled = computed(() => {
+			const labelEl = labelRef.value;
+			if (!labelEl) return true;
+
+			const overflow = clientWidth.value < labelEl.scrollWidth;
+
+			return !(overflow || Number.isInteger(props.overflow));
+		});
+
+		const click = (event: Event) => {
+			emit('click', event);
+		};
+
+		const isNumber = (overflow?: string | number) => {
+			return typeof overflow === 'number' || !Number.isNaN(Number(overflow));
+		};
+
+		return { tooltipDisabled, click, isNumber };
+	},
+});

package/src/components/tooltip-overflow/ZdTooltipOverflow.vue

@@ -0,0 +1,63 @@
+<template>
+  <component
+    :is="tag"
+    v-bind="{
+      ref: 'value'
+    }"
+    :class="[
+      'zd-tooltip-overflow',
+      {
+        'zd-tooltip-overflow--hidden': overflow === 'hidden',
+        'zd-tooltip-overflow--wrap': overflow === 'wrap',
+        'zd-tooltip-overflow--ellipsis': overflow === 'ellipsis',
+      },
+      isNumber(overflow)
+        ? `zd-tooltip-overflow--clamp zd-tooltip-overflow--clamp-${overflow}`
+        : '',
+      ...classes,
+    ]"
+    :style="styles"
+    @click="click($event)"
+  >
+    <v-tooltip
+      location="bottom"
+      :openOnClick="false"
+      :text="$t(String(value))"
+      :disabled="tooltipDisabled"
+      activator="parent"
+    ></v-tooltip>
+    <slot></slot>
+  </component>
+</template>
+
+<script lang="ts" src="./ZdTooltipOverflow.ts"></script>
+
+<style lang="scss" scoped>
+.zd-tooltip-overflow {
+  &--hidden {
+    text-overflow: unset;
+  }
+
+  &--wrap {
+    white-space: pre-wrap;
+  }
+
+  &--clamp {
+    white-space: normal;
+    -webkit-box-orient: vertical;
+    display: -webkit-box;
+
+    &-2 { -webkit-line-clamp: 2; }
+    &-3 { -webkit-line-clamp: 3; }
+    &-4 { -webkit-line-clamp: 4; }
+    &-5 { -webkit-line-clamp: 5; }
+  }
+
+  &--ellipsis {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    overflow-wrap: break-word;
+    white-space: pre;
+  }
+}
+</style>

package/src/components/zd-activator-wrapper/ZdActivatorWrapper.ts

@@ -0,0 +1,37 @@
+import { IEventParam } from '@zeedhi/core';
+import { defineComponent } from 'vue';
+
+/**
+ * Component used as a wrapper for zeedhi components to make the events
+ * compatible with VTooltip and VMenu
+ */
+const component = defineComponent({
+	props: {
+		childProps: {
+			type: Object,
+			required: true,
+		},
+		parent: {
+			type: Object,
+		},
+	},
+	inheritAttrs: false,
+	setup(_props, ctx) {
+		/**
+		 * Receives a zd-event and reemits in a format compatible with VTooltip and VMenu
+		 */
+		const reemitEvent = (param: IEventParam<any> | Event, name: string) => {
+			if (param instanceof Event) {
+				ctx.emit(name, param);
+				return;
+			}
+			ctx.emit(name, param.event);
+		};
+
+		return {
+			reemitEvent,
+		};
+	},
+});
+
+export default component;