npm - @natachah/vanilla-frontend - Versions diffs - 1.0.0 → 1.0.1 - Mend

@natachah/vanilla-frontend 1.0.0 → 1.0.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (164) hide show

package/public/assets/{javascript_consent.md.Bjv8ZDS6.js → javascript_consent.md.CbDzabMd.js} RENAMED Viewed

@@ -1,4 +1,4 @@
-import{C as k}from"./chunks/ComponentPreview.BW2s4ay5.js";import{I as l,o as e,c as p,j as i,a,J as t,ai as n,w as E}from"./chunks/framework.CaiDwmc7.js";/* empty css                                                                                */const d={id:"consent",tabindex:"-1"},u=JSON.parse('{"title":"Consent","description":"","frontmatter":{},"headers":[],"relativePath":"javascript/consent.md","filePath":"javascript/consent.md"}'),r={name:"javascript/consent.md"},C=Object.assign(r,{setup(g){return(o,s)=>{const h=l("Badge");return e(),p("div",null,[i("h1",d,[s[0]||(s[0]=a("Consent ",-1)),t(h,{type:"warning",text:"JS"}),s[1]||(s[1]=a()),s[2]||(s[2]=i("a",{class:"header-anchor",href:"#consent","aria-label":"Permalink to “Consent”"},"",-1))]),s[4]||(s[4]=n('<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;"> Consent </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &quot;@natachah/vanilla-frontend/js/_consent&quot;</span></span></code></pre></div><h2 id="syntax" tabindex="-1">Syntax <a class="header-anchor" href="#syntax" aria-label="Permalink to “Syntax”"></a></h2><p>The consent component help you to manage the <strong>Cookies</strong> for the <strong>RGPD</strong> law.</p><p>This component required a <code>&lt;dialog&gt;</code>, and the component will open it if the cookies are not already saved.</p>',4)),t(k,{height:"200px"},{default:E(()=>[...s[3]||(s[3]=[i("dialog",{id:"demoCookies","aria-labelledby":"cookiesTitle"},[i("div",null,[i("h1",{id:"cookiesTitle"},"Cookies Consent"),i("p",null,[a("This website use "),i("b",null,"ONLY"),a(" necessary cookies to ensure you get the best experience !")]),i("button",{"data-dialog-close":""},"Ok")])],-1)])]),_:1}),s[5]||(s[5]=n(`<div class="vp-code-group"><div class="tabs"><input type="radio" name="group-15" id="tab-16" checked><label data-title="html" for="tab-16">html</label><input type="radio" name="group-15" id="tab-17"><label data-title="js" for="tab-17">js</label></div><div class="blocks"><div class="language-html active"><button title="Copy Code" class="copy"></button><span class="lang">html</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:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">dialog</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> id</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;demoCookies&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> aria-labelledby</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;cookiesTitle&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+import{C as k}from"./chunks/ComponentPreview.Cw4G3qNN.js";import{I as l,o as e,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:"consent",tabindex:"-1"},u=JSON.parse('{"title":"Consent","description":"","frontmatter":{},"headers":[],"relativePath":"javascript/consent.md","filePath":"javascript/consent.md"}'),r={name:"javascript/consent.md"},C=Object.assign(r,{setup(g){return(o,s)=>{const h=l("Badge");return e(),p("div",null,[i("h1",d,[s[0]||(s[0]=a("Consent ",-1)),t(h,{type:"warning",text:"JS"}),s[1]||(s[1]=a()),s[2]||(s[2]=i("a",{class:"header-anchor",href:"#consent","aria-label":"Permalink to “Consent”"},"",-1))]),s[4]||(s[4]=n('<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;"> Consent </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &quot;@natachah/vanilla-frontend/js/_consent&quot;</span></span></code></pre></div><h2 id="syntax" tabindex="-1">Syntax <a class="header-anchor" href="#syntax" aria-label="Permalink to “Syntax”"></a></h2><p>The consent component help you to manage the <strong>Cookies</strong> for the <strong>RGPD</strong> law.</p><p>This component required a <code>&lt;dialog&gt;</code>, and the component will open it if the cookies are not already saved.</p>',4)),t(k,{height:"200px"},{default:E(()=>[...s[3]||(s[3]=[i("dialog",{id:"demoCookies","aria-labelledby":"cookiesTitle"},[i("div",null,[i("h1",{id:"cookiesTitle"},"Cookies Consent"),i("p",null,[a("This website use "),i("b",null,"ONLY"),a(" necessary cookies to ensure you get the best experience !")]),i("button",{"data-dialog-close":""},"Ok")])],-1)])]),_:1}),s[5]||(s[5]=n(`<div class="vp-code-group"><div class="tabs"><input type="radio" name="group-15" id="tab-16" checked><label data-title="html" for="tab-16">html</label><input type="radio" name="group-15" id="tab-17"><label data-title="js" for="tab-17">js</label></div><div class="blocks"><div class="language-html active"><button title="Copy Code" class="copy"></button><span class="lang">html</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:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">dialog</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> id</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;demoCookies&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> aria-labelledby</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;cookiesTitle&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
 <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
 <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">        &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">h1</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> id</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;cookiesTitle&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;Cookies Consent&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">h1</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
 <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">        &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">p</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;This website use &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">b</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;ONLY&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">b</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt; necessary cookies to ensure you get the best experience !&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">p</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>

package/public/assets/{javascript_consent.md.Bjv8ZDS6.lean.js → javascript_consent.md.CbDzabMd.lean.js} RENAMED Viewed

	@@ -1 +1 @@
1	- import{C as k}from"./chunks/ComponentPreview.~~BW2s4ay5~~.js";import{I as l,o as e,c as p,j as i,a,J as t,ai as n,w as E}from"./chunks/framework.~~CaiDwmc7~~.js";/* empty css */const d={id:"consent",tabindex:"-1"},u=JSON.parse('{"title":"Consent","description":"","frontmatter":{},"headers":[],"relativePath":"javascript/consent.md","filePath":"javascript/consent.md"}'),r={name:"javascript/consent.md"},C=Object.assign(r,{setup(g){return(o,s)=>{const h=l("Badge");return e(),p("div",null,[i("h1",d,[s[0]\|\|(s[0]=a("Consent ",-1)),t(h,{type:"warning",text:"JS"}),s[1]\|\|(s[1]=a()),s[2]\|\|(s[2]=i("a",{class:"header-anchor",href:"#consent","aria-label":"Permalink to “Consent”"},"",-1))]),s[4]\|\|(s[4]=n("",4)),t(k,{height:"200px"},{default:E(()=>[...s[3]\|\|(s[3]=[i("dialog",{id:"demoCookies","aria-labelledby":"cookiesTitle"},[i("div",null,[i("h1",{id:"cookiesTitle"},"Cookies Consent"),i("p",null,[a("This website use "),i("b",null,"ONLY"),a(" necessary cookies to ensure you get the best experience !")]),i("button",{"data-dialog-close":""},"Ok")])],-1)])]),_:1}),s[5]\|\|(s[5]=n("",10))])}}});export{u as __pageData,C as default};
1	+ import{C as k}from"./chunks/ComponentPreview.Cw4G3qNN.js";import{I as l,o as e,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:"consent",tabindex:"-1"},u=JSON.parse('{"title":"Consent","description":"","frontmatter":{},"headers":[],"relativePath":"javascript/consent.md","filePath":"javascript/consent.md"}'),r={name:"javascript/consent.md"},C=Object.assign(r,{setup(g){return(o,s)=>{const h=l("Badge");return e(),p("div",null,[i("h1",d,[s[0]\|\|(s[0]=a("Consent ",-1)),t(h,{type:"warning",text:"JS"}),s[1]\|\|(s[1]=a()),s[2]\|\|(s[2]=i("a",{class:"header-anchor",href:"#consent","aria-label":"Permalink to “Consent”"},"",-1))]),s[4]\|\|(s[4]=n("",4)),t(k,{height:"200px"},{default:E(()=>[...s[3]\|\|(s[3]=[i("dialog",{id:"demoCookies","aria-labelledby":"cookiesTitle"},[i("div",null,[i("h1",{id:"cookiesTitle"},"Cookies Consent"),i("p",null,[a("This website use "),i("b",null,"ONLY"),a(" necessary cookies to ensure you get the best experience !")]),i("button",{"data-dialog-close":""},"Ok")])],-1)])]),_:1}),s[5]\|\|(s[5]=n("",10))])}}});export{u as __pageData,C as default};

package/public/assets/{javascript_cookie.md.Dlhyk4Ha.js → javascript_cookie.md.CFVe2JRe.js} RENAMED Viewed

@@ -1,2 +1,2 @@
-/* empty css                                                                                */import{I as s,o,c as h,j as e,a as i,J as n,ai as l}from"./chunks/framework.CaiDwmc7.js";const d={id:"cookie",tabindex:"-1"},m=JSON.parse('{"title":"Cookie","description":"","frontmatter":{},"headers":[],"relativePath":"javascript/cookie.md","filePath":"javascript/cookie.md"}'),r={name:"javascript/cookie.md"},u=Object.assign(r,{setup(k){return(p,t)=>{const a=s("Badge");return o(),h("div",null,[e("h1",d,[t[0]||(t[0]=i("Cookie ",-1)),n(a,{type:"warning",text:"JS"}),t[1]||(t[1]=i()),t[2]||(t[2]=e("a",{class:"header-anchor",href:"#cookie","aria-label":"Permalink to “Cookie”"},"",-1))]),t[3]||(t[3]=l(`<p>The cookies component make you able to save some data as a cookie.</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;"> Cookie </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &quot;@natachah/vanilla-frontend/js/_cookie&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 javascript file and create a <code>new Cookie</code> object.</p><p>You can customize the name of the cookie 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;"> Cookie </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/_cookie&quot;</span></span>
+/* empty css                                                                                */import{I as s,o,c as h,j as e,a as i,J as n,ai as l}from"./chunks/framework.26dFs73Q.js";const d={id:"cookie",tabindex:"-1"},m=JSON.parse('{"title":"Cookie","description":"","frontmatter":{},"headers":[],"relativePath":"javascript/cookie.md","filePath":"javascript/cookie.md"}'),r={name:"javascript/cookie.md"},u=Object.assign(r,{setup(k){return(p,t)=>{const a=s("Badge");return o(),h("div",null,[e("h1",d,[t[0]||(t[0]=i("Cookie ",-1)),n(a,{type:"warning",text:"JS"}),t[1]||(t[1]=i()),t[2]||(t[2]=e("a",{class:"header-anchor",href:"#cookie","aria-label":"Permalink to “Cookie”"},"",-1))]),t[3]||(t[3]=l(`<p>The cookies component make you able to save some data as a cookie.</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;"> Cookie </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &quot;@natachah/vanilla-frontend/js/_cookie&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 javascript file and create a <code>new Cookie</code> object.</p><p>You can customize the name of the cookie 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;"> Cookie </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/_cookie&quot;</span></span>
 <span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">new</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> Cookie</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;name_of_the_cookie&#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>value</td><td>This GET method will return the full cookie value</td></tr><tr><td>set(value)</td><td>This method will save a value as a cookie, the value must be an Object</td></tr><tr><td>has(key)</td><td>This method will check if the cookie has a certain key</td></tr><tr><td>get(key)</td><td>This method will get a key/value saved inside the cookie</td></tr><tr><td>delete()</td><td>This method will delete the cookie</td></tr></tbody></table>`,8))])}}});export{m as __pageData,u as default};

package/public/assets/{javascript_cookie.md.Dlhyk4Ha.lean.js → javascript_cookie.md.CFVe2JRe.lean.js} RENAMED Viewed

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

package/public/assets/{javascript_drawer.md.BCJX3fL-.js → javascript_drawer.md.D_pT0mrZ.js} RENAMED Viewed

@@ -1,4 +1,4 @@
-import{C as l}from"./chunks/ComponentPreview.BW2s4ay5.js";import{I as h,o as p,c as k,j as i,a,J as t,ai as n,w as r}from"./chunks/framework.CaiDwmc7.js";/* empty css                                                                                */const d={id:"drawer",tabindex:"-1"},b=JSON.parse('{"title":"Drawer","description":"","frontmatter":{},"headers":[],"relativePath":"javascript/drawer.md","filePath":"javascript/drawer.md"}'),o={name:"javascript/drawer.md"},F=Object.assign(o,{setup(E){return(g,s)=>{const e=h("Badge");return p(),k("div",null,[i("h1",d,[s[0]||(s[0]=a("Drawer ",-1)),t(e,{type:"warning",text:"JS"}),s[1]||(s[1]=a()),s[2]||(s[2]=i("a",{class:"header-anchor",href:"#drawer","aria-label":"Permalink to “Drawer”"},"",-1))]),s[4]||(s[4]=n('<p>The drawer component make you able to toggle a drawer with a button and resize window.</p><div class="language-scss"><button title="Copy Code" class="copy"></button><span class="lang">scss</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;">@use</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;@natachah/vanilla-frontend/scss/components/drawer&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span></code></pre></div><h2 id="syntax" tabindex="-1">Syntax <a class="header-anchor" href="#syntax" aria-label="Permalink to “Syntax”"></a></h2><p>You can use the classes <code>.drawer</code>, <code>.drawer-button</code> and the id <code>#backdrop</code> to quickly design the drawer with some nice animations.</p>',4)),t(l,{height:"200px"},{default:r(()=>[...s[3]||(s[3]=[i("div",{id:"backdrop"},null,-1),i("button",{class:"drawer-button","aria-expanded":"false","aria-pressed":"false","aria-controls":"drawer","aria-label":"Toggle the drawer"}," Menu ",-1),i("div",{id:"drawer",class:"drawer",hidden:""}," My awsome drawer ! ",-1)])]),_:1}),s[5]||(s[5]=n(`<div class="vp-code-group"><div class="tabs"><input type="radio" name="group-15" id="tab-16" checked><label data-title="html" for="tab-16">html</label><input type="radio" name="group-15" id="tab-17"><label data-title="css properties" for="tab-17">css properties</label><input type="radio" name="group-15" id="tab-18"><label data-title="js" for="tab-18">js</label></div><div class="blocks"><div class="language-html active"><button title="Copy Code" class="copy"></button><span class="lang">html</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:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> id</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;backdrop&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+import{C as l}from"./chunks/ComponentPreview.Cw4G3qNN.js";import{I as h,o as p,c as k,j as i,a,J as t,ai as n,w as r}from"./chunks/framework.26dFs73Q.js";/* empty css                                                                                */const d={id:"drawer",tabindex:"-1"},b=JSON.parse('{"title":"Drawer","description":"","frontmatter":{},"headers":[],"relativePath":"javascript/drawer.md","filePath":"javascript/drawer.md"}'),o={name:"javascript/drawer.md"},F=Object.assign(o,{setup(E){return(g,s)=>{const e=h("Badge");return p(),k("div",null,[i("h1",d,[s[0]||(s[0]=a("Drawer ",-1)),t(e,{type:"warning",text:"JS"}),s[1]||(s[1]=a()),s[2]||(s[2]=i("a",{class:"header-anchor",href:"#drawer","aria-label":"Permalink to “Drawer”"},"",-1))]),s[4]||(s[4]=n('<p>The drawer component make you able to toggle a drawer with a button and resize window.</p><div class="language-scss"><button title="Copy Code" class="copy"></button><span class="lang">scss</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;">@use</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;@natachah/vanilla-frontend/scss/components/drawer&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span></code></pre></div><h2 id="syntax" tabindex="-1">Syntax <a class="header-anchor" href="#syntax" aria-label="Permalink to “Syntax”"></a></h2><p>You can use the classes <code>.drawer</code>, <code>.drawer-button</code> and the id <code>#backdrop</code> to quickly design the drawer with some nice animations.</p>',4)),t(l,{height:"200px"},{default:r(()=>[...s[3]||(s[3]=[i("div",{id:"backdrop"},null,-1),i("button",{class:"drawer-button","aria-expanded":"false","aria-pressed":"false","aria-controls":"drawer","aria-label":"Toggle the drawer"}," Menu ",-1),i("div",{id:"drawer",class:"drawer",hidden:""}," My awsome drawer ! ",-1)])]),_:1}),s[5]||(s[5]=n(`<div class="vp-code-group"><div class="tabs"><input type="radio" name="group-15" id="tab-16" checked><label data-title="html" for="tab-16">html</label><input type="radio" name="group-15" id="tab-17"><label data-title="css properties" for="tab-17">css properties</label><input type="radio" name="group-15" id="tab-18"><label data-title="js" for="tab-18">js</label></div><div class="blocks"><div class="language-html active"><button title="Copy Code" class="copy"></button><span class="lang">html</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:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> id</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;backdrop&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
 <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">button</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> class</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;drawer-button&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> aria-expanded</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;false&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> aria-pressed</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;false&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> aria-controls</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;drawer&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> aria-label</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;Toggle the drawer&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
 <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    Menu</span></span>
 <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">button</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>

package/public/assets/{javascript_drawer.md.BCJX3fL-.lean.js → javascript_drawer.md.D_pT0mrZ.lean.js} RENAMED Viewed

	@@ -1 +1 @@
1	- import{C as l}from"./chunks/ComponentPreview.~~BW2s4ay5~~.js";import{I as h,o as p,c as k,j as i,a,J as t,ai as n,w as r}from"./chunks/framework.~~CaiDwmc7~~.js";/* empty css */const d={id:"drawer",tabindex:"-1"},b=JSON.parse('{"title":"Drawer","description":"","frontmatter":{},"headers":[],"relativePath":"javascript/drawer.md","filePath":"javascript/drawer.md"}'),o={name:"javascript/drawer.md"},F=Object.assign(o,{setup(E){return(g,s)=>{const e=h("Badge");return p(),k("div",null,[i("h1",d,[s[0]\|\|(s[0]=a("Drawer ",-1)),t(e,{type:"warning",text:"JS"}),s[1]\|\|(s[1]=a()),s[2]\|\|(s[2]=i("a",{class:"header-anchor",href:"#drawer","aria-label":"Permalink to “Drawer”"},"",-1))]),s[4]\|\|(s[4]=n("",4)),t(l,{height:"200px"},{default:r(()=>[...s[3]\|\|(s[3]=[i("div",{id:"backdrop"},null,-1),i("button",{class:"drawer-button","aria-expanded":"false","aria-pressed":"false","aria-controls":"drawer","aria-label":"Toggle the drawer"}," Menu ",-1),i("div",{id:"drawer",class:"drawer",hidden:""}," My awsome drawer ! ",-1)])]),_:1}),s[5]\|\|(s[5]=n("",10))])}}});export{b as __pageData,F as default};
1	+ import{C as l}from"./chunks/ComponentPreview.Cw4G3qNN.js";import{I as h,o as p,c as k,j as i,a,J as t,ai as n,w as r}from"./chunks/framework.26dFs73Q.js";/* empty css */const d={id:"drawer",tabindex:"-1"},b=JSON.parse('{"title":"Drawer","description":"","frontmatter":{},"headers":[],"relativePath":"javascript/drawer.md","filePath":"javascript/drawer.md"}'),o={name:"javascript/drawer.md"},F=Object.assign(o,{setup(E){return(g,s)=>{const e=h("Badge");return p(),k("div",null,[i("h1",d,[s[0]\|\|(s[0]=a("Drawer ",-1)),t(e,{type:"warning",text:"JS"}),s[1]\|\|(s[1]=a()),s[2]\|\|(s[2]=i("a",{class:"header-anchor",href:"#drawer","aria-label":"Permalink to “Drawer”"},"",-1))]),s[4]\|\|(s[4]=n("",4)),t(l,{height:"200px"},{default:r(()=>[...s[3]\|\|(s[3]=[i("div",{id:"backdrop"},null,-1),i("button",{class:"drawer-button","aria-expanded":"false","aria-pressed":"false","aria-controls":"drawer","aria-label":"Toggle the drawer"}," Menu ",-1),i("div",{id:"drawer",class:"drawer",hidden:""}," My awsome drawer ! ",-1)])]),_:1}),s[5]\|\|(s[5]=n("",10))])}}});export{b as __pageData,F as default};

package/public/assets/{javascript_form.md.Cwf_gxLI.js → javascript_form.md.sGYh1L4I.js} RENAMED Viewed

@@ -1,4 +1,4 @@
-import{C as l}from"./chunks/ComponentPreview.BW2s4ay5.js";import{I as k,o as p,c as d,j as s,a as n,J as a,ai as t,w as h}from"./chunks/framework.CaiDwmc7.js";/* empty css                                                                                */const E={id:"form",tabindex:"-1"},c=JSON.parse('{"title":"Form","description":"","frontmatter":{},"headers":[],"relativePath":"javascript/form.md","filePath":"javascript/form.md"}'),r={name:"javascript/form.md"},m=Object.assign(r,{setup(o){return(g,i)=>{const e=k("Badge");return p(),d("div",null,[s("h1",E,[i[0]||(i[0]=n("Form ",-1)),a(e,{type:"warning",text:"JS"}),i[1]||(i[1]=n()),i[2]||(i[2]=s("a",{class:"header-anchor",href:"#form","aria-label":"Permalink to “Form”"},"",-1))]),i[5]||(i[5]=t('<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;"> FormHelper </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/_form-helper&quot;</span></span></code></pre></div><h2 id="password-visibility" tabindex="-1">Password visibility <a class="header-anchor" href="#password-visibility" aria-label="Permalink to “Password visibility”"></a></h2><p>You can toggle the visibility of a password field.</p><p>The <code>&lt;button&gt;</code> must have an <code>aria-controls=&quot;IdOfTheInput&quot;</code> and an <code>aria-pressed</code> attributes.</p><p>This helper gonna change the type of the input, and it will toggle the <code>aria-pressed</code> attribute of the <code>&lt;button&gt;</code>.</p>',5)),a(l,null,{default:h(()=>[...i[3]||(i[3]=[s("fieldset",null,[s("legend",null,"Password"),s("div",{class:"group"},[s("input",{id:"myPassword",type:"password",name:"password",value:"123456"}),s("button",{id:"demoPassword","aria-controls":"myPassword","aria-pressed":"false","aria-label":"Expandable the visibility of the password"}," Show ")])],-1)])]),_:1}),i[6]||(i[6]=t(`<div class="vp-code-group"><div class="tabs"><input type="radio" name="group-18" id="tab-19" checked><label data-title="html" for="tab-19">html</label><input type="radio" name="group-18" id="tab-20"><label data-title="js" for="tab-20">js</label></div><div class="blocks"><div class="language-html active"><button title="Copy Code" class="copy"></button><span class="lang">html</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:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fieldset</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+import{C as l}from"./chunks/ComponentPreview.Cw4G3qNN.js";import{I as k,o as p,c as d,j as s,a as n,J as a,ai as t,w as h}from"./chunks/framework.26dFs73Q.js";/* empty css                                                                                */const E={id:"form",tabindex:"-1"},c=JSON.parse('{"title":"Form","description":"","frontmatter":{},"headers":[],"relativePath":"javascript/form.md","filePath":"javascript/form.md"}'),r={name:"javascript/form.md"},m=Object.assign(r,{setup(o){return(g,i)=>{const e=k("Badge");return p(),d("div",null,[s("h1",E,[i[0]||(i[0]=n("Form ",-1)),a(e,{type:"warning",text:"JS"}),i[1]||(i[1]=n()),i[2]||(i[2]=s("a",{class:"header-anchor",href:"#form","aria-label":"Permalink to “Form”"},"",-1))]),i[5]||(i[5]=t('<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;"> FormHelper </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/_form-helper&quot;</span></span></code></pre></div><h2 id="password-visibility" tabindex="-1">Password visibility <a class="header-anchor" href="#password-visibility" aria-label="Permalink to “Password visibility”"></a></h2><p>You can toggle the visibility of a password field.</p><p>The <code>&lt;button&gt;</code> must have an <code>aria-controls=&quot;IdOfTheInput&quot;</code> and an <code>aria-pressed</code> attributes.</p><p>This helper gonna change the type of the input, and it will toggle the <code>aria-pressed</code> attribute of the <code>&lt;button&gt;</code>.</p>',5)),a(l,null,{default:h(()=>[...i[3]||(i[3]=[s("fieldset",null,[s("legend",null,"Password"),s("div",{class:"group"},[s("input",{id:"myPassword",type:"password",name:"password",value:"123456"}),s("button",{id:"demoPassword","aria-controls":"myPassword","aria-pressed":"false","aria-label":"Expandable the visibility of the password"}," Show ")])],-1)])]),_:1}),i[6]||(i[6]=t(`<div class="vp-code-group"><div class="tabs"><input type="radio" name="group-18" id="tab-19" checked><label data-title="html" for="tab-19">html</label><input type="radio" name="group-18" id="tab-20"><label data-title="js" for="tab-20">js</label></div><div class="blocks"><div class="language-html active"><button title="Copy Code" class="copy"></button><span class="lang">html</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:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fieldset</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
 <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">legend</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;Password&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">legend</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
 <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> class</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;group&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
 <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">        &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">input</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> id</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;myPassword&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> type</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;password&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> name</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;password&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> value</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;123456&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>

package/public/assets/{javascript_form.md.Cwf_gxLI.lean.js → javascript_form.md.sGYh1L4I.lean.js} RENAMED Viewed

@@ -1,2 +1,2 @@
-import{C as l}from"./chunks/ComponentPreview.BW2s4ay5.js";import{I as k,o as p,c as d,j as s,a as n,J as a,ai as t,w as h}from"./chunks/framework.CaiDwmc7.js";/* empty css                                                                                */const E={id:"form",tabindex:"-1"},c=JSON.parse('{"title":"Form","description":"","frontmatter":{},"headers":[],"relativePath":"javascript/form.md","filePath":"javascript/form.md"}'),r={name:"javascript/form.md"},m=Object.assign(r,{setup(o){return(g,i)=>{const e=k("Badge");return p(),d("div",null,[s("h1",E,[i[0]||(i[0]=n("Form ",-1)),a(e,{type:"warning",text:"JS"}),i[1]||(i[1]=n()),i[2]||(i[2]=s("a",{class:"header-anchor",href:"#form","aria-label":"Permalink to “Form”"},"",-1))]),i[5]||(i[5]=t("",5)),a(l,null,{default:h(()=>[...i[3]||(i[3]=[s("fieldset",null,[s("legend",null,"Password"),s("div",{class:"group"},[s("input",{id:"myPassword",type:"password",name:"password",value:"123456"}),s("button",{id:"demoPassword","aria-controls":"myPassword","aria-pressed":"false","aria-label":"Expandable the visibility of the password"}," Show ")])],-1)])]),_:1}),i[6]||(i[6]=t("",4)),a(l,null,{default:h(()=>[...i[4]||(i[4]=[s("button",{id:"toggleFormButton","aria-controls":"toggleFormContent","aria-expanded":"true","aria-pressed":"true"},"Toggle",-1),s("div",{id:"toggleFormContent"},[s("input",{name:"test",type:"text",value:"Some input",required:""}),s("textarea",null,`                            Some textarea
+import{C as l}from"./chunks/ComponentPreview.Cw4G3qNN.js";import{I as k,o as p,c as d,j as s,a as n,J as a,ai as t,w as h}from"./chunks/framework.26dFs73Q.js";/* empty css                                                                                */const E={id:"form",tabindex:"-1"},c=JSON.parse('{"title":"Form","description":"","frontmatter":{},"headers":[],"relativePath":"javascript/form.md","filePath":"javascript/form.md"}'),r={name:"javascript/form.md"},m=Object.assign(r,{setup(o){return(g,i)=>{const e=k("Badge");return p(),d("div",null,[s("h1",E,[i[0]||(i[0]=n("Form ",-1)),a(e,{type:"warning",text:"JS"}),i[1]||(i[1]=n()),i[2]||(i[2]=s("a",{class:"header-anchor",href:"#form","aria-label":"Permalink to “Form”"},"",-1))]),i[5]||(i[5]=t("",5)),a(l,null,{default:h(()=>[...i[3]||(i[3]=[s("fieldset",null,[s("legend",null,"Password"),s("div",{class:"group"},[s("input",{id:"myPassword",type:"password",name:"password",value:"123456"}),s("button",{id:"demoPassword","aria-controls":"myPassword","aria-pressed":"false","aria-label":"Expandable the visibility of the password"}," Show ")])],-1)])]),_:1}),i[6]||(i[6]=t("",4)),a(l,null,{default:h(()=>[...i[4]||(i[4]=[s("button",{id:"toggleFormButton","aria-controls":"toggleFormContent","aria-expanded":"true","aria-pressed":"true"},"Toggle",-1),s("div",{id:"toggleFormContent"},[s("input",{name:"test",type:"text",value:"Some input",required:""}),s("textarea",null,`                            Some textarea
     `),s("select",null,[s("option",{value:"null"},"--"),s("option",{value:"1",selected:""},"Lorem"),s("option",{value:"2"},"Perferendis"),s("option",{value:"3"},"Officiis")]),s("input",{type:"checkbox",checked:""})],-1)])]),_:1}),i[7]||(i[7]=t("",5))])}}});export{c as __pageData,m as default};

package/public/assets/{javascript_scroll.md.BrJijWbF.js → javascript_scroll.md.DeOZ4grw.js} RENAMED Viewed

@@ -1,4 +1,4 @@
-import{C as n}from"./chunks/ComponentPreview.BW2s4ay5.js";import{I as h,o as p,c as r,j as i,a as t,J as a,ai as e,w as o}from"./chunks/framework.CaiDwmc7.js";/* empty css                                                                                */const k={id:"scroll",tabindex:"-1"},y=JSON.parse('{"title":"Scroll","description":"","frontmatter":{},"headers":[],"relativePath":"javascript/scroll.md","filePath":"javascript/scroll.md"}'),d={name:"javascript/scroll.md"},b=Object.assign(d,{setup(E){return(g,s)=>{const l=h("Badge");return p(),r("div",null,[i("h1",k,[s[0]||(s[0]=t("Scroll ",-1)),a(l,{type:"warning",text:"JS"}),s[1]||(s[1]=t()),s[2]||(s[2]=i("a",{class:"header-anchor",href:"#scroll","aria-label":"Permalink to “Scroll”"},"",-1))]),s[4]||(s[4]=e('<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;"> Scroll </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &quot;@natachah/vanilla-frontend/js/_scroll&quot;</span></span></code></pre></div><h2 id="syntax" tabindex="-1">Syntax <a class="header-anchor" href="#syntax" aria-label="Permalink to “Syntax”"></a></h2><p>The scroll component make you able to add some <code>&lt;button&gt;</code> to go on the top or bottom of an element.</p><p>It also make you able to spy on a <code>&lt;nav&gt;</code> to automatically set the <code>current</code> attribute on links when scrolling.</p>',4)),a(n,null,{default:o(()=>[...s[3]||(s[3]=[i("nav",{id:"demoScrollNav"},[i("ul",{class:"list"},[i("li",null,[i("a",{role:"button",href:"#target1","aria-current":"location"},"One")]),i("li",null,[i("a",{role:"button",href:"#target2"},"Two")]),i("li",null,[i("a",{role:"button",href:"#target3"},"Three")]),i("li",null,[i("button",{"data-scroll-bottom":"demoScrollSpy"},"Scroll to the bottom")]),i("li",null,[i("button",{"data-scroll-top":"demoScrollSpy"},"Scroll to the top")])])],-1),i("div",{id:"demoScrollSpy",style:{height:"150px","overflow-y":"scroll",position:"relative"}},[i("div",null,[i("p",{id:"target1"},"1) Lorem ipsum dolor sit amet consectetur adipisicing elit. Quis in dolore exercitationem, quibusdam repellat perspiciatis qui deleniti commodi reiciendis provident dolorem libero velit, ipsam inventore laudantium, maxime repudiandae minima. Sunt? Lorem ipsum dolor sit amet consectetur adipisicing elit. Quis in dolore exercitationem, quibusdam repellat perspiciatis qui deleniti commodi reiciendis provident dolorem libero velit, ipsam inventore laudantium, maxime repudiandae minima. Sunt? Lorem ipsum dolor sit amet consectetur adipisicing elit. Quis in dolore exercitationem, quibusdam repellat perspiciatis qui deleniti commodi reiciendis provident dolorem libero velit, ipsam inventore laudantium, maxime repudiandae minima. Sunt?"),i("p",{id:"target2"},"2) Lorem, ipsum dolor sit amet consectetur adipisicing elit. At excepturi ratione modi vero eligendi doloremque architecto ab quaerat delectus minima doloribus, ut, sint eos ipsam impedit reprehenderit hic, labore voluptas. Lorem, ipsum dolor sit amet consectetur adipisicing elit. At excepturi ratione modi vero eligendi doloremque architecto ab quaerat delectus minima doloribus, ut, sint eos ipsam impedit reprehenderit hic, labore voluptas.Lorem, ipsum dolor sit amet consectetur adipisicing elit. At excepturi ratione modi vero eligendi doloremque architecto ab quaerat delectus minima doloribus, ut, sint eos ipsam impedit reprehenderit hic, labore voluptas."),i("p",{id:"target3"},"3) Lorem, ipsum dolor sit amet consectetur adipisicing elit. At excepturi ratione modi vero eligendi doloremque architecto ab quaerat delectus minima doloribus, ut, sint eos ipsam impedit reprehenderit hic, labore voluptas.Lorem, ipsum dolor sit amet consectetur adipisicing elit. At excepturi ratione modi vero eligendi doloremque architecto ab quaerat delectus minima doloribus, ut, sint eos ipsam impedit reprehenderit hic, labore voluptas. At excepturi ratione modi vero eligendi doloremque architecto ab quaerat delectus minima doloribus, ut, sint eos ipsam impedit reprehenderit hic, labore voluptas.Lorem, ipsum dolor sit amet consectetur adipisicing elit. At excepturi ratione modi vero eligendi doloremque architecto ab quaerat delectus minima doloribus, ut, sint eos ipsam impedit reprehenderit hic, labore voluptas.")])],-1)])]),_:1}),s[5]||(s[5]=e(`<div class="warning custom-block"><p class="custom-block-title custom-block-title-default">WARNING</p><p>To work on the <code>&lt;body&gt;</code>, you must passed the <code>document.documentElement</code> as parameter.</p></div><div class="vp-code-group"><div class="tabs"><input type="radio" name="group-20" id="tab-21" checked><label data-title="html" for="tab-21">html</label><input type="radio" name="group-20" id="tab-22"><label data-title="js" for="tab-22">js</label></div><div class="blocks"><div class="language-html active"><button title="Copy Code" class="copy"></button><span class="lang">html</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:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">nav</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> id</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;demoScrollNav&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+import{C as n}from"./chunks/ComponentPreview.Cw4G3qNN.js";import{I as h,o as p,c as r,j as i,a as t,J as a,ai as e,w as o}from"./chunks/framework.26dFs73Q.js";/* empty css                                                                                */const k={id:"scroll",tabindex:"-1"},y=JSON.parse('{"title":"Scroll","description":"","frontmatter":{},"headers":[],"relativePath":"javascript/scroll.md","filePath":"javascript/scroll.md"}'),d={name:"javascript/scroll.md"},b=Object.assign(d,{setup(E){return(g,s)=>{const l=h("Badge");return p(),r("div",null,[i("h1",k,[s[0]||(s[0]=t("Scroll ",-1)),a(l,{type:"warning",text:"JS"}),s[1]||(s[1]=t()),s[2]||(s[2]=i("a",{class:"header-anchor",href:"#scroll","aria-label":"Permalink to “Scroll”"},"",-1))]),s[4]||(s[4]=e('<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;"> Scroll </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &quot;@natachah/vanilla-frontend/js/_scroll&quot;</span></span></code></pre></div><h2 id="syntax" tabindex="-1">Syntax <a class="header-anchor" href="#syntax" aria-label="Permalink to “Syntax”"></a></h2><p>The scroll component make you able to add some <code>&lt;button&gt;</code> to go on the top or bottom of an element.</p><p>It also make you able to spy on a <code>&lt;nav&gt;</code> to automatically set the <code>current</code> attribute on links when scrolling.</p>',4)),a(n,null,{default:o(()=>[...s[3]||(s[3]=[i("nav",{id:"demoScrollNav"},[i("ul",{class:"list"},[i("li",null,[i("a",{role:"button",href:"#target1","aria-current":"location"},"One")]),i("li",null,[i("a",{role:"button",href:"#target2"},"Two")]),i("li",null,[i("a",{role:"button",href:"#target3"},"Three")]),i("li",null,[i("button",{"data-scroll-bottom":"demoScrollSpy"},"Scroll to the bottom")]),i("li",null,[i("button",{"data-scroll-top":"demoScrollSpy"},"Scroll to the top")])])],-1),i("div",{id:"demoScrollSpy",style:{height:"150px","overflow-y":"scroll",position:"relative"}},[i("div",null,[i("p",{id:"target1"},"1) Lorem ipsum dolor sit amet consectetur adipisicing elit. Quis in dolore exercitationem, quibusdam repellat perspiciatis qui deleniti commodi reiciendis provident dolorem libero velit, ipsam inventore laudantium, maxime repudiandae minima. Sunt? Lorem ipsum dolor sit amet consectetur adipisicing elit. Quis in dolore exercitationem, quibusdam repellat perspiciatis qui deleniti commodi reiciendis provident dolorem libero velit, ipsam inventore laudantium, maxime repudiandae minima. Sunt? Lorem ipsum dolor sit amet consectetur adipisicing elit. Quis in dolore exercitationem, quibusdam repellat perspiciatis qui deleniti commodi reiciendis provident dolorem libero velit, ipsam inventore laudantium, maxime repudiandae minima. Sunt?"),i("p",{id:"target2"},"2) Lorem, ipsum dolor sit amet consectetur adipisicing elit. At excepturi ratione modi vero eligendi doloremque architecto ab quaerat delectus minima doloribus, ut, sint eos ipsam impedit reprehenderit hic, labore voluptas. Lorem, ipsum dolor sit amet consectetur adipisicing elit. At excepturi ratione modi vero eligendi doloremque architecto ab quaerat delectus minima doloribus, ut, sint eos ipsam impedit reprehenderit hic, labore voluptas.Lorem, ipsum dolor sit amet consectetur adipisicing elit. At excepturi ratione modi vero eligendi doloremque architecto ab quaerat delectus minima doloribus, ut, sint eos ipsam impedit reprehenderit hic, labore voluptas."),i("p",{id:"target3"},"3) Lorem, ipsum dolor sit amet consectetur adipisicing elit. At excepturi ratione modi vero eligendi doloremque architecto ab quaerat delectus minima doloribus, ut, sint eos ipsam impedit reprehenderit hic, labore voluptas.Lorem, ipsum dolor sit amet consectetur adipisicing elit. At excepturi ratione modi vero eligendi doloremque architecto ab quaerat delectus minima doloribus, ut, sint eos ipsam impedit reprehenderit hic, labore voluptas. At excepturi ratione modi vero eligendi doloremque architecto ab quaerat delectus minima doloribus, ut, sint eos ipsam impedit reprehenderit hic, labore voluptas.Lorem, ipsum dolor sit amet consectetur adipisicing elit. At excepturi ratione modi vero eligendi doloremque architecto ab quaerat delectus minima doloribus, ut, sint eos ipsam impedit reprehenderit hic, labore voluptas.")])],-1)])]),_:1}),s[5]||(s[5]=e(`<div class="warning custom-block"><p class="custom-block-title custom-block-title-default">WARNING</p><p>To work on the <code>&lt;body&gt;</code>, you must passed the <code>document.documentElement</code> as parameter.</p></div><div class="vp-code-group"><div class="tabs"><input type="radio" name="group-20" id="tab-21" checked><label data-title="html" for="tab-21">html</label><input type="radio" name="group-20" id="tab-22"><label data-title="js" for="tab-22">js</label></div><div class="blocks"><div class="language-html active"><button title="Copy Code" class="copy"></button><span class="lang">html</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:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">nav</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> id</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;demoScrollNav&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
 <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">ul</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> class</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;list&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
 <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">        &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">li</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">a</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> role</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;button&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> href</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;#target1&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> aria-current</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;location&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;One&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">a</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">li</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
 <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">        &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">li</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">a</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> role</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;button&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> href</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;#target2&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;Two&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">a</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">li</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>

package/public/assets/{javascript_scroll.md.BrJijWbF.lean.js → javascript_scroll.md.DeOZ4grw.lean.js} RENAMED Viewed

	@@ -1 +1 @@
1	- import{C as n}from"./chunks/ComponentPreview.~~BW2s4ay5~~.js";import{I as h,o as p,c as r,j as i,a as t,J as a,ai as e,w as o}from"./chunks/framework.~~CaiDwmc7~~.js";/* empty css */const k={id:"scroll",tabindex:"-1"},y=JSON.parse('{"title":"Scroll","description":"","frontmatter":{},"headers":[],"relativePath":"javascript/scroll.md","filePath":"javascript/scroll.md"}'),d={name:"javascript/scroll.md"},b=Object.assign(d,{setup(E){return(g,s)=>{const l=h("Badge");return p(),r("div",null,[i("h1",k,[s[0]\|\|(s[0]=t("Scroll ",-1)),a(l,{type:"warning",text:"JS"}),s[1]\|\|(s[1]=t()),s[2]\|\|(s[2]=i("a",{class:"header-anchor",href:"#scroll","aria-label":"Permalink to “Scroll”"},"",-1))]),s[4]\|\|(s[4]=e("",4)),a(n,null,{default:o(()=>[...s[3]\|\|(s[3]=[i("nav",{id:"demoScrollNav"},[i("ul",{class:"list"},[i("li",null,[i("a",{role:"button",href:"#target1","aria-current":"location"},"One")]),i("li",null,[i("a",{role:"button",href:"#target2"},"Two")]),i("li",null,[i("a",{role:"button",href:"#target3"},"Three")]),i("li",null,[i("button",{"data-scroll-bottom":"demoScrollSpy"},"Scroll to the bottom")]),i("li",null,[i("button",{"data-scroll-top":"demoScrollSpy"},"Scroll to the top")])])],-1),i("div",{id:"demoScrollSpy",style:{height:"150px","overflow-y":"scroll",position:"relative"}},[i("div",null,[i("p",{id:"target1"},"1) Lorem ipsum dolor sit amet consectetur adipisicing elit. Quis in dolore exercitationem, quibusdam repellat perspiciatis qui deleniti commodi reiciendis provident dolorem libero velit, ipsam inventore laudantium, maxime repudiandae minima. Sunt? Lorem ipsum dolor sit amet consectetur adipisicing elit. Quis in dolore exercitationem, quibusdam repellat perspiciatis qui deleniti commodi reiciendis provident dolorem libero velit, ipsam inventore laudantium, maxime repudiandae minima. Sunt? Lorem ipsum dolor sit amet consectetur adipisicing elit. Quis in dolore exercitationem, quibusdam repellat perspiciatis qui deleniti commodi reiciendis provident dolorem libero velit, ipsam inventore laudantium, maxime repudiandae minima. Sunt?"),i("p",{id:"target2"},"2) Lorem, ipsum dolor sit amet consectetur adipisicing elit. At excepturi ratione modi vero eligendi doloremque architecto ab quaerat delectus minima doloribus, ut, sint eos ipsam impedit reprehenderit hic, labore voluptas. Lorem, ipsum dolor sit amet consectetur adipisicing elit. At excepturi ratione modi vero eligendi doloremque architecto ab quaerat delectus minima doloribus, ut, sint eos ipsam impedit reprehenderit hic, labore voluptas.Lorem, ipsum dolor sit amet consectetur adipisicing elit. At excepturi ratione modi vero eligendi doloremque architecto ab quaerat delectus minima doloribus, ut, sint eos ipsam impedit reprehenderit hic, labore voluptas."),i("p",{id:"target3"},"3) Lorem, ipsum dolor sit amet consectetur adipisicing elit. At excepturi ratione modi vero eligendi doloremque architecto ab quaerat delectus minima doloribus, ut, sint eos ipsam impedit reprehenderit hic, labore voluptas.Lorem, ipsum dolor sit amet consectetur adipisicing elit. At excepturi ratione modi vero eligendi doloremque architecto ab quaerat delectus minima doloribus, ut, sint eos ipsam impedit reprehenderit hic, labore voluptas. At excepturi ratione modi vero eligendi doloremque architecto ab quaerat delectus minima doloribus, ut, sint eos ipsam impedit reprehenderit hic, labore voluptas.Lorem, ipsum dolor sit amet consectetur adipisicing elit. At excepturi ratione modi vero eligendi doloremque architecto ab quaerat delectus minima doloribus, ut, sint eos ipsam impedit reprehenderit hic, labore voluptas.")])],-1)])]),_:1}),s[5]\|\|(s[5]=e("",8))])}}});export{y as __pageData,b as default};
1	+ import{C as n}from"./chunks/ComponentPreview.Cw4G3qNN.js";import{I as h,o as p,c as r,j as i,a as t,J as a,ai as e,w as o}from"./chunks/framework.26dFs73Q.js";/* empty css */const k={id:"scroll",tabindex:"-1"},y=JSON.parse('{"title":"Scroll","description":"","frontmatter":{},"headers":[],"relativePath":"javascript/scroll.md","filePath":"javascript/scroll.md"}'),d={name:"javascript/scroll.md"},b=Object.assign(d,{setup(E){return(g,s)=>{const l=h("Badge");return p(),r("div",null,[i("h1",k,[s[0]\|\|(s[0]=t("Scroll ",-1)),a(l,{type:"warning",text:"JS"}),s[1]\|\|(s[1]=t()),s[2]\|\|(s[2]=i("a",{class:"header-anchor",href:"#scroll","aria-label":"Permalink to “Scroll”"},"",-1))]),s[4]\|\|(s[4]=e("",4)),a(n,null,{default:o(()=>[...s[3]\|\|(s[3]=[i("nav",{id:"demoScrollNav"},[i("ul",{class:"list"},[i("li",null,[i("a",{role:"button",href:"#target1","aria-current":"location"},"One")]),i("li",null,[i("a",{role:"button",href:"#target2"},"Two")]),i("li",null,[i("a",{role:"button",href:"#target3"},"Three")]),i("li",null,[i("button",{"data-scroll-bottom":"demoScrollSpy"},"Scroll to the bottom")]),i("li",null,[i("button",{"data-scroll-top":"demoScrollSpy"},"Scroll to the top")])])],-1),i("div",{id:"demoScrollSpy",style:{height:"150px","overflow-y":"scroll",position:"relative"}},[i("div",null,[i("p",{id:"target1"},"1) Lorem ipsum dolor sit amet consectetur adipisicing elit. Quis in dolore exercitationem, quibusdam repellat perspiciatis qui deleniti commodi reiciendis provident dolorem libero velit, ipsam inventore laudantium, maxime repudiandae minima. Sunt? Lorem ipsum dolor sit amet consectetur adipisicing elit. Quis in dolore exercitationem, quibusdam repellat perspiciatis qui deleniti commodi reiciendis provident dolorem libero velit, ipsam inventore laudantium, maxime repudiandae minima. Sunt? Lorem ipsum dolor sit amet consectetur adipisicing elit. Quis in dolore exercitationem, quibusdam repellat perspiciatis qui deleniti commodi reiciendis provident dolorem libero velit, ipsam inventore laudantium, maxime repudiandae minima. Sunt?"),i("p",{id:"target2"},"2) Lorem, ipsum dolor sit amet consectetur adipisicing elit. At excepturi ratione modi vero eligendi doloremque architecto ab quaerat delectus minima doloribus, ut, sint eos ipsam impedit reprehenderit hic, labore voluptas. Lorem, ipsum dolor sit amet consectetur adipisicing elit. At excepturi ratione modi vero eligendi doloremque architecto ab quaerat delectus minima doloribus, ut, sint eos ipsam impedit reprehenderit hic, labore voluptas.Lorem, ipsum dolor sit amet consectetur adipisicing elit. At excepturi ratione modi vero eligendi doloremque architecto ab quaerat delectus minima doloribus, ut, sint eos ipsam impedit reprehenderit hic, labore voluptas."),i("p",{id:"target3"},"3) Lorem, ipsum dolor sit amet consectetur adipisicing elit. At excepturi ratione modi vero eligendi doloremque architecto ab quaerat delectus minima doloribus, ut, sint eos ipsam impedit reprehenderit hic, labore voluptas.Lorem, ipsum dolor sit amet consectetur adipisicing elit. At excepturi ratione modi vero eligendi doloremque architecto ab quaerat delectus minima doloribus, ut, sint eos ipsam impedit reprehenderit hic, labore voluptas. At excepturi ratione modi vero eligendi doloremque architecto ab quaerat delectus minima doloribus, ut, sint eos ipsam impedit reprehenderit hic, labore voluptas.Lorem, ipsum dolor sit amet consectetur adipisicing elit. At excepturi ratione modi vero eligendi doloremque architecto ab quaerat delectus minima doloribus, ut, sint eos ipsam impedit reprehenderit hic, labore voluptas.")])],-1)])]),_:1}),s[5]\|\|(s[5]=e("",8))])}}});export{y as __pageData,b as default};

package/public/assets/{javascript_slider.md.DDO8wC4u.js → javascript_slider.md.CIa7pHr9.js} RENAMED Viewed

@@ -1,4 +1,4 @@
-import{C as n}from"./chunks/ComponentPreview.BW2s4ay5.js";import{I as k,o as e,c as p,j as s,a,J as t,ai as h,w as d}from"./chunks/framework.CaiDwmc7.js";/* empty css                                                                                */const r={id:"slider",tabindex:"-1"},u=JSON.parse('{"title":"Slider","description":"","frontmatter":{},"headers":[],"relativePath":"javascript/slider.md","filePath":"javascript/slider.md"}'),E={name:"javascript/slider.md"},b=Object.assign(E,{setup(o){return(g,i)=>{const l=k("Badge");return e(),p("div",null,[s("h1",r,[i[0]||(i[0]=a("Slider ",-1)),t(l,{type:"warning",text:"JS"}),i[1]||(i[1]=a()),i[2]||(i[2]=s("a",{class:"header-anchor",href:"#slider","aria-label":"Permalink to “Slider”"},"",-1))]),i[4]||(i[4]=h('<div class="language-scss"><button title="Copy Code" class="copy"></button><span class="lang">scss</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;">@use</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;@natachah/vanilla-frontend/scss/components/slider&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span></code></pre></div><h2 id="syntax" tabindex="-1">Syntax <a class="header-anchor" href="#syntax" aria-label="Permalink to “Syntax”"></a></h2><p>The slider is using the a <code>&lt;div&gt;</code> tag with the class <code>.slider.</code></p><p>Each slide must be a <code>&lt;div&gt;</code> with <code>role=&quot;tabpanel&quot;</code> and <code>aria-hidden=&quot;true&quot;</code> attributes.</p>',4)),t(n,null,{default:d(()=>[...i[3]||(i[3]=[s("div",{id:"slider",class:"slider"},[s("div",{id:"slide1",role:"tabpanel","aria-hidden":"false"},[s("img",{src:"https://picsum.photos/id/1/300",alt:"Image 1"})]),s("div",{id:"slide2",role:"tabpanel","aria-hidden":"true"},[s("img",{src:"https://picsum.photos/id/2/300",alt:"Image 2"})]),s("div",{id:"slide3",role:"tabpanel","aria-hidden":"true"},[s("img",{src:"https://picsum.photos/id/3/300",alt:"Image 3"})])],-1),s("button",{"aria-controls":"slider","data-slider-prev":""},"previous",-1),s("div",{"aria-controls":"slider",role:"tablist"},[s("button",{role:"tab","aria-controls":"slide1","aria-selected":"true"},"1"),s("button",{role:"tab","aria-controls":"slide2","aria-selected":"false"},"2"),s("button",{role:"tab","aria-controls":"slide3","aria-selected":"false"},"3")],-1),s("button",{"aria-controls":"slider","data-slider-next":""},"next",-1)])]),_:1}),i[5]||(i[5]=h(`<div class="vp-code-group"><div class="tabs"><input type="radio" name="group-15" id="tab-16" checked><label data-title="html" for="tab-16">html</label><input type="radio" name="group-15" id="tab-17"><label data-title="css properties" for="tab-17">css properties</label><input type="radio" name="group-15" id="tab-18"><label data-title="js" for="tab-18">js</label></div><div class="blocks"><div class="language-html active"><button title="Copy Code" class="copy"></button><span class="lang">html</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:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> id</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;slider&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> class</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;slider&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+import{C as n}from"./chunks/ComponentPreview.Cw4G3qNN.js";import{I as k,o as e,c as p,j as s,a,J as t,ai as h,w as d}from"./chunks/framework.26dFs73Q.js";/* empty css                                                                                */const r={id:"slider",tabindex:"-1"},u=JSON.parse('{"title":"Slider","description":"","frontmatter":{},"headers":[],"relativePath":"javascript/slider.md","filePath":"javascript/slider.md"}'),E={name:"javascript/slider.md"},b=Object.assign(E,{setup(o){return(g,i)=>{const l=k("Badge");return e(),p("div",null,[s("h1",r,[i[0]||(i[0]=a("Slider ",-1)),t(l,{type:"warning",text:"JS"}),i[1]||(i[1]=a()),i[2]||(i[2]=s("a",{class:"header-anchor",href:"#slider","aria-label":"Permalink to “Slider”"},"",-1))]),i[4]||(i[4]=h('<div class="language-scss"><button title="Copy Code" class="copy"></button><span class="lang">scss</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;">@use</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;@natachah/vanilla-frontend/scss/components/slider&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span></code></pre></div><h2 id="syntax" tabindex="-1">Syntax <a class="header-anchor" href="#syntax" aria-label="Permalink to “Syntax”"></a></h2><p>The slider is using the a <code>&lt;div&gt;</code> tag with the class <code>.slider.</code></p><p>Each slide must be a <code>&lt;div&gt;</code> with <code>role=&quot;tabpanel&quot;</code> and <code>aria-hidden=&quot;true&quot;</code> attributes.</p>',4)),t(n,null,{default:d(()=>[...i[3]||(i[3]=[s("div",{id:"slider",class:"slider"},[s("div",{id:"slide1",role:"tabpanel","aria-hidden":"false"},[s("img",{src:"https://picsum.photos/id/1/300",alt:"Image 1"})]),s("div",{id:"slide2",role:"tabpanel","aria-hidden":"true"},[s("img",{src:"https://picsum.photos/id/2/300",alt:"Image 2"})]),s("div",{id:"slide3",role:"tabpanel","aria-hidden":"true"},[s("img",{src:"https://picsum.photos/id/3/300",alt:"Image 3"})])],-1),s("button",{"aria-controls":"slider","data-slider-prev":""},"previous",-1),s("div",{"aria-controls":"slider",role:"tablist"},[s("button",{role:"tab","aria-controls":"slide1","aria-selected":"true"},"1"),s("button",{role:"tab","aria-controls":"slide2","aria-selected":"false"},"2"),s("button",{role:"tab","aria-controls":"slide3","aria-selected":"false"},"3")],-1),s("button",{"aria-controls":"slider","data-slider-next":""},"next",-1)])]),_:1}),i[5]||(i[5]=h(`<div class="vp-code-group"><div class="tabs"><input type="radio" name="group-15" id="tab-16" checked><label data-title="html" for="tab-16">html</label><input type="radio" name="group-15" id="tab-17"><label data-title="css properties" for="tab-17">css properties</label><input type="radio" name="group-15" id="tab-18"><label data-title="js" for="tab-18">js</label></div><div class="blocks"><div class="language-html active"><button title="Copy Code" class="copy"></button><span class="lang">html</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:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> id</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;slider&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> class</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;slider&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
 <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> id</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;slide1&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> role</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;tabpanel&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> aria-hidden</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;false&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">img</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> src</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;https://picsum.photos/id/1/300&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> alt</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;Image 1&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
 <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> id</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;slide2&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> role</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;tabpanel&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> aria-hidden</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;true&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">img</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> src</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;https://picsum.photos/id/2/300&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> alt</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;Image 2&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
 <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> id</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;slide3&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> role</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;tabpanel&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> aria-hidden</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;true&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">img</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> src</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;https://picsum.photos/id/3/300&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> alt</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;Image 3&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>

package/public/assets/{javascript_slider.md.DDO8wC4u.lean.js → javascript_slider.md.CIa7pHr9.lean.js} RENAMED Viewed

	@@ -1 +1 @@
1	- import{C as n}from"./chunks/ComponentPreview.~~BW2s4ay5~~.js";import{I as k,o as e,c as p,j as s,a,J as t,ai as h,w as d}from"./chunks/framework.~~CaiDwmc7~~.js";/* empty css */const r={id:"slider",tabindex:"-1"},u=JSON.parse('{"title":"Slider","description":"","frontmatter":{},"headers":[],"relativePath":"javascript/slider.md","filePath":"javascript/slider.md"}'),E={name:"javascript/slider.md"},b=Object.assign(E,{setup(o){return(g,i)=>{const l=k("Badge");return e(),p("div",null,[s("h1",r,[i[0]\|\|(i[0]=a("Slider ",-1)),t(l,{type:"warning",text:"JS"}),i[1]\|\|(i[1]=a()),i[2]\|\|(i[2]=s("a",{class:"header-anchor",href:"#slider","aria-label":"Permalink to “Slider”"},"",-1))]),i[4]\|\|(i[4]=h("",4)),t(n,null,{default:d(()=>[...i[3]\|\|(i[3]=[s("div",{id:"slider",class:"slider"},[s("div",{id:"slide1",role:"tabpanel","aria-hidden":"false"},[s("img",{src:"https://picsum.photos/id/1/300",alt:"Image 1"})]),s("div",{id:"slide2",role:"tabpanel","aria-hidden":"true"},[s("img",{src:"https://picsum.photos/id/2/300",alt:"Image 2"})]),s("div",{id:"slide3",role:"tabpanel","aria-hidden":"true"},[s("img",{src:"https://picsum.photos/id/3/300",alt:"Image 3"})])],-1),s("button",{"aria-controls":"slider","data-slider-prev":""},"previous",-1),s("div",{"aria-controls":"slider",role:"tablist"},[s("button",{role:"tab","aria-controls":"slide1","aria-selected":"true"},"1"),s("button",{role:"tab","aria-controls":"slide2","aria-selected":"false"},"2"),s("button",{role:"tab","aria-controls":"slide3","aria-selected":"false"},"3")],-1),s("button",{"aria-controls":"slider","data-slider-next":""},"next",-1)])]),_:1}),i[5]\|\|(i[5]=h("",20))])}}});export{u as __pageData,b as default};
1	+ import{C as n}from"./chunks/ComponentPreview.Cw4G3qNN.js";import{I as k,o as e,c as p,j as s,a,J as t,ai as h,w as d}from"./chunks/framework.26dFs73Q.js";/* empty css */const r={id:"slider",tabindex:"-1"},u=JSON.parse('{"title":"Slider","description":"","frontmatter":{},"headers":[],"relativePath":"javascript/slider.md","filePath":"javascript/slider.md"}'),E={name:"javascript/slider.md"},b=Object.assign(E,{setup(o){return(g,i)=>{const l=k("Badge");return e(),p("div",null,[s("h1",r,[i[0]\|\|(i[0]=a("Slider ",-1)),t(l,{type:"warning",text:"JS"}),i[1]\|\|(i[1]=a()),i[2]\|\|(i[2]=s("a",{class:"header-anchor",href:"#slider","aria-label":"Permalink to “Slider”"},"",-1))]),i[4]\|\|(i[4]=h("",4)),t(n,null,{default:d(()=>[...i[3]\|\|(i[3]=[s("div",{id:"slider",class:"slider"},[s("div",{id:"slide1",role:"tabpanel","aria-hidden":"false"},[s("img",{src:"https://picsum.photos/id/1/300",alt:"Image 1"})]),s("div",{id:"slide2",role:"tabpanel","aria-hidden":"true"},[s("img",{src:"https://picsum.photos/id/2/300",alt:"Image 2"})]),s("div",{id:"slide3",role:"tabpanel","aria-hidden":"true"},[s("img",{src:"https://picsum.photos/id/3/300",alt:"Image 3"})])],-1),s("button",{"aria-controls":"slider","data-slider-prev":""},"previous",-1),s("div",{"aria-controls":"slider",role:"tablist"},[s("button",{role:"tab","aria-controls":"slide1","aria-selected":"true"},"1"),s("button",{role:"tab","aria-controls":"slide2","aria-selected":"false"},"2"),s("button",{role:"tab","aria-controls":"slide3","aria-selected":"false"},"3")],-1),s("button",{"aria-controls":"slider","data-slider-next":""},"next",-1)])]),_:1}),i[5]\|\|(i[5]=h("",20))])}}});export{u as __pageData,b as default};

package/public/assets/{javascript_sortable.md.BKyem7yw.js → javascript_sortable.md.CThHVTgW.js} RENAMED Viewed

@@ -1,4 +1,4 @@
-import{C as h}from"./chunks/ComponentPreview.BW2s4ay5.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.CaiDwmc7.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('<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;"> Sortable </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &quot;@natachah/vanilla-frontend/js/_sortable&quot;</span></span></code></pre></div><h2 id="syntax" tabindex="-1">Syntax <a class="header-anchor" href="#syntax" aria-label="Permalink to “Syntax”"></a></h2><p>The sortable component make you able to change the order of a list..</p><p>The list can be an <code>&lt;ul&gt;</code>, <code>&lt;ol&gt;</code>, <code>&lt;div&gt;</code> or <code>&lt;tbody&gt;</code> tag.</p><p>Each children must have a <code>draggable=&quot;false&quot;</code> attribute. The attribute will be changed when drag start.</p>',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(`<div class="vp-code-group"><div class="tabs"><input type="radio" name="group-18" id="tab-19" checked><label data-title="html" for="tab-19">html</label><input type="radio" name="group-18" id="tab-20"><label data-title="js" for="tab-20">js</label></div><div class="blocks"><div class="language-html active"><button title="Copy Code" class="copy"></button><span class="lang">html</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:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">ul</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> id</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;mySortableList&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> class</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;demo-sortable&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+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('<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;"> Sortable </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &quot;@natachah/vanilla-frontend/js/_sortable&quot;</span></span></code></pre></div><h2 id="syntax" tabindex="-1">Syntax <a class="header-anchor" href="#syntax" aria-label="Permalink to “Syntax”"></a></h2><p>The sortable component make you able to change the order of a list..</p><p>The list can be an <code>&lt;ul&gt;</code>, <code>&lt;ol&gt;</code>, <code>&lt;div&gt;</code> or <code>&lt;tbody&gt;</code> tag.</p><p>Each children must have a <code>draggable=&quot;false&quot;</code> attribute. The attribute will be changed when drag start.</p>',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(`<div class="vp-code-group"><div class="tabs"><input type="radio" name="group-18" id="tab-19" checked><label data-title="html" for="tab-19">html</label><input type="radio" name="group-18" id="tab-20"><label data-title="js" for="tab-20">js</label></div><div class="blocks"><div class="language-html active"><button title="Copy Code" class="copy"></button><span class="lang">html</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:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">ul</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> id</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;mySortableList&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> class</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;demo-sortable&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
 <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">li</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> draggable</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;false&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;Lorem, ipsum.&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">li</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
 <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">li</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> draggable</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;false&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;Impedit, quod!&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">li</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
 <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">li</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> draggable</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;false&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;Repudiandae, rerum.&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">li</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>

package/public/assets/{javascript_sortable.md.BKyem7yw.lean.js → javascript_sortable.md.CThHVTgW.lean.js} RENAMED Viewed

	@@ -1 +1 @@
1	- import{C as h}from"./chunks/ComponentPreview.~~BW2s4ay5~~.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.~~CaiDwmc7~~.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};
1	+ 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.D9M-_xE0.js → javascript_tabpanel.md.CxAFdAGU.js} RENAMED Viewed

@@ -1,4 +1,4 @@
-import{C as h}from"./chunks/ComponentPreview.BW2s4ay5.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.CaiDwmc7.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('<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;"> Tabpanel </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &quot;@natachah/vanilla-frontend/js/_tabpanel&quot;</span></span></code></pre></div><h2 id="syntax" tabindex="-1">Syntax <a class="header-anchor" href="#syntax" aria-label="Permalink to “Syntax”"></a></h2><p>The tabpanel component make you able to make some elements visible by some <code>&lt;button&gt;</code>.</p><p>The button must have an <code>aria-controls=&quot;IdOfElement&quot;</code>, an <code>aria-expanded</code> and a <code>aria-pressed</code> attributes.</p>',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(`<div class="vp-code-group"><div class="tabs"><input type="radio" name="group-15" id="tab-16" checked><label data-title="html" for="tab-16">html</label><input type="radio" name="group-15" id="tab-17"><label data-title="js" for="tab-17">js</label></div><div class="blocks"><div class="language-html active"><button title="Copy Code" class="copy"></button><span class="lang">html</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:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> id</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;myPanel&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+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('<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;"> Tabpanel </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &quot;@natachah/vanilla-frontend/js/_tabpanel&quot;</span></span></code></pre></div><h2 id="syntax" tabindex="-1">Syntax <a class="header-anchor" href="#syntax" aria-label="Permalink to “Syntax”"></a></h2><p>The tabpanel component make you able to make some elements visible by some <code>&lt;button&gt;</code>.</p><p>The button must have an <code>aria-controls=&quot;IdOfElement&quot;</code>, an <code>aria-expanded</code> and a <code>aria-pressed</code> attributes.</p>',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(`<div class="vp-code-group"><div class="tabs"><input type="radio" name="group-15" id="tab-16" checked><label data-title="html" for="tab-16">html</label><input type="radio" name="group-15" id="tab-17"><label data-title="js" for="tab-17">js</label></div><div class="blocks"><div class="language-html active"><button title="Copy Code" class="copy"></button><span class="lang">html</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:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> id</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;myPanel&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
 <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> role</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;tablist&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> aria-label</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;My demo tabpanel&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
 <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">        &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">button</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> id</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;tab-1&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> role</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;tab&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> aria-controls</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;one&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;One&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">button</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
 <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">        &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">button</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> id</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;tab-2&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> role</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;tab&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> aria-controls</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;two&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;Two&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">button</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>

package/public/assets/{javascript_tabpanel.md.D9M-_xE0.lean.js → javascript_tabpanel.md.CxAFdAGU.lean.js} RENAMED Viewed

	@@ -1 +1 @@
1	- import{C as h}from"./chunks/ComponentPreview.~~BW2s4ay5~~.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.~~CaiDwmc7~~.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};
1	+ 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_toggle.md.C8582WNC.js → javascript_toggle.md.C66hpUWF.js} RENAMED Viewed

@@ -1,4 +1,4 @@
-import{C as h}from"./chunks/ComponentPreview.BW2s4ay5.js";import{I as e,o as p,c as E,j as s,a as k,J as a,ai as t,w as l}from"./chunks/framework.CaiDwmc7.js";/* empty css                                                                                */const d={id:"toggle",tabindex:"-1"},u=JSON.parse('{"title":"Toggle","description":"","frontmatter":{},"headers":[],"relativePath":"javascript/toggle.md","filePath":"javascript/toggle.md"}'),g={name:"javascript/toggle.md"},B=Object.assign(g,{setup(r){return(o,i)=>{const n=e("Badge");return p(),E("div",null,[s("h1",d,[i[0]||(i[0]=k("Toggle ",-1)),a(n,{type:"warning",text:"JS"}),i[1]||(i[1]=k()),i[2]||(i[2]=s("a",{class:"header-anchor",href:"#toggle","aria-label":"Permalink to “Toggle”"},"",-1))]),i[8]||(i[8]=t('<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;"> Toggle </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &quot;@natachah/vanilla-frontend/js/_toggle&quot;</span></span></code></pre></div><h2 id="syntax" tabindex="-1">Syntax <a class="header-anchor" href="#syntax" aria-label="Permalink to “Syntax”"></a></h2><p>The toggle component make you able to show/hide some elements by a <code>&lt;button&gt;</code>.</p><p>The button must have an <code>aria-controls=&quot;IdOfElement&quot;</code>, an <code>aria-expanded</code> and a <code>aria-pressed</code> attributes.</p>',4)),a(h,{height:"200px"},{default:l(()=>[...i[3]||(i[3]=[s("button",{id:"toggle",class:"demo-toggle","aria-controls":"collapse","aria-expanded":"false","aria-pressed":"false"},"Toggle",-1),s("div",{id:"collapse",tabindex:"0",hidden:""}," Hello there ! ",-1)])]),_:1}),i[9]||(i[9]=t(`<div class="vp-code-group"><div class="tabs"><input type="radio" name="group-15" id="tab-16" checked><label data-title="html" for="tab-16">html</label><input type="radio" name="group-15" id="tab-17"><label data-title="js" for="tab-17">js</label></div><div class="blocks"><div class="language-html active"><button title="Copy Code" class="copy"></button><span class="lang">html</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:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">button</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> id</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;toggle&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> class</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;demo-toggle&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> aria-controls</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;collapse&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> aria-expanded</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;false&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> aria-pressed</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;false&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;Toggle&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">button</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+import{C as h}from"./chunks/ComponentPreview.Cw4G3qNN.js";import{I as e,o as p,c as E,j as s,a as k,J as a,ai as t,w as l}from"./chunks/framework.26dFs73Q.js";/* empty css                                                                                */const d={id:"toggle",tabindex:"-1"},u=JSON.parse('{"title":"Toggle","description":"","frontmatter":{},"headers":[],"relativePath":"javascript/toggle.md","filePath":"javascript/toggle.md"}'),g={name:"javascript/toggle.md"},B=Object.assign(g,{setup(r){return(o,i)=>{const n=e("Badge");return p(),E("div",null,[s("h1",d,[i[0]||(i[0]=k("Toggle ",-1)),a(n,{type:"warning",text:"JS"}),i[1]||(i[1]=k()),i[2]||(i[2]=s("a",{class:"header-anchor",href:"#toggle","aria-label":"Permalink to “Toggle”"},"",-1))]),i[8]||(i[8]=t('<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;"> Toggle </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &quot;@natachah/vanilla-frontend/js/_toggle&quot;</span></span></code></pre></div><h2 id="syntax" tabindex="-1">Syntax <a class="header-anchor" href="#syntax" aria-label="Permalink to “Syntax”"></a></h2><p>The toggle component make you able to show/hide some elements by a <code>&lt;button&gt;</code>.</p><p>The button must have an <code>aria-controls=&quot;IdOfElement&quot;</code>, an <code>aria-expanded</code> and a <code>aria-pressed</code> attributes.</p>',4)),a(h,{height:"200px"},{default:l(()=>[...i[3]||(i[3]=[s("button",{id:"toggle",class:"demo-toggle","aria-controls":"collapse","aria-expanded":"false","aria-pressed":"false"},"Toggle",-1),s("div",{id:"collapse",tabindex:"0",hidden:""}," Hello there ! ",-1)])]),_:1}),i[9]||(i[9]=t(`<div class="vp-code-group"><div class="tabs"><input type="radio" name="group-15" id="tab-16" checked><label data-title="html" for="tab-16">html</label><input type="radio" name="group-15" id="tab-17"><label data-title="js" for="tab-17">js</label></div><div class="blocks"><div class="language-html active"><button title="Copy Code" class="copy"></button><span class="lang">html</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:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">button</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> id</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;toggle&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> class</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;demo-toggle&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> aria-controls</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;collapse&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> aria-expanded</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;false&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> aria-pressed</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;false&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;Toggle&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">button</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
 <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> id</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;collapse&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> tabindex</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;0&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> hidden</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
 <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    Hello there !</span></span>
 <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre></div><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;"> Toggle </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &quot;@natachah/vanilla-frontend/js/_toggle&quot;</span></span>

package/public/assets/{javascript_toggle.md.C8582WNC.lean.js → javascript_toggle.md.C66hpUWF.lean.js} RENAMED Viewed

	@@ -1 +1 @@
1	- import{C as h}from"./chunks/ComponentPreview.~~BW2s4ay5~~.js";import{I as e,o as p,c as E,j as s,a as k,J as a,ai as t,w as l}from"./chunks/framework.~~CaiDwmc7~~.js";/* empty css */const d={id:"toggle",tabindex:"-1"},u=JSON.parse('{"title":"Toggle","description":"","frontmatter":{},"headers":[],"relativePath":"javascript/toggle.md","filePath":"javascript/toggle.md"}'),g={name:"javascript/toggle.md"},B=Object.assign(g,{setup(r){return(o,i)=>{const n=e("Badge");return p(),E("div",null,[s("h1",d,[i[0]\|\|(i[0]=k("Toggle ",-1)),a(n,{type:"warning",text:"JS"}),i[1]\|\|(i[1]=k()),i[2]\|\|(i[2]=s("a",{class:"header-anchor",href:"#toggle","aria-label":"Permalink to “Toggle”"},"",-1))]),i[8]\|\|(i[8]=t("",4)),a(h,{height:"200px"},{default:l(()=>[...i[3]\|\|(i[3]=[s("button",{id:"toggle",class:"demo-toggle","aria-controls":"collapse","aria-expanded":"false","aria-pressed":"false"},"Toggle",-1),s("div",{id:"collapse",tabindex:"0",hidden:""}," Hello there ! ",-1)])]),_:1}),i[9]\|\|(i[9]=t("",5)),a(h,{height:"200px"},{default:l(()=>[...i[4]\|\|(i[4]=[s("fieldset",null,[s("legend",null,"Toggles"),s("input",{class:"demo-toggle",id:"cA",type:"checkbox","aria-controls":"checkboxA","aria-expanded":"false"}),s("label",{for:"cA"},"Toggle A"),s("input",{class:"demo-toggle",id:"cB",type:"checkbox","aria-controls":"checkboxB","aria-expanded":"false"}),s("label",{for:"cB"},"Toggle B")],-1),s("div",{id:"checkboxA",hidden:""},"Hello there, I'm A !",-1),s("div",{id:"checkboxB",hidden:""},"Hello there, I'm B !",-1)])]),_:1}),i[10]\|\|(i[10]=t("",3)),a(h,{height:"200px"},{default:l(()=>[...i[5]\|\|(i[5]=[s("fieldset",null,[s("legend",null,"Toggles"),s("input",{id:"rA",class:"demo-toggle",type:"radio",name:"radio","aria-controls":"radioA","aria-expanded":"false",value:"a"}),s("label",{for:"rA"},"Toggle A"),s("input",{id:"rB",class:"demo-toggle",type:"radio",name:"radio","aria-controls":"radioB","aria-expanded":"false",value:"b"}),s("label",{for:"rB"},"Toggle B"),s("input",{id:"rC",class:"demo-toggle",type:"radio",name:"radio",value:"c"}),s("label",{for:"rC"},"Toggle C")],-1),s("div",{id:"radioA",hidden:""},"Hello there, I'm A !",-1),s("div",{id:"radioB",hidden:""},"Hello there, I'm B !",-1)])]),_:1}),i[11]\|\|(i[11]=t("",3)),a(h,null,{default:l(()=>[...i[6]\|\|(i[6]=[s("input",{id:"switch",class:"demo-toggle",type:"checkbox",role:"switch","aria-controls":"switchA switchB","aria-expanded":"true"},null,-1),s("label",{for:"switch"},"Switch",-1),s("div",{id:"switchA","data-toggle-when":"true",hidden:""},"This is TRUE",-1),s("div",{id:"switchB","data-toggle-when":"false"},"This is FALSE",-1)])]),_:1}),i[12]\|\|(i[12]=t("",3)),a(h,{height:"200px"},{default:l(()=>[...i[7]\|\|(i[7]=[s("select",{class:"demo-toggle",name:"select","aria-controls":"selectA selectB selectG selectNot","aria-expanded":"false"},[s("option",{value:"null"},"--"),s("option",{value:"A"},"aaa"),s("option",{value:"B"},"bbb"),s("optgroup",{label:"mygroup"},[s("option",{value:"C"},"ccc"),s("option",{value:"D"},"ddd")])],-1),s("div",{id:"selectA","data-toggle-when":"A",hidden:""},"Hello there, I'm A !",-1),s("div",{id:"selectB","data-toggle-when":"B",hidden:""},"Hello there, I'm B !",-1),s("div",{id:"selectG","data-toggle-when":"mygroup",hidden:""},"Hello there, I'm GROUP for C or D !",-1),s("div",{id:"selectNot","data-toggle-when-not":"A",hidden:""},"Hello there, I'm present if not A !",-1)])]),_:1}),i[13]\|\|(i[13]=t("",5))])}}});export{u as __pageData,B as default};
1	+ import{C as h}from"./chunks/ComponentPreview.Cw4G3qNN.js";import{I as e,o as p,c as E,j as s,a as k,J as a,ai as t,w as l}from"./chunks/framework.26dFs73Q.js";/* empty css */const d={id:"toggle",tabindex:"-1"},u=JSON.parse('{"title":"Toggle","description":"","frontmatter":{},"headers":[],"relativePath":"javascript/toggle.md","filePath":"javascript/toggle.md"}'),g={name:"javascript/toggle.md"},B=Object.assign(g,{setup(r){return(o,i)=>{const n=e("Badge");return p(),E("div",null,[s("h1",d,[i[0]\|\|(i[0]=k("Toggle ",-1)),a(n,{type:"warning",text:"JS"}),i[1]\|\|(i[1]=k()),i[2]\|\|(i[2]=s("a",{class:"header-anchor",href:"#toggle","aria-label":"Permalink to “Toggle”"},"",-1))]),i[8]\|\|(i[8]=t("",4)),a(h,{height:"200px"},{default:l(()=>[...i[3]\|\|(i[3]=[s("button",{id:"toggle",class:"demo-toggle","aria-controls":"collapse","aria-expanded":"false","aria-pressed":"false"},"Toggle",-1),s("div",{id:"collapse",tabindex:"0",hidden:""}," Hello there ! ",-1)])]),_:1}),i[9]\|\|(i[9]=t("",5)),a(h,{height:"200px"},{default:l(()=>[...i[4]\|\|(i[4]=[s("fieldset",null,[s("legend",null,"Toggles"),s("input",{class:"demo-toggle",id:"cA",type:"checkbox","aria-controls":"checkboxA","aria-expanded":"false"}),s("label",{for:"cA"},"Toggle A"),s("input",{class:"demo-toggle",id:"cB",type:"checkbox","aria-controls":"checkboxB","aria-expanded":"false"}),s("label",{for:"cB"},"Toggle B")],-1),s("div",{id:"checkboxA",hidden:""},"Hello there, I'm A !",-1),s("div",{id:"checkboxB",hidden:""},"Hello there, I'm B !",-1)])]),_:1}),i[10]\|\|(i[10]=t("",3)),a(h,{height:"200px"},{default:l(()=>[...i[5]\|\|(i[5]=[s("fieldset",null,[s("legend",null,"Toggles"),s("input",{id:"rA",class:"demo-toggle",type:"radio",name:"radio","aria-controls":"radioA","aria-expanded":"false",value:"a"}),s("label",{for:"rA"},"Toggle A"),s("input",{id:"rB",class:"demo-toggle",type:"radio",name:"radio","aria-controls":"radioB","aria-expanded":"false",value:"b"}),s("label",{for:"rB"},"Toggle B"),s("input",{id:"rC",class:"demo-toggle",type:"radio",name:"radio",value:"c"}),s("label",{for:"rC"},"Toggle C")],-1),s("div",{id:"radioA",hidden:""},"Hello there, I'm A !",-1),s("div",{id:"radioB",hidden:""},"Hello there, I'm B !",-1)])]),_:1}),i[11]\|\|(i[11]=t("",3)),a(h,null,{default:l(()=>[...i[6]\|\|(i[6]=[s("input",{id:"switch",class:"demo-toggle",type:"checkbox",role:"switch","aria-controls":"switchA switchB","aria-expanded":"true"},null,-1),s("label",{for:"switch"},"Switch",-1),s("div",{id:"switchA","data-toggle-when":"true",hidden:""},"This is TRUE",-1),s("div",{id:"switchB","data-toggle-when":"false"},"This is FALSE",-1)])]),_:1}),i[12]\|\|(i[12]=t("",3)),a(h,{height:"200px"},{default:l(()=>[...i[7]\|\|(i[7]=[s("select",{class:"demo-toggle",name:"select","aria-controls":"selectA selectB selectG selectNot","aria-expanded":"false"},[s("option",{value:"null"},"--"),s("option",{value:"A"},"aaa"),s("option",{value:"B"},"bbb"),s("optgroup",{label:"mygroup"},[s("option",{value:"C"},"ccc"),s("option",{value:"D"},"ddd")])],-1),s("div",{id:"selectA","data-toggle-when":"A",hidden:""},"Hello there, I'm A !",-1),s("div",{id:"selectB","data-toggle-when":"B",hidden:""},"Hello there, I'm B !",-1),s("div",{id:"selectG","data-toggle-when":"mygroup",hidden:""},"Hello there, I'm GROUP for C or D !",-1),s("div",{id:"selectNot","data-toggle-when-not":"A",hidden:""},"Hello there, I'm present if not A !",-1)])]),_:1}),i[13]\|\|(i[13]=t("",5))])}}});export{u as __pageData,B as default};

package/public/assets/{javascript_trap.md.Bc59YUng.js → javascript_trap.md.Dt2Rt__e.js} RENAMED Viewed

@@ -1,2 +1,2 @@
-/* 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.CaiDwmc7.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>
+/* 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.Bc59YUng.lean.js → javascript_trap.md.Dt2Rt__e.lean.js} RENAMED Viewed

	@@ -1 +1 @@
1	- /* 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.~~CaiDwmc7~~.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};
1	+ /* 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/{javascript_tree.md.uc1UUsFV.js → javascript_tree.md.COR-Pj1y.js} RENAMED Viewed

@@ -1,4 +1,4 @@
-import{C as l}from"./chunks/ComponentPreview.BW2s4ay5.js";import{I as p,o as e,c as E,j as s,a as n,J as a,ai as t,w as h}from"./chunks/framework.CaiDwmc7.js";/* empty css                                                                                */const d={id:"tree",tabindex:"-1"},u=JSON.parse('{"title":"Tree","description":"","frontmatter":{},"headers":[],"relativePath":"javascript/tree.md","filePath":"javascript/tree.md"}'),r={name:"javascript/tree.md"},b=Object.assign(r,{setup(g){return(y,i)=>{const k=p("Badge");return e(),E("div",null,[s("h1",d,[i[0]||(i[0]=n("Tree ",-1)),a(k,{type:"warning",text:"JS"}),i[1]||(i[1]=n()),i[2]||(i[2]=s("a",{class:"header-anchor",href:"#tree","aria-label":"Permalink to “Tree”"},"",-1))]),i[6]||(i[6]=t('<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;"> Tree </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &quot;@natachah/vanilla-frontend/js/_tree&quot;</span></span></code></pre></div><div class="warning custom-block"><p class="custom-block-title custom-block-title-default">WARNING</p><p>The <code>role=tree</code> and <code>role=treeGrid</code> are not accessible !</p></div><h2 id="syntax" tabindex="-1">Syntax <a class="header-anchor" href="#syntax" aria-label="Permalink to “Syntax”"></a></h2><p>The tree component make you able to make a tree view by adding the <code>role=&quot;tree&quot;</code> attribute on a <code>&lt;ul&gt;</code> or <code>&lt;ol&gt;</code> tag.</p><p>The <code>&lt;li&gt;</code> must have a <code>role=&quot;treeitem&quot;</code>, and if nested the <code>aria-expanded</code> and <code>aria-owns</code> attributes.</p>',5)),a(l,{height:"200px"},{default:h(()=>[...i[3]||(i[3]=[s("ul",{class:"demo-tree"},[s("li",null,"1: Lorem, ipsum"),s("li",null,[s("button",{role:"link","aria-controls":"treelist","aria-expanded":"false"}," 1: Inventore, perspiciatis (Open) "),s("ul",{id:"treelist",tabindex:"0",hidden:""},[s("li",null,"2: Lorem"),s("li",null,[s("button",{role:"link","aria-controls":"subtreelist","aria-expanded":"false"}," 2: Adipisci (Open) "),s("ul",{id:"subtreelist",tabindex:"0",hidden:""},[s("li",null,"3: Lorem"),s("li",null,"3: Adipisci"),s("li",null,"3: Facilis")])]),s("li",null,"1: Facilis")])]),s("li",null,"1: Dolor, quis")],-1)])]),_:1}),i[7]||(i[7]=t(`<div class="vp-code-group"><div class="tabs"><input type="radio" name="group-20" id="tab-21" checked><label data-title="html" for="tab-21">html</label><input type="radio" name="group-20" id="tab-22"><label data-title="js" for="tab-22">js</label></div><div class="blocks"><div class="language-html active"><button title="Copy Code" class="copy"></button><span class="lang">html</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:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">ul</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> class</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;demo-tree&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+import{C as l}from"./chunks/ComponentPreview.Cw4G3qNN.js";import{I as p,o as e,c as E,j as s,a as n,J as a,ai as t,w as h}from"./chunks/framework.26dFs73Q.js";/* empty css                                                                                */const d={id:"tree",tabindex:"-1"},u=JSON.parse('{"title":"Tree","description":"","frontmatter":{},"headers":[],"relativePath":"javascript/tree.md","filePath":"javascript/tree.md"}'),r={name:"javascript/tree.md"},b=Object.assign(r,{setup(g){return(y,i)=>{const k=p("Badge");return e(),E("div",null,[s("h1",d,[i[0]||(i[0]=n("Tree ",-1)),a(k,{type:"warning",text:"JS"}),i[1]||(i[1]=n()),i[2]||(i[2]=s("a",{class:"header-anchor",href:"#tree","aria-label":"Permalink to “Tree”"},"",-1))]),i[6]||(i[6]=t('<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;"> Tree </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &quot;@natachah/vanilla-frontend/js/_tree&quot;</span></span></code></pre></div><div class="warning custom-block"><p class="custom-block-title custom-block-title-default">WARNING</p><p>The <code>role=tree</code> and <code>role=treeGrid</code> are not accessible !</p></div><h2 id="syntax" tabindex="-1">Syntax <a class="header-anchor" href="#syntax" aria-label="Permalink to “Syntax”"></a></h2><p>The tree component make you able to make a tree view by adding the <code>role=&quot;tree&quot;</code> attribute on a <code>&lt;ul&gt;</code> or <code>&lt;ol&gt;</code> tag.</p><p>The <code>&lt;li&gt;</code> must have a <code>role=&quot;treeitem&quot;</code>, and if nested the <code>aria-expanded</code> and <code>aria-owns</code> attributes.</p>',5)),a(l,{height:"200px"},{default:h(()=>[...i[3]||(i[3]=[s("ul",{class:"demo-tree"},[s("li",null,"1: Lorem, ipsum"),s("li",null,[s("button",{role:"link","aria-controls":"treelist","aria-expanded":"false"}," 1: Inventore, perspiciatis (Open) "),s("ul",{id:"treelist",tabindex:"0",hidden:""},[s("li",null,"2: Lorem"),s("li",null,[s("button",{role:"link","aria-controls":"subtreelist","aria-expanded":"false"}," 2: Adipisci (Open) "),s("ul",{id:"subtreelist",tabindex:"0",hidden:""},[s("li",null,"3: Lorem"),s("li",null,"3: Adipisci"),s("li",null,"3: Facilis")])]),s("li",null,"1: Facilis")])]),s("li",null,"1: Dolor, quis")],-1)])]),_:1}),i[7]||(i[7]=t(`<div class="vp-code-group"><div class="tabs"><input type="radio" name="group-20" id="tab-21" checked><label data-title="html" for="tab-21">html</label><input type="radio" name="group-20" id="tab-22"><label data-title="js" for="tab-22">js</label></div><div class="blocks"><div class="language-html active"><button title="Copy Code" class="copy"></button><span class="lang">html</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:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">ul</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> class</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;demo-tree&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
 <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">li</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;1: Lorem, ipsum&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">li</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
 <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">li</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
 <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">        &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">button</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> role</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;link&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> aria-controls</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;treelist&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> aria-expanded</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;false&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>