@natachah/vanilla-frontend 1.0.1 → 1.0.2

package/public/assets/javascript_sortable.md.CThHVTgW.lean.js

@@ -1 +0,0 @@
-import{C as h}from"./chunks/ComponentPreview.Cw4G3qNN.js";import{I as k,o as p,c as d,j as i,a,J as t,ai as l,w as n}from"./chunks/framework.26dFs73Q.js";/* empty css                                                                                */const E={id:"sortable",tabindex:"-1"},F=JSON.parse('{"title":"Sortable","description":"","frontmatter":{},"headers":[],"relativePath":"javascript/sortable.md","filePath":"javascript/sortable.md"}'),r={name:"javascript/sortable.md"},u=Object.assign(r,{setup(g){return(o,s)=>{const e=k("Badge");return p(),d("div",null,[i("h1",E,[s[0]||(s[0]=a("Sortable ",-1)),t(e,{type:"warning",text:"JS"}),s[1]||(s[1]=a()),s[2]||(s[2]=i("a",{class:"header-anchor",href:"#sortable","aria-label":"Permalink to “Sortable”"},"​",-1))]),s[5]||(s[5]=l("",5)),t(h,null,{default:n(()=>[...s[3]||(s[3]=[i("ul",{d:"mySortableList",class:"demo-sortable"},[i("li",{draggable:"false"},"Lorem, ipsum."),i("li",{draggable:"false"},"Impedit, quod!"),i("li",{draggable:"false"},"Repudiandae, rerum."),i("li",{draggable:"false"},"Ab, doloremque!"),i("li",{draggable:"false"},"Totam, consectetur."),i("li",{draggable:"false"},"Laborum, cum!")],-1)])]),_:1}),s[6]||(s[6]=l("",4)),t(h,null,{default:n(()=>[...s[4]||(s[4]=[i("ul",{id:"mySortableListWithHandle",class:"demo-sortable"},[i("li",{draggable:"false"},[i("b",{"data-handle":"sortable"}," Handle "),a(" Lorem, ipsum. ")]),i("li",{draggable:"false"},[i("b",{"data-handle":"sortable"}," Handle "),a(" Impedit, quod! ")]),i("li",{draggable:"false"},[i("b",{"data-handle":"sortable"}," Handle "),a(" Repudiandae, rerum. ")])],-1)])]),_:1}),s[7]||(s[7]=l("",7))])}}});export{F as __pageData,u as default};

package/public/assets/javascript_tabpanel.md.CxAFdAGU.lean.js

@@ -1 +0,0 @@
-import{C as h}from"./chunks/ComponentPreview.Cw4G3qNN.js";import{I as e,o as k,c as p,j as i,a,J as t,ai as n,w as E}from"./chunks/framework.26dFs73Q.js";/* empty css                                                                                */const d={id:"tabpanel",tabindex:"-1"},c=JSON.parse('{"title":"Tabpanel","description":"","frontmatter":{},"headers":[],"relativePath":"javascript/tabpanel.md","filePath":"javascript/tabpanel.md"}'),r={name:"javascript/tabpanel.md"},u=Object.assign(r,{setup(g){return(o,s)=>{const l=e("Badge");return k(),p("div",null,[i("h1",d,[s[0]||(s[0]=a("Tabpanel ",-1)),t(l,{type:"warning",text:"JS"}),s[1]||(s[1]=a()),s[2]||(s[2]=i("a",{class:"header-anchor",href:"#tabpanel","aria-label":"Permalink to “Tabpanel”"},"​",-1))]),s[4]||(s[4]=n("",4)),t(h,null,{default:E(()=>[...s[3]||(s[3]=[i("div",{id:"myPanel"},[i("div",{role:"tablist","aria-label":"My demo tabpanel"},[i("button",{id:"tab-1",role:"tab","aria-controls":"one"},"One"),i("button",{id:"tab-2",role:"tab","aria-controls":"two"},"Two")]),i("div",{id:"one",role:"tabpanel","aria-labelledby":"tab-1"}," This is the first panel "),i("div",{id:"two",role:"tabpanel","aria-labelledby":"tab-2"}," This is the seconde panel ")],-1)])]),_:1}),s[5]||(s[5]=n("",5))])}}});export{c as __pageData,u as default};

package/public/assets/javascript_trap.md.Dt2Rt__e.js

@@ -1,2 +0,0 @@
-/* empty css                                                                                */import{I as e,o as n,c as r,j as a,a as i,J as l,ai as h}from"./chunks/framework.26dFs73Q.js";const d={id:"trap",tabindex:"-1"},m=JSON.parse('{"title":"Trap","description":"","frontmatter":{},"headers":[],"relativePath":"javascript/trap.md","filePath":"javascript/trap.md"}'),o={name:"javascript/trap.md"},u=Object.assign(o,{setup(p){return(k,t)=>{const s=e("Badge");return n(),r("div",null,[a("h1",d,[t[0]||(t[0]=i("Trap ",-1)),l(s,{type:"warning",text:"JS"}),t[1]||(t[1]=i()),t[2]||(t[2]=a("a",{class:"header-anchor",href:"#trap","aria-label":"Permalink to “Trap”"},"​",-1))]),t[3]||(t[3]=h(`<p>The trap component make you able to create a focus trap on an element.</p><div class="language-js"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki shiki-themes github-light github-dark" style="--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e;" tabindex="0" dir="ltr"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> Trap </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &quot;@natachah/vanilla-frontend/js/utilities/_trap&quot;</span></span></code></pre></div><h2 id="javascript" tabindex="-1">Javascript <a class="header-anchor" href="#javascript" aria-label="Permalink to “Javascript”">​</a></h2><p>This component is only in javascript, to use it you must import the script file and create a <code>new Trap</code> object.</p><p>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.</p><div class="language-js"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki shiki-themes github-light github-dark" style="--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e;" tabindex="0" dir="ltr"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> Trap </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &quot;@natachah/vanilla-frontend/js/utilities/_trap&quot;</span></span>
-<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">new</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> Trap</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(document.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">getElementById</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;drawer&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">), [</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;#backdrop&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;#toggleMenu&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">], [</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;#toggleMenu&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">])</span></span></code></pre></div><h3 id="methods" tabindex="-1">Methods <a class="header-anchor" href="#methods" aria-label="Permalink to “Methods”">​</a></h3><table tabindex="0"><thead><tr><th>Method</th><th>Description</th></tr></thead><tbody><tr><td>focusOnFirst()</td><td>This will focus on the first focusable element</td></tr><tr><td>activate()</td><td>This method will activate the trap, it will also set <code>inert</code> and <code>aria-hidden</code> attributes on other HTMLElements</td></tr><tr><td>desactivate()</td><td>This method will desactivate the trap and remove related attributes</td></tr><tr><td>handleKeydown(e)</td><td>This method will keep the TAB focus inside the element</td></tr><tr><td>getFocusableElements()</td><td>This method will return an array of focusable items inside the element</td></tr><tr><td>getSiblingsOutside()</td><td>This method will return an array of HTMLElements outside of the element</td></tr></tbody></table>`,8))])}}});export{m as __pageData,u as default};

package/public/assets/javascript_trap.md.Dt2Rt__e.lean.js

@@ -1 +0,0 @@
-/* empty css                                                                                */import{I as e,o as n,c as r,j as a,a as i,J as l,ai as h}from"./chunks/framework.26dFs73Q.js";const d={id:"trap",tabindex:"-1"},m=JSON.parse('{"title":"Trap","description":"","frontmatter":{},"headers":[],"relativePath":"javascript/trap.md","filePath":"javascript/trap.md"}'),o={name:"javascript/trap.md"},u=Object.assign(o,{setup(p){return(k,t)=>{const s=e("Badge");return n(),r("div",null,[a("h1",d,[t[0]||(t[0]=i("Trap ",-1)),l(s,{type:"warning",text:"JS"}),t[1]||(t[1]=i()),t[2]||(t[2]=a("a",{class:"header-anchor",href:"#trap","aria-label":"Permalink to “Trap”"},"​",-1))]),t[3]||(t[3]=h("",8))])}}});export{m as __pageData,u as default};

package/public/assets/prologue_conventions.md.wCplqeKt.lean.js

@@ -1 +0,0 @@
-import{_ as i,o as a,c as n,ai as l}from"./chunks/framework.26dFs73Q.js";const c=JSON.parse('{"title":"Naming conventions","description":"","frontmatter":{},"headers":[],"relativePath":"prologue/conventions.md","filePath":"prologue/conventions.md"}'),e={name:"prologue/conventions.md"};function t(h,s,p,k,r,d){return a(),n("div",null,[...s[0]||(s[0]=[l("",15)])])}const g=i(e,[["render",t]]);export{c as __pageData,g as default};

package/public/assets/prologue_release.md.CBJGKY_Y.js

@@ -1 +0,0 @@
-import{_ as a,o as t,c as r,ai as o}from"./chunks/framework.26dFs73Q.js";const g=JSON.parse('{"title":"Release note","description":"","frontmatter":{},"headers":[],"relativePath":"prologue/release.md","filePath":"prologue/release.md"}'),s={name:"prologue/release.md"};function n(i,e,l,h,c,p){return t(),r("div",null,[...e[0]||(e[0]=[o('<h1 id="release-note" tabindex="-1">Release note <a class="header-anchor" href="#release-note" aria-label="Permalink to “Release note”">​</a></h1><h2 id="versioning-scheme" tabindex="-1">Versioning Scheme <a class="header-anchor" href="#versioning-scheme" aria-label="Permalink to “Versioning Scheme”">​</a></h2><p>The package use a three-part numbering system (e.g., 1.2.3) to track updates. This helps the developers to understand the scope of changes at a glance.</p><h3 id="the-patch-release-0-0-x" tabindex="-1">The &quot;Patch&quot; Release (0.0.X) <a class="header-anchor" href="#the-patch-release-0-0-x" aria-label="Permalink to “The &quot;Patch&quot; Release (0.0.X)”">​</a></h3><p>The third digit is reserved for small fixes.</p><ul><li><strong>Purpose:</strong> Bug fixes, security patches, or minor text corrections.</li><li><strong>Impact:</strong> These updates do not change how the site functions and are safe to deploy immediately.</li><li><strong>Example:</strong> Moving from 1.0.1 to 1.0.2.</li></ul><h3 id="the-minor-release-0-x-0" tabindex="-1">The &quot;Minor&quot; Release (0.X.0) <a class="header-anchor" href="#the-minor-release-0-x-0" aria-label="Permalink to “The &quot;Minor&quot; Release (0.X.0)”">​</a></h3><p>The second digit represents medium-sized updates.</p><ul><li><strong>Purpose:</strong> Adding new features or making significant modifications to existing ones.</li><li><strong>Impact:</strong> These introduce new functionality but remain backward-compatible (they should not &quot;break&quot; the existing setup !).</li><li><strong>Example:</strong> Moving from 1.1.0 to 1.2.0.</li></ul><h3 id="the-major-release-x-0-0" tabindex="-1">The &quot;Major&quot; Release (X.0.0) <a class="header-anchor" href="#the-major-release-x-0-0" aria-label="Permalink to “The &quot;Major&quot; Release (X.0.0)”">​</a></h3><p>The first digit indicates major structural changes.</p><ul><li><strong>Purpose:</strong> Complete redesigns, total code refactoring, or breaking changes that alter how the system works fundamentally.</li><li><strong>Impact:</strong> These are significant milestones and often require thorough testing before deployment.</li><li><strong>Example:</strong> Moving from 1.0.0 to 2.0.0.</li></ul><h2 id="git-branches" tabindex="-1">GIT branches <a class="header-anchor" href="#git-branches" aria-label="Permalink to “GIT branches”">​</a></h2><p>The package supports the current version and one previous version. Here the branches naming convention:</p><ul><li><strong>main:</strong> Is the latest version DEV branch</li><li><strong>production:</strong> Is the latest version PROD branch</li><li><strong>support/vx.x.x :</strong> Is the legacy version PROD branches per MAJOR+MINOR release</li><li><strong>hotfix/vx.x.x :</strong> Is the legacy version DEV branches for PATCH release only</li></ul><h2 id="support-policy" tabindex="-1">Support Policy <a class="header-anchor" href="#support-policy" aria-label="Permalink to “Support Policy”">​</a></h2><p>The current version of the package is construct with SCSS and vanilla JS !</p><p>Make sure you can use some of the new HTML/CSS/JS into the browser !</p>',18)])])}const d=a(s,[["render",n]]);export{g as __pageData,d as default};

package/public/assets/prologue_release.md.CBJGKY_Y.lean.js

@@ -1 +0,0 @@
-import{_ as a,o as t,c as r,ai as o}from"./chunks/framework.26dFs73Q.js";const g=JSON.parse('{"title":"Release note","description":"","frontmatter":{},"headers":[],"relativePath":"prologue/release.md","filePath":"prologue/release.md"}'),s={name:"prologue/release.md"};function n(i,e,l,h,c,p){return t(),r("div",null,[...e[0]||(e[0]=[o("",18)])])}const d=a(s,[["render",n]]);export{g as __pageData,d as default};

package/public/assets/prologue_upgrade.md.E_0GNNE2.js

@@ -1 +0,0 @@
-import{_ as a,o as r,c as o,ai as t}from"./chunks/framework.26dFs73Q.js";const u=JSON.parse('{"title":"Upgrade Guide","description":"","frontmatter":{},"headers":[],"relativePath":"prologue/upgrade.md","filePath":"prologue/upgrade.md"}'),i={name:"prologue/upgrade.md"};function d(l,e,n,p,s,c){return r(),o("div",null,[...e[0]||(e[0]=[t('<h1 id="upgrade-guide" tabindex="-1">Upgrade Guide <a class="header-anchor" href="#upgrade-guide" aria-label="Permalink to “Upgrade Guide”">​</a></h1><h2 id="_0-4-0-to-1-0-0" tabindex="-1">0.4.0 to 1.0.0 <a class="header-anchor" href="#_0-4-0-to-1-0-0" aria-label="Permalink to “0.4.0 to 1.0.0”">​</a></h2><p>These update includes some changes as:</p><ul><li><a href="#doc">Doc</a></li><li><a href="#popover">Popover</a></li><li><a href="#slider">Slider</a></li></ul><h3 id="doc" tabindex="-1">Doc <a class="header-anchor" href="#doc" aria-label="Permalink to “Doc”">​</a></h3><p>The most important change is the Documentation ! Now it is in Vitepress, and you have access to. a Sandbox via <code>npm run sandbox</code> to play with the code and test it.</p><h3 id="popover" tabindex="-1">Popover <a class="header-anchor" href="#popover" aria-label="Permalink to “Popover”">​</a></h3><p>There is the new Popover component, and it will replace the current Dropdown. But be carefull because not all browser support it yet 😃</p><h3 id="slider" tabindex="-1">Slider <a class="header-anchor" href="#slider" aria-label="Permalink to “Slider”">​</a></h3><p>The slider has the ability to have a play and a pause button for more accessibility.</p>',10)])])}const _=a(i,[["render",d]]);export{u as __pageData,_ as default};

package/public/assets/prologue_upgrade.md.E_0GNNE2.lean.js

@@ -1 +0,0 @@
-import{_ as a,o as r,c as o,ai as t}from"./chunks/framework.26dFs73Q.js";const u=JSON.parse('{"title":"Upgrade Guide","description":"","frontmatter":{},"headers":[],"relativePath":"prologue/upgrade.md","filePath":"prologue/upgrade.md"}'),i={name:"prologue/upgrade.md"};function d(l,e,n,p,s,c){return r(),o("div",null,[...e[0]||(e[0]=[t("",10)])])}const _=a(i,[["render",d]]);export{u as __pageData,_ as default};

package/public/assets/start_customization.md.C4fmzVYD.lean.js

@@ -1 +0,0 @@
-import{_ as i,o as a,c as n,ai as h}from"./chunks/framework.26dFs73Q.js";const g=JSON.parse('{"title":"Customization","description":"","frontmatter":{},"headers":[],"relativePath":"start/customization.md","filePath":"start/customization.md"}'),l={name:"start/customization.md"};function t(k,s,p,e,E,r){return a(),n("div",null,[...s[0]||(s[0]=[h("",18)])])}const y=i(l,[["render",t]]);export{g as __pageData,y as default};

package/public/assets/start_install.md.vqLh01mm.lean.js

@@ -1 +0,0 @@
-import{_ as i,o as a,c as n,ai as t}from"./chunks/framework.26dFs73Q.js";const c=JSON.parse('{"title":"Installation","description":"","frontmatter":{},"headers":[],"relativePath":"start/install.md","filePath":"start/install.md"}'),l={name:"start/install.md"};function h(e,s,p,k,r,o){return a(),n("div",null,[...s[0]||(s[0]=[t("",13)])])}const g=i(l,[["render",h]]);export{c as __pageData,g as default};

package/public/assets/start_mixin.md.B5VMlbiN.lean.js

@@ -1 +0,0 @@
-import{_ as i,o as a,c as t,ai as n}from"./chunks/framework.26dFs73Q.js";const g=JSON.parse('{"title":"SCSS Mixins","description":"","frontmatter":{},"headers":[],"relativePath":"start/mixin.md","filePath":"start/mixin.md"}'),l={name:"start/mixin.md"};function h(e,s,k,p,r,d){return a(),t("div",null,[...s[0]||(s[0]=[n("",36)])])}const o=i(l,[["render",h]]);export{g as __pageData,o as default};