Skip to content

v0.10.0

Choose a tag to compare

View all tags
@Applelo Applelo released this 16 Feb 19:02
· 2 commits to main since this release
v0.10.0
400bb73

New Features 🔥

Vue Package (@compotes/vue)

Official Vue 3 support is here! The new @compotes/vue package provides ready-to-use components and composables for all Compote components.

Components:

  • CCollapse / CCollapseTrigger - Collapsible content with toggle trigger
  • CDrag - Click-and-drag scrollable container
  • CDrilldown / CDrilldownMenu / CDrilldownNext / CDrilldownBack - Hierarchical navigation
  • CDropdown / CDropdownMenu / CDropdownTrigger - Dropdown with context injection
  • CMarquee - Scrolling marquee

All components support the as prop to customize the rendered element, expose methods and reactive state via template refs, and emit typed events.

Composables:

  • useCollapse - Reactive collapse state (isExpanded, isCollapsing) and methods
  • useDrag - Reactive drag state (isDragging, isDraggable)
  • useDrilldown - Reactive drilldown state (level, currentMenuId) and navigation methods
  • useDropdown - Reactive dropdown state (isOpen, type) and control methods
  • useMarquee - Reactive marquee state (isPaused) and playback methods

Core Improvements

  • Declarative event listeners - Pass event handlers via the on option instead of manual addEventListener
  • State change callbacks - Subscribe to reactive state changes with the onStateChange option
  • Typed events - Each component exports an Events enum for type-safe event handling
  • Typed state - Each component exports a State interface (CollapseState, DragState, etc.)
  • Debounced observers - ResizeObserver and MutationObserver callbacks are now debounced to prevent page freezing
  • Deferred initialization - Components can be instantiated without an element and initialized later with init()

Bug Fixes 🔨

  • Collapse: Fixed concurrent animation issues, improved destroy cleanup (removes inline styles and ARIA attributes)
  • Drag: Switched from mouse events to pointer events for better touch support, added setPointerCapture for reliable drag behavior
  • Drilldown: Fixed items array not clearing on updateItems(), mutation observer no longer triggers on clone operations
  • Dropdown: Fixed error message referencing wrong selector, improved accessibility event initialization and cleanup
  • Marquee: Fixed inverted fill detection logic, improved clone cleanup and focus handling
  • Accessibility: focusChar() is now case-insensitive

Breaking Changes 💥

Core API Changes

  • Constructor / el / init(): The element parameter is now optional. Components can be created without an element and initialized later via init(el, options)
  • destroyEvents() removed: Event cleanup is now handled automatically via AbortController

Removed Options

  • initAccessibility - Accessibility is now always enabled
  • initEvents - Events are now always initialized

New Options

  • on - Declarative event listeners object
  • onStateChange - State change callback for Vue integration

CSS Changes

  • Marquee direction classes renamed: .c-marquee--direction-top → .c-marquee--direction-up, .c-marquee--direction-bottom → .c-marquee--direction-down to respect <marquee> usage.

Build Output

  • UMD file renamed: compotes.umd.cjs → compotes.umd.js

Infrastructure 🧰

  • Migrated build system from Vite to tsdown/rolldown
  • Migrated to pnpm workspace catalogs for centralized dependency management
  • Added test coverage reporting with Coveralls
  • Added browser-based testing with Vitest + Playwright
  • Added doc-sync CI check to validate documentation stays in sync with implementation
  • Major dependency updates: pnpm 10, Vitest 4, ESLint 10, TypeScript 5.9, Vite 7
Assets 2
Loading