jskim/vexplor_dev
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: enhance column width configuration and rendering

Browse Source 
- Updated the column width handling in various components to support percentage-based widths, improving layout flexibility.
- Adjusted input fields to enforce minimum and maximum width constraints, ensuring better user experience and preventing layout issues.
- Enhanced the SortableColumnRow and related components to dynamically display width units, allowing for clearer configuration options.

Made-with: Cursor
This commit is contained in:
kmh
2026-03-13 11:29:32 +09:00
parent f28cb5c2f6
commit 4fe023a813
9 changed files with 111 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
frontend/lib/registry/components/v2-split-panel-layout/config-panels/LeftPanelConfigTab.tsx
View File

@@ -321,8 +321,10 @@ export const LeftPanelConfigTab: React.FC<LeftPanelConfigTabProps> = ({
updateLeftPanel({ columns: newColumns });
}}
onRemove={() => updateLeftPanel({ columns: selectedColumns.filter((_, i) => i !== index) })}
widthUnit="%"
/>
);
})}
</div>
</SortableContext>
@@ -341,7 +343,7 @@ export const LeftPanelConfigTab: React.FC<LeftPanelConfigTabProps> = ({
key={column.columnName}
className="hover:bg-muted/50 flex cursor-pointer items-center gap-2 rounded px-2 py-1.5"
onClick={() => {
updateLeftPanel({ columns: [...selectedColumns, { name: column.columnName, label: column.columnLabel || column.columnName, width: 100 }] });
updateLeftPanel({ columns: [...selectedColumns, { name: column.columnName, label: column.columnLabel || column.columnName, width: 20 }] });
}}
>
<Checkbox checked={false} className="pointer-events-none h-3.5 w-3.5 shrink-0" />
@@ -394,7 +396,7 @@ export const LeftPanelConfigTab: React.FC<LeftPanelConfigTabProps> = ({
columns: [...selectedColumns, {
name: matchingJoinColumn.joinAlias,
label: matchingJoinColumn.suggestedLabel || matchingJoinColumn.columnLabel,
width: 100,
width: 20,
isEntityJoin: true,
joinInfo: {
sourceTable: leftTable!,

5
frontend/lib/registry/components/v2-split-panel-layout/config-panels/RightPanelConfigTab.tsx
View File

@@ -321,6 +321,7 @@ export const RightPanelConfigTab: React.FC<RightPanelConfigTabProps> = ({
newColumns[index] = { ...newColumns[index], showInDetail: checked };
updateRightPanel({ columns: newColumns });
}}
widthUnit="%"
/>
);
})}
@@ -341,7 +342,7 @@ export const RightPanelConfigTab: React.FC<RightPanelConfigTabProps> = ({
key={column.columnName}
className="hover:bg-muted/50 flex cursor-pointer items-center gap-2 rounded px-2 py-1.5"
onClick={() => {
updateRightPanel({ columns: [...selectedColumns, { name: column.columnName, label: column.columnLabel || column.columnName, width: 100 }] });
updateRightPanel({ columns: [...selectedColumns, { name: column.columnName, label: column.columnLabel || column.columnName, width: 20 }] });
}}
>
<Checkbox checked={false} className="pointer-events-none h-3.5 w-3.5 shrink-0" />
@@ -394,7 +395,7 @@ export const RightPanelConfigTab: React.FC<RightPanelConfigTabProps> = ({
columns: [...selectedColumns, {
name: matchingJoinColumn.joinAlias,
label: matchingJoinColumn.suggestedLabel || matchingJoinColumn.columnLabel,
width: 100,
width: 20,
isEntityJoin: true,
joinInfo: {
sourceTable: rightTable!,

10
frontend/lib/registry/components/v2-split-panel-layout/config-panels/SharedComponents.tsx
View File

@@ -13,7 +13,7 @@ import { Check, ChevronsUpDown, GripVertical, Link2, X } from "lucide-react";
import { cn } from "@/lib/utils";
export function SortableColumnRow({
id, col, index, isNumeric, isEntityJoin, onLabelChange, onWidthChange, onFormatChange, onSuffixChange, onRemove, onShowInSummaryChange, onShowInDetailChange,
id, col, index, isNumeric, isEntityJoin, onLabelChange, onWidthChange, onFormatChange, onSuffixChange, onRemove, onShowInSummaryChange, onShowInDetailChange, widthUnit,
}: {
id: string;
col: { name: string; label: string; width?: number; format?: any; showInSummary?: boolean; showInDetail?: boolean };
@@ -27,6 +27,7 @@ export function SortableColumnRow({
onRemove: () => void;
onShowInSummaryChange?: (checked: boolean) => void;
onShowInDetailChange?: (checked: boolean) => void;
widthUnit?: string;
}) {
const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({ id });
const style = { transform: CSS.Transform.toString(transform), transition };
@@ -57,10 +58,13 @@ export function SortableColumnRow({
/>
<Input
value={col.width || ""}
onChange={(e) => onWidthChange(parseInt(e.target.value) || 100)}
placeholder="너비"
onChange={(e) => onWidthChange(parseInt(e.target.value) || (widthUnit === "%" ? 20 : 100))}
placeholder={widthUnit === "%" ? "20" : "너비"}
className="h-6 w-14 shrink-0 text-xs"
min={widthUnit === "%" ? 5 : undefined}
max={widthUnit === "%" ? 100 : undefined}
/>
<span className="text-muted-foreground shrink-0 text-[10px]">{widthUnit || "px"}</span>
{isNumeric && (
<>
<label className="flex shrink-0 cursor-pointer items-center gap-1 text-[10px]" title="천 단위 구분자 (,)">