release 1.2.7

Author: smastrom

.github/workflows/tests.yml renamed to .github/workflows/chrome.yml

@@ -1,9 +1,9 @@
-name: Tests
+name: Chrome Tests
 
 on: [push]
 
 jobs:
-   cypress-run:
+   cypress-ct:
       runs-on: ubuntu-latest
       steps:
          - uses: actions/checkout@v3
@@ -18,8 +18,5 @@ jobs:
               run_install: false
          - name: Install dependencies
            run: pnpm install
-         - name: Tests
-           uses: cypress-io/github-action@v5
-           with:
-              install: false
-              component: true
+         - name: Chrome tests
+           run: pnpm run test:chrome

.github/workflows/firefox.yml

@@ -0,0 +1,22 @@
+name: Firefox Tests
+
+on: [push]
+
+jobs:
+   cypress-ct:
+      runs-on: macos-latest
+      steps:
+         - uses: actions/checkout@v3
+         - uses: actions/setup-node@v3
+           with:
+              node-version: '18'
+         - uses: pnpm/action-setup@v2
+           name: Install pnpm
+           id: pnpm-install
+           with:
+              version: 8
+              run_install: false
+         - name: Install dependencies
+           run: pnpm install
+         - name: Firefox tests
+           run: pnpm run test:firefox

.github/workflows/webkit.yml

@@ -0,0 +1,22 @@
+name: Webkit Tests
+
+on: [push]
+
+jobs:
+   cypress-ct:
+      runs-on: macos-latest
+      steps:
+         - uses: actions/checkout@v3
+         - uses: actions/setup-node@v3
+           with:
+              node-version: '18'
+         - uses: pnpm/action-setup@v2
+           name: Install pnpm
+           id: pnpm-install
+           with:
+              version: 8
+              run_install: false
+         - name: Install dependencies
+           run: pnpm install
+         - name: Webkit tests
+           run: pnpm run test:webkit

README.md

@@ -1,4 +1,4 @@
-![npm](https://img.shields.io/npm/v/vue-collapsed?color=46c119) ![dependencies](https://img.shields.io/badge/dependencies-0-success) ![npm bundle size](https://img.shields.io/bundlephobia/minzip/vue-collapsed?color=success) ![downloads](https://img.shields.io/npm/dm/vue-collapsed) ![GitHub Workflow Status](https://img.shields.io/github/actions/workflow/status/smastrom/vue-collapsed/tests.yml?branch=main&label=tests)
+![npm](https://img.shields.io/npm/v/vue-collapsed?color=46c119) ![dependencies](https://img.shields.io/badge/dependencies-0-success) ![npm bundle size](https://img.shields.io/bundlephobia/minzip/vue-collapsed?color=success) ![downloads](https://img.shields.io/npm/dm/vue-collapsed) ![GitHub Workflow Status](https://img.shields.io/github/actions/workflow/status/smastrom/vue-collapsed/chrome.yml?branch=main&label=tests)
 
 # Vue Collapsed
 

cypress/support/component.ts

@@ -18,3 +18,5 @@ export function getRandomIntInclusive(min: number, max: number) {
 }
 
 Cypress.Commands.add('mount', mount)
+
+export const isFirefox = Cypress.isBrowser('firefox')

package.json

@@ -1,6 +1,6 @@
 {
    "name": "vue-collapsed",
-   "version": "1.2.6",
+   "version": "1.2.7",
    "private": false,
    "description": "Dynamic CSS height transition from any to auto and vice versa for Vue 3. Accordion ready.",
    "keywords": [
@@ -54,19 +54,19 @@
       "*.{ts,vue,md}": "prettier --write"
    },
    "devDependencies": {
-      "@babel/types": "^7.22.5",
+      "@babel/types": "^7.22.10",
       "@rollup/plugin-terser": "^0.4.3",
-      "@types/node": "^18.17.1",
-      "@vitejs/plugin-vue": "^4.2.3",
-      "cypress": "^12.17.3",
+      "@types/node": "^18.17.6",
+      "@vitejs/plugin-vue": "^4.3.1",
+      "cypress": "^12.17.4",
       "cypress-wait-frames": "^0.9.4",
       "husky": "^8.0.3",
-      "lint-staged": "^13.2.3",
-      "playwright-webkit": "^1.36.2",
+      "lint-staged": "^13.3.0",
+      "playwright-webkit": "^1.37.1",
       "prettier": "^2.8.8",
       "rimraf": "^4.4.1",
       "typescript": "^4.9.5",
-      "vite": "^4.4.8",
+      "vite": "^4.4.9",
       "vite-plugin-dts": "^1.7.3",
       "vue": "^3.3.4",
       "vue-tsc": "^1.8.8"

src/Collapse.vue

@@ -84,7 +84,13 @@ onMounted(() => {
    if (!collapseRef.value) return
    if (!isExpanded.value && baseHeight.value === 0) style.value = VISUALLY_HIDDEN
 
-   autoDuration.value = getAutoDuration(collapseRef.value.scrollHeight - baseHeight.value)
+   const _autoDuration = getAutoDuration(collapseRef.value.scrollHeight - baseHeight.value)
+
+   /**
+    * Autoduration cannot be calculated if collapseRef or any ancestors
+    * have 'display:none' on mount. In this case we cast it to 300ms.
+    */
+   autoDuration.value = _autoDuration <= 0 ? 300 : _autoDuration
    style.value = isExpanded.value ? safeStyles : collapsedStyles.value
 })
 

tests/App.vue

@@ -1,11 +1,17 @@
 <script lang="ts" setup>
 import { Collapse } from '../src'
-import { ref } from 'vue'
+import { onMounted, ref } from 'vue'
 
 const props = withDefaults(
-   defineProps<{ initialValue: boolean; as: keyof HTMLElementTagNameMap; baseHeight: number }>(),
+   defineProps<{
+      initialValue: boolean
+      as: keyof HTMLElementTagNameMap
+      baseHeight: number
+      hiddenOnMount: boolean
+   }>(),
    {
       initialValue: false,
+      hiddenOnMount: false,
       as: 'div',
       baseHeight: 0,
    }
@@ -15,6 +21,16 @@ const isExpanded = ref(props.initialValue)
 
 const baseHeight = ref(props.baseHeight)
 
+const isHiddenOnMount = ref(props.hiddenOnMount)
+
+onMounted(() => {
+   if (props.hiddenOnMount) {
+      setTimeout(() => {
+         isHiddenOnMount.value = false
+      }, 1000)
+   }
+})
+
 const countExpand = ref(0)
 const countExpanded = ref(0)
 const countCollapse = ref(0)
@@ -50,7 +66,12 @@ function decreaseBaseHeight() {
 </script>
 
 <template>
-   <section class="Wrapper">
+   <section
+      class="Wrapper"
+      :style="{
+         display: isHiddenOnMount ? 'none' : 'block',
+      }"
+   >
       <div id="CountExpand">{{ countExpand }}</div>
       <div id="CountExpanded">{{ countExpanded }}</div>
       <div id="CountCollapse">{{ countCollapse }}</div>