release 1.2.7

smastrom · Aug 20, 2023 · 168378b · 168378b
1 parent a7cf517
commit 168378b
Show file tree

Hide file tree

Showing 9 changed files with 187 additions and 108 deletions.
diff --git a/.github/workflows/tests.yml → .github/workflows/chrome.yml b/.github/workflows/tests.yml → .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
diff --git a/.github/workflows/firefox.yml b/.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
diff --git a/.github/workflows/webkit.yml b/.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
diff --git a/README.md b/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
 

diff --git a/cypress/support/component.ts b/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')
diff --git a/package.json b/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"

diff --git a/src/Collapse.vue b/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
 })
 

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