phegman / v-show-slide Goto Github PK

Thnx for the plugin - This works better than Vuetify's expansion-panels() (It may be lighter too).

Cli-3 gives the following warning below; If you could add the declaration and/or update the docs, it would be greatly appreciate.

Could not find a declaration file for module 'v-show-slide'. 'c:/.../node_modules/v-show-slide/dist/v-show-slide.js' implicitly has an 'any' type.
Try npm install @types/v-show-slide if it exists or add a new declaration (.d.ts) file containing `declare module 'v-show-slide';

Hi,
Thanks for this useful directive!
On my current project, things leads me to a specific need: I have to know when an element ended the collapse/uncollapse animation.

For now, I will just use a combo of setTimeout/clearTimeout because I have no other options but I think it might be interesting to add callbacks or events for:

• open starts
• open ends
• close starts
• close ends

Would it be possible? :)

@phegman Is there any easy way of implementing VShowSlide so that it can function as a "Read More" button? In a nutshell:

1. Upon initialization, the "hidden" text block would be partially visible, as in, a specific height of it, expressed in rem units, e.g. 5 for three visible lines of text.
2. Clicking the Read More (expand) button, would expand the whole text.
3. A second click event on the button would revert the state of the content, basically by collapsing the text and bringing the button back to its original Y location, while of course leaving only the initial 3 text lines visible.

I noticed that, by manually changing the initial height of the collapsible text element from 0px to a specific rem value, in my case 5, and turning its CSS visibility property to visible, I got the desired effect, albeit obviously a non-functional one.

To sum it all up, is there any way of modifying the plugin's default CSS declarations that it would otherwise apply, by default, to the collapsible element? I'm attaching a screenshot which illustrates what I'm trying to achieve. I'm hoping I'm making sense, otherwise let me know and I'll do my best to explain what I'm looking for, in a better way.

Thanks a lot!

First of all: great job, thank you for the directive very much !

Vue version is '2.5.9'
It would be better to include JSFiddle, but current package has no cdn version. Accordion component works without jQuery - it is simple HTML with 'v-show-slide' directive on each toggle panel. Data is linked to v-model. 'V-show-slide' Boolean conditions are unique for every panel.

Issue: when one input is changed - all panels with directive are triggered.

please add option to change css overflow

Hi, thanks for your component.
I just noticed one issue: when the toggled element has some border set, the height will go smoothly up to "height" of element without border, then instantly jump to real "full" height.

el.scrollHeight probably doesn't count in borders...
To overcome this, we would probably need to use getComputedStyle() to get actual border size and add it to el.scrollHeight.

Should I do an PR?

Unfortunately I was not able to make it work at all. I have a vue3 app, maybe this may be the reason. In this case, I would ask to please upgrade or state so in the docs.

Here's my code, slightly modified from your example:

<template>
    <div id="app" class="app">
        <ul id="features" v-show-slide="featuresOpen" class="features">
            <li>Aliquam lorem</li>
            <li>Praesent porttitor nulla vitae posuere</li>
            <li>Suspendisse nisl elit rhoncus</li>
            <li>Donec mi odio faucibus</li>
            <li>Curabitur suscipit suscipit</li>
        </ul>
        <button
            @click="toggleFeatures"
            class="toggle-features"
            aria-controls="features"
            :aria-expanded="featuresOpen ? 'true' : 'false'"
        >
            {{ featuresOpen ? 'Hide Features' : 'View Features' }}
        </button>
    </div>
</template>

<script>
import { defineComponent } from 'vue';
export default defineComponent({
    name: 'Slider',
    data() {
        return {
            featuresOpen: false,
        };
    },
    methods: {
        toggleFeatures() {
            this.featuresOpen = !this.featuresOpen;
        },
    },
});
</script>

It does toggle the button text, but does not slide at all, just plainly show the ul list.

Build not quite right for typescript? Linters not finding dist/index.d.ts when using import VShowSlide from 'v-show-slide' with error:

Could not find a declaration file for module 'v-show-slide'. '/path/to/app/node_modules/v-show-slide/dist/v-show-slide.umd.js' implicitly has an 'any' type.

However, using import VShowSlide from 'v-show-slide/src' works fine.

When wrapping form fields in a v-show-slide, the user can tab into hidden form fields and edit them