diff --git a/.github/workflows/tests.yml b/.github/workflows/chrome.yml similarity index 71% rename from .github/workflows/tests.yml rename to .github/workflows/chrome.yml index 98a590b..74daad1 100644 --- a/.github/workflows/tests.yml +++ b/.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 new file mode 100644 index 0000000..cd05ed7 --- /dev/null +++ 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 new file mode 100644 index 0000000..9375827 --- /dev/null +++ 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 index 20f5076..8cf70e3 100644 --- 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 index 9de75d6..fcfe460 100644 --- 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 index 4c412a1..514af83 100644 --- 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 index 0fb0252..37b1bc3 100644 --- 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 index 80c08c8..4c30efb 100644 --- a/tests/App.vue +++ b/tests/App.vue @@ -1,11 +1,17 @@