Skip to content

fix(demos): [select,popeditor,slider] fix problem and optimization demo #2435

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 2 commits into from
Oct 28, 2024
Merged

fix(demos): [select,popeditor,slider] fix problem and optimization demo #2435

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
25f049c
fix(guide): [guide] fix guide displaying after jumping to other pages
MomoPoppy Oct 26, 2024
8fc1904
fix(demos): [select,popeditor,slider] fix problem and optimization demo
MomoPoppy Oct 28, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion examples/sites/demos/pc/app/popeditor/auto-lookup-composition-api.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@ const gridOp = ref({
{
field: 'id',
title: 'ID',
width: 40
width: 50
},
{
field: 'name',
Expand Down
2 changes: 1 addition & 1 deletion examples/sites/demos/pc/app/popeditor/auto-lookup.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,7 @@ export default {
{
field: 'id',
title: 'ID',
width: 40
width: 50
},
{
field: 'name',
Expand Down
2 changes: 1 addition & 1 deletion examples/sites/demos/pc/app/popeditor/auto-reset-composition-api.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -82,7 +82,7 @@ const gridOp = ref({
{
field: 'id',
title: 'ID',
width: 40
width: 50
},
{
field: 'name',
Expand Down
2 changes: 1 addition & 1 deletion examples/sites/demos/pc/app/popeditor/auto-reset.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -87,7 +87,7 @@ export default {
{
field: 'id',
title: 'ID',
width: 40
width: 50
},
{
field: 'name',
Expand Down
2 changes: 1 addition & 1 deletion examples/sites/demos/pc/app/popeditor/basic-usage-composition-api.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -80,7 +80,7 @@ const gridOp = ref({
{
field: 'id',
title: 'ID',
width: 40
width: 50
},
{
field: 'name',
Expand Down
2 changes: 1 addition & 1 deletion examples/sites/demos/pc/app/popeditor/basic-usage.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -85,7 +85,7 @@ export default {
{
field: 'id',
title: 'ID',
width: 40
width: 50
},
{
field: 'name',
Expand Down
2 changes: 1 addition & 1 deletion examples/sites/demos/pc/app/popeditor/before-close-composition-api.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -81,7 +81,7 @@ const gridOp = ref({
{
field: 'id',
title: 'ID',
width: 40
width: 50
},
{
field: 'name',
Expand Down
2 changes: 1 addition & 1 deletion examples/sites/demos/pc/app/popeditor/before-close.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -86,7 +86,7 @@ export default {
{
field: 'id',
title: 'ID',
width: 40
width: 50
},
{
field: 'name',
Expand Down
2 changes: 1 addition & 1 deletion examples/sites/demos/pc/app/popeditor/before-reset-composition-api.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -82,7 +82,7 @@ const gridOp = ref({
{
field: 'id',
title: 'ID',
width: 40
width: 50
},
{
field: 'name',
Expand Down
2 changes: 1 addition & 1 deletion examples/sites/demos/pc/app/popeditor/before-reset.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -87,7 +87,7 @@ export default {
{
field: 'id',
title: 'ID',
width: 40
width: 50
},
{
field: 'name',
Expand Down
2 changes: 1 addition & 1 deletion examples/sites/demos/pc/app/popeditor/clearable-composition-api.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -81,7 +81,7 @@ const gridOp = ref({
{
field: 'id',
title: 'ID',
width: 40
width: 50
},
{
field: 'name',
Expand Down
2 changes: 1 addition & 1 deletion examples/sites/demos/pc/app/popeditor/clearable.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -86,7 +86,7 @@ export default {
{
field: 'id',
title: 'ID',
width: 40
width: 50
},
{
field: 'name',
Expand Down
2 changes: 1 addition & 1 deletion examples/sites/demos/pc/app/popeditor/condition-form-composition-api.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -129,7 +129,7 @@ const gridOp = ref({
{
field: 'id',
title: 'ID',
width: 40
width: 50
},
{
field: 'name',
Expand Down
2 changes: 1 addition & 1 deletion examples/sites/demos/pc/app/popeditor/condition-form.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -131,7 +131,7 @@ export default {
{
field: 'id',
title: 'ID',
width: 40
width: 50
},
{
field: 'name',
Expand Down
19 changes: 10 additions & 9 deletions examples/sites/demos/pc/app/popeditor/condition-layout-composition-api.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@ const gridOp = ref({
{
field: 'id',
title: 'ID',
width: 40
width: 50
},
{
field: 'name',
Expand All @@ -45,17 +45,12 @@ const gridOp = ref({
}
})
const conditions = ref([
{
label: '公司名',
field: 'name',
span: 12,
labelWidth: '160px',
attrs: { clearable: true }
},
{
label: '城市',
field: 'city',
labelWidth: '50px',
component: hooks.markRaw(Select),
labelPosition: 'left',
attrs: {
options: [
{ label: '福州', value: 'fz' },
Expand All @@ -64,7 +59,13 @@ const conditions = ref([
},
span: 6
},
{ label: '员工', field: 'employees', component: hooks.markRaw(Numeric) }
{
label: '员工',
field: 'employees',
span: 6,
labelWidth: '50px',
component: hooks.markRaw(Numeric)
}
])

function remoteSearch({ page }) {
Expand Down
19 changes: 10 additions & 9 deletions examples/sites/demos/pc/app/popeditor/condition-layout.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,7 @@ export default {
{
field: 'id',
title: 'ID',
width: 40
width: 50
Copy link

@coderabbitai coderabbitai bot Oct 28, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

💡 Codebase verification

Width inconsistency found across ID columns - needs attention

The search results reveal inconsistent ID column widths across the codebase:

  • Several files in dialog-select still use width: 40 for ID columns:
    • dialog-select/nest-grid-single.vue
    • dialog-select/nest-grid-single-composition-api.vue
    • dialog-select/nest-grid-multi.vue
    • dialog-select/nest-grid-multi-composition-api.vue
  • Other files use different widths:
    • select/init-label.vue uses width: 60
    • The file under review uses width: 50

This suggests the width standardization is incomplete and needs to be aligned across all ID columns for consistency.

🔗 Analysis chain

LGTM! Verify visual alignment across different ID lengths.

The width increase from 40 to 50 for the ID column aligns with similar changes across other files, likely fixing truncation issues.

Let's verify the consistency of this change across other files:

🏁 Scripts executed

The following scripts were executed for the analysis:

Script:

#!/bin/bash
# Description: Check for any remaining instances of ID columns with width: 40
# to ensure complete migration to width: 50

rg -l 'field:\s*["\']id["\'].*width:\s*40' --type vue

Length of output: 93

Script:

#!/bin/bash
# Let's fix the syntax and try a more comprehensive search
# Search for ID column width configurations in Vue files
rg -i "field:\s*['\"]id['\"].*width:\s*\d+" --type vue -A 2

# Also search for width: 40 pattern to ensure no remnants
rg "width:\s*40" --type vue

Length of output: 151

Script:

#!/bin/bash
# Search for ID column width configurations without file type restriction
rg -i "field:\s*['\"]id['\"].*width:\s*\d+" 

# Also search for any remaining width: 40 patterns
rg "width:\s*40" 

# List all files that might be related to this component
fd "condition-layout"

Length of output: 6843

},
{
field: 'name',
Expand All @@ -50,17 +50,12 @@ export default {
}
},
conditions: [
{
label: '公司名',
field: 'name',
span: 12,
labelWidth: '160px',
attrs: { clearable: true }
},
{
label: '城市',
field: 'city',
labelWidth: '50px',
component: hooks.markRaw(Select),
labelPosition: 'left',
attrs: {
options: [
{ label: '福州', value: 'fz' },
Expand All @@ -69,7 +64,13 @@ export default {
},
span: 6
},
{ label: '员工', field: 'employees', component: hooks.markRaw(Numeric) }
{
label: '员工',
field: 'employees',
span: 6,
labelWidth: '50px',
component: hooks.markRaw(Numeric)
}
]
}
},
Expand Down
2 changes: 1 addition & 1 deletion examples/sites/demos/pc/app/popeditor/conditions-composition-api.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -81,7 +81,7 @@ const gridOp = ref({
{
field: 'id',
title: 'ID',
width: 40
width: 50
},
{
field: 'name',
Expand Down
2 changes: 1 addition & 1 deletion examples/sites/demos/pc/app/popeditor/conditions.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -86,7 +86,7 @@ export default {
{
field: 'id',
title: 'ID',
width: 40
width: 50
},
{
field: 'name',
Expand Down
2 changes: 1 addition & 1 deletion examples/sites/demos/pc/app/popeditor/disabled-composition-api.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -81,7 +81,7 @@ const gridOp = ref({
{
field: 'id',
title: 'ID',
width: 40
width: 50
},
{
field: 'name',
Expand Down
2 changes: 1 addition & 1 deletion examples/sites/demos/pc/app/popeditor/disabled.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -86,7 +86,7 @@ export default {
{
field: 'id',
title: 'ID',
width: 40
width: 50
},
{
field: 'name',
Expand Down
2 changes: 1 addition & 1 deletion examples/sites/demos/pc/app/popeditor/draggable-composition-api.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -86,7 +86,7 @@ const gridOp = ref({
{
field: 'id',
title: 'ID',
width: 40
width: 50
},
{
field: 'name',
Expand Down
2 changes: 1 addition & 1 deletion examples/sites/demos/pc/app/popeditor/draggable.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -91,7 +91,7 @@ export default {
{
field: 'id',
title: 'ID',
width: 40
width: 50
},
{
field: 'name',
Expand Down
2 changes: 1 addition & 1 deletion examples/sites/demos/pc/app/popeditor/events-composition-api.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@ const gridOp = ref({
{
field: 'id',
title: 'ID',
width: 40
width: 50
},
{
field: 'name',
Expand Down
2 changes: 1 addition & 1 deletion examples/sites/demos/pc/app/popeditor/events.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,7 @@ export default {
{
field: 'id',
title: 'ID',
width: 40
width: 50
},
{
field: 'name',
Expand Down
2 changes: 1 addition & 1 deletion examples/sites/demos/pc/app/popeditor/grid-composition-api.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -75,7 +75,7 @@ const gridOp = ref({
{
field: 'id',
title: 'ID',
width: 40
width: 50
},
{
field: 'name',
Expand Down
2 changes: 1 addition & 1 deletion examples/sites/demos/pc/app/popeditor/grid.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -80,7 +80,7 @@ export default {
{
field: 'id',
title: 'ID',
width: 40
width: 50
},
{
field: 'name',
Expand Down
2 changes: 1 addition & 1 deletion examples/sites/demos/pc/app/popeditor/icon-composition-api.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@ const gridOp = ref({
{
field: 'id',
title: 'ID',
width: 40
width: 50
},
{
field: 'name',
Expand Down
2 changes: 1 addition & 1 deletion examples/sites/demos/pc/app/popeditor/icon.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,7 @@ export default {
{
field: 'id',
title: 'ID',
width: 40
width: 50
},
{
field: 'name',
Expand Down
2 changes: 1 addition & 1 deletion examples/sites/demos/pc/app/popeditor/multi-composition-api.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -93,7 +93,7 @@ const gridOp = ref({
{
field: 'id',
title: 'ID',
width: 40
width: 50
},
{
field: 'name',
Expand Down
2 changes: 1 addition & 1 deletion examples/sites/demos/pc/app/popeditor/multi-value-array-composition-api.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -87,7 +87,7 @@ const gridOp = ref({
{
field: 'id',
title: 'ID',
width: 40
width: 50
},
{
field: 'name',
Expand Down
2 changes: 1 addition & 1 deletion examples/sites/demos/pc/app/popeditor/multi-value-array.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -92,7 +92,7 @@ export default {
{
field: 'id',
title: 'ID',
width: 40
width: 50
},
{
field: 'name',
Expand Down
2 changes: 1 addition & 1 deletion examples/sites/demos/pc/app/popeditor/multi.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -93,7 +93,7 @@ export default {
{
field: 'id',
title: 'ID',
width: 40
width: 50
},
{
field: 'name',
Expand Down
2 changes: 1 addition & 1 deletion examples/sites/demos/pc/app/popeditor/pager-composition-api.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@ const gridOp = ref({
{
field: 'id',
title: 'ID',
width: 40
width: 50
},
{
field: 'name',
Expand Down
2 changes: 1 addition & 1 deletion examples/sites/demos/pc/app/popeditor/pager.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,7 @@ export default {
{
field: 'id',
title: 'ID',
width: 40
width: 50
},
{
field: 'name',
Expand Down
2 changes: 1 addition & 1 deletion examples/sites/demos/pc/app/popeditor/radio-change-close-composition-api.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -81,7 +81,7 @@ const gridOp = ref({
{
field: 'id',
title: 'ID',
width: 40
width: 50
},
{
field: 'name',
Expand Down
2 changes: 1 addition & 1 deletion examples/sites/demos/pc/app/popeditor/radio-change-close.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -86,7 +86,7 @@ export default {
{
field: 'id',
title: 'ID',
width: 40
width: 50
Copy link

@coderabbitai coderabbitai bot Oct 28, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🛠️ Refactor suggestion

Consider using CSS variables for consistent column widths.

Since this width change is being applied across multiple files, consider defining it as a CSS variable for better maintainability. This would make future width adjustments easier and ensure consistency.

-            width: 50
+            width: var(--tiny-grid-id-column-width, 50)

You can define the variable in your global CSS:

:root {
  --tiny-grid-id-column-width: 50px;
}

},
{
field: 'name',
Expand Down
Loading
Loading