Version 0.8.0

.github/workflows/ci.yml

@@ -20,10 +20,10 @@ jobs:
         with:
           version: 8
 
-      - name: Use Node.js 18
+      - name: Use Node.js 20
         uses: actions/setup-node@v3
         with:
-          node-version: 18
+          node-version: 20
           cache: pnpm
 
       - name: Install
@@ -84,10 +84,10 @@ jobs:
         with:
           version: 8
 
-      - name: Set node version to 18
+      - name: Set node version to 20
         uses: actions/setup-node@v3
         with:
-          node-version: 18
+          node-version: 20
           cache: pnpm
 
       - name: Install

README.md

@@ -18,9 +18,9 @@ To learn more, check the *[documentation](https://compotes.dev)*.
 - Drilldown ([demo](https://compotes.dev/demo/collapse.html))
 - Collapse/Accordion ([demo](https://compotes.dev/demo/drilldown.html))
 - Drag ([demo](https://compotes.dev/demo/drag.html))
+- Marquee ([demo](https://compotes.dev/demo/marquee.html))
 <!--
 - Tabs
-- Drag
 -->
 
 And more to come!
@@ -74,7 +74,6 @@ pnpm add -D @compotes/nuxt
 
 > Vue 3/Nuxt 3 packages will arrive soon stay tuned!
 
-
 ## 🙋‍♂️ Why ?
 
 A lot of components library are already shipped with styles but as a Front End developer, I always wants to override a lot. Futhermore, there are not always accessible or they are shipped with jQuery.
@@ -85,4 +84,4 @@ There are some good library like [React Aria](https://react-spectrum.adobe.com/r
 
 ## 👨‍💼 License
 
-MIT
+MIT

docs/.vitepress/config.mts

@@ -34,6 +34,10 @@ export default defineConfig({
             text: 'Drilldown',
             link: '/guide/drilldown',
           },
+          {
+            text: 'Marquee',
+            link: '/guide/marquee',
+          },
         ],
       },
       {
@@ -43,6 +47,7 @@ export default defineConfig({
           { text: 'Collapse/Accordion', link: '/demo/collapse' },
           { text: 'Drag', link: '/demo/drag' },
           { text: 'Drilldown', link: '/demo/drilldown' },
+          { text: 'Marquee', link: '/demo/marquee' },
         ],
       },
     ],

docs/demo/drilldown.md

@@ -104,4 +104,4 @@
       Item
     </li>
   </ul>
-</nav>
+</nav>

docs/demo/marquee.md

@@ -0,0 +1,58 @@
+# Marquee Demo
+
+<script setup>
+  import './../../packages/core/dist/css/marquee.css'
+  import { Marquee } from './../../packages/core'
+  import { onMounted } from 'vue'
+
+  onMounted(() => {
+    const marqueeDefault = new Marquee('#marquee-default', {
+      fill: true
+    })
+    const marqueeLeft = new Marquee('#marquee-left', {
+      direction: 'left',
+      fill: true
+    })
+    const marqueeDown = new Marquee('#marquee-down', {
+      direction: 'down',
+      fill: true
+    })
+    const marqueeAlternateEl = document.getElementById('marquee-alternate')
+    const marqueeAlternate = new Marquee(marqueeAlternateEl, {
+      behavior: 'alternate'
+    })
+  })
+</script>
+<style>
+.c-marquee .c-marquee-container {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+.c-marquee li {
+  margin: 0!important;
+  padding: 0 .5rem;
+}
+</style>
+<div id="marquee-default" class="c-marquee" style="margin-top: 2rem;">
+  <ul class="c-marquee-container">
+    <li>This is the default <a href="#">marquee</a></li>
+    <li>Marquee or <a href="#">marquii</a></li>
+  </ul>
+</div>
+<div id="marquee-left" class="c-marquee" style="margin-top: 2rem;">
+  <ul class="c-marquee-container">
+    <li>Marquee Left Direction</li>
+    <li><img width="25" height="25" src="https://vitejs.dev/logo.svg"/></li>
+  </ul>
+</div>
+<div id="marquee-down" class="c-marquee" style="margin-top: 2rem; height: 500px;">
+  <ul class="c-marquee-container">
+    <li>Marquee Bottom Direction</li>
+  </ul>
+</div>
+<div id="marquee-alternate" class="c-marquee" style="margin-top: 2rem; width: 100px;">
+  <ul class="c-marquee-container">
+    <li>Alternate</li>
+  </ul>
+</div>

docs/guide/collapse.md

@@ -43,6 +43,8 @@ To make the collapse open by default, add the `c-collapse--show` class on the co
 </div>
 ```
 
+You can set the CSS transition to the collapse element. The component will show and hide with the duration of your transition automatically.
+
 ## Accessibility
 
 To ensure accessibility feature, the component will inject `aria-expanded` to all trigger elements. This allow the user to know if the collapse is expanded or not. The user also knows what element it refer thanks to the `aria-controls` attribute.
@@ -120,4 +122,4 @@ collapseElement.addEventListener('c.collapse.init', (e) => { // [!code focus:3]
 - `c.collapse.shown`: The collapse element is shown
 - `c.collapse.hide`: Hide animation is launch
 - `c.collapse.hidden`: The collapse element is hidden
-- `c.collapse.destroy`: On component destroy
+- `c.collapse.destroy`: On component destroy

docs/guide/drag.md

@@ -86,4 +86,4 @@ drag.addEventListener('c.drag.init', (e) => { // [!code focus:3]
 - `c.drag.init`: On component init
 - `c.drag.start`: On component drag start
 - `c.drag.end`: On component drag end
-- `c.drag.destroy`: On component destroy
+- `c.drag.destroy`: On component destroy

docs/guide/drilldown.md

@@ -161,4 +161,4 @@ drilldownElement.addEventListener('c.drilldown.init', (e) => {
 - `c.drilldown.next`: On next
 - `c.drilldown.back`: On back
 - `c.drilldown.reset`: On reset
-- `c.drilldown.destroy`: On component destroy
+- `c.drilldown.destroy`: On component destroy

docs/guide/index.md

@@ -73,4 +73,3 @@ Only the main css files is compiled and minified. The other parts are not. You n
 ```
 
 5. That's it! Check each component for details about structure, advice for accessibility, options and more!
-

docs/guide/marquee.md

@@ -0,0 +1,98 @@
+# Marquee
+
+The marquee component allows to create an animated text copying the old [marquee](https://developer.mozilla.org/fr/docs/Web/HTML/Element/marquee) element with modern support.
+
+```scss
+@import 'compotes/css/marquee';
+```
+
+```js
+import { Marquee } from 'compotes'
+
+const marquee = new Drag('.c-marquee')
+```
+
+The structure consists to a list of element. All animation are CSS based.
+
+```html
+
+<div class="c-marquee">
+  <ul class="c-marquee-container">
+    <li>This is the default marquee</li>
+    <li>Marquee or marquii</li>
+  </ul>
+</div>
+```
+
+You are not limited to text. You can also add any kind of valid HTML like image.
+
+## Accessibility
+
+- Make the marquee tabbable and stop it if it is in focus via the keyboard
+- If the user has configure `prefers-reduced-motion` on his browser, the marquee animation will not be played.
+- If you are using the `fill` option, all cloned element will be set to `aria-hidden` to hide the non necessary content to the screen reader and not be tabbable thank to a `tabindex="-1"`.
+- If an element is focus with the keyboard, the marquee animation will be stop.
+
+## Options
+
+You can access some data from the component.
+
+```js
+import { Drag } from 'compotes'
+
+const drag = new Drag('.c-drag', {
+  init: true, // [!code focus:6]
+  initEvents: true,
+  fill: false,
+  direction: 'left',
+  behavior: 'scroll',
+  duration: 1
+})
+```
+
+- `init` (boolean): Init the component on creation
+- `initEvents` (boolean): Init events on the component
+- `fill` (boolean): Fill the marquee to make a loop
+- `direction` ('left' | 'right' | 'up' | 'down'): Direction of marquee animation
+- `behavior` ('scroll' | 'alternate'): The behavior the marquee animation
+- `duration` (number or string): The duration of the marquee animation
+
+## Methods
+
+The marquee component provides several methods to init and destroy the components.
+
+```js
+import { Marquee } from 'compotes'
+
+const marquee = new Marquee('.c-marquee', {
+  init: false
+})
+marquee.init()// [!code focus]
+```
+
+- `init()`: Init the component
+- `initEvents()`: Init component events
+- `destroyEvents()`: Destroy the component events
+- `destroy()`: Destroy the component
+- `update()`: Update the marquee component
+- `play()`: Play the marquee component
+- `pause()`: Pause the marquee component
+
+## Events
+
+You can listen to emitted events directly on the marquee element like this:
+
+```js
+import { Marquee } from 'compotes'
+
+const marquee = new Drag('.c-marquee')
+marquee.addEventListener('c.marquee.init', (e) => { // [!code focus:3]
+  console.log(e.detail)// marquee object
+})
+```
+
+- `c.marquee.init`: On component init
+- `c.marquee.play`: On component drag play
+- `c.marquee.pause`: On component drag pause
+- `c.marquee.loop`: On component marquee loop
+- `c.marquee.destroy`: On component destroy

docs/index.md

@@ -24,4 +24,3 @@ features:
     icon: 📠
     details: Typescript for better world
 ---
-

package.json

@@ -1,9 +1,9 @@
 {
   "name": "@compotes/root",
   "type": "module",
-  "version": "0.7.2",
+  "version": "0.8.0",
   "private": "true",
-  "packageManager": "pnpm@8.6.0",
+  "packageManager": "pnpm@8.14.1",
   "description": "Components library focused on accessibility/customization",
   "author": "Applelo",
   "license": "MIT",
@@ -39,17 +39,18 @@
     "prepublishOnly": "pnpm build",
     "docs": "vitepress dev docs",
     "docs:build": "vitepress build docs",
-    "docs:serve": "vitepress serve docs"
+    "docs:serve": "vitepress serve docs",
+    "publish": "pnpm run -r publish"
   },
   "devDependencies": {
-    "@antfu/eslint-config": "1.0.0-beta.28",
-    "eslint": "^8.52.0",
-    "playwright": "^1.39.0",
-    "typescript": "^5.2.2",
-    "vite": "^4.5.0",
-    "vitepress": "1.0.0-rc.24",
-    "vitest": "^0.34.6",
-    "vue": "^3.3.6",
-    "vue-tsc": "^1.8.20"
+    "@antfu/eslint-config": "2.6.2",
+    "eslint": "^8.56.0",
+    "playwright": "^1.40.1",
+    "typescript": "^5.3.3",
+    "vite": "^5.0.11",
+    "vitepress": "1.0.0-rc.36",
+    "vitest": "^1.1.3",
+    "vue": "^3.4.10",
+    "vue-tsc": "^1.8.27"
   }
 }

packages/core/README.md

@@ -18,6 +18,7 @@ To learn more, check the *[documentation](https://compotes.dev)*.
 - Drilldown ([demo](https://compotes.dev/demo/collapse.html))
 - Collapse/Accordion ([demo](https://compotes.dev/demo/drilldown.html))
 - Drag ([demo](https://compotes.dev/demo/drag.html))
+- Marquee ([demo](https://compotes.dev/demo/marquee.html))
 
 And more to come!
 
@@ -80,4 +81,4 @@ There are some good library like [React Aria](https://react-spectrum.adobe.com/r
 
 ## 👨‍💼 License
 
-MIT
+MIT

packages/core/package.json

@@ -1,8 +1,8 @@
 {
   "name": "compotes",
   "type": "module",
-  "version": "0.7.2",
-  "packageManager": "pnpm@8.9.2",
+  "version": "0.8.0",
+  "packageManager": "pnpm@8.14.1",
   "description": "Components library focused on accessibility/customization",
   "author": "Applelo",
   "license": "MIT",
@@ -29,10 +29,14 @@
     },
     "./css": "./dist/style.css",
     "./css/style.css": "./dist/style.css",
+    "./css/collapse": "./dist/css/collapse.css",
+    "./css/collapse.css": "./dist/css/collapse.css",
+    "./css/drag": "./dist/css/drag.css",
+    "./css/drag.css": "./dist/css/drag.css",
     "./css/drilldown": "./dist/css/drilldown.css",
     "./css/drilldown.css": "./dist/css/drilldown.css",
-    "./css/collapse": "./dist/css/collapse.css",
-    "./css/collapse.css": "./dist/css/collapse.css"
+    "./css/marquee": "./dist/css/marquee.css",
+    "./css/marquee.css": "./dist/css/marquee.css"
   },
   "main": "./dist/compotes.umd.cjs",
   "module": "./dist/compotes.js",
@@ -54,8 +58,9 @@
     "tabbable": "^6.2.0"
   },
   "devDependencies": {
-    "typescript": "^5.2.2",
-    "vite": "^4.5.0",
-    "vite-plugin-dts": "^3.6.1"
+    "@types/node": "^20.11.0",
+    "typescript": "^5.3.3",
+    "vite": "^5.0.11",
+    "vite-plugin-dts": "^3.7.0"
   }
 }

packages/core/src/assets/css/drilldown.css

@@ -20,4 +20,4 @@
   visibility: hidden;
   transition-property: visibility;
   transition-delay: var(--c-drilldown-delay, 0s);
-}
+}