diff --git a/package-lock.json b/package-lock.json index e811890..62deec6 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "vue3-easy-data-table", - "version": "1.5.44", + "version": "1.5.47", "lockfileVersion": 2, "requires": true, "packages": { "": { "name": "vue3-easy-data-table", - "version": "1.5.44", + "version": "1.5.47", "license": "MIT", "dependencies": { "vue": "^3.2.45" diff --git a/package.json b/package.json index 362620f..055b835 100644 --- a/package.json +++ b/package.json @@ -1,22 +1,16 @@ { - "name": "vue3-easy-data-table", + "name": "wl-vue3-easy-data-table", "author": "HC200ok", "description": "A customizable and easy-to-use data table component made with Vue.js 3.x.", "private": false, - "version": "1.5.47", + "version": "1.5.48", "types": "./types/main.d.ts", "license": "MIT", "files": [ "dist", "types" ], - "keywords": [ - "vue3", - "data-table-component", - "data-table", - "vue3-component", - "vue-component" - ], + "keywords": [], "homepage": "https://github.com/HC200ok/vue3-easy-data-table", "main": "./dist/vue3-easy-data-table.umd.js", "module": "./dist/vue3-easy-data-table.es.js", diff --git a/src/components/DataTable.vue b/src/components/DataTable.vue index e51b2ab..cccd363 100644 --- a/src/components/DataTable.vue +++ b/src/components/DataTable.vue @@ -48,7 +48,7 @@ :style="getFixedDistance(header.value)" @click.stop="(header.sortable && header.sortType) ? updateSortField(header.value, header.sortType) : null" > - + +
+ +
+ + + !!slots.pagination); const ifHasLoadingSlot = computed(() => !!slots.loading); const ifHasExpandSlot = computed(() => !!slots.expand); +const ifHasHoverSlot = computed(() => !!slots.hover); const ifHasBodySlot = computed(() => !!slots.body); // global dataTable $ref @@ -401,10 +425,12 @@ onMounted(() => { const emits = defineEmits([ 'clickRow', + 'hoverRow', 'contextmenuRow', 'selectRow', 'deselectRow', 'expandRow', + 'showHoverElement', 'updateSort', 'updateFilter', 'update:itemsSelected', @@ -538,6 +564,16 @@ const { emits, ); +const { + hoverRowIndex, + updateHoverRowIndex, + clearHoverRowIndex, +} = useHoverRowElement( + pageItems, + prevPageEndIndex, + emits, +); + const { fixedHeaders, lastFixedColumn, @@ -555,6 +591,13 @@ const { emits, ); +const { + hoverRow, +} = useHoverRow( + showIndex, + emits, +); + const contextMenuRow = (item: Item, $event: MouseEvent) => { if (preventContextMenuRow.value) $event.preventDefault(); emits('contextmenuRow', item, $event); @@ -567,11 +610,44 @@ const getColStyle = (header: HeaderForRender): string | undefined => { return undefined; }; -const getFixedDistance = (column: string, type: 'td' | 'th' = 'th') => { +// const getHoverStyle = (index:number): string | undefined => { + +// let checkBoxTDId = `checkBoxTD_${index}`; +// let checkboxTD = document.getElementById(checkBoxTDId); +// if(checkboxTD) +// { +// const width = checkboxTD.clientWidth + 2; +// const height = checkboxTD.clientHeight - 1; +// return `width: calc(100% - ${width}px); min-width: calc(100% - ${width}px); margin-left: ${width}px; top: ${-height}px; height: ${height}px; min-height: ${height}px`; +// } + +// return undefined; +// }; + +const getHoverStyle = (index:number): string | undefined => { + +let checkBoxTDId = `checkBoxTD_${index}`; +let checkboxTD = document.getElementById(checkBoxTDId); +if(checkboxTD) +{ + const width = checkboxTD.clientWidth + 2; + const height = checkboxTD.clientHeight; +return `margin-left: ${width}px; top: ${-height}px; height: ${height - 2}px; min-height: ${height - 2}px`; +} + +return undefined; +}; + +const getFixedDistance = (column: string, type: 'td' | 'th' = 'th', setMarginLeft: boolean = false) => { if (!fixedHeaders.value.length) return undefined; const columInfo = fixedColumnsInfos.value.find((info) => info.value === column); if (columInfo) { - return `left: ${columInfo.distance}px;z-index: ${type === 'th' ? 3 : 1};position: sticky;`; + if(!setMarginLeft) + { + return `left: ${columInfo.distance}px;z-index: ${type === 'th' ? 3 : 1};position: sticky;`; + } else { + return `margin-left: ${columInfo.distance}px;`; + } } return undefined; }; @@ -582,6 +658,7 @@ watch(loading, (newVal, oldVal) => { if (newVal === false && oldVal === true) { updateCurrentPaginationNumber(serverOptionsComputed.value.page); clearExpandingItemIndexList(); + clearHoverRowIndex(); } } }); @@ -602,6 +679,7 @@ watch([searchValue, filterOptions], () => { watch([currentPaginationNumber, clientSortOptions, searchField, searchValue, filterOptions], () => { clearExpandingItemIndexList(); + clearHoverRowIndex(); }, { deep: true }); watch(pageItems, (value) => { @@ -626,7 +704,7 @@ defineExpose({ updatePage, rowsPerPageOptions: rowsItemsComputed, rowsPerPageActiveOption: rowsPerPageRef, - updateRowsPerPageActiveOption: updateRowsPerPage, + updateRowsPerPageActiveOption: updateRowsPerPage }); @@ -693,4 +771,5 @@ defineExpose({ .vue3-easy-data-table__main.fixed-height { height: v-bind(tableHeightPx); } + diff --git a/src/hooks/useHoverRow.ts b/src/hooks/useHoverRow.ts new file mode 100644 index 0000000..9b17f65 --- /dev/null +++ b/src/hooks/useHoverRow.ts @@ -0,0 +1,20 @@ +import { Ref, ComputedRef } from 'vue'; +import type { Item } from '../types/main'; +import type { EmitsEventName, ClickEventType } from '../types/internal'; + +export default function useHoverRow( + showIndex: Ref, + emits: (event: EmitsEventName, ...args: any[]) => void, +) { + const hoverRow = (item: Item, $event: Event) => { + const hoverRowArgument = { ...item }; + const { index } = item; + delete hoverRowArgument.index; + hoverRowArgument.indexInCurrentPage = index; + emits('hoverRow', hoverRowArgument, $event); + }; + + return { + hoverRow, + }; +} diff --git a/src/hooks/useHoverRowElement.ts b/src/hooks/useHoverRowElement.ts new file mode 100644 index 0000000..543c9a6 --- /dev/null +++ b/src/hooks/useHoverRowElement.ts @@ -0,0 +1,32 @@ +import { ref, Ref, ComputedRef } from 'vue'; +import type { Item } from '../types/main'; +import type { EmitsEventName } from '../types/internal'; + +export default function useHoverRowElement( + items: Ref, + prevPageEndIndex: ComputedRef, + emits: (event: EmitsEventName, ...args: any[]) => void, +) { + const hoverRowIndex = ref(); + + const updateHoverRowIndex = (index: number, hoverItem: Item, event: Event) => { + event.stopPropagation(); + if (index !== -1) { + hoverRowIndex.value = index; + } else { + const currentPageExpandIndex = items.value.findIndex((item) => JSON.stringify(item) === JSON.stringify(hoverItem)); + emits('showHoverElement', prevPageEndIndex.value + currentPageExpandIndex, hoverItem); + hoverRowIndex.value = prevPageEndIndex.value + currentPageExpandIndex; + } + }; + + const clearHoverRowIndex = () => { + hoverRowIndex.value = undefined; + }; + + return { + hoverRowIndex, + updateHoverRowIndex, + clearHoverRowIndex, + }; +} diff --git a/src/modes/Client.vue b/src/modes/Client.vue index bdbe259..a5b1edc 100644 --- a/src/modes/Client.vue +++ b/src/modes/Client.vue @@ -12,7 +12,7 @@ + +