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

Author: smastrom

.github/workflows/chrome.yml renamed to .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

.github/workflows/firefox.yml renamed to .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

.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 }}

.github/workflows/webkit.yml

@@ -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>
 

README.md

@@ -3,7 +3,6 @@ import { defineConfig } from 'cypress'
 export default defineConfig({
    component: {
       video: false,
-      experimentalWebKitSupport: true,
       devServer: {
          framework: 'vue',
          bundler: 'vite',

cypress.config.ts

@@ -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>

demo/SingleCollapse.vue

@@ -1,4 +1,4 @@
-import Collapse from '../src/Collapse.vue'
+import { Collapse } from '../dist'
 import { createApp } from 'vue'
 import App from './App.vue'
 

demo/main.ts

@@ -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"
    }
 }