0.0.19 • Published 2 years ago

vue3-collapse v0.0.19

Weekly downloads
-
License
MIT
Repository
github
Last release
2 years ago

Vue3 Collapse

A simple, customizable and highly performant Vue 3 component for collapsing elements with support for transitions and easings.

Features:

  • v-model support for toggle value
  • duration and easing options
  • optional withOpacity to control the opacity during the collapse transition
  • highly performant, uses vue's built-in computed properties and hooks
  • clean and modular code structure, easy to extend and customize

It uses the MutationObserver API to observe changes to the target element and updates its height and opacity as needed. It also sets up event listeners for the resize event to ensure the collapsing effect is responsive to window changes.

Installation and usage

npm install vue3-collapse

You can use register it globally like this:

import vue3Collapse from "vue3Collapse";
import App from "./App.vue";
import { createApp } from "vue";

const app = createApp(App);

app.component("vue3-collapse", vue3Collapse);

then use it this in your component:

<vue3-collapse />

Alternatively, you can use it directly:

<!-- your-component.vue -->

<template>
  <vue3-collapse v-model="open">
    <content-to-collapse />
  </vue3-collapse>
</template>

<script>
import { defineComponent } from "vue";
import vue3Collapse from "vue3Collapse";

export default defineComponent({
  components: {
    vue3Collapse,
  },
});
</script>

Browser with CDN

<script src="https://unpkg.com/vue"></script>
<script src="https://unpkg.com/vue3-collapse"></script>
const { createApp } = Vue;
const App = {
  //Component code...
};
const app = createApp(App);
app.component("vue3Collapse", Vue3Collapse);
app.mount("#app");

Vue3Collapse uses v-model to toggle its collapsed state :

<vue3-collapse v-model="open">
    <content-to-collapse />
</vue3-collapse>

##Slot

This component uses slot to the content you want to collapse. Like this:

<vue3-collapse v-model="open">
    <content-to-collapse />
</vue3-collapse>

Props

PropDescriptionTypeDefault
modelValue (required)The value to be passed as v-model, should be a booleanBooleanN/A
duration (optional)The duration of the animation in millisecondsString Or Number500
withOpacity (optional)Whether to include an opacity animationBooleanTrue
easing (optional)The easing function to be applied to the animationStringlinear

Note: The available easing options are listed in a separate table below.

The value of the easing prop can be any of these options (on the left)

OptionEasing function
linearlinear
easeease
easeInease-in
easeOutease-out
easeInOutease-in-out
easeInSinecubic-bezier(0.12, 0, 0.39, 0)
easeOutSinecubic-bezier(0.61, 1, 0.88, 1)
easeInOutSinecubic-bezier(0.37, 0, 0.63, 1)
easeInQuadcubic-bezier(0.11, 0, 0.5, 0)
easeOutQuadcubic-bezier(0.5, 1, 0.89, 1)
easeInOutQuadcubic-bezier(0.45, 0, 0.55, 1)
easeInCubiccubic-bezier(0.32, 0, 0.67, 0)
easeOutCubiccubic-bezier(0.33, 1, 0.68, 1)
easeInOutCubiccubic-bezier(0.65, 0, 0.35, 1)
easeInQuartcubic-bezier(0.5, 0, 0.75, 0)
easeOutQuartcubic-bezier(0.25, 1, 0.5, 1)
easeInOutQuartcubic-bezier(0.76, 0, 0.24, 1)
easeInQuintcubic-bezier(0.64, 0, 0.78, 0)
easeOutQuintcubic-bezier(0.22, 1, 0.36, 1)
easeInOutQuintcubic-bezier(0.83, 0, 0.17, 1)
easeInExpocubic-bezier(0.7, 0, 0.84, 0)
easeOutExpocubic-bezier(0.16, 1, 0.3, 1)
easeInOutExpocubic-bezier(0.87, 0, 0.13, 1)
easeInCirccubic-bezier(0.55, 0, 1, 0.45)
easeOutCirccubic-bezier(0, 0.55, 0.45, 1)
easeInOutCirccubic-bezier(0.85, 0, 0.15, 1)
easeInBackcubic-bezier(0.36, 0, 0.66, -0.56)
easeOutBackcubic-bezier(0.34, 1.56, 0.64, 1)
easeInOutBackcubic-bezier(0.68, -0.6, 0.32, 1.6)
0.0.19

2 years ago

0.0.18

2 years ago

0.0.17

2 years ago

0.0.16

2 years ago

0.0.15

2 years ago

0.0.14

2 years ago

0.0.13

2 years ago

0.0.12

2 years ago

0.0.11

2 years ago

0.0.10

2 years ago

0.0.9

2 years ago

0.0.8

2 years ago

0.0.7

2 years ago

0.0.6

2 years ago

0.0.5

2 years ago

0.0.4

2 years ago

0.0.3

2 years ago

0.0.2

2 years ago

0.0.1

2 years ago

0.0.0

2 years ago