first commit

README.md

@@ -1,93 +1,49 @@
-**--- DELETE START ---**
+# 📂 Alpine Collapse Plus 📂
 
-# Alpine JS Plugin Template
-
-This is a template repository to help developers quickly build Alpine JS
-plugins.
-
-## How to Use
-
-1. Clone the repository with the "Use this template" button on GitHub
-2. Run `npm install` to install ES Build
-3. Build your plugin
-
-### Compiling
-
-To compile the code you run `npm run build` which will create two files in the
-`/dist` directory.
-
-### Testing
-
-In this template you will find a `index.html` file that you can use for testing
-how the Alpine JS plugin works.
-
-I recommend using [vercel/serve](https://www.npmjs.com/package/serve) to serve
-this file.
-
-## Things to Change
-
-- Find and replace "PLUGIN" with the name of your plugin
-- Find and replace "FILE" with the name of your compiled file
-- Find and replace "DESCRIPTION" with a description of your plugin
-- Uncomment "index.html" in the `.gitignore` file
-
-🚨 Make sure find and replace is case sensitive
-
-If you were creating a plugin called "Alpine JS CSV" you could do the following:
-
-- "PLUGIN" to "alpinejs-csv"
-- "FILE" to "csv"
-- "DESCRIPTION" to "Transform data into a CSV with Alpine JS 📈"
-
----
-
-### License
-
-The choice of adding a license and what license is best for your project is up
-to you.
-
-[Adding a License on GitHub](https://docs.github.com/en/communities/setting-up-your-project-for-healthy-contributions/adding-a-license-to-a-repository)
-
-**--- DELETE END ---**
-
-# PLUGIN
-
-DESCRIPTION
+An Alpine JS plugin to enhance the collapse directive. It seperates transform and opacity animations for a more organic transition.
 
 ## Install
 
-### With a CDN
+### Via CDN
 
 ```html
-<script defer src="https://unpkg.com/PLUGIN@latest/dist/FILE.min.js"></script>
+<script defer src="https://unpkg.com/alpine-collapse-plus@latest/dist/collapse-plus.min.js"></script>
 
 <script defer src="https://unpkg.com/[email protected]/dist/cdn.min.js"></script>
 ```
 
 ### With a Package Manager
 
 ```shell
-yarn add -D PLUGIN
-
-npm install -D PLUGIN
+npm install -D alpine-collapse-plus
 ```
 
 ```js
 import Alpine from 'alpinejs'
-import FILE from 'PLUGIN'
+import collapse from 'alpine-collapse-plus'
 
-Alpine.plugin(FILE)
+Alpine.plugin(collapse)
 
 Alpine.start()
 ```
 
 ## Example
 
-Examples of how the plugin works.
+See index.html for an example with default settings.
+
+## Modifiers
+
+- `duration` - The duration of the collapse/expand transition in milliseconds. See original [Alpine.js collapse directive](https://alpinejs.dev/plugins/collapse#duration) for more information.
+- `min` - The minimum height of the collapse/expand transition in pixels. See original [Alpine.js collapse directive](https://alpinejs.dev/plugins/collapse#min) for more information.
+
+- `content-delay` - The delay of the opacity transition in milliseconds.
+- `content-duration` - The duration of the content opacity transition.
+- `content-duration-out` - The duration of the content opacity transition when closing.
+- `content-stagger` - The stagger interval
 
 ## Stats
 
-![](https://img.shields.io/bundlephobia/min/PLUGIN)
-![](https://img.shields.io/npm/v/PLUGIN)
-![](https://img.shields.io/npm/dt/PLUGIN)
-![](https://img.shields.io/github/license/markmead/PLUGIN)
+![](https://img.shields.io/bundlephobia/min/alpine-collapse-plus)
+![](https://img.shields.io/npm/v/alpine-collapse-plus)
+![](https://img.shields.io/npm/dt/alpine-collapse-plus)
+![](https://img.shields.io/github/license/markmead/alpine-collapse-plus)

builds/cdn.js

@@ -1,3 +1,3 @@
-import FILE from '../src/index.js'
+import collapse from '../src/index.js'
 
-document.addEventListener('alpine:init', () => window.Alpine.plugin(FILE))
+document.addEventListener('alpine:init', () => window.Alpine.plugin(collapse))

builds/module.js

@@ -1,3 +1,3 @@
-import FILE from '../src/index.js'
+import collapse from '../src/index.js'
 
-export default FILE
+export default collapse-plus

index.html

@@ -4,17 +4,37 @@
     <meta charset="UTF-8" />
     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Alpine JS Plugin</title>
+    <title>Alpine Collapse Plus Demo</title>
 
     <script src="https://cdn.tailwindcss.com"></script>
 
-    <script defer src="./dist/FILE.min.js"></script>
+    <script defer src="./dist/collapse-plus.min.js"></script>
 
     <script
       defer
       src="https://unpkg.com/[email protected]/dist/cdn.min.js"
     ></script>
+    <style>
+      *, *:before, *:after {
+        box-sizing: border-box;
+      }
+    </style>
   </head>
 
-  <body> </body>
+  <body class="antialiased h-screen">
+    <div x-data="{ isOpen: false }" class="p-6 px-10 bg-blue-200 w-[36rem] absolute top-1/3 left-1/2 -translate-x-1/2">
+      <button class="w-full flex justify-between items-center gap-20" @click="isOpen = !isOpen">
+        <h3 class="text-2xl font-bold">Example Accordion Card</h3>
+        <h3 class="text-2xl font-bold">+</h3>
+      </button>
+      <div x-show="isOpen" x-collapse>
+        <div x-collapse-content class="pt-4">
+          <p>
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum consequat nunc ac enim consectetur, in tempor lorem facilisis. Sed vehicula, ipsum sit amet tincidunt tincidunt, nisi enim varius nisi, id efficitur nulla nulla vel tellus. Donec euismod, nisi vel tincidunt ultricies, nunc dolor ultricies nunc, vitae aliquam nunc nisi vel nunc.
+          Praesent consectetur libero at justo vehicula, non fermentum dolor tincidunt. Suspendisse potenti. Nullam consectetur, nunc vitae aliquam tincidunt, nisi nunc tincidunt nisi, vitae aliquam nunc nisi vel nunc. Donec euismod, nisi vel tincidunt ultricies, nunc dolor ultricies nunc, vitae aliquam nunc nisi vel nunc.
+          </p>
+        </div>
+      </div>
+    </div>
+  </body>
 </html>

package.json

@@ -1,17 +1,20 @@
 {
-  "name": "PLUGIN",
-  "version": "1.0.0",
-  "description": "DESCRIPTION",
+  "name": "alpine-collapse-plus",
+  "version": "0.0.1",
+  "description": "An Alpine JS plugin that replaces the collapse directive. It seperates transform and opacity animations for a more seamless transition.",
   "keywords": [
     "Alpine",
     "Alpine JS",
     "Alpine JS Plugin",
-    "Alpine JS Plugins"
+    "Alpine JS Plugins",
+    "Alpine Collapse",
+    "Alpine Collapse Plus"
   ],
-  "module": "dist/FILE.esm.js",
-  "unpkg": "dist/FILE.min.js",
+  "module": "dist/collapse-plus.esm.js",
+  "unpkg": "dist/collapse-plus.min.js",
   "scripts": {
-    "build": "node scripts/build.js"
+    "build": "node scripts/build.js",
+    "preview": "npx serve"
   },
   "devDependencies": {
     "esbuild": "^0.21.4"