drab 4.1.7 → 5.0.0-beta.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/LICENSE.md +1 -1
- package/README.md +26 -103
- package/animate/define.d.ts +2 -0
- package/animate/define.iife.js +1 -0
- package/animate/define.js +1 -0
- package/animate/index.d.ts +54 -0
- package/animate/index.iife.js +1 -0
- package/animate/index.js +1 -0
- package/base/define.d.ts +2 -0
- package/base/define.iife.js +1 -0
- package/base/define.js +1 -0
- package/base/index.d.ts +69 -0
- package/base/index.iife.js +1 -0
- package/base/index.js +1 -0
- package/breakpoint/define.d.ts +2 -0
- package/breakpoint/define.iife.js +1 -0
- package/breakpoint/define.js +1 -0
- package/breakpoint/index.d.ts +24 -0
- package/breakpoint/index.iife.js +1 -0
- package/breakpoint/index.js +1 -0
- package/chunk-2ZZQECRY.js +1 -0
- package/chunk-57VEEUFG.js +1 -0
- package/chunk-5JV4T7GM.js +1 -0
- package/chunk-6HYPZWQ4.js +1 -0
- package/chunk-7F7CQUEG.js +1 -0
- package/chunk-7KU2PRW5.js +1 -0
- package/chunk-7S6DTKGH.js +1 -0
- package/chunk-FNJ7AESC.js +9 -0
- package/chunk-IQJQPZUL.js +1 -0
- package/chunk-JMJUWKN2.js +1 -0
- package/chunk-MXKU7AKV.js +1 -0
- package/chunk-T7RZI3ZL.js +1 -0
- package/chunk-TSTTUEAF.js +1 -0
- package/chunk-VEVFQB5N.js +1 -0
- package/contextmenu/define.d.ts +2 -0
- package/contextmenu/define.iife.js +1 -0
- package/contextmenu/define.js +1 -0
- package/contextmenu/index.d.ts +15 -0
- package/contextmenu/index.iife.js +1 -0
- package/contextmenu/index.js +1 -0
- package/copy/define.d.ts +2 -0
- package/copy/define.iife.js +1 -0
- package/copy/define.js +1 -0
- package/copy/index.d.ts +13 -0
- package/copy/index.iife.js +1 -0
- package/copy/index.js +1 -0
- package/define/index.d.ts +2 -0
- package/define/index.iife.js +9 -0
- package/define/index.js +1 -0
- package/details/define.d.ts +2 -0
- package/details/define.iife.js +1 -0
- package/details/define.js +1 -0
- package/details/index.d.ts +23 -0
- package/details/index.iife.js +1 -0
- package/details/index.js +1 -0
- package/dialog/define.d.ts +2 -0
- package/dialog/define.iife.js +1 -0
- package/dialog/define.js +1 -0
- package/dialog/index.d.ts +20 -0
- package/dialog/index.iife.js +1 -0
- package/dialog/index.js +1 -0
- package/editor/define.d.ts +2 -0
- package/editor/define.iife.js +9 -0
- package/editor/define.js +1 -0
- package/editor/index.d.ts +58 -0
- package/editor/index.iife.js +9 -0
- package/editor/index.js +1 -0
- package/fullscreen/define.d.ts +2 -0
- package/fullscreen/define.iife.js +1 -0
- package/fullscreen/define.js +1 -0
- package/fullscreen/index.d.ts +23 -0
- package/fullscreen/index.iife.js +1 -0
- package/fullscreen/index.js +1 -0
- package/index-SyRipepB.d.ts +17 -0
- package/index.d.ts +14 -0
- package/index.iife.js +9 -0
- package/index.js +1 -0
- package/package.json +130 -59
- package/popover/define.d.ts +2 -0
- package/popover/define.iife.js +1 -0
- package/popover/define.js +1 -0
- package/popover/index.d.ts +29 -0
- package/popover/index.iife.js +1 -0
- package/popover/index.js +1 -0
- package/share/define.d.ts +2 -0
- package/share/define.iife.js +1 -0
- package/share/define.js +1 -0
- package/share/index.d.ts +19 -0
- package/share/index.iife.js +1 -0
- package/share/index.js +1 -0
- package/tablesort/define.d.ts +2 -0
- package/tablesort/define.iife.js +1 -0
- package/tablesort/define.js +1 -0
- package/tablesort/index.d.ts +21 -0
- package/tablesort/index.iife.js +1 -0
- package/tablesort/index.js +1 -0
- package/youtube/define.d.ts +2 -0
- package/youtube/define.iife.js +1 -0
- package/youtube/define.js +1 -0
- package/youtube/index.d.ts +29 -0
- package/youtube/index.iife.js +1 -0
- package/youtube/index.js +1 -0
- package/dist/components/Breakpoint.svelte +0 -55
- package/dist/components/Breakpoint.svelte.d.ts +0 -46
- package/dist/components/ContextMenu.svelte +0 -150
- package/dist/components/ContextMenu.svelte.d.ts +0 -76
- package/dist/components/CopyButton.svelte +0 -97
- package/dist/components/CopyButton.svelte.d.ts +0 -60
- package/dist/components/DataTable.svelte +0 -208
- package/dist/components/DataTable.svelte.d.ts +0 -155
- package/dist/components/Details.svelte +0 -101
- package/dist/components/Details.svelte.d.ts +0 -67
- package/dist/components/Editor.svelte +0 -404
- package/dist/components/Editor.svelte.d.ts +0 -111
- package/dist/components/FrettedChord.svelte +0 -213
- package/dist/components/FrettedChord.svelte.d.ts +0 -79
- package/dist/components/FullscreenButton.svelte +0 -95
- package/dist/components/FullscreenButton.svelte.d.ts +0 -62
- package/dist/components/Popover.svelte +0 -153
- package/dist/components/Popover.svelte.d.ts +0 -80
- package/dist/components/ShareButton.svelte +0 -133
- package/dist/components/ShareButton.svelte.d.ts +0 -93
- package/dist/components/Sheet.svelte +0 -180
- package/dist/components/Sheet.svelte.d.ts +0 -99
- package/dist/components/Tablature.svelte +0 -173
- package/dist/components/Tablature.svelte.d.ts +0 -93
- package/dist/components/YouTube.svelte +0 -51
- package/dist/components/YouTube.svelte.d.ts +0 -49
- package/dist/index.d.ts +0 -14
- package/dist/index.js +0 -14
- package/dist/util/accessibility.d.ts +0 -6
- package/dist/util/accessibility.js +0 -11
- package/dist/util/delay.d.ts +0 -1
- package/dist/util/delay.js +0 -1
- package/dist/util/transition.d.ts +0 -2
- package/dist/util/transition.js +0 -2
@@ -0,0 +1,9 @@
|
|
1
|
+
"use strict";(()=>{var K=Object.defineProperty;var B=(o,t)=>{for(var e in t)K(o,e,{get:t[e],enumerable:!0})};var A={};B(A,{Animate:()=>u,Base:()=>c,Breakpoint:()=>g,ContextMenu:()=>d,Copy:()=>y,Details:()=>b,Dialog:()=>w,Editor:()=>v,Fullscreen:()=>E,Popover:()=>k,Share:()=>T,TableSort:()=>C,YouTube:()=>L});var c=class extends HTMLElement{#s=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 s=this.querySelector(this.getAttribute("swap")??"[data-swap]");if(s){let n=Array.from(this.getContent().childNodes);s instanceof HTMLTemplateElement?this.getContent().replaceChildren(s.content.cloneNode(!0)):this.getContent().replaceChildren(...s.childNodes),t&&setTimeout(()=>this.getContent().replaceChildren(...n),e)}}safeListener(t,e,s=document.body,n={}){n.signal=this.#s.signal,s.addEventListener(t,e,n)}triggerListener(t,e=this.event){for(let s of this.getTrigger())s.addEventListener(e,t)}mount(){}connectedCallback(){queueMicrotask(()=>this.mount())}disconnectedCallback(){this.#s.abort()}};var u=class extends c{constructor(){super()}get animationOptions(){let t={};for(let e of this.getAttributeNames())if(e.startsWith("animation-option-")){let s=this.getAttribute(e),[,,n]=e.split("-");s&&(n==="duration"||n==="delay"?t[n]=Number(s):n==="easing"&&(t[n]=s))}return t}async animateElement(t={element:this.getContent(),options:{}}){let{element:e=this.getContent(),options:s={}}=t,n=this.keyframes;if(n.length&&!window.matchMedia("(prefers-reduced-motion: reduce)").matches){s=Object.assign(this.animationOptions,s),s.duration||(s.duration=200),s.easing||(s.easing="ease-in-out");let r=n.at(0),i=n.at(-1);if(r&&i){let l=["composite","easing","offset"];for(let h of l)delete r[h],delete i[h]}s.direction?.includes("reverse")&&([r,i]=[i,r]),Object.assign(e.style,r),await e.animate(n,s).finished,Object.assign(e.style,i)}}get keyframes(){let t=[];for(let e of this.getAttributeNames()){let s=this.getAttribute(e),[,,n,...r]=e.split("-");if(e.startsWith("animation-keyframe-")){let i=r.map((a,l)=>l<1?a:a.at(0)?.toUpperCase()+a.slice(1)).join("");if(n&&i){n==="from"?n="0":n==="to"?n="1":n=String(parseInt(n)*.01);let a=Number(n),l=t.find(h=>h.offset===a);l?l[i]=s:t.push({[i]:s,offset:a})}}}return t.sort((e,s)=>Number(e.offset)-Number(s.offset)),t}};var g=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[,...s]=e.split("-");s&&t.push({name:s.join("-"),width:Number(this.getAttribute(e))})}t.length&&(this.breakpoints=t),this.breakpoints.sort((e,s)=>s.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 d=class extends u{#s;constructor(){super()}set#r(t){this.getContent().style.left=`${t.x}px`,this.getContent().style.top=`${t.y}px`}async show(t){let e=window.scrollY,s=window.scrollX,n=t instanceof MouseEvent?t.clientX:t.touches[0]?.clientX??0,r=t instanceof MouseEvent?t.clientY:t.touches[0]?.clientY??0,i=n+s,a=r+e;this.getContent().style.position="absolute",this.getContent().style.display="block";let l=this.getContent().offsetWidth+24,h=this.getContent().offsetHeight+6,m=window.innerWidth,f=window.innerHeight;i+l>s+m&&(i=s+m-l),a+h>e+f&&(a=e+f-h),this.#r={x:i,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.#s=setTimeout(()=>{this.show(e)},800)},"touchstart");let t=()=>clearTimeout(this.#s);this.triggerListener(t,"touchend"),this.triggerListener(t,"touchcancel"),this.safeListener("keydown",e=>{e.key==="Escape"&&this.hide()})}};var p=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 y=class extends p{constructor(){super()}mount(){this.triggerListener(async()=>await this.copy())}};var b=class extends u{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 w=class extends u{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())})}};var v=class extends c{#s=[];keyPairs={"(":")","{":"}","[":"]","<":">",'"':'"',"`":"`"};constructor(){super();for(let t of this.#r)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#r(){let t=[];for(let e of this.getTrigger())t.push(this.#a(e));return t}get#h(){let t=this.text.split("```"),e=0;for(let[s,n]of t.entries())if(e+=n.length+3,this.#e<e)return s;return 0}get#t(){return this.textArea.selectionEnd}get#e(){return this.textArea.selectionStart}#n(t,e){this.textArea.setSelectionRange(t,e)}#a(t){let e=t.dataset.type,s=t.dataset.value,n=t.dataset.key??void 0;return{type:e,value:s,key:n}}async#c(t,e,s){if(t.type==="inline")this.text=`${this.text.slice(0,s)}${t.value}${this.text.slice(s)}`;else if(t.type==="wrap")this.text=S(this.text,t.value,e),this.text=S(this.text,this.keyPairs[t.value],s+t.value.length),t.value.length<2&&this.#s.push(t.value);else if(t.type==="block"){let{lines:n,lineNumber:r}=this.#o(),i=t.value.at(0);i&&n[r]?.startsWith(i)?n[r]=t.value.trim()+n[r]:n[r]=t.value+n[r],this.text=n.join(`
|
2
|
+
`)}}async#u(t,e,s){let n=0,r=0;if(/[a-z]/i.test(t)){for(let i=s;i<this.text.length;i++)if(this.text[i]?.match(/[a-z]/i))n?r=i+1:n=i;else if(n)break}else n=e+t.length,r=s+t.length;this.#n(n,r),this.textArea.focus()}async#i(t){let e=this.#t,s=this.#e;await this.#c(t,s,e),this.#u(t.value,s,e)}#m(t){if(t){let e=[];this.#r.forEach(n=>{n.type==="block"&&e.push(n.value)});for(let n=0;n<e.length;n++){let r=e[n];if(r&&t.startsWith(r))return r}let s=N(t);if(s)return`${s}. `}return""}#o(){let t=this.text.split(`
|
3
|
+
`),e=0;for(let s=0;s<t.length;s++){let n=t.at(s)?.length??0;if(e++,e+=n,e>this.#t)return{lines:t,lineNumber:s,columnNumber:this.#t-(e-n-1)}}return{lines:t,lineNumber:0,columnNumber:0}}#l(t,e=!1){let{lines:s}=this.#o();for(let n=t+1;n<s.length;n++){let r=s[n];if(r){let i=N(r);if(i){let a;if(e)if(i>1)a=i-1;else break;else a=i+1;s[n]=r.slice(String(i).length),s[n]=String(a)+s[n]}else break}}this.text=s.join(`
|
4
|
+
`)}mount(){this.textArea.addEventListener("keydown",async t=>{let e=["ArrowUp","ArrowDown","Delete"],s=this.text[this.#t]??"";if(e.includes(t.key))this.#s=[];else if(t.key==="Backspace"){let n=this.text[this.#e-1];if(n&&n in this.keyPairs&&s===this.keyPairs[n]){t.preventDefault();let r=this.#e-1,i=this.#t-1;this.text=x(this.text,r),this.text=x(this.text,i),setTimeout(()=>{this.#n(r,i)},0),this.#s.pop()}if(n===`
|
5
|
+
`&&this.#e===this.#t){t.preventDefault();let r=this.#e-1,{lineNumber:i}=this.#o();this.#l(i,!0),this.text=x(this.text,r),setTimeout(async()=>{this.#n(r,r)},0)}}else if(t.key==="Tab")this.#h%2!==0&&(t.preventDefault(),await this.#i({type:"inline",value:" "}));else if(t.key==="Enter"){let{lines:n,lineNumber:r,columnNumber:i}=this.#o(),a=n.at(r),l=this.#m(a),h=l,m=N(l);if(m&&(l=`${m+1}. `),l&&h.length<i)t.preventDefault(),m&&this.#l(r),await this.#i({type:"inline",value:`
|
6
|
+
${l}`});else if(l&&h.length===i){t.preventDefault();let M=this.#t-h.length;for(let H=0;H<h.length;H++)this.text=x(this.text,this.#t-(H+1));setTimeout(async()=>{this.#n(M,M),this.textArea.focus(),await this.#i({type:"inline",value:`
|
7
|
+
`})},0)}}else{let n=Object.values(this.keyPairs).includes(s),r=this.#e!==this.#t;if((t.ctrlKey||t.metaKey)&&this.#e===this.#t&&(t.key==="c"||t.key==="x")){t.preventDefault();let{lines:i,lineNumber:a,columnNumber:l}=this.#o();if(await navigator.clipboard.writeText(`${a===0&&t.key==="x"?"":`
|
8
|
+
`}${i[a]}`),t.key==="x"){let h=this.#e-l;i.splice(a,1),this.text=i.join(`
|
9
|
+
`),setTimeout(()=>{this.#n(h,h)},0)}}if((t.ctrlKey||t.metaKey)&&t.key){let i=this.#r.find(a=>a.key===t.key);i&&this.#i(i)}else n&&(s===t.key||t.key==="ArrowRight")&&this.#s.length&&!r?(t.preventDefault(),this.#n(this.#e+1,this.#t+1),this.#s.pop()):t.key in this.keyPairs&&(t.preventDefault(),await this.#i({type:"wrap",value:t.key}),this.#s.push(t.key))}}),this.textArea.addEventListener("dblclick",()=>{this.#e!==this.#t&&(this.text[this.#e]===" "&&this.#n(this.#e+1,this.#t),this.text[this.#t-1]===" "&&this.#n(this.#e,this.#t-1))}),this.textArea.addEventListener("click",()=>this.#s=[]),this.triggerListener(t=>{t.target instanceof HTMLElement&&this.#i(this.#a(t.target))})}},N=o=>{let t=o.match(/^(\d+)\./);return t?Number(t[1]):null},S=(o,t,e)=>o.slice(0,e)+t+o.slice(e),x=(o,t)=>o.slice(0,t)+o.slice(t+1);var E=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 k=class extends u{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 p{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()}mount(){let t=this.getContent(HTMLTableSectionElement);for(let e of this.getTrigger())e.addEventListener(this.event,()=>{Array.from(t.querySelectorAll("tr")).sort(P(e,e.toggleAttribute("data-ascending"))).forEach(s=>t.appendChild(s))})}},P=(o,t)=>(s,n)=>{let r=Array.from(o.parentNode?.children??[]).indexOf(o);return((a,l)=>{let h=o.dataset.type??"string";if(h==="string")return new Intl.Collator().compare(a,l);if(h==="boolean"){let m=f=>["0","false","null","undefined"].includes(f)?!1:!!f;return m(a)===m(l)?0:m(a)?-1:1}else return Number(a)-Number(l)})(D(t?s:n,r),D(t?n:s,r))},D=(o,t)=>{let e=o.children[t];return e instanceof HTMLElement?e.dataset.value??e.textContent??"":""};var L=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 A)customElements.define(`drab-${o.toLowerCase()}`,A[o]);})();
|
package/define/index.js
ADDED
@@ -0,0 +1 @@
|
|
1
|
+
import{b as e}from"../chunk-2ZZQECRY.js";import"../chunk-VEVFQB5N.js";import"../chunk-FNJ7AESC.js";import"../chunk-5JV4T7GM.js";import"../chunk-T7RZI3ZL.js";import"../chunk-IQJQPZUL.js";import"../chunk-57VEEUFG.js";import"../chunk-TSTTUEAF.js";import"../chunk-7F7CQUEG.js";import"../chunk-JMJUWKN2.js";import"../chunk-7S6DTKGH.js";import"../chunk-7KU2PRW5.js";import"../chunk-6HYPZWQ4.js";import"../chunk-MXKU7AKV.js";for(let o in e)customElements.define(`drab-${o.toLowerCase()}`,e[o]);
|
@@ -0,0 +1 @@
|
|
1
|
+
"use strict";(()=>{var m=class extends HTMLElement{#e=new AbortController;constructor(){super()}get event(){return this.getAttribute("event")??"click"}set event(e){this.setAttribute("event",e)}getTrigger(){return this.querySelectorAll(this.getAttribute("trigger")??"[data-trigger]")}getContent(e=HTMLElement){let s=this.querySelector(this.getAttribute("content")??"[data-content]");if(s instanceof e)return s;throw new Error("Content not found")}swapContent(e=!0,s=800){let t=this.querySelector(this.getAttribute("swap")??"[data-swap]");if(t){let n=Array.from(this.getContent().childNodes);t instanceof HTMLTemplateElement?this.getContent().replaceChildren(t.content.cloneNode(!0)):this.getContent().replaceChildren(...t.childNodes),e&&setTimeout(()=>this.getContent().replaceChildren(...n),s)}}safeListener(e,s,t=document.body,n={}){n.signal=this.#e.signal,t.addEventListener(e,s,n)}triggerListener(e,s=this.event){for(let t of this.getTrigger())t.addEventListener(s,e)}mount(){}connectedCallback(){queueMicrotask(()=>this.mount())}disconnectedCallback(){this.#e.abort()}};var f=class extends m{constructor(){super()}get animationOptions(){let e={};for(let s of this.getAttributeNames())if(s.startsWith("animation-option-")){let t=this.getAttribute(s),[,,n]=s.split("-");t&&(n==="duration"||n==="delay"?e[n]=Number(t):n==="easing"&&(e[n]=t))}return e}async animateElement(e={element:this.getContent(),options:{}}){let{element:s=this.getContent(),options:t={}}=e,n=this.keyframes;if(n.length&&!window.matchMedia("(prefers-reduced-motion: reduce)").matches){t=Object.assign(this.animationOptions,t),t.duration||(t.duration=200),t.easing||(t.easing="ease-in-out");let o=n.at(0),i=n.at(-1);if(o&&i){let a=["composite","easing","offset"];for(let l of a)delete o[l],delete i[l]}t.direction?.includes("reverse")&&([o,i]=[i,o]),Object.assign(s.style,o),await s.animate(n,t).finished,Object.assign(s.style,i)}}get keyframes(){let e=[];for(let s of this.getAttributeNames()){let t=this.getAttribute(s),[,,n,...o]=s.split("-");if(s.startsWith("animation-keyframe-")){let i=o.map((r,a)=>a<1?r:r.at(0)?.toUpperCase()+r.slice(1)).join("");if(n&&i){n==="from"?n="0":n==="to"?n="1":n=String(parseInt(n)*.01);let r=Number(n),a=e.find(l=>l.offset===r);a?a[i]=t:e.push({[i]:t,offset:r})}}}return e.sort((s,t)=>Number(s.offset)-Number(t.offset)),e}};var c=class extends f{constructor(){super()}get details(){let e=this.getContent(HTMLElement).parentElement;if(!(e instanceof HTMLDetailsElement))throw new Error("Details: HTMLDetailsElement not found.");return e}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(e=>{e.preventDefault(),this.toggle()})}};customElements.define("drab-details",c);})();
|
@@ -0,0 +1 @@
|
|
1
|
+
import{a as e}from"../chunk-JMJUWKN2.js";import"../chunk-7KU2PRW5.js";import"../chunk-MXKU7AKV.js";customElements.define("drab-details",e);
|
@@ -0,0 +1,23 @@
|
|
1
|
+
import { Animate } from '../animate/index.js';
|
2
|
+
import '../base/index.js';
|
3
|
+
|
4
|
+
/**
|
5
|
+
* This element provides a progressive enhancement on top of the `HTMLDetailsElement` to
|
6
|
+
* animate it with the Web Animations API.
|
7
|
+
*
|
8
|
+
* The best way I've found to animate the details element is using CSS grid from this
|
9
|
+
* [Kevin Powell video](https://youtu.be/B_n4YONte5A?t=116). The example demonstrates
|
10
|
+
* this animation. If you know the exact height of the content, you could animate `height`
|
11
|
+
* instead.
|
12
|
+
*/
|
13
|
+
declare class Details extends Animate {
|
14
|
+
constructor();
|
15
|
+
get details(): HTMLDetailsElement;
|
16
|
+
open(): Promise<void>;
|
17
|
+
/** Closes details with animation. */
|
18
|
+
close(): Promise<void>;
|
19
|
+
toggle(): void;
|
20
|
+
mount(): void;
|
21
|
+
}
|
22
|
+
|
23
|
+
export { Details };
|
@@ -0,0 +1 @@
|
|
1
|
+
"use strict";(()=>{var m=class extends HTMLElement{#e=new AbortController;constructor(){super()}get event(){return this.getAttribute("event")??"click"}set event(e){this.setAttribute("event",e)}getTrigger(){return this.querySelectorAll(this.getAttribute("trigger")??"[data-trigger]")}getContent(e=HTMLElement){let s=this.querySelector(this.getAttribute("content")??"[data-content]");if(s instanceof e)return s;throw new Error("Content not found")}swapContent(e=!0,s=800){let t=this.querySelector(this.getAttribute("swap")??"[data-swap]");if(t){let n=Array.from(this.getContent().childNodes);t instanceof HTMLTemplateElement?this.getContent().replaceChildren(t.content.cloneNode(!0)):this.getContent().replaceChildren(...t.childNodes),e&&setTimeout(()=>this.getContent().replaceChildren(...n),s)}}safeListener(e,s,t=document.body,n={}){n.signal=this.#e.signal,t.addEventListener(e,s,n)}triggerListener(e,s=this.event){for(let t of this.getTrigger())t.addEventListener(s,e)}mount(){}connectedCallback(){queueMicrotask(()=>this.mount())}disconnectedCallback(){this.#e.abort()}};var f=class extends m{constructor(){super()}get animationOptions(){let e={};for(let s of this.getAttributeNames())if(s.startsWith("animation-option-")){let t=this.getAttribute(s),[,,n]=s.split("-");t&&(n==="duration"||n==="delay"?e[n]=Number(t):n==="easing"&&(e[n]=t))}return e}async animateElement(e={element:this.getContent(),options:{}}){let{element:s=this.getContent(),options:t={}}=e,n=this.keyframes;if(n.length&&!window.matchMedia("(prefers-reduced-motion: reduce)").matches){t=Object.assign(this.animationOptions,t),t.duration||(t.duration=200),t.easing||(t.easing="ease-in-out");let o=n.at(0),i=n.at(-1);if(o&&i){let a=["composite","easing","offset"];for(let l of a)delete o[l],delete i[l]}t.direction?.includes("reverse")&&([o,i]=[i,o]),Object.assign(s.style,o),await s.animate(n,t).finished,Object.assign(s.style,i)}}get keyframes(){let e=[];for(let s of this.getAttributeNames()){let t=this.getAttribute(s),[,,n,...o]=s.split("-");if(s.startsWith("animation-keyframe-")){let i=o.map((r,a)=>a<1?r:r.at(0)?.toUpperCase()+r.slice(1)).join("");if(n&&i){n==="from"?n="0":n==="to"?n="1":n=String(parseInt(n)*.01);let r=Number(n),a=e.find(l=>l.offset===r);a?a[i]=t:e.push({[i]:t,offset:r})}}}return e.sort((s,t)=>Number(s.offset)-Number(t.offset)),e}};var u=class extends f{constructor(){super()}get details(){let e=this.getContent(HTMLElement).parentElement;if(!(e instanceof HTMLDetailsElement))throw new Error("Details: HTMLDetailsElement not found.");return e}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(e=>{e.preventDefault(),this.toggle()})}};})();
|
package/details/index.js
ADDED
@@ -0,0 +1 @@
|
|
1
|
+
import{a}from"../chunk-JMJUWKN2.js";import"../chunk-7KU2PRW5.js";import"../chunk-MXKU7AKV.js";export{a as Details};
|
@@ -0,0 +1 @@
|
|
1
|
+
"use strict";(()=>{var m=class extends HTMLElement{#e=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 s=this.querySelector(this.getAttribute("content")??"[data-content]");if(s instanceof t)return s;throw new Error("Content not found")}swapContent(t=!0,s=800){let e=this.querySelector(this.getAttribute("swap")??"[data-swap]");if(e){let n=Array.from(this.getContent().childNodes);e instanceof HTMLTemplateElement?this.getContent().replaceChildren(e.content.cloneNode(!0)):this.getContent().replaceChildren(...e.childNodes),t&&setTimeout(()=>this.getContent().replaceChildren(...n),s)}}safeListener(t,s,e=document.body,n={}){n.signal=this.#e.signal,e.addEventListener(t,s,n)}triggerListener(t,s=this.event){for(let e of this.getTrigger())e.addEventListener(s,t)}mount(){}connectedCallback(){queueMicrotask(()=>this.mount())}disconnectedCallback(){this.#e.abort()}};var c=class extends m{constructor(){super()}get animationOptions(){let t={};for(let s of this.getAttributeNames())if(s.startsWith("animation-option-")){let e=this.getAttribute(s),[,,n]=s.split("-");e&&(n==="duration"||n==="delay"?t[n]=Number(e):n==="easing"&&(t[n]=e))}return t}async animateElement(t={element:this.getContent(),options:{}}){let{element:s=this.getContent(),options:e={}}=t,n=this.keyframes;if(n.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 o=n.at(0),i=n.at(-1);if(o&&i){let a=["composite","easing","offset"];for(let l of a)delete o[l],delete i[l]}e.direction?.includes("reverse")&&([o,i]=[i,o]),Object.assign(s.style,o),await s.animate(n,e).finished,Object.assign(s.style,i)}}get keyframes(){let t=[];for(let s of this.getAttributeNames()){let e=this.getAttribute(s),[,,n,...o]=s.split("-");if(s.startsWith("animation-keyframe-")){let i=o.map((r,a)=>a<1?r:r.at(0)?.toUpperCase()+r.slice(1)).join("");if(n&&i){n==="from"?n="0":n==="to"?n="1":n=String(parseInt(n)*.01);let r=Number(n),a=t.find(l=>l.offset===r);a?a[i]=e:t.push({[i]:e,offset:r})}}}return t.sort((s,e)=>Number(s.offset)-Number(e.offset)),t}};var f=class extends c{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())})}};customElements.define("drab-dialog",f);})();
|
package/dialog/define.js
ADDED
@@ -0,0 +1 @@
|
|
1
|
+
import{a as o}from"../chunk-7S6DTKGH.js";import"../chunk-7KU2PRW5.js";import"../chunk-MXKU7AKV.js";customElements.define("drab-dialog",o);
|
@@ -0,0 +1,20 @@
|
|
1
|
+
import { Animate } from '../animate/index.js';
|
2
|
+
import '../base/index.js';
|
3
|
+
|
4
|
+
/**
|
5
|
+
* Provides triggers and animations for the `HTMLDialogElement`.
|
6
|
+
*/
|
7
|
+
declare class Dialog extends Animate {
|
8
|
+
constructor();
|
9
|
+
/** The `HTMLDialogElement` within the element. */
|
10
|
+
get dialog(): HTMLDialogElement;
|
11
|
+
/** `HTMLDialogElement.showModal()` with animation. */
|
12
|
+
show(): Promise<void>;
|
13
|
+
/** `HTMLDialogElement.close()` with animation. */
|
14
|
+
close(): Promise<void>;
|
15
|
+
/** `show` or `close` depending on the dialog's `open` attribute. */
|
16
|
+
toggle(): Promise<void>;
|
17
|
+
mount(): void;
|
18
|
+
}
|
19
|
+
|
20
|
+
export { Dialog };
|
@@ -0,0 +1 @@
|
|
1
|
+
"use strict";(()=>{var c=class extends HTMLElement{#e=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 s=this.querySelector(this.getAttribute("content")??"[data-content]");if(s instanceof t)return s;throw new Error("Content not found")}swapContent(t=!0,s=800){let e=this.querySelector(this.getAttribute("swap")??"[data-swap]");if(e){let n=Array.from(this.getContent().childNodes);e instanceof HTMLTemplateElement?this.getContent().replaceChildren(e.content.cloneNode(!0)):this.getContent().replaceChildren(...e.childNodes),t&&setTimeout(()=>this.getContent().replaceChildren(...n),s)}}safeListener(t,s,e=document.body,n={}){n.signal=this.#e.signal,e.addEventListener(t,s,n)}triggerListener(t,s=this.event){for(let e of this.getTrigger())e.addEventListener(s,t)}mount(){}connectedCallback(){queueMicrotask(()=>this.mount())}disconnectedCallback(){this.#e.abort()}};var m=class extends c{constructor(){super()}get animationOptions(){let t={};for(let s of this.getAttributeNames())if(s.startsWith("animation-option-")){let e=this.getAttribute(s),[,,n]=s.split("-");e&&(n==="duration"||n==="delay"?t[n]=Number(e):n==="easing"&&(t[n]=e))}return t}async animateElement(t={element:this.getContent(),options:{}}){let{element:s=this.getContent(),options:e={}}=t,n=this.keyframes;if(n.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 o=n.at(0),i=n.at(-1);if(o&&i){let a=["composite","easing","offset"];for(let l of a)delete o[l],delete i[l]}e.direction?.includes("reverse")&&([o,i]=[i,o]),Object.assign(s.style,o),await s.animate(n,e).finished,Object.assign(s.style,i)}}get keyframes(){let t=[];for(let s of this.getAttributeNames()){let e=this.getAttribute(s),[,,n,...o]=s.split("-");if(s.startsWith("animation-keyframe-")){let i=o.map((r,a)=>a<1?r:r.at(0)?.toUpperCase()+r.slice(1)).join("");if(n&&i){n==="from"?n="0":n==="to"?n="1":n=String(parseInt(n)*.01);let r=Number(n),a=t.find(l=>l.offset===r);a?a[i]=e:t.push({[i]:e,offset:r})}}}return t.sort((s,e)=>Number(s.offset)-Number(e.offset)),t}};var g=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())})}};})();
|
package/dialog/index.js
ADDED
@@ -0,0 +1 @@
|
|
1
|
+
import{a}from"../chunk-7S6DTKGH.js";import"../chunk-7KU2PRW5.js";import"../chunk-MXKU7AKV.js";export{a as Dialog};
|
@@ -0,0 +1,9 @@
|
|
1
|
+
"use strict";(()=>{var c=class extends HTMLElement{#n=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 s=this.querySelector(this.getAttribute("content")??"[data-content]");if(s instanceof t)return s;throw new Error("Content not found")}swapContent(t=!0,s=800){let n=this.querySelector(this.getAttribute("swap")??"[data-swap]");if(n){let e=Array.from(this.getContent().childNodes);n instanceof HTMLTemplateElement?this.getContent().replaceChildren(n.content.cloneNode(!0)):this.getContent().replaceChildren(...n.childNodes),t&&setTimeout(()=>this.getContent().replaceChildren(...e),s)}}safeListener(t,s,n=document.body,e={}){e.signal=this.#n.signal,n.addEventListener(t,s,e)}triggerListener(t,s=this.event){for(let n of this.getTrigger())n.addEventListener(s,t)}mount(){}connectedCallback(){queueMicrotask(()=>this.mount())}disconnectedCallback(){this.#n.abort()}};var f=class extends c{#n=[];keyPairs={"(":")","{":"}","[":"]","<":">",'"':'"',"`":"`"};constructor(){super();for(let t of this.#l)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#l(){let t=[];for(let s of this.getTrigger())t.push(this.#o(s));return t}get#h(){let t=this.text.split("```"),s=0;for(let[n,e]of t.entries())if(s+=e.length+3,this.#e<s)return n;return 0}get#t(){return this.textArea.selectionEnd}get#e(){return this.textArea.selectionStart}#s(t,s){this.textArea.setSelectionRange(t,s)}#o(t){let s=t.dataset.type,n=t.dataset.value,e=t.dataset.key??void 0;return{type:s,value:n,key:e}}async#c(t,s,n){if(t.type==="inline")this.text=`${this.text.slice(0,n)}${t.value}${this.text.slice(n)}`;else if(t.type==="wrap")this.text=d(this.text,t.value,s),this.text=d(this.text,this.keyPairs[t.value],n+t.value.length),t.value.length<2&&this.#n.push(t.value);else if(t.type==="block"){let{lines:e,lineNumber:i}=this.#r(),r=t.value.at(0);r&&e[i]?.startsWith(r)?e[i]=t.value.trim()+e[i]:e[i]=t.value+e[i],this.text=e.join(`
|
2
|
+
`)}}async#u(t,s,n){let e=0,i=0;if(/[a-z]/i.test(t)){for(let r=n;r<this.text.length;r++)if(this.text[r]?.match(/[a-z]/i))e?i=r+1:e=r;else if(e)break}else e=s+t.length,i=n+t.length;this.#s(e,i),this.textArea.focus()}async#i(t){let s=this.#t,n=this.#e;await this.#c(t,n,s),this.#u(t.value,n,s)}#f(t){if(t){let s=[];this.#l.forEach(e=>{e.type==="block"&&s.push(e.value)});for(let e=0;e<s.length;e++){let i=s[e];if(i&&t.startsWith(i))return i}let n=p(t);if(n)return`${n}. `}return""}#r(){let t=this.text.split(`
|
3
|
+
`),s=0;for(let n=0;n<t.length;n++){let e=t.at(n)?.length??0;if(s++,s+=e,s>this.#t)return{lines:t,lineNumber:n,columnNumber:this.#t-(s-e-1)}}return{lines:t,lineNumber:0,columnNumber:0}}#a(t,s=!1){let{lines:n}=this.#r();for(let e=t+1;e<n.length;e++){let i=n[e];if(i){let r=p(i);if(r){let l;if(s)if(r>1)l=r-1;else break;else l=r+1;n[e]=i.slice(String(r).length),n[e]=String(l)+n[e]}else break}}this.text=n.join(`
|
4
|
+
`)}mount(){this.textArea.addEventListener("keydown",async t=>{let s=["ArrowUp","ArrowDown","Delete"],n=this.text[this.#t]??"";if(s.includes(t.key))this.#n=[];else if(t.key==="Backspace"){let e=this.text[this.#e-1];if(e&&e in this.keyPairs&&n===this.keyPairs[e]){t.preventDefault();let i=this.#e-1,r=this.#t-1;this.text=u(this.text,i),this.text=u(this.text,r),setTimeout(()=>{this.#s(i,r)},0),this.#n.pop()}if(e===`
|
5
|
+
`&&this.#e===this.#t){t.preventDefault();let i=this.#e-1,{lineNumber:r}=this.#r();this.#a(r,!0),this.text=u(this.text,i),setTimeout(async()=>{this.#s(i,i)},0)}}else if(t.key==="Tab")this.#h%2!==0&&(t.preventDefault(),await this.#i({type:"inline",value:" "}));else if(t.key==="Enter"){let{lines:e,lineNumber:i,columnNumber:r}=this.#r(),l=e.at(i),a=this.#f(l),h=a,g=p(a);if(g&&(a=`${g+1}. `),a&&h.length<r)t.preventDefault(),g&&this.#a(i),await this.#i({type:"inline",value:`
|
6
|
+
${a}`});else if(a&&h.length===r){t.preventDefault();let y=this.#t-h.length;for(let m=0;m<h.length;m++)this.text=u(this.text,this.#t-(m+1));setTimeout(async()=>{this.#s(y,y),this.textArea.focus(),await this.#i({type:"inline",value:`
|
7
|
+
`})},0)}}else{let e=Object.values(this.keyPairs).includes(n),i=this.#e!==this.#t;if((t.ctrlKey||t.metaKey)&&this.#e===this.#t&&(t.key==="c"||t.key==="x")){t.preventDefault();let{lines:r,lineNumber:l,columnNumber:a}=this.#r();if(await navigator.clipboard.writeText(`${l===0&&t.key==="x"?"":`
|
8
|
+
`}${r[l]}`),t.key==="x"){let h=this.#e-a;r.splice(l,1),this.text=r.join(`
|
9
|
+
`),setTimeout(()=>{this.#s(h,h)},0)}}if((t.ctrlKey||t.metaKey)&&t.key){let r=this.#l.find(l=>l.key===t.key);r&&this.#i(r)}else e&&(n===t.key||t.key==="ArrowRight")&&this.#n.length&&!i?(t.preventDefault(),this.#s(this.#e+1,this.#t+1),this.#n.pop()):t.key in this.keyPairs&&(t.preventDefault(),await this.#i({type:"wrap",value:t.key}),this.#n.push(t.key))}}),this.textArea.addEventListener("dblclick",()=>{this.#e!==this.#t&&(this.text[this.#e]===" "&&this.#s(this.#e+1,this.#t),this.text[this.#t-1]===" "&&this.#s(this.#e,this.#t-1))}),this.textArea.addEventListener("click",()=>this.#n=[]),this.triggerListener(t=>{t.target instanceof HTMLElement&&this.#i(this.#o(t.target))})}},p=o=>{let t=o.match(/^(\d+)\./);return t?Number(t[1]):null},d=(o,t,s)=>o.slice(0,s)+t+o.slice(s),u=(o,t)=>o.slice(0,t)+o.slice(t+1);customElements.define("drab-editor",f);})();
|
package/editor/define.js
ADDED
@@ -0,0 +1 @@
|
|
1
|
+
import{a as e}from"../chunk-FNJ7AESC.js";import"../chunk-MXKU7AKV.js";customElements.define("drab-editor",e);
|
@@ -0,0 +1,58 @@
|
|
1
|
+
import { Base } from '../base/index.js';
|
2
|
+
|
3
|
+
/**
|
4
|
+
* A piece of content to insert into the `textarea`.
|
5
|
+
*/
|
6
|
+
type ContentElement = {
|
7
|
+
/** How to insert the content. */
|
8
|
+
type: "block" | "inline" | "wrap";
|
9
|
+
/** The value to insert. */
|
10
|
+
value: string;
|
11
|
+
/** An optional keyboard shortcut. */
|
12
|
+
key?: string;
|
13
|
+
};
|
14
|
+
/**
|
15
|
+
* Enhances the `textarea` element with controls to add content and keyboard shortcuts. Compared to other WYSIWYG editors, the `text` value is just a `string`, so you can easily store it in a database or manipulate it without learning a separate API.
|
16
|
+
*
|
17
|
+
* `data-value`
|
18
|
+
*
|
19
|
+
* Set the value of the text to be inserted using the `data-value` attribute on the `trigger`.
|
20
|
+
*
|
21
|
+
* `data-type`
|
22
|
+
*
|
23
|
+
* Set the `data-type` attribute of the `trigger` to specify how the content should be inserted into the `textarea`.
|
24
|
+
*
|
25
|
+
* - `block` will be inserted at the beginning of the selected line.
|
26
|
+
* - `wrap` will be inserted before and after the current selection.
|
27
|
+
* - `inline` will be inserted at the current selection.
|
28
|
+
*
|
29
|
+
* `data-key`
|
30
|
+
*
|
31
|
+
* Add a `ctrl`/`meta` keyboard shortcut for the content based on the `data-key` attribute.
|
32
|
+
*
|
33
|
+
* Other features:
|
34
|
+
*
|
35
|
+
* - Automatically adds closing characters for `keyPairs`. For example, when typing `(`, `)` will be inserted and typed over when reached. All content with `data-type="wrap"` is also added to `keyPairs`.
|
36
|
+
* - Highlights the first word of the text inserted if it contains letters.
|
37
|
+
* - Automatically increments/decrements ordered lists.
|
38
|
+
* - Adds the starting character to the next line for `block` content.
|
39
|
+
* - On double click, highlight is corrected to only highlight the current word without space around it.
|
40
|
+
* - `tab` key will indent and not change focus if the selection is within a code block (three backticks).
|
41
|
+
* - When text is highlighted and a `wrap` character `keyPair` is typed, the highlighted text will be wrapped with the character instead of removing it. For example, if a word is highlighted and the `"` character is typed, the work will be surrounded by `"`s.
|
42
|
+
*/
|
43
|
+
declare class Editor extends Base {
|
44
|
+
#private;
|
45
|
+
/** The characters that will be automatically closed when typed. */
|
46
|
+
keyPairs: {
|
47
|
+
[key: string]: string;
|
48
|
+
};
|
49
|
+
constructor();
|
50
|
+
/** The `content`, expects an `HTMLTextAreaElement`. */
|
51
|
+
get textArea(): HTMLTextAreaElement;
|
52
|
+
/** The current `value` of the `textarea`. */
|
53
|
+
get text(): string;
|
54
|
+
set text(value: string);
|
55
|
+
mount(): void;
|
56
|
+
}
|
57
|
+
|
58
|
+
export { type ContentElement, Editor };
|
@@ -0,0 +1,9 @@
|
|
1
|
+
"use strict";(()=>{var c=class extends HTMLElement{#n=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 s=this.querySelector(this.getAttribute("content")??"[data-content]");if(s instanceof t)return s;throw new Error("Content not found")}swapContent(t=!0,s=800){let n=this.querySelector(this.getAttribute("swap")??"[data-swap]");if(n){let e=Array.from(this.getContent().childNodes);n instanceof HTMLTemplateElement?this.getContent().replaceChildren(n.content.cloneNode(!0)):this.getContent().replaceChildren(...n.childNodes),t&&setTimeout(()=>this.getContent().replaceChildren(...e),s)}}safeListener(t,s,n=document.body,e={}){e.signal=this.#n.signal,n.addEventListener(t,s,e)}triggerListener(t,s=this.event){for(let n of this.getTrigger())n.addEventListener(s,t)}mount(){}connectedCallback(){queueMicrotask(()=>this.mount())}disconnectedCallback(){this.#n.abort()}};var y=class extends c{#n=[];keyPairs={"(":")","{":"}","[":"]","<":">",'"':'"',"`":"`"};constructor(){super();for(let t of this.#l)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#l(){let t=[];for(let s of this.getTrigger())t.push(this.#o(s));return t}get#h(){let t=this.text.split("```"),s=0;for(let[n,e]of t.entries())if(s+=e.length+3,this.#e<s)return n;return 0}get#t(){return this.textArea.selectionEnd}get#e(){return this.textArea.selectionStart}#s(t,s){this.textArea.setSelectionRange(t,s)}#o(t){let s=t.dataset.type,n=t.dataset.value,e=t.dataset.key??void 0;return{type:s,value:n,key:e}}async#c(t,s,n){if(t.type==="inline")this.text=`${this.text.slice(0,n)}${t.value}${this.text.slice(n)}`;else if(t.type==="wrap")this.text=d(this.text,t.value,s),this.text=d(this.text,this.keyPairs[t.value],n+t.value.length),t.value.length<2&&this.#n.push(t.value);else if(t.type==="block"){let{lines:e,lineNumber:i}=this.#r(),r=t.value.at(0);r&&e[i]?.startsWith(r)?e[i]=t.value.trim()+e[i]:e[i]=t.value+e[i],this.text=e.join(`
|
2
|
+
`)}}async#u(t,s,n){let e=0,i=0;if(/[a-z]/i.test(t)){for(let r=n;r<this.text.length;r++)if(this.text[r]?.match(/[a-z]/i))e?i=r+1:e=r;else if(e)break}else e=s+t.length,i=n+t.length;this.#s(e,i),this.textArea.focus()}async#i(t){let s=this.#t,n=this.#e;await this.#c(t,n,s),this.#u(t.value,n,s)}#g(t){if(t){let s=[];this.#l.forEach(e=>{e.type==="block"&&s.push(e.value)});for(let e=0;e<s.length;e++){let i=s[e];if(i&&t.startsWith(i))return i}let n=m(t);if(n)return`${n}. `}return""}#r(){let t=this.text.split(`
|
3
|
+
`),s=0;for(let n=0;n<t.length;n++){let e=t.at(n)?.length??0;if(s++,s+=e,s>this.#t)return{lines:t,lineNumber:n,columnNumber:this.#t-(s-e-1)}}return{lines:t,lineNumber:0,columnNumber:0}}#a(t,s=!1){let{lines:n}=this.#r();for(let e=t+1;e<n.length;e++){let i=n[e];if(i){let r=m(i);if(r){let l;if(s)if(r>1)l=r-1;else break;else l=r+1;n[e]=i.slice(String(r).length),n[e]=String(l)+n[e]}else break}}this.text=n.join(`
|
4
|
+
`)}mount(){this.textArea.addEventListener("keydown",async t=>{let s=["ArrowUp","ArrowDown","Delete"],n=this.text[this.#t]??"";if(s.includes(t.key))this.#n=[];else if(t.key==="Backspace"){let e=this.text[this.#e-1];if(e&&e in this.keyPairs&&n===this.keyPairs[e]){t.preventDefault();let i=this.#e-1,r=this.#t-1;this.text=u(this.text,i),this.text=u(this.text,r),setTimeout(()=>{this.#s(i,r)},0),this.#n.pop()}if(e===`
|
5
|
+
`&&this.#e===this.#t){t.preventDefault();let i=this.#e-1,{lineNumber:r}=this.#r();this.#a(r,!0),this.text=u(this.text,i),setTimeout(async()=>{this.#s(i,i)},0)}}else if(t.key==="Tab")this.#h%2!==0&&(t.preventDefault(),await this.#i({type:"inline",value:" "}));else if(t.key==="Enter"){let{lines:e,lineNumber:i,columnNumber:r}=this.#r(),l=e.at(i),a=this.#g(l),h=a,g=m(a);if(g&&(a=`${g+1}. `),a&&h.length<r)t.preventDefault(),g&&this.#a(i),await this.#i({type:"inline",value:`
|
6
|
+
${a}`});else if(a&&h.length===r){t.preventDefault();let p=this.#t-h.length;for(let f=0;f<h.length;f++)this.text=u(this.text,this.#t-(f+1));setTimeout(async()=>{this.#s(p,p),this.textArea.focus(),await this.#i({type:"inline",value:`
|
7
|
+
`})},0)}}else{let e=Object.values(this.keyPairs).includes(n),i=this.#e!==this.#t;if((t.ctrlKey||t.metaKey)&&this.#e===this.#t&&(t.key==="c"||t.key==="x")){t.preventDefault();let{lines:r,lineNumber:l,columnNumber:a}=this.#r();if(await navigator.clipboard.writeText(`${l===0&&t.key==="x"?"":`
|
8
|
+
`}${r[l]}`),t.key==="x"){let h=this.#e-a;r.splice(l,1),this.text=r.join(`
|
9
|
+
`),setTimeout(()=>{this.#s(h,h)},0)}}if((t.ctrlKey||t.metaKey)&&t.key){let r=this.#l.find(l=>l.key===t.key);r&&this.#i(r)}else e&&(n===t.key||t.key==="ArrowRight")&&this.#n.length&&!i?(t.preventDefault(),this.#s(this.#e+1,this.#t+1),this.#n.pop()):t.key in this.keyPairs&&(t.preventDefault(),await this.#i({type:"wrap",value:t.key}),this.#n.push(t.key))}}),this.textArea.addEventListener("dblclick",()=>{this.#e!==this.#t&&(this.text[this.#e]===" "&&this.#s(this.#e+1,this.#t),this.text[this.#t-1]===" "&&this.#s(this.#e,this.#t-1))}),this.textArea.addEventListener("click",()=>this.#n=[]),this.triggerListener(t=>{t.target instanceof HTMLElement&&this.#i(this.#o(t.target))})}},m=o=>{let t=o.match(/^(\d+)\./);return t?Number(t[1]):null},d=(o,t,s)=>o.slice(0,s)+t+o.slice(s),u=(o,t)=>o.slice(0,t)+o.slice(t+1);})();
|
package/editor/index.js
ADDED
@@ -0,0 +1 @@
|
|
1
|
+
import{a}from"../chunk-FNJ7AESC.js";import"../chunk-MXKU7AKV.js";export{a as Editor};
|
@@ -0,0 +1 @@
|
|
1
|
+
"use strict";(()=>{var s=class extends HTMLElement{#e=new AbortController;constructor(){super()}get event(){return this.getAttribute("event")??"click"}set event(e){this.setAttribute("event",e)}getTrigger(){return this.querySelectorAll(this.getAttribute("trigger")??"[data-trigger]")}getContent(e=HTMLElement){let t=this.querySelector(this.getAttribute("content")??"[data-content]");if(t instanceof e)return t;throw new Error("Content not found")}swapContent(e=!0,t=800){let n=this.querySelector(this.getAttribute("swap")??"[data-swap]");if(n){let r=Array.from(this.getContent().childNodes);n instanceof HTMLTemplateElement?this.getContent().replaceChildren(n.content.cloneNode(!0)):this.getContent().replaceChildren(...n.childNodes),e&&setTimeout(()=>this.getContent().replaceChildren(...r),t)}}safeListener(e,t,n=document.body,r={}){r.signal=this.#e.signal,n.addEventListener(e,t,r)}triggerListener(e,t=this.event){for(let n of this.getTrigger())n.addEventListener(t,e)}mount(){}connectedCallback(){queueMicrotask(()=>this.mount())}disconnectedCallback(){this.#e.abort()}};var o=class extends s{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 e of this.getTrigger())!this.fullscreenSupported()&&"disabled"in e&&(e.disabled=!0)}};customElements.define("drab-fullscreen",o);})();
|
@@ -0,0 +1 @@
|
|
1
|
+
import{a as e}from"../chunk-5JV4T7GM.js";import"../chunk-MXKU7AKV.js";customElements.define("drab-fullscreen",e);
|
@@ -0,0 +1,23 @@
|
|
1
|
+
import { Base } from '../base/index.js';
|
2
|
+
|
3
|
+
/**
|
4
|
+
* Toggles the `documentElement` or `content` element to fullscreen mode.
|
5
|
+
*
|
6
|
+
* Disables the `trigger` if fullscreen is not supported.
|
7
|
+
*/
|
8
|
+
declare class Fullscreen extends Base {
|
9
|
+
constructor();
|
10
|
+
/**
|
11
|
+
* @returns `true` if fullscreen is currently enabled.
|
12
|
+
*/
|
13
|
+
isFullscreen(): boolean;
|
14
|
+
/**
|
15
|
+
* @returns `true` if fullscreen is supported.
|
16
|
+
*/
|
17
|
+
fullscreenSupported(): boolean;
|
18
|
+
/** Enables or disables fullscreen mode based on the current state. */
|
19
|
+
toggle(): void;
|
20
|
+
mount(): void;
|
21
|
+
}
|
22
|
+
|
23
|
+
export { Fullscreen };
|
@@ -0,0 +1 @@
|
|
1
|
+
"use strict";(()=>{var s=class extends HTMLElement{#e=new AbortController;constructor(){super()}get event(){return this.getAttribute("event")??"click"}set event(e){this.setAttribute("event",e)}getTrigger(){return this.querySelectorAll(this.getAttribute("trigger")??"[data-trigger]")}getContent(e=HTMLElement){let t=this.querySelector(this.getAttribute("content")??"[data-content]");if(t instanceof e)return t;throw new Error("Content not found")}swapContent(e=!0,t=800){let n=this.querySelector(this.getAttribute("swap")??"[data-swap]");if(n){let r=Array.from(this.getContent().childNodes);n instanceof HTMLTemplateElement?this.getContent().replaceChildren(n.content.cloneNode(!0)):this.getContent().replaceChildren(...n.childNodes),e&&setTimeout(()=>this.getContent().replaceChildren(...r),t)}}safeListener(e,t,n=document.body,r={}){r.signal=this.#e.signal,n.addEventListener(e,t,r)}triggerListener(e,t=this.event){for(let n of this.getTrigger())n.addEventListener(t,e)}mount(){}connectedCallback(){queueMicrotask(()=>this.mount())}disconnectedCallback(){this.#e.abort()}};var i=class extends s{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 e of this.getTrigger())!this.fullscreenSupported()&&"disabled"in e&&(e.disabled=!0)}};})();
|
@@ -0,0 +1 @@
|
|
1
|
+
import{a}from"../chunk-5JV4T7GM.js";import"../chunk-MXKU7AKV.js";export{a as Fullscreen};
|
@@ -0,0 +1,17 @@
|
|
1
|
+
import { Base } from './base/index.js';
|
2
|
+
|
3
|
+
declare class BaseCopy extends Base {
|
4
|
+
constructor();
|
5
|
+
/**
|
6
|
+
* @default "" the empty string
|
7
|
+
*/
|
8
|
+
get value(): string;
|
9
|
+
set value(value: string);
|
10
|
+
/**
|
11
|
+
* Copies the `text`.
|
12
|
+
* @param text The `text` to share
|
13
|
+
*/
|
14
|
+
copy(text?: string): Promise<void>;
|
15
|
+
}
|
16
|
+
|
17
|
+
export { BaseCopy as B };
|
package/index.d.ts
ADDED
@@ -0,0 +1,14 @@
|
|
1
|
+
export { Base } from './base/index.js';
|
2
|
+
export { Animate } from './animate/index.js';
|
3
|
+
export { Breakpoint } from './breakpoint/index.js';
|
4
|
+
export { ContextMenu } from './contextmenu/index.js';
|
5
|
+
export { Copy } from './copy/index.js';
|
6
|
+
export { Details } from './details/index.js';
|
7
|
+
export { Dialog } from './dialog/index.js';
|
8
|
+
export { Editor } from './editor/index.js';
|
9
|
+
export { Fullscreen } from './fullscreen/index.js';
|
10
|
+
export { Popover } from './popover/index.js';
|
11
|
+
export { Share } from './share/index.js';
|
12
|
+
export { TableSort } from './tablesort/index.js';
|
13
|
+
export { YouTube } from './youtube/index.js';
|
14
|
+
import './index-SyRipepB.js';
|
package/index.iife.js
ADDED
@@ -0,0 +1,9 @@
|
|
1
|
+
"use strict";(()=>{var c=class extends HTMLElement{#s=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 s=this.querySelector(this.getAttribute("swap")??"[data-swap]");if(s){let n=Array.from(this.getContent().childNodes);s instanceof HTMLTemplateElement?this.getContent().replaceChildren(s.content.cloneNode(!0)):this.getContent().replaceChildren(...s.childNodes),t&&setTimeout(()=>this.getContent().replaceChildren(...n),e)}}safeListener(t,e,s=document.body,n={}){n.signal=this.#s.signal,s.addEventListener(t,e,n)}triggerListener(t,e=this.event){for(let s of this.getTrigger())s.addEventListener(e,t)}mount(){}connectedCallback(){queueMicrotask(()=>this.mount())}disconnectedCallback(){this.#s.abort()}};var m=class extends c{constructor(){super()}get animationOptions(){let t={};for(let e of this.getAttributeNames())if(e.startsWith("animation-option-")){let s=this.getAttribute(e),[,,n]=e.split("-");s&&(n==="duration"||n==="delay"?t[n]=Number(s):n==="easing"&&(t[n]=s))}return t}async animateElement(t={element:this.getContent(),options:{}}){let{element:e=this.getContent(),options:s={}}=t,n=this.keyframes;if(n.length&&!window.matchMedia("(prefers-reduced-motion: reduce)").matches){s=Object.assign(this.animationOptions,s),s.duration||(s.duration=200),s.easing||(s.easing="ease-in-out");let r=n.at(0),i=n.at(-1);if(r&&i){let l=["composite","easing","offset"];for(let h of l)delete r[h],delete i[h]}s.direction?.includes("reverse")&&([r,i]=[i,r]),Object.assign(e.style,r),await e.animate(n,s).finished,Object.assign(e.style,i)}}get keyframes(){let t=[];for(let e of this.getAttributeNames()){let s=this.getAttribute(e),[,,n,...r]=e.split("-");if(e.startsWith("animation-keyframe-")){let i=r.map((o,l)=>l<1?o:o.at(0)?.toUpperCase()+o.slice(1)).join("");if(n&&i){n==="from"?n="0":n==="to"?n="1":n=String(parseInt(n)*.01);let o=Number(n),l=t.find(h=>h.offset===o);l?l[i]=s:t.push({[i]:s,offset:o})}}}return t.sort((e,s)=>Number(e.offset)-Number(s.offset)),t}};var b=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[,...s]=e.split("-");s&&t.push({name:s.join("-"),width:Number(this.getAttribute(e))})}t.length&&(this.breakpoints=t),this.breakpoints.sort((e,s)=>s.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 w=class extends m{#s;constructor(){super()}set#r(t){this.getContent().style.left=`${t.x}px`,this.getContent().style.top=`${t.y}px`}async show(t){let e=window.scrollY,s=window.scrollX,n=t instanceof MouseEvent?t.clientX:t.touches[0]?.clientX??0,r=t instanceof MouseEvent?t.clientY:t.touches[0]?.clientY??0,i=n+s,o=r+e;this.getContent().style.position="absolute",this.getContent().style.display="block";let l=this.getContent().offsetWidth+24,h=this.getContent().offsetHeight+6,u=window.innerWidth,f=window.innerHeight;i+l>s+u&&(i=s+u-l),o+h>e+f&&(o=e+f-h),this.#r={x:i,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.#s=setTimeout(()=>{this.show(e)},800)},"touchstart");let t=()=>clearTimeout(this.#s);this.triggerListener(t,"touchend"),this.triggerListener(t,"touchcancel"),this.safeListener("keydown",e=>{e.key==="Escape"&&this.hide()})}};var p=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 x=class extends p{constructor(){super()}mount(){this.triggerListener(async()=>await this.copy())}};var v=class extends m{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 E=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())})}};var T=class extends c{#s=[];keyPairs={"(":")","{":"}","[":"]","<":">",'"':'"',"`":"`"};constructor(){super();for(let t of this.#r)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#r(){let t=[];for(let e of this.getTrigger())t.push(this.#a(e));return t}get#h(){let t=this.text.split("```"),e=0;for(let[s,n]of t.entries())if(e+=n.length+3,this.#e<e)return s;return 0}get#t(){return this.textArea.selectionEnd}get#e(){return this.textArea.selectionStart}#n(t,e){this.textArea.setSelectionRange(t,e)}#a(t){let e=t.dataset.type,s=t.dataset.value,n=t.dataset.key??void 0;return{type:e,value:s,key:n}}async#c(t,e,s){if(t.type==="inline")this.text=`${this.text.slice(0,s)}${t.value}${this.text.slice(s)}`;else if(t.type==="wrap")this.text=N(this.text,t.value,e),this.text=N(this.text,this.keyPairs[t.value],s+t.value.length),t.value.length<2&&this.#s.push(t.value);else if(t.type==="block"){let{lines:n,lineNumber:r}=this.#o(),i=t.value.at(0);i&&n[r]?.startsWith(i)?n[r]=t.value.trim()+n[r]:n[r]=t.value+n[r],this.text=n.join(`
|
2
|
+
`)}}async#u(t,e,s){let n=0,r=0;if(/[a-z]/i.test(t)){for(let i=s;i<this.text.length;i++)if(this.text[i]?.match(/[a-z]/i))n?r=i+1:n=i;else if(n)break}else n=e+t.length,r=s+t.length;this.#n(n,r),this.textArea.focus()}async#i(t){let e=this.#t,s=this.#e;await this.#c(t,s,e),this.#u(t.value,s,e)}#m(t){if(t){let e=[];this.#r.forEach(n=>{n.type==="block"&&e.push(n.value)});for(let n=0;n<e.length;n++){let r=e[n];if(r&&t.startsWith(r))return r}let s=k(t);if(s)return`${s}. `}return""}#o(){let t=this.text.split(`
|
3
|
+
`),e=0;for(let s=0;s<t.length;s++){let n=t.at(s)?.length??0;if(e++,e+=n,e>this.#t)return{lines:t,lineNumber:s,columnNumber:this.#t-(e-n-1)}}return{lines:t,lineNumber:0,columnNumber:0}}#l(t,e=!1){let{lines:s}=this.#o();for(let n=t+1;n<s.length;n++){let r=s[n];if(r){let i=k(r);if(i){let o;if(e)if(i>1)o=i-1;else break;else o=i+1;s[n]=r.slice(String(i).length),s[n]=String(o)+s[n]}else break}}this.text=s.join(`
|
4
|
+
`)}mount(){this.textArea.addEventListener("keydown",async t=>{let e=["ArrowUp","ArrowDown","Delete"],s=this.text[this.#t]??"";if(e.includes(t.key))this.#s=[];else if(t.key==="Backspace"){let n=this.text[this.#e-1];if(n&&n in this.keyPairs&&s===this.keyPairs[n]){t.preventDefault();let r=this.#e-1,i=this.#t-1;this.text=g(this.text,r),this.text=g(this.text,i),setTimeout(()=>{this.#n(r,i)},0),this.#s.pop()}if(n===`
|
5
|
+
`&&this.#e===this.#t){t.preventDefault();let r=this.#e-1,{lineNumber:i}=this.#o();this.#l(i,!0),this.text=g(this.text,r),setTimeout(async()=>{this.#n(r,r)},0)}}else if(t.key==="Tab")this.#h%2!==0&&(t.preventDefault(),await this.#i({type:"inline",value:" "}));else if(t.key==="Enter"){let{lines:n,lineNumber:r,columnNumber:i}=this.#o(),o=n.at(r),l=this.#m(o),h=l,u=k(l);if(u&&(l=`${u+1}. `),l&&h.length<i)t.preventDefault(),u&&this.#l(r),await this.#i({type:"inline",value:`
|
6
|
+
${l}`});else if(l&&h.length===i){t.preventDefault();let d=this.#t-h.length;for(let y=0;y<h.length;y++)this.text=g(this.text,this.#t-(y+1));setTimeout(async()=>{this.#n(d,d),this.textArea.focus(),await this.#i({type:"inline",value:`
|
7
|
+
`})},0)}}else{let n=Object.values(this.keyPairs).includes(s),r=this.#e!==this.#t;if((t.ctrlKey||t.metaKey)&&this.#e===this.#t&&(t.key==="c"||t.key==="x")){t.preventDefault();let{lines:i,lineNumber:o,columnNumber:l}=this.#o();if(await navigator.clipboard.writeText(`${o===0&&t.key==="x"?"":`
|
8
|
+
`}${i[o]}`),t.key==="x"){let h=this.#e-l;i.splice(o,1),this.text=i.join(`
|
9
|
+
`),setTimeout(()=>{this.#n(h,h)},0)}}if((t.ctrlKey||t.metaKey)&&t.key){let i=this.#r.find(o=>o.key===t.key);i&&this.#i(i)}else n&&(s===t.key||t.key==="ArrowRight")&&this.#s.length&&!r?(t.preventDefault(),this.#n(this.#e+1,this.#t+1),this.#s.pop()):t.key in this.keyPairs&&(t.preventDefault(),await this.#i({type:"wrap",value:t.key}),this.#s.push(t.key))}}),this.textArea.addEventListener("dblclick",()=>{this.#e!==this.#t&&(this.text[this.#e]===" "&&this.#n(this.#e+1,this.#t),this.text[this.#t-1]===" "&&this.#n(this.#e,this.#t-1))}),this.textArea.addEventListener("click",()=>this.#s=[]),this.triggerListener(t=>{t.target instanceof HTMLElement&&this.#i(this.#a(t.target))})}},k=a=>{let t=a.match(/^(\d+)\./);return t?Number(t[1]):null},N=(a,t,e)=>a.slice(0,e)+t+a.slice(e),g=(a,t)=>a.slice(0,t)+a.slice(t+1);var C=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 L=class extends m{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 A=class extends p{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 M=class extends c{constructor(){super()}mount(){let t=this.getContent(HTMLTableSectionElement);for(let e of this.getTrigger())e.addEventListener(this.event,()=>{Array.from(t.querySelectorAll("tr")).sort(D(e,e.toggleAttribute("data-ascending"))).forEach(s=>t.appendChild(s))})}},D=(a,t)=>(s,n)=>{let r=Array.from(a.parentNode?.children??[]).indexOf(a);return((o,l)=>{let h=a.dataset.type??"string";if(h==="string")return new Intl.Collator().compare(o,l);if(h==="boolean"){let u=f=>["0","false","null","undefined"].includes(f)?!1:!!f;return u(o)===u(l)?0:u(o)?-1:1}else return Number(o)-Number(l)})(S(t?s:n,r),S(t?n:s,r))},S=(a,t)=>{let e=a.children[t];return e instanceof HTMLElement?e.dataset.value??e.textContent??"":""};var H=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":""}`})}};})();
|
package/index.js
ADDED
@@ -0,0 +1 @@
|
|
1
|
+
import{a as l}from"./chunk-2ZZQECRY.js";import{a as m}from"./chunk-VEVFQB5N.js";import{a as h}from"./chunk-FNJ7AESC.js";import{a as i}from"./chunk-5JV4T7GM.js";import{a as j}from"./chunk-T7RZI3ZL.js";import{a as k}from"./chunk-IQJQPZUL.js";import{a as d}from"./chunk-57VEEUFG.js";import{a as e}from"./chunk-TSTTUEAF.js";import"./chunk-7F7CQUEG.js";import{a as f}from"./chunk-JMJUWKN2.js";import{a as g}from"./chunk-7S6DTKGH.js";import{a as b}from"./chunk-7KU2PRW5.js";import{a as c}from"./chunk-6HYPZWQ4.js";import{b as a}from"./chunk-MXKU7AKV.js";export{b as Animate,a as Base,c as Breakpoint,d as ContextMenu,e as Copy,f as Details,g as Dialog,h as Editor,i as Fullscreen,j as Popover,k as Share,l as TableSort,m as YouTube};
|
package/package.json
CHANGED
@@ -1,25 +1,7 @@
|
|
1
1
|
{
|
2
2
|
"name": "drab",
|
3
|
-
"
|
4
|
-
"
|
5
|
-
"keywords": [
|
6
|
-
"components",
|
7
|
-
"Svelte",
|
8
|
-
"SvelteKit",
|
9
|
-
"Breakpoint",
|
10
|
-
"ContextMenu",
|
11
|
-
"Copy",
|
12
|
-
"DataTable",
|
13
|
-
"Details",
|
14
|
-
"Editor",
|
15
|
-
"FrettedChord",
|
16
|
-
"Fullscreen",
|
17
|
-
"Popover",
|
18
|
-
"Share",
|
19
|
-
"Sheet",
|
20
|
-
"Tablature",
|
21
|
-
"YouTube"
|
22
|
-
],
|
3
|
+
"description": "A headless custom element library",
|
4
|
+
"version": "5.0.0-beta.1",
|
23
5
|
"homepage": "https://drab.robino.dev",
|
24
6
|
"license": "MIT",
|
25
7
|
"author": {
|
@@ -28,58 +10,147 @@
|
|
28
10
|
},
|
29
11
|
"repository": "github:rossrobino/drab",
|
30
12
|
"type": "module",
|
31
|
-
"
|
32
|
-
"
|
33
|
-
"types": "./dist/index.d.ts",
|
13
|
+
"types": "./index.d.ts",
|
14
|
+
"main": "./index.js",
|
34
15
|
"exports": {
|
35
16
|
".": {
|
36
|
-
"types": "./
|
37
|
-
"
|
17
|
+
"types": "./index.d.ts",
|
18
|
+
"default": "./index.js"
|
19
|
+
},
|
20
|
+
"./define": {
|
21
|
+
"types": "./define/index.d.ts",
|
22
|
+
"default": "./define/index.js"
|
23
|
+
},
|
24
|
+
"./animate": {
|
25
|
+
"types": "./animate/index.d.ts",
|
26
|
+
"default": "./animate/index.js"
|
27
|
+
},
|
28
|
+
"./animate/define": {
|
29
|
+
"types": "./animate/define/index.d.ts",
|
30
|
+
"default": "./animate/define/index.js"
|
31
|
+
},
|
32
|
+
"./contextmenu": {
|
33
|
+
"types": "./contextmenu/index.d.ts",
|
34
|
+
"default": "./contextmenu/index.js"
|
35
|
+
},
|
36
|
+
"./contextmenu/define": {
|
37
|
+
"types": "./contextmenu/define/index.d.ts",
|
38
|
+
"default": "./contextmenu/define/index.js"
|
39
|
+
},
|
40
|
+
"./details": {
|
41
|
+
"types": "./details/index.d.ts",
|
42
|
+
"default": "./details/index.js"
|
43
|
+
},
|
44
|
+
"./details/define": {
|
45
|
+
"types": "./details/define/index.d.ts",
|
46
|
+
"default": "./details/define/index.js"
|
47
|
+
},
|
48
|
+
"./youtube": {
|
49
|
+
"types": "./youtube/index.d.ts",
|
50
|
+
"default": "./youtube/index.js"
|
51
|
+
},
|
52
|
+
"./youtube/define": {
|
53
|
+
"types": "./youtube/define/index.d.ts",
|
54
|
+
"default": "./youtube/define/index.js"
|
55
|
+
},
|
56
|
+
"./breakpoint": {
|
57
|
+
"types": "./breakpoint/index.d.ts",
|
58
|
+
"default": "./breakpoint/index.js"
|
59
|
+
},
|
60
|
+
"./breakpoint/define": {
|
61
|
+
"types": "./breakpoint/define/index.d.ts",
|
62
|
+
"default": "./breakpoint/define/index.js"
|
63
|
+
},
|
64
|
+
"./dialog": {
|
65
|
+
"types": "./dialog/index.d.ts",
|
66
|
+
"default": "./dialog/index.js"
|
67
|
+
},
|
68
|
+
"./dialog/define": {
|
69
|
+
"types": "./dialog/define/index.d.ts",
|
70
|
+
"default": "./dialog/define/index.js"
|
71
|
+
},
|
72
|
+
"./popover": {
|
73
|
+
"types": "./popover/index.d.ts",
|
74
|
+
"default": "./popover/index.js"
|
75
|
+
},
|
76
|
+
"./popover/define": {
|
77
|
+
"types": "./popover/define/index.d.ts",
|
78
|
+
"default": "./popover/define/index.js"
|
79
|
+
},
|
80
|
+
"./tablesort": {
|
81
|
+
"types": "./tablesort/index.d.ts",
|
82
|
+
"default": "./tablesort/index.js"
|
83
|
+
},
|
84
|
+
"./tablesort/define": {
|
85
|
+
"types": "./tablesort/define/index.d.ts",
|
86
|
+
"default": "./tablesort/define/index.js"
|
87
|
+
},
|
88
|
+
"./copy": {
|
89
|
+
"types": "./copy/index.d.ts",
|
90
|
+
"default": "./copy/index.js"
|
91
|
+
},
|
92
|
+
"./copy/define": {
|
93
|
+
"types": "./copy/define/index.d.ts",
|
94
|
+
"default": "./copy/define/index.js"
|
95
|
+
},
|
96
|
+
"./fullscreen": {
|
97
|
+
"types": "./fullscreen/index.d.ts",
|
98
|
+
"default": "./fullscreen/index.js"
|
99
|
+
},
|
100
|
+
"./fullscreen/define": {
|
101
|
+
"types": "./fullscreen/define/index.d.ts",
|
102
|
+
"default": "./fullscreen/define/index.js"
|
103
|
+
},
|
104
|
+
"./base": {
|
105
|
+
"types": "./base/index.d.ts",
|
106
|
+
"default": "./base/index.js"
|
107
|
+
},
|
108
|
+
"./base/define": {
|
109
|
+
"types": "./base/define/index.d.ts",
|
110
|
+
"default": "./base/define/index.js"
|
111
|
+
},
|
112
|
+
"./editor": {
|
113
|
+
"types": "./editor/index.d.ts",
|
114
|
+
"default": "./editor/index.js"
|
115
|
+
},
|
116
|
+
"./editor/define": {
|
117
|
+
"types": "./editor/define/index.d.ts",
|
118
|
+
"default": "./editor/define/index.js"
|
119
|
+
},
|
120
|
+
"./share": {
|
121
|
+
"types": "./share/index.d.ts",
|
122
|
+
"default": "./share/index.js"
|
123
|
+
},
|
124
|
+
"./share/define": {
|
125
|
+
"types": "./share/define/index.d.ts",
|
126
|
+
"default": "./share/define/index.js"
|
38
127
|
}
|
39
128
|
},
|
40
|
-
"files": [
|
41
|
-
"dist"
|
42
|
-
],
|
43
129
|
"scripts": {
|
44
|
-
"dev": "vite
|
45
|
-
"
|
46
|
-
"build": "vite build",
|
130
|
+
"dev": "vite --host",
|
131
|
+
"build": "tsc && vite build",
|
47
132
|
"preview": "vite preview",
|
48
|
-
"package": "svelte-kit sync && svelte-package && publint",
|
49
|
-
"prepublishOnly": "bun package",
|
50
|
-
"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
|
51
|
-
"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
|
52
|
-
"lint": "prettier --check . && eslint .",
|
53
133
|
"format": "prettier --write .",
|
54
|
-
"
|
55
|
-
"
|
56
|
-
|
57
|
-
|
58
|
-
"
|
134
|
+
"doc": "typedoc --out src/lib/docs --plugin typedoc-plugin-markdown src/package/index.ts --hideBreadcrumbs --hideInPageTOC --githubPages false --publicPath /docs/ && bun src/lib/scripts/doc/index.ts && bun format",
|
135
|
+
"copy": "cp package.json ./package && cp README.md ./package && cp LICENSE.md ./package",
|
136
|
+
"entry": "bun src/lib/scripts/entryPoints/index.ts && bun format",
|
137
|
+
"package": "bun entry && tsup && bun copy",
|
138
|
+
"pub": "bun i && bun doc && bun package && npm publish --access public --tag beta ./package"
|
59
139
|
},
|
60
140
|
"devDependencies": {
|
61
|
-
"@sveltejs/adapter-vercel": "^4.0.4",
|
62
|
-
"@sveltejs/kit": "^2.0.6",
|
63
|
-
"@sveltejs/package": "^2.2.5",
|
64
|
-
"@sveltejs/vite-plugin-svelte": "^3.0.1",
|
65
141
|
"@tailwindcss/typography": "^0.5.10",
|
66
|
-
"@types/node": "^20.
|
67
|
-
"@typescript-eslint/eslint-plugin": "^6.17.0",
|
68
|
-
"@typescript-eslint/parser": "^6.17.0",
|
142
|
+
"@types/node": "^20.11.0",
|
69
143
|
"autoprefixer": "^10.4.16",
|
70
|
-
"
|
71
|
-
"
|
72
|
-
"
|
73
|
-
"prettier": "^3.1.1",
|
74
|
-
"prettier-plugin-svelte": "^3.1.2",
|
75
|
-
"prettier-plugin-tailwindcss": "^0.5.10",
|
76
|
-
"publint": "^0.2.7",
|
144
|
+
"domco": "^0.3.7",
|
145
|
+
"prettier": "^3.2.1",
|
146
|
+
"prettier-plugin-tailwindcss": "^0.5.11",
|
77
147
|
"robino": "^0.0.39",
|
78
|
-
"
|
79
|
-
"
|
80
|
-
"
|
148
|
+
"tailwindcss": "^3.4.1",
|
149
|
+
"tsup": "^8.0.1",
|
150
|
+
"typedoc": "^0.25.7",
|
151
|
+
"typedoc-plugin-markdown": "^3.17.1",
|
81
152
|
"typescript": "^5.3.3",
|
82
|
-
"uico": "^0.2.
|
153
|
+
"uico": "^0.2.2",
|
83
154
|
"vite": "^5.0.11"
|
84
155
|
}
|
85
156
|
}
|