@natachah/vanilla-frontend 0.4.0 → 1.0.0

package/docs/javascript/slider.md

@@ -0,0 +1,130 @@
+<script setup>
+import ComponentPreview from '../vuejs/ComponentPreview.vue'
+</script>
+
+# Slider <Badge type="warning" text="JS" />
+
+```scss
+@use '@natachah/vanilla-frontend/scss/components/slider';
+```
+
+## Syntax
+
+The slider is using the a `<div>` tag with the class `.slider.`
+
+Each slide must be a `<div>` with `role="tabpanel"` and `aria-hidden="true"` attributes.
+
+<ComponentPreview >
+<div id="slider" class="slider">
+    <div id="slide1" role="tabpanel" aria-hidden="false"><img src="https://picsum.photos/id/1/300" alt="Image 1"></div>
+    <div id="slide2" role="tabpanel" aria-hidden="true"><img src="https://picsum.photos/id/2/300" alt="Image 2"></div>
+    <div id="slide3" role="tabpanel" aria-hidden="true"><img src="https://picsum.photos/id/3/300" alt="Image 3"></div>
+</div>
+<button aria-controls="slider" data-slider-prev>previous</button>
+<div aria-controls="slider" role="tablist">
+    <button role="tab" aria-controls="slide1" aria-selected="true">1</button>
+    <button role="tab" aria-controls="slide2" aria-selected="false">2</button>
+    <button role="tab" aria-controls="slide3" aria-selected="false">3</button>
+</div>
+<button aria-controls="slider" data-slider-next>next</button>
+</ComponentPreview>
+
+::: code-group
+
+```html
+<div id="slider" class="slider">
+    <div id="slide1" role="tabpanel" aria-hidden="false"><img src="https://picsum.photos/id/1/300" alt="Image 1"></div>
+    <div id="slide2" role="tabpanel" aria-hidden="true"><img src="https://picsum.photos/id/2/300" alt="Image 2"></div>
+    <div id="slide3" role="tabpanel" aria-hidden="true"><img src="https://picsum.photos/id/3/300" alt="Image 3"></div>
+</div>
+<button aria-controls="slider" data-slider-prev>previous</button>
+<div aria-controls="slider" role="tablist">
+    <button role="tab" aria-controls="slide1" aria-selected="true">1</button>
+    <button role="tab" aria-controls="slide2" aria-selected="false">2</button>
+    <button role="tab" aria-controls="slide3" aria-selected="false">3</button>
+</div>
+<button aria-controls="slider" data-slider-next>next</button>
+```
+
+```css [css properties]
+--slider-columns
+--slider-gap
+```
+
+```js
+import Slider from "@natachah/vanilla-frontend/js/_slider"
+const slider = document.getElementById('slider')
+if (slider) const mySliderObj = new Slider(slider, {loop: true})
+```
+
+:::
+
+### Indicators
+
+You can create some indicators with a `<div>` tag with the `aria-controls="IdOfSlider"` and `role="tablist"` attributes.
+
+Inside you must insert each slides indicators as `<button>` tag with `role="tab"`, `aria-controls="IdOfSlide"` and `aria-selected="false"` attributes.
+
+```html
+<div aria-controls="slider" role="tablist">
+    <button role="tab" aria-controls="slide1" aria-selected="true">1</button>
+    <button role="tab" aria-controls="slide2" aria-selected="false">2</button>
+    <button role="tab" aria-controls="slide3" aria-selected="false">3</button>
+</div>
+```
+
+### Navigation
+
+You can create some prev/next navigation with some `<button>` tag with the `aria-controls="IdOfSlider"` and `data-slider-prev` or `data-slider-next` attributes.
+
+```html
+<button aria-controls="slider" data-slider-prev>previous</button>
+<button aria-controls="slider" data-slider-next>next</button>
+```
+
+You must add the play and pause `<button>` if you use the `autoplay` version of the slider.
+
+```html
+<button aria-controls="slider" data-slider-play>play</button>
+<button aria-controls="slider" data-slider-pause>pause</button>
+```
+
+## Javascript
+
+To work properly the slider required some javascript.
+
+### Options
+
+| Name | Description | Value |
+| --- | --- | --- |
+| behavior | The scroll behavior inside the slider | `smooth` as string can be auto, smooth or instant |
+| loop | If set to `true`, the slider will work as a carousel | `false` as boolean |
+| autoplay | If set to `true`, the slider will automatically cycling | `false` as boolean |
+
+```js {2-4}
+new Slider(mySliderDiv, {
+    behavior: 'smooth',
+    loop: false,
+    autoplay: false
+})
+```
+
+### Methods
+
+| Method | Description |
+| --- | --- |
+| goTo(index)  | Go to a specific slide by index starting by 0 | 
+| next() | Go to the next slide  | 
+| prev() | Go to the previous slide  | 
+
+### Events
+
+| Event name | Description | Value |
+|---|---|---|
+| slider:changed | This event is fired when the slide has been changed | `current` as a index number |
+
+```js
+document.getElementById('mySliderId').addEventListener('slider:changed', (e) => {
+    const theCurrentIndexSlide = e.detail.current
+})
+```

package/docs/javascript/sortable.md

@@ -0,0 +1,127 @@
+<script setup>
+import ComponentPreview from '../vuejs/ComponentPreview.vue'
+</script>
+
+# Sortable <Badge type="warning" text="JS" />
+
+```js
+import Sortable from "@natachah/vanilla-frontend/js/_sortable"
+```
+
+## Syntax
+
+The sortable component make you able to change the order of a list..
+
+The list can be an `<ul>`, `<ol>`, `<div>` or `<tbody>` tag.
+
+Each children must have a `draggable="false"` attribute. The attribute will be changed when drag start.
+
+<ComponentPreview>
+<ul d="mySortableList" class="demo-sortable">
+    <li draggable="false">Lorem, ipsum.</li>
+    <li draggable="false">Impedit, quod!</li>
+    <li draggable="false">Repudiandae, rerum.</li>
+    <li draggable="false">Ab, doloremque!</li>
+    <li draggable="false">Totam, consectetur.</li>
+    <li draggable="false">Laborum, cum!</li>
+</ul>
+</ComponentPreview>
+
+::: code-group
+
+```html
+<ul id="mySortableList" class="demo-sortable">
+    <li draggable="false">Lorem, ipsum.</li>
+    <li draggable="false">Impedit, quod!</li>
+    <li draggable="false">Repudiandae, rerum.</li>
+    <li draggable="false">Ab, doloremque!</li>
+    <li draggable="false">Totam, consectetur.</li>
+    <li draggable="false">Laborum, cum!</li>
+</ul>
+```
+
+```js
+import Sortable from "@natachah/vanilla-frontend/js/_sortable"
+const sortables = document.querySelectorAll('.demo-sortable')
+if (sortables) sortables.forEach(sortable => new Sortable(sortable))
+```
+
+:::
+
+## Options
+
+### Handles
+
+You can decide which part of the item is draggable with the `data-handle="sortable"` attribute.
+
+
+<ComponentPreview>
+<ul id="mySortableListWithHandle" class="demo-sortable">
+    <li draggable="false">
+        <b data-handle="sortable">
+            Handle
+        </b>
+        Lorem, ipsum.
+    </li>
+    <li draggable="false">
+        <b data-handle="sortable">
+            Handle
+        </b>
+        Impedit, quod!
+    </li>
+    <li draggable="false">
+        <b data-handle="sortable">
+            Handle
+        </b>
+        Repudiandae, rerum.
+    </li>
+</ul>
+</ComponentPreview>
+
+```html
+<ul id="mySortableListWithHandle" class="demo-sortable">
+    <li draggable="false">
+        <b data-handle="sortable">
+            Handle
+        </b>
+        Lorem, ipsum.
+    </li>
+    <li draggable="false">
+        <b data-handle="sortable">
+            Handle
+        </b>
+        Impedit, quod!
+    </li>
+    <li draggable="false">
+        <b data-handle="sortable">
+            Handle
+        </b>
+        Repudiandae, rerum.
+    </li>
+</ul>
+```
+
+## Javascript
+
+### Methods
+
+| Method | Description | 
+|---|---|
+| resetEvents() | This method will reset the items and events |
+
+### Events
+
+| Event name | Description | Value |
+|---|---|---|
+| sortable:drag | This event is fired when the you start dragging an item | items as a Collection and current as HTMLElement |
+| sortable:drop | This event is fired when the you drop an item | items as a Collection and current as HTMLElement |
+
+```js
+const mySortable = document.getElementById('mySortableList')
+
+mySortable.addEventListener('sortable:drag', (e) => {
+    const theCollectionOfItems = e.detail.items
+    const thecurrentItem = e.detail.current
+    ...
+})
+```

package/docs/javascript/tabpanel.md

@@ -0,0 +1,72 @@
+<script setup>
+import ComponentPreview from '../vuejs/ComponentPreview.vue'
+</script>
+
+# Tabpanel <Badge type="warning" text="JS" />
+
+```js
+import Tabpanel from "@natachah/vanilla-frontend/js/_tabpanel"
+```
+
+## Syntax
+
+The tabpanel component make you able to make some elements visible by some `<button>`.
+
+The button must have an `aria-controls="IdOfElement"`, an `aria-expanded` and a `aria-pressed` attributes.
+
+<ComponentPreview>
+<div id="myPanel">
+    <div role="tablist" aria-label="My demo tabpanel">
+        <button id="tab-1" role="tab" aria-controls="one">One</button>
+        <button id="tab-2" role="tab" aria-controls="two">Two</button>
+    </div>
+    <div id="one" role="tabpanel" aria-labelledby="tab-1">
+        This is the first panel
+    </div>
+    <div id="two" role="tabpanel" aria-labelledby="tab-2">
+        This is the seconde panel
+    </div>
+</div>
+</ComponentPreview>
+
+::: code-group
+
+```html
+<div id="myPanel">
+    <div role="tablist" aria-label="My demo tabpanel">
+        <button id="tab-1" role="tab" aria-controls="one">One</button>
+        <button id="tab-2" role="tab" aria-controls="two">Two</button>
+    </div>
+    <div id="one" role="tabpanel" aria-labelledby="tab-1">
+        This is the first panel
+    </div>
+    <div id="two" role="tabpanel" aria-labelledby="tab-2">
+        This is the seconde panel
+    </div>
+</div>
+```
+
+```js
+import Tabpanel from '@natachah/vanilla-frontend/js/_tabpanel.js'
+const tabpanel = document.getElementById('myPanel')
+if (tabpanel) new Tabpanel(tabpanel)
+```
+
+:::
+
+## Javascript
+
+### Events
+
+| Event name | Description | Value |
+|---|---|---|
+| tabpanel:changed | This event is fired when the panel as been changed | current as a HTMLElement of the current button |
+
+```js
+const myPanel = document.getElementById('myPanel')
+
+myPanel.addEventListener('tabpanel:changed', (e) => {
+    const thecurrentButton = e.detail.current
+    console.log('It has changed !')
+})
+```

package/docs/javascript/toggle.md

@@ -0,0 +1,182 @@
+<script setup>
+import ComponentPreview from '../vuejs/ComponentPreview.vue'
+</script>
+
+# Toggle <Badge type="warning" text="JS" />
+
+```js
+import Toggle from "@natachah/vanilla-frontend/js/_toggle"
+```
+
+## Syntax
+
+The toggle component make you able to show/hide some elements by a `<button>`.
+
+The button must have an `aria-controls="IdOfElement"`, an `aria-expanded` and a `aria-pressed` attributes.
+
+<ComponentPreview height="200px">
+<button id="toggle"  class="demo-toggle"  aria-controls="collapse" aria-expanded="false" aria-pressed="false">Toggle</button>
+<div id="collapse" tabindex="0" hidden>
+    Hello there !
+</div>
+</ComponentPreview>
+
+::: code-group
+
+```html
+<button id="toggle" class="demo-toggle" aria-controls="collapse" aria-expanded="false" aria-pressed="false">Toggle</button>
+<div id="collapse" tabindex="0" hidden>
+    Hello there !
+</div>
+```
+
+```js
+import Toggle from "@natachah/vanilla-frontend/js/_toggle"
+const toggles = document.querySelectorAll('.demo-toggle')
+if (toggles) toggles.forEach(toggle => new Toggle(toggle))
+```
+
+:::
+
+::: info
+The `aria-controls` can have multiple IDs split by a comma.
+:::
+
+## Options
+
+### By checkbox
+
+The component also work with some form checkbox.
+
+<ComponentPreview height="200px">
+<fieldset>
+    <legend>Toggles</legend>
+    <input class="demo-toggle" id="cA" type="checkbox" aria-controls="checkboxA" aria-expanded="false">
+    <label for="cA">Toggle A</label>
+    <input class="demo-toggle" id="cB" type="checkbox" aria-controls="checkboxB" aria-expanded="false">
+    <label for="cB">Toggle B</label>
+</fieldset>
+
+<div id="checkboxA" hidden>Hello there, I'm A !</div>
+<div id="checkboxB" hidden>Hello there, I'm B !</div>
+</ComponentPreview>
+
+```html
+<fieldset>
+    <legend>Toggles</legend>
+    <input class="demo-toggle" id="cA" type="checkbox" aria-controls="checkboxA" aria-expanded="false">
+    <label for="cA">Toggle A</label>
+    <input class="demo-toggle" id="cB" type="checkbox" aria-controls="checkboxB" aria-expanded="false">
+    <label for="cB">Toggle B</label>
+</fieldset>
+
+<div id="checkboxA" hidden>Hello there, I'm A !</div>
+<div id="checkboxB" hidden>Hello there, I'm B !</div>
+```
+
+### By radio
+
+The component also work with some form radio.
+
+<ComponentPreview height="200px">
+<fieldset>
+    <legend>Toggles</legend>
+    <input id="rA" class="demo-toggle" type="radio" name="radio" aria-controls="radioA" aria-expanded="false" value="a">
+    <label for="rA">Toggle A</label>
+    <input id="rB" class="demo-toggle" type="radio" name="radio" aria-controls="radioB" aria-expanded="false" value="b">
+    <label for="rB">Toggle B</label>
+    <input id="rC" class="demo-toggle" type="radio" name="radio" value="c">
+    <label for="rC">Toggle C</label>
+</fieldset>
+
+<div id="radioA" hidden>Hello there, I'm A !</div>
+<div id="radioB" hidden>Hello there, I'm B !</div>
+</ComponentPreview>
+
+```html
+<fieldset>
+    <legend>Toggles</legend>
+    <input id="rA" class="demo-toggle" type="radio" name="radio" aria-controls="radioA" aria-expanded="false" value="a">
+    <label for="rA">Toggle A</label>
+    <input id="rB" class="demo-toggle" type="radio" name="radio" aria-controls="radioB" aria-expanded="false" value="b">
+    <label for="rB">Toggle B</label>
+    <input id="rC" class="demo-toggle" type="radio" name="radio" value="c">
+    <label for="rC">Toggle C</label>
+</fieldset>
+
+<div id="radioA" hidden>Hello there, I'm A !</div>
+<div id="radioB" hidden>Hello there, I'm B !</div>
+```
+
+### By switch
+
+It also work with the switch fields. You can tell when display the element via the data-toggle-when="value" attribute.
+
+<ComponentPreview>
+<input id="switch" class="demo-toggle" type="checkbox" role="switch" aria-controls="switchA switchB" aria-expanded="true">
+<label for="switch">Switch</label>
+<div id="switchA" data-toggle-when="true" hidden>This is TRUE</div>
+<div id="switchB" data-toggle-when="false">This is FALSE</div>
+</ComponentPreview>
+
+```html
+<input id="switch" class="demo-toggle" type="checkbox" role="switch" aria-controls="switchA switchB" aria-expanded="true">
+<label for="switch">Switch</label>
+<div id="switchA" data-toggle-when="true" hidden>This is TRUE</div>
+<div id="switchB" data-toggle-when="false">This is FALSE</div>
+```
+
+### By select
+
+The component also work with `<select>` and it support the `<optgroup>`.
+
+<ComponentPreview height="200px">
+<select class="demo-toggle" name="select" aria-controls="selectA selectB selectG selectNot" aria-expanded="false">
+    <option value="null">--</option>
+    <option value="A">aaa</option>
+    <option value="B">bbb</option>
+    <optgroup label="mygroup">
+        <option value="C">ccc</option>
+        <option value="D">ddd</option>
+    </optgroup>
+</select>
+
+<div id="selectA" data-toggle-when="A" hidden>Hello there, I'm A !</div>
+<div id="selectB" data-toggle-when="B" hidden>Hello there, I'm B !</div>
+<div id="selectG" data-toggle-when="mygroup" hidden>Hello there, I'm GROUP for C or D !</div>
+<div id="selectNot" data-toggle-when-not="A" hidden>Hello there, I'm present if not A !</div>
+</ComponentPreview>
+
+```html
+<select class="demo-toggle" name="select" aria-controls="selectA selectB selectG selectNot" aria-expanded="false">
+    <option value="null">--</option>
+    <option value="A">aaa</option>
+    <option value="B">bbb</option>
+    <optgroup label="mygroup">
+        <option value="C">ccc</option>
+        <option value="D">ddd</option>
+    </optgroup>
+</select>
+
+<div id="selectA" data-toggle-when="A" hidden>Hello there, I'm A !</div>
+<div id="selectB" data-toggle-when="B" hidden>Hello there, I'm B !</div>
+<div id="selectG" data-toggle-when="mygroup" hidden>Hello there, I'm GROUP for C or D !</div>
+<div id="selectNot" data-toggle-when-not="A" hidden>Hello there, I'm present if not A !</div>
+```
+
+## Javascript
+
+
+### Events
+
+| Event name | Description | Value |
+|---|---|---|
+| toggle:changed | This event is fired when the value as been changed | - |
+
+```js
+const myToggle = document.getElementById('myToggle')
+
+myToggle.addEventListener('toggle:changed', () => {
+    console.log('It has changed !')
+})
+```

package/docs/javascript/trap.md

@@ -0,0 +1,33 @@
+<script setup>
+import ComponentPreview from '../vuejs/ComponentPreview.vue'
+</script>
+
+# Trap <Badge type="warning" text="JS" />
+
+The trap component make you able to create a focus trap on an element.
+
+```js
+import Trap from "@natachah/vanilla-frontend/js/utilities/_trap"
+```
+
+## Javascript
+
+This component is only in javascript, to use it you must import the script file and create a `new Trap` object.
+
+You can pass the element, an array of exclusions (= element that should not be inert) and an array of inclusions (= element that should be included into the trap) when initiate the component.
+
+```js
+import Trap from "@natachah/vanilla-frontend/js/utilities/_trap"
+new Trap(document.getElementById('drawer'), ['#backdrop','#toggleMenu'], ['#toggleMenu'])
+```
+
+### Methods
+
+| Method | Description |
+| --- | --- |
+| focusOnFirst() | This will focus on the first focusable element |
+| activate() | This method will activate the trap, it will also set `inert` and `aria-hidden` attributes on other HTMLElements |
+| desactivate() | This method will desactivate the trap and remove related attributes |
+| handleKeydown(e) | This method will keep the TAB focus inside the element |
+| getFocusableElements() | This method will return an array of focusable items inside the element |
+| getSiblingsOutside() | This method will return an array of HTMLElements outside of the element |