svelte-headlessui
Version:
HeadlessUI components for Svelte
2 lines • 14.6 kB
JavaScript
import{derived as l,readable as Ft,writable as P}from"svelte/store";function Ue(t){let o;return l(t,(e,r)=>{e!==o&&(o=e,r(e))})}var V=t=>o=>e=>e?o.setAttribute(t,e):o.removeAttribute(t),K=t=>o=>e=>e===void 0?o.removeAttribute(t):o.setAttribute(t,e.toString());var Et=V("aria-activedescendant"),oe=t=>o=>l(t,e=>e.items[e.active]?.id??"").subscribe(Et(o));var De=V("aria-controls"),j=t=>o=>l(t,e=>e.controls).subscribe(De(o));var Lt=K("aria-disabled"),he=t=>o=>l(t,e=>e.items.find(r=>r.id===o.id)?.disabled).subscribe(Lt(o));var Ne=" ",He="Enter";var qe="Escape",Re="Backspace",Ve="ArrowLeft",je="ArrowUp",We="ArrowRight",ze="ArrowDown",_e="Home",Ge="End";var Je="PageUp",Qe="PageDown",Te="Tab";var ke=t=>o=>{o&&requestAnimationFrame(()=>{t.focus({preventScroll:!0})})},Ye=["[contentEditable=true]","[tabindex]","a[href]","area[href]","button:not([disabled])","iframe","input:not([disabled])","select:not([disabled])","textarea:not([disabled])"].join(",");function Xe(t){if(t.key!==Te)return;let o=t.currentTarget,e=t.target;if(!o.contains(e))return;let r=[...o.querySelectorAll(Ye)],n=r[0],s=r[r.length-1];e===n&&t.shiftKey&&(s.focus(),t.preventDefault()),e===s&&!t.shiftKey&&(n.focus(),t.preventDefault())}var At=["textarea","input"].join(",");function gt(t){return t?.matches?.(At)??!1}var Ze=t=>o=>l(t,e=>e.expanded).subscribe(e=>{if(e){let r=o.querySelector(Ye);r&&requestAnimationFrame(()=>{r.focus(),gt(r)&&r.select()}),o.addEventListener("keydown",Xe)}else o.removeEventListener("keydown",Xe)});var N={expanded:!1,opened:!1},Tt=K("aria-expanded"),W=t=>o=>l(t,e=>e.expanded).subscribe(Tt(o)),re=t=>o=>l(t,e=>e.expanded).subscribe(ke(o)),_=t=>o=>l(t,e=>e.opened&&!e.expanded).subscribe(ke(o));var kt=V("aria-label"),S=t=>o=>l(t,e=>e.label).subscribe(kt(o));var ne={selected:null,multi:!1},Ht=K("aria-selected"),Ct=K("aria-multiselectable"),Ee=(t,o)=>e=>l(t,r=>r.multi?r.selected.includes(o):r.selected===o).subscribe(Ht(e)),Ce=t=>o=>l(t,e=>e.multi).subscribe(Ct(o));function b(t,o){let e=o.map(r=>r(t));return()=>e.forEach(r=>r())}var $=(t,o,e,r=!1)=>(t.addEventListener(o,e,r),()=>t.removeEventListener(o,e,r)),Me=t=>{t.isTrusted&&(t.preventDefault(),t.stopPropagation(),t.stopImmediatePropagation())};var Be=t=>{},g=(t,o=Me)=>(...e)=>r=>{t.includes(r.key)&&(e.forEach(n=>n()),o&&o(r))};var q=g([qe]);var Se=g([Te]),$e=g([Te],Be);var ie=()=>({items:[],active:-1});function ae(t){return o=>()=>t(o)}var se=(t,o)=>({items:t.items.filter(e=>e.id!==o.id)}),ee=t=>t.active===-1||t.items.length===0?void 0:t.active>=t.items.length?t.items[t.active]:t.items[t.active]?.value,le=(t,o,...e)=>r=>{let n=r.target.closest(t);o(n),e.forEach(s=>s())},ce=t=>o=>Ue(l(t,e=>e.selected)).subscribe(e=>{let r=new CustomEvent("change",{detail:{selected:e},bubbles:!0});o.dispatchEvent(r)});function pe(t){if(t.active===-1||t.items[t.active].disabled)return{};let o=ee(t);return{selected:t.multi?t.selected.includes(o)?t.selected.filter(r=>r!==o):[...t.selected,o]:o}}function Mt(t,o){let e=t.textContent?.trim()??"";return{text:e,value:o?.value||e,disabled:o?.disabled??!1}}var me=t=>t.items.findIndex(o=>!o.disabled),ve=t=>{let o=t.active===-1?t.items.length:t.active;for(;--o>-1;)if(!t.items[o].disabled)return o;return t.active},et=t=>{if(t.active===-1&&(!t.multi||t.selected.length>0)){let o=t.items.findIndex(e=>e.value===(t.multi?t.selected[t.selected.length-1]:t.selected));if(o>-1)return o}return ve(t)},ye=t=>{let o=t.active;for(;++o<t.items.length;)if(!t.items[o].disabled)return o;return t.active},Ke=t=>{if(t.active===-1&&(!t.multi||t.selected.length>0)){let o=t.items.findIndex(e=>e.value===(t.multi?t.selected[0]:t.selected));if(o>-1)return o}return ye(t)},de=t=>Bt(t.items,o=>!o.disabled);function Bt(t,o){let e=t.length;for(;e--;)if(o(t[e],e,t))return e;return-1}var fe=(t,o,e)=>r=>{let n=o(),s=Mt(t,r),a=n.items.find(p=>p.id===t.id);if(a){if(a.text===s.text&&a.value===s.value&&a.disabled===s.disabled)return;Object.assign(a,s)}else n.items.push({id:t.id,node:t,...s});e({items:n.items})},ue=(t,o)=>e=>{let r=t();o(e?r.items.findIndex(n=>n.id===e.id&&!n.disabled):-1)},we=(t,o,e=!1)=>r=>{let n=t(),s=n.active===-1?n.items:n.items.slice(n.active+1).concat(n.items.slice(0,n.active+1)),a=new RegExp(`${e?"^":""}${r}`,"i"),p=s.findIndex(c=>c.text.match(a)&&!c.disabled);if(p>-1){let c=(p+n.active+1)%n.items.length;o(c)}};var St=0;function wt(){return++St}function v(t,o){t.id=t.id||`${o}:${wt()}`}var T=t=>o=>$(o,"click",t);function G(t,o){return()=>{let e=null;function r(a){if(a.pointerType===""||!e)return;let p=t();p&&!p.some(c=>c?c.contains(e):!1)&&o(a),e=null}function n(a){a.isPrimary&&(e=a.target)}let s=[$(document.documentElement,"pointerdown",n,!0),$(document.documentElement,"click",r,!0)];return()=>s.forEach(a=>a())}}var tt=t=>o=>$(o,"input",e=>{let r=e.target;t(r.value)});function k(...t){let o=e=>{for(let r of t)r(e)};return e=>(e.addEventListener("keydown",o),()=>e.removeEventListener("keydown",o))}function ot(t){return o=>{let e=()=>t();return o.addEventListener("pointerout",e),()=>o.removeEventListener("pointerout",e)}}function Le(t,o){return e=>{let r=n=>{if(n.target!==e){let s=n.target.closest(t);o(s)}};return e.addEventListener("pointermove",r),()=>e.removeEventListener("pointermove",r)}}var w=()=>{};var J=()=>t=>(t.setAttribute("aria-haspopup","true"),w);var h=t=>o=>(o.setAttribute("role",t),w);var E=(t=-1)=>o=>(o.tabIndex=t,w);var I=t=>o=>(o.setAttribute("type",t),w);var Pt=t=>o=>{o&&(t.value=o)},rt=(t,o)=>e=>l(t,r=>r.expanded?null:r.selected).subscribe(r=>Pt(e)(o(r)));import{tick as mt}from"svelte";var M=t=>"headlessui-"+t;var nt=g([He]);var it=g([_e,Je]),at=g([Ge,Qe]);var st=g([Ve]),lt=g([We]);var Ae=g([je]),ge=g([ze]);var be=(t,o,e,r,n="vertical")=>{let s=it(t),a=n==="vertical"?Ae(o):st(o),p=n==="vertical"?ge(e):lt(e),c=at(r);return x=>{s(x),a(x),p(x),c(x)}};var lr=g([Re]),ct=g([Re],Be);var pt=t=>o=>$(o,"change",e=>t(e));function Vr(t){let o=M("combobox"),e={...ie(),...N,...ne,...t,filter:"",moved:!1};e.multi=Array.isArray(e.selected);let r=P(e),n=d=>r.set(e={...e,...d}),s=()=>n({expanded:!0,opened:!0,active:Ke(e)}),a=()=>n({expanded:!1,active:-1}),p=()=>e.expanded?a():s(),c=(d,A=!1)=>{if(e.active!==d){let L=e.expanded||A,B=e.opened||A;n({expanded:L,opened:B,active:d});let R=e.items[d];R&&R.node.scrollIntoView({block:"nearest"})}},x=()=>c(me(e),!0),H=()=>c(et(e),!0),m=()=>c(Ke(e),!0),f=()=>c(de(e),!0),F=()=>{if(e.multi&&e.filter===""){let d=e.selected[e.selected.length-1];n({selected:e.selected.slice(0,e.selected.length-1)}),mt().then(()=>{let A=e.items.findIndex(L=>L.value===d);c(A)})}},z=()=>{n({filter:"",expanded:!1})},Q=()=>e.input?.focus(),X=()=>{e.input&&(e.input.selectionStart=e.input.value.length,e.input.selectionEnd=e.input.value.length,e.input.focus())},xe=async d=>{let A=e.active===-1?e.selected:e.items[e.active].value,L=e.multi||d?e.selected:null;n({filter:d,expanded:!0,opened:!0,selected:L}),await mt();let B=e.items.findIndex(Oe=>Oe.value===e.selected),R=e.items.findIndex(Oe=>Oe.value===A),Fe=e.items.length?e.moved||B===-1?R===-1?0:R:B:-1;e.active!==Fe&&n({active:Fe})},te=ue(()=>e,c),y=d=>n(se(e,d)),O=()=>n(pe(e));function Y(d){return v(d,o),n({input:d}),{destroy:b(d,[I("text"),h("combobox"),E(0),S(r),W(r),j(r),rt(r,L=>L?.name),k(nt(O,e.multi?w:p),q(a),be(x,H,m,f),$e(O,a),ct(F)),tt(xe),pt(Me),T(e.multi?w:p),_(r),ce(r)])}}function i(d){return v(d,o),n({button:d}),{destroy:b(d,[I("button"),h("button"),J(),E(-1),W(r),j(r),T(p),L=>(L.addEventListener("focus",Q),()=>L.removeEventListener("focus",Q))])}}function u(d){return v(d,o),n({controls:d.id}),{destroy:b(d,[h("listbox"),E(-1),G(()=>e.expanded?[e.input,e.button,d]:null,a),T(le('[role="option"]',te,O,e.multi?Q:()=>{a(),X()})),Le('[role="option"]',te),oe(r),Ce(r)])}}function C(d,A){v(d,o);let L=fe(d,()=>e,n);L(A);let B=e.items[e.items.length-1].value,R=b(d,[E(-1),h("option"),he(r),Ee(r,B),ae(y)]);return{update:L,destroy:R}}function U(d,A){return{destroy:b(d,[T(B=>{n({selected:e.selected.filter(R=>R!==A)}),B.stopImmediatePropagation()})])}}let{subscribe:Z}=l(r,d=>{let{expanded:A,selected:L,filter:B}=d;return{expanded:A,selected:L,filter:B,active:ee(d)}});return{subscribe:Z,input:Y,button:i,items:u,item:C,deselect:U,reset:z,open:s,close:a,set:n}}var It=K("aria-modal"),dt=t=>o=>l(t,e=>e.expanded).subscribe(It(o));function Pe(t,o){return()=>{t.dispatchEvent(new Event("close",{bubbles:!0,cancelable:!0}))&&o()}}function cn(t){let o=M("dialog"),e={...N,...t},r=P(e),n=x=>r.set(e={...e,...x}),s=()=>n({expanded:!0,opened:!0}),a=()=>n({expanded:!1});function p(x){v(x,o);let H=Pe(x,a);return{destroy:b(x,[h("dialog"),E(-1),dt(r),S(r),Ze(r),G(()=>e.expanded?[x]:null,H),k(q(H))])}}let{subscribe:c}=l(r,x=>{let{expanded:H}=x;return{expanded:H}});return{subscribe:c,modal:p,open:s,close:a,set:n}}var D=g([Ne,He]);function Bn(t){let o=M("disclosure"),e={...N,...t},r=P(e),n=m=>r.set(e={...e,...m}),s=()=>n({expanded:!0,opened:!0}),a=()=>n({expanded:!1}),p=()=>e.expanded?a():s();function c(m){return v(m,o),n({button:m.id}),{destroy:b(m,[I("button"),h("button"),J(),E(0),W(r),S(r),j(r),T(p),k(q(a),D(p)),_(r)])}}function x(m){return v(m,o),n({panel:m.id,controls:m.id}),{destroy:b(m,[re(r)])}}let{subscribe:H}=l(r,m=>{let{expanded:f}=m;return{expanded:f}});return{subscribe:H,button:c,panel:x,open:s,close:a,set:n}}var ft=t=>/^\S$/.test(t);var Ie=t=>{let o,e="";return r=>{let{key:n}=r;ft(n)&&(o&&clearTimeout(o),e+=n,t(e),o=window.setTimeout(()=>{o=0,e=""},350))}};function ai(t){let o=M("listbox"),e={...ie(),...N,...ne,...t};e.multi=Array.isArray(e.selected);let r=P(e),n=i=>r.set(e={...e,...i}),s=()=>n({expanded:!0,opened:!0,active:e.items.findIndex(i=>i.value===e.selected)}),a=()=>n({expanded:!1}),p=()=>e.expanded?a():s(),c=i=>{if(e.active!==i){n({active:i});let u=e.items[i];u&&u.node.scrollIntoView({block:"nearest"})}},x=()=>c(me(e)),H=()=>c(ve(e)),m=()=>c(ye(e)),f=()=>c(de(e)),F=we(()=>e,c),z=ue(()=>e,c),Q=i=>n(se(e,i)),X=()=>n(pe(e));function xe(i){return v(i,o),n({button:i}),{destroy:b(i,[I("button"),h("button"),J(),E(0),S(r),W(r),j(r),T(p),k(D(p),Ae(p),ge(p)),_(r),ce(r)])}}function te(i){return v(i,o),n({controls:i.id}),{destroy:b(i,[h("listbox"),E(0),G(()=>e.expanded?[e.button,i]:null,a),T(le('[role="option"]',z,X,e.multi?w:a)),Le('[role="option"]',z),k(D(X,e.multi?w:a),q(a),be(x,H,m,f),Se(w),Ie(F)),re(r),oe(r),Ce(r)])}}function y(i,u){v(i,o);let C=fe(i,()=>e,n);C(u);let U=e.items[e.items.length-1].value,Z=b(i,[E(-1),h("option"),he(r),Ee(r,U),ae(Q)]);return{update:C,destroy:Z}}function O(i,u){return{destroy:b(i,[T(U=>{n({selected:e.selected.filter(Z=>Z!==u)}),U.stopImmediatePropagation()})])}}let{subscribe:Y}=l(r,i=>{let{expanded:u,selected:C}=i;return{expanded:u,selected:C,active:ee(i)}});return{subscribe:Y,button:xe,items:te,item:y,deselect:O,open:s,close:a,set:n}}function Di(t){let o=M("menu"),e={...ie(),...N,...ne,...t},r=P(e),n=i=>r.set(e={...e,...i}),s=()=>n({expanded:!0,opened:!0}),a=()=>n({expanded:!1,active:-1,selected:null}),p=()=>e.expanded?a():s(),c=(i,u=!1)=>e.active!==i&&n({expanded:e.expanded||u,active:i}),x=()=>c(me(e),!0),H=()=>c(ve(e),!0),m=()=>c(ye(e),!0),f=()=>c(de(e),!0),F=()=>n(pe(e)),z=()=>c(-1),Q=we(()=>e,c,!0),X=ue(()=>e,c),xe=i=>n(se(e,i));function te(i){return v(i,o),n({button:i}),{destroy:b(i,[I("button"),h("button"),J(),E(0),S(r),W(r),j(r),T(p),k(D(p),Ae(f),ge(x)),_(r),ce(r)])}}function y(i){v(i,o),n({controls:i.id});let u=Pe(i,a);return{destroy:b(i,[h("menu"),E(0),G(()=>e.expanded?[e.button,i]:null,u),T(le('[role="menuitem"]',X,F,u)),Le('[role="menuitem"]',X),ot(z),k(D(F,u),q(u),be(x,H,m,f),Se(w),Ie(Q)),re(r),oe(r)])}}function O(i,u){v(i,o);let C=fe(i,()=>e,n);C(u);let U=b(i,[E(-1),h("menuitem"),he(r),ae(xe)]);return{update:C,destroy:U}}let{subscribe:Y}=l(r,i=>{let{expanded:u}=i;return{expanded:u,active:ee(i)}});return{subscribe:Y,button:te,items:y,item:O,open:s,close:a,set:n}}function $i(t){let o=M("popover"),e={...N,...t},r=P(e),n=m=>r.set(e={...e,...m}),s=()=>n({expanded:!0,opened:!0}),a=()=>n({expanded:!1}),p=()=>e.expanded?a():s();function c(m){return v(m,o),n({button:m}),{destroy:b(m,[I("button"),h("button"),J(),E(0),W(r),S(r),j(r),T(p),k(q(a),D(p)),_(r)])}}function x(m){return v(m,o),n({panel:m.id,controls:m.id}),{destroy:b(m,[G(()=>e.expanded?[e.button,m]:null,a),re(r)])}}let{subscribe:H}=l(r,m=>{let{expanded:f}=m;return{expanded:f}});return{subscribe:H,button:c,panel:x,open:s,close:a,set:n}}var ut={orientation:"horizontal"},Ot=V("aria-orientation"),bt=t=>o=>l(t,e=>e.orientation).subscribe(Ot(o));function ga(t){let o=M("tabs"),e=M("tab"),r=M("panel"),n={tabs:[],panels:[],auto:!0,...ie(),...ne,...ut,...t},s=P(n),a=y=>s.set(n={...n,...y}),p=y=>n.active!==y&&a({active:y}),c=()=>p(me(n)),x=()=>p(ve(n)),H=()=>p(ye(n)),m=()=>p(de(n)),f=()=>a(pe(n)),F=ue(()=>n,p),z=y=>a(se(n,y));function Q(y){v(y,o);let O=i=>()=>l(i,u=>u.auto&&u.active!==n.items.findIndex(C=>C.value===n.selected)).subscribe(f);return{destroy:b(y,[h("tablist"),S(s),bt(s),E(-1),T(le('[role="tab"]',F,f)),k(D(f),be(c,x,H,m,n.orientation)),oe(s),O(s),ce(s)])}}function X(y,O){v(y,e),a({tabs:[...n.tabs,y]}),fe(y,()=>n,a)(O);let i=n.items[n.items.length-1].value;n.selected===i&&a({active:n.tabs.length-1});let u=V("tabindex"),C=A=>L=>l(A,B=>B.selected===i?"0":"-1").subscribe(u(L)),U=A=>L=>l(A,B=>B.panels[B.tabs.findIndex(R=>R===L)]?.id).subscribe(De(L)),Z=A=>L=>l(A,B=>B.selected===i).subscribe(ke(L));return{destroy:b(y,[I("button"),h("tab"),Ee(s,i),C(s),U(s),Z(s)])}}function xe(y){v(y,r),a({panels:[...n.panels,y]});let O=V("aria-labelledby"),Y=u=>C=>l(u,U=>U.tabs[U.panels.findIndex(Z=>Z===C)].id).subscribe(O(C));return{destroy:b(y,[E(0),h("tabpanel"),Y(s),ae(z)])}}let{subscribe:te}=l(s,y=>{let{selected:O}=y;return{selected:O,active:ee(y)}});return{subscribe:te,list:Q,tab:X,panel:xe,set:a}}var xt={checked:!1},Dt=K("aria-checked"),vt=t=>o=>l(t,e=>e.checked).subscribe(Dt(o));var yt={pressed:!1},Rt=K("aria-pressed"),ht=t=>o=>l(t,e=>e.pressed).subscribe(Rt(o));function Wa(t){let o=M("switch"),e={...xt,...yt,...t},r=P(e),n=f=>r.set(e={...e,...f}),s=f=>n({checked:f,pressed:f}),a=()=>s(!0),p=()=>s(!1),c=()=>e.checked?p():a();function x(f){return v(f,o),{destroy:b(f,[I("button"),h("button"),E(0),ht(r),S(r),T(c),k(D(c))])}}function H(f){return v(f,o),{destroy:b(f,[I("button"),h("switch"),E(0),S(r),vt(r),T(c),k(D(c))])}}let{subscribe:m}=l(r,f=>{let{checked:F,pressed:z}=f;return{checked:F,pressed:z}});return{subscribe:m,button:x,toggle:H,set:n}}export{Vr as createCombobox,cn as createDialog,Bn as createDisclosure,ai as createListbox,Di as createMenu,$i as createPopover,Wa as createSwitch,ga as createTabs};
//# sourceMappingURL=index.js.map