smastrom / vue-collapsed Goto Github PK
View Code? Open in Web Editor NEW:weight_lifting_man: 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
:weight_lifting_man: 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
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.
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".
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>
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!
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).
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'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.
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.
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
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.
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.
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.