clone/nocodb
1
0
Fork 0
mirror of https://github.com/nocodb/nocodb.git synced 2026-04-25 03:15:24 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix(nc-gui): column resize issue

Browse Source
This commit is contained in:
Ramesh Mane
2025-03-04 15:05:20 +05:30
parent a6679745cb
commit 3291add9e5
5 changed files with 324 additions and 178 deletions
Download Patch File Download Diff File Expand all files Collapse all files

42
packages/nc-gui/components/smartsheet/grid/InfiniteTable.vue
View File

@@ -2277,15 +2277,15 @@ const cellAlignClass = computed(() => {
<th
v-if="fields?.[0]?.id"
ref="primaryColHeader"
v-bind="{
...(isPlaywright
v-xc-ver-resize
v-bind="
isPlaywright
? {
'data-col': fields[0].id,
'data-title': fields[0].title,
}
: {}),
...(!isLocked ? { 'v-xc-ver-resize': true } : {}),
}"
: {}
"
:style="{
'min-width': gridViewCols[fields[0].id]?.width || '180px',
'max-width': gridViewCols[fields[0].id]?.width || '180px',
@@ -2294,6 +2294,7 @@ const cellAlignClass = computed(() => {
class="nc-grid-column-header"
:class="{
'!border-r-blue-400 !border-r-3': toBeDroppedColId === fields[0].id,
'no-resize': isLocked,
}"
@xcstartresizing="onXcStartResizing(fields[0].id, $event)"
@xcresize="onresize(fields[0].id, $event)"
@@ -2327,15 +2328,15 @@ const cellAlignClass = computed(() => {
<th
v-for="{ field: col, index } in visibleFields"
:key="col.id"
v-bind="{
...(isPlaywright
v-xc-ver-resize
v-bind="
isPlaywright
? {
'data-col': col.id,
'data-title': col.title,
}
: {}),
...(!isLocked ? { 'v-xc-ver-resize': true } : {}),
}"
: {}
"
:style="{
'min-width': gridViewCols[col.id]?.width || '180px',
'max-width': gridViewCols[col.id]?.width || '180px',
@@ -2344,6 +2345,7 @@ const cellAlignClass = computed(() => {
class="nc-grid-column-header"
:class="{
'!border-r-blue-400 !border-r-3': toBeDroppedColId === col.id,
'no-resize': isLocked,
}"
@xcstartresizing="onXcStartResizing(col.id, $event)"
@xcresize="onresize(col.id, $event)"
@@ -3439,7 +3441,7 @@ const cellAlignClass = computed(() => {
}
}
.nc-grid-skeleton-loader {
.nc-grid-skeleton-loader {v-xc-ver-resize
thead th:nth-child(2) {
@apply border-r-1 !border-r-gray-50;
}
@@ -3450,12 +3452,18 @@ const cellAlignClass = computed(() => {
}
}
:deep(.resizer:hover),
:deep(.resizer:active),
:deep(.resizer:focus) {
// todo: replace with primary color
@apply bg-blue-500/50;
cursor: col-resize;
.nc-grid-column-header {
&.no-resize :deep(.resizer) {
@apply hidden;
}
:deep(.resizer:hover),
:deep(.resizer:active),
:deep(.resizer:focus) {
// todo: replace with primary color
@apply bg-blue-500/50;
cursor: col-resize;
}
}
.nc-grid-row {

24
packages/nc-gui/components/smartsheet/grid/Table.vue
View File

@@ -1884,7 +1884,7 @@ onKeyStroke('ArrowDown', onDown)
</th>
<th
v-if="fields?.[0]?.id"
v-bind="!isLocked ? { 'v-xc-ver-resize': true } : {}"
v-xc-ver-resize
:data-col="fields[0].id"
:data-title="fields[0].title"
:style="{
@@ -1895,6 +1895,7 @@ onKeyStroke('ArrowDown', onDown)
class="nc-grid-column-header"
:class="{
'!border-r-blue-400 !border-r-3': toBeDroppedColId === fields[0].id,
'no-resize': isLocked,
}"
@xcstartresizing="onXcStartResizing(fields[0].id, $event)"
@xcresize="onresize(fields[0].id, $event)"
@@ -1929,7 +1930,7 @@ onKeyStroke('ArrowDown', onDown)
<th
v-for="{ field: col, index } in visibleFields"
:key="col.id"
v-bind="!isLocked ? { 'v-xc-ver-resize': true } : {}"
v-xc-ver-resize
:data-col="col.id"
:data-title="col.title"
:style="{
@@ -1940,6 +1941,7 @@ onKeyStroke('ArrowDown', onDown)
class="nc-grid-column-header"
:class="{
'!border-r-blue-400 !border-r-3': toBeDroppedColId === col.id,
'no-resize': isLocked,
}"
@xcstartresizing="onXcStartResizing(col.id, $event)"
@xcresize="onresize(col.id, $event)"
@@ -3057,12 +3059,18 @@ onKeyStroke('ArrowDown', onDown)
}
}
:deep(.resizer:hover),
:deep(.resizer:active),
:deep(.resizer:focus) {
// todo: replace with primary color
@apply bg-blue-500/50;
cursor: col-resize;
.nc-grid-column-header {
&.no-resize :deep(.resizer) {
@apply hidden;
}
:deep(.resizer:hover),
:deep(.resizer:active),
:deep(.resizer:focus) {
// todo: replace with primary color
@apply bg-blue-500/50;
cursor: col-resize;
}
}
.nc-grid-row {

4
packages/nc-gui/plugins/resizeDirective.ts
View File

@@ -29,6 +29,10 @@ export default defineNuxtPlugin((nuxtApp) => {
// bind event handlers
function initDrag(e: MouseEvent) {
if (el.classList.contains('no-resize')) {
return
}
document.body.style.cursor = 'col-resize'
startX = e.clientX
startWidth = parseInt(document.defaultView?.getComputedStyle(el)?.width || '0', 10)

430
pnpm-lock.yaml generated
View File

File diff suppressed because it is too large Load Diff

2
tests/playwright/package.json
View File

@@ -50,7 +50,7 @@
"xlsx": "^0.18.5"
},
"devDependencies": {
"@playwright/test": "1.43.1",
"@playwright/test": "1.49.1",
"@typescript-eslint/eslint-plugin": "^6.1.0",
"@typescript-eslint/parser": "^6.1.0",
"dotenv": "^16.0.3",