@zeedhi/teknisa-components-vuetify 3.0.4 → 3.2.0

package/src/components/tek-grid/TekGrid.vue

@@ -1,235 +0,0 @@
-<template>
-  <v-data-table
-    v-show="instance.isVisible"
-    ref="root"
-    :id="instance.name"
-    v-model="selectedRows"
-    :class="[
-      'zd-grid',
-      'tek-grid',
-      'zd-grid-editable',
-      instance.cssClass,
-      {
-        'zd-grid--loading': instance.datasource.loading,
-        'zd-grid--cell-selection': instance.cellSelection,
-      },
-    ]"
-    :style="[
-      cssColorVars,
-      {
-        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),
-    ]"
-    :theme="instance.theme"
-    sort-asc-icon="$collapse"
-    sort-desc-icon="$expand"
-    fixed-header
-    multi-sort
-    hide-default-footer
-    :name="instance.name"
-    :headers="headers"
-    :items="renderedData"
-    :search="instance.datasource.search"
-    :density="instance.dense ? 'compact' : 'default'"
-    :loading="instance.datasource.loading"
-    :item-value="instance.datasource.uniqueKey"
-    :items-per-page="-1"
-    no-filter
-    :sort-by="sortBy"
-    disable-sort
-    return-object
-    tabindex="0"
-    @update:sort-by="updateSortBy($event)"
-  >
-    <template v-slot:top>
-      <zd-grid-toolbar v-if="!hasToolbarSlot"></zd-grid-toolbar>
-      <slot name="toolbarSlot"></slot>
-    </template>
-
-    <template
-      v-slot:headers="{ columns: tableColumns, isSorted, getSortIcon, toggleSort, sortBy }"
-    >
-      <tek-grid-header-row
-        v-if="instance.showHeader"
-        :name="instance.name"
-        :selectable="instance.selectable"
-        :headerBackground="instance.headerBackground"
-        :showSelectAll="instance.showSelectAll"
-        :allselectedState="allselectedState"
-        :visibleColumns="visibleColumns"
-        :dragColumns="instance.dragColumns"
-        :headerCellTextColor="instance.headerCellTextColor"
-        :resizeColumns="instance.resizeColumns"
-        :getSortIcon="getSortIcon"
-        :toggleSort="toggleSort"
-        :sortBy="sortBy"
-        :tableColumns="tableColumns"
-        :isSorted="isSorted"
-        :disableCheckbox="instance.editing"
-        :instanceName="instance.name"
-        :filterRelationsDatasource="instance.filterRelationsDatasource"
-        :filterOperationsDatasource="instance.filterOperationsDatasource"
-        :modelValue="filter"
-        :columnFilterButton="instance.columnFilterButton"
-        :columnHasFilter="columnHasFilter"
-        :level="groupColumnNames.length"
-        @update:modelValue="setFilter($event)"
-        @resizeMousedown="resizeMouseDownHandler($event.column, $event.event)"
-        @resizeClick="resizeClickHandler($event.event)"
-        @selectAllClick="selectAllClick($event)"
-      ></tek-grid-header-row>
-    </template>
-
-    <template
-      v-if="addTopPadding()"
-      v-slot:body.prepend="{ headers }"
-    >
-      <tr>
-        <td
-          :colspan="headers.length"
-          :style="`padding-top:${scrollData.startHeight}px`"
-        >
-        </td>
-      </tr>
-    </template>
-
-    <template
-      v-if="addBottomPadding()"
-      v-slot:body.append="{ headers }"
-    >
-      <tr>
-        <td
-          :colspan="headers.length"
-          :style="`padding-top:${scrollData.endHeight}px`"
-        >
-        </td>
-      </tr>
-    </template>
-
-    <template
-      v-if="instance.datasource.data.length"
-      v-slot:body="{ internalItems, isSelected }"
-    >
-      <template v-for="(item, i) in visibleData">
-        <template v-if="isRowVisible(item, i)">
-          <tek-grid-group-row
-            v-if="isGroup(item)"
-            :key="item.groupColumnName + item.groupValue"
-            :row="item"
-            :is-current-row="isCurrentRowGroup(item)"
-            :selectable="instance.selectable"
-            :selectionDisabled="instance.callDisableSelection(item)"
-            :cellSelection="instance.cellSelection"
-            :is-current="isCurrent"
-            :isSelected="isGroupSelected(item)"
-            :indeterminate="isGroupSelectIndeterminate(item)"
-            @click="rowClick(item, $event)"
-            @checkboxClick="selectGroup(item, $event)"
-            @focusin="cellFocusIn($event)"
-            @expandClick="openGroup(item)"
-          ></tek-grid-group-row>
-
-          <zd-grid-editable-row
-            v-else-if="!isFooter(item)"
-            :key="instance.getRowKey(item)"
-            :isSelected="isSelected(internalItems[i])"
-            :isCurrentRow="isCurrentRow(item)"
-            :selectable="instance.selectable"
-            :selectionDisabled="instance.callDisableSelection(item)"
-            :cellSelection="instance.cellSelection"
-            :isCurrent="isCurrent"
-            :columns="visibleColumns"
-            :row="item"
-            :fixedLeft="fixedLeft"
-            :fixedRight="fixedRight"
-            :isEditing="isEditing"
-            @cellFocus="cellFocus($event)"
-            @cellClick="cellClick($event)"
-            @click="rowClick(item, $event)"
-            @focusin="cellFocusIn($event)"
-            @checkboxClick="selectRowClick(item, !isSelected(internalItems[i]), $event)"
-            @cellEnterEdit="cellEnterEdit($event)"
-            @cellKeydown="cellKeydown($event)"
-          >
-            <template #cell-prepend="{ index }">
-              <tek-grid-indentation
-                v-if="index === 0 && groupColumnNames.length > 0"
-                :level="item.groupHeaders?.length"
-              ></tek-grid-indentation>
-            </template>
-          </zd-grid-editable-row>
-
-          <tek-grid-footer-row
-            v-else
-            :key="'footer' + item.groupColumnName + item.groupValue"
-            :isSelected="isSelected(internalItems[i])"
-            :selectable="instance.selectable"
-            :selectionDisabled="instance.callDisableSelection(item)"
-            :cellSelection="instance.cellSelection"
-            :isCurrent="isCurrent"
-            :columns="visibleColumns"
-            :row="item"
-            :fixedLeft="fixedLeft"
-            :fixedRight="fixedRight"
-            @cellFocus="cellFocus($event)"
-            @focusin="cellFocusIn($event)"
-          ></tek-grid-footer-row>
-        </template>
-      </template>
-    </template>
-
-    <template v-slot:no-data>
-      <zd-iterable-no-data>
-        <template v-slot:errorSlot>
-          <slot name="errorSlot"></slot>
-        </template>
-        <template v-slot:noResultSlot>
-          <slot name="noResultSlot"></slot>
-        </template>
-        <template v-slot:noDataSlot>
-          <slot name="noDataSlot"></slot>
-        </template>
-      </zd-iterable-no-data>
-    </template>
-
-    <template v-slot:bottom>
-      <zd-grid-footer v-if="instance.showFooter && !hasFooterSlot"></zd-grid-footer>
-      <slot name="footerSlot"></slot>
-    </template>
-  </v-data-table>
-</template>
-
-<script lang="ts" src="./TekGrid.ts"></script>
-
-<style lang="scss">
-.tek-grid {
-  .zd-grid__row:not(.tek-grid-group-row) {
-    :nth-child(1 of td:not(.zd-grid__selectable-cell)) {
-      display: flex;
-    }
-  }
-
-  .is-rotated {
-    transform: rotate(180deg);
-    transition: transform 0.3s ease;
-  }
-
-  .zd-grid__toolbar {
-    height: 38px;
-
-    .toolbar-divider {
-      margin: 10px;
-    }
-
-    .zd-search {
-      width: 200px;
-    }
-  }
-}
-</style>

package/src/components/tek-grid/column-filter/TekGridColumnFilter.ts

@@ -1,244 +0,0 @@
-import { Input, Radio, Select } from '@zeedhi/common';
-import { IDynamicFilterItem } from '@zeedhi/teknisa-components-common';
-import { Config, IEventParam, Metadata, Utils, dayjs } from '@zeedhi/core';
-import cloneDeep from 'lodash.clonedeep';
-import debounce from 'lodash.debounce';
-import { PropType, computed, defineComponent, reactive } from 'vue';
-import { isArrayOperation } from '../../../utils/isArrayOperation';
-
-export const TekGridColumnFilterProps = {
-	hasFilterData: {
-		type: Boolean,
-		default: false,
-	},
-	column: {
-		type: Object,
-		required: true,
-	},
-	modelValue: {
-		type: Array as PropType<IDynamicFilterItem[]>,
-		default: [],
-	},
-	instanceName: {
-		type: String,
-		required: true,
-	},
-	filterRelationsDatasource: {
-		type: [Object, null] as PropType<boolean | null>,
-		required: false,
-	},
-	filterOperationsDatasource: {
-		type: [Object, null] as PropType<boolean | null>,
-		required: false,
-	},
-	isHovering: {
-		type: Boolean,
-		default: false,
-	},
-	multiple: {
-		type: Boolean,
-		required: true,
-	},
-} as const;
-
-type InputType = Input | Select | Radio;
-
-const tekGridColumnFilter = defineComponent({
-	props: TekGridColumnFilterProps,
-	inheritAttrs: false,
-	emits: ['update:modelValue'],
-	setup(props, ctx) {
-		const getValueInputName = (index: number) => `${props.instanceName}-${props.column.name}-filter-value-${index}`;
-
-		const focusValueInput = (index: number) => {
-			const valueInputName = getValueInputName(index);
-			const input = Metadata.getInstance<Input>(valueInputName);
-
-			input.setFocus();
-		};
-
-		const createNewFilter = () => {
-			return reactive<IDynamicFilterItem>({
-				operation: 'CONTAINS',
-				relation: 'AND',
-				value: undefined,
-			});
-		};
-
-		let newFilter = createNewFilter();
-
-		const convertToDateFormat = (value: string, revert: boolean) => {
-			const dateFormat = props.column!.componentProps.dateFormat || Config.dateFormat;
-			const displayFormat = props.column!.componentProps.displayFormat || Config.displayFormat;
-
-			if (revert) {
-				if (dayjs(value, displayFormat).isValid() || !dayjs(value, dateFormat).isValid()) {
-					return value;
-				}
-				return dayjs(value, dateFormat).format(displayFormat);
-			}
-
-			if (dayjs(value, dateFormat).isValid() || !dayjs(value, displayFormat).isValid()) {
-				return value;
-			}
-			return dayjs(value, displayFormat).format(dateFormat);
-		};
-
-		const checkDateValueFormat = (value: string | string[], revert = false) => {
-			if (!['ZdDate', 'ZdDateRange'].includes(props.column!.componentProps.component)) return value;
-
-			if (Array.isArray(value)) {
-				return value.map((item) => convertToDateFormat(item, revert));
-			}
-			return convertToDateFormat(value, revert);
-		};
-
-		// use WeakMap to avoid memory leaks
-		const idMap = new WeakMap<object, string>();
-		let idCounter = 0;
-
-		// retrieves a unique id for each item
-		const getId = (item: object) => {
-			if (!idMap.has(item)) {
-				idMap.set(item, `__item__${idCounter++}`);
-			}
-			return idMap.get(item)!;
-		};
-
-		// use computed to generate unique ids for each filter item
-		// this is needed for the v-for :key updates
-		const modelWithIds = computed(() => {
-			if (!props.multiple) {
-				if (props.modelValue.length > 0) {
-					return [{ id: getId(props.modelValue[0]), item: props.modelValue[0] }];
-				}
-
-				return [{ id: getId(newFilter), item: newFilter }];
-			}
-
-			return [...props.modelValue, newFilter].map((item) => ({
-				id: getId(item),
-				item,
-			}));
-		});
-
-		const debounceUpdateModel = debounce((modelValue: IDynamicFilterItem[]) => {
-			if (Utils.isEqual(modelValue, props.modelValue)) return;
-			ctx.emit('update:modelValue', modelValue);
-			newFilter = createNewFilter();
-		}, 500);
-
-		const changeRelation = (index: number, { component }: IEventParam<InputType>) => {
-			const modelValue = cloneDeep(props.modelValue);
-			const isNewFilter = index === modelValue.length;
-			const filter = isNewFilter ? newFilter : modelValue[index];
-			const { value } = component;
-
-			focusValueInput(index);
-
-			// update item type value
-			filter.relation = value;
-
-			if (isNewFilter) return;
-
-			debounceUpdateModel(modelValue);
-		};
-
-		const changeOperation = (index: number, { component }: IEventParam<InputType>) => {
-			const modelValue = cloneDeep(props.modelValue);
-			const filterItem = modelValue[index];
-			const isNewFilter = index === modelValue.length;
-			const filter = isNewFilter ? newFilter : filterItem;
-			const { value } = component;
-
-			focusValueInput(index);
-
-			// if operation is IN, NOT_IN or BETWEEN, value should be an array
-			if (isArrayOperation(value)) {
-				filter.value = Array.isArray(filterItem.value) ? filterItem.value : [filterItem.value];
-			}
-
-			// update item type value
-			filter.operation = value;
-
-			if (isNewFilter) return;
-
-			debounceUpdateModel(modelValue);
-		};
-
-		const changeValue = (item: IDynamicFilterItem, index: number, { component }: IEventParam<InputType>) => {
-			const modelValue = cloneDeep(props.modelValue);
-			const filter = cloneDeep(item);
-			const { value } = component;
-			const isNewFilter = props.multiple && index === modelValue.length;
-			let formattedValue = value;
-
-			if (value && isArrayOperation(filter.operation)) {
-				formattedValue = value.split(';');
-			}
-
-			filter.value = checkDateValueFormat(formattedValue);
-
-			if (!props.multiple) {
-				debounceUpdateModel([filter]);
-				return;
-			}
-
-			if (isNewFilter) {
-				// only emit event when newFilter has value
-				if (!filter.value) return;
-
-				debounceUpdateModel([...modelValue, filter]);
-				return;
-			}
-
-			if (!filter.value) {
-				// when removing the last (not new) filter, should pass its operation and relation to the new filter
-				if (index === modelValue.length - 1) {
-					newFilter.operation = filter.operation;
-					newFilter.relation = filter.relation;
-				}
-
-				modelValue.splice(index, 1);
-
-				// if the removed filter was the first, should set the new first relation to AND
-				if (modelValue.length > 0 && index === 0) {
-					modelValue[0].relation = 'AND';
-				}
-
-				// if the removed filter was the last, should set the newFilter relation to AND
-				if (modelValue.length === 0) {
-					newFilter.relation = 'AND';
-				}
-			}
-
-			debounceUpdateModel(modelValue);
-		};
-
-		const getComponentType = (operation: string) => {
-			return isArrayOperation(operation) ? 'ZdTextInput' : props.column.componentProps.component;
-		};
-
-		const getComponentHint = (operation: string) => {
-			return isArrayOperation(operation) ? 'TEKGRID_MULTIPLE_VALUE_HINT' : '';
-		};
-
-		const getItemValue = (item: IDynamicFilterItem) => {
-			return isArrayOperation(item.operation) ? item.value.join(';') : item.value;
-		};
-
-		return {
-			changeValue,
-			changeRelation,
-			changeOperation,
-			getValueInputName,
-			newFilter,
-			getComponentType,
-			getComponentHint,
-			modelWithIds,
-			getItemValue,
-		};
-	},
-});
-
-export default tekGridColumnFilter;

package/src/components/tek-grid/column-filter/TekGridColumnFilter.vue

@@ -1,93 +0,0 @@
-<template>
-  <v-menu
-    offset-overflow
-    offset-y
-    transition="scale-transition"
-    content-class="tek-grid-column-filter__menu"
-    :close-on-content-click="false"
-  >
-    <template #activator="{ props }">
-      <zd-grid-header-icon
-        v-bind="props"
-        :icon="$getIcon('filter')"
-        :hidden="!isHovering && !hasFilterData"
-        :color="hasFilterData ? 'primary' : ''"
-      ></zd-grid-header-icon>
-    </template>
-
-    <v-card
-      class="zd-pa-4 zd-pb-0"
-      :min-width="200"
-      :max-height="300"
-    >
-      <template
-        v-for="({ item, id }, filterIndex) in modelWithIds"
-        :key="id"
-      >
-        <!-- relation -->
-        <zd-radio
-          v-if="multiple && filterIndex > 0"
-          :name="`${instanceName}-${column.name}-filter-relation-${filterIndex}`"
-          v-bind="{
-            showLabel: false,
-            showHelper: false,
-            vertical: false,
-            cssClass: 'zd-mb-2',
-            datasource: filterRelationsDatasource,
-            dataValue: 'value',
-            dataLabel: 'text',
-            value: item.relation,
-            events: {
-              change: (params) => changeRelation(filterIndex, params),
-            },
-          }"
-        />
-
-        <!-- operation -->
-        <zd-select
-          v-if="multiple && item.operation"
-          :name="`${instanceName}-${column.name}-filter-operation-${filterIndex}`"
-          v-bind="{
-            autocomplete: false,
-            showLabel: false,
-            showHelper: false,
-            clearable: false,
-            cssClass: 'zd-mb-2',
-            datasource: filterOperationsDatasource,
-            dataValue: 'value',
-            dataText: 'text',
-            value: item.operation,
-            events: {
-              change: (params) => changeOperation(filterIndex, params),
-            },
-          }"
-        />
-
-        <!-- value -->
-        <component
-          :name="`${instanceName}-${column.name}-filter-value-${filterIndex}`"
-          :is="getComponentType(item.operation)"
-          v-bind="{
-            ...column.componentProps,
-            showLabel: false,
-            showHelper: true,
-            autofill: false,
-            cssClass: 'zd-mb-2',
-            value: getItemValue(item),
-            persistentHint: true,
-            hint: getComponentHint(item.operation),
-            events: {
-              input: (params) => changeValue(item, filterIndex, params),
-              change: (params) => changeValue(item, filterIndex, params),
-            },
-          }"
-        />
-      </template>
-    </v-card>
-  </v-menu>
-</template>
-
-<script lang="ts" src="./TekGridColumnFilter.ts"></script>
-
-<style lang="scss">
-</style>