@natachah/vanilla-frontend 0.4.0 → 1.0.0

package/docs/components/popover.md

@@ -0,0 +1,270 @@
+<script setup>
+import ComponentPreview from '../vuejs/ComponentPreview.vue'
+</script>
+
+# Popover
+
+This component make able to crate box on flyout as Tooltip or Dropdown menu.
+
+
+```scss
+@use '@natachah/vanilla-frontend/scss/components/popover';
+```
+
+## Syntax
+
+The popover is using a `<div>` tag with the class `.popover`. Inside of the element you must add a `<button>` and another `<div>` or an `<ul/ol>` tag.
+
+<ComponentPreview height="150px">
+<div class="popover">
+    <button popovertarget="myPopover">⚓︎ Open the popover</button>
+    <div popover id="myPopover">
+        <p>Hello world</p>
+    </div>
+</div>
+</ComponentPreview>
+
+::: code-group
+
+```html
+<div class="popover">
+    <button popovertarget="myPopover">⚓︎ Open the popover</button>
+    <div popover id="myPopover">
+        <p>Hello world</p>
+    </div>
+</div>
+```
+
+```css [css properties]
+--popover-color
+--popover-background
+--popover-border-size
+--popover-border-style
+--popover-border-color
+--popover-border-radius
+--popover-padding-inline
+--popover-padding-block
+--popover-transition
+--popover-decoration
+--popover-area
+--popover-inset
+```
+
+:::
+
+To work properly the `<button>` of the dropdown must have an `popovertarget="IdOfTheContent"` attribute. And the target (=the flyout box) must have `popover` attribute.
+
+## Tooltip
+
+You can create basic tooltip in text, juste make sute to use valid HTML as `<span>`. To position the tooltip, use the CSS custom properties `--popover-area` and `--popover-inset`.
+
+<ComponentPreview height="150px">
+<p>
+    Anchor in a text
+    <span class="popover" style="--popover-area: center right;--popover-inset: auto;">
+        <button popovertarget="myTooltip">⚓︎</button>
+        <span popover id="myTooltip">
+            Hello world
+        </span>
+    </span>
+</p>
+</ComponentPreview>
+
+```html
+<p>
+    Anchor in a text
+    <span class="popover" style="--popover-area: center right;--popover-inset: auto;">
+        <button popovertarget="myTooltip">⚓︎</button>
+        <span popover id="myTooltip" data-placement="left">
+            Hello world
+        </span>
+    </span>
+</p>
+```
+
+## Dropdown menu
+
+The Popover component make it able to create some dropdown menu without Javascript !
+You must add the class `.dropdown`and not `.popover`.
+It use the mixin `as-list` to create a nice menu and add some CSS custom properties.
+
+<ComponentPreview height="200px">
+<div class="dropdown">
+    <button popovertarget="myDropdown">
+        Open my dropdown
+        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z"></path></svg>
+    </button>
+    <ul popover id="myDropdown">
+        <li><a href="#">Subitem</a></li>
+        <li><a href="#">Subitem</a></li>
+        <li><a href="#">Subitem</a></li>
+    </ul>
+</div>
+</ComponentPreview>
+
+::: code-group
+
+```html
+<div class="dropdown">
+    <button popovertarget="myDropdown">
+        Open my dropdown
+        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z"></path></svg>
+    </button>
+    <ul popover id="myDropdown">
+        <li><a href="#">Subitem</a></li>
+        <li><a href="#">Subitem</a></li>
+        <li><a href="#">Subitem</a></li>
+    </ul>
+</div>
+```
+
+```css [css properties]
+--dropdown-color
+--dropdown-background
+--dropdown-border-size
+--dropdown-border-style
+--dropdown-border-color
+--dropdown-border-radius
+--dropdown-padding-inline
+--dropdown-padding-block
+--dropdown-transition
+--dropdown-decoration
+--dropdown-outline-size
+--dropdown-outline-style
+--dropdown-outline-color
+--dropdown-outline-offset
+--dropdown-hover-color
+--dropdown-hover-background
+--dropdown-hover-border-color
+--dropdown-focus-color
+--dropdown-focus-background
+--dropdown-focus-border-color
+--dropdown-active-color
+--dropdown-active-background
+--dropdown-active-border-color
+--dropdown-disabled-opacity
+--dropdown-transition
+--dropdown-svg-transform
+```
+
+:::
+
+## Variants
+
+### Color
+
+You can create some color variation by including the colors classes name into the import and then by adding the class as `.{COLOR}`.
+
+<ComponentPreview height="200px">
+<div class="popover">
+    <button popovertarget="myPopoverPrimary">⚓︎ Open the popover</button>
+    <div popover id="myPopoverPrimary" class="primary">
+        <p>Hello world</p>
+        <p>This is a primary popover !</p>
+    </div>
+</div>
+</ComponentPreview>
+
+::: code-group
+```html
+<div class="popover">
+    <button popovertarget="myPopoverPrimary">⚓︎ Open the popover</button>
+    <div popover id="myPopoverPrimary" class="primary">
+        <p>Hello world</p>
+        <p>This is a primary popover !</p>
+    </div>
+</div>
+```
+
+```scss {2}
+@use "@natachah/vanilla-frontend/scss/components/popover" with (
+    $colors: ('primary')
+);
+```
+:::
+
+#### Group
+
+You can group some dropdowns by putting them in a `<div>` with the class `.group`.
+
+<ComponentPreview height="200px">
+<div class="group">
+    <div class="dropdown">
+        <button popovertarget="dropdownA">
+            Dropdown A
+            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z"></path></svg>
+        </button>
+        <ul popover id="dropdownA">
+            <li><a href="#">Subitem A</a></li>
+            <li><a href="#">Subitem A</a></li>
+            <li><a href="#">Subitem A</a></li>
+        </ul>
+    </div>
+    <div class="dropdown">
+        <button popovertarget="dropdownB">
+            Dropdown B
+            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z"></path></svg>
+        </button>
+        <ul popover id="dropdownB">
+            <li><a href="#">Subitem B</a></li>
+            <li><a href="#">Subitem B</a></li>
+            <li><a href="#">Subitem B</a></li>
+        </ul>
+    </div>
+    <div class="dropdown">
+        <button popovertarget="dropdownC">
+            Dropdown C
+            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z"></path></svg>
+        </button>
+        <ul popover id="dropdownC">
+            <li><a href="#">Subitem C </a></li>
+            <li><a href="#">Subitem C </a></li>
+            <li><a href="#">Subitem C </a></li>
+        </ul>
+    </div>
+</div>
+</ComponentPreview>
+
+::: code-group
+```html
+<div class="group">
+    <div class="dropdown">
+        <button popovertarget="dropdownA">
+            Dropdown A
+            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z"></path></svg>
+        </button>
+        <ul popover id="dropdownA">
+            <li><a href="#">Subitem A</a></li>
+            <li><a href="#">Subitem A</a></li>
+            <li><a href="#">Subitem A</a></li>
+        </ul>
+    </div>
+    <div class="dropdown">
+        <button popovertarget="dropdownB">
+            Dropdown B
+            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z"></path></svg>
+        </button>
+        <ul popover id="dropdownB">
+            <li><a href="#">Subitem B</a></li>
+            <li><a href="#">Subitem B</a></li>
+            <li><a href="#">Subitem B</a></li>
+        </ul>
+    </div>
+    <div class="dropdown">
+        <button popovertarget="dropdownC">
+            Dropdown C
+            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z"></path></svg>
+        </button>
+        <ul popover id="dropdownC">
+            <li><a href="#">Subitem C </a></li>
+            <li><a href="#">Subitem C </a></li>
+            <li><a href="#">Subitem C </a></li>
+        </ul>
+    </div>
+</div>
+```
+
+```scss
+@use '@natachah/vanilla-frontend/scss/components/group';
+```
+:::

package/docs/components/progress.md

@@ -0,0 +1,33 @@
+<script setup>
+import ComponentPreview from '../vuejs/ComponentPreview.vue'
+</script>
+
+# Progress
+
+```scss
+@use '@natachah/vanilla-frontend/scss/components/progress';
+```
+
+## Syntax
+
+The progress is using the native `<progress>` tag.
+
+<ComponentPreview>
+ <label for="download">Download progress:</label>
+<progress id="download" value="50" max="100">50%</progress>
+</ComponentPreview>
+
+::: code-group
+```html
+<label for="download">Download progress:</label>
+<progress id="download" value="50" max="100">50%</progress>
+```
+
+```css [css properties]
+--progress-width
+--progress-height
+--progress-background
+--progress-color
+--progress-border-radius
+```
+:::

package/docs/components/table.md

@@ -0,0 +1,175 @@
+<script setup>
+import ComponentPreview from '../vuejs/ComponentPreview.vue'
+</script>
+
+# Table
+
+```scss
+@use '@natachah/vanilla-frontend/scss/components/table';
+```
+
+## Syntax
+
+The table is using the native `<table>` tag.
+
+<ComponentPreview>
+<table>
+    <caption>Caption of the table</caption>
+    <thead>
+        <tr>
+            <th>Head A</th>
+            <th>Head B</th>
+            <th>Head C</th>
+        </tr>
+    </thead>
+    <tbody>
+        <tr>
+            <td>Cell</td>
+            <td>Cell</td>
+            <td>Cell</td>
+        </tr>
+        <tr>
+            <td>Cell</td>
+            <td>Cell</td>
+            <td>Cell</td>
+        </tr>
+        <tr>
+            <td>Cell</td>
+            <td>Cell</td>
+            <td>Cell</td>
+        </tr>
+    </tbody>
+    <tfoot>
+        <tr>
+            <th>Foot A</th>
+            <th>Foot B</th>
+            <th>Foot C</th>
+        </tr>
+    </tfoot>
+</table>
+</ComponentPreview>
+
+::: code-group
+```html
+<table>
+    <caption>Caption of the table</caption>
+    <thead>
+        <tr>
+            <th>Head A</th>
+            <th>Head B</th>
+            <th>Head C</th>
+        </tr>
+    </thead>
+    <tbody>
+        <tr>
+            <td>Cell</td>
+            <td>Cell</td>
+            <td>Cell</td>
+        </tr>
+        <tr>
+            <td>Cell</td>
+            <td>Cell</td>
+            <td>Cell</td>
+        </tr>
+        <tr>
+            <td>Cell</td>
+            <td>Cell</td>
+            <td>Cell</td>
+        </tr>
+    </tbody>
+    <tfoot>
+        <tr>
+            <th>Foot A</th>
+            <th>Foot B</th>
+            <th>Foot C</th>
+        </tr>
+    </tfoot>
+</table>
+```
+
+```css [css properties]
+--table-padding-inline
+--table-padding-block
+--table-align-inline
+--table-align-block
+--table-border-size
+--table-border-style
+--table-border-color
+--table-divider-size
+--table-divider-style
+--table-divider-color
+```
+:::
+
+## Responsive
+
+To render a table responsive, you can use the SCSS mixin `as-responsive-table()` inside a `@media` or `@container`.
+
+It require the attribute `data-label="Name of the column"` on each `<td>`.
+
+<ComponentPreview>
+<div class="as-container">
+    <table id="responsiveTable">
+        <thead>
+            <tr>
+                <th>Header A</th>
+                <th>Header B</th>
+                <th>Header C</th>
+            </tr>
+        </thead>
+        <tbody>
+            <tr>
+                <td data-label="Header A">Cell</td>
+                <td data-label="Header B">Cell</td>
+                <td data-label="Header C">Cell</td>
+            </tr>
+        </tbody>
+    </table>
+</div>
+</ComponentPreview>
+
+::: code-group
+```html
+<div class="as-container">
+    <table id="responsiveTable">
+        <thead>
+            <tr>
+                <th>Header A</th>
+                <th>Header B</th>
+                <th>Header C</th>
+            </tr>
+        </thead>
+        <tbody>
+            <tr>
+                <td data-label="Header A">Cell</td>
+                <td data-label="Header B">Cell</td>
+                <td data-label="Header C">Cell</td>
+            </tr>
+        </tbody>
+    </table>
+</div>
+```
+
+```scss
+// Import the mixins
+@use '@natachah/vanilla-frontend/scss/abstracts/mixins' as *;
+
+// Create a container
+.as-container {
+    container-type: inline-size;
+    min-height: 300px;
+    overflow: hidden;
+}
+
+// Demo for responsive table
+@container (max-width:500px) {
+    #responsiveTable {
+        @include as-responsive-table()
+    }
+}
+```
+
+```css [css property]
+--table-grid-template
+```
+:::

package/docs/index.md

@@ -0,0 +1,27 @@
+---
+# https://vitepress.dev/reference/default-theme-home-page
+layout: home
+
+hero:
+  name: "Vanilla Frontend"
+  text: "A simple framework"
+  tagline: For wild HTML, CSS and JS purists lover 
+  actions:
+    - theme: brand
+      text: Let's start !
+      link: /start/install
+    - theme: alt
+      text: Upgrade Guide
+      link: /prologue/upgrade
+
+features:
+  - title: Class-light and Semantic
+    details: Thriving on simplicity, directly styles your HTML tags, using fewer .classes as possible. 
+  - title: Accessibility
+    details: Use pur HTML and make your frontend more accessible for everyone.
+  - title: Easy Customization
+    details: Customize the frontend with over CSS custom properties, or dive deeper by using SCSS. 
+  - title: Vanilla JS
+    details: Libraries of tiny  vanilla JS interaction to make your website more interactive.
+---
+

package/docs/javascript/autofill.md

@@ -0,0 +1,155 @@
+<script setup>
+import ComponentPreview from '../vuejs/ComponentPreview.vue'
+</script>
+
+# Autofill <Badge type="warning" text="JS" />
+
+```js
+import Autofill from "@natachah/vanilla-frontend/js/_autofill"
+```
+
+## Syntax
+
+The autofill component make you able to automaticaly fill some `<input>` fields by another.
+
+You can use it with a `<select>` tag with the `aria-controls="IdOfTheOtherField"` attribute.
+
+The other field must have a `data-autofill="NameOfTheValue"` attribute. The value must exist into the `<option>` tags as `data-NameOfTheValue="value"`.
+
+<ComponentPreview>
+<fieldset>
+    <legend>Favorite animal</legend>
+    <div class="group">
+        <select class="autofill-demo" id="autofillSelect" name="select" aria-controls="animalID">
+            <option>--</option>
+            <option data-id="1">Cat</option>
+            <option data-id="2">Dog</option>
+            <option data-id="3">Lizzard</option>
+            <option data-id="4">Bird</option>
+        </select>
+        <input id="animalID" type="text" placeholder="ID of the animal" data-autofill="id" readonly>
+    </div>
+</fieldset>
+</ComponentPreview>
+
+::: code-group
+
+```html
+<fieldset>
+    <legend>Favorite animal</legend>
+    <div class="group">
+        <select id="autofillSelect" name="select" aria-controls="animalID">
+            <option>--</option>
+            <option data-id="1">Cat</option>
+            <option data-id="2">Dog</option>
+            <option data-id="3">Lizzard</option>
+            <option data-id="4">Bird</option>
+        </select>
+        <input id="animalID" type="text" placeholder="ID of the animal" data-autofill="id" readonly>
+    </div>
+</fieldset>
+```
+
+```js
+import Autofill from "@natachah/vanilla-frontend/js/_autofill"
+const autofillSelect = document.getElementById('autofillSelect')
+if(autofillSelect) new Autofill(autofillSelect)
+```
+
+:::
+
+### Datalist / Autocomplete
+
+<ComponentPreview>
+<fieldset>
+    <legend>Favorite ice cream</legend>
+    <div class="group">
+        <input class="autofill-demo" id="autofillList" name="datalist" list="myDatalist" aria-controls="flavourID flavorColor" placeholder="Choose a flavor">
+        <input id="flavourID" type="text" placeholder="ID of the icecream" data-autofill="id" readonly>
+        <input id="flavorColor" type="text" placeholder="Color of the icecream" data-autofill="color" readonly>
+    </div>
+</fieldset>
+<datalist id="myDatalist">
+    <option data-id="1" data-color="Brown" value="Chocolate">
+    </option>
+    <option data-id="2" data-color="White" value="Coconut">
+    </option>
+    <option data-id="3" data-color="Green" value="Mint">
+    </option>
+    <option data-id="4" data-color="Red" value="Strawberry">
+    </option>
+    <option data-id="5" data-color="Yellow" value="Vanilla">
+    </option>
+</datalist>
+</ComponentPreview>
+
+```html
+<fieldset>
+    <legend>Favorite ice cream</legend>
+    <div class="group">
+        <input id="autofillList" name="datalist" list="myDatalist" aria-controls="flavourID flavorColor" placeholder="Choose a flavor">
+        <input id="flavourID" type="text" placeholder="ID of the icecream" data-autofill="id" readonly>
+        <input id="flavorColor" type="text" placeholder="Color of the icecream" data-autofill="color" readonly>
+    </div>
+</fieldset>
+<datalist id="myDatalist">
+    <option data-id="1" data-color="Brown" value="Chocolate">
+    </option>
+    <option data-id="2" data-color="White" value="Coconut">
+    </option>
+    <option data-id="3" data-color="Green" value="Mint">
+    </option>
+    <option data-id="4" data-color="Red" value="Strawberry">
+    </option>
+    <option data-id="5" data-color="Yellow" value="Vanilla">
+    </option>
+</datalist>
+```
+
+### File upload
+
+<ComponentPreview>
+<label for="autofillList">Choose a file</label>
+<input class="autofill-demo" id="autofillFile" type="file" name="file" aria-controls="fileName fileSize fileType fileCleanName fileExtension">
+<fieldset>
+    <legend>File data</legend>
+    <div class="group">
+        <input id="fileName" type="text" placeholder="Name of the file" data-autofill="name" readonly>
+        <input id="fileSize" type="text" placeholder="Size of the file" data-autofill="size" readonly>
+        <input id="fileType" type="text" placeholder="Type of the file" data-autofill="type" readonly>
+        <input id="fileCleanName" type="text" placeholder="Clean name of the file" data-autofill="filename" readonly>
+        <input id="fileExtension" type="text" placeholder="Extension of the file" data-autofill="extension" readonly>
+    </div>
+</fieldset>
+</ComponentPreview>
+
+```html
+<label for="autofillList">Choose a file</label>
+<input  id="autofillFile" type="file" name="file" aria-controls="fileName fileSize fileType fileCleanName fileExtension">
+<fieldset>
+    <legend>File data</legend>
+    <div class="group">
+        <input id="fileName" type="text" placeholder="Name of the file" data-autofill="name" readonly>
+        <input id="fileSize" type="text" placeholder="Size of the file" data-autofill="size" readonly>
+        <input id="fileType" type="text" placeholder="Type of the file" data-autofill="type" readonly>
+        <input id="fileCleanName" type="text" placeholder="Clean name of the file" data-autofill="filename" readonly>
+        <input id="fileExtension" type="text" placeholder="Extension of the file" data-autofill="extension" readonly>
+    </div>
+</fieldset>
+```
+
+## Javascript
+
+### Events
+
+| Event name | Description | Value |
+|---|---|---|
+| autofill:changed | This event is fired when the original element value has changed | `current` as HTMLElement *Could be an `<option>` or a `File` |
+
+```js
+const myAutofill = document.getElementById('myAutofill')
+myAutofill.addEventListener('autofill:changed', (e) => {
+    const theCurrentItem = e.detail.current
+    ...
+})
+```