smastrom / vue-collapsed Goto Github PK
View Code? Open in Web Editor NEW๐๏ธโโ๏ธ CSS height transition from any to auto and vice versa for Vue and Nuxt. Accordion ready.
Home Page: https://vue-collapsed.pages.dev
License: MIT License
๐๏ธโโ๏ธ CSS height transition from any to auto and vice versa for Vue and Nuxt. Accordion ready.
Home Page: https://vue-collapsed.pages.dev
License: MIT License
Terminal command: vue-tsc --noEmit && vite build --mode production
node_modules/vue-collapsed/dist/index.d.ts:1:15 - error TS1005: ',' expected.
1 import { type PropType } from 'vue';
If I delete the word type
in the index.d.ts, the build runs normally. Please tell me how to fix this error so that you don't have to go to the root of the add-on after each update of the packages.
Vue-collapsed version - 1.1.3
On some occasion, seamingly random, the Collapse stays in "expanding" mode.
This prevents the event expanded to trigger and makes the data-collapse value stay as "expanding".
In the code the onCollapse function is called only when the following condition is satisfied:
if (baseHeight.value === getComputedHeight(collapseRef)) {
onCollapsed()
}
However the computed height of the element is not always exact.
For instance I have an element that is 42px
in height. When running in chrome, when user zooms the page out to 90% the computed height value is no longer 42px
but 41.9965px
. So this condition fails, and the state of the collapsible is never updated.
This is a subpixel rendering issue that caused it, so I think a proper solution would be to trim/round the computed value. I don't think a sub-pixel precision is required and it would fix this issue.
On an unrelated note: floating point numbers shouldn't be compared using equality operator.
In Nuxt.js from server I get plain html without base styles (like display: none; if content is collapsed), and styles applied only on mounted. It will be great if proper styles will come from server so no layout shift will be there.
I tested on multiple device, it looks like the default Collapse animation stopped working on Chrome
<Collapse :when="isExpanded">
...
</Collapse>
A workaround is using a custom transition
<Collapse :when="isExpanded" class="v-collapse">
....
</Collapse>
<style>
.v-collapse {
transition: height 300ms ease-out;
/* or transition: height var(--vc-auto-duration) ease-in-out */
}
</style>
Did not have time to investigate but it looks like the appended transition is all
for some reason, instead of height var(--vc-auto-duration) etc...
Thanks
instead of having to bind the callbacks with props, why not just use vue's own emits?
So this:
<Collapse
:when="selected"
:onExpanded="() => scrollIntoView(index)"
class="v-collapse"
>
<p>
Hello world
</p>
</Collapse>
would become this:
<Collapse
:when="selected"
@expanded="() => scrollIntoView(index)"
class="v-collapse"
>
<p>
Hello world
</p>
</Collapse>
This seems more intuitive when working with vue (at least to me).
Hello.
In Firefox Developer Edition 124.0b7 (all extensions are disabled), the collapsible list started to open and close instantly, without any animations. You can check that on the Vue Collapsed site: https://vue-collapsed.pages.dev/. This does not happen in Firefox 123 or Chrome 122. That said, I only want to make you aware of that - I don't think there is something necessarily wrong with vue-collapsed
: after a quick debugging I noticed that transitionend
event no longer fires, which causes this behavior. The root cause might be a bug in a new Firefox or Vue.
Hi,
I ran into the following issue in Firefox (v 124-124.0.1):
I have a dropdown within a collapsible section. The part of the dropdown which is outside the slide container is cut off in Firefox but not in Chrome:
It looks like the reason is that in Firefox, some additional CSS classes are added which are not added in Chrome. Additionally, the state is not the same (expanded
/collapsed
in Chrome vs expanding
/collapsing
in Firefox):
You can see this effect in the stackblitz link provided on the github readme if you inspect one of the sections:
Please can anything be done about this so that Firefox is consistent with Chrome, i.e. it doesn't have those additional classes? Or is there an appropriate workaround I can use?
Thanks!
I've made a wrapper component with your library and when setting the parent props to expanded
true and if there's an element inside changing size it will freeze at the expanding stage without any errors. I've added as an example TinyMCE but this will happen with other elements changing the size while transitioning.
Expected: The collapsed content should be extended completly and all contents should be visible.
Actual: The collapsed content is partially cutoff and not completly visible until we reopen the collapse.
Hi, I'm looking for a way to circumvent the CSS transition height-auto dilemma
, which prevents proper CSS transitions when the height
of a DOM element is unknown. With your library I've only managed to show either 0% height (hidden) or 100% height of a DOM element. Is there any way to show, let's say height: 40vh
in the collapsed
state and upon click expand it to 100%?
Named export 'Collapse' not found. The requested module 'file:///Users/sleblanc/Github/mrleblanc101.github.io/node_modules/vue-collapsed/dist/index.umd.js' is a CommonJS module, which may not support all module.exports as named exports.
Great component. Simple and sweet.
Any plans for horizontal collapse?
Would you review a PR if I find the time to add it on my own / any strong recommendations on how to code the horizontal variant?
Hi, I am trying to create Collapse which contains to parts:
I have to set overflow: hidden
to all items scrollable content is nested in, but setting overflow: hidden
to top item inside collapse make it always 0px height. Maybe I missed something. Thanks in advance
<Collapse>
<div class="flex flex-col h-full overflow-hidden">
// This is non scrollable
<div>...</div>
// This is scrollable
<div class="overflow-auto h-full flex flex-col">...</div>
<div>
</Collapse>
The .collapse
class cause comflict with Tailwindcss, I would suggest prefixing like .v-collapse
it in the exemple to avoid people getting confused as to why it's not working.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.