@zeedhi/vuetify 1.112.0 → 3.0.0

package/src/components/zd-tree/ZdTreeCheckbox.ts

@@ -0,0 +1,110 @@
+import type { ITreeNodeModel } from '@zeedhi/common';
+import type { IDictionary } from '@zeedhi/core';
+import { computed, defineComponent, nextTick, ref, watch } from 'vue';
+import type { PropType } from 'vue';
+import { buildProps } from '../../utils/buildProps';
+
+export const ZdTreeCheckboxProps = buildProps({
+	node: {
+		type: Object as PropType<ITreeNodeModel<IDictionary>>,
+		default: null,
+	},
+	checkedField: {
+		type: String,
+		default: 'checked',
+	},
+	disabled: {
+		type: Boolean,
+		default: false,
+	},
+});
+
+export default defineComponent({
+	props: ZdTreeCheckboxProps,
+	setup(props, { emit }) {
+		const localNode = ref(props.node);
+		const checkedField = ref(props.checkedField);
+
+		let isUpdatingFromChildren = false;
+
+		const childrenCheck = computed(() => {
+			if (isUpdatingFromChildren) return localNode.value?.data?.[checkedField.value] || false;
+			return localNode.value?.children?.every((child) => child.data?.[checkedField.value]) || false;
+		});
+
+		watch(childrenCheck, (newVal, oldVal) => {
+			if (isUpdatingFromChildren || newVal === oldVal) return;
+
+			if (localNode.value?.data && localNode.value.data[checkedField.value] !== newVal) {
+				isUpdatingFromChildren = true;
+				localNode.value.data[checkedField.value] = newVal;
+				nextTick(() => {
+					isUpdatingFromChildren = false;
+				});
+			}
+		});
+
+		const isIndeterminate = computed(() => {
+			const total = localNode.value?.children?.length || 0;
+			const checked = localNode.value?.children?.filter((child) => child.data?.[checkedField.value]).length || 0;
+			return checked > 0 && checked < total;
+		});
+
+		const checkboxValue = computed({
+			get: () => localNode.value?.data?.[checkedField.value] || false,
+			set: (value: boolean) => {
+				if (localNode.value?.data) {
+					isUpdatingFromChildren = true;
+					localNode.value.data[checkedField.value] = value;
+					// Propaga para os filhos
+					if (localNode.value.children?.length) {
+						toggleChildren(localNode.value.children, value);
+					}
+					nextTick(() => {
+						isUpdatingFromChildren = false;
+					});
+				}
+			},
+		});
+
+		function toggleChildren(nodes: ITreeNodeModel<IDictionary>[], value: boolean) {
+			nodes.forEach((node) => {
+				if (node.data) {
+					// Crie um novo objeto para data, evitando mutação direta
+					node.data = { ...node.data, [checkedField.value]: value };
+				}
+				if (node.children?.length) toggleChildren(node.children, value);
+			});
+		}
+
+		function checkboxToggle() {
+			const currentValue = localNode.value?.data?.[checkedField.value] || false;
+			const newValue = !currentValue;
+
+			// Atualiza o nó atual
+			if (localNode.value?.data) {
+				localNode.value.data[checkedField.value] = newValue;
+			}
+
+			// Propaga para os filhos
+			if (localNode.value?.children?.length) {
+				toggleChildren(localNode.value.children, newValue);
+			}
+		}
+
+		function click(event: Event) {
+			if (props.disabled) return;
+			checkboxToggle();
+			emit('click', event);
+		}
+
+		return {
+			localNode,
+			checkedField,
+			childrenCheck,
+			isIndeterminate,
+			checkboxValue,
+			click,
+		};
+	},
+});

package/src/components/zd-tree/ZdTreeCheckbox.vue

@@ -0,0 +1,43 @@
+<template>
+  <v-checkbox
+    class="zd-tree-checkbox"
+    hide-details
+    :disabled="disabled"
+    :ripple="false"
+    :model-value="(node.data ?? {})[checkedField]"
+    :on-icon="$getIcon('checkboxOn')"
+    :off-icon="$getIcon('checkboxOff')"
+    :indeterminate-icon="$getIcon('checkboxIndeterminate')"
+    :indeterminate="isIndeterminate"
+    @click="disabled || click($event)"
+  />
+</template>
+
+<script lang="ts" src="./ZdTreeCheckbox.ts" />
+
+<style lang="scss" >
+@import 'sl-vue-tree-next/sl-vue-tree-next-minimal.css';
+
+.zd-tree-checkbox {
+  display: flex !important;
+  align-items: center;
+}
+
+.zd-tree-checkbox .v-input--selection-controls__ripple {
+  display: none;
+}
+
+.zd-tree-checkbox .v-label {
+  display: none !important;
+}
+
+
+.zd-tree-checkbox .mdi-checkbox-marked {
+  color: rgba(0, 0, 0, .54) !important;
+}
+
+.zd-tree-checkbox .mdi-star {
+  color: rgba(0, 0, 0, .54) !important;
+}
+
+</style>

package/src/components/zd-tree-grid/ZdTreeGrid.ts

@@ -0,0 +1,127 @@
+import { Column, GridColumn, IComponent, IComponentRender, TreeGrid } from '@zeedhi/common';
+import { IDictionary } from '@zeedhi/core';
+import { ComponentPublicInstance, PropType, UnwrapRef, computed, defineComponent } from 'vue';
+import { buildProps } from '../../utils';
+import { useCreateInstance } from '../zd-component/ZdComponent';
+import { ZdGridProps, useGridInstance } from '../zd-grid/ZdGrid';
+
+export type CalcWidth = (column: UnwrapRef<Column>) => string | undefined;
+export type GetActions = ({ row, column }: { row: IDictionary; column: GridColumn }) => IComponent[];
+export type GetConditionalProps = ({ row, column }: { row: IDictionary; column: Column }) => Partial<IComponentRender>;
+
+export const ZdTreeGridProps = buildProps({
+	...ZdGridProps,
+	parentField: {
+		type: String,
+		default: '',
+	},
+	openLevelOnLoad: {
+		type: [String, Number, Boolean] as PropType<string | number | boolean>,
+		default: false,
+	},
+	fetchOnDemand: {
+		type: [String, Boolean] as PropType<string | boolean>,
+		default: true,
+	},
+	flat: {
+		type: [String, Boolean] as PropType<string | boolean>,
+		default: false,
+	},
+	detach: {
+		type: [String, Boolean] as PropType<boolean>,
+		default: false,
+	},
+	fieldHasChild: {
+		type: String,
+		default: '',
+	},
+	footerSlot: {
+		type: Array,
+		default: () => [],
+	},
+});
+
+const treeGridComponent = defineComponent({
+	props: ZdTreeGridProps,
+	inheritAttrs: false,
+	setup(props, ctx) {
+		const { instance, root } = useCreateInstance<TreeGrid, ComponentPublicInstance>(props, ctx, TreeGrid);
+
+		const gridScope = useGridInstance({ instance, root });
+
+		const cellClick = ({ row, column, event }: { row: IDictionary<any>; column: GridColumn; event: Event }) => {
+			instance.cellClick(row, column, event, gridScope.rootEl.value);
+		};
+
+		const rowClick = (row: IDictionary<any>, event: Event) => {
+			instance.rowClick(row, event, gridScope.rootEl.value);
+		};
+
+		const computedData = computed(() => {
+			return instance.treeDataStructure.searchHasNoData
+				? []
+				: instance.treeDataStructure.treeData || instance.getData();
+		});
+
+		const isOpened = (row: IDictionary) => {
+			return instance.treeDataStructure.isOpened(row);
+		};
+
+		const getKeysFrom = (data: IDictionary[]) => {
+			const { uniqueKey } = instance.datasource;
+			return data.map((toggledRow) => toggledRow[uniqueKey]);
+		};
+
+		/**
+		 * Checks whether this row's selection state is indeterminate
+		 * @param row
+		 * @returns `true` if it is indeterminate
+		 */
+		const isIndeterminate = (row: IDictionary<any>) => {
+			const { uniqueKey } = instance.datasource;
+
+			const arrSelection = instance.selectAllPages ? instance.selectionState.except : instance.selectedRows;
+
+			const selectedKeys = getKeysFrom(arrSelection);
+
+			const childSelectionCount = (row.tree__children as any[])?.reduce((result, child) => {
+				const isSelected = instance.callDisableSelection(child) || selectedKeys.includes(child[uniqueKey]);
+
+				return isSelected ? result + 1 : result;
+			}, 0);
+
+			return childSelectionCount > 0 && childSelectionCount < row.tree__children.length;
+		};
+
+		const hasChildOnDemand = (row: IDictionary) => {
+			return instance.treeDataStructure.hasChildOnDemand(row);
+		};
+
+		const toggleExpand = (row: IDictionary, rowIndex: number, event?: PointerEvent) => {
+			event?.stopPropagation();
+			return instance.toggleExpand(row, rowIndex);
+		};
+
+		const isSelected = (item: IDictionary) => {
+			return !!gridScope.selectedRows.value.find(
+				(row) => row[instance.datasource.uniqueKey] === item.value[instance.datasource.uniqueKey],
+			);
+		};
+
+		return {
+			...gridScope,
+			cellClick,
+			rowClick,
+			instance,
+			root,
+			computedData,
+			isOpened,
+			isIndeterminate,
+			hasChildOnDemand,
+			toggleExpand,
+			isSelected,
+		};
+	},
+});
+
+export default treeGridComponent;

package/src/components/zd-tree-grid/ZdTreeGrid.vue

@@ -0,0 +1,199 @@
+<template>
+  <v-data-table
+    v-show="instance.isVisible"
+    ref="root"
+    :id="instance.name"
+    v-model="selectedRows"
+    :class="[
+      'zd-grid',
+      instance.cssClass,
+      {
+        'zd-grid--loading': instance.datasource.loading,
+      },
+    ]"
+    :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:current-items="changeData()"
+    @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"
+        @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 }"
+    >
+      <template v-for="(item, i) in items">
+        <zd-tree-grid-row
+          v-if="shouldRender(i)"
+          v-show="isOpened(item)"
+          :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"
+          :indeterminate="isIndeterminate(item)"
+          :hasChildOnDemand="hasChildOnDemand(item)"
+          @cellFocus="cellFocus($event)"
+          @cellClick="cellClick($event)"
+          @click="rowClick(item, $event)"
+          @focusin="cellFocusIn($event)"
+          @checkboxClick="selectRowClick(item, !isSelected(internalItems[i]), $event)"
+          @expandIconClick="toggleExpand(item, i, $event)"
+        ></zd-tree-grid-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="./ZdTreeGrid.ts"></script>
+
+<style lang="scss">
+.zd-tree-grid {
+  .zd-table-cell-text-first {
+    display: inline-flex;
+    width: 100%;
+  }
+
+  &.theme--light {
+    tbody {
+      td {
+        &.zd-table-cell {
+        color: var(--zd-font-color);
+        }
+      }
+    }
+  }
+  &.theme--dark {
+    tbody {
+      td {
+        &.zd-table-cell {
+        color: #fff;
+        }
+      }
+    }
+  }
+  tbody {
+    td {
+      &.zd-table-cell {
+        &.first {
+          padding-left: 5px !important;
+        }
+
+        .zd-table-cell-text {
+          .search-result {
+            background: var(--v-grey-lighten4);
+          }
+        }
+      }
+    }
+  }
+}
+</style>

package/src/components/zd-tree-grid/cell/ZdTreeGridCell.ts

@@ -0,0 +1,93 @@
+import { Grid, GridColumn } from '@zeedhi/common';
+import { IDictionary } from '@zeedhi/core';
+import { PropType, computed, defineComponent, inject } from 'vue';
+import { GetActions } from '../../zd-grid/ZdGrid';
+
+export default defineComponent({
+	props: {
+		row: {
+			type: Object as PropType<IDictionary<any>>,
+			required: true,
+		},
+		column: {
+			type: Object as PropType<GridColumn>,
+			required: true,
+		},
+		cssClass: {
+			type: Array as PropType<(IDictionary<boolean> | string)[]>,
+			default: () => [],
+		},
+		cssStyle: {
+			type: Array as PropType<IDictionary[]>,
+			default: () => [],
+		},
+		cellSelection: {
+			type: Boolean,
+			required: true,
+		},
+		isCurrent: {
+			type: Boolean,
+		},
+		hasChildOnDemand: {
+			type: Boolean,
+		},
+		showExpandIcon: {
+			type: Boolean,
+		},
+		isFirstCell: {
+			type: Boolean,
+		},
+	},
+	emits: ['focusin', 'click', 'expandIconClick'],
+	setup(props, { emit }) {
+		const tabindex = computed(() => (props.cellSelection ? 0 : ''));
+		const getActions = inject<GetActions>('getActions');
+		const gridInstance = inject<Grid>('gridInstance');
+
+		if (!getActions || !gridInstance) {
+			throw new Error('gridInstance');
+		}
+
+		const conditionalProps = computed(() => {
+			const { row, column } = props;
+			return gridInstance.getConditionalProps({ row, column });
+		});
+
+		const click = (event: Event) => {
+			emit('click', event);
+		};
+
+		const focusin = (event: Event) => {
+			emit('focusin', event);
+		};
+
+		const getMergedConditionals = (propName: keyof GridColumn) => {
+			return conditionalProps.value[propName] || props.column[propName];
+		};
+
+		const expandIconClick = (event: Event) => {
+			emit('expandIconClick', event);
+		};
+
+		const highlightSearchResult = (text: string) => {
+			if (typeof text !== 'string') return text;
+
+			if (gridInstance.datasource.search) {
+				const reg = new RegExp(gridInstance.datasource.search, 'gi');
+				return text.replace(reg, (value) => `<span class="search-result">${value}</span>`);
+			}
+			return text;
+		};
+
+		return {
+			tabindex,
+			click,
+			focusin,
+			conditionalProps,
+			getActions,
+			getMergedConditionals,
+			expandIconClick,
+			highlightSearchResult,
+		};
+	},
+});

package/src/components/zd-tree-grid/cell/ZdTreeGridCell.vue

@@ -0,0 +1,133 @@
+<template>
+  <td
+    :tabindex="tabindex"
+    :class="[
+      'zd-grid__cell', 'zd-tree-grid__cell', `text-${column.align}`,
+      getMergedConditionals('cssClass'),
+      { 'zd-grid__cell--is-current': isCurrent },
+      ...cssClass,
+    ]"
+    :style="[
+      getMergedConditionals('style'),
+      getMergedConditionals('cssStyle'),
+      ...cssStyle,
+    ]"
+    @click="click"
+    @focusin="focusin($event)"
+  >
+    <template v-if="column.type !== 'action'">
+      <v-skeleton-loader v-if="column.loading" loading type="text"/>
+      <zd-grid-cell-content
+        v-show="!column.loading"
+        :column="column"
+        :row="row"
+        :value="row[column.name]"
+        :conditionalProps="conditionalProps"
+      >
+        <template #default="{ formattedValue }">
+          <div
+            :class="[
+              'zd-grid-cell-wrapper',
+              `zd-grid-cell-align-${column.align}`
+            ]"
+          >
+            <div
+              :class="['zd-tree-grid-expand', `level${row.tree__level}`]"
+              v-if="showExpandIcon"
+            >
+              <v-icon
+                :class="{ 'opened': row.tree__opened }"
+                v-if="(row.tree__children || []).length > 0 && hasChildOnDemand"
+                tabindex="-1"
+                @click="expandIconClick($event)"
+                @mousedown.prevent.stop
+              >
+                {{ $getIcon('chevronRight') }}
+              </v-icon>
+            </div>
+            <div
+              :class="[
+              {
+                'zd-table-cell-text-first' : isFirstCell,
+              },
+              'zd-table-cell-text',
+            ]"
+              :key="row.tree__searched ? 'a' : 'b'"
+              v-html="highlightSearchResult(formattedValue)"
+            ></div>
+          </div>
+        </template>
+      </zd-grid-cell-content>
+    </template>
+    <zd-grid-action
+      v-else
+      :actions="getActions({ row, column })"
+    ></zd-grid-action>
+  </td>
+</template>
+
+<script lang="ts" src="./ZdTreeGridCell.ts"></script>
+
+<style lang="scss">
+.zd-tree-grid__cell {
+  .search-result {
+    background: rgba(var(--v-theme-grey-lighten-4));
+  }
+
+  .zd-grid-cell-wrapper {
+    display: flex;
+    gap: .75rem;
+  }
+
+  .zd-grid-cell-align {
+    &-right {
+      justify-content: end;
+    }
+
+    &-left {
+      justify-content: start;
+    }
+
+    &-center {
+      justify-content: center;
+    }
+  }
+
+  .zd-tree-grid-expand {
+    text-align: end;
+    vertical-align: baseline;
+    height: 10px;
+    display: inline-block;
+
+    &.level1 {
+      width: 24px !important;
+    }
+
+    &-action {
+      height: 100%;
+      display: inline-grid;
+      justify-content: end;
+    }
+
+    .v-icon {
+      transition: transform 0.3s ease;
+      -webkit-transition: transform 0.3s ease;
+      font-size: 20px;
+
+      &::after {
+        content: none;
+      }
+
+      &.opened {
+        transform: rotate(90deg);
+        -webkit-transform: rotate(90deg);
+      }
+    }
+
+    $levelPading: 20px;
+    @for $i from 1 through 10 {
+      &.level#{$i} { width: $i * $levelPading }
+    }
+  }
+}
+</style>