@natachah/vanilla-frontend 0.2.7 → 0.2.9

package/.gitlab-ci.yml

@@ -41,8 +41,12 @@ publish-job:
   environment: production
   rules:
     - if: $CI_COMMIT_REF_NAME == "production"
+  id_tokens:
+    NPM_ID_TOKEN:
+      aud: "npm:registry.npmjs.org"
+    SIGSTORE_ID_TOKEN:
+      aud: sigstore
   script:
-    - echo "//registry.npmjs.org/:_authToken=${NPM_AUTH_TOKEN}" > .npmrc
     - echo "Fichiers dans le répertoire public avant publication :"
     - ls -R public
     - npm pack

package/docs/pages/base/media.html

@@ -34,6 +34,7 @@
                 --image-width
                 --image-height
                 --image-fit
+                --image-position
                 --image-ratio
             </doc-code>
         </div>
@@ -106,6 +107,7 @@
                 --video-width
                 --video-height
                 --video-fit
+                --video-position
                 --video-ratio
             </doc-code>
         </div>

package/docs/pages/javascript/toggle.html

@@ -119,7 +119,7 @@
 
         <p>The component also work with <code>&lt;select&gt;</code> and it support the <code>&lt;optgroup&gt;</code>.</p>
         <doc-demo>
-            <select class="demo-toggle" name="select" aria-controls="selectA selectB selectG" aria-expanded="false">
+            <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>
@@ -131,10 +131,11 @@
             <div id="selectA" data-toggle-when="A" hidden>Hello there, I&#39;m A !</div>
             <div id="selectB" data-toggle-when="B" hidden>Hello there, I&#39;m B !</div>
             <div id="selectG" data-toggle-when="group" hidden>Hello there, I&#39;m GROUP for C or D !</div>
+            <div id="selectNot" data-toggle-when-not="A" hidden>Hello there, I&#39;m present if not A !</div>
         </doc-demo>
 
         <doc-code>
-            <select name="select" aria-controls="selectA selectB selectG" aria-expanded="false">
+            <select 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>
@@ -147,6 +148,7 @@
             <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>
         </doc-code>
 
         <h2>Javascript</h2>

package/docs/pages/quick-start/customization.html

@@ -60,6 +60,7 @@
             --outline-style: solid;
             --outline-offset: 0;
             --outline-opacity: 50%;
+            --outline-color: color-mix(in srgb, currentColor, transparent var(--outline-opacity));
 
             // Hover (color-mix)
             --hover-color: black;

package/docs/src/js/doc-layout.js

@@ -18,7 +18,7 @@ class DocLayout extends HTMLElement {
                                 <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-pin-angle" viewBox="0 0 16 16">
                                 <path d="M9.828.722a.5.5 0 0 1 .354.146l4.95 4.95a.5.5 0 0 1 0 .707c-.48.48-1.072.588-1.503.588-.177 0-.335-.018-.46-.039l-3.134 3.134a6 6 0 0 1 .16 1.013c.046.702-.032 1.687-.72 2.375a.5.5 0 0 1-.707 0l-2.829-2.828-3.182 3.182c-.195.195-1.219.902-1.414.707s.512-1.22.707-1.414l3.182-3.182-2.828-2.829a.5.5 0 0 1 0-.707c.688-.688 1.673-.767 2.375-.72a6 6 0 0 1 1.013.16l3.134-3.133a3 3 0 0 1-.04-.461c0-.43.108-1.022.589-1.503a.5.5 0 0 1 .353-.146m.122 2.112v-.002zm0-.002v.002a.5.5 0 0 1-.122.51L6.293 6.878a.5.5 0 0 1-.511.12H5.78l-.014-.004a5 5 0 0 0-.288-.076 5 5 0 0 0-.765-.116c-.422-.028-.836.008-1.175.15l5.51 5.509c.141-.34.177-.753.149-1.175a5 5 0 0 0-.192-1.054l-.004-.013v-.001a.5.5 0 0 1 .12-.512l3.536-3.535a.5.5 0 0 1 .532-.115l.096.022c.087.017.208.034.344.034q.172.002.343-.04L9.927 2.028q-.042.172-.04.343a1.8 1.8 0 0 0 .062.46z"/>
                                 </svg>
-                                0.2.7
+                                0.2.9v
                             </span>
                         </li>
                         <li>

package/js/_drawer.js

@@ -92,6 +92,14 @@ export default class Drawer extends BaseComponent {
         // On click on the backdrop, close the drawer
         if (this._backdrop) this._backdrop.addEventListener('click', () => this.toggle())
 
+        // On esc close
+        this._element.addEventListener('keydown', (e) => {
+            if (e.key === 'Escape') {
+                e.preventDefault()
+                this.toggle(false)
+            }
+        })
+
     }
 
     defineDrawerByBreakpoint() {
@@ -114,8 +122,12 @@ export default class Drawer extends BaseComponent {
             this._element.removeAttribute('role')
             this._element.removeAttribute('aria-modal')
 
+            // Deactivate the trap
+            this._trap.deactivate()
+
             // The drawer should be cookie or open
             drawerStatus = this._cookie ? this._cookie.get('drawer-is-open') : true
+
         }
 
         if (drawerStatus != this._isOpen) this.toggle(drawerStatus)

package/js/_toggle.js

@@ -92,16 +92,25 @@ export default class Toggle extends BaseComponent {
     toggle() {
 
         // Define the group value for <select>
-        const groupValue = this._type === 'select' && this._element.querySelector('option:checked') ? this._element.querySelector('option:checked').parentElement.label ?? null : null
+        const selectedOption = this._element.options?.[this._element.selectedIndex]
+        const groupValue = (this._type === 'select' && selectedOption) ? (selectedOption.parentElement.label ?? null) : null
 
         // Check for each toggables elements
         this._toggables.forEach(toggable => {
 
             // Define if there is a [data-toggle-when] attribute, otherwise check on the true value
-            const toggleValue = toggable.getAttribute('data-toggle-when') ?? 'true'
+            let toggleValue = toggable.getAttribute('data-toggle-when') ?? null
+
+            // Define if there a [data-toggle-when-not] attribute
+            const toggleNotValue = toggable.getAttribute('data-toggle-when-not') ?? null
 
             // Toggle the [hidden] attribute
-            toggable.hidden = this.value !== toggleValue && groupValue !== toggleValue
+            if (this.value !== 'null' && toggleNotValue !== null) {
+                toggable.hidden = toggleNotValue === this.value
+            } else {
+                toggleValue = toggleValue ?? 'true'
+                toggable.hidden = this.value !== toggleValue && groupValue !== toggleValue
+            }
 
             if (!toggable.hidden) {
                 const focus = toggable.getAttribute('tabindex') === '0' ? toggable : toggable.querySelector('[tabindex="0"]') ?? toggable.querySelector('button, a, input')

package/js/tests/toggle.test.js

@@ -38,16 +38,17 @@ beforeAll(() => {
         '<input id="fakeRadioB" type="radio" name="fake-radio" aria-controls="fakeCollapseRadioB" aria-expanded="false">' +
         '<div id="fakeCollapseRadioA" hidden></div>' +
         '<div id="fakeCollapseRadioB" hidden></div>' +
-        '<select id="fakeSelect" aria-controls="fakeCollapseSelectA fakeCollapseSelectB fakeCollapseSelectC" aria-expanded="false">' +
+        '<select id="fakeSelect" aria-controls="fakeCollapseSelectA fakeCollapseSelectB fakeCollapseSelectG fakeCollapseSelectN" aria-expanded="false">' +
         '<option value="null"></option>' +
         '<option value="A"></option>' +
-        '<optgroup label="G">' +
+        '<optgroup label="group">' +
         '<option value="B"></option>' +
         '</optgroup>' +
         '</select>' +
         '<div id="fakeCollapseSelectA" data-toggle-when="A" hidden></div>' +
         '<div id="fakeCollapseSelectB" data-toggle-when="B" hidden></div>' +
-        '<div id="fakeCollapseSelectG" data-toggle-when="G" hidden></div>'
+        '<div id="fakeCollapseSelectG" data-toggle-when="group" hidden></div>' +
+        '<div id="fakeCollapseSelectN" data-toggle-when-not="A" hidden></div>'
 
     fakeToggleButton = new Toggle(document.getElementById('fakeButton'))
     fakeToggleCheckbox = new Toggle(document.getElementById('fakeCheckbox'))
@@ -67,7 +68,7 @@ describe('Structure of the class', () => {
         expect(fakeToggleRadioA._type).toBe('radio')
         expect(fakeToggleSelect._type).toBe('select')
         expect(fakeToggleButton._toggables).toStrictEqual([...document.querySelectorAll('#fakeCollapse')])
-        expect(fakeToggleSelect._toggables).toStrictEqual([...document.querySelectorAll('#fakeCollapseSelectA, #fakeCollapseSelectB, #fakeCollapseSelectC')])
+        expect(fakeToggleSelect._toggables).toStrictEqual([...document.querySelectorAll('#fakeCollapseSelectA, #fakeCollapseSelectB, #fakeCollapseSelectG, #fakeCollapseSelectN')])
     })
 
 })
@@ -160,22 +161,27 @@ describe('#Toggle()', () => {
         test('Toggle the [hidden] attribute on the <div>', () => {
             const divA = document.getElementById('fakeCollapseSelectA')
             const divB = document.getElementById('fakeCollapseSelectB')
-            const divC = document.getElementById('fakeCollapseSelectB')
+            const divG = document.getElementById('fakeCollapseSelectG')
+            const divN = document.getElementById('fakeCollapseSelectN')
             expect(divA.hidden).toBeTruthy()
             expect(divB.hidden).toBeTruthy()
-            expect(divC.hidden).toBeTruthy()
+            expect(divG.hidden).toBeTruthy()
+            expect(divN.hidden).toBeTruthy()
             fireEvent.change(fakeToggleSelect._element, { target: { value: 'A' } })
             expect(divA.hidden).toBeFalsy()
             expect(divB.hidden).toBeTruthy()
-            expect(divC.hidden).toBeTruthy()
+            expect(divG.hidden).toBeTruthy()
+            expect(divN.hidden).toBeTruthy()
             fireEvent.change(fakeToggleSelect._element, { target: { value: 'B' } })
             expect(divA.hidden).toBeTruthy()
             expect(divB.hidden).toBeFalsy()
-            expect(divC.hidden).toBeFalsy()
+            expect(divG.hidden).toBeFalsy()
+            expect(divN.hidden).toBeFalsy()
             fireEvent.change(fakeToggleSelect._element, { target: { value: 'null' } })
             expect(divA.hidden).toBeTruthy()
             expect(divB.hidden).toBeTruthy()
-            expect(divC.hidden).toBeTruthy()
+            expect(divG.hidden).toBeTruthy()
+            expect(divN.hidden).toBeTruthy()
         })
 
     })

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@natachah/vanilla-frontend",
-    "version": "0.2.7",
+    "version": "0.2.9",
     "description": "A vanilla frontend framework",
     "keywords": [
         "html5",

package/scss/abstracts/_mixins.scss

@@ -96,7 +96,7 @@
 
             &:focus,
             &:focus-visible {
-                outline: var(--#{$name}-outline-size, var(--outline-size)) var(--#{$name}-outline-style, var(--outline-style)) var(--#{$name}-outline-color, color-mix(in srgb, var(--#{$name}-border-color, currentcolor), transparent var(--outline-opacity)));
+                outline: var(--#{$name}-outline-size, var(--outline-size)) var(--#{$name}-outline-style, var(--outline-style)) var(--#{$name}-outline-color, var(--outline-color));
                 outline-offset: var(--#{$name}-outline-offset, var(--outline-offset));
             }
 

package/scss/base/_media.scss

@@ -15,6 +15,7 @@ img {
     width: var(--image-width, auto);
     height: var(--image-height, auto);
     object-fit: var(--image-fit, cover);
+    object-position: var(--image-position, center);
     aspect-ratio: var(--image-ratio, auto);
 }
 
@@ -22,6 +23,7 @@ video {
     width: var(--video-width, 100%);
     height: var(--video-height, auto);
     object-fit: var(--video-fit, cover);
+    object-position: var(--video-position, center);
     aspect-ratio: var(--video-ratio, 16/9);
 }
 

package/scss/base/_typography.scss

@@ -33,7 +33,7 @@ button[role=link] {
     &:focus,
     &:focus-visible {
         color: var(--anchor-focus-color, var(--anchor-hover-color, var(--anchor-color, currentColor)));
-        outline: var(--anchor-outline-size, var(--outline-size)) var(--anchor-outline-style, var(--outline-style)) var(--anchor-outline-color, color-mix(in srgb, currentColor, transparent var(--outline-opacity)));
+        outline: var(--anchor-outline-size, var(--outline-size)) var(--anchor-outline-style, var(--outline-style)) var(--anchor-outline-color, var(--outline-color));
         outline-offset: var(--anchor-outline-offset, var(--outline-offset));
     }
 

package/scss/themes/_root.scss

@@ -43,6 +43,7 @@
     --outline-style: solid;
     --outline-offset: 0;
     --outline-opacity: 50%;
+    --outline-color: color-mix(in srgb, currentColor, transparent var(--outline-opacity));
 
     // Hover (color-mix)
     --hover-color: black;