Data

Tools

Indexes

Applications

Experiments

Open Source Science

https://github.com/christian-byrne/primevue-transform-test-playground

Playgound to test various hooks, props, overrides, patches used to make primevue components work with transform

https://github.com/christian-byrne/primevue-transform-test-playground

Science Score: 26.0%

This score indicates how likely this project is to be science-related based on various indicators:

  • ○
    CITATION.cff file
  • ✓
    codemeta.json file
    Found codemeta.json file
  • ✓
    .zenodo.json file
    Found .zenodo.json file
  • ○
    DOI references
  • ○
    Academic publication links
  • ○
    Academic email domains
  • ○
    Institutional organization owner
  • ○
    JOSS paper metadata
  • ○
    Scientific vocabulary similarity
    Low similarity (11.1%) to scientific vocabulary
Last synced: 9 months ago · JSON representation

Repository

Playgound to test various hooks, props, overrides, patches used to make primevue components work with transform

Basic Info
Statistics
  • Stars: 0
  • Watchers: 0
  • Forks: 0
  • Open Issues: 0
  • Releases: 0
Created 10 months ago · Last pushed 10 months ago
Metadata Files
Readme License

README.md

PrimeVue Transform Playground

Interactive testing environment for PrimeVue overlay positioning in transform-based layouts.

Credits: This project builds upon the excellent work of the PrimeVue team and PrimeTek. PrimeVue is a comprehensive Vue UI component library with 80+ components.

🎯 Problem

PrimeVue overlays (dropdowns, popovers, tooltips) don't position correctly inside CSS-transformed containers. This affects: - Node-graph libraries (ReactFlow-style)
- Zoom-able interfaces - Transform-based UIs

✨ Features

  • Interactive Canvas: Pan/zoom testing environment
  • 6 Component Types: Select, Popover, ContextMenu, AutoComplete, DatePicker, Tooltip
  • 4 Positioning Strategies: Test different appendTo approaches
  • Real-time Analytics: Performance metrics and event logging
  • Strategy Comparison: Visual feedback on positioning success/failure

🚀 Quick Start

```bash

Install dependencies

npm install

Start development server

npm run dev

Run tests

npm test ```

🧪 Usage

  1. Pan/Zoom: Drag canvas, scroll to zoom
  2. Test Components: Click nodes to trigger overlays
  3. Switch Strategies: Use dropdown to test positioning approaches
  4. Monitor Metrics: Watch analytics panels for performance data
  5. Export Results: Save findings for analysis

📊 Current Findings

  • ✅ Self Strategy (appendTo="self") works best for transform compatibility
  • ⚠️ Z-index issues need CSS solutions
  • 📈 Performance varies by component type and zoom level

See CLAUDE.md for detailed research methodology and findings.

🤝 Contributing

Contributions welcome! Focus areas: - New positioning strategies - Performance optimizations
- Cross-browser testing - Documentation improvements

📄 License

MIT License - See LICENSE

Acknowledgments: Thanks to the PrimeVue maintainers for creating such a comprehensive and well-architected component library.

Owner

  • Name: Christian Byrne
  • Login: christian-byrne
  • Kind: user
  • Location: San Francisco
  • Company: Comfy-Org

GitHub Events

Total
  • Create event: 2
Last Year
  • Create event: 2

Dependencies

package.json npm
  • @vitejs/plugin-vue ^5.0.0 development
  • @vitest/coverage-v8 ^2.0.0 development
  • @vitest/ui ^2.0.0 development
  • @vue/test-utils ^2.4.0 development
  • jsdom ^25.0.0 development
  • vite ^6.0.0 development
  • vitest ^2.0.0 development
  • @primeuix/styled ^0.7.2
  • @primeuix/styles ^1.2.3
  • @primeuix/utils ^0.6.1
  • @primevue/themes ^4.3.7
  • pinia ^2.2.0
  • primeicons ^7.0.0
  • primevue ^4.3.7
  • vue ^3.5.0