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
smastrom · Jul 25, 2023 · ebf4b4d · ebf4b4d
1 parent 23fe3d3
commit ebf4b4d
Show file tree

Hide file tree

Showing 16 changed files with 378 additions and 362 deletions.
diff --git a/README.md b/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

diff --git a/demo/Accordion.vue b/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>

diff --git a/demo/AdvancedControl.vue b/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 {

diff --git a/demo/App.vue b/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);

diff --git a/demo/IndividualControl.vue b/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>

diff --git a/demo/SingleCollapse.vue b/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

diff --git a/demo/WithCallbacks.vue b/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>

diff --git a/demo/main.ts b/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'
 

diff --git a/package.json b/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"
  }
 }