@natachah/vanilla-frontend 0.4.0 → 1.0.0
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.
- package/.gitlab-ci.yml +22 -13
- package/LICENSE.md +1 -1
- package/docs/.vitepress/config.mts +101 -0
- package/docs/base/layout.md +77 -0
- package/docs/base/media.md +146 -0
- package/docs/base/reset.md +33 -0
- package/docs/base/typography.md +296 -0
- package/docs/classes/badge.md +146 -0
- package/docs/classes/breadcrumb.md +54 -0
- package/docs/classes/card.md +171 -0
- package/docs/classes/dropdown.md +180 -0
- package/docs/classes/grid.md +230 -0
- package/docs/classes/list.md +90 -0
- package/docs/components/button.md +254 -0
- package/docs/components/dialog.md +223 -0
- package/docs/components/disclosure.md +169 -0
- package/docs/components/form.md +514 -0
- package/docs/components/loading.md +53 -0
- package/docs/components/popover.md +270 -0
- package/docs/components/progress.md +33 -0
- package/docs/components/table.md +175 -0
- package/docs/index.md +27 -0
- package/docs/javascript/autofill.md +155 -0
- package/docs/javascript/check.md +53 -0
- package/docs/javascript/comfort.md +125 -0
- package/docs/javascript/consent.md +89 -0
- package/docs/javascript/cookie.md +33 -0
- package/docs/javascript/drawer.md +99 -0
- package/docs/javascript/form.md +130 -0
- package/docs/javascript/scroll.md +104 -0
- package/docs/javascript/slider.md +130 -0
- package/docs/javascript/sortable.md +127 -0
- package/docs/javascript/tabpanel.md +72 -0
- package/docs/javascript/toggle.md +182 -0
- package/docs/javascript/trap.md +33 -0
- package/docs/javascript/tree.md +220 -0
- package/docs/prologue/conventions.md +92 -0
- package/docs/prologue/release.md +44 -0
- package/docs/prologue/upgrade.md +21 -0
- package/docs/{pages/demo/layout.html → public/demo/demo.html} +1 -2
- package/docs/start/customization.md +184 -0
- package/docs/start/install.md +80 -0
- package/docs/start/mixin.md +203 -0
- package/docs/vuejs/ComponentPreview.vue +99 -0
- package/js/_slider.js +17 -1
- package/js/vanilla-frontend-doc.js +105 -0
- package/natachah-vanilla-frontend-1.0.0.tgz +0 -0
- package/package.json +11 -14
- package/public/404.html +22 -0
- package/public/assets/app.DsgDPRSA.js +1 -0
- package/public/assets/base_layout.md.CTGv6rTn.js +13 -0
- package/public/assets/base_layout.md.CTGv6rTn.lean.js +1 -0
- package/public/assets/base_media.md.CcuDUcF-.js +24 -0
- package/public/assets/base_media.md.CcuDUcF-.lean.js +1 -0
- package/public/assets/base_reset.md.DqIdqFRJ.js +3 -0
- package/public/assets/base_reset.md.DqIdqFRJ.lean.js +1 -0
- package/public/assets/base_typography.md.DV-ikqGZ.js +87 -0
- package/public/assets/base_typography.md.DV-ikqGZ.lean.js +1 -0
- package/public/assets/chunks/ComponentPreview.BW2s4ay5.js +27 -0
- package/public/assets/chunks/framework.CaiDwmc7.js +4 -0
- package/public/assets/chunks/theme.DL_11MHV.js +1 -0
- package/public/assets/classes_badge.md.BCGzPr6f.js +24 -0
- package/public/assets/classes_badge.md.BCGzPr6f.lean.js +1 -0
- package/public/assets/classes_breadcrumb.md.vU6jlo36.js +15 -0
- package/public/assets/classes_breadcrumb.md.vU6jlo36.lean.js +1 -0
- package/public/assets/classes_card.md.BZEh2l_B.js +41 -0
- package/public/assets/classes_card.md.BZEh2l_B.lean.js +1 -0
- package/public/assets/classes_dropdown.md.BLVw_xQY.js +70 -0
- package/public/assets/classes_dropdown.md.BLVw_xQY.lean.js +1 -0
- package/public/assets/classes_grid.md.47v-Ybqe.js +45 -0
- package/public/assets/classes_grid.md.47v-Ybqe.lean.js +1 -0
- package/public/assets/classes_list.md.BW9PWZV1.js +36 -0
- package/public/assets/classes_list.md.BW9PWZV1.lean.js +1 -0
- package/public/assets/components_button.md.vx3HzdpN.js +45 -0
- package/public/assets/components_button.md.vx3HzdpN.lean.js +1 -0
- package/public/assets/components_dialog.md.C-0gJGus.js +76 -0
- package/public/assets/components_dialog.md.C-0gJGus.lean.js +1 -0
- package/public/assets/components_disclosure.md.DeSRu9_P.js +53 -0
- package/public/assets/components_disclosure.md.DeSRu9_P.lean.js +1 -0
- package/public/assets/components_form.md.Be8d5WFv.js +122 -0
- package/public/assets/components_form.md.Be8d5WFv.lean.js +1 -0
- package/public/assets/components_loading.md.CKDG7z5x.js +4 -0
- package/public/assets/components_loading.md.CKDG7z5x.lean.js +1 -0
- package/public/assets/components_popover.md.CwgNttNc.js +102 -0
- package/public/assets/components_popover.md.CwgNttNc.lean.js +1 -0
- package/public/assets/components_progress.md.CNC7rJiC.js +6 -0
- package/public/assets/components_progress.md.CNC7rJiC.lean.js +1 -0
- package/public/assets/components_table.md.LyBkIDkF.js +75 -0
- package/public/assets/components_table.md.LyBkIDkF.lean.js +1 -0
- package/public/assets/index.md.CJiHmjB7.js +1 -0
- package/public/assets/index.md.CJiHmjB7.lean.js +1 -0
- package/public/assets/inter-italic-cyrillic-ext.r48I6akx.woff2 +0 -0
- package/public/assets/inter-italic-cyrillic.By2_1cv3.woff2 +0 -0
- package/public/assets/inter-italic-greek-ext.1u6EdAuj.woff2 +0 -0
- package/public/assets/inter-italic-greek.DJ8dCoTZ.woff2 +0 -0
- package/public/assets/inter-italic-latin-ext.CN1xVJS-.woff2 +0 -0
- package/public/assets/inter-italic-latin.C2AdPX0b.woff2 +0 -0
- package/public/assets/inter-italic-vietnamese.BSbpV94h.woff2 +0 -0
- package/public/assets/inter-roman-cyrillic-ext.BBPuwvHQ.woff2 +0 -0
- package/public/assets/inter-roman-cyrillic.C5lxZ8CY.woff2 +0 -0
- package/public/assets/inter-roman-greek-ext.CqjqNYQ-.woff2 +0 -0
- package/public/assets/inter-roman-greek.BBVDIX6e.woff2 +0 -0
- package/public/assets/inter-roman-latin-ext.4ZJIpNVo.woff2 +0 -0
- package/public/assets/inter-roman-latin.Di8DUHzh.woff2 +0 -0
- package/public/assets/inter-roman-vietnamese.BjW4sHH5.woff2 +0 -0
- package/public/assets/javascript_autofill.md.BewVUo4H.js +49 -0
- package/public/assets/javascript_autofill.md.BewVUo4H.lean.js +1 -0
- package/public/assets/javascript_check.md.B6ajE66i.js +13 -0
- package/public/assets/javascript_check.md.B6ajE66i.lean.js +1 -0
- package/public/assets/javascript_comfort.md.BRci3j7V.js +20 -0
- package/public/assets/javascript_comfort.md.BRci3j7V.lean.js +1 -0
- package/public/assets/javascript_consent.md.Bjv8ZDS6.js +29 -0
- package/public/assets/javascript_consent.md.Bjv8ZDS6.lean.js +1 -0
- package/public/assets/javascript_cookie.md.Dlhyk4Ha.js +2 -0
- package/public/assets/javascript_cookie.md.Dlhyk4Ha.lean.js +1 -0
- package/public/assets/javascript_drawer.md.BCJX3fL-.js +32 -0
- package/public/assets/javascript_drawer.md.BCJX3fL-.lean.js +1 -0
- package/public/assets/javascript_form.md.Cwf_gxLI.js +40 -0
- package/public/assets/javascript_form.md.Cwf_gxLI.lean.js +2 -0
- package/public/assets/javascript_scroll.md.BrJijWbF.js +30 -0
- package/public/assets/javascript_scroll.md.BrJijWbF.lean.js +1 -0
- package/public/assets/javascript_slider.md.DDO8wC4u.js +27 -0
- package/public/assets/javascript_slider.md.DDO8wC4u.lean.js +1 -0
- package/public/assets/javascript_sortable.md.BKyem7yw.js +35 -0
- package/public/assets/javascript_sortable.md.BKyem7yw.lean.js +1 -0
- package/public/assets/javascript_tabpanel.md.D9M-_xE0.js +19 -0
- package/public/assets/javascript_tabpanel.md.D9M-_xE0.lean.js +1 -0
- package/public/assets/javascript_toggle.md.C8582WNC.js +46 -0
- package/public/assets/javascript_toggle.md.C8582WNC.lean.js +1 -0
- package/public/assets/javascript_trap.md.Bc59YUng.js +2 -0
- package/public/assets/javascript_trap.md.Bc59YUng.lean.js +1 -0
- package/public/assets/javascript_tree.md.uc1UUsFV.js +72 -0
- package/public/assets/javascript_tree.md.uc1UUsFV.lean.js +1 -0
- package/public/assets/prologue_conventions.md.D8nVwlRS.js +34 -0
- package/public/assets/prologue_conventions.md.D8nVwlRS.lean.js +1 -0
- package/public/assets/prologue_release.md.CG6nuFnt.js +1 -0
- package/public/assets/prologue_release.md.CG6nuFnt.lean.js +1 -0
- package/public/assets/prologue_upgrade.md.CFxokaBG.js +1 -0
- package/public/assets/prologue_upgrade.md.CFxokaBG.lean.js +1 -0
- package/public/assets/start_customization.md.t-ze_NoQ.js +141 -0
- package/public/assets/start_customization.md.t-ze_NoQ.lean.js +1 -0
- package/public/assets/start_install.md.OluH7l11.js +46 -0
- package/public/assets/start_install.md.OluH7l11.lean.js +1 -0
- package/public/assets/start_mixin.md.D76cLRSX.js +85 -0
- package/public/assets/start_mixin.md.D76cLRSX.lean.js +1 -0
- package/public/assets/style.zIeGMibA.css +1 -0
- package/public/base/layout.html +37 -0
- package/public/base/media.html +179 -0
- package/public/base/reset.html +27 -0
- package/public/base/typography.html +320 -0
- package/public/bundles/vanilla-frontend-doc.css +1 -0
- package/public/bundles/vanilla-frontend-doc.js +1 -0
- package/public/bundles/vanilla-frontend.css +1 -0
- package/public/classes/badge.html +205 -0
- package/public/classes/breadcrumb.html +66 -0
- package/public/classes/card.html +222 -0
- package/public/classes/dropdown.html +147 -0
- package/public/classes/grid.html +278 -0
- package/public/classes/list.html +113 -0
- package/public/components/button.html +304 -0
- package/public/components/dialog.html +205 -0
- package/public/components/disclosure.html +130 -0
- package/public/components/form.html +589 -0
- package/public/components/loading.html +107 -0
- package/public/components/popover.html +257 -0
- package/public/components/progress.html +57 -0
- package/public/components/table.html +152 -0
- package/public/demo/demo.html +84 -0
- package/public/hashmap.json +1 -0
- package/public/index.html +25 -0
- package/public/javascript/autofill.html +152 -0
- package/public/javascript/check.html +64 -0
- package/public/javascript/comfort.html +123 -0
- package/public/javascript/consent.html +80 -0
- package/public/javascript/cookie.html +26 -0
- package/public/javascript/drawer.html +83 -0
- package/public/javascript/form.html +117 -0
- package/public/javascript/scroll.html +81 -0
- package/public/javascript/slider.html +78 -0
- package/public/javascript/sortable.html +112 -0
- package/public/javascript/tabpanel.html +70 -0
- package/public/javascript/toggle.html +201 -0
- package/public/javascript/trap.html +26 -0
- package/public/javascript/tree.html +175 -0
- package/public/prologue/conventions.html +58 -0
- package/public/prologue/release.html +25 -0
- package/public/prologue/upgrade.html +25 -0
- package/public/start/customization.html +165 -0
- package/public/start/install.html +70 -0
- package/public/start/mixin.html +109 -0
- package/public/vp-icons.css +0 -0
- package/sandbox/index.html +27 -0
- package/sandbox/js/sandbox-header.js +57 -0
- package/sandbox/js/sandbox-test.js +91 -0
- package/sandbox/pages/base/layout.html +80 -0
- package/sandbox/pages/base/media.html +52 -0
- package/sandbox/pages/base/typography.html +132 -0
- package/sandbox/pages/components/button.html +70 -0
- package/sandbox/pages/components/dialog.html +72 -0
- package/sandbox/pages/components/disclosure.html +77 -0
- package/sandbox/pages/components/form.html +164 -0
- package/sandbox/pages/components/loading.html +32 -0
- package/sandbox/pages/components/popover.html +119 -0
- package/sandbox/pages/components/progress.html +28 -0
- package/sandbox/pages/components/table.html +80 -0
- package/sandbox/pages/customs/badge.html +59 -0
- package/sandbox/pages/customs/breadcrumb.html +34 -0
- package/sandbox/pages/customs/card.html +71 -0
- package/sandbox/pages/customs/dropdown.html +70 -0
- package/sandbox/pages/customs/grid.html +109 -0
- package/sandbox/pages/customs/list.html +43 -0
- package/sandbox/pages/javascript/autofill.html +39 -0
- package/sandbox/pages/javascript/checkall.html +37 -0
- package/sandbox/pages/javascript/comfort.html +41 -0
- package/sandbox/pages/javascript/consent.html +45 -0
- package/sandbox/pages/javascript/form.html +50 -0
- package/sandbox/pages/javascript/scroll.html +44 -0
- package/sandbox/pages/javascript/slider.html +44 -0
- package/sandbox/pages/javascript/sortable.html +56 -0
- package/sandbox/pages/javascript/tabpanel.html +39 -0
- package/sandbox/pages/javascript/toggle.html +72 -0
- package/sandbox/pages/javascript/tree.html +96 -0
- package/sandbox/sandbox.js +26 -0
- package/sandbox/scss/sandbox-header.scss +93 -0
- package/scss/base/_reset.scss +2 -0
- package/scss/components/_badge.scss +2 -1
- package/scss/components/_dropdown.scss +2 -2
- package/scss/components/_group.scss +8 -4
- package/scss/components/_popover.scss +74 -0
- package/scss/components/index.scss +1 -0
- package/scss/themes/_root.scss +3 -0
- package/scss/vanilla-frontend-doc.scss +46 -1
- package/scss/vanilla-frontend-sandbox.scss +34 -0
- package/vite.config.js +30 -0
- package/docs/index.html +0 -36
- package/docs/main-demo.js +0 -2
- package/docs/main.js +0 -34
- package/docs/pages/base/layout.html +0 -131
- package/docs/pages/base/media.html +0 -142
- package/docs/pages/base/reset.html +0 -53
- package/docs/pages/base/typography.html +0 -334
- package/docs/pages/components/button.html +0 -202
- package/docs/pages/components/dialog.html +0 -336
- package/docs/pages/components/disclosure.html +0 -174
- package/docs/pages/components/form.html +0 -427
- package/docs/pages/components/loading.html +0 -58
- package/docs/pages/components/progress.html +0 -47
- package/docs/pages/components/table.html +0 -168
- package/docs/pages/customs/badge.html +0 -150
- package/docs/pages/customs/breadcrumb.html +0 -67
- package/docs/pages/customs/card.html +0 -185
- package/docs/pages/customs/drawer.html +0 -149
- package/docs/pages/customs/dropdown.html +0 -270
- package/docs/pages/customs/grid.html +0 -185
- package/docs/pages/customs/list.html +0 -112
- package/docs/pages/customs/slider.html +0 -273
- package/docs/pages/javascript/autofill.html +0 -170
- package/docs/pages/javascript/checkall.html +0 -59
- package/docs/pages/javascript/comfort.html +0 -146
- package/docs/pages/javascript/consent.html +0 -112
- package/docs/pages/javascript/cookie.html +0 -81
- package/docs/pages/javascript/form.html +0 -199
- package/docs/pages/javascript/scroll.html +0 -209
- package/docs/pages/javascript/sortable.html +0 -167
- package/docs/pages/javascript/tabpanel.html +0 -89
- package/docs/pages/javascript/toggle.html +0 -193
- package/docs/pages/javascript/trap.html +0 -89
- package/docs/pages/javascript/tree.html +0 -256
- package/docs/pages/quick-start/conventions.html +0 -112
- package/docs/pages/quick-start/customization.html +0 -184
- package/docs/pages/quick-start/installation.html +0 -97
- package/docs/pages/quick-start/mixins.html +0 -214
- package/docs/src/js/demo.js +0 -110
- package/docs/src/js/doc-code.js +0 -102
- package/docs/src/js/doc-demo.js +0 -14
- package/docs/src/js/doc-layout.js +0 -117
- package/docs/src/scss/demo.scss +0 -77
- package/docs/src/scss/layout.scss +0 -83
- package/docs/src/scss/style.scss +0 -278
- package/docs/vite.config.mjs +0 -23
- package/esbuild.mjs +0 -25
- package/natachah-vanilla-frontend-0.4.0.tgz +0 -0
- package/vitest.config.js +0 -8
|
@@ -0,0 +1,46 @@
|
|
|
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('<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;"> "@natachah/vanilla-frontend/js/_toggle"</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><button></code>.</p><p>The button must have an <code>aria-controls="IdOfElement"</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;"><</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;">"toggle"</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;">"demo-toggle"</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;">"collapse"</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;">"false"</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;">"false"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">>Toggle</</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">button</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
|
2
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"><</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;">"collapse"</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;">"0"</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> hidden</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
|
3
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> Hello there !</span></span>
|
|
4
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"></</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></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;"> "@natachah/vanilla-frontend/js/_toggle"</span></span>
|
|
5
|
+
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> toggles</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> document.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">querySelectorAll</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'.demo-toggle'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">)</span></span>
|
|
6
|
+
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">if</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> (toggles) toggles.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">forEach</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">toggle</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =></span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> new</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> Toggle</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(toggle))</span></span></code></pre></div></div></div><div class="info custom-block"><p class="custom-block-title custom-block-title-default">INFO</p><p>The <code>aria-controls</code> can have multiple IDs split by a comma.</p></div><h2 id="options" tabindex="-1">Options <a class="header-anchor" href="#options" aria-label="Permalink to “Options”"></a></h2><h3 id="by-checkbox" tabindex="-1">By checkbox <a class="header-anchor" href="#by-checkbox" aria-label="Permalink to “By checkbox”"></a></h3><p>The component also work with some form checkbox.</p>`,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(`<div class="language-html"><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;"><</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fieldset</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
|
7
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> <</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">legend</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">>Toggles</</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">legend</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
|
8
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> <</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">input</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;">"demo-toggle"</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;">"cA"</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;">"checkbox"</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;">"checkboxA"</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;">"false"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
|
9
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> <</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">label</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> for</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"cA"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">>Toggle A</</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">label</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
|
10
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> <</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">input</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;">"demo-toggle"</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;">"cB"</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;">"checkbox"</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;">"checkboxB"</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;">"false"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
|
11
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> <</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">label</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> for</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"cB"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">>Toggle B</</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">label</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
|
12
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"></</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fieldset</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
|
13
|
+
<span class="line"></span>
|
|
14
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"><</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;">"checkboxA"</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> hidden</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">>Hello there, I'm A !</</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
|
15
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"><</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;">"checkboxB"</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> hidden</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">>Hello there, I'm B !</</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span></code></pre></div><h3 id="by-radio" tabindex="-1">By radio <a class="header-anchor" href="#by-radio" aria-label="Permalink to “By radio”"></a></h3><p>The component also work with some form radio.</p>`,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(`<div class="language-html"><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;"><</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fieldset</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
|
16
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> <</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">legend</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">>Toggles</</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">legend</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
|
17
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> <</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;">"rA"</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;">"demo-toggle"</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;">"radio"</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;">"radio"</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;">"radioA"</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;">"false"</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;">"a"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
|
18
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> <</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">label</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> for</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"rA"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">>Toggle A</</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">label</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
|
19
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> <</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;">"rB"</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;">"demo-toggle"</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;">"radio"</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;">"radio"</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;">"radioB"</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;">"false"</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;">"b"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
|
20
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> <</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">label</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> for</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"rB"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">>Toggle B</</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">label</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
|
21
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> <</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;">"rC"</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;">"demo-toggle"</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;">"radio"</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;">"radio"</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;">"c"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
|
22
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> <</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">label</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> for</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"rC"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">>Toggle C</</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">label</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
|
23
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"></</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fieldset</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
|
24
|
+
<span class="line"></span>
|
|
25
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"><</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;">"radioA"</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> hidden</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">>Hello there, I'm A !</</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
|
26
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"><</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;">"radioB"</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> hidden</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">>Hello there, I'm B !</</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span></code></pre></div><h3 id="by-switch" tabindex="-1">By switch <a class="header-anchor" href="#by-switch" aria-label="Permalink to “By switch”"></a></h3><p>It also work with the switch fields. You can tell when display the element via the data-toggle-when="value" attribute.</p>`,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(`<div class="language-html"><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;"><</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;">"switch"</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;">"demo-toggle"</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;">"checkbox"</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;">"switch"</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;">"switchA switchB"</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;">"true"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
|
27
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"><</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">label</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> for</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"switch"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">>Switch</</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">label</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
|
28
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"><</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;">"switchA"</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> data-toggle-when</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"true"</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> hidden</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">>This is TRUE</</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
|
29
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"><</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;">"switchB"</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> data-toggle-when</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"false"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">>This is FALSE</</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span></code></pre></div><h3 id="by-select" tabindex="-1">By select <a class="header-anchor" href="#by-select" aria-label="Permalink to “By select”"></a></h3><p>The component also work with <code><select></code> and it support the <code><optgroup></code>.</p>`,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(`<div class="language-html"><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;"><</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">select</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;">"demo-toggle"</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;">"select"</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;">"selectA selectB selectG selectNot"</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;">"false"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
|
30
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> <</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">option</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;">"null"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">>--</</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">option</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
|
31
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> <</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">option</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;">"A"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">>aaa</</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">option</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
|
32
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> <</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">option</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;">"B"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">>bbb</</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">option</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
|
33
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> <</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">optgroup</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> label</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"mygroup"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
|
34
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> <</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">option</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;">"C"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">>ccc</</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">option</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
|
35
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> <</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">option</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;">"D"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">>ddd</</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">option</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
|
36
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> </</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">optgroup</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
|
37
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"></</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">select</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
|
38
|
+
<span class="line"></span>
|
|
39
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"><</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;">"selectA"</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> data-toggle-when</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"A"</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> hidden</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">>Hello there, I'm A !</</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
|
40
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"><</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;">"selectB"</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> data-toggle-when</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"B"</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> hidden</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">>Hello there, I'm B !</</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
|
41
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"><</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;">"selectG"</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> data-toggle-when</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"mygroup"</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> hidden</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">>Hello there, I'm GROUP for C or D !</</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
|
42
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"><</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;">"selectNot"</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> data-toggle-when-not</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"A"</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> hidden</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">>Hello there, I'm present if not A !</</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span></code></pre></div><h2 id="javascript" tabindex="-1">Javascript <a class="header-anchor" href="#javascript" aria-label="Permalink to “Javascript”"></a></h2><h3 id="events" tabindex="-1">Events <a class="header-anchor" href="#events" aria-label="Permalink to “Events”"></a></h3><table tabindex="0"><thead><tr><th>Event name</th><th>Description</th><th>Value</th></tr></thead><tbody><tr><td>toggle:changed</td><td>This event is fired when the value as been changed</td><td>-</td></tr></tbody></table><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;">const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> myToggle</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</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;">'myToggle'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">)</span></span>
|
|
43
|
+
<span class="line"></span>
|
|
44
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">myToggle.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">addEventListener</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'toggle:changed'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, () </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=></span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
|
|
45
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> console.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">log</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'It has changed !'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">)</span></span>
|
|
46
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">})</span></span></code></pre></div>`,5))])}}});export{u as __pageData,B as default};
|
|
@@ -0,0 +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};
|
|
@@ -0,0 +1,2 @@
|
|
|
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(`<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;"> "@natachah/vanilla-frontend/js/utilities/_trap"</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;"> "@natachah/vanilla-frontend/js/utilities/_trap"</span></span>
|
|
2
|
+
<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;">'drawer'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">), [</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'#backdrop'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'#toggleMenu'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">], [</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'#toggleMenu'</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};
|
|
@@ -0,0 +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};
|
|
@@ -0,0 +1,72 @@
|
|
|
1
|
+
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;"> "@natachah/vanilla-frontend/js/_tree"</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="tree"</code> attribute on a <code><ul></code> or <code><ol></code> tag.</p><p>The <code><li></code> must have a <code>role="treeitem"</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;"><</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;">"demo-tree"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
|
2
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> <</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">li</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">>1: Lorem, ipsum</</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">li</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
|
3
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> <</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">li</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
|
4
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> <</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;">"link"</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;">"treelist"</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;">"false"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
|
5
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> 1: Inventore, perspiciatis (Open)</span></span>
|
|
6
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> </</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">button</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
|
7
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> <</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;">"treelist"</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;">"0"</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> hidden</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
|
8
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> <</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">li</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">>2: Lorem</</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">li</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
|
9
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> <</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">li</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
|
10
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> <</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;">"link"</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;">"subtreelist"</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;">"false"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
|
11
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> 2: Adipisci (Open)</span></span>
|
|
12
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> </</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">button</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
|
13
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> <</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;">"subtreelist"</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;">"0"</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> hidden</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
|
14
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> <</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">li</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">>3: Lorem</</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">li</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
|
15
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> <</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">li</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">>3: Adipisci</</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">li</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
|
16
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> <</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">li</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">>3: Facilis</</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">li</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
|
17
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> </</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">ul</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
|
18
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> </</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">li</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
|
19
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> <</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">li</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">>1: Facilis</</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">li</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
|
20
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> </</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">ul</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
|
21
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> </</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">li</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
|
22
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> <</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">li</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">>1: Dolor, quis</</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">li</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
|
23
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"></</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">ul</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></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;"> Tree </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> "@natachah/vanilla-frontend/js/_tree"</span></span>
|
|
24
|
+
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> trees</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> document.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">querySelectorAll</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'.demo-tree'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">)</span></span>
|
|
25
|
+
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">if</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> (trees) trees.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">forEach</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">tree</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =></span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> new</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> Tree</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(tree))</span></span></code></pre></div></div></div><div class="warning custom-block"><p class="custom-block-title custom-block-title-default">WARNING</p><p>Into a <code><li></code> you must add a <code><button></code> to toggle the children, otherwise it will toggle if you click on any child.</p></div><h2 id="options" tabindex="-1">Options <a class="header-anchor" href="#options" aria-label="Permalink to “Options”"></a></h2><h3 id="table" tabindex="-1">Table <a class="header-anchor" href="#table" aria-label="Permalink to “Table”"></a></h3><p>This can also be implemented on a <code><table></code> but it required the <code>role="treegrid"</code> attribute.</p>`,5)),a(l,{height:"200px"},{default:h(()=>[...i[4]||(i[4]=[s("table",{id:"treeGrid",class:"demo-tree",role:"treegrid"},[s("tbody",null,[s("tr",{"aria-level":"1"},[s("td",null,"1: Lorem, ipsum")]),s("tr",{"aria-level":"1","aria-expanded":"false","aria-controls":"row1 row2 row3"},[s("td",null,"1: Cum, dolorum (open me)")]),s("tr",{id:"row1","aria-level":"2",tabindex:"0",hidden:""},[s("td",null,"2: Lorem")]),s("tr",{id:"row2","aria-level":"2","aria-expanded":"false","aria-controls":"row2-1 row2-2",hidden:""},[s("td",null,"2: Quo (open me)")]),s("tr",{id:"row2-1","aria-level":"3",tabindex:"0",hidden:""},[s("td",null,"2.1: Quo")]),s("tr",{id:"row2-2","aria-level":"3",hidden:""},[s("td",null,"2.2: Quo")]),s("tr",{id:"row3","aria-level":"2",hidden:""},[s("td",null,"2: Odio")]),s("tr",{"aria-level":"1"},[s("td",null,"1: Perspiciatis, tenetur")])])],-1)])]),_:1}),i[8]||(i[8]=t(`<div class="language-html"><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;"><</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">table</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;">"treeGrid"</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;">"demo-tree"</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;">"treegrid"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
|
26
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> <</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">tbody</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
|
27
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> <</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">tr</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> aria-level</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"1"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
|
28
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> <</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">td</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">>1: Lorem, ipsum</</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">td</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
|
29
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> </</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">tr</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
|
30
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> <</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">tr</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> aria-level</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"1"</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;">"false"</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;">"row1 row2 row3"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
|
31
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> <</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">td</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">>1: Cum, dolorum (open me)</</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">td</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
|
32
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> </</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">tr</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
|
33
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> <</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">tr</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;">"row1"</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> aria-level</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"2"</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;">"0"</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> hidden</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
|
34
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> <</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">td</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">>2: Lorem</</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">td</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
|
35
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> </</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">tr</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
|
36
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> <</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">tr</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;">"row2"</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> aria-level</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"2"</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;">"false"</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;">"row2-1 row2-2"</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> hidden</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
|
37
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> <</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">td</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">>2: Quo (open me)</</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">td</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
|
38
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> </</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">tr</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
|
39
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> <</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">tr</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;">"row2-1"</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> aria-level</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"3"</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;">"0"</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> hidden</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
|
40
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> <</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">td</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">>2.1: Quo</</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">td</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
|
41
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> </</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">tr</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
|
42
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> <</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">tr</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;">"row2-2"</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> aria-level</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"3"</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> hidden</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
|
43
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> <</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">td</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">>2.2: Quo</</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">td</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
|
44
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> </</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">tr</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
|
45
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> <</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">tr</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;">"row3"</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> aria-level</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"2"</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> hidden</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
|
46
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> <</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">td</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">>2: Odio</</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">td</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
|
47
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> </</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">tr</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
|
48
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> <</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">tr</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> aria-level</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"1"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
|
49
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> <</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">td</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">>1: Perspiciatis, tenetur</</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">td</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
|
50
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> </</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">tr</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
|
51
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> </</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">tbody</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
|
52
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"></</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">table</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span></code></pre></div><h3 id="handles" tabindex="-1">Handles <a class="header-anchor" href="#handles" aria-label="Permalink to “Handles”"></a></h3><p>You can decide which part of the item toggle the open/close method with the <code>data-handle="tree"</code> attribute</p>`,3)),a(l,{height:"200px"},{default:h(()=>[...i[5]||(i[5]=[s("table",{class:"demo-tree"},[s("tbody",null,[s("tr",{"aria-level":"1","aria-expanded":"false","aria-controls":"rowExpandable"},[s("td",null,[s("span",{"data-handle":"tree"}," (open me) ")]),s("td",null,"1: Cum, dolorum")]),s("tr",{id:"rowExpandable","aria-level":"2",tabindex:"0",hidden:""},[s("td"),s("td",null,"1.1: Lorem")])])],-1)])]),_:1}),i[9]||(i[9]=t(`<div class="language-html"><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;"><</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">table</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;">"demo-tree"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
|
53
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> <</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">tbody</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
|
54
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> <</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">tr</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> aria-level</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"1"</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;">"false"</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;">"rowExpandable"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
|
55
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> <</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">td</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
|
56
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> <</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">span</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> data-handle</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"tree"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
|
57
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> (open me)</span></span>
|
|
58
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> </</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">span</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
|
59
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> </</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">td</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
|
60
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> <</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">td</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">>1: Cum, dolorum</</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">td</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
|
61
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> </</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">tr</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
|
62
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> <</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">tr</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;">"rowExpandable"</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> aria-level</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"2"</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;">"0"</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> hidden</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
|
63
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> <</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">td</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">td</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
|
64
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> <</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">td</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">>1.1: Lorem</</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">td</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
|
65
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> </</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">tr</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
|
66
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> </</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">tbody</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
|
67
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"></</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">table</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span></code></pre></div><p>If there is an <code><svg></code> as handle, the default style will provide an animation.</p><h2 id="javascript" tabindex="-1">Javascript <a class="header-anchor" href="#javascript" aria-label="Permalink to “Javascript”"></a></h2><table tabindex="0"><thead><tr><th>Method</th><th>Description</th></tr></thead><tbody><tr><td>resetEvents()</td><td>This method will reset the items and events</td></tr></tbody></table><h3 id="events" tabindex="-1">Events <a class="header-anchor" href="#events" aria-label="Permalink to “Events”"></a></h3><table tabindex="0"><thead><tr><th>Event name</th><th>Description</th><th>Value</th></tr></thead><tbody><tr><td>tree:changed</td><td>This event is fired when an item is toggled</td><td>isOpen as a boolean</td></tr></tbody></table><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;">const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> myTree</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</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;">'myTree'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">)</span></span>
|
|
68
|
+
<span class="line"></span>
|
|
69
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">myTree.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">addEventListener</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'tree:changed'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, (</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">e</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=></span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
|
|
70
|
+
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> isOpen</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> e.detail.isOpen</span></span>
|
|
71
|
+
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> ...</span></span>
|
|
72
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">})</span></span></code></pre></div>`,7))])}}});export{u as __pageData,b as default};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
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("",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("",5)),a(l,{height:"200px"},{default:h(()=>[...i[4]||(i[4]=[s("table",{id:"treeGrid",class:"demo-tree",role:"treegrid"},[s("tbody",null,[s("tr",{"aria-level":"1"},[s("td",null,"1: Lorem, ipsum")]),s("tr",{"aria-level":"1","aria-expanded":"false","aria-controls":"row1 row2 row3"},[s("td",null,"1: Cum, dolorum (open me)")]),s("tr",{id:"row1","aria-level":"2",tabindex:"0",hidden:""},[s("td",null,"2: Lorem")]),s("tr",{id:"row2","aria-level":"2","aria-expanded":"false","aria-controls":"row2-1 row2-2",hidden:""},[s("td",null,"2: Quo (open me)")]),s("tr",{id:"row2-1","aria-level":"3",tabindex:"0",hidden:""},[s("td",null,"2.1: Quo")]),s("tr",{id:"row2-2","aria-level":"3",hidden:""},[s("td",null,"2.2: Quo")]),s("tr",{id:"row3","aria-level":"2",hidden:""},[s("td",null,"2: Odio")]),s("tr",{"aria-level":"1"},[s("td",null,"1: Perspiciatis, tenetur")])])],-1)])]),_:1}),i[8]||(i[8]=t("",3)),a(l,{height:"200px"},{default:h(()=>[...i[5]||(i[5]=[s("table",{class:"demo-tree"},[s("tbody",null,[s("tr",{"aria-level":"1","aria-expanded":"false","aria-controls":"rowExpandable"},[s("td",null,[s("span",{"data-handle":"tree"}," (open me) ")]),s("td",null,"1: Cum, dolorum")]),s("tr",{id:"rowExpandable","aria-level":"2",tabindex:"0",hidden:""},[s("td"),s("td",null,"1.1: Lorem")])])],-1)])]),_:1}),i[9]||(i[9]=t("",7))])}}});export{u as __pageData,b as default};
|
|
@@ -0,0 +1,34 @@
|
|
|
1
|
+
import{_ as i,o as a,c as n,ai as l}from"./chunks/framework.CaiDwmc7.js";const c=JSON.parse('{"title":"Naming conventions","description":"","frontmatter":{},"headers":[],"relativePath":"prologue/conventions.md","filePath":"prologue/conventions.md"}'),e={name:"prologue/conventions.md"};function t(h,s,p,k,r,d){return a(),n("div",null,[...s[0]||(s[0]=[l(`<h1 id="naming-conventions" tabindex="-1">Naming conventions <a class="header-anchor" href="#naming-conventions" aria-label="Permalink to “Naming conventions”"></a></h1><p>Because all project should have some little rules...</p><h2 id="almost-classless" tabindex="-1">Almost classless <a class="header-anchor" href="#almost-classless" aria-label="Permalink to “Almost classless”"></a></h2><p>The framework try to be classless as much as possible, this are the exeptions:</p><ul><li>.accordion</li><li>.badge</li><li>.breadcrumb</li><li>.card</li><li>.container</li><li>.container-full</li><li>.drawer</li><li>.drawer-button</li><li>.dropdown</li><li>.grid</li><li>.flex-grid</li><li>.slider</li><li>.subgrid</li><li>.group</li><li>.list</li></ul><p>And for variations:</p><ul><li>.outline</li><li>.COLORNAME (e.g.: .primary)</li></ul><div class="warning custom-block"><p class="custom-block-title custom-block-title-default">WARNING</p><p>For good practice avoid as much it's possible classes !</p></div><h2 id="html-css-and-scss" tabindex="-1">HTML, CSS and SCSS <a class="header-anchor" href="#html-css-and-scss" aria-label="Permalink to “HTML, CSS and SCSS”"></a></h2><ul><li>The custom properties and variable must be kebab-case</li><li>Private properties start with an underscore</li><li>The classes must be kebab-case</li><li>The IDs must be camelCase</li><li>Use comment like in <a href="http://sassdoc.com/" target="_blank" rel="noreferrer">SassDoc</a></li></ul><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:#6F42C1;--shiki-dark:#B392F0;">:root</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
|
|
2
|
+
<span class="line"><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;"> --global-property</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">red</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
|
|
3
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</span></span>
|
|
4
|
+
<span class="line"></span>
|
|
5
|
+
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">.my-class</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
|
|
6
|
+
<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> background-color</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">var</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">--global-property</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">)</span></span>
|
|
7
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</span></span>
|
|
8
|
+
<span class="line"></span>
|
|
9
|
+
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">#myId</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
|
|
10
|
+
<span class="line"><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;"> --_private-property</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">green</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
|
|
11
|
+
<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> background-color</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">var</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">--_private-property</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">);</span></span>
|
|
12
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</span></span>
|
|
13
|
+
<span class="line"></span>
|
|
14
|
+
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">/// Description of the mixin</span></span>
|
|
15
|
+
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">///</span></span>
|
|
16
|
+
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">/// @example something(red)</span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> // color: red</span></span>
|
|
17
|
+
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">/// @link http://sassdoc.com/annotations/</span></span>
|
|
18
|
+
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">/// @require {mixin} something</span></span>
|
|
19
|
+
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">/// @param {name} $name - The description</span></span>
|
|
20
|
+
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">/// @access public</span></span>
|
|
21
|
+
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">///</span></span>
|
|
22
|
+
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">@mixin</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> something</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">$name</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">){</span></span>
|
|
23
|
+
<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> color</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">$name</span></span>
|
|
24
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</span></span></code></pre></div><div class="warning custom-block"><p class="custom-block-title custom-block-title-default">WARNING</p><p>Limit the number of <strong>custom properties defined</strong>, using too many of them can impact performance. Avoid unnecessary complexity.</p></div><h2 id="javascript" tabindex="-1">Javascript <a class="header-anchor" href="#javascript" aria-label="Permalink to “Javascript”"></a></h2><ul><li>The variable and method name must be camelCase</li><li>Use comment like in <a href="https://jsdoc.app/" target="_blank" rel="noreferrer">JSDoc</a></li><li>Use single quote</li><li>Avoid semicolon</li></ul><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:#6A737D;--shiki-dark:#6A737D;">/**</span></span>
|
|
25
|
+
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">* Explaination of the method</span></span>
|
|
26
|
+
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">*</span></span>
|
|
27
|
+
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">* </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">@param</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> {number}</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> length</span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> - The length of the rectangle</span></span>
|
|
28
|
+
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">* </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">@param</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> {number}</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> width</span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> - The width of the rectangle</span></span>
|
|
29
|
+
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">* </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">@returns</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> {number}</span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> - The area of the rectangle</span></span>
|
|
30
|
+
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">*/</span></span>
|
|
31
|
+
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">function</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> calculate</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">length</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">width</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) {</span></span>
|
|
32
|
+
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> myVariable</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> 'nothing'</span></span>
|
|
33
|
+
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> return</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> length </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">*</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> height</span></span>
|
|
34
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</span></span></code></pre></div>`,15)])])}const g=i(e,[["render",t]]);export{c as __pageData,g as default};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import{_ as i,o as a,c as n,ai as l}from"./chunks/framework.CaiDwmc7.js";const c=JSON.parse('{"title":"Naming conventions","description":"","frontmatter":{},"headers":[],"relativePath":"prologue/conventions.md","filePath":"prologue/conventions.md"}'),e={name:"prologue/conventions.md"};function t(h,s,p,k,r,d){return a(),n("div",null,[...s[0]||(s[0]=[l("",15)])])}const g=i(e,[["render",t]]);export{c as __pageData,g as default};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import{_ as a,o as t,c as r,ai as o}from"./chunks/framework.CaiDwmc7.js";const g=JSON.parse('{"title":"Release note","description":"","frontmatter":{},"headers":[],"relativePath":"prologue/release.md","filePath":"prologue/release.md"}'),s={name:"prologue/release.md"};function n(i,e,l,h,c,p){return t(),r("div",null,[...e[0]||(e[0]=[o('<h1 id="release-note" tabindex="-1">Release note <a class="header-anchor" href="#release-note" aria-label="Permalink to “Release note”"></a></h1><h2 id="versioning-scheme" tabindex="-1">Versioning Scheme <a class="header-anchor" href="#versioning-scheme" aria-label="Permalink to “Versioning Scheme”"></a></h2><p>The package use a three-part numbering system (e.g., 1.2.3) to track updates. This helps the developers to understand the scope of changes at a glance.</p><h3 id="the-patch-release-0-0-x" tabindex="-1">The "Patch" Release (0.0.X) <a class="header-anchor" href="#the-patch-release-0-0-x" aria-label="Permalink to “The "Patch" Release (0.0.X)”"></a></h3><p>The third digit is reserved for small fixes.</p><ul><li><strong>Purpose:</strong> Bug fixes, security patches, or minor text corrections.</li><li><strong>Impact:</strong> These updates do not change how the site functions and are safe to deploy immediately.</li><li><strong>Example:</strong> Moving from 1.0.1 to 1.0.2.</li></ul><h3 id="the-minor-release-0-x-0" tabindex="-1">The "Minor" Release (0.X.0) <a class="header-anchor" href="#the-minor-release-0-x-0" aria-label="Permalink to “The "Minor" Release (0.X.0)”"></a></h3><p>The second digit represents medium-sized updates.</p><ul><li><strong>Purpose:</strong> Adding new features or making significant modifications to existing ones.</li><li><strong>Impact:</strong> These introduce new functionality but remain backward-compatible (they should not "break" the existing setup !).</li><li><strong>Example:</strong> Moving from 1.1.0 to 1.2.0.</li></ul><h3 id="the-major-release-x-0-0" tabindex="-1">The "Major" Release (X.0.0) <a class="header-anchor" href="#the-major-release-x-0-0" aria-label="Permalink to “The "Major" Release (X.0.0)”"></a></h3><p>The first digit indicates major structural changes.</p><ul><li><strong>Purpose:</strong> Complete redesigns, total code refactoring, or breaking changes that alter how the system works fundamentally.</li><li><strong>Impact:</strong> These are significant milestones and often require thorough testing before deployment.</li><li><strong>Example:</strong> Moving from 1.0.0 to 2.0.0.</li></ul><h2 id="git-branches" tabindex="-1">GIT branches <a class="header-anchor" href="#git-branches" aria-label="Permalink to “GIT branches”"></a></h2><p>The package supports the current version and one previous version. Here the branches naming convention:</p><ul><li><strong>main:</strong> Is the latest version DEV branch</li><li><strong>production:</strong> Is the latest version PROD branch</li><li><strong>support/vx.x.x :</strong> Is the legacy version PROD branches per MAJOR+MINOR release</li><li><strong>hotfix/vx.x.x :</strong> Is the legacy version DEV branches for PATCH release only</li></ul><h2 id="support-policy" tabindex="-1">Support Policy <a class="header-anchor" href="#support-policy" aria-label="Permalink to “Support Policy”"></a></h2><p>The current version of the package is construct with SCSS and vanilla JS !</p><p>Make sure you can use some of the new HTML/CSS/JS into the browser !</p>',18)])])}const d=a(s,[["render",n]]);export{g as __pageData,d as default};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import{_ as a,o as t,c as r,ai as o}from"./chunks/framework.CaiDwmc7.js";const g=JSON.parse('{"title":"Release note","description":"","frontmatter":{},"headers":[],"relativePath":"prologue/release.md","filePath":"prologue/release.md"}'),s={name:"prologue/release.md"};function n(i,e,l,h,c,p){return t(),r("div",null,[...e[0]||(e[0]=[o("",18)])])}const d=a(s,[["render",n]]);export{g as __pageData,d as default};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import{_ as a,o as r,c as o,ai as t}from"./chunks/framework.CaiDwmc7.js";const u=JSON.parse('{"title":"Upgrade Guide","description":"","frontmatter":{},"headers":[],"relativePath":"prologue/upgrade.md","filePath":"prologue/upgrade.md"}'),i={name:"prologue/upgrade.md"};function d(l,e,n,p,s,c){return r(),o("div",null,[...e[0]||(e[0]=[t('<h1 id="upgrade-guide" tabindex="-1">Upgrade Guide <a class="header-anchor" href="#upgrade-guide" aria-label="Permalink to “Upgrade Guide”"></a></h1><h2 id="_0-4-0-to-1-0-0" tabindex="-1">0.4.0 to 1.0.0 <a class="header-anchor" href="#_0-4-0-to-1-0-0" aria-label="Permalink to “0.4.0 to 1.0.0”"></a></h2><p>These update includes some changes as:</p><ul><li><a href="#doc">Doc</a></li><li><a href="#popover">Popover</a></li><li><a href="#slider">Slider</a></li></ul><h3 id="doc" tabindex="-1">Doc <a class="header-anchor" href="#doc" aria-label="Permalink to “Doc”"></a></h3><p>The most important change is the Documentation ! Now it is in Vitepress, and you have access to. a Sandbox via <code>npm run sandbox</code> to play with the code and test it.</p><h3 id="popover" tabindex="-1">Popover <a class="header-anchor" href="#popover" aria-label="Permalink to “Popover”"></a></h3><p>There is the new Popover component, and it will replace the current Dropdown. But be carefull because not all browser support it yet 😃</p><h3 id="slider" tabindex="-1">Slider <a class="header-anchor" href="#slider" aria-label="Permalink to “Slider”"></a></h3><p>The slider has the ability to have a play and a pause button for more accessibility.</p>',10)])])}const _=a(i,[["render",d]]);export{u as __pageData,_ as default};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import{_ as a,o as r,c as o,ai as t}from"./chunks/framework.CaiDwmc7.js";const u=JSON.parse('{"title":"Upgrade Guide","description":"","frontmatter":{},"headers":[],"relativePath":"prologue/upgrade.md","filePath":"prologue/upgrade.md"}'),i={name:"prologue/upgrade.md"};function d(l,e,n,p,s,c){return r(),o("div",null,[...e[0]||(e[0]=[t("",10)])])}const _=a(i,[["render",d]]);export{u as __pageData,_ as default};
|