@trilogy-ds/vanilla 4.4.0 → 4.4.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/examples/tabs.html +43 -0
- package/lib/trilogy-ds-vanilla.js +4 -9
- package/package.json +1 -1
- package/src/components/tabs.ts +55 -89
|
@@ -0,0 +1,43 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="en">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="UTF-8">
|
|
5
|
+
<title>Tab List with Arrows</title>
|
|
6
|
+
<link rel="stylesheet" href="../../styles/dist/default/trilogy.css" />
|
|
7
|
+
</head>
|
|
8
|
+
<body>
|
|
9
|
+
|
|
10
|
+
<div class="tabs">
|
|
11
|
+
<div data-tablist class="tab-list is-aligned-start is-arrows" id="tablist">
|
|
12
|
+
<span data-arrow-prev class="icon is-medium arrow-prev hidden">←</span>
|
|
13
|
+
<button aria-selected="true" data-tab-navigation="" class="tab is-active" role="tab" data-index="0"><div>Tab 1</div></button>
|
|
14
|
+
<button aria-selected="false" data-tab-navigation="" class="tab" role="tab" data-index="1"><div>Tab 2</div></button>
|
|
15
|
+
<button aria-selected="false" data-tab-navigation="" class="tab" role="tab" data-index="2"><div>Tab 3</div></button>
|
|
16
|
+
<button aria-selected="false" data-tab-navigation="" class="tab" role="tab" data-index="3"><div>Tab 4</div></button>
|
|
17
|
+
<button aria-selected="false" data-tab-navigation="" class="tab" role="tab" data-index="4"><div>Tab 5</div></button>
|
|
18
|
+
<button aria-selected="false" data-tab-navigation="" class="tab" role="tab" data-index="5"><div>Tab 6</div></button>
|
|
19
|
+
<button aria-selected="false" data-tab-navigation="" class="tab" role="tab" data-index="6"><div>Tab 7</div></button>
|
|
20
|
+
<button aria-selected="false" data-tab-navigation="" class="tab" role="tab" data-index="7"><div>Tab 8</div></button>
|
|
21
|
+
<button aria-selected="false" data-tab-navigation="" class="tab" role="tab" data-index="8"><div>Tab 9</div></button>
|
|
22
|
+
<button aria-selected="false" data-tab-navigation="" class="tab" role="tab" data-index="9"><div>Tab 10</div></button>
|
|
23
|
+
<span data-arrow-next class="icon is-medium arrow-next">→</span>
|
|
24
|
+
</div>
|
|
25
|
+
|
|
26
|
+
<div class="tab-panels">
|
|
27
|
+
<div data-tab-panel class="tab-panel is-active" data-index="0"><p>Tab 1 content</p></div>
|
|
28
|
+
<div data-tab-panel class="tab-panel" data-index="1"><p>Tab 2 content</p></div>
|
|
29
|
+
<div data-tab-panel class="tab-panel" data-index="2"><p>Tab 3 content</p></div>
|
|
30
|
+
<div data-tab-panel class="tab-panel" data-index="3"><p>Tab 4 content</p></div>
|
|
31
|
+
<div data-tab-panel class="tab-panel" data-index="4"><p>Tab 5 content</p></div>
|
|
32
|
+
<div data-tab-panel class="tab-panel" data-index="5"><p>Tab 6 content</p></div>
|
|
33
|
+
<div data-tab-panel class="tab-panel" data-index="6"><p>Tab 7 content</p></div>
|
|
34
|
+
<div data-tab-panel class="tab-panel" data-index="7"><p>Tab 8 content</p></div>
|
|
35
|
+
<div data-tab-panel class="tab-panel" data-index="8"><p>Tab 9 content</p></div>
|
|
36
|
+
<div data-tab-panel class="tab-panel" data-index="9"><p>Tab 10 content</p></div>
|
|
37
|
+
</div>
|
|
38
|
+
</div>
|
|
39
|
+
|
|
40
|
+
<script src="../lib/trilogy-ds-vanilla.js"></script>
|
|
41
|
+
|
|
42
|
+
</body>
|
|
43
|
+
</html>
|
|
@@ -1,11 +1,6 @@
|
|
|
1
|
-
(function(
|
|
2
|
-
background-attachment: local, local, scroll, scroll;`,i=`
|
|
3
|
-
.tabs {
|
|
4
|
-
padding-right: 2rem;
|
|
5
|
-
}
|
|
6
|
-
`,l=document.createElement("style");l.innerText=i,c.forEach(e=>{const s=e.clientWidth;let t=e.querySelector(".tabs");if(t||(t=e.querySelector('[data-real-class*="tabs"]')),t.scrollWidth>s&&!t.innerHTML.includes("icon is-small is-absolute")){const u=`<span class="icon is-small is-absolute" style="${a}"><i class="tri-arrow-right" aria-hidden='true'></i></span>`;t.innerHTML+=u,t.appendChild(l)}});let n=document.querySelectorAll("[data-tabs-context]");for(let e=0;e<n.length;e++){let s=n[e],t=s.querySelectorAll("[data-tab-navigation]"),d=s.querySelectorAll("[data-tab-content]");for(let r=0;r<t.length;r++){let f=t[r],g=d[r];f.addEventListener("click",function(){o(f,g)}),f.addEventListener("keyup",p=>{switch(p.preventDefault(),p.keyCode){case 35:o(t[t.length-1],d[t.length-1]);break;case 36:o(t[0],d[0]);break;case 37:let h=(r-1)%t.length;o(t[h],d[h]);break;case 39:let v=(r+1)%t.length;o(t[v],d[v]);break}})}const u=()=>{for(let r=0;r<t.length;r++)t[r].classList.remove("is-active"),t[r].setAttribute("aria-selected","false"),t[r].setAttribute("tabindex","-1");for(let r=0;r<d.length;r++)d[r].classList.remove("is-active"),d[r].setAttribute("aria-expanded","false")},o=(r,f)=>{u(),r.classList.add("is-active"),r.setAttribute("aria-selected","true"),r.setAttribute("tabindex","0"),r.focus(),f.classList.add("is-active"),f.setAttribute("aria-expanded","true")};s.setAttribute("data-tab-initialized","true")}},N=()=>{document.querySelectorAll("[data-autocomplete-context]").forEach(a=>{const i=a.querySelector("[data-autocomplete-input]"),l=a.querySelector("[data-autocomplete-menu]"),n=l.querySelectorAll(".autocomplete-item");let e=-1,s="";const t=()=>{e=-1,document.body.classList.remove("autocomplete-close"),a.classList.remove("is-active"),i.blur(),n.forEach(u=>{u.removeAttribute("data-autocomplete-item-hover")})};l.querySelectorAll(".autocomplete-item").forEach((u,o)=>{u.setAttribute("data-autocomplete-item-index",String(o))}),i.addEventListener("focus",u=>{u.stopPropagation(),a.closest(".is-autocomplete").classList.add("is-active"),document.body.classList.add("autocomplete-close");const o=[];n.forEach(r=>{r.textContent.trim().toLocaleLowerCase().includes(i.value.trim().toLocaleLowerCase())?(r.style.display="block",o.push(r)):r.style.display="none",r.removeAttribute("data-autocomplete-item-index")}),o.forEach((r,f)=>{r.setAttribute("data-autocomplete-item-index",String(f))})}),n.forEach(u=>{u.addEventListener("mousemove",()=>{n.forEach(r=>{r.removeAttribute("data-autocomplete-item-hover")});const o=u.getAttribute("data-autocomplete-item-index");e=Number(o),u.setAttribute("data-autocomplete-item-hover","true"),s=""}),u.addEventListener("mouseout",()=>{u.removeAttribute("data-autocomplete-item-hover")}),u.addEventListener("click",o=>{const r=o.target;i.value=r.textContent,t()})}),i.addEventListener("input",u=>{const o=u.target;e!==-1&&(e=-1);const r=[];n.forEach(f=>{f.textContent.trim().toLocaleLowerCase().includes(o.value.trim().toLocaleLowerCase())?(f.style.display="block",r.push(f)):f.style.display="none",f.removeAttribute("data-autocomplete-item-index"),f.removeAttribute("data-autocomplete-item-hover")}),r.forEach((f,g)=>{f.setAttribute("data-autocomplete-item-index",String(g))})}),i.addEventListener("keydown",u=>{const o=l.querySelectorAll("[data-autocomplete-item-index]");u.key==="ArrowDown"&&(e=e+1,e===o.length&&(e=0)),u.key==="ArrowUp"&&(e=e-1,e<0&&(e=o.length-1)),["ArrowDown","ArrowUp"].includes(u.key)&&(o.forEach(r=>{r.removeAttribute("data-autocomplete-item-hover")}),o[e].setAttribute("data-autocomplete-item-hover","true"),s=o[e].textContent),u.key==="Enter"&&s.trim().length>0&&(i.value=s,t())}),i.addEventListener("blur",()=>{setTimeout(()=>t(),100)}),a.setAttribute("data-autocomplete-initialized","true")})},O=()=>{document.querySelectorAll(".segmented-control-item").forEach(a=>{a.addEventListener("click",function(){this.parentElement.querySelector(".is-active").classList.remove("is-active"),a.classList.contains("is-active")||a.classList.add("is-active")}),a.setAttribute("data-segmentedControl-initialized","true")})},M=()=>{document.querySelectorAll(".textarea-wrapper").forEach(a=>{if(!a.getAttribute("data-textarea-initialized")){const n=a.querySelector("textarea.textarea"),e=n.getAttribute("maxlength");if(e){var l=0;const s=document.createElement("div");s.classList.add("counter"),s.innerHTML=`${l}/${e}`,a.appendChild(s),n.addEventListener("input",function(t){l=this.value.length,s.innerHTML=`${l}/${e}`,l===10&&t.preventDefault()})}a.setAttribute("data-textarea-initialized","true")}})},P=c=>{c.forEach(a=>{a.classList.remove("is-active")})},$=()=>{document.querySelectorAll(".chips-list").forEach(a=>{if(!a.getAttribute("data-chips-initialized")){const l=a.querySelectorAll(".chips"),n=a.classList.contains("is-multiple");l.forEach(e=>{e.classList.contains("is-disabled")||e.addEventListener("click",function(){n||P(l),e.classList.toggle("is-active")})}),a.setAttribute("data-chips-initialized","true")}})},H=c=>{if(!c.getAttribute("data-progress-radial-initialized")){let i=Number(c.getAttribute("data-progress-radial-first-value")),l=Number(c.getAttribute("data-progress-radial-second-value")),n="",e=0,s=0;if(l===0){const t=setInterval(()=>{e!==i?e+=1:clearInterval(t),n=`radial-gradient(white 58%, transparent 51%),
|
|
1
|
+
(function(v){typeof define=="function"&&define.amd?define(v):v()})(function(){"use strict";const v=()=>{let r=document.querySelectorAll("[data-modal-context]");for(let s=0;s<r.length;s++){let e=r[s],a=e.querySelectorAll("[data-modal-open]"),o=e.querySelector("[data-modal]"),u=e.querySelectorAll("[data-modal-close]"),l=e.querySelectorAll('iframe[src*="www.youtube.com"], iframe[src*="player.vimeo.com"], video');for(let d=0;d<a.length;d++){let m=a[d],g=l[d];m.addEventListener("click",function(){if(i(o),g){if(g.tagName.toLowerCase()==="video"){g.play();return}g.src=g.src+(g.src.indexOf("?")<0?"?":"&")+"autoplay=1"}else return})}for(let d=0;d<u.length;d++)u[d].addEventListener("click",function(){c(o)});t(o);const n=e.querySelector(".modal-background");n&&(n.onclick=function(){c(o)}),e.setAttribute("data-modal-initialized","true")}function t(s){document.addEventListener("keyup",function(e){e=e||window.event;var a=!1;"key"in e?a=e.key==="Escape"||e.key==="Esc":a=e.keyCode===27,a&&c(s)}),document.addEventListener("click",function(e){const a=e.target;let o=a.closest("[data-modal-content]"),u=a.classList.contains("modal");o===null&&u==!0&&c(s)})}const i=s=>{s.classList.add("is-active"),document.body.style.overflow="hidden"},c=s=>{let e=s.querySelector('iframe[src*="youtube"], iframe[src*="vimeo"], video');if(e){if(e.tagName.toLowerCase()==="video"){e.pause();return}e.src=e.src.replace("&autoplay=1","").replace("?autoplay=1","")}s.classList.remove("is-active"),document.body.style.overflow=null}},C=()=>{let r=document.querySelectorAll('[data-variant="auto"]');const t=function(i){let c=0,s=i.length,e=0;if(s>0)for(;e<s;)c=(c<<5)-c+i.charCodeAt(e++)|0;return c};for(let i=0;i<r.length;i++){let c=r[i];const s=c.textContent,e=["b","g","o","q"],a=[];if(s.toLowerCase().split("").map((o,u)=>(e.indexOf(o)>-1&&a.push(u),o)),a.length){const o=t(s),u=Math.abs(o%a.length),l=s.charAt(a[u]),n=s.substring(0,a[u]),d=s.substring(a[u]+1);c.innerHTML=`${n}<span class="has-variant">${l}</span>${d}`}c.setAttribute("data-fontVariant-initialized","true")}},k=()=>{document.querySelectorAll("[data-countdown]").forEach(t=>{let a=t,o=new Date(a.dataset.date).getTime(),u=a.querySelector("[data-days]"),l=a.querySelector("[data-hours]"),n=a.querySelector("[data-minutes]"),d=a.querySelector("[data-seconds]"),m=setInterval(()=>{let g=new Date().getTime(),y=0;o-g>0&&(y=o-g),y<=0&&clearInterval(m),u.innerText=Math.floor(y/864e5).toString(),l.innerText=Math.floor(y%864e5/36e5).toString(),n.innerText=Math.floor(y%36e5/6e4).toString(),d.innerText=Math.floor(y%6e4/1e3).toString()},1e3);a.setAttribute("data-countdown-initialized","true")})},z=()=>{let r=document.querySelectorAll("[data-expandable-row]");for(let t=0;t<r.length;t++){let i=r[t];i.querySelector("[data-expandable-trigger]").addEventListener("click",function(){i.classList.toggle("is-expanded")}),i.setAttribute("data-tableexpansion-initialized","true")}},N=()=>{const r=document.querySelector("[data-tablist]"),t=r.querySelectorAll("[data-tab-navigation]"),i=r.querySelector("[data-arrow-prev]"),c=r.querySelector("[data-arrow-next]"),s=()=>{if(!i||!c)return;const a=r.scrollLeft,o=r.scrollWidth,u=r.clientWidth;i.classList.toggle("hidden",a<=0),c.classList.toggle("hidden",o<=a+u)},e=a=>{const o=Array.from(t),u=r.scrollLeft;let l;a===1?l=o.find(n=>n.offsetLeft>u):l=o.slice().reverse().find(n=>n.offsetLeft<u),l?r.scrollTo({left:l.offsetLeft,behavior:"smooth"}):a===-1&&r.scrollTo({left:0,behavior:"smooth"}),s()};i&&i.addEventListener("click",()=>{e(-1)}),c&&c.addEventListener("click",()=>{e(1)}),t.forEach((a,o)=>{a.addEventListener("click",()=>{t.forEach(n=>n.classList.remove("is-active")),a.classList.add("is-active"),document.querySelectorAll("[data-tab-panel]").forEach(n=>n.classList.remove("is-active"));const l=document.querySelector(`[data-tab-panel][data-index="${o}"]`);l&&l.classList.add("is-active")})}),r.addEventListener("scroll",s),window.addEventListener("resize",s),s()},I=()=>{document.querySelectorAll("[data-autocomplete-context]").forEach(t=>{const i=t.querySelector("[data-autocomplete-input]"),c=t.querySelector("[data-autocomplete-menu]"),s=c.querySelectorAll(".autocomplete-item");let e=-1,a="";const o=()=>{e=-1,document.body.classList.remove("autocomplete-close"),t.classList.remove("is-active"),i.blur(),s.forEach(l=>{l.removeAttribute("data-autocomplete-item-hover")})};c.querySelectorAll(".autocomplete-item").forEach((l,n)=>{l.setAttribute("data-autocomplete-item-index",String(n))}),i.addEventListener("focus",l=>{l.stopPropagation(),t.closest(".is-autocomplete").classList.add("is-active"),document.body.classList.add("autocomplete-close");const n=[];s.forEach(d=>{d.textContent.trim().toLocaleLowerCase().includes(i.value.trim().toLocaleLowerCase())?(d.style.display="block",n.push(d)):d.style.display="none",d.removeAttribute("data-autocomplete-item-index")}),n.forEach((d,m)=>{d.setAttribute("data-autocomplete-item-index",String(m))})}),s.forEach(l=>{l.addEventListener("mousemove",()=>{s.forEach(d=>{d.removeAttribute("data-autocomplete-item-hover")});const n=l.getAttribute("data-autocomplete-item-index");e=Number(n),l.setAttribute("data-autocomplete-item-hover","true"),a=""}),l.addEventListener("mouseout",()=>{l.removeAttribute("data-autocomplete-item-hover")}),l.addEventListener("click",n=>{const d=n.target;i.value=d.textContent,o()})}),i.addEventListener("input",l=>{const n=l.target;e!==-1&&(e=-1);const d=[];s.forEach(m=>{m.textContent.trim().toLocaleLowerCase().includes(n.value.trim().toLocaleLowerCase())?(m.style.display="block",d.push(m)):m.style.display="none",m.removeAttribute("data-autocomplete-item-index"),m.removeAttribute("data-autocomplete-item-hover")}),d.forEach((m,g)=>{m.setAttribute("data-autocomplete-item-index",String(g))})}),i.addEventListener("keydown",l=>{const n=c.querySelectorAll("[data-autocomplete-item-index]");l.key==="ArrowDown"&&(e=e+1,e===n.length&&(e=0)),l.key==="ArrowUp"&&(e=e-1,e<0&&(e=n.length-1)),["ArrowDown","ArrowUp"].includes(l.key)&&(n.forEach(d=>{d.removeAttribute("data-autocomplete-item-hover")}),n[e].setAttribute("data-autocomplete-item-hover","true"),a=n[e].textContent),l.key==="Enter"&&a.trim().length>0&&(i.value=a,o())}),i.addEventListener("blur",()=>{setTimeout(()=>o(),100)}),t.setAttribute("data-autocomplete-initialized","true")})},M=()=>{document.querySelectorAll(".segmented-control-item").forEach(t=>{t.addEventListener("click",function(){this.parentElement.querySelector(".is-active").classList.remove("is-active"),t.classList.contains("is-active")||t.classList.add("is-active")}),t.setAttribute("data-segmentedControl-initialized","true")})},O=()=>{document.querySelectorAll(".textarea-wrapper").forEach(t=>{if(!t.getAttribute("data-textarea-initialized")){const s=t.querySelector("textarea.textarea"),e=s.getAttribute("maxlength");if(e){var c=0;const a=document.createElement("div");a.classList.add("counter"),a.innerHTML=`${c}/${e}`,t.appendChild(a),s.addEventListener("input",function(o){c=this.value.length,a.innerHTML=`${c}/${e}`,c===10&&o.preventDefault()})}t.setAttribute("data-textarea-initialized","true")}})},D=r=>{r.forEach(t=>{t.classList.remove("is-active")})},T=()=>{document.querySelectorAll(".chips-list").forEach(t=>{if(!t.getAttribute("data-chips-initialized")){const c=t.querySelectorAll(".chips"),s=t.classList.contains("is-multiple");c.forEach(e=>{e.classList.contains("is-disabled")||e.addEventListener("click",function(){s||D(c),e.classList.toggle("is-active")})}),t.setAttribute("data-chips-initialized","true")}})},H=r=>{if(!r.getAttribute("data-progress-radial-initialized")){let i=Number(r.getAttribute("data-progress-radial-first-value")),c=Number(r.getAttribute("data-progress-radial-second-value")),s="",e=0,a=0;if(c===0){const o=setInterval(()=>{e!==i?e+=1:clearInterval(o),s=`radial-gradient(white 58%, transparent 51%),
|
|
7
2
|
conic-gradient(#0C7B91 0deg ${360*(e/100)}deg,
|
|
8
|
-
gainsboro ${360*(e/100)}deg 360deg)`,
|
|
3
|
+
gainsboro ${360*(e/100)}deg 360deg)`,r.style.background=s},13)}else{c+=i;const o=setInterval(()=>{e<i&&(e+=1),a<c?a+=1:clearInterval(o),s=`radial-gradient(white 58%, transparent 51%),
|
|
9
4
|
conic-gradient(#0C7B91 0deg ${360*(e/100)}deg,
|
|
10
|
-
#25465f ${360*(e/100)}deg ${360*(
|
|
11
|
-
gainsboro ${360*(
|
|
5
|
+
#25465f ${360*(e/100)}deg ${360*(a/100)}deg,
|
|
6
|
+
gainsboro ${360*(a/100)}deg 360deg)`,r.style.background=s},13)}r.setAttribute("data-progress-radial-initialized","true")}},F=r=>{let t=r.querySelector(".range-cursor-min"),i=r.querySelector(".range-cursor-max"),c=r.querySelector(".range-track"),s=r.querySelector(".range-value-min"),e=r.querySelector(".range-value-max"),a=t.max,o=0;const u=()=>{let l=Number(t.value)/Number(a)*100,n=Number(i.value)/Number(a)*100;c.style.background=`linear-gradient(to right, #E1E1E1 ${l}% , #0C7B91 ${l}% , #0C7B91 ${n}%, #E1E1E1 ${n}%) `};u(),t.addEventListener("input",l=>{const n=l.target;Number(n.value)<Number(i.value)-o?t.value=n.value:t.value=String(Number(i.value)-o),s.textContent=n.value,u()}),i.addEventListener("input",l=>{const n=l.target;Number(n.value)>Number(t.value)+o?i.value=n.value:i.value=String(Number(t.value)+o),e.textContent=n.value,u()}),r.setAttribute("data-ranges-initialized","true")},R=(r,t)=>{new IntersectionObserver(c=>{c.forEach(s=>{s.isIntersecting&&t(s.target)})}).observe(r)},$=()=>{const r=document.querySelectorAll("[data-select-name]");r&&r.forEach(t=>{const i=t.querySelector("label");if(!t.classList.contains("select-disabled")){const c=t.parentNode;let s=c.querySelector("[data-is-open-options]");t.addEventListener("click",()=>{const a=s.getAttribute("data-is-open-options");a==="true"&&s.setAttribute("data-is-open-options","false"),a==="false"&&s.setAttribute("data-is-open-options","true")}),t.addEventListener("blur",()=>{s.setAttribute("data-is-open-options","false")});const e=s.querySelectorAll("[data-option-name]");e.forEach(a=>{a.classList.contains("select-options-option-disabled")||a.addEventListener("mousedown",()=>{e.forEach(u=>u.classList.remove("select-options-option-activated")),a.classList.add("select-options-option-activated");let o=t.querySelector("[data-option-selected]");o||(o=document.createElement("span"),o.classList.add("select-value"),(!i||i===null)&&o.classList.add("no-label"),t.appendChild(o)),t.setAttribute("data-option-selected",a.getAttribute("data-option-name")),o.setAttribute("data-option-selected",a.getAttribute("data-option-name")),o.textContent=a.getAttribute("data-option-name"),c.classList.add("has-dynamic-placeholder")})})}t.setAttribute("data-selects-initialized","true")})},V=()=>{const r=document.querySelectorAll("[data-has-gauge]");r&&r.forEach(t=>{var A,x;const i="#007B52",c="#707070",s="#D42D02",e="#FFBB33",a=t.querySelector("input"),o=t.querySelector("[data-gauge]"),u=(A=t.querySelector("[data-length-min]"))==null?void 0:A.getAttribute("data-length-min"),l=(x=t.querySelector("[data-length-max]"))==null?void 0:x.getAttribute("data-length-max"),n={},d={fn:f=>l&&!u?f.length>0&&f.length<=Number(l):u&&!l?f.length>=Number(u):l&&u?f.length>=Number(u)&&f.length<=Number(l):!1,ref:t.querySelector("[data-security-length]")},m={fn:f=>/[^\w\*]/.test(f),ref:t.querySelector("[data-security-special-chars]")},g={fn:f=>/[0-9]/.test(f),ref:t.querySelector("[data-security-number]")},y={fn:f=>/[A-Z]/.test(f),ref:t.querySelector("[data-security-uppercase]")},h={fn:f=>/[a-z]/.test(f),ref:t.querySelector("[data-security-lowercase]")};g.ref&&Object.assign(n,{numberVerify:g}),d.ref&&Object.assign(n,{lengthVerify:d}),h.ref&&Object.assign(n,{lowercaseVerify:h}),y.ref&&Object.assign(n,{uppercaseVerify:y}),m.ref&&Object.assign(n,{specialCharsverify:m}),Object.keys(n).length;const S=f=>{const p=[];return Object.keys(n).map(b=>{const E=n[b].fn(f),L=n[b].ref.querySelector("[data-icon-securities]").querySelector("i");p.push(E),E?(L.classList.remove("tri-times-circle"),L.classList.add("tri-check-circle","is-success")):(L.classList.remove("tri-check-circle","is-success"),L.classList.add("tri-times-circle"))}),p.filter(b=>b).length},w=f=>{const p=Number((f/Object.keys(n).length*100).toFixed(0));p<=50&&p>0?(o.style.width="50%",o.style.backgroundColor=s):p<=99&&p>50?(o.style.width="75%",o.style.backgroundColor=e):p===100?(o.style.width="100%",o.style.backgroundColor=i):(o.style.width="0%",o.style.backgroundColor=c)},q=f=>{const p=f.target.value,b=S(p);w(b)};a.addEventListener("input",q),t.setAttribute("data-gauges-initialized","true")})},B=()=>{const r=document.querySelectorAll("[data-show-pwd]");r&&r.forEach(t=>{const i=e=>{e.classList.contains("tri-eye")?(e.classList.remove("tri-eye"),e.classList.add("tri-eye-slash")):(e.classList.remove("tri-eye-slash"),e.classList.add("tri-eye"))},c=e=>{const a=e.parentNode.parentNode;let o=a.querySelector("input");o||(o=a.parentNode.querySelector("input")),o.type==="password"?o.type="text":o.type="password"},s=e=>{const a=e.target;i(a),c(a)};t.addEventListener("click",s),t.setAttribute("data-iconsShowPwd-initialized","true")})},P=()=>{N(),v(),C(),k(),z(),I(),M(),O(),T(),$(),V(),B()};let j=!1;j||document.addEventListener("DOMContentLoaded",function(){P(),j=!0;const r={attributes:!0,childList:!0,subtree:!0};new MutationObserver(function(i){i.forEach(function(c){const s=c.target;if(s){const e=s.querySelectorAll("[data-modal-context]"),a=s.querySelectorAll(".accordions"),o=s.querySelectorAll(".countdown"),u=s.querySelectorAll("[data-tabs-context]"),l=s.querySelectorAll("[data-autocomplete-context]"),n=s.querySelectorAll('[data-variant="auto"]'),d=s.querySelectorAll(".segmented-control-item"),m=document.querySelectorAll(".textarea"),g=document.querySelectorAll(".progress-radial"),y=document.querySelectorAll(".range-container"),h=document.querySelectorAll(".chips-list"),S=s.querySelectorAll("[data-select-name]"),w=document.querySelectorAll("[data-has-gauge]"),q=document.querySelectorAll("[data-show-pwd]"),A=s.querySelectorAll("[data-expandable-row]");[{modal:e},{accordion:a},{tab:u},{countdown:o},{autocomplete:l},{fontVariant:n},{segmentedControl:d},{textareas:m},{ranges:y},{progressRadials:g},{chips:h},{selects:S},{gauges:w},{iconsShowPwd:q},{tableexpansion:A}].forEach(f=>{const p=Object.keys(f)[0];f[p].length&&f[p].forEach(b=>{if(b.getAttribute(`data-${p}-initialized`)!=="true")switch(b.setAttribute(`data-${p}-initialized`,"true"),p){case"modal":return v();case"tab":return N();case"countdown":return k();case"autocomplete":return I();case"fontVariant":return C();case"segmentedControl":return M();case"textareas":return O();case"chips":return T();case"selects":return $();case"ranges":return F(b);case"progressRadials":return R(b,H);case"gauges":return V();case"iconsShowPwd":return B();case"tableexpansion":return z();default:return P()}})})}})}).observe(document.documentElement,r)})});
|
package/package.json
CHANGED
package/src/components/tabs.ts
CHANGED
|
@@ -1,102 +1,68 @@
|
|
|
1
|
-
export const initTabs = () => {
|
|
2
|
-
const
|
|
1
|
+
export const initTabs = (): void => {
|
|
2
|
+
const tabList = document.querySelector('[data-tablist]') as HTMLDivElement;
|
|
3
|
+
const tabs = tabList.querySelectorAll<HTMLButtonElement>('[data-tab-navigation]');
|
|
4
|
+
const arrowPrev = tabList.querySelector<HTMLSpanElement>('[data-arrow-prev]');
|
|
5
|
+
const arrowNext = tabList.querySelector<HTMLSpanElement>('[data-arrow-next]');
|
|
3
6
|
|
|
4
|
-
const
|
|
5
|
-
|
|
6
|
-
'padding-left: 16px;' +
|
|
7
|
-
'width: 4.5rem !important;' +
|
|
8
|
-
'background: linear-gradient(90deg, rgba(256,256,256, 0) -25%, white 30%);\n' +
|
|
9
|
-
'background-attachment: local, local, scroll, scroll;'
|
|
7
|
+
const updateArrows = (): void => {
|
|
8
|
+
if (!arrowPrev || !arrowNext) return;
|
|
10
9
|
|
|
11
|
-
|
|
12
|
-
.
|
|
13
|
-
|
|
14
|
-
}
|
|
15
|
-
`
|
|
10
|
+
const scrollLeft = tabList.scrollLeft;
|
|
11
|
+
const scrollWidth = tabList.scrollWidth;
|
|
12
|
+
const clientWidth = tabList.clientWidth;
|
|
16
13
|
|
|
17
|
-
|
|
18
|
-
|
|
14
|
+
arrowPrev.classList.toggle('hidden', scrollLeft <= 0);
|
|
15
|
+
arrowNext.classList.toggle('hidden', scrollWidth <= scrollLeft + clientWidth);
|
|
16
|
+
}
|
|
19
17
|
|
|
20
|
-
|
|
21
|
-
const
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
tabs = tabContext.querySelector('[data-real-class*="tabs"]')
|
|
25
|
-
}
|
|
26
|
-
const tabsWidth = tabs.scrollWidth
|
|
18
|
+
const scrollTabsToNext = (direction: 1 | -1): void => {
|
|
19
|
+
const tabsArray = Array.from(tabs);
|
|
20
|
+
const currentScrollLeft = tabList.scrollLeft;
|
|
21
|
+
let targetTab: HTMLButtonElement | undefined;
|
|
27
22
|
|
|
28
|
-
if (
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
tabs.appendChild(styleTabAttr)
|
|
33
|
-
}
|
|
23
|
+
if (direction === 1) {
|
|
24
|
+
targetTab = tabsArray.find(tab => tab.offsetLeft > currentScrollLeft);
|
|
25
|
+
} else {
|
|
26
|
+
targetTab = tabsArray.slice().reverse().find(tab => tab.offsetLeft < currentScrollLeft);
|
|
34
27
|
}
|
|
35
|
-
})
|
|
36
28
|
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
for (let j = 0; j < tabs.length; j++) {
|
|
43
|
-
let tabElement: HTMLElement = tabs[j]
|
|
44
|
-
let tabContent: HTMLElement = tabsContent[j]
|
|
45
|
-
tabElement.addEventListener('click', function () {
|
|
46
|
-
makeTabActive(tabElement, tabContent)
|
|
47
|
-
})
|
|
48
|
-
tabElement.addEventListener('keyup', (e: KeyboardEvent) => {
|
|
49
|
-
e.preventDefault()
|
|
50
|
-
switch (e.keyCode) {
|
|
51
|
-
case 35: // end key
|
|
52
|
-
makeTabActive(tabs[tabs.length - 1], tabsContent[tabs.length - 1])
|
|
53
|
-
break
|
|
54
|
-
case 36: // home key
|
|
55
|
-
makeTabActive(tabs[0], tabsContent[0])
|
|
56
|
-
break
|
|
57
|
-
case 37: // left arrow
|
|
58
|
-
let previous = (j - 1) % tabs.length
|
|
59
|
-
makeTabActive(tabs[previous], tabsContent[previous])
|
|
60
|
-
break
|
|
61
|
-
case 39: // right arrow
|
|
62
|
-
let next = (j + 1) % tabs.length
|
|
63
|
-
makeTabActive(tabs[next], tabsContent[next])
|
|
64
|
-
break
|
|
65
|
-
}
|
|
66
|
-
})
|
|
29
|
+
if (targetTab) {
|
|
30
|
+
tabList.scrollTo({ left: targetTab.offsetLeft, behavior: 'smooth' });
|
|
31
|
+
} else if (direction === -1) {
|
|
32
|
+
// If we're scrolling left and no targetTab found, scroll to the very start
|
|
33
|
+
tabList.scrollTo({ left: 0, behavior: 'smooth' });
|
|
67
34
|
}
|
|
68
35
|
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
*/
|
|
72
|
-
const makeAllTabsInactive = () => {
|
|
73
|
-
for (let i = 0; i < tabs.length; i++) {
|
|
74
|
-
tabs[i].classList.remove('is-active')
|
|
75
|
-
tabs[i].setAttribute('aria-selected', 'false')
|
|
76
|
-
tabs[i].setAttribute('tabindex', '-1')
|
|
77
|
-
}
|
|
78
|
-
|
|
79
|
-
for (let j = 0; j < tabsContent.length; j++) {
|
|
80
|
-
tabsContent[j].classList.remove('is-active')
|
|
81
|
-
tabsContent[j].setAttribute('aria-expanded', 'false')
|
|
82
|
-
}
|
|
83
|
-
}
|
|
36
|
+
updateArrows();
|
|
37
|
+
}
|
|
84
38
|
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
const makeTabActive = (tabElementToMakeActive: HTMLElement, tabContentToMakeActive: HTMLElement) => {
|
|
91
|
-
makeAllTabsInactive()
|
|
92
|
-
tabElementToMakeActive.classList.add('is-active')
|
|
93
|
-
tabElementToMakeActive.setAttribute('aria-selected', 'true')
|
|
94
|
-
tabElementToMakeActive.setAttribute('tabindex', '0')
|
|
95
|
-
tabElementToMakeActive.focus()
|
|
96
|
-
tabContentToMakeActive.classList.add('is-active')
|
|
97
|
-
tabContentToMakeActive.setAttribute('aria-expanded', 'true')
|
|
98
|
-
}
|
|
39
|
+
if (arrowPrev) {
|
|
40
|
+
arrowPrev.addEventListener('click', () => {
|
|
41
|
+
scrollTabsToNext(-1);
|
|
42
|
+
});
|
|
43
|
+
}
|
|
99
44
|
|
|
100
|
-
|
|
45
|
+
if (arrowNext) {
|
|
46
|
+
arrowNext.addEventListener('click', () => {
|
|
47
|
+
scrollTabsToNext(1);
|
|
48
|
+
});
|
|
101
49
|
}
|
|
50
|
+
|
|
51
|
+
tabs.forEach((tab, index) => {
|
|
52
|
+
tab.addEventListener('click', () => {
|
|
53
|
+
tabs.forEach(t => t.classList.remove('is-active'));
|
|
54
|
+
tab.classList.add('is-active');
|
|
55
|
+
|
|
56
|
+
const panels = document.querySelectorAll<HTMLDivElement>('[data-tab-panel]');
|
|
57
|
+
panels.forEach(panel => panel.classList.remove('is-active'));
|
|
58
|
+
const activePanel = document.querySelector<HTMLDivElement>(`[data-tab-panel][data-index="${index}"]`);
|
|
59
|
+
if (activePanel) activePanel.classList.add('is-active');
|
|
60
|
+
});
|
|
61
|
+
});
|
|
62
|
+
|
|
63
|
+
tabList.addEventListener('scroll', updateArrows);
|
|
64
|
+
|
|
65
|
+
window.addEventListener('resize', updateArrows);
|
|
66
|
+
|
|
67
|
+
updateArrows();
|
|
102
68
|
}
|