@zeedhi/vuetify 1.112.0 → 3.0.0

package/src/components/zd-grid/row/ZdGridRow.ts

@@ -0,0 +1,78 @@
+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,
+		},
+		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: ['click', 'checkboxClick', 'focusin', 'cellFocus', 'cellClick'],
+	setup(props, { emit }) {
+		const click = (event: Event) => {
+			emit('click', event);
+		};
+
+		const checkboxClick = (event: Event) => {
+			emit('checkboxClick', event);
+		};
+
+		const focusin = (event: Event, column?: GridColumn) => {
+			emit('focusin', { event, row: props.row, column });
+		};
+
+		const cellFocus = (event: Event, column: GridColumn) => {
+			emit('cellFocus', { event, row: props.row, column });
+		};
+
+		const cellClick = (event: Event, column: GridColumn) => {
+			emit('cellClick', { event, row: props.row, column });
+		};
+
+		return {
+			click,
+			focusin,
+			checkboxClick,
+			cellFocus,
+			cellClick,
+		};
+	},
+});

package/src/components/zd-grid/row/ZdGridRow.vue

@@ -0,0 +1,47 @@
+<template>
+  <table-row
+    :isSelected="isSelected"
+    :isCurrentRow="isCurrentRow"
+    @click="click($event)"
+  >
+    <zd-grid-checkbox
+      v-if="selectable"
+      :disabled="selectionDisabled"
+      :isSelected="isSelected"
+      :cellSelection="cellSelection"
+      :isCurrent="isCurrent({ row })"
+      @focusin="focusin($event)"
+      @click.stop="checkboxClick($event)"
+    />
+    <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)"
+      @click="cellClick($event, column)"
+    >
+      <template #prepend>
+        <slot name="cell-prepend" :index="index"></slot>
+      </template>
+    </zd-grid-cell>
+  </table-row>
+</template>
+
+<script lang="ts" src="./ZdGridRow"></script>
+
+<style lang="scss">
+</style>

package/src/components/zd-grid/toolbar/ZdGridToolbar.ts

@@ -0,0 +1,19 @@
+import { useHasSlot } from 'packages/vuetify/src/composables/hasSlot';
+import { defineComponent } from 'vue';
+import { useGridInstance } from '../composables/grid-instance';
+
+export default defineComponent({
+	props: {},
+	setup() {
+		const slots = useHasSlot();
+
+		const hasDefaultSlot = !!slots.default?.hasContent;
+
+		const instance = useGridInstance();
+
+		return {
+			hasDefaultSlot,
+			instance,
+		};
+	},
+});

package/src/components/zd-grid/toolbar/ZdGridToolbar.vue

@@ -0,0 +1,36 @@
+<template>
+  <div
+    v-if="instance.toolbarSlot.length || hasDefaultSlot"
+    :id="instance.name + '-top'"
+    ref="header"
+    class="zd-grid__toolbar"
+  >
+    <div class="zd-grid__toolbar-content">
+      <component v-for="(child, index) in instance.toolbarSlot"
+        :key="index"
+        :is="child.component"
+        :parent="instance"
+        v-bind="child"
+      ></component>
+      <slot></slot>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" src="./ZdGridToolbar.ts"></script>
+
+<style lang="scss">
+.zd-grid__toolbar {
+  display: flex;
+  justify-content: space-between;
+  margin-bottom: var(--spacing-4);
+  align-items: center;
+  flex: 0 0 auto;
+
+  &-content {
+    width: 100%;
+    display: flex;
+    align-items: center;
+  }
+}
+</style>

package/src/components/zd-grid-editable/ZdGridEditable.ts

@@ -0,0 +1,235 @@
+import { GridColumnEditable, GridEditable, IGridEditable, Input, Toggleable } from '@zeedhi/common';
+import { IDictionary, InstanceNotFoundError } from '@zeedhi/core';
+import {
+	ComponentPublicInstance,
+	ComputedRef,
+	PropType,
+	ShallowRef,
+	UnwrapNestedRefs,
+	UnwrapRef,
+	defineComponent,
+	ref,
+	watch,
+} from 'vue';
+import { useDoubleClick } from '../../composables';
+import { RowNotFoundError } from '../../errors';
+import { buildProps } from '../../utils';
+import { getRootElement, useCreateInstance } from '../zd-component/ZdComponent';
+import { ZdGridProps, useGridInstance } from '../zd-grid/ZdGrid';
+
+export const ZdGridEditableProps = buildProps({
+	...ZdGridProps,
+	doubleClickEdit: {
+		type: [String, Boolean] as PropType<boolean | string>,
+		default: false,
+	},
+	editingNewRows: {
+		type: [Boolean, String] as PropType<boolean | string>,
+		default: false,
+	},
+	singleEdit: {
+		type: [Boolean, String] as PropType<boolean | string>,
+		default: false,
+	},
+	showCancelColumn: {
+		type: [Boolean, String] as PropType<boolean | string>,
+		default: false,
+	},
+	canEditRow: {
+		type: [Function, String],
+	},
+});
+
+export function useGridEditableInstance({
+	instance,
+	root,
+	renderedData,
+}: {
+	instance: UnwrapNestedRefs<IGridEditable>;
+	root: Readonly<ShallowRef<ComponentPublicInstance | null>>;
+	renderedData?: ComputedRef<IDictionary<any>[]>;
+}) {
+	const rootEl = getRootElement(root);
+
+	const gridScope = useGridInstance({ instance, root, renderedData });
+
+	const { doubleClick } = useDoubleClick();
+
+	const editingCell = ref<{ key: string | number; column?: string } | null>(null);
+
+	const isEditing = ({ row, column }: { row: IDictionary; column?: UnwrapRef<GridColumnEditable> }) => {
+		if (!instance.singleEdit) return instance.editing;
+
+		const rowCheck = editingCell.value?.key === instance.getRowKey(row);
+		if (!column) return rowCheck;
+
+		return rowCheck && editingCell.value?.column === column.name;
+	};
+
+	watch(
+		() => instance.editing,
+		() => {
+			if (!instance.editing) {
+				editingCell.value = null;
+			}
+		},
+	);
+
+	const isCellEditable = (row: IDictionary, column: GridColumnEditable) => {
+		const cellsApplied = instance.getAppliedConditions({ row, column });
+		const canEdit = instance.getCanEditRow(row);
+		return (cellsApplied.editable ?? column.editable) && (canEdit ?? true);
+	};
+
+	const enterEdit = ({ row, column }: { row: IDictionary; column: GridColumnEditable }) => {
+		if (isEditing({ row, column })) return;
+
+		const key = instance.getRowKey(row);
+		editingCell.value = { key, column: column.name };
+
+		setTimeout(() => {
+			const key = instance.getRowKey(row);
+
+			try {
+				const component = instance.getComponent<Input>(String(key), column.name);
+				component?.setFocus();
+
+				if (component instanceof Toggleable) {
+					component.toggleValue();
+					component.change();
+				}
+			} catch (e) {
+				if (!(e instanceof InstanceNotFoundError)) throw e;
+			}
+		});
+	};
+
+	const viewEnterEdit = (key: string, columnName: string) => {
+		editingCell.value = { key, column: columnName };
+		const row = instance.findRow(key);
+
+		if (!row) {
+			throw new RowNotFoundError(key);
+		}
+
+		const column = instance.getColumn(columnName);
+		instance.inlineEdit(row, column, undefined, rootEl.value);
+	};
+
+	instance.setViewEnterEdit(viewEnterEdit);
+
+	let mousedownCalled = false;
+
+	const cellClick = ({ row, column, event }: { row: IDictionary<any>; column: GridColumnEditable; event: Event }) => {
+		mousedownCalled = false;
+
+		if (!instance.doubleClickEdit || !column.editable) {
+			callCellClick(row, column, event);
+			return;
+		}
+
+		doubleClick(
+			() => instance.cellClickEvent(row, column, event, rootEl.value),
+			() => callCellClick(row, column, event),
+			event,
+		);
+	};
+
+	const callCellClick = (row: IDictionary<any>, column: GridColumnEditable, event: Event) => {
+		if (isCellEditable(row, column)) enterEdit({ row, column });
+
+		instance.cellClick(row, column, event, rootEl.value);
+	};
+
+	const cellFocus = ({ row, column }: { row: IDictionary; column: GridColumnEditable }) => {
+		instance.selectCell(row, column);
+
+		if (!isCellEditable(row, column)) return;
+
+		if (mousedownCalled && instance.singleEdit) {
+			mousedownCalled = false;
+			return;
+		}
+
+		enterEdit({ row, column });
+	};
+
+	const rowClick = (row: IDictionary<any>, event: Event) => {
+		instance.rowClick(row, event, gridScope.rootEl.value);
+	};
+
+	const cellEnterEdit = ({ row, column }: { row: IDictionary<any>; column: GridColumnEditable }) => {
+		instance.inlineEdit(row, column, undefined, rootEl.value);
+	};
+
+	const updateSortBy = (sortBy: { key: string; order: 'asc' | 'desc' }[]) => {
+		if (instance.editing) return;
+
+		instance.changeOrder(sortBy);
+	};
+
+	const cellKeydown = ({
+		row,
+		column,
+		event,
+	}: { event: KeyboardEvent; row: IDictionary; column: GridColumnEditable }) => {
+		if (isEditing({ row, column })) return;
+
+		if (pressedControlKey(event)) return;
+
+		const inputValue = event.key === 'Backspace' || event.key === 'Delete' ? '' : event.key;
+
+		enterEdit({ row, column });
+		instance.inlineEdit(row, column, undefined, rootEl.value);
+
+		setTimeout(() => {
+			try {
+				const key = instance.getRowKey(row);
+				const input = instance.getComponent<Input>(String(key), column.name);
+				input.value = inputValue;
+				input.displayValue = inputValue;
+			} catch (e) {
+				if (e instanceof InstanceNotFoundError) return;
+
+				throw e;
+			}
+		});
+	};
+
+	const pressedControlKey = (event: KeyboardEvent) => {
+		const key = event.key;
+		// if length > 1 means it pressed a control key
+		return (key.length > 1 && key !== 'Backspace' && key !== 'Delete') || event.ctrlKey || event.altKey;
+	};
+
+	return {
+		...gridScope,
+		instance,
+		root,
+		updateSortBy,
+		isEditing,
+		cellClick,
+		cellFocus,
+		rowClick,
+		editingCell,
+		cellEnterEdit,
+		cellKeydown,
+	};
+}
+
+const gridEditableComponent = defineComponent({
+	props: ZdGridEditableProps,
+	inheritAttrs: false,
+	setup(props, ctx) {
+		const { instance, root } = useCreateInstance<GridEditable, ComponentPublicInstance>(props, ctx, GridEditable);
+		const gridEditableScope = useGridEditableInstance({ instance, root });
+
+		return {
+			...gridEditableScope,
+			instance,
+			root,
+		};
+	},
+});
+
+export default gridEditableComponent;

package/src/components/zd-grid-editable/ZdGridEditable.vue

@@ -0,0 +1,160 @@
+<template>
+  <v-data-table
+    v-show="instance.isVisible"
+    ref="root"
+    :id="instance.name"
+    v-model="selectedRows"
+    :class="[
+      'zd-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="computedData"
+    :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 }"
+    >
+      <zd-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"
+        @resizeMousedown="resizeMouseDownHandler($event.column, $event.event)"
+        @resizeClick="resizeClickHandler($event.event)"
+        @selectAllClick="selectAllClick($event)"
+      ></zd-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="{ items, internalItems, isSelected }"
+    >
+      <template v-for="(item, i) in items">
+        <zd-grid-editable-row
+          v-if="shouldRender(i)"
+          :key="item.id"
+          :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)"
+        ></zd-grid-editable-row>
+      </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="./ZdGridEditable.ts"></script>
+
+<style lang="scss">
+</style>