drab 5.3.6 → 5.4.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/README.md +3 -3
- package/define.iife.js +2 -2
- package/dialog/define.iife.js +1 -1
- package/dialog/index.d.ts +7 -0
- package/dialog/index.iife.js +1 -1
- package/dialog/index.js +15 -0
- package/index.iife.js +1 -1
- package/package.json +11 -11
package/README.md
CHANGED
|
@@ -17,7 +17,7 @@
|
|
|
17
17
|
|
|
18
18
|
### Write JavaScript, or don't
|
|
19
19
|
|
|
20
|
-
- Elements can be installed as a package (recommended), or utilized without writing any JavaScript by adding a `script` tag to your document.
|
|
20
|
+
- Elements can be [installed](http://drab.robino.dev/getting-started/#install) as a package (recommended), or utilized without writing any JavaScript by adding a `script` tag to your document.
|
|
21
21
|
- Each element can be configured through HTML attributes, making it possible to use an alternative language for your backend.
|
|
22
22
|
|
|
23
23
|
### Built in animations
|
|
@@ -34,7 +34,7 @@ Since this is an headless library, simple elements like a badge that can be easi
|
|
|
34
34
|
|
|
35
35
|
### Local Development
|
|
36
36
|
|
|
37
|
-
This library is built with [Vite](https://vitejs.dev), [domco](https://domco.robino.dev), and
|
|
37
|
+
This library is built with [TypeScript](https://www.typescriptlang.org/) and [tsup](https://tsup.egoist.dev/). The docs are built with [Vite](https://vitejs.dev), [domco](https://domco.robino.dev), and [TailwindCSS](https://tailwindcss.com). The package contents are located in `src/package`.
|
|
38
38
|
|
|
39
39
|
1. Clone the [repository](https://github.com/rossrobino/drab)
|
|
40
40
|
2. `bun i`
|
|
@@ -46,4 +46,4 @@ This library is built with [Vite](https://vitejs.dev), [domco](https://domco.rob
|
|
|
46
46
|
2. Add or edit the example in `src/docs`.
|
|
47
47
|
3. Export the element from `src/package/index.ts`.
|
|
48
48
|
4. Run `bun doc` to document your element with [TypeDoc](https://typedoc.org/).
|
|
49
|
-
5. Add the element as an entry point to `tsup.config.ts`, then run `bun package` to build with
|
|
49
|
+
5. Add the element as an entry point to `tsup.config.ts`, then run `bun package` to build with tsup.
|
package/define.iife.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
"use strict";(()=>{var W=Object.defineProperty;var I=(o,t)=>{for(var e in t)W(o,e,{get:t[e],enumerable:!0})};var H={};I(H,{Animate:()=>p,Base:()=>c,Breakpoint:()=>d,ContextMenu:()=>g,Copy:()=>b,Details:()=>y,Dialog:()=>A,Editor:()=>
|
|
1
|
+
"use strict";(()=>{var W=Object.defineProperty;var I=(o,t)=>{for(var e in t)W(o,e,{get:t[e],enumerable:!0})};var H={};I(H,{Animate:()=>p,Base:()=>c,Breakpoint:()=>d,ContextMenu:()=>g,Copy:()=>b,Details:()=>y,Dialog:()=>A,Editor:()=>v,Fullscreen:()=>x,Intersect:()=>w,Popover:()=>E,Prefetch:()=>T,Share:()=>L,TableSort:()=>C,WakeLock:()=>M,YouTube:()=>S});var c=class extends HTMLElement{#t=new AbortController;constructor(){super()}get event(){return this.getAttribute("event")??"click"}set event(t){this.setAttribute("event",t)}getTrigger(){return this.querySelectorAll(this.getAttribute("trigger")??"[data-trigger]")}getContent(t=HTMLElement){let e=this.querySelector(this.getAttribute("content")??"[data-content]");if(e instanceof t)return e;throw new Error("Content not found")}swapContent(t=!0,e=800){let i=this.querySelector(this.getAttribute("swap")??"[data-swap]");if(i){let s=Array.from(this.getContent().childNodes),r=[];i instanceof HTMLTemplateElement?(r.push(i.content.cloneNode(!0)),i.content.replaceChildren(...s)):(r.push(...i.childNodes),i.replaceChildren(...s)),this.getContent().replaceChildren(...r),t&&setTimeout(()=>this.swapContent(!1),e)}}safeListener(t,e,i=document.body,s={}){s.signal=this.#t.signal,i.addEventListener(t,e,s)}triggerListener(t,e=this.event,i){for(let s of this.getTrigger())s.addEventListener(e,t,i)}mount(){}connectedCallback(){queueMicrotask(()=>this.mount())}destroy(){}disconnectedCallback(){this.destroy(),this.#t.abort()}};var p=class extends c{constructor(){super()}get animationOptions(){let t={};for(let e of this.getAttributeNames())if(e.startsWith("animation-option-")){let i=this.getAttribute(e),[,,s]=e.split("-");i&&(s==="duration"||s==="delay"?t[s]=Number(i):s==="easing"&&(t[s]=i))}return t}async animateElement(t={element:this.getContent(),options:{}}){let{element:e=this.getContent(),options:i={}}=t,s=this.keyframes;if(s.length&&!window.matchMedia("(prefers-reduced-motion: reduce)").matches){i=Object.assign(this.animationOptions,i),i.duration||(i.duration=200),i.easing||(i.easing="ease-in-out");let r=s.at(0),n=s.at(-1);if(r&&n){let u=["composite","easing","offset"];for(let l of u)delete r[l],delete n[l]}i.direction?.includes("reverse")&&([r,n]=[n,r]),Object.assign(e.style,r),await e.animate(s,i).finished,Object.assign(e.style,n)}}get keyframes(){let t=[];for(let e of this.getAttributeNames()){let i=this.getAttribute(e),[,,s,...r]=e.split("-");if(e.startsWith("animation-keyframe-")){let n=r.map((a,u)=>u<1?a:a.at(0)?.toUpperCase()+a.slice(1)).join("");if(s&&n){s==="from"?s="0":s==="to"?s="1":s=String(parseInt(s)*.01);let a=Number(s),u=t.find(l=>l.offset===a);u?u[n]=i:t.push({[n]:i,offset:a})}}}return t.sort((e,i)=>Number(e.offset)-Number(i.offset)),t}};var d=class extends c{breakpoints=[{name:"sm",width:640},{name:"md",width:768},{name:"lg",width:1024},{name:"xl",width:1280},{name:"2xl",width:1536}];constructor(){super();let t=[];for(let e of this.getAttributeNames())if(e.startsWith("breakpoint-")){let[,...i]=e.split("-");i&&t.push({name:i.join("-"),width:Number(this.getAttribute(e))})}t.length&&(this.breakpoints=t),this.breakpoints.sort((e,i)=>i.width-e.width)}get breakpoint(){for(let t=0;t<this.breakpoints.length;t++){let e=this.breakpoints[t];if(e&&window.innerWidth>e.width)return e.name}return"none"}mount(){let t=()=>this.getContent().innerHTML=`${this.breakpoint}:${window.innerWidth}`;t(),this.safeListener("resize",t,window)}};var g=class extends p{#t;constructor(){super()}set#s(t){this.getContent().style.left=`${t.x}px`,this.getContent().style.top=`${t.y}px`}async show(t){let e=window.scrollY,i=window.scrollX,s=t instanceof MouseEvent?t.clientX:t.touches[0]?.clientX??0,r=t instanceof MouseEvent?t.clientY:t.touches[0]?.clientY??0,n=s+i,a=r+e;this.getContent().style.position="absolute",this.getContent().style.display="block";let u=this.getContent().offsetWidth+24,l=this.getContent().offsetHeight+6,h=window.innerWidth,m=window.innerHeight;n+u>i+h&&(n=i+h-u),a+l>e+m&&(a=e+m-l),this.#s={x:n,y:a},await this.animateElement()}async hide(){this.getContent().style.display!=="none"&&(await this.animateElement({options:{direction:"reverse"}}),this.getContent().style.display="none")}mount(){this.triggerListener(e=>{e.preventDefault(),this.show(e)},"contextmenu"),this.safeListener("click",()=>this.hide()),this.triggerListener(e=>{this.#t=setTimeout(()=>{this.show(e)},800)},"touchstart",{passive:!0});let t=()=>clearTimeout(this.#t);this.triggerListener(t,"touchend",{passive:!0}),this.triggerListener(t,"touchcancel",{passive:!0}),this.safeListener("keydown",e=>{e.key==="Escape"&&this.hide()})}};var f=class extends c{constructor(){super()}get value(){return this.getAttribute("value")??""}set value(t){this.setAttribute("value",t)}async copy(t=this.value){await navigator.clipboard.writeText(t),this.swapContent()}};var b=class extends f{constructor(){super()}mount(){this.triggerListener(async()=>await this.copy())}};var y=class extends p{constructor(){super()}get details(){let t=this.getContent(HTMLElement).parentElement;if(!(t instanceof HTMLDetailsElement))throw new Error("Details: HTMLDetailsElement not found.");return t}async open(){this.details.open=!0,await this.animateElement()}async close(){await this.animateElement({options:{direction:"reverse"}}),this.details.open=!1}toggle(){this.details.open?this.close():this.open()}mount(){this.triggerListener(t=>{t.preventDefault(),this.toggle()})}};var A=class extends p{constructor(){super()}get dialog(){return this.getContent(HTMLDialogElement)}get#t(){return this.hasAttribute("remove-body-scroll")}async show(){this.dialog.showModal(),this.#t&&(document.body.style.overflow="hidden"),await this.animateElement()}async close(){await this.animateElement({options:{direction:"reverse"}}),this.#t&&(document.body.style.overflow=""),this.dialog.close()}async toggle(){this.dialog.open?this.close():this.show()}mount(){this.triggerListener(()=>this.toggle()),this.safeListener("keydown",t=>{t.key==="Escape"&&this.dialog.open&&(t.preventDefault(),this.close())}),this.hasAttribute("click-outside-close")&&this.dialog.addEventListener("click",t=>{let e=this.dialog.getBoundingClientRect();(t.clientX<e.left||t.clientX>e.right||t.clientY<e.top||t.clientY>e.bottom)&&this.close()})}};var v=class extends c{#t=[];keyPairs={"(":")","{":"}","[":"]","<":">",'"':'"',"`":"`"};constructor(){super();for(let t of this.#s)t.type==="wrap"&&(this.keyPairs[t.value]=t.value)}get textArea(){return this.getContent(HTMLTextAreaElement)}get text(){return this.textArea.value}set text(t){this.textArea.value=t}get#s(){let t=[];for(let e of this.getTrigger())t.push(this.#l(e));return t}get#n(){let t=this.text.split("```"),e=0;for(let[i,s]of t.entries())if(e+=s.length+3,this.#i<e)return i;return 0}get#e(){return this.textArea.selectionEnd}get#i(){return this.textArea.selectionStart}#r(t,e){this.textArea.setSelectionRange(t,e)}#l(t){let e=t.dataset.type,i=t.dataset.value,s=t.dataset.key??void 0;return{type:e,value:i,key:s}}async#c(t,e,i){if(t.type==="inline")this.text=`${this.text.slice(0,i)}${t.value}${this.text.slice(i)}`;else if(t.type==="wrap")this.text=B(this.text,t.value,e),this.text=B(this.text,this.keyPairs[t.value],i+t.value.length),t.value.length<2&&this.#t.push(t.value);else if(t.type==="block"){let{lines:s,lineNumber:r}=this.#a(),n=t.value.at(0);n&&s[r]?.startsWith(n)?s[r]=t.value.trim()+s[r]:s[r]=t.value+s[r],this.text=s.join(`
|
|
2
2
|
`)}}async#h(t,e,i){let s=0,r=0;if(/[a-z]/i.test(t)){for(let n=i;n<this.text.length;n++)if(this.text[n]?.match(/[a-z]/i))s?r=n+1:s=n;else if(s)break}else s=e+t.length,r=i+t.length;this.#r(s,r),this.textArea.focus()}async#o(t){let e=this.#e,i=this.#i;await this.#c(t,i,e),this.#h(t.value,i,e)}#p(t){if(t){let e=[];this.#s.forEach(s=>{s.type==="block"&&e.push(s.value)});for(let s=0;s<e.length;s++){let r=e[s];if(r&&t.startsWith(r))return r}let i=P(t);if(i)return`${i}. `}return""}#a(){let t=this.text.split(`
|
|
3
3
|
`),e=0;for(let i=0;i<t.length;i++){let s=t.at(i)?.length??0;if(e++,e+=s,e>this.#e)return{lines:t,lineNumber:i,columnNumber:this.#e-(e-s-1)}}return{lines:t,lineNumber:0,columnNumber:0}}#u(t,e=!1){let{lines:i}=this.#a();for(let s=t+1;s<i.length;s++){let r=i[s];if(r){let n=P(r);if(n){let a;if(e)if(n>1)a=n-1;else break;else a=n+1;i[s]=r.slice(String(n).length),i[s]=String(a)+i[s]}else break}}this.text=i.join(`
|
|
4
4
|
`)}mount(){this.textArea.addEventListener("keydown",async t=>{let e=["ArrowUp","ArrowDown","Delete"],i=this.text[this.#e]??"";if(e.includes(t.key))this.#t=[];else if(t.key==="Backspace"){let s=this.text[this.#i-1];if(s&&s in this.keyPairs&&i===this.keyPairs[s]){t.preventDefault();let r=this.#i-1,n=this.#e-1;this.text=k(this.text,r),this.text=k(this.text,n),setTimeout(()=>{this.#r(r,n)},0),this.#t.pop()}if(s===`
|
|
@@ -6,4 +6,4 @@
|
|
|
6
6
|
${u}`});else if(u&&l.length===n){t.preventDefault();let m=this.#e,N=m-l.length;for(let D=0;D<l.length;D++)this.text=k(this.text,m-(D+1));setTimeout(async()=>{this.#r(N,N),this.textArea.focus(),await this.#o({type:"inline",value:`
|
|
7
7
|
`})},0)}}else{let s=Object.values(this.keyPairs).includes(i),r=this.#i!==this.#e;if((t.ctrlKey||t.metaKey)&&this.#i===this.#e&&(t.key==="c"||t.key==="x")){t.preventDefault();let{lines:n,lineNumber:a,columnNumber:u}=this.#a();if(await navigator.clipboard.writeText(`${a===0&&t.key==="x"?"":`
|
|
8
8
|
`}${n[a]}`),t.key==="x"){let l=this.#i-u;n.splice(a,1),this.text=n.join(`
|
|
9
|
-
`),setTimeout(()=>{this.#r(l,l)},0)}}if((t.ctrlKey||t.metaKey)&&t.key){let n=this.#s.find(a=>a.key===t.key);n&&this.#o(n)}else s&&(i===t.key||t.key==="ArrowRight")&&this.#t.length&&!r?(t.preventDefault(),this.#r(this.#i+1,this.#e+1),this.#t.pop()):t.key in this.keyPairs&&(t.preventDefault(),await this.#o({type:"wrap",value:t.key}),this.#t.push(t.key))}}),this.textArea.addEventListener("dblclick",()=>{this.#i!==this.#e&&(this.text[this.#i]===" "&&this.#r(this.#i+1,this.#e),this.text[this.#e-1]===" "&&this.#r(this.#i,this.#e-1))}),this.textArea.addEventListener("click",()=>this.#t=[]);for(let t of this.getTrigger())t.addEventListener(this.event,()=>{this.#o(this.#l(t))})}},P=o=>{let t=o.match(/^(\d+)\./);return t?Number(t[1]):null},B=(o,t,e)=>o.slice(0,e)+t+o.slice(e),k=(o,t)=>o.slice(0,t)+o.slice(t+1);var
|
|
9
|
+
`),setTimeout(()=>{this.#r(l,l)},0)}}if((t.ctrlKey||t.metaKey)&&t.key){let n=this.#s.find(a=>a.key===t.key);n&&this.#o(n)}else s&&(i===t.key||t.key==="ArrowRight")&&this.#t.length&&!r?(t.preventDefault(),this.#r(this.#i+1,this.#e+1),this.#t.pop()):t.key in this.keyPairs&&(t.preventDefault(),await this.#o({type:"wrap",value:t.key}),this.#t.push(t.key))}}),this.textArea.addEventListener("dblclick",()=>{this.#i!==this.#e&&(this.text[this.#i]===" "&&this.#r(this.#i+1,this.#e),this.text[this.#e-1]===" "&&this.#r(this.#i,this.#e-1))}),this.textArea.addEventListener("click",()=>this.#t=[]);for(let t of this.getTrigger())t.addEventListener(this.event,()=>{this.#o(this.#l(t))})}},P=o=>{let t=o.match(/^(\d+)\./);return t?Number(t[1]):null},B=(o,t,e)=>o.slice(0,e)+t+o.slice(e),k=(o,t)=>o.slice(0,t)+o.slice(t+1);var x=class extends c{constructor(){super()}isFullscreen(){return document.fullscreenElement!==null}fullscreenSupported(){return!!document.documentElement.requestFullscreen}toggle(){if(this.isFullscreen())document.exitFullscreen();else try{this.getContent(HTMLElement).requestFullscreen()}catch{document.documentElement.requestFullscreen()}}mount(){this.triggerListener(()=>this.toggle());for(let t of this.getTrigger())!this.fullscreenSupported()&&"disabled"in t&&(t.disabled=!0)}};var w=class extends c{#t=[];#s=[];constructor(){super()}get#n(){return Number(this.getAttribute("threshold")??0)}onIntersect(t){this.#t.push(t)}onExit(t){this.#s.push(t)}mount(){let t=new IntersectionObserver(e=>{let i="data-intersect";for(let s of e)if(s.isIntersecting){this.getContent().setAttribute(i,"");for(let r of this.#t)r()}else{this.getContent().removeAttribute(i);for(let r of this.#s)r()}},{threshold:this.#n});for(let e of this.getTrigger())t.observe(e)}};var E=class extends p{constructor(){super()}get open(){return this.hasAttribute("open")}set open(t){t?this.setAttribute("open",""):this.removeAttribute("open")}async show(){this.getContent().showPopover(),await this.animateElement()}async hide(){await this.animateElement({options:{direction:"reverse"}}),this.getContent().hidePopover()}async toggle(){this.open?this.hide():this.show()}mount(){this.triggerListener(t=>{t.preventDefault(),this.toggle()}),this.getContent().addEventListener("toggle",t=>{t.newState==="open"?this.open=!0:this.open=!1}),this.safeListener("keydown",t=>{t.key==="Escape"&&this.open&&(t.preventDefault(),this.hide())})}};var T=class extends c{#t=[];constructor(){super()}get#s(){return this.getAttribute("strategy")??"hover"}get#n(){return this.hasAttribute("prerender")}get#e(){return this.getAttribute("url")}appendTag(t){let{url:e,prerender:i}=t;if(e!==window.location.href&&!this.#t.includes(e))if(this.#t.push(e),HTMLScriptElement.supports&&HTMLScriptElement.supports("speculationrules")){let s={prefetch:[{source:"list",urls:[e]}]};i&&(s.prerender=s.prefetch);let r=document.createElement("script");r.type="speculationrules",r.textContent=JSON.stringify(s),document.head.append(r)}else{let s=document.createElement("link");s.rel="prefetch",s.as="document",s.href=e,document.head.append(s)}}prefetch(t={anchors:this.getTrigger(),prerender:this.#n,strategy:this.#s}){let{anchors:e=this.getTrigger(),prerender:i=this.#n,strategy:s=this.#s}=t,r,n=(l=200)=>h=>{let{href:m}=h.currentTarget;r=setTimeout(()=>this.appendTag({url:m,prerender:i}),l)},a=()=>clearTimeout(r),u=new IntersectionObserver(l=>{for(let h of l)h.isIntersecting&&this.appendTag({url:h.target.href,prerender:i})});for(let l of e)s==="load"?this.appendTag({url:l.href,prerender:i}):s==="visible"?u.observe(l):(l.addEventListener("mouseover",n()),l.addEventListener("mouseout",a),l.addEventListener("focus",n()),l.addEventListener("focusout",a),l.addEventListener("touchstart",n(0),{passive:!0}))}mount(){this.#e&&this.appendTag({url:this.#e,prerender:this.#n}),this.prefetch()}};var L=class extends f{constructor(){super()}async share(t=this.value){if(navigator.canShare&&navigator.canShare({url:t}))try{await navigator.share({url:t})}catch(e){e?.name!=="AbortError"&&console.error(e)}else this.copy()}mount(){this.triggerListener(async()=>await this.share())}};var C=class extends c{constructor(){super()}#t(t){let e="data-asc",i="data-desc";for(let s of this.getTrigger())s!==t&&(s.removeAttribute(e),s.removeAttribute(i));return t.hasAttribute(e)?(t.removeAttribute(e),t.setAttribute(i,""),!1):(t.removeAttribute(i),t.setAttribute(e,""),!0)}mount(){let t=this.getContent(HTMLTableSectionElement);for(let e of this.getTrigger())e.addEventListener(this.event,()=>{Array.from(t.querySelectorAll("tr")).sort(K(e,this.#t(e))).forEach(i=>t.appendChild(i))})}},K=(o,t)=>(i,s)=>{let r=Array.from(o.parentNode?.children??[]).indexOf(o);return((a,u)=>{let l=o.dataset.type??"string";if(l==="string")return new Intl.Collator().compare(a,u);if(l==="boolean"){let h=m=>["0","false","null","undefined"].includes(m)?!1:!!m;return h(a)===h(u)?0:h(a)?-1:1}else return Number(a)-Number(u)})(j(t?i:s,r),j(t?s:i,r))},j=(o,t)=>{let e=o.children[t];return e instanceof HTMLElement?e.dataset.value??e.textContent??"":""};var M=class extends c{wakeLock=null;constructor(){super()}#t(){return"wakeLock"in navigator}get#s(){return this.hasAttribute("auto-lock")}async request(){this.#t()&&document.visibilityState==="visible"&&(this.wakeLock=await navigator.wakeLock.request("screen"),this.setAttribute("locked",""),this.swapContent(!1),this.wakeLock.addEventListener("release",()=>{this.removeAttribute("locked"),this.swapContent(!1),this.#s||(this.wakeLock=null)}))}async release(){await this.wakeLock?.release(),this.wakeLock=null}mount(){this.hasAttribute("locked")&&this.request(),this.triggerListener(()=>{this.wakeLock?this.release():this.request()});for(let t of this.getTrigger())!this.#t()&&"disabled"in t&&(t.disabled=!0);this.#s&&this.safeListener("visibilitychange",()=>{this.wakeLock&&this.request()},document)}destroy(){this.release()}};var S=class extends c{static observedAttributes=["autoplay","start","uid"];constructor(){super()}get iframe(){return this.getContent(HTMLIFrameElement)}get autoplay(){return this.hasAttribute("autoplay")}set autoplay(t){t?this.setAttribute("autoplay",""):this.removeAttribute("autoplay")}get start(){return this.getAttribute("start")??"0"}set start(t){this.setAttribute("start",t)}get uid(){let t=this.getAttribute("uid");if(!t)throw new Error("YouTube: missing `uid` attribute.");return t}set uid(t){this.setAttribute("uid",t)}mount(){this.iframe.allowFullscreen=!0,this.iframe.allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"}attributeChangedCallback(){queueMicrotask(()=>{this.iframe.src=`https://www.youtube-nocookie.com/embed/${this.uid}?start=${this.start}${this.autoplay?"&autoplay=1":""}`})}};for(let o in H)customElements.define(`drab-${o.toLowerCase()}`,H[o]);})();
|
package/dialog/define.iife.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";(()=>{var c=class extends HTMLElement{#t=new AbortController;constructor(){super()}get event(){return this.getAttribute("event")??"click"}set event(t){this.setAttribute("event",t)}getTrigger(){return this.querySelectorAll(this.getAttribute("trigger")??"[data-trigger]")}getContent(t=HTMLElement){let n=this.querySelector(this.getAttribute("content")??"[data-content]");if(n instanceof t)return n;throw new Error("Content not found")}swapContent(t=!0,n=800){let e=this.querySelector(this.getAttribute("swap")??"[data-swap]");if(e){let i=Array.from(this.getContent().childNodes),s=[];e instanceof HTMLTemplateElement?(s.push(e.content.cloneNode(!0)),e.content.replaceChildren(...i)):(s.push(...e.childNodes),e.replaceChildren(...i)),this.getContent().replaceChildren(...s),t&&setTimeout(()=>this.swapContent(!1),n)}}safeListener(t,n,e=document.body,i={}){i.signal=this.#t.signal,e.addEventListener(t,n,i)}triggerListener(t,n=this.event,e){for(let i of this.getTrigger())i.addEventListener(n,t,e)}mount(){}connectedCallback(){queueMicrotask(()=>this.mount())}destroy(){}disconnectedCallback(){this.destroy(),this.#t.abort()}};var m=class extends c{constructor(){super()}get animationOptions(){let t={};for(let n of this.getAttributeNames())if(n.startsWith("animation-option-")){let e=this.getAttribute(n),[,,i]=n.split("-");e&&(i==="duration"||i==="delay"?t[i]=Number(e):i==="easing"&&(t[i]=e))}return t}async animateElement(t={element:this.getContent(),options:{}}){let{element:n=this.getContent(),options:e={}}=t,i=this.keyframes;if(i.length&&!window.matchMedia("(prefers-reduced-motion: reduce)").matches){e=Object.assign(this.animationOptions,e),e.duration||(e.duration=200),e.easing||(e.easing="ease-in-out");let s=i.at(0),o=i.at(-1);if(s&&o){let a=["composite","easing","offset"];for(let l of a)delete s[l],delete o[l]}e.direction?.includes("reverse")&&([s,o]=[o,s]),Object.assign(n.style,s),await n.animate(i,e).finished,Object.assign(n.style,o)}}get keyframes(){let t=[];for(let n of this.getAttributeNames()){let e=this.getAttribute(n),[,,i,...s]=n.split("-");if(n.startsWith("animation-keyframe-")){let o=s.map((r,a)=>a<1?r:r.at(0)?.toUpperCase()+r.slice(1)).join("");if(i&&o){i==="from"?i="0":i==="to"?i="1":i=String(parseInt(i)*.01);let r=Number(i),a=t.find(l=>l.offset===r);a?a[o]=e:t.push({[o]:e,offset:r})}}}return t.sort((n,e)=>Number(n.offset)-Number(e.offset)),t}};var f=class extends m{constructor(){super()}get dialog(){return this.getContent(HTMLDialogElement)}async show(){this.dialog.showModal(),await this.animateElement()}async close(){await this.animateElement({options:{direction:"reverse"}}),this.dialog.close()}async toggle(){this.dialog.open?this.close():this.show()}mount(){this.triggerListener(()=>this.toggle()),this.safeListener("keydown",t=>{t.key==="Escape"&&this.dialog.open&&(t.preventDefault(),this.close())}),this.hasAttribute("click-outside-close")&&this.dialog.addEventListener("click",t=>{let n=this.dialog.getBoundingClientRect();(t.clientX<n.left||t.clientX>n.right||t.clientY<n.top||t.clientY>n.bottom)&&this.close()})}};customElements.define("drab-dialog",f);})();
|
|
1
|
+
"use strict";(()=>{var c=class extends HTMLElement{#t=new AbortController;constructor(){super()}get event(){return this.getAttribute("event")??"click"}set event(t){this.setAttribute("event",t)}getTrigger(){return this.querySelectorAll(this.getAttribute("trigger")??"[data-trigger]")}getContent(t=HTMLElement){let n=this.querySelector(this.getAttribute("content")??"[data-content]");if(n instanceof t)return n;throw new Error("Content not found")}swapContent(t=!0,n=800){let e=this.querySelector(this.getAttribute("swap")??"[data-swap]");if(e){let i=Array.from(this.getContent().childNodes),s=[];e instanceof HTMLTemplateElement?(s.push(e.content.cloneNode(!0)),e.content.replaceChildren(...i)):(s.push(...e.childNodes),e.replaceChildren(...i)),this.getContent().replaceChildren(...s),t&&setTimeout(()=>this.swapContent(!1),n)}}safeListener(t,n,e=document.body,i={}){i.signal=this.#t.signal,e.addEventListener(t,n,i)}triggerListener(t,n=this.event,e){for(let i of this.getTrigger())i.addEventListener(n,t,e)}mount(){}connectedCallback(){queueMicrotask(()=>this.mount())}destroy(){}disconnectedCallback(){this.destroy(),this.#t.abort()}};var m=class extends c{constructor(){super()}get animationOptions(){let t={};for(let n of this.getAttributeNames())if(n.startsWith("animation-option-")){let e=this.getAttribute(n),[,,i]=n.split("-");e&&(i==="duration"||i==="delay"?t[i]=Number(e):i==="easing"&&(t[i]=e))}return t}async animateElement(t={element:this.getContent(),options:{}}){let{element:n=this.getContent(),options:e={}}=t,i=this.keyframes;if(i.length&&!window.matchMedia("(prefers-reduced-motion: reduce)").matches){e=Object.assign(this.animationOptions,e),e.duration||(e.duration=200),e.easing||(e.easing="ease-in-out");let s=i.at(0),o=i.at(-1);if(s&&o){let a=["composite","easing","offset"];for(let l of a)delete s[l],delete o[l]}e.direction?.includes("reverse")&&([s,o]=[o,s]),Object.assign(n.style,s),await n.animate(i,e).finished,Object.assign(n.style,o)}}get keyframes(){let t=[];for(let n of this.getAttributeNames()){let e=this.getAttribute(n),[,,i,...s]=n.split("-");if(n.startsWith("animation-keyframe-")){let o=s.map((r,a)=>a<1?r:r.at(0)?.toUpperCase()+r.slice(1)).join("");if(i&&o){i==="from"?i="0":i==="to"?i="1":i=String(parseInt(i)*.01);let r=Number(i),a=t.find(l=>l.offset===r);a?a[o]=e:t.push({[o]:e,offset:r})}}}return t.sort((n,e)=>Number(n.offset)-Number(e.offset)),t}};var f=class extends m{constructor(){super()}get dialog(){return this.getContent(HTMLDialogElement)}get#t(){return this.hasAttribute("remove-body-scroll")}async show(){this.dialog.showModal(),this.#t&&(document.body.style.overflow="hidden"),await this.animateElement()}async close(){await this.animateElement({options:{direction:"reverse"}}),this.#t&&(document.body.style.overflow=""),this.dialog.close()}async toggle(){this.dialog.open?this.close():this.show()}mount(){this.triggerListener(()=>this.toggle()),this.safeListener("keydown",t=>{t.key==="Escape"&&this.dialog.open&&(t.preventDefault(),this.close())}),this.hasAttribute("click-outside-close")&&this.dialog.addEventListener("click",t=>{let n=this.dialog.getBoundingClientRect();(t.clientX<n.left||t.clientX>n.right||t.clientY<n.top||t.clientY>n.bottom)&&this.close()})}};customElements.define("drab-dialog",f);})();
|
package/dialog/index.d.ts
CHANGED
|
@@ -2,6 +2,7 @@ import { Animate, type AnimateAttributes } from "../animate/index.js";
|
|
|
2
2
|
import type { Attributes } from "../types/index.js";
|
|
3
3
|
export type DialogAttributes = Attributes<Dialog> & AnimateAttributes & Partial<{
|
|
4
4
|
"click-outside-close": boolean;
|
|
5
|
+
"remove-body-scroll": boolean;
|
|
5
6
|
}>;
|
|
6
7
|
/**
|
|
7
8
|
* Provides triggers and animations for the `HTMLDialogElement`.
|
|
@@ -10,8 +11,14 @@ export type DialogAttributes = Attributes<Dialog> & AnimateAttributes & Partial<
|
|
|
10
11
|
*
|
|
11
12
|
* By default, the `HTMLDialogElement` doesn't close if the user clicks outside of it.
|
|
12
13
|
* Add a `click-outside-close` attribute to close when the user clicks outside.
|
|
14
|
+
*
|
|
15
|
+
* `remove-body-scroll`
|
|
16
|
+
*
|
|
17
|
+
* Add the `remove-body-scroll` to remove the scroll from `document.body` when the dialog
|
|
18
|
+
* is open.
|
|
13
19
|
*/
|
|
14
20
|
export declare class Dialog extends Animate {
|
|
21
|
+
#private;
|
|
15
22
|
constructor();
|
|
16
23
|
/** The `HTMLDialogElement` within the element. */
|
|
17
24
|
get dialog(): HTMLDialogElement;
|
package/dialog/index.iife.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";(()=>{var c=class extends HTMLElement{#t=new AbortController;constructor(){super()}get event(){return this.getAttribute("event")??"click"}set event(t){this.setAttribute("event",t)}getTrigger(){return this.querySelectorAll(this.getAttribute("trigger")??"[data-trigger]")}getContent(t=HTMLElement){let n=this.querySelector(this.getAttribute("content")??"[data-content]");if(n instanceof t)return n;throw new Error("Content not found")}swapContent(t=!0,n=800){let e=this.querySelector(this.getAttribute("swap")??"[data-swap]");if(e){let i=Array.from(this.getContent().childNodes),s=[];e instanceof HTMLTemplateElement?(s.push(e.content.cloneNode(!0)),e.content.replaceChildren(...i)):(s.push(...e.childNodes),e.replaceChildren(...i)),this.getContent().replaceChildren(...s),t&&setTimeout(()=>this.swapContent(!1),n)}}safeListener(t,n,e=document.body,i={}){i.signal=this.#t.signal,e.addEventListener(t,n,i)}triggerListener(t,n=this.event,e){for(let i of this.getTrigger())i.addEventListener(n,t,e)}mount(){}connectedCallback(){queueMicrotask(()=>this.mount())}destroy(){}disconnectedCallback(){this.destroy(),this.#t.abort()}};var m=class extends c{constructor(){super()}get animationOptions(){let t={};for(let n of this.getAttributeNames())if(n.startsWith("animation-option-")){let e=this.getAttribute(n),[,,i]=n.split("-");e&&(i==="duration"||i==="delay"?t[i]=Number(e):i==="easing"&&(t[i]=e))}return t}async animateElement(t={element:this.getContent(),options:{}}){let{element:n=this.getContent(),options:e={}}=t,i=this.keyframes;if(i.length&&!window.matchMedia("(prefers-reduced-motion: reduce)").matches){e=Object.assign(this.animationOptions,e),e.duration||(e.duration=200),e.easing||(e.easing="ease-in-out");let s=i.at(0),o=i.at(-1);if(s&&o){let a=["composite","easing","offset"];for(let l of a)delete s[l],delete o[l]}e.direction?.includes("reverse")&&([s,o]=[o,s]),Object.assign(n.style,s),await n.animate(i,e).finished,Object.assign(n.style,o)}}get keyframes(){let t=[];for(let n of this.getAttributeNames()){let e=this.getAttribute(n),[,,i,...s]=n.split("-");if(n.startsWith("animation-keyframe-")){let o=s.map((r,a)=>a<1?r:r.at(0)?.toUpperCase()+r.slice(1)).join("");if(i&&o){i==="from"?i="0":i==="to"?i="1":i=String(parseInt(i)*.01);let r=Number(i),a=t.find(l=>l.offset===r);a?a[o]=e:t.push({[o]:e,offset:r})}}}return t.sort((n,e)=>Number(n.offset)-Number(e.offset)),t}};var d=class extends m{constructor(){super()}get dialog(){return this.getContent(HTMLDialogElement)}async show(){this.dialog.showModal(),await this.animateElement()}async close(){await this.animateElement({options:{direction:"reverse"}}),this.dialog.close()}async toggle(){this.dialog.open?this.close():this.show()}mount(){this.triggerListener(()=>this.toggle()),this.safeListener("keydown",t=>{t.key==="Escape"&&this.dialog.open&&(t.preventDefault(),this.close())}),this.hasAttribute("click-outside-close")&&this.dialog.addEventListener("click",t=>{let n=this.dialog.getBoundingClientRect();(t.clientX<n.left||t.clientX>n.right||t.clientY<n.top||t.clientY>n.bottom)&&this.close()})}};})();
|
|
1
|
+
"use strict";(()=>{var c=class extends HTMLElement{#t=new AbortController;constructor(){super()}get event(){return this.getAttribute("event")??"click"}set event(t){this.setAttribute("event",t)}getTrigger(){return this.querySelectorAll(this.getAttribute("trigger")??"[data-trigger]")}getContent(t=HTMLElement){let n=this.querySelector(this.getAttribute("content")??"[data-content]");if(n instanceof t)return n;throw new Error("Content not found")}swapContent(t=!0,n=800){let e=this.querySelector(this.getAttribute("swap")??"[data-swap]");if(e){let i=Array.from(this.getContent().childNodes),s=[];e instanceof HTMLTemplateElement?(s.push(e.content.cloneNode(!0)),e.content.replaceChildren(...i)):(s.push(...e.childNodes),e.replaceChildren(...i)),this.getContent().replaceChildren(...s),t&&setTimeout(()=>this.swapContent(!1),n)}}safeListener(t,n,e=document.body,i={}){i.signal=this.#t.signal,e.addEventListener(t,n,i)}triggerListener(t,n=this.event,e){for(let i of this.getTrigger())i.addEventListener(n,t,e)}mount(){}connectedCallback(){queueMicrotask(()=>this.mount())}destroy(){}disconnectedCallback(){this.destroy(),this.#t.abort()}};var m=class extends c{constructor(){super()}get animationOptions(){let t={};for(let n of this.getAttributeNames())if(n.startsWith("animation-option-")){let e=this.getAttribute(n),[,,i]=n.split("-");e&&(i==="duration"||i==="delay"?t[i]=Number(e):i==="easing"&&(t[i]=e))}return t}async animateElement(t={element:this.getContent(),options:{}}){let{element:n=this.getContent(),options:e={}}=t,i=this.keyframes;if(i.length&&!window.matchMedia("(prefers-reduced-motion: reduce)").matches){e=Object.assign(this.animationOptions,e),e.duration||(e.duration=200),e.easing||(e.easing="ease-in-out");let s=i.at(0),o=i.at(-1);if(s&&o){let a=["composite","easing","offset"];for(let l of a)delete s[l],delete o[l]}e.direction?.includes("reverse")&&([s,o]=[o,s]),Object.assign(n.style,s),await n.animate(i,e).finished,Object.assign(n.style,o)}}get keyframes(){let t=[];for(let n of this.getAttributeNames()){let e=this.getAttribute(n),[,,i,...s]=n.split("-");if(n.startsWith("animation-keyframe-")){let o=s.map((r,a)=>a<1?r:r.at(0)?.toUpperCase()+r.slice(1)).join("");if(i&&o){i==="from"?i="0":i==="to"?i="1":i=String(parseInt(i)*.01);let r=Number(i),a=t.find(l=>l.offset===r);a?a[o]=e:t.push({[o]:e,offset:r})}}}return t.sort((n,e)=>Number(n.offset)-Number(e.offset)),t}};var d=class extends m{constructor(){super()}get dialog(){return this.getContent(HTMLDialogElement)}get#t(){return this.hasAttribute("remove-body-scroll")}async show(){this.dialog.showModal(),this.#t&&(document.body.style.overflow="hidden"),await this.animateElement()}async close(){await this.animateElement({options:{direction:"reverse"}}),this.#t&&(document.body.style.overflow=""),this.dialog.close()}async toggle(){this.dialog.open?this.close():this.show()}mount(){this.triggerListener(()=>this.toggle()),this.safeListener("keydown",t=>{t.key==="Escape"&&this.dialog.open&&(t.preventDefault(),this.close())}),this.hasAttribute("click-outside-close")&&this.dialog.addEventListener("click",t=>{let n=this.dialog.getBoundingClientRect();(t.clientX<n.left||t.clientX>n.right||t.clientY<n.top||t.clientY>n.bottom)&&this.close()})}};})();
|
package/dialog/index.js
CHANGED
|
@@ -6,6 +6,11 @@ import { Animate } from "../animate/index.js";
|
|
|
6
6
|
*
|
|
7
7
|
* By default, the `HTMLDialogElement` doesn't close if the user clicks outside of it.
|
|
8
8
|
* Add a `click-outside-close` attribute to close when the user clicks outside.
|
|
9
|
+
*
|
|
10
|
+
* `remove-body-scroll`
|
|
11
|
+
*
|
|
12
|
+
* Add the `remove-body-scroll` to remove the scroll from `document.body` when the dialog
|
|
13
|
+
* is open.
|
|
9
14
|
*/
|
|
10
15
|
export class Dialog extends Animate {
|
|
11
16
|
constructor() {
|
|
@@ -15,9 +20,16 @@ export class Dialog extends Animate {
|
|
|
15
20
|
get dialog() {
|
|
16
21
|
return this.getContent(HTMLDialogElement);
|
|
17
22
|
}
|
|
23
|
+
/** Remove scroll from the body when open with the `remove-body-scroll` attribute. */
|
|
24
|
+
get #removeBodyScroll() {
|
|
25
|
+
return this.hasAttribute("remove-body-scroll");
|
|
26
|
+
}
|
|
18
27
|
/** `HTMLDialogElement.showModal()` with animation. */
|
|
19
28
|
async show() {
|
|
20
29
|
this.dialog.showModal();
|
|
30
|
+
if (this.#removeBodyScroll) {
|
|
31
|
+
document.body.style.overflow = "hidden";
|
|
32
|
+
}
|
|
21
33
|
await this.animateElement();
|
|
22
34
|
}
|
|
23
35
|
/** `HTMLDialogElement.close()` with animation. */
|
|
@@ -27,6 +39,9 @@ export class Dialog extends Animate {
|
|
|
27
39
|
direction: "reverse",
|
|
28
40
|
},
|
|
29
41
|
});
|
|
42
|
+
if (this.#removeBodyScroll) {
|
|
43
|
+
document.body.style.overflow = "";
|
|
44
|
+
}
|
|
30
45
|
this.dialog.close();
|
|
31
46
|
}
|
|
32
47
|
/** `show` or `close` depending on the dialog's `open` attribute. */
|
package/index.iife.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
"use strict";(()=>{var c=class extends HTMLElement{#t=new AbortController;constructor(){super()}get event(){return this.getAttribute("event")??"click"}set event(t){this.setAttribute("event",t)}getTrigger(){return this.querySelectorAll(this.getAttribute("trigger")??"[data-trigger]")}getContent(t=HTMLElement){let e=this.querySelector(this.getAttribute("content")??"[data-content]");if(e instanceof t)return e;throw new Error("Content not found")}swapContent(t=!0,e=800){let i=this.querySelector(this.getAttribute("swap")??"[data-swap]");if(i){let s=Array.from(this.getContent().childNodes),r=[];i instanceof HTMLTemplateElement?(r.push(i.content.cloneNode(!0)),i.content.replaceChildren(...s)):(r.push(...i.childNodes),i.replaceChildren(...s)),this.getContent().replaceChildren(...r),t&&setTimeout(()=>this.swapContent(!1),e)}}safeListener(t,e,i=document.body,s={}){s.signal=this.#t.signal,i.addEventListener(t,e,s)}triggerListener(t,e=this.event,i){for(let s of this.getTrigger())s.addEventListener(e,t,i)}mount(){}connectedCallback(){queueMicrotask(()=>this.mount())}destroy(){}disconnectedCallback(){this.destroy(),this.#t.abort()}};var p=class extends c{constructor(){super()}get animationOptions(){let t={};for(let e of this.getAttributeNames())if(e.startsWith("animation-option-")){let i=this.getAttribute(e),[,,s]=e.split("-");i&&(s==="duration"||s==="delay"?t[s]=Number(i):s==="easing"&&(t[s]=i))}return t}async animateElement(t={element:this.getContent(),options:{}}){let{element:e=this.getContent(),options:i={}}=t,s=this.keyframes;if(s.length&&!window.matchMedia("(prefers-reduced-motion: reduce)").matches){i=Object.assign(this.animationOptions,i),i.duration||(i.duration=200),i.easing||(i.easing="ease-in-out");let r=s.at(0),n=s.at(-1);if(r&&n){let u=["composite","easing","offset"];for(let l of u)delete r[l],delete n[l]}i.direction?.includes("reverse")&&([r,n]=[n,r]),Object.assign(e.style,r),await e.animate(s,i).finished,Object.assign(e.style,n)}}get keyframes(){let t=[];for(let e of this.getAttributeNames()){let i=this.getAttribute(e),[,,s,...r]=e.split("-");if(e.startsWith("animation-keyframe-")){let n=r.map((o,u)=>u<1?o:o.at(0)?.toUpperCase()+o.slice(1)).join("");if(s&&n){s==="from"?s="0":s==="to"?s="1":s=String(parseInt(s)*.01);let o=Number(s),u=t.find(l=>l.offset===o);u?u[n]=i:t.push({[n]:i,offset:o})}}}return t.sort((e,i)=>Number(e.offset)-Number(i.offset)),t}};var y=class extends c{breakpoints=[{name:"sm",width:640},{name:"md",width:768},{name:"lg",width:1024},{name:"xl",width:1280},{name:"2xl",width:1536}];constructor(){super();let t=[];for(let e of this.getAttributeNames())if(e.startsWith("breakpoint-")){let[,...i]=e.split("-");i&&t.push({name:i.join("-"),width:Number(this.getAttribute(e))})}t.length&&(this.breakpoints=t),this.breakpoints.sort((e,i)=>i.width-e.width)}get breakpoint(){for(let t=0;t<this.breakpoints.length;t++){let e=this.breakpoints[t];if(e&&window.innerWidth>e.width)return e.name}return"none"}mount(){let t=()=>this.getContent().innerHTML=`${this.breakpoint}:${window.innerWidth}`;t(),this.safeListener("resize",t,window)}};var A=class extends p{#t;constructor(){super()}set#s(t){this.getContent().style.left=`${t.x}px`,this.getContent().style.top=`${t.y}px`}async show(t){let e=window.scrollY,i=window.scrollX,s=t instanceof MouseEvent?t.clientX:t.touches[0]?.clientX??0,r=t instanceof MouseEvent?t.clientY:t.touches[0]?.clientY??0,n=s+i,o=r+e;this.getContent().style.position="absolute",this.getContent().style.display="block";let u=this.getContent().offsetWidth+24,l=this.getContent().offsetHeight+6,h=window.innerWidth,m=window.innerHeight;n+u>i+h&&(n=i+h-u),o+l>e+m&&(o=e+m-l),this.#s={x:n,y:o},await this.animateElement()}async hide(){this.getContent().style.display!=="none"&&(await this.animateElement({options:{direction:"reverse"}}),this.getContent().style.display="none")}mount(){this.triggerListener(e=>{e.preventDefault(),this.show(e)},"contextmenu"),this.safeListener("click",()=>this.hide()),this.triggerListener(e=>{this.#t=setTimeout(()=>{this.show(e)},800)},"touchstart",{passive:!0});let t=()=>clearTimeout(this.#t);this.triggerListener(t,"touchend",{passive:!0}),this.triggerListener(t,"touchcancel",{passive:!0}),this.safeListener("keydown",e=>{e.key==="Escape"&&this.hide()})}};var f=class extends c{constructor(){super()}get value(){return this.getAttribute("value")??""}set value(t){this.setAttribute("value",t)}async copy(t=this.value){await navigator.clipboard.writeText(t),this.swapContent()}};var
|
|
1
|
+
"use strict";(()=>{var c=class extends HTMLElement{#t=new AbortController;constructor(){super()}get event(){return this.getAttribute("event")??"click"}set event(t){this.setAttribute("event",t)}getTrigger(){return this.querySelectorAll(this.getAttribute("trigger")??"[data-trigger]")}getContent(t=HTMLElement){let e=this.querySelector(this.getAttribute("content")??"[data-content]");if(e instanceof t)return e;throw new Error("Content not found")}swapContent(t=!0,e=800){let i=this.querySelector(this.getAttribute("swap")??"[data-swap]");if(i){let s=Array.from(this.getContent().childNodes),r=[];i instanceof HTMLTemplateElement?(r.push(i.content.cloneNode(!0)),i.content.replaceChildren(...s)):(r.push(...i.childNodes),i.replaceChildren(...s)),this.getContent().replaceChildren(...r),t&&setTimeout(()=>this.swapContent(!1),e)}}safeListener(t,e,i=document.body,s={}){s.signal=this.#t.signal,i.addEventListener(t,e,s)}triggerListener(t,e=this.event,i){for(let s of this.getTrigger())s.addEventListener(e,t,i)}mount(){}connectedCallback(){queueMicrotask(()=>this.mount())}destroy(){}disconnectedCallback(){this.destroy(),this.#t.abort()}};var p=class extends c{constructor(){super()}get animationOptions(){let t={};for(let e of this.getAttributeNames())if(e.startsWith("animation-option-")){let i=this.getAttribute(e),[,,s]=e.split("-");i&&(s==="duration"||s==="delay"?t[s]=Number(i):s==="easing"&&(t[s]=i))}return t}async animateElement(t={element:this.getContent(),options:{}}){let{element:e=this.getContent(),options:i={}}=t,s=this.keyframes;if(s.length&&!window.matchMedia("(prefers-reduced-motion: reduce)").matches){i=Object.assign(this.animationOptions,i),i.duration||(i.duration=200),i.easing||(i.easing="ease-in-out");let r=s.at(0),n=s.at(-1);if(r&&n){let u=["composite","easing","offset"];for(let l of u)delete r[l],delete n[l]}i.direction?.includes("reverse")&&([r,n]=[n,r]),Object.assign(e.style,r),await e.animate(s,i).finished,Object.assign(e.style,n)}}get keyframes(){let t=[];for(let e of this.getAttributeNames()){let i=this.getAttribute(e),[,,s,...r]=e.split("-");if(e.startsWith("animation-keyframe-")){let n=r.map((o,u)=>u<1?o:o.at(0)?.toUpperCase()+o.slice(1)).join("");if(s&&n){s==="from"?s="0":s==="to"?s="1":s=String(parseInt(s)*.01);let o=Number(s),u=t.find(l=>l.offset===o);u?u[n]=i:t.push({[n]:i,offset:o})}}}return t.sort((e,i)=>Number(e.offset)-Number(i.offset)),t}};var y=class extends c{breakpoints=[{name:"sm",width:640},{name:"md",width:768},{name:"lg",width:1024},{name:"xl",width:1280},{name:"2xl",width:1536}];constructor(){super();let t=[];for(let e of this.getAttributeNames())if(e.startsWith("breakpoint-")){let[,...i]=e.split("-");i&&t.push({name:i.join("-"),width:Number(this.getAttribute(e))})}t.length&&(this.breakpoints=t),this.breakpoints.sort((e,i)=>i.width-e.width)}get breakpoint(){for(let t=0;t<this.breakpoints.length;t++){let e=this.breakpoints[t];if(e&&window.innerWidth>e.width)return e.name}return"none"}mount(){let t=()=>this.getContent().innerHTML=`${this.breakpoint}:${window.innerWidth}`;t(),this.safeListener("resize",t,window)}};var A=class extends p{#t;constructor(){super()}set#s(t){this.getContent().style.left=`${t.x}px`,this.getContent().style.top=`${t.y}px`}async show(t){let e=window.scrollY,i=window.scrollX,s=t instanceof MouseEvent?t.clientX:t.touches[0]?.clientX??0,r=t instanceof MouseEvent?t.clientY:t.touches[0]?.clientY??0,n=s+i,o=r+e;this.getContent().style.position="absolute",this.getContent().style.display="block";let u=this.getContent().offsetWidth+24,l=this.getContent().offsetHeight+6,h=window.innerWidth,m=window.innerHeight;n+u>i+h&&(n=i+h-u),o+l>e+m&&(o=e+m-l),this.#s={x:n,y:o},await this.animateElement()}async hide(){this.getContent().style.display!=="none"&&(await this.animateElement({options:{direction:"reverse"}}),this.getContent().style.display="none")}mount(){this.triggerListener(e=>{e.preventDefault(),this.show(e)},"contextmenu"),this.safeListener("click",()=>this.hide()),this.triggerListener(e=>{this.#t=setTimeout(()=>{this.show(e)},800)},"touchstart",{passive:!0});let t=()=>clearTimeout(this.#t);this.triggerListener(t,"touchend",{passive:!0}),this.triggerListener(t,"touchcancel",{passive:!0}),this.safeListener("keydown",e=>{e.key==="Escape"&&this.hide()})}};var f=class extends c{constructor(){super()}get value(){return this.getAttribute("value")??""}set value(t){this.setAttribute("value",t)}async copy(t=this.value){await navigator.clipboard.writeText(t),this.swapContent()}};var v=class extends f{constructor(){super()}mount(){this.triggerListener(async()=>await this.copy())}};var k=class extends p{constructor(){super()}get details(){let t=this.getContent(HTMLElement).parentElement;if(!(t instanceof HTMLDetailsElement))throw new Error("Details: HTMLDetailsElement not found.");return t}async open(){this.details.open=!0,await this.animateElement()}async close(){await this.animateElement({options:{direction:"reverse"}}),this.details.open=!1}toggle(){this.details.open?this.close():this.open()}mount(){this.triggerListener(t=>{t.preventDefault(),this.toggle()})}};var x=class extends p{constructor(){super()}get dialog(){return this.getContent(HTMLDialogElement)}get#t(){return this.hasAttribute("remove-body-scroll")}async show(){this.dialog.showModal(),this.#t&&(document.body.style.overflow="hidden"),await this.animateElement()}async close(){await this.animateElement({options:{direction:"reverse"}}),this.#t&&(document.body.style.overflow=""),this.dialog.close()}async toggle(){this.dialog.open?this.close():this.show()}mount(){this.triggerListener(()=>this.toggle()),this.safeListener("keydown",t=>{t.key==="Escape"&&this.dialog.open&&(t.preventDefault(),this.close())}),this.hasAttribute("click-outside-close")&&this.dialog.addEventListener("click",t=>{let e=this.dialog.getBoundingClientRect();(t.clientX<e.left||t.clientX>e.right||t.clientY<e.top||t.clientY>e.bottom)&&this.close()})}};var E=class extends c{#t=[];keyPairs={"(":")","{":"}","[":"]","<":">",'"':'"',"`":"`"};constructor(){super();for(let t of this.#s)t.type==="wrap"&&(this.keyPairs[t.value]=t.value)}get textArea(){return this.getContent(HTMLTextAreaElement)}get text(){return this.textArea.value}set text(t){this.textArea.value=t}get#s(){let t=[];for(let e of this.getTrigger())t.push(this.#l(e));return t}get#n(){let t=this.text.split("```"),e=0;for(let[i,s]of t.entries())if(e+=s.length+3,this.#i<e)return i;return 0}get#e(){return this.textArea.selectionEnd}get#i(){return this.textArea.selectionStart}#r(t,e){this.textArea.setSelectionRange(t,e)}#l(t){let e=t.dataset.type,i=t.dataset.value,s=t.dataset.key??void 0;return{type:e,value:i,key:s}}async#c(t,e,i){if(t.type==="inline")this.text=`${this.text.slice(0,i)}${t.value}${this.text.slice(i)}`;else if(t.type==="wrap")this.text=P(this.text,t.value,e),this.text=P(this.text,this.keyPairs[t.value],i+t.value.length),t.value.length<2&&this.#t.push(t.value);else if(t.type==="block"){let{lines:s,lineNumber:r}=this.#a(),n=t.value.at(0);n&&s[r]?.startsWith(n)?s[r]=t.value.trim()+s[r]:s[r]=t.value+s[r],this.text=s.join(`
|
|
2
2
|
`)}}async#h(t,e,i){let s=0,r=0;if(/[a-z]/i.test(t)){for(let n=i;n<this.text.length;n++)if(this.text[n]?.match(/[a-z]/i))s?r=n+1:s=n;else if(s)break}else s=e+t.length,r=i+t.length;this.#r(s,r),this.textArea.focus()}async#o(t){let e=this.#e,i=this.#i;await this.#c(t,i,e),this.#h(t.value,i,e)}#p(t){if(t){let e=[];this.#s.forEach(s=>{s.type==="block"&&e.push(s.value)});for(let s=0;s<e.length;s++){let r=e[s];if(r&&t.startsWith(r))return r}let i=w(t);if(i)return`${i}. `}return""}#a(){let t=this.text.split(`
|
|
3
3
|
`),e=0;for(let i=0;i<t.length;i++){let s=t.at(i)?.length??0;if(e++,e+=s,e>this.#e)return{lines:t,lineNumber:i,columnNumber:this.#e-(e-s-1)}}return{lines:t,lineNumber:0,columnNumber:0}}#u(t,e=!1){let{lines:i}=this.#a();for(let s=t+1;s<i.length;s++){let r=i[s];if(r){let n=w(r);if(n){let o;if(e)if(n>1)o=n-1;else break;else o=n+1;i[s]=r.slice(String(n).length),i[s]=String(o)+i[s]}else break}}this.text=i.join(`
|
|
4
4
|
`)}mount(){this.textArea.addEventListener("keydown",async t=>{let e=["ArrowUp","ArrowDown","Delete"],i=this.text[this.#e]??"";if(e.includes(t.key))this.#t=[];else if(t.key==="Backspace"){let s=this.text[this.#i-1];if(s&&s in this.keyPairs&&i===this.keyPairs[s]){t.preventDefault();let r=this.#i-1,n=this.#e-1;this.text=d(this.text,r),this.text=d(this.text,n),setTimeout(()=>{this.#r(r,n)},0),this.#t.pop()}if(s===`
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "drab",
|
|
3
3
|
"description": "A headless custom element library",
|
|
4
|
-
"version": "5.
|
|
4
|
+
"version": "5.4.0",
|
|
5
5
|
"homepage": "https://drab.robino.dev",
|
|
6
6
|
"license": "MIT",
|
|
7
7
|
"author": {
|
|
@@ -183,20 +183,20 @@
|
|
|
183
183
|
"pub": "bun i && bun doc && bun package && npm publish --access public ./package"
|
|
184
184
|
},
|
|
185
185
|
"devDependencies": {
|
|
186
|
-
"@tailwindcss/typography": "^0.5.
|
|
187
|
-
"@types/node": "^20.
|
|
186
|
+
"@tailwindcss/typography": "^0.5.12",
|
|
187
|
+
"@types/node": "^20.12.7",
|
|
188
188
|
"@vercel/analytics": "^1.2.2",
|
|
189
|
-
"autoprefixer": "^10.4.
|
|
190
|
-
"domco": "^0.5.
|
|
189
|
+
"autoprefixer": "^10.4.19",
|
|
190
|
+
"domco": "^0.5.4",
|
|
191
191
|
"prettier": "^3.2.5",
|
|
192
|
-
"prettier-plugin-tailwindcss": "^0.5.
|
|
192
|
+
"prettier-plugin-tailwindcss": "^0.5.13",
|
|
193
193
|
"robino": "^0.1.0",
|
|
194
|
-
"tailwindcss": "^3.4.
|
|
194
|
+
"tailwindcss": "^3.4.3",
|
|
195
195
|
"tsup": "^8.0.2",
|
|
196
|
-
"typedoc": "^0.25.
|
|
196
|
+
"typedoc": "^0.25.13",
|
|
197
197
|
"typedoc-plugin-markdown": "^3.17.1",
|
|
198
|
-
"typescript": "^5.
|
|
199
|
-
"uico": "^0.2.
|
|
200
|
-
"vite": "^5.
|
|
198
|
+
"typescript": "^5.4.5",
|
|
199
|
+
"uico": "^0.2.4",
|
|
200
|
+
"vite": "^5.2.8"
|
|
201
201
|
}
|
|
202
202
|
}
|