Merge pull request #28 from Applelo/dev

Version 0.9.0

README.md

@@ -15,9 +15,10 @@ To learn more, check the *[documentation](https://compotes.dev)*.
 
 ## 🍏 Compotes
 
-- 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))
+- Drilldown ([demo](https://compotes.dev/demo/collapse.html))
+- Dropdown ([demo](https://compotes.dev/demo/dropdown.html))
 - Marquee ([demo](https://compotes.dev/demo/marquee.html))
 <!--
 - Tabs
@@ -80,7 +81,7 @@ A lot of components library are already shipped with styles but as a Front End d
 
 There are some good library like [React Aria](https://react-spectrum.adobe.com/react-aria/react-aria-components.html) but it's made to work on one framework and I work on different tech like Wordpress, Symfony or VueJS.
 
-> This library provide only the compotes and it's you to make a tart.
+> This library provides only the compotes and it's you to make a tart.
 
 ## 👨‍💼 License
 

docs/.vitepress/config.mts

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

docs/demo/dropdown.md

@@ -0,0 +1,40 @@
+# Dropdown Demo
+
+<script setup>
+  import './../../packages/core/dist/css/dropdown.css'
+  import { Dropdown } from './../../packages/core'
+  import { onMounted } from 'vue'
+
+  onMounted(() => {
+    const dropdown = new Dropdown('#dropdown', {
+      openOn: 'hover'
+    })
+    const dropdownMenu = new Dropdown('#dropdown-menu')
+  })
+</script>
+<style>
+.c-dropdown.c-dropdown, .c-dropdown.c-dropdown ul {
+  margin: 0;
+  list-style: none;
+  padding: 0;
+  gap: 10px;
+}
+.c-dropdown.c-dropdown li {
+  margin: 0;
+}
+</style>
+<div class="c-dropdown" id="dropdown" style="margin-top: 2rem;">
+  <button class="c-dropdown-trigger" aria-controls="dropdown-container">Basic Dropdown</button>
+  <div class="c-dropdown-container" id="dropdown-container">
+    Hello World
+  </div>
+</div>
+
+<div class="c-dropdown" id="dropdown-menu" style="margin-top: 2rem;">
+  <button class="c-dropdown-trigger" aria-controls="dropdown-menu-container">Item 1 - Dropdown Menu</button>
+  <ul class="c-dropdown-container" id="dropdown-menu-container">
+    <li><a href="#">Item 1</a></li>
+    <li><a href="#">Item 2</a></li>
+    <li><a href="#">Item 3</a></li>
+  </ul>
+</div>

docs/guide/collapse.md

@@ -14,7 +14,7 @@ import { Collapse } from 'compotes'
 const collapse = new Collapse('#my-collapse')
 ```
 
-You need to put an `id` to the element you want to collapse. To all your trigger buttons, add an `aria-controls` attribute refering to the `id` of the collapse.
+It is recommended to put an `id` to the element you want to collapse. To all your trigger buttons, add an `aria-controls` attribute refering to the `id` of the collapse.
 
 ```html
 <button class="c-collapse-trigger" aria-controls="my-collapse">
@@ -51,7 +51,7 @@ To ensure accessibility feature, the component will inject `aria-expanded` to al
 
 ## Options
 
-You can access some data from the component.
+You can change some options from the component.
 
 ```js
 import { Collapse } from 'compotes'

docs/guide/drag.md

@@ -12,7 +12,7 @@ import { Drag } from 'compotes'
 const drag = new Drag('.c-drag')
 ```
 
-You need to have a width and/or height define on the component because it uses `overflow: auto;`.
+You need to have elements overflowing inside the component because it uses the css property `overflow: auto;`.
 
 ```html
 
@@ -23,7 +23,7 @@ You need to have a width and/or height define on the component because it uses `
 
 ## Options
 
-You can access some data from the component.
+You can change some options from the component.
 
 ```js
 import { Drag } from 'compotes'
@@ -39,7 +39,7 @@ const drag = new Drag('.c-drag', {
 
 ## Methods
 
-The drag component provides several methods to init and destroy the components.
+The drag component provides several methods to init and destroy it.
 
 ```js
 import { Drag } from 'compotes'
@@ -75,10 +75,7 @@ console.log(drag.isDraggable)// [!code focus]
 You can listen to emitted events directly on the drag element like this:
 
 ```js
-import { Drag } from 'compotes'
-
-const drag = new Drag('.c-drag')
-drag.addEventListener('c.drag.init', (e) => { // [!code focus:3]
+dragEl.addEventListener('c.drag.init', (e) => { // [!code focus:3]
   console.log(e.detail)// drag object
 })
 ```

docs/guide/drilldown.md

@@ -95,7 +95,7 @@ The drilldown menu comes with keyboard shortcut if your focus is inside the comp
 
 ## Options
 
-You can access some data from the component.
+You can change some options from the component.
 
 ```js
 import { Drilldown } from 'compotes'
@@ -127,6 +127,7 @@ drilldown.reset()// [!code focus]
 - `init()`: Init the component
 - `initAccessibilityAttrs()`: Init accessibility attributes
 - `initEvents()`: Init component events
+- `initAccessibilityEvents()`: Init component accessibility events
 - `update()`: Update drilldown trigger status
 - `reset()`: Reset the drilldown to the root menu
 - `back()`: Back to the previous menu

docs/guide/dropdown.md

@@ -0,0 +1,125 @@
+# Dropdown
+
+The dropdown component allows to create a popup menu with links or whatever you want, open by a button.
+
+```scss
+@import 'compotes/css/dropdown';
+```
+
+```js
+import { Dropdown } from 'compotes'
+
+const dropdown = new Drag('.c-dropdown')
+```
+
+You can use any kind of element to trigger the dropdown, just add the `c-dropdown-trigger` class.
+
+It is recommended to put an `id` to the dropdown container. On your trigger element, add an `aria-controls` attribute refering to the `id` of the dropdown.
+
+```html
+<!-- Default dropdown -->
+<div class="c-dropdown">
+  <button class="c-dropdown-trigger" aria-controls="my-dropdown">Basic Dropdown</button>
+  <div class="c-dropdown-container" id="my-dropdown">
+    Hello World
+  </div>
+</div>
+```
+
+If you are using a `ul` as a dropdown, it will use, by default, the `menu` mode adding accessibility features. You can change this by enforce the type of dropdown you want.
+
+```html
+<!-- Menu dropdown -->
+<div class="c-dropdown">
+  <a class="c-dropdown-trigger" aria-controls="my-dropdown">Item 1 - Dropdown Menu</a>
+  <ul class="c-dropdown-container" id="my-dropdown">
+    <li><a href="#">Item 1</a></li>
+    <li><a href="#">Item 2</a></li>
+    <li><a href="#">Item 3</a></li>
+  </ul>
+</div>
+```
+
+## Accessibility
+
+To ensure accessibility feature, the component will inject `aria-expanded` to the trigger element. 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.
+
+If you are using the `menu` type, it will inject `role` attributes on the `<ul>`, `<li>` and `<a>` elements.
+
+## Options
+
+You can change some options from the component.
+
+```js
+import { Dropdown } from 'compotes'
+
+const drag = new Drag('.c-drag', {
+  init: true, // [!code focus:4]
+  initEvents: true,
+  enforceType: undefined,
+  openOn: 'click',
+})
+```
+
+- `init` (boolean): Init the component on creation
+- `initEvents` (boolean): Init events on the component
+- `enforceType` ('default' or 'menu'): The type of the drilldown
+- `openOn` ('click' or 'hover'): Open the drilldown on click/hover from the trigger element
+
+## Methods
+
+The dropdown component provides several methods to init and destroy the component and also open/toggle/close event.
+
+```js
+import { Dropdown } from 'compotes'
+
+const dropdown = new Drag('.c-dropdown', {
+  init: false
+})
+dropdown.init()// [!code focus]
+```
+
+- `init()`: Init the component
+- `initAccessibilityAttrs()`: Init accessibility attributes
+- `initEvents()`: Init component events
+- `initAccessibilityEvents()`: Init component accessibility events
+- `destroyEvents()`: Destroy the component events
+- `destroy()`: Destroy the component
+- `open()`: Open the drilldown
+- `toggle()`: Toggle the drilldown
+- `close()`: Close the drilldown
+
+## Data
+
+You can access data from the component like this:
+
+```js
+import { Dropdown } from 'compotes'
+
+const dropdown = new Drag('.c-dropdown')
+console.log(dropdown.isOpen)// [!code focus]
+```
+
+- `options` (options object): Get options used to init the component
+- `isOpen` (boolean): Tell if the dropdown is open or not
+- `type` ('default' or 'menu'): Tell the current type of dropdown
+
+## Events
+
+You can listen to emitted events directly on the dropdown element like this:
+
+```js
+import { Dropdown } from 'compotes'
+
+const dropdownEl = document.querySelector('.c-dropdown')
+const dropdown = new Drag(dropdownEl)
+
+dropdownEl.addEventListener('c.dropdown.init', (e) => { // [!code focus:3]
+  console.log(e.detail)// drag object
+})
+```
+
+- `c.dropdown.init`: On component init
+- `c.dropdown.destroy`: On component destroy
+- `c.dropdown.opened`: On dropdown open
+- `c.dropdown.closed`: On dropdown close

docs/guide/index.md

@@ -47,18 +47,14 @@ Array.from(document.getElementsByClassName('c-collapse'))
 ```
 
 ::: info
-The above import will work on modern building tools, like ViteJS and Webpack 5, which support package imports. If not, you can use the direct CSS location :
+The above import will work on modern building tools, like ViteJS and Webpack 5, which support package imports. If not, you can use the direct CSS location:
 
 ```scss
 @import 'compotes/style.css';
 @import 'compotes/css/collapse.css';
 ```
 :::
 
-::: warning
-Only the main css files is compiled and minified. The other parts are not. You need to processed them with your favorite tool.
-:::
-
 4. Use the HTML component markup
 
 ```html

docs/guide/marquee.md

@@ -35,7 +35,7 @@ You are not limited to text. You can also add any kind of valid HTML like image.
 
 ## Options
 
-You can access some data from the component.
+You can change some options from the component.
 
 ```js
 import { Drag } from 'compotes'
@@ -59,7 +59,7 @@ const drag = new Drag('.c-drag', {
 
 ## Methods
 
-The marquee component provides several methods to init and destroy the components.
+The marquee component provides several methods to init and destroy it. You can also control the marquee animation.
 
 ```js
 import { Marquee } from 'compotes'
@@ -83,10 +83,7 @@ marquee.init()// [!code focus]
 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]
+marqueeEl.addEventListener('c.marquee.init', (e) => { // [!code focus:3]
   console.log(e.detail)// marquee object
 })
 ```

package.json

@@ -1,7 +1,7 @@
 {
   "name": "@compotes/root",
   "type": "module",
-  "version": "0.8.1",
+  "version": "0.9.0",
   "private": "true",
   "packageManager": "pnpm@8.15.1",
   "description": "Components library focused on accessibility/customization",
@@ -43,12 +43,12 @@
     "publish": "pnpm run -r publish"
   },
   "devDependencies": {
-    "@antfu/eslint-config": "2.6.3",
+    "@antfu/eslint-config": "2.6.4",
     "eslint": "^8.56.0",
     "playwright": "^1.41.2",
     "typescript": "^5.3.3",
     "vite": "^5.0.12",
-    "vitepress": "1.0.0-rc.41",
+    "vitepress": "1.0.0-rc.42",
     "vitest": "^1.2.2",
     "vue": "^3.4.15",
     "vue-tsc": "^1.8.27"

packages/core/README.md

@@ -15,9 +15,10 @@ To learn more, check the *[documentation](https://compotes.dev)*.
 
 ## 🍏 Compotes
 
-- 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))
+- Drilldown ([demo](https://compotes.dev/demo/collapse.html))
+- Dropdown ([demo](https://compotes.dev/demo/dropdown.html))
 - Marquee ([demo](https://compotes.dev/demo/marquee.html))
 
 And more to come!