1.2.9 (#18)

* Tests - Drop experimental webkit tests, streamline actions * Pkg - Up deps, bump 1.2.9, enable watch dev mode * Core - Refactor syntax, improve readability * Pkg - Edit readme * Pkg - Enable publish using provenance statements * Demo - Update examples, readme * CI - Enable publish on release tag
smastrom · Oct 19, 2023 · 60d2206 · 60d2206
1 parent 8b0ded8
commit 60d2206
Show file tree

Hide file tree

Showing 13 changed files with 168 additions and 156 deletions.
diff --git a/.github/workflows/chrome.yml → .github/workflows/chrome-tests.yml b/.github/workflows/chrome.yml → .github/workflows/chrome-tests.yml
@@ -1,6 +1,8 @@
 name: Chrome Tests
 
-on: [push]
+on:
+ push:
+ workflow_call:
 
 jobs:
  cypress-ct:
@@ -15,8 +17,6 @@ jobs:
  id: pnpm-install
  with:
  version: 8
- run_install: false
- - name: Install dependencies
- run: pnpm install
+ run_install: true
  - name: Chrome tests
  run: pnpm run test:chrome
diff --git a/.github/workflows/firefox.yml → .github/workflows/firefox-tests.yml b/.github/workflows/firefox.yml → .github/workflows/firefox-tests.yml
@@ -1,6 +1,8 @@
 name: Firefox Tests
 
-on: [push]
+on:
+ push:
+ workflow_call:
 
 jobs:
  cypress-ct:
@@ -15,8 +17,6 @@ jobs:
  id: pnpm-install
  with:
  version: 8
- run_install: false
- - name: Install dependencies
- run: pnpm install
+ run_install: true
  - name: Firefox tests
  run: pnpm run test:firefox
diff --git a/.github/workflows/publish.yml b/.github/workflows/publish.yml
@@ -0,0 +1,37 @@
+name: Publish to NPM
+
+on:
+ push:
+ tags: ['v*']
+ workflow_dispatch:
+
+jobs:
+ chrome-tests:
+ uses: ./.github/workflows/chrome-tests.yml
+ firefox-tests:
+ uses: ./.github/workflows/firefox-tests.yml
+ publish:
+ needs: [chrome-tests, firefox-tests]
+ runs-on: ubuntu-latest
+ permissions:
+ contents: read
+ id-token: write
+ steps:
+ - uses: actions/checkout@v3
+ - uses: actions/setup-node@v3
+ with:
+ node-version: '19.x'
+ registry-url: 'https://registry.npmjs.org'
+ - uses: pnpm/action-setup@v2
+ name: Install pnpm
+ with:
+ version: 8
+ run_install: true
+ - name: Build
+ run: pnpm build
+ - name: Pack
+ run: rm -rf *.tgz && npm pack
+ - name: Publish
+ run: npm publish *.tgz --provenance
+ env:
+ NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
diff --git a/.github/workflows/webkit.yml b/.github/workflows/webkit.yml
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/chrome.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-tests.yml?branch=main&label=tests)
 
 # Vue Collapsed
 
@@ -14,10 +14,6 @@ Check out my other packages for Vue 3:
 > _Fully-featured notification system for Vue and Nuxt._ 
 > [Visit repo ➔ ](https://github.com/smastrom/notivue)
 
-> 🔥 **Vue Use Fixed Header** 
-> _Turn your boring fixed header into a smart one with one line of code._ 
-> [Visit repo ➔ ](https://github.com/smastrom/vue-use-fixed-header)
-
 > 👌 **Vue Use Active Scroll** 
 > _Accurate TOC/sidebar links without compromises._ 
 > [Visit repo ➔ ](https://github.com/smastrom/vue-use-active-scroll)
@@ -27,9 +23,10 @@ Check out my other packages for Vue 3:
 ## Installation
 
 ```shell
-npm i -S vue-collapsed
+npm i vue-collapsed
 # yarn add vue-collapsed
 # pnpm add vue-collapsed
+# bun add vue-collapsed
 ```
 
 ## Props
@@ -63,7 +60,7 @@ const isExpanded = ref(false)
  <button @click="isExpanded = !isExpanded">Trigger</button>
 
  <Collapse :when="isExpanded">
- <p>This is a paragraph.</p>
+ <p>{{ 'Collapsed '.repeat(100) }}</p>
  </Collapse>
 </template>
 ```
@@ -84,7 +81,7 @@ If you prefer to use a custom duration or easing, add a class to Collapse that t
 
 ```vue
 <Collapse :when="isExpanded" class="v-collapse">
- <p>This is a paragraph.</p>
+ <p>{{ 'Collapsed '.repeat(100) }}</p>
 </Collapse>
 ```
 
@@ -95,10 +92,6 @@ If you prefer to use a custom duration or easing, add a class to Collapse that t
 }
 ```
 
-:bulb: Use [calc()](https://developer.mozilla.org/en-US/docs/Web/CSS/calc) to control the speed while keeping the ratio, _e.g. `calc(var(--vc-auto-duration) * 0.75)`_.
-
-:bulb: Find a full list of easings at [easings.net](https://easings.net).
-
 ### Multiple transitions
 
 To transition other properties use the attribute `data-collapse`:
@@ -111,7 +104,9 @@ To transition other properties use the attribute `data-collapse`:
 ```css
 .v-collapse {
  --dur-easing: var(--vc-auto-duration) cubic-bezier(0.33, 1, 0.68, 1);
- transition: height var(--dur-easing), opacity var(--dur-easing);
+ transition:
+ height var(--dur-easing),
+ opacity var(--dur-easing);
 }
 
 .v-collapse[data-collapse='expanded'],
@@ -141,7 +136,7 @@ Above values can also be accessed using `v-slot`:
 
 ```vue
 <Collapse :when="isExpanded" class="v-collapse" v-slot="{ state }">
- {{ state === 'collapsing' ? 'Collapsing the content...' : null }}
+ {{ state === 'collapsing' ? 'Collapsing content...' : null }}
 </Collapse>
 ```
 
@@ -212,16 +207,19 @@ import { Collapse } from 'vue-collapsed'
 
 const isExpanded = ref(false)
 
+const TOGGLE_ID = 'toggle-id'
+const COLLAPSE_ID = 'collapse-id'
+
 const toggleAttrs = computed(() => ({
- id: 'toggle-id',
- 'aria-controls': 'collapse-id',
+ id: TOGGLE_ID,
+ 'aria-controls': COLLAPSE_ID,
  'aria-expanded': isExpanded.value
 }))
 
 const collapseAttrs = {
  role: 'region',
- id: 'collapse-id',
- 'aria-labelledby': 'toggle-id'
+ id: COLLAPSE_ID,
+ 'aria-labelledby': TOGGLE_ID
 }
 
 function handleCollapse() {
@@ -233,7 +231,7 @@ function handleCollapse() {
  <div>
  <button v-bind="toggleAttrs" @click="handleCollapse">This a panel.</button>
  <Collapse v-bind="collapseAttrs" :when="isExpanded">
- <p>This is a paragraph.</p>
+ <p>{{ 'Collapsed '.repeat(100) }}</p>
  </Collapse>
  </div>
 </template>
@@ -244,7 +242,7 @@ function handleCollapse() {
 ```vue
 <template>
  <Collapse :when="isExpanded" class="instant-collapse">
- <p>This is a paragraph.</p>
+ <p>{{ 'Collapsed '.repeat(100) }}</p>
  </Collapse>
 </template>
 

diff --git a/cypress.config.ts b/cypress.config.ts
@@ -3,7 +3,6 @@ import { defineConfig } from 'cypress'
 export default defineConfig({
  component: {
  video: false,
- experimentalWebKitSupport: true,
  devServer: {
  framework: 'vue',
  bundler: 'vite',

diff --git a/demo/SingleCollapse.vue b/demo/SingleCollapse.vue
@@ -15,15 +15,18 @@ function handleCollapse() {
  * https://www.w3.org/WAI/ARIA/apg/example-index/accordion/accordion
  */
 
+const TOGGLE_ID = 'toggle'
+const COLLAPSE_ID = 'collapse'
+
 const toggleAttrs = computed(() => ({
- id: 'toggle',
+ id: TOGGLE_ID,
+ 'aria-controls': COLLAPSE_ID,
  'aria-expanded': isExpanded.value,
- 'aria-controls': 'collapse',
 }))
 
 const collapseAttrs = {
- 'aria-labelledby': 'toggle',
- id: 'collapse',
+ 'aria-labelledby': TOGGLE_ID,
+ id: COLLAPSE_ID,
  role: 'region',
 }
 </script>

diff --git a/demo/main.ts b/demo/main.ts
@@ -1,4 +1,4 @@
-import Collapse from '../src/Collapse.vue'
+import { Collapse } from '../dist'
 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.2.8",
+ "version": "1.2.9",
  "private": false,
  "description": "Dynamic CSS height transition from any to auto and vice versa for Vue 3. Accordion ready.",
  "keywords": [
@@ -39,37 +39,33 @@
  "dist/*"
  ],
  "scripts": {
- "build": "rimraf dist && vite build",
+ "build": "vite build",
  "postbuild": "pnpm pack",
- "build:app": "vite build --mode app",
- "dev": "vite",
- "preview": "vite build --mode app && vite preview",
+ "build:app": "vite build && vite build --mode app",
+ "dev": "concurrently \"vite\" \"vite build --watch\"",
+ "preview": "vite build:app && vite preview",
  "prepare": "husky install",
- "test:chrome": "cypress run --component --browser chrome",
- "test:firefox": "cypress run --component --browser firefox",
- "test:webkit": "cypress run --component --browser webkit",
- "test": "pnpm test:chrome && pnpm test:firefox && pnpm test:webkit",
- "test:gui": "cypress open --component"
+ "test:chrome": "pnpm build && cypress run --component --browser chrome",
+ "test:firefox": "pnpm build && cypress run --component --browser firefox",
+ "test:gui": "concurrently \"vite build --watch\" \"cypress open --component\""
  },
  "lint-staged": {
  "*.{ts,vue,md}": "prettier --write"
  },
  "devDependencies": {
- "@babel/types": "^7.22.10",
- "@rollup/plugin-terser": "^0.4.3",
- "@types/node": "^18.17.6",
- "@vitejs/plugin-vue": "^4.3.1",
- "cypress": "^12.17.4",
+ "@rollup/plugin-terser": "^0.4.4",
+ "@types/node": "^20.8.7",
+ "@vitejs/plugin-vue": "^4.4.0",
+ "concurrently": "^8.2.2",
+ "cypress": "^13.3.2",
  "cypress-wait-frames": "^0.9.4",
  "husky": "^8.0.3",
- "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.9",
- "vite-plugin-dts": "^1.7.3",
+ "lint-staged": "^15.0.2",
+ "prettier": "^3.0.3",
+ "typescript": "^5.2.2",
+ "vite": "^4.5.0",
+ "vite-plugin-dts": "^3.6.0",
  "vue": "^3.3.4",
- "vue-tsc": "^1.8.8"
+ "vue-tsc": "^1.8.19"
  }
 }