1.2.0 (#14)

* up deps

* improve type generation

* convert from h to vue, replace props with emits, add auto transition

* replace props to emits in tests

* edit demo

* edit readme

* register global component in demo

* added missing watch from prev file

* bump 1.2.0

* edit readme

Author: smastrom

README.md

@@ -7,8 +7,6 @@ Dynamic CSS height transition from _any to auto_ and vice versa. Accordion ready
 
 [Examples and Demo](https://vue-collapsed.netlify.com) - [Stackblitz](https://stackblitz.com/edit/vue-dmjqey?file=src/App.vue)
 
-> :bulb: Requires Vue v3.0.0 or above.
-
 <br />
 
 Check out my other packages for Vue 3:
@@ -37,15 +35,20 @@ npm i -S vue-collapsed
 
 ## Props
 
-| name          | description                               | type                          | required           |
-| ------------- | ----------------------------------------- | ----------------------------- | ------------------ |
-| `when`        | Value to control collapse                 | boolean                       | :white_check_mark: |
-| `baseHeight`  | Collapsed height in px, defaults to `0`.  | number                        | :x:                |
-| `as`          | Tag to use instead of `div`               | _keyof_ HTMLElementTagNameMap | :x:                |
-| `onExpand`    | Callback on expand transition start       | () => void                    | :x:                |
-| `onExpanded`  | Callback on expand transition completed   | () => void                    | :x:                |
-| `onCollapse`  | Callback on collapse transition start     | () => void                    | :x:                |
-| `onCollapsed` | Callback on collapse transition completed | () => void                    | :x:                |
+| Name         | Description                              | Type                          | Required           |
+| ------------ | ---------------------------------------- | ----------------------------- | ------------------ |
+| `when`       | Value to control collapse                | boolean                       | :white_check_mark: |
+| `baseHeight` | Collapsed height in px, defaults to `0`. | number                        | :x:                |
+| `as`         | Tag to use instead of `div`              | _keyof_ HTMLElementTagNameMap | :x:                |
+
+## Emits
+
+| Name         | Description                   | Type       |
+| ------------ | ----------------------------- | ---------- |
+| `@expand`    | Expand transition start       | () => void |
+| `@expanded`  | Expand transition completed   | () => void |
+| `@collapse`  | Collapse transition start     | () => void |
+| `@collapsed` | Collapse transition completed | () => void |
 
 ## Usage
 
@@ -58,36 +61,43 @@ const isExpanded = ref(false)
 </script>
 
 <template>
-  <button @click="isExpanded = !isExpanded">This a panel.</button>
-  <Collapse :when="isExpanded" class="v-collapse">
+  <button @click="isExpanded = !isExpanded">Trigger</button>
+
+  <Collapse :when="isExpanded">
     <p>This is a paragraph.</p>
   </Collapse>
 </template>
-
-<style>
-.v-collapse {
-  transition: height 300ms cubic-bezier(0.33, 1, 0.68, 1);
-}
-</style>
 ```
 
-## Auto Duration
+## Automatic Transition / Duration
+
+By default, as long as no class is added to the `Collapse` element, `vue-collapsed` will add this transition for you:
+
+`height var(--vc-auto-duration) cubic-bezier(0.33, 1, 0.68, 1)`
 
-Vue Collapsed automatically calculates the optimal duration according to the content height. Use it by referencing the variable `--vc-auto-duration`:
+`var(--vc-auto-duration)` corresponds to the optimal transition duration which is automatically calculated according to the content height.
+
+If you prefer to use a custom duration or easing, add a class to Collapse that transitions the `height` property:
+
+```vue
+<Collapse :when="isExpanded" class="v-collapse">
+  <p>This is a paragraph.</p>
+</Collapse>
+```
 
 ```css
 .v-collapse {
-  transition: height var(--vc-auto-duration) ease-out;
+  transition: height 300ms ease-out;
 }
 ```
 
 :bulb: Use [calc()](https://developer.mozilla.org/en-US/docs/Web/CSS/calc) to control the speed, _e.g. `calc(var(--vc-auto-duration) * 0.75)`_.
 
 :bulb: Find a full list of easings at [easings.net](https://easings.net).
 
-## Additional transitions/styles
+## Multiple transitions
 
-To transition other properties or add granular styles use the attribute `data-collapse`:
+To transition other properties use the attribute `data-collapse`:
 
 | Transition | From        | Enter        | Leave       |
 | ---------- | ----------- | ------------ | ----------- |
@@ -115,7 +125,7 @@ Above values can also be accessed using `v-slot`:
 
 ```vue
 <Collapse :when="isExpanded" class="v-collapse" v-slot="{ state }">
-  {{ state === 'collapsing' ? 'Collapsing...' : null }}
+  {{ state === 'collapsing' ? 'Collapsing the content...' : null }}
 </Collapse>
 ```
 
@@ -164,19 +174,13 @@ function handleAccordion(selectedIndex) {
     <button @click="handleAccordion(index)">
       {{ question.title }}
     </button>
-    <Collapse :when="questions[index].isExpanded" class="v-collapse">
+    <Collapse :when="questions[index].isExpanded">
       <p>
         {{ question.answer }}
       </p>
     </Collapse>
   </div>
 </template>
-
-<style>
-.v-collapse {
-  transition: height var(--vc-auto-duration) cubic-bezier(0.33, 1, 0.68, 1);
-}
-</style>
 ```
 
 ## Example - Callbacks
@@ -197,23 +201,13 @@ function scrollIntoView(index) {
     <button @click="handleAccordion(index)">
       {{ question.title }}
     </button>
-    <Collapse
-      :when="questions[index].isExpanded"
-      :onExpanded="() => scrollIntoView(index)"
-      class="v-collapse"
-    >
+    <Collapse :when="questions[index].isExpanded" @expanded="() => scrollIntoView(index)">
       <p>
         {{ question.answer }}
       </p>
     </Collapse>
   </div>
 </template>
-
-<style>
-.v-collapse {
-  transition: height var(--vc-auto-duration) cubic-bezier(0.33, 1, 0.68, 1);
-}
-</style>
 ```
 
 ## Make it accessible
@@ -245,17 +239,11 @@ function handleCollapse() {
 <template>
   <div>
     <button v-bind="toggleAttrs" @click="handleCollapse">This a panel.</button>
-    <Collapse v-bind="collapseAttrs" :when="isExpanded" class="v-collapse">
+    <Collapse v-bind="collapseAttrs" :when="isExpanded">
       <p>This is a paragraph.</p>
     </Collapse>
   </div>
 </template>
-
-<style>
-.v-collapse {
-  transition: height var(--vc-auto-duration) cubic-bezier(0.33, 1, 0.68, 1);
-}
-</style>
 ```
 
 ## License

demo/Accordion.vue

@@ -1,6 +1,8 @@
 <script setup lang="ts">
 import { reactive } from 'vue'
+
 import ExampleHeader from './ExampleHeader.vue'
+
 import fakeData from './fakeData.json'
 
 const questions = reactive(
@@ -36,8 +38,8 @@ function handleAccordion(selectedIndex: number) {
             {{ question.title }}
          </button>
 
-         <Collapse as="section" :when="question.isExpanded" class="v-collapse">
-            <p>
+         <Collapse as="section" :when="question.isExpanded">
+            <p class="CollapseContent">
                {{ question.answer }}
             </p>
          </Collapse>

demo/AdvancedControl.vue

@@ -1,16 +1,13 @@
 <script lang="ts" setup>
 import { ref } from 'vue'
+
 import ExampleHeader from './ExampleHeader.vue'
 
 const isExpanded = ref(true)
 
 function handleCollapse() {
    isExpanded.value = !isExpanded.value
 }
-
-function capitalize(string: string) {
-   return string && string[0].toUpperCase() + string.slice(1)
-}
 </script>
 
 <template>
@@ -25,7 +22,7 @@ function capitalize(string: string) {
          <div class="InnerElement">
             <button @click="handleCollapse">Toggle</button>
 
-            {{ capitalize(state) }}{{ state.endsWith('ing') ? '...' : '.' }}
+            {{ state }}{{ state.endsWith('ing') ? '...' : '.' }}
          </div>
       </Collapse>
    </article>
@@ -34,6 +31,7 @@ function capitalize(string: string) {
 <style>
 .AdvancedCollapse {
    --easing-dur: calc(var(--vc-auto-duration) * 1.5) cubic-bezier(0.33, 1, 0.68, 1);
+
    transition: height var(--easing-dur), background-color var(--easing-dur),
       border-radius var(--easing-dur);
 }
@@ -60,6 +58,7 @@ function capitalize(string: string) {
    font-size: 1.75rem;
    color: var(--BackgroundColor);
    height: 400px;
+   text-transform: capitalize;
 }
 
 .InnerElement button {

demo/App.vue

@@ -194,11 +194,7 @@ footer {
    cursor: pointer;
 }
 
-.v-collapse {
-   transition: height var(--vc-auto-duration) cubic-bezier(0.33, 1, 0.68, 1);
-}
-
-.v-collapse p {
+.CollapseContent {
    padding: 0 10px 10px;
    margin: 0;
    color: var(--ForegroundColorLight);
@@ -226,7 +222,7 @@ footer {
       padding: 20px 10px;
    }
 
-   .v-collapse p {
+   .CollapseContent {
       padding: 0 20px 20px;
       margin: 0;
       color: var(--ForegroundColorLight);

demo/IndividualControl.vue

@@ -1,6 +1,8 @@
 <script setup lang="ts">
 import { ref, computed } from 'vue'
+
 import ExampleHeader from './ExampleHeader.vue'
+
 import fakeData from './fakeData.json'
 
 const questions = ref(
@@ -58,8 +60,8 @@ const collapseAttrs = computed(() =>
          >
             {{ question.title }}
          </button>
-         <Collapse :when="question.isExpanded" class="v-collapse" v-bind="collapseAttrs[index]">
-            <p>
+         <Collapse :when="question.isExpanded" v-bind="collapseAttrs[index]">
+            <p class="CollapseContent">
                {{ question.answer }}
             </p>
          </Collapse>

demo/SingleCollapse.vue

@@ -47,8 +47,8 @@ const collapseAttrs = {
          >
             Hello buddy, how are you today?
          </button>
-         <Collapse v-bind="collapseAttrs" :when="isExpanded" class="v-collapse">
-            <p>
+         <Collapse v-bind="collapseAttrs" :when="isExpanded">
+            <p class="CollapseContent">
                As an interesting side note, as a head without a body, I envy the dead. Kids don't
                turn rotten just from watching TV. Bender, I didn't know you liked cooking. That's so
                cute. That's right, baby. I ain't your loverboy Flexo, the guy you love so much. You

demo/WithCallbacks.vue

@@ -1,11 +1,14 @@
 <script setup lang="ts">
 import { reactive, ref } from 'vue'
+
 import ExampleHeader from './ExampleHeader.vue'
+
 import fakeData from './fakeData.json'
 
 const collapseRefs = ref<Element[]>([])
 const indexToScroll = ref(-1)
-const isBusy = ref(false)
+
+let isBusy = false
 
 const questions = reactive(
    fakeData.map(({ title, answer }) => ({ title, answer, isExpanded: false }))
@@ -25,19 +28,19 @@ function scrollIntoView(index: number) {
 
 function onExpanded(index: number) {
    indexToScroll.value = index
-   if (!isBusy.value) {
+   if (!isBusy) {
       scrollIntoView(index)
    }
 }
 
 function onCollapse() {
-   isBusy.value = true
+   isBusy = true
 }
 
 function onCollapsed() {
-   if (isBusy.value && indexToScroll.value !== -1) {
+   if (isBusy && indexToScroll.value !== -1) {
       scrollIntoView(indexToScroll.value)
-      isBusy.value = false
+      isBusy = false
    }
 }
 </script>
@@ -71,12 +74,11 @@ function onCollapsed() {
          <Collapse
             as="section"
             :when="question.isExpanded"
-            class="v-collapse"
             :onExpanded="() => onExpanded(index)"
             :onCollapse="onCollapse"
             :onCollapsed="onCollapsed"
          >
-            <p>
+            <p class="CollapseContent">
                {{ question.answer }}
             </p>
          </Collapse>

demo/main.ts

@@ -1,4 +1,4 @@
-import { Collapse } from '../src'
+import Collapse from '../src/Collapse.vue'
 import { createApp } from 'vue'
 import App from './App.vue'
 

package.json

@@ -1,6 +1,6 @@
 {
    "name": "vue-collapsed",
-   "version": "1.1.3",
+   "version": "1.2.0",
    "private": false,
    "description": "Dynamic CSS height transition from any to auto and vice versa for Vue 3. Accordion ready.",
    "keywords": [
@@ -33,6 +33,7 @@
    ],
    "scripts": {
       "build": "rimraf dist && vite build",
+      "postbuild": "pnpm pack",
       "build:app": "vite build --mode app",
       "dev": "vite",
       "prepare": "husky install",
@@ -46,21 +47,21 @@
       "*.{ts,vue,md}": "prettier --write"
    },
    "devDependencies": {
-      "@babel/types": "^7.21.4",
-      "@rollup/plugin-terser": "^0.4.1",
-      "@types/node": "^18.16.1",
-      "@vitejs/plugin-vue": "^4.2.1",
-      "cypress": "^12.11.0",
+      "@babel/types": "^7.22.5",
+      "@rollup/plugin-terser": "^0.4.3",
+      "@types/node": "^18.17.0",
+      "@vitejs/plugin-vue": "^4.2.3",
+      "cypress": "^12.17.2",
       "cypress-wait-frames": "^0.9.4",
       "husky": "^8.0.3",
-      "lint-staged": "^13.2.2",
-      "playwright-webkit": "^1.33.0",
+      "lint-staged": "^13.2.3",
+      "playwright-webkit": "^1.36.2",
       "prettier": "^2.8.8",
       "rimraf": "^4.4.1",
       "typescript": "^4.9.5",
-      "vite": "^4.3.3",
+      "vite": "^4.4.7",
       "vite-plugin-dts": "^1.7.3",
-      "vue": "^3.2.47",
-      "vue-tsc": "^1.6.0"
+      "vue": "^3.3.4",
+      "vue-tsc": "^1.8.6"
    }
 }