Vue Collapsed Versions Save

Release notes

Force expand/collapse if unable to properly query scrollHeight in some consumer's implementation-related edge cases, thanks @oleh-selivanov - #25

Release notes

• Fix onTransitionEnd height comparison, thanks @krzysztof-krzeszewski - #26
• Update Vue 3.3.x related dependencies to latest

Release notes

Add additional condition for checking undefined CSS transition required for Firefox 124+ - #23 - Thanks @andreww2012

Release notes

• Fix a SSR layout shift bug where <Collapse /> was displayed as expanded on initial render until JS was loaded (if collapsed). #22 - Thanks @zhaivoronok
• Add a check to control whether requestAnimationFrame is available

Other

• Setup monorepo
• Migrate playground to Nuxt
• Add more examples to playground
• Migrate demo website to Cloudflare Pages

Release notes

This patch release doesn't bring any new feature nor fix. It is just a "courtesy-release" to enable from now on, publishments via the newly introduced npm provenance statements.

I also took the chance to improve a bit the (one year old) codebase by:

• Use defineOptions in the setup block
• Refactor reactivity-related syntax to improve readability using setters
• Enable watch mode for both dev and GUI testing
• Drop the buggy and unstable Cypress webkit testing (support still experimental)
• Update all dependencies

Release notes

Fixed a bug on iOS where getAutoDuration returned Infinity if visually hidden styles were applied just right before calling it.

• Fixed a bug where auto duration was not calculated if Collapse was mounted in a container with display: none.
• Added Firefox and Webkit tests.

What's improved

• Collapse is now more performant, using only one requestAnimationFrame call per expand/collapse. This was achieved by streamlining the logic behind retrieving the auto duration value, which is now only captured on mount.
• No longer enforcing margin: 0 and border: 0 on the Collapse element fixed styles.
• When baseHeight dynamically updates to 0 on collapsed state, display: hidden is now added on the Collapse element styles.
• Added examples to the README on how to use different easing and durations per expand/collapse.

Release notes

The next minor release of vue-collapsed brings a lot of improvements and a new feature.

What's new

• Starting from v1.2.0 you don't need to define a class name with a height transition anymore. As long as no transition is defined on the Collapse element, the following one is automatically added: height var(--vc-auto-duration) cubic-bezier(0.33, 1, 0.68, 1).
• Added automatic transition disabling for prefers-reduced-motion: reduce and the ability to manually disable transitions via CSS.

What's changed

Callback props have been replaced by emits. This won't break any functionality, as Vue emits can also be defined using the previous props' syntax (onCollapsed, onExpand, etc).

If you were using them, you can update your code as displayed below.

Pre v1.2

<Collapse :when="isExpanded" :onExpand="callback">
  <p>This is a paragraph.</p>
</Collapse>

v1.2

<Collapse :when="isExpanded" @expand="callback">
  <p>This is a paragraph.</p>
</Collapse>

What's improved

• Collapse has been refactored from a render function to a Vue component, delegating the transformation to the Vue compiler. This brings proper support for typed emits and slots.
• Updated vite-plugin-dts configuration for better types generation

Release Notes

• Update dependencies
• Reformat source files and examples with spaces

Update now:

pnpm add vue-collapsed@latest