Skip to content

feat: v2.0.0 major refactor with pluggable architecture and 10+ enhancements#64

Open
qmhc wants to merge 11 commits into
mainfrom
feature/major-refactor-landing
Open

feat: v2.0.0 major refactor with pluggable architecture and 10+ enhancements#64
qmhc wants to merge 11 commits into
mainfrom
feature/major-refactor-landing

Conversation

@qmhc
Copy link
Copy Markdown
Owner

@qmhc qmhc commented May 11, 2026

🚀 Features

  • Compactor — 可插拔布局压缩系统,内置 verticalCompactor(默认)、horizontalCompactornoCompactorfastVerticalCompactorfastHorizontalCompactor,以及 withOverlap() 包装器支持元素重叠
  • PositionStrategy — 可插拔定位策略,内置 transformStrategy(默认)、absoluteStrategyscaledStrategy(scale)
  • DragThreshold — 拖拽阈值控制,鼠标移动距离不足时不触发拖拽
  • Droppable — 支持 HTML5 原生拖放从外部拖入元素,自动计算网格坐标并显示占位符
  • GridBackground — 新增网格背景组件,CSS linear-gradient 渲染,可作 GridLayout 子组件或独立使用
  • Config Grouping — 支持 gridConfig / dragConfig / resizeConfig / dropConfig 分组配置,扁平 prop > 分组 config > 默认值
  • Composable API — 新增 useGridLayoutuseResponsiveLayoutuseContainerWidth 三个组合式函数
  • Core Subpackage — 新增 grid-layout-plus/core 入口,导出所有纯函数和类型,支持 Tree-shaking

⚠️ Breaking Changes

  • 移除 verticalCompact prop,改用 :compactor="verticalCompactor"
  • 移除 useCssTransforms prop,改用 :positionStrategy="transformStrategy"absoluteStrategy
  • 移除 transformScale prop,改用 :positionStrategy="scaledStrategy(scale)"

📝 Migration

import {
  verticalCompactor, horizontalCompactor, noCompactor, withOverlap,
  transformStrategy, absoluteStrategy, scaledStrategy,
  useGridLayout, useResponsiveLayout, useContainerWidth,
  GridBackground,
} from '\''grid-layout-plus'\''

🐛 Bug Fixes

  • 修复外部拖放时 drag leave 追逐循环(通过鼠标坐标边界检查)
  • 修复外部拖放 placeholder 中心对齐
  • 修复网格背景线 stroke 毛边(改用 CSS linear-gradient)

📚 Documentation

  • 新增 10 个交互式 demo
  • 新增 20 个双语(EN/ZH)示例页面
  • 更新 8 个双语 guide 页面
  • VitePress sidebar 同步更新

✅ Tests

  • 新增 compactors.spec.ts(46 个测试)
  • 新增 position-strategies.spec.ts(16 个测试)
  • 新增 composables.spec.ts(15 个测试)
  • 新增 config-merge.spec.tsx(10 个测试)
  • 新增 drag-threshold.spec.tsx(5 个测试)
  • 新增 drop-zone.spec.tsx(7 个测试)
  • 新增 grid-background.spec.tsx(8 个测试)
  • 新增 grid-item-handles.spec.tsx(3 个测试)
  • 总计 151/151 通过

🔧 Build

  • es/ + lib/ + dist/ + core 子包全部构建通过
  • VitePress 文档站构建无错误

Closes #51, closes #38, closes #39, closes #5

qmhc added 10 commits May 6, 2026 18:32
…ition updates

- getEdgesForHandles: use per-direction CSS selectors so interactjs
  correctly identifies handle elements and passes event.edges
- track resizeCurrX/Y/W/H during resize for smooth position updates
- update createStyle() to use tracked coords during resizing
- resizeEvent: sync l.x/l.y updates for n/w/nw directions
- TODO: placeholder visual jitter during n/w/nw resize
- handleDragOver: check mouse coordinates directly instead of relying
  on dragover trigger area (ghost image can cover div outside mouse)
- handleDragOver: center-align drop placeholder to mouse for natural UX
- handleDragLeave: use coordinate check instead of relatedTarget
- demo(native-drop): add isDroppable checkbox for quick toggling
…nes in margins

- Replace SVG pattern with CSS linear-gradient for cleaner rendering
- Move grid lines to margin centers (cellWidth + 1.5*margin) so they
  don't overlap GridItem boundaries
- Clamp cellWidth to 0 in calcGridCellDimensions to prevent negative values
- Update demo to render GridItem manually when default slot is used
- Update tests to match new div+CSS implementation
- Remove default values from withDefaults for props that participate
  in config merging (autoSize, colNum, rowHeight, maxRows, margin,
  isDraggable, isResizable, restoreOnDrag, resizeHandles, isDroppable,
  dropItem, dragThreshold)
- Add effective* computed props that implement flat prop > group config
  > default value priority
- Replace all internal usages of props.xxx with effectiveXxx.value
- Update provide(LAYOUT_KEY) to expose merged values to GridItem
- Update tests to verify effectiveConfig instead of
@netlify
Copy link
Copy Markdown

netlify Bot commented May 11, 2026

Deploy Preview for grid-layout-plus ready!

Name Link
🔨 Latest commit 6f131a8
🔍 Latest deploy log https://app.netlify.com/projects/grid-layout-plus/deploys/6a14feb312dda000092025c9
😎 Deploy Preview https://deploy-preview-64--grid-layout-plus.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

@qmhc qmhc changed the title feat: v2.0.0 大版本重构 — 可插拔架构与 10+ 功能增强 feat: v2.0.0 major refactor with pluggable architecture and 10+ enhancements May 13, 2026
…ht se handle

BREAKING CHANGE: resizeHandles prop and ResizeHandle type removed.
Only bottom-right (se) resize is supported. Left/top resize was
unperformant due to compactLayout being called on every resizemove.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Resizable Handles 能否支持四边单独调整大小 允许只调整宽度 希望组件对外暴露一个主动刷新布局的api

1 participant