@natachah/vanilla-frontend 0.4.0 → 1.0.0

package/docs/classes/dropdown.md

@@ -0,0 +1,180 @@
+<script setup>
+import ComponentPreview from '../vuejs/ComponentPreview.vue'
+</script>
+
+# Dropdown <Badge type="warning" text="JS" />
+
+This is the old version, if modern browser check the [/components/popover](Popover component)
+
+```scss
+@use '@natachah/vanilla-frontend/scss/components/dropdown';
+```
+
+## Syntax
+
+The dropdown is using a `<div>` tag with the class `.dropdown-js`. Inside of the element you must add a `<button>` and another `<div>` or an `<ul/ol>` tag.
+
+<ComponentPreview height="200px">
+<div class="dropdown-js">
+    <button aria-controls="myDropdown" aria-expanded="false" aria-pressed="false">
+        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 id="myDropdown" tabindex="0" hidden>
+        <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-js">
+    <button aria-controls="myDropdown" aria-expanded="false" aria-pressed="false">
+        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 id="myDropdown" tabindex="0" hidden>
+        <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
+--dropdown-index
+--dropdown-offset
+```
+
+```js
+import Dropdown from "@natachah/vanilla-frontend/js/_dropdown"
+const dropdowns = document.querySelectorAll('.dropdown-js')
+if (dropdowns) dropdowns.forEach(dropdown => new Dropdown(dropdown))
+```
+
+:::
+
+To work properly the `<button>` of the dropdown must have an `aria-controls="IdOfTheContent"`, an `aria-expanded` and an `aria-pressed` attributes.
+
+You can also add some `<button>` or `<a role="button">` into the list to make them look as a vertical group.
+
+## Variants
+
+You can group some dropdown by putting them in a `<div>` with the class `.group`.
+
+<ComponentPreview height="200px">
+<div class="group">
+    <div class="dropdown-js">
+        <button aria-controls="myDropdownA" aria-expanded="false" aria-pressed="false">
+            Dropdown A
+        </button>
+        <div id="myDropdownA" tabindex="0" hidden>
+            <p>AAA</p>
+        </div>
+    </div>
+    <div class="dropdown-js">
+        <button aria-controls="myDropdownB" aria-expanded="false" aria-pressed="false">
+            Dropdown B
+        </button>
+        <div id="myDropdownB" tabindex="0" hidden>
+            <p>BBB</p>
+        </div>
+    </div>
+    <div class="dropdown-js">
+        <button aria-controls="myDropdownC" aria-expanded="false" aria-pressed="false">
+            Dropdown C
+        </button>
+        <div id="myDropdownC" tabindex="0" hidden>
+            <p>CCC</p>
+        </div>
+    </div>
+</div>
+</ComponentPreview>
+
+::: code-group
+```html
+<div class="group">
+    <div class="dropdown-js">
+        <button aria-controls="myDropdownA" aria-expanded="false" aria-pressed="false">
+            Dropdown A
+        </button>
+        <div id="myDropdownA" tabindex="0" hidden>
+            <p>AAA</p>
+        </div>
+    </div>
+    <div class="dropdown-js">
+        <button aria-controls="myDropdownB" aria-expanded="false" aria-pressed="false">
+            Dropdown B
+        </button>
+        <div id="myDropdownB" tabindex="0" hidden>
+            <p>BBB</p>
+        </div>
+    </div>
+    <div class="dropdown-js">
+        <button aria-controls="myDropdownC" aria-expanded="false" aria-pressed="false">
+            Dropdown C
+        </button>
+        <div id="myDropdownC" tabindex="0" hidden>
+            <p>CCC</p>
+        </div>
+    </div>
+</div>
+```
+
+```scss
+@use '@natachah/vanilla-frontend/scss/components/group';
+```
+:::
+
+## Javascript
+
+This component require some javascript, to use it you must import the Toggle file and create a `new Toggle` object.
+
+```js
+new Toggle(myDropdown, {
+    closable:false // The ability to close the dropdown when click outside
+})
+```
+
+### Events
+
+| Event name | Description | Value |
+|---|---|---|
+| dropdown:changed | When toggle the `<button>` | `isOpen` as a `boolean` |
+
+
+```js
+const dropdown = document.getElementById('myDropdown')
+dropdown.addEventListener('dropdown:changed', (e) => {
+    const isDropdownOpen = e.detail.isOpen
+})
+```

package/docs/classes/grid.md

@@ -0,0 +1,230 @@
+<script setup>
+import ComponentPreview from '../vuejs/ComponentPreview.vue'
+</script>
+
+# Grid
+
+A simple way to create some grids into your layout.
+
+```scss
+@use '@natachah/vanilla-frontend/scss/components/grid';
+```
+
+There is two types of grid, the basic and the flexible. USe what is best for your design !
+
+## Syntax
+
+### Grid 
+
+You can create a basic grid via the `.grid` class.
+
+<ComponentPreview>
+<div class="grid" style="--grid-columns:8">
+<div>1</div>
+<div>2</div>
+<div>3</div>
+<div>4</div>
+<div>5</div>
+<div>6</div>
+<div>7</div>
+<div>8</div>
+<div>9</div>
+<div>10</div>
+<div>11</div>
+<div>12</div>
+</div>
+</ComponentPreview>
+
+::: code-group
+```html
+<div class="grid" style="--grid-columns:8">
+    <div>Col 1</div>
+    <div>Col 2</div>
+    <div>Col 3</div>
+    <div>...</div>
+</div>
+```
+
+```css [css properties]
+--grid-columns: 12;
+--grid-gap-inline: 1rem;
+--grid-gap-block: 1rem;
+--grid-min-column-size: 0%;
+--grid-min-columns: auto-fit;
+```
+:::
+
+### Flex grid
+
+You can create a flexible grid via the `.flex-grid` class.
+
+<ComponentPreview>
+<div class="flex-grid" style="--grid-columns:8; --grid-grow:0">
+<div>1</div>
+<div>2</div>
+<div>3</div>
+<div>4</div>
+<div>5</div>
+<div>6</div>
+<div>7</div>
+<div>8</div>
+<div>9</div>
+<div>10</div>
+<div>11</div>
+<div>12</div>
+</div>
+</ComponentPreview>
+
+::: code-group
+```html
+<div class="flex-grid" style="--grid-columns:8; --grid-grow:0">
+    <div>1</div>
+    <div>2</div>
+    <div>3</div>
+    <div>...</div>
+</div>
+```
+
+```css [css properties]
+--grid-columns: 12;
+--grid-gap-inline: 1rem;
+--grid-gap-block: 1rem;
+--grid-min-column-size: 0%;
+--grid-min-columns: auto-fit;
+--grid-grow: 1;
+```
+:::
+
+## Responsive
+
+There is multiple way to make them responsive, but a simple one is to change the CSS custom properties as:
+
+```scss
+--grid-columns: 6; // The maximum number of columns
+--grid-min-column-size: 120px; // The minimum width of a column
+```
+
+<ComponentPreview>
+<div class="grid" style="--grid-columns: 6;--grid-min-column-size: 120px;">
+    <div>1</div>
+    <div>2</div>
+    <div>3</div>
+    <div>4</div>
+    <div>5</div>
+    <div>6</div>
+    <div>7</div>
+    <div>8</div>
+</div>
+</ComponentPreview>
+
+Same thing for the Flex grid:
+
+<ComponentPreview>
+<div class="flex-grid" style="--grid-columns: 6;--grid-min-column-size: 120px;">
+    <div>1</div>
+    <div>2</div>
+    <div>3</div>
+    <div>4</div>
+    <div>5</div>
+    <div>6</div>
+    <div>7</div>
+    <div>8</div>
+</div>
+</ComponentPreview>
+
+## Columns
+
+### Offset
+
+To make a column ossfet with `.grid`, change the properties `--grid-min-columns` to a fixed number, and add the properties `grid-column-start` and `grid-column-end` into the column.
+
+<ComponentPreview>
+<div class="grid" style="--grid-min-columns:4">
+    <div>Grid 1</div>
+    <div>Grid 2</div>
+    <div style="grid-column-start: 4;grid-column-end: 5;">Offset</div>
+</div>
+</ComponentPreview>
+
+```html
+<div class="grid" style="--grid-min-columns:4">
+    <div>Grid 1</div>
+    <div>Grid 2</div>
+    <div style="grid-column-start: 4;grid-column-end: 5;">Offset</div>
+</div>
+```
+
+But for `.flex-grid` you must calculate the percentage of the offset and set it as a `margin-left`. Or you can simply use the mixin `flex-grid-offset-column()` and pass as parameter the number of columns you want to offset (by default it's one);
+
+<ComponentPreview>
+<div class="flex-grid" style="--grid-columns:4">
+    <div>Flex 1</div>
+    <div>Flex 2</div>
+    <div id="flexGridDemoOffset">Offset</div>
+</div>
+</ComponentPreview>
+
+::: code-group
+```html
+<div class="flex-grid" style="--grid-columns:4">
+    <div>Flex 1</div>
+    <div>Flex 2</div>
+    <div id="flexGridDemoOffset">Offset</div>
+</div>
+```
+```scss
+@use '@natachah/vanilla-frontend/scss/abstracts/mixins' as *;
+
+#flexGridDemoOffset {
+    @include flex-grid-offset-column()
+}
+
+```
+:::
+
+### Width
+
+To make a column wider with `.grid`, change the properties `grid-column-start` and `grid-column-end` of the column.
+
+<ComponentPreview>
+<div class="grid" style="--grid-columns:4">
+    <div>Grid 1</div>
+    <div>Grid 2</div>
+    <div style="grid-column-start: 3;grid-column-end: 5;">Wider</div>
+</div>
+</ComponentPreview>
+
+```html
+<div class="grid" style="--grid-columns:4">
+    <div>Grid 1</div>
+    <div>Grid 2</div>
+    <div style="grid-column-start: 3;grid-column-end: 5;">Wider</div>
+</div>
+```
+
+But for `.flex-grid` you must calculate the percentage of the width and set it as a `flex-basis`. Or you can simply use the mixin `flex-grid-wider-column()` and pass as parameter the number of columns you want to take *(by default it's two)*.
+
+<ComponentPreview>
+<div class="flex-grid" style="--grid-columns:4">
+    <div>Flex 1</div>
+    <div>Flex 2</div>
+    <div id="flexGridDemoWider">Wider</div>
+</div>
+</ComponentPreview>
+
+::: code-group
+```html
+<div class="flex-grid" style="--grid-columns:4">
+    <div>Flex 1</div>
+    <div>Flex 2</div>
+    <div id="flexGridDemoWider">Wider</div>
+</div>
+```
+```scss
+@use '@natachah/vanilla-frontend/scss/abstracts/mixins' as *;
+
+#flexGridDemoWider {
+    @include flex-grid-wider-column()
+}
+```
+:::

package/docs/classes/list.md

@@ -0,0 +1,90 @@
+<script setup>
+import ComponentPreview from '../vuejs/ComponentPreview.vue'
+</script>
+
+# List
+
+```scss
+@use '@natachah/vanilla-frontend/scss/components/list';
+```
+
+## Syntax
+
+The list is using the native `<ul>`, `<ol>` or `<div>` tag with the class `.list`.
+
+<ComponentPreview>
+<ul class="list">
+    <li>List A</li>
+    <li>List B</li>
+    <li><a href="#">List C</a></li>
+    <li>List D</li>
+    <li><span>List E</span> <button>button</button></li>
+</ul>
+</ComponentPreview>
+
+::: code-group
+```html
+<ul class="list">
+    <li>List A</li>
+    <li>List B</li>
+    <li><a href="#">List C</a></li>
+    <li>List D</li>
+    <li><span>List E</span> <button>button</button></li>
+</ul>
+```
+
+```css [css properties]
+--list-color
+--list-background
+--list-border-size
+--list-border-style
+--list-border-color
+--list-border-radius
+--list-padding-inline
+--list-padding-block
+--list-text-align
+```
+:::
+
+You can use some button components as `<button>` or `<a role="button">` inside a list to make them full width.
+
+<ComponentPreview>
+<ul class="list">
+    <li><button>List A</button></li>
+    <li><button disabled>List B</button></li>
+    <li>List C</li>
+    <li><a role="button" href="#">List D</a></li>
+    <li><a role="button">List E</a></li>
+</ul>
+</ComponentPreview>
+
+::: code-group
+```html
+<ul class="list">
+    <li><button>List A</button></li>
+    <li><button disabled>List B</button></li>
+    <li>List C</li>
+    <li><a role="button" href="#">List D</a></li>
+    <li><a role="button">List E</a></li>
+</ul>
+```
+
+```css [css properties]
+--list-transition
+--list-decoration
+--list-outline-size
+--list-outline-style
+--list-outline-color
+--list-outline-offset
+--list-hover-color
+--list-hover-background
+--list-hover-border-color
+--list-focus-color
+--list-focus-background
+--list-focus-border-color
+--list-active-color
+--list-active-background
+--list-active-border-color
+--list-disabled-opacity
+```
+:::