1.3.2 (#27)

* fix onTransitionEnd height comparison, #26

* bump 1.3.2

* up github actions node version

* fix height comparison, 2

* up deps

* attempt to fix github action cypress binary err

* attempt to fix github action cypress binary err, 2

* update test to match firefox 124 behavior, set node to 21 to ci

* fix cypress firefox >= 124 ci bug

* fix cypress firefox >= 124 ci bug, 2

* remove firefox tests from ci (bugged as hell), cleanup

Author: smastrom

.github/workflows/chrome-tests.yml

@@ -11,13 +11,15 @@ jobs:
          - uses: actions/checkout@v3
          - uses: actions/setup-node@v3
            with:
-              node-version: '18'
+              node-version: 21
          - uses: pnpm/action-setup@v2
            name: Install pnpm
            with:
               version: 8
-              run_install: true
+              run_install: false
+         - name: Install deps
+           run: pnpm i
          - name: Install Cypress binaries
-           run: npx cypress install
+           run: pnpm dlx cypress install
          - name: Chrome tests
            run: pnpm test:chrome

.github/workflows/firefox-tests.yml

@@ -20,7 +20,7 @@ jobs:
          - uses: actions/checkout@v3
          - uses: actions/setup-node@v3
            with:
-              node-version: '20.x'
+              node-version: '21.x'
               registry-url: 'https://registry.npmjs.org'
          - uses: pnpm/action-setup@v2
            name: Install pnpm

.github/workflows/publish.yml

@@ -17,8 +17,8 @@
    "devDependencies": {
       "concurrently": "^8.2.2",
       "husky": "^8.0.3",
-      "lint-staged": "^15.2.0",
-      "prettier": "^3.1.0"
+      "lint-staged": "^15.2.2",
+      "prettier": "^3.2.5"
    },
    "lint-staged": {
       "*.{js,ts,vue,json,css,md}": "prettier --write"

package.json

@@ -1,6 +1,6 @@
 {
    "name": "vue-collapsed",
-   "version": "1.3.1",
+   "version": "1.3.2",
    "private": false,
    "description": "Dynamic CSS height transition from any to auto and vice versa for Vue 3. Accordion ready.",
    "keywords": [
@@ -47,16 +47,16 @@
       "test:gui": "concurrently \"pnpm watch\" \"cypress open --component\""
    },
    "devDependencies": {
-      "@types/node": "^20.8.7",
-      "@vitejs/plugin-vue": "^4.4.0",
+      "@types/node": "^20.12.5",
+      "@vitejs/plugin-vue": "^4.6.2",
       "concurrently": "^8.2.2",
-      "cypress": "^13.3.2",
-      "cypress-wait-frames": "^0.9.4",
-      "husky": "^8.0.3",
-      "typescript": "^5.2.2",
-      "vite": "^4.5.0",
-      "vite-plugin-dts": "^3.6.0",
-      "vue": "^3.3.4",
-      "vue-tsc": "^1.8.19"
+      "cypress": "^13.7.2",
+      "cypress-wait-frames": "^0.9.8",
+      "husky": "^9.0.11",
+      "typescript": "^5.4.4",
+      "vite": "^4.5.3",
+      "vite-plugin-dts": "^3.8.1",
+      "vue": "^3.3.13",
+      "vue-tsc": "^1.8.27"
    }
 }

packages/vue-collapsed/package.json

@@ -212,18 +212,18 @@ watch(baseHeight, (newBaseHeight) => {
 // Transition events
 
 function onTransitionEnd(e: TransitionEvent) {
-   if (e.target === collapseRef.value && e.propertyName === 'height') {
+   if (e.target && e.target === collapseRef.value && e.propertyName === 'height') {
       /**
        * Reset styles to the initial style state,
        * we also make sure callbacks are triggered only once
        * when transitions are 100% finished.
        */
       if (isExpanded.value) {
-         if (collapseRef.value?.scrollHeight === getComputedHeight(collapseRef)) {
+         if (Math.abs(collapseRef.value.scrollHeight - getComputedHeight(collapseRef)) < 1) {
             onExpanded()
          }
       } else {
-         if (baseHeight.value === getComputedHeight(collapseRef)) {
+         if (Math.abs(baseHeight.value - getComputedHeight(collapseRef)) < 1) {
             onCollapsed()
          }
       }

packages/vue-collapsed/src/Collapse.vue

@@ -41,7 +41,7 @@ export function isReducedOrDisabled(el: RefEl) {
 
    return (
       typeof window.requestAnimationFrame === 'undefined' ||
-      matchMedia('(prefers-reduced-motion: reduce)').matches ||
+      window.matchMedia('(prefers-reduced-motion: reduce)').matches ||
       transition.includes('none') ||
       transition.includes('height 0s')
    )