@stackific/md3 0.1.1 → 0.1.3
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 +2486 -191
- package/dist/internal.md +274 -0
- package/dist/md3.css +1 -1
- package/dist/md3.js +1 -1
- package/package.json +1 -3
- package/src/main.js +0 -5
- package/src/runtime/elements/dialogs.js +0 -72
- package/src/runtime/elements/fields.js +0 -181
- package/src/runtime/elements/menus.js +0 -42
- package/src/runtime/elements/pages.js +0 -7
- package/src/runtime/elements/progress.js +0 -35
- package/src/runtime/elements/sliders.js +0 -78
- package/src/runtime/elements/snackbars.js +0 -27
- package/src/runtime/helpers/ripples.js +0 -46
- package/src/runtime/md3.js +0 -141
- package/src/runtime/palette.js +0 -64
- package/src/runtime/settings/theme.js +0 -194
- package/src/runtime/utils.js +0 -165
- package/src/styles/_config.scss +0 -142
- package/src/styles/_mixins.scss +0 -80
- package/src/styles/elements/_badges.scss +0 -65
- package/src/styles/elements/_bars.scss +0 -83
- package/src/styles/elements/_buttons.scss +0 -119
- package/src/styles/elements/_cards.scss +0 -32
- package/src/styles/elements/_chips.scss +0 -46
- package/src/styles/elements/_dialogs.scss +0 -143
- package/src/styles/elements/_dividers.scss +0 -46
- package/src/styles/elements/_expansions.scss +0 -19
- package/src/styles/elements/_fields.scss +0 -458
- package/src/styles/elements/_grids.scss +0 -35
- package/src/styles/elements/_icons.scss +0 -70
- package/src/styles/elements/_layouts.scss +0 -24
- package/src/styles/elements/_lists.scss +0 -76
- package/src/styles/elements/_main-layouts.scss +0 -45
- package/src/styles/elements/_media.scss +0 -104
- package/src/styles/elements/_menus.scss +0 -289
- package/src/styles/elements/_navigations.scss +0 -450
- package/src/styles/elements/_overlays.scss +0 -34
- package/src/styles/elements/_pages.scss +0 -28
- package/src/styles/elements/_progress.scss +0 -141
- package/src/styles/elements/_selections.scss +0 -248
- package/src/styles/elements/_shapes.scss +0 -153
- package/src/styles/elements/_sliders.scss +0 -336
- package/src/styles/elements/_snackbars.scss +0 -44
- package/src/styles/elements/_tables.scss +0 -67
- package/src/styles/elements/_tabs.scss +0 -49
- package/src/styles/elements/_tooltips.scss +0 -125
- package/src/styles/fonts/material-symbols-outlined.woff2 +0 -0
- package/src/styles/fonts/material-symbols-rounded.woff2 +0 -0
- package/src/styles/fonts/material-symbols-sharp.woff2 +0 -0
- package/src/styles/fonts/material-symbols-subset.woff2 +0 -0
- package/src/styles/helpers/_alignments.scss +0 -29
- package/src/styles/helpers/_blurs.scss +0 -26
- package/src/styles/helpers/_colors.scss +0 -39
- package/src/styles/helpers/_directions.scss +0 -30
- package/src/styles/helpers/_elevates.scss +0 -20
- package/src/styles/helpers/_forms.scss +0 -76
- package/src/styles/helpers/_margins.scss +0 -39
- package/src/styles/helpers/_opacities.scss +0 -18
- package/src/styles/helpers/_paddings.scss +0 -35
- package/src/styles/helpers/_positions.scss +0 -44
- package/src/styles/helpers/_responsive.scss +0 -24
- package/src/styles/helpers/_ripples.scss +0 -40
- package/src/styles/helpers/_scrolls.scss +0 -7
- package/src/styles/helpers/_shadows.scss +0 -22
- package/src/styles/helpers/_sizes.scss +0 -34
- package/src/styles/helpers/_spaces.scss +0 -22
- package/src/styles/helpers/_typography.scss +0 -132
- package/src/styles/helpers/_waves.scss +0 -52
- package/src/styles/helpers/_zoom.scss +0 -18
- package/src/styles/md3.scss +0 -61
- package/src/styles/settings/_fonts.scss +0 -41
- package/src/styles/settings/_globals.scss +0 -104
- package/src/styles/settings/_reset.scss +0 -82
- package/src/styles/settings/_theme.scss +0 -126
- package/src/styles/settings/_themes.scss +0 -1525
- package/src/styles/shapes/arch.svg +0 -1
- package/src/styles/shapes/arrow.svg +0 -1
- package/src/styles/shapes/boom.svg +0 -1
- package/src/styles/shapes/bun.svg +0 -1
- package/src/styles/shapes/burst.svg +0 -1
- package/src/styles/shapes/circle.svg +0 -1
- package/src/styles/shapes/clamshell.svg +0 -1
- package/src/styles/shapes/diamond.svg +0 -1
- package/src/styles/shapes/fan.svg +0 -1
- package/src/styles/shapes/flower.svg +0 -1
- package/src/styles/shapes/gem.svg +0 -1
- package/src/styles/shapes/ghost-ish.svg +0 -1
- package/src/styles/shapes/heart.svg +0 -1
- package/src/styles/shapes/leaf-clover4.svg +0 -1
- package/src/styles/shapes/leaf-clover8.svg +0 -1
- package/src/styles/shapes/loading-indicator.svg +0 -1
- package/src/styles/shapes/oval.svg +0 -1
- package/src/styles/shapes/pentagon.svg +0 -1
- package/src/styles/shapes/pill.svg +0 -1
- package/src/styles/shapes/pixel-circle.svg +0 -1
- package/src/styles/shapes/pixel-triangle.svg +0 -1
- package/src/styles/shapes/puffy-diamond.svg +0 -1
- package/src/styles/shapes/puffy.svg +0 -1
- package/src/styles/shapes/semicircle.svg +0 -1
- package/src/styles/shapes/sided-cookie12.svg +0 -1
- package/src/styles/shapes/sided-cookie4.svg +0 -1
- package/src/styles/shapes/sided-cookie6.svg +0 -1
- package/src/styles/shapes/sided-cookie7.svg +0 -1
- package/src/styles/shapes/sided-cookie9.svg +0 -1
- package/src/styles/shapes/slanted.svg +0 -1
- package/src/styles/shapes/soft-boom.svg +0 -1
- package/src/styles/shapes/soft-burst.svg +0 -1
- package/src/styles/shapes/square.svg +0 -1
- package/src/styles/shapes/sunny.svg +0 -1
- package/src/styles/shapes/triangle.svg +0 -1
- package/src/styles/shapes/very-sunny.svg +0 -1
- package/src/styles/shapes/wavy-circle.svg +0 -1
- package/src/styles/shapes/wavy.svg +0 -1
package/dist/md3.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
const G=[],H=new WeakMap,E=navigator.userAgent.includes("Chrome");navigator.userAgent.includes("Firefox");navigator.userAgent.includes("Safari");navigator.userAgent.includes("Windows");const et=navigator.userAgent.includes("Macintosh");navigator.userAgent.includes("Linux");navigator.userAgent.includes("Android");const nt=/iPad|iPhone|iPod/.test(navigator.userAgent);function Ft(){var t,e;return((e=(t=window==null?void 0:window.matchMedia)==null?void 0:t.call(window,"(prefers-color-scheme: dark)"))==null?void 0:e.matches)??!1}async function it(t){await new Promise(e=>setTimeout(e,t))}function St(){return"fxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(/[xy]/g,t=>{const e=Math.random()*16|0;return(t==="x"?e:e&3|8).toString(16)})}function v(t,e){try{return typeof t=="string"?(e??document).querySelector(t):t}catch{return null}}function f(t,e){try{return typeof t=="string"?(e??document).querySelectorAll(t):t??G}catch{return G}}function s(t,e){return(t==null?void 0:t.classList.contains(e))??!1}function h(t,e){var n;return((n=t==null?void 0:t.tagName)==null?void 0:n.toLowerCase())===e}function A(t,e){var n;return((n=t==null?void 0:t.type)==null?void 0:n.toLowerCase())===e}function y(t,e){if(t instanceof NodeList)for(let n=0;n<t.length;n++)t[n].classList.add(e);else t==null||t.classList.add(e)}function g(t,e){if(t instanceof NodeList)for(let n=0;n<t.length;n++)t[n].classList.remove(e);else t==null||t.classList.remove(e)}function x(t,e,n,i=!0){t!=null&&t.addEventListener&&t.addEventListener(e,n,i)}function c(t,e,n,i=!0){if(!t)return;let o=H.get(t);o||(o=new Map,H.set(t,o));const u=e+(i?"1":"0");let r=o.get(u);r||(r=new Set,o.set(u,r)),!r.has(n)&&(r.add(n),x(t,e,n,i))}function F(t,e,n,i=!0){t!=null&&t.removeEventListener&&t.removeEventListener(e,n,i)}function Mt(t,e){var n;(n=e==null?void 0:e.parentNode)==null||n.insertBefore(t,e)}function B(t){return t==null?void 0:t.previousElementSibling}function O(t){return t==null?void 0:t.nextElementSibling}function w(t){return t==null?void 0:t.parentElement}function Dt(t){const e=document.createElement("div");for(const n of Object.keys(t))e.setAttribute(n,t[n]);return e}function P(){var t,e;(e=(t=document.activeElement)==null?void 0:t.blur)==null||e.call(t)}function Lt(t){return f(`[data-ui="#${t}"]`)}function It(t){return v(`[data-ui="#${t}"]`)}function _t(t){t.id&&s(t,"page")&&(t=It(t.id)??t);const e=w(t);if(!s(e,"tabs")&&!s(e,"tabbed")&&!h(e,"nav"))return;const n=f("a",e);for(let i=0;i<n.length;i++)g(n[i],"active");!h(t,"button")&&!s(t,"button")&&!s(t,"chip")&&y(t,"active")}function rt(){const t=getComputedStyle(document.documentElement).getPropertyValue("--size")||"16px";return t.includes("%")?parseInt(t)*16/100:t.includes("em")?parseInt(t)*16:parseInt(t)}function q(t){t.placeholder||(t.placeholder=" ")}function Bt(t){const e=t.currentTarget,n=w(e),i=v("input:not([type=file], [type=checkbox], [type=radio]), select, textarea",n);i&&i.focus()}function $(t){T(t.currentTarget)}function R(t){T(t.currentTarget)}function Ot(t){z(t.currentTarget)}function Pt(t){j(t.currentTarget)}function qt(t){z(t.currentTarget,t)}function $t(t){j(t.currentTarget,t)}function Rt(t){var i;const e=t.currentTarget,n=v("input",w(e));n&&((i=e.textContent)!=null&&i.includes("visibility"))&&(n.type==="password"?(n.type="text",e.textContent="visibility_off"):(n.type="password",e.textContent="visibility"))}function zt(t){ot(t.currentTarget)}function jt(t){const e=t.target.closest(".field > label");e&&(Object.defineProperty(t,"currentTarget",{value:e,configurable:!0}),Bt(t))}function Kt(){const t=document.body;t&&c(t,"click",jt)}function Nt(){const t=f(".field > input:not([type=file], [type=color], [type=range])");for(let e=0;e<t.length;e++)c(t[e],"focus",$),c(t[e],"blur",R),T(t[e])}function Ut(){const t=f(".field > select");for(let e=0;e<t.length;e++)c(t[e],"focus",$),c(t[e],"blur",R)}function Wt(){const t=f(".field > input[type=file]");for(let e=0;e<t.length;e++)c(t[e],"change",Ot),z(t[e])}function Yt(){const t=f(".field > input[type=color]");for(let e=0;e<t.length;e++)c(t[e],"change",Pt),j(t[e])}function Gt(){const t=f(".field > textarea");for(let e=0;e<t.length;e++)c(t[e],"focus",$),c(t[e],"blur",R),q(t[e]),!(E&&!et&&!nt)&&(c(t[e],"input",zt),ot(t[e]))}function Ht(){const t=f(".field:has(> input[type=password]) > i, a");for(let e=0;e<t.length;e++)c(t[e],"click",Rt)}function T(t){A(t,"number")&&!t.value&&(t.value=""),q(t)}function z(t,e){if((e==null?void 0:e.key)==="Enter"){const i=B(t);if(!A(i,"file"))return;i.click();return}const n=O(t);A(n,"text")&&(n.value=t.files?Array.from(t.files).map(i=>i.name).join(", "):"",n.readOnly=!0,c(n,"keydown",qt,!1),T(n))}function j(t,e){if((e==null?void 0:e.key)==="Enter"){const i=B(t);if(!A(i,"color"))return;i.click();return}const n=O(t);A(n,"text")&&(n.readOnly=!0,n.value=t.value,c(n,"keydown",$t,!1),T(n))}function ot(t){if(q(t),t.hasAttribute("rows"))return;const e=rt();t.style.blockSize="auto",t.style.blockSize=`${t.scrollHeight-e}px`}function Vt(){Kt(),Nt(),Ut(),Wt(),Yt(),Gt(),Ht()}function V(t){const e=t.target;!h(e,"input")&&!h(e,"select")||(e.type==="range"?(e.focus(),ct(e)):at())}function Zt(t){if(!window.matchMedia("(pointer: coarse)").matches)return;t.target.blur()}function at(){const t=document.body,e=f(".slider > input[type=range]");e.length?x(t,"input",V,!1):F(t,"input",V,!1);for(let n=0;n<e.length;n++)ct(e[n])}function ct(t){c(t,"change",Zt);const e=w(t),n=v("span",e),i=f("input",e);if(!i.length||!n)return;const o=rt(),u=s(e,"max")?0:.25*o*100/i[0].offsetWidth,r=[],l=[];for(let m=0,Tt=i.length;m<Tt;m++){const U=parseFloat(i[m].min)||0,Ct=parseFloat(i[m].max)||100,W=parseFloat(i[m].value)||0,Y=(W-U)*100/(Ct-U),Et=u/2-u*Y/100;r.push(Y+Et),l.push(W)}let p=r[0],d=0,N=100-d-p,S=l[0],M=l[1]||0;i.length>1&&(p=Math.abs(r[1]-r[0]),d=r[1]>r[0]?r[0]:r[1],N=100-d-p,M>S&&(S=l[1]||0,M=l[0])),requestAnimationFrame(()=>{e.style.cssText=`--_start: ${d}%; --_end: ${N}%; --_value1: '${S}'; --_value2: '${M}';`})}function Xt(){at()}const Z={red:"#F44336",pink:"#E91E63",purple:"#9C27B0","deep-purple":"#673AB7",blue:"#2196F3","light-blue":"#03A9F4",cyan:"#00BCD4",green:"#4CAF50","light-green":"#8BC34A",lime:"#CDDC39",yellow:"#FFEB3B",amber:"#FFC107",orange:"#FF9800","deep-orange":"#FF5722",brown:"#795548","blue-grey":"#607D8B",stackific:"#1447E6","hello-pumpkin":"#FF8F00","sea-lettuce":"#63A002",olive:"#7C7C67",nord:"#5E81AC","vega-violet":"#AD46FF","wild-strawberry":"#F6339A","heliotrope-magenta":"#E12AFB","voodoo-violet":"#804792","red-orchid":"#C0001C","green-brown":"#6E5D00",shakshuka:"#AB350F","purple-honeycreeper":"#8E51FF",maldives:"#00B8DB",verditer:"#00BBA7",fennel:"#00BC7D",gold:"#EFB100","vitamin-c":"#FD9A00",burtuqali:"#FF6900"},ut=["stackific","hello-pumpkin","sea-lettuce","olive","nord","vega-violet","wild-strawberry","heliotrope-magenta","voodoo-violet","red-orchid","green-brown","shakshuka","purple-honeycreeper","maldives","verditer","fennel","gold","vitamin-c","burtuqali"],a={light:"",dark:""},st="md3:mode",lt="md3:theme";function Qt(){return ut.slice()}function Jt(){var t;try{return((t=globalThis.localStorage)==null?void 0:t.getItem(lt))||null}catch{return null}}function te(t){var e;try{(e=globalThis.localStorage)==null||e.setItem(lt,t)}catch{}}function b(){return document==null?void 0:document.documentElement}function ft(){var t;try{return((t=globalThis.localStorage)==null?void 0:t.getItem(st))||null}catch{return null}}function ee(t){var e;try{(e=globalThis.localStorage)==null||e.setItem(st,t)}catch{}}function X(){var e,n;const t=(n=(e=b())==null?void 0:e.dataset)==null?void 0:n.mode;return t==="auto"||t==="light"||t==="dark"?t:ft()||"auto"}function _(){var e,n;const t=(n=(e=b())==null?void 0:e.dataset)==null?void 0:n.mode;return t==="light"||t==="dark"?t:Ft()?"dark":"light"}function ne(){if(a.light&&a.dark)return a;const t=b();if(!t)return a;const e=t.dataset.mode,n=i=>{t.dataset.mode=i;const o=getComputedStyle(t),u=["--primary","--on-primary","--primary-container","--on-primary-container","--secondary","--on-secondary","--secondary-container","--on-secondary-container","--tertiary","--on-tertiary","--tertiary-container","--on-tertiary-container","--error","--on-error","--error-container","--on-error-container","--background","--on-background","--surface","--on-surface","--surface-variant","--on-surface-variant","--outline","--outline-variant","--shadow","--scrim","--inverse-surface","--inverse-on-surface","--inverse-primary","--surface-dim","--surface-bright","--surface-container-lowest","--surface-container-low","--surface-container","--surface-container-high","--surface-container-highest"];let r="";for(let l=0,p=u.length;l<p;l++)r+=u[l]+":"+o.getPropertyValue(u[l])+";";return r};try{a.light=n("light"),a.dark=n("dark")}finally{e===void 0?delete t.dataset.mode:t.dataset.mode=e}return a}async function dt(t){const e=b();if(!t)return ne();if(t.light&&t.dark)return a.light=t.light,a.dark=t.dark,e.setAttribute("style",t[_()]),t;if(typeof t=="string"&&ut.includes(t))return te(t),e.dataset.theme=t,e.removeAttribute("style"),a.light="",a.dark="",{light:"",dark:""};typeof t=="string"&&Z[t]&&(t=Z[t]);const n=globalThis.materialDynamicColors;if(typeof n!="function")throw new Error('ui("theme", source) requires material-dynamic-colors. Install it and `import "material-dynamic-colors"` once at app entry, or include the CDN script.');return n(t).then(i=>{const o=u=>{let r="";for(const l of Object.keys(u)){const p=u[l],d=l.replace(/([a-z0-9]|(?=[A-Z]))([A-Z])/g,"$1-$2").toLowerCase();r+="--"+d+":"+p+";"}return r};return a.light=o(i.light),a.dark=o(i.dark),e.setAttribute("style",a[_()]),a})}function pt(t){const e=b();return e?(t&&(t!=="auto"&&t!=="light"&&t!=="dark"&&(t="auto"),ee(t),e.dataset.mode=t,a.light&&a.dark&&e.setAttribute("style",a[_()])),X()):t}let Q=!1;function ie(){if(Q||typeof globalThis.matchMedia!="function")return;const t=globalThis.matchMedia("(prefers-color-scheme: dark)"),e=()=>{const n=b();!n||n.dataset.mode!=="auto"||!a.light||!a.dark||n.setAttribute("style",a[t.matches?"dark":"light"])};t.addEventListener?t.addEventListener("change",e):t.addListener&&t.addListener(e),Q=!0}const C=[];function gt(t){if(t.key==="Escape"){const e=t.currentTarget;yt(e,e)}}function re(t){(v("[autofocus]",t)??t).focus()}function ht(t,e){g(Lt(t.id),"active"),g(t,"active"),g(e,"active"),t.close(),C.pop();const n=C[C.length-1];n&&n.focus()}async function oe(t,e,n,i){!h(i,"button")&&!s(i,"button")&&!s(i,"chip")&&y(i,"active"),y(e,"active"),y(t,"active"),n?t.showModal():t.show(),await it(90),n||x(t,"keydown",gt,!1),C.push(t),re(t)}function ae(t){const e=t.currentTarget,n=O(e);h(n,"dialog")&&ht(n,e)}async function yt(t,e){P();let n=B(e);const i=s(e,"active")||e.open,o=s(e,"modal");o||F(e,"keydown",gt,!1),s(n,"overlay")||(n=Dt({class:"overlay"}),Mt(n,e),await it(90)),o||c(n,"click",ae,!1),i?ht(e,n):oe(e,n,o,t)}let D;function vt(t){F(document.body,"click",vt);const e=t.target,n=f("menu.active");for(let i=0;i<n.length;i++)bt(e,n[i],t)}function ce(t){setTimeout(()=>{const e=v(".field > input",t);e?e.focus():t.focus()},90)}function bt(t,e,n){D&&clearTimeout(D),D=setTimeout(()=>{x(document.body,"click",vt),h(document.activeElement,"input")||P();const i=s(e,"active"),o=(n==null?void 0:n.target)===t,u=!!t.closest("menu");if(!i&&u||i&&o){g(e,"active");return}g(f("menu.active"),"active"),y(e,"active"),ce(e)},90)}let k;function ue(t){const e=t.currentTarget;g(e,"active"),k&&clearTimeout(k)}function se(t,e){P();const n=f(".snackbar.active");for(let i=0;i<n.length;i++)g(n[i],"active");y(t,"active"),c(t,"click",ue),k&&clearTimeout(k),e!==-1&&(k=setTimeout(()=>{g(t,"active")},e??6e3))}function le(t){const e=w(t);e&&g(f(":scope > .page",e),"active"),y(t,"active")}function mt(t){const e=t instanceof MouseEvent,n=t.currentTarget,i=n.getBoundingClientRect(),o=Math.max(i.width,i.height),u=o/2,r=e?t.clientX-i.left-u:i.width/2-u,l=e?t.clientY-i.top-u:i.height/2-u,p=document.createElement("div");p.className="ripple-js";const d=document.createElement("div");d.style.inlineSize=d.style.blockSize=`${o}px`,d.style.left=`${r}px`,d.style.top=`${l}px`,c(d,"animationend",()=>{p.remove()}),p.appendChild(d),n.appendChild(p)}function fe(t){const e=t.target.closest(".slow-ripple, .ripple, .fast-ripple");e&&(Object.defineProperty(t,"currentTarget",{value:e,configurable:!0}),mt(t))}function de(t){const e=t.target.closest(".slow-ripple, .ripple, .fast-ripple");!e||t.key!==" "||(Object.defineProperty(t,"currentTarget",{value:e,configurable:!0}),mt(t))}function pe(){const t=document.body;t&&(c(t,"mousedown",fe),c(t,"keydown",de))}function J(t){const e=t.target;h(e,"progress")?kt(e):At()}function kt(t){requestAnimationFrame(()=>{if(!t.hasAttribute("value")&&!t.hasAttribute("max")){const e=s(t,"circle")?"50":"100";t.style.setProperty("--_value",e),t.setAttribute("value",e),t.setAttribute("max","100"),t.classList.add("indeterminate")}else t.style.setProperty("--_value",String(t.value))})}function At(){if(E&&!et&&!nt)return;const t=document.body,e=f("progress");e.length?x(t,"input",J,!1):F(t,"input",J,!1);for(let n=0;n<e.length;n++)kt(e[n])}let L,I=null;function tt(){L&&clearTimeout(L),L=setTimeout(()=>wt(),180)}async function K(t,e,n,i){if(!e&&(e=v(t.getAttribute("data-ui")),!e)){t.classList.toggle("active");return}if(_t(t),h(e,"dialog")){requestAnimationFrame(()=>yt(t,e));return}if(h(e,"menu")){requestAnimationFrame(()=>bt(t,e,i));return}if(s(e,"snackbar")){requestAnimationFrame(()=>se(e,n));return}if(s(e,"page")){requestAnimationFrame(()=>le(e));return}if(s(e,"active")){g(t,"active"),g(e,"active");return}y(e,"active")}function xt(){globalThis.ui||I||!globalThis.MutationObserver||(I=new MutationObserver(tt),I.observe(document.body,{childList:!0,subtree:!0}),tt())}function ge(t){const e=t.target.closest("[data-ui]");e&&K(e,null,null,t)}function he(t){const e=t.target.closest("[data-ui]");e&&h(e,"a")&&!e.getAttribute("href")&&t.key==="Enter"&&K(e,null,null,t)}function ye(){const t=document.body;t&&(c(t,"click",ge),c(t,"keydown",he))}function wt(t,e){if(t){if(t==="setup"){xt();return}if(t==="guid")return St();if(t==="mode")return pt(e);if(t==="theme")return dt(e);if(t==="themes")return Qt();const n=v(t);if(!n)return;K(n,n,e)}ye(),Vt(),pe(),Xt(),At()}function ve(){var e;if(globalThis.ui)return;const t=(e=globalThis.document)==null?void 0:e.documentElement;if(t){pt(ft()||t.dataset.mode||"auto");const n=Jt();n&&dt(n)}ie(),xt(),globalThis.ui=wt}ve();
|
|
1
|
+
const G=[],H=new WeakMap,E=navigator.userAgent.includes("Chrome");navigator.userAgent.includes("Firefox");navigator.userAgent.includes("Safari");navigator.userAgent.includes("Windows");const et=navigator.userAgent.includes("Macintosh");navigator.userAgent.includes("Linux");navigator.userAgent.includes("Android");const nt=/iPad|iPhone|iPod/.test(navigator.userAgent);function Ft(){var t,e;return((e=(t=window==null?void 0:window.matchMedia)==null?void 0:t.call(window,"(prefers-color-scheme: dark)"))==null?void 0:e.matches)??!1}async function it(t){await new Promise(e=>setTimeout(e,t))}function St(){return"fxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(/[xy]/g,t=>{const e=Math.random()*16|0;return(t==="x"?e:e&3|8).toString(16)})}function v(t,e){try{return typeof t=="string"?(e??document).querySelector(t):t}catch{return null}}function f(t,e){try{return typeof t=="string"?(e??document).querySelectorAll(t):t??G}catch{return G}}function s(t,e){return(t==null?void 0:t.classList.contains(e))??!1}function h(t,e){var n;return((n=t==null?void 0:t.tagName)==null?void 0:n.toLowerCase())===e}function A(t,e){var n;return((n=t==null?void 0:t.type)==null?void 0:n.toLowerCase())===e}function y(t,e){if(t instanceof NodeList)for(let n=0;n<t.length;n++)t[n].classList.add(e);else t==null||t.classList.add(e)}function g(t,e){if(t instanceof NodeList)for(let n=0;n<t.length;n++)t[n].classList.remove(e);else t==null||t.classList.remove(e)}function x(t,e,n,i=!0){t!=null&&t.addEventListener&&t.addEventListener(e,n,i)}function c(t,e,n,i=!0){if(!t)return;let o=H.get(t);o||(o=new Map,H.set(t,o));const u=e+(i?"1":"0");let r=o.get(u);r||(r=new Set,o.set(u,r)),!r.has(n)&&(r.add(n),x(t,e,n,i))}function F(t,e,n,i=!0){t!=null&&t.removeEventListener&&t.removeEventListener(e,n,i)}function Mt(t,e){var n;(n=e==null?void 0:e.parentNode)==null||n.insertBefore(t,e)}function B(t){return t==null?void 0:t.previousElementSibling}function O(t){return t==null?void 0:t.nextElementSibling}function w(t){return t==null?void 0:t.parentElement}function Dt(t){const e=document.createElement("div");for(const n of Object.keys(t))e.setAttribute(n,t[n]);return e}function P(){var t,e;(e=(t=document.activeElement)==null?void 0:t.blur)==null||e.call(t)}function Lt(t){return f(`[data-ui="#${t}"]`)}function It(t){return v(`[data-ui="#${t}"]`)}function _t(t){t.id&&s(t,"page")&&(t=It(t.id)??t);const e=w(t);if(!s(e,"tabs")&&!s(e,"tabbed")&&!h(e,"nav"))return;const n=f("a",e);for(let i=0;i<n.length;i++)g(n[i],"active");!h(t,"button")&&!s(t,"button")&&!s(t,"chip")&&y(t,"active")}function rt(){const t=getComputedStyle(document.documentElement).getPropertyValue("--size")||"16px";return t.includes("%")?parseInt(t)*16/100:t.includes("em")?parseInt(t)*16:parseInt(t)}function q(t){t.placeholder||(t.placeholder=" ")}function Bt(t){const e=t.currentTarget,n=w(e),i=v("input:not([type=file], [type=checkbox], [type=radio]), select, textarea",n);i&&i.focus()}function $(t){T(t.currentTarget)}function R(t){T(t.currentTarget)}function Ot(t){z(t.currentTarget)}function Pt(t){j(t.currentTarget)}function qt(t){z(t.currentTarget,t)}function $t(t){j(t.currentTarget,t)}function Rt(t){var i;const e=t.currentTarget,n=v("input",w(e));n&&((i=e.textContent)!=null&&i.includes("visibility"))&&(n.type==="password"?(n.type="text",e.textContent="visibility_off"):(n.type="password",e.textContent="visibility"))}function zt(t){ot(t.currentTarget)}function jt(t){const e=t.target.closest(".field > label");e&&(Object.defineProperty(t,"currentTarget",{value:e,configurable:!0}),Bt(t))}function Kt(){const t=document.body;t&&c(t,"click",jt)}function Nt(){const t=f(".field > input:not([type=file], [type=color], [type=range])");for(let e=0;e<t.length;e++)c(t[e],"focus",$),c(t[e],"blur",R),T(t[e])}function Ut(){const t=f(".field > select");for(let e=0;e<t.length;e++)c(t[e],"focus",$),c(t[e],"blur",R)}function Wt(){const t=f(".field > input[type=file]");for(let e=0;e<t.length;e++)c(t[e],"change",Ot),z(t[e])}function Yt(){const t=f(".field > input[type=color]");for(let e=0;e<t.length;e++)c(t[e],"change",Pt),j(t[e])}function Gt(){const t=f(".field > textarea");for(let e=0;e<t.length;e++)c(t[e],"focus",$),c(t[e],"blur",R),q(t[e]),!(E&&!et&&!nt)&&(c(t[e],"input",zt),ot(t[e]))}function Ht(){const t=f(".field:has(> input[type=password]) > i, a");for(let e=0;e<t.length;e++)c(t[e],"click",Rt)}function T(t){A(t,"number")&&!t.value&&(t.value=""),q(t)}function z(t,e){if((e==null?void 0:e.key)==="Enter"){const i=B(t);if(!A(i,"file"))return;i.click();return}const n=O(t);A(n,"text")&&(n.value=t.files?Array.from(t.files).map(i=>i.name).join(", "):"",n.readOnly=!0,c(n,"keydown",qt,!1),T(n))}function j(t,e){if((e==null?void 0:e.key)==="Enter"){const i=B(t);if(!A(i,"color"))return;i.click();return}const n=O(t);A(n,"text")&&(n.readOnly=!0,n.value=t.value,c(n,"keydown",$t,!1),T(n))}function ot(t){if(q(t),t.hasAttribute("rows"))return;const e=rt();t.style.blockSize="auto",t.style.blockSize=`${t.scrollHeight-e}px`}function Vt(){Kt(),Nt(),Ut(),Wt(),Yt(),Gt(),Ht()}function V(t){const e=t.target;!h(e,"input")&&!h(e,"select")||(e.type==="range"?(e.focus(),ct(e)):at())}function Zt(t){if(!window.matchMedia("(pointer: coarse)").matches)return;t.target.blur()}function at(){const t=document.body,e=f(".slider > input[type=range]");e.length?x(t,"input",V,!1):F(t,"input",V,!1);for(let n=0;n<e.length;n++)ct(e[n])}function ct(t){c(t,"change",Zt);const e=w(t),n=v("span",e),i=f("input",e);if(!i.length||!n)return;const o=rt(),u=s(e,"max")?0:.25*o*100/i[0].offsetWidth,r=[],l=[];for(let m=0,Tt=i.length;m<Tt;m++){const U=parseFloat(i[m].min)||0,Ct=parseFloat(i[m].max)||100,W=parseFloat(i[m].value)||0,Y=(W-U)*100/(Ct-U),Et=u/2-u*Y/100;r.push(Y+Et),l.push(W)}let p=r[0],d=0,N=100-d-p,S=l[0],M=l[1]||0;i.length>1&&(p=Math.abs(r[1]-r[0]),d=r[1]>r[0]?r[0]:r[1],N=100-d-p,M>S&&(S=l[1]||0,M=l[0])),requestAnimationFrame(()=>{e.style.cssText=`--_start: ${d}%; --_end: ${N}%; --_value1: '${S}'; --_value2: '${M}';`})}function Xt(){at()}const Z={red:"#F44336",pink:"#E91E63",purple:"#9C27B0","deep-purple":"#673AB7",blue:"#2196F3","light-blue":"#03A9F4",cyan:"#00BCD4",green:"#4CAF50","light-green":"#8BC34A",lime:"#CDDC39",yellow:"#FFEB3B",amber:"#FFC107",orange:"#FF9800","deep-orange":"#FF5722",brown:"#795548","blue-grey":"#607D8B",stackific:"#1447E6","hello-pumpkin":"#FF8F00","sea-lettuce":"#63A002",olive:"#7C7C67",nord:"#5E81AC","vega-violet":"#AD46FF","wild-strawberry":"#F6339A","heliotrope-magenta":"#E12AFB","voodoo-violet":"#804792","red-orchid":"#C0001C","green-brown":"#6E5D00",shakshuka:"#AB350F","purple-honeycreeper":"#8E51FF",maldives:"#00B8DB",verditer:"#00BBA7",fennel:"#00BC7D",gold:"#EFB100",burtuqali:"#FF6900"},ut=["stackific","hello-pumpkin","sea-lettuce","olive","nord","vega-violet","wild-strawberry","heliotrope-magenta","voodoo-violet","red-orchid","green-brown","shakshuka","purple-honeycreeper","maldives","verditer","fennel","gold","burtuqali"],a={light:"",dark:""},st="md3:mode",lt="md3:theme";function Qt(){return ut.slice()}function Jt(){var t;try{return((t=globalThis.localStorage)==null?void 0:t.getItem(lt))||null}catch{return null}}function te(t){var e;try{(e=globalThis.localStorage)==null||e.setItem(lt,t)}catch{}}function b(){return document==null?void 0:document.documentElement}function ft(){var t;try{return((t=globalThis.localStorage)==null?void 0:t.getItem(st))||null}catch{return null}}function ee(t){var e;try{(e=globalThis.localStorage)==null||e.setItem(st,t)}catch{}}function X(){var e,n;const t=(n=(e=b())==null?void 0:e.dataset)==null?void 0:n.mode;return t==="auto"||t==="light"||t==="dark"?t:ft()||"auto"}function _(){var e,n;const t=(n=(e=b())==null?void 0:e.dataset)==null?void 0:n.mode;return t==="light"||t==="dark"?t:Ft()?"dark":"light"}function ne(){if(a.light&&a.dark)return a;const t=b();if(!t)return a;const e=t.dataset.mode,n=i=>{t.dataset.mode=i;const o=getComputedStyle(t),u=["--primary","--on-primary","--primary-container","--on-primary-container","--secondary","--on-secondary","--secondary-container","--on-secondary-container","--tertiary","--on-tertiary","--tertiary-container","--on-tertiary-container","--error","--on-error","--error-container","--on-error-container","--background","--on-background","--surface","--on-surface","--surface-variant","--on-surface-variant","--outline","--outline-variant","--shadow","--scrim","--inverse-surface","--inverse-on-surface","--inverse-primary","--surface-dim","--surface-bright","--surface-container-lowest","--surface-container-low","--surface-container","--surface-container-high","--surface-container-highest"];let r="";for(let l=0,p=u.length;l<p;l++)r+=u[l]+":"+o.getPropertyValue(u[l])+";";return r};try{a.light=n("light"),a.dark=n("dark")}finally{e===void 0?delete t.dataset.mode:t.dataset.mode=e}return a}async function dt(t){const e=b();if(!t)return ne();if(t.light&&t.dark)return a.light=t.light,a.dark=t.dark,e.setAttribute("style",t[_()]),t;if(typeof t=="string"&&ut.includes(t))return te(t),e.dataset.theme=t,e.removeAttribute("style"),a.light="",a.dark="",{light:"",dark:""};typeof t=="string"&&Z[t]&&(t=Z[t]);const n=globalThis.materialDynamicColors;if(typeof n!="function")throw new Error('ui("theme", source) requires material-dynamic-colors. Install it and `import "material-dynamic-colors"` once at app entry, or include the CDN script.');return n(t).then(i=>{const o=u=>{let r="";for(const l of Object.keys(u)){const p=u[l],d=l.replace(/([a-z0-9]|(?=[A-Z]))([A-Z])/g,"$1-$2").toLowerCase();r+="--"+d+":"+p+";"}return r};return a.light=o(i.light),a.dark=o(i.dark),e.setAttribute("style",a[_()]),a})}function pt(t){const e=b();return e?(t&&(t!=="auto"&&t!=="light"&&t!=="dark"&&(t="auto"),ee(t),e.dataset.mode=t,a.light&&a.dark&&e.setAttribute("style",a[_()])),X()):t}let Q=!1;function ie(){if(Q||typeof globalThis.matchMedia!="function")return;const t=globalThis.matchMedia("(prefers-color-scheme: dark)"),e=()=>{const n=b();!n||n.dataset.mode!=="auto"||!a.light||!a.dark||n.setAttribute("style",a[t.matches?"dark":"light"])};t.addEventListener?t.addEventListener("change",e):t.addListener&&t.addListener(e),Q=!0}const C=[];function gt(t){if(t.key==="Escape"){const e=t.currentTarget;yt(e,e)}}function re(t){(v("[autofocus]",t)??t).focus()}function ht(t,e){g(Lt(t.id),"active"),g(t,"active"),g(e,"active"),t.close(),C.pop();const n=C[C.length-1];n&&n.focus()}async function oe(t,e,n,i){!h(i,"button")&&!s(i,"button")&&!s(i,"chip")&&y(i,"active"),y(e,"active"),y(t,"active"),n?t.showModal():t.show(),await it(90),n||x(t,"keydown",gt,!1),C.push(t),re(t)}function ae(t){const e=t.currentTarget,n=O(e);h(n,"dialog")&&ht(n,e)}async function yt(t,e){P();let n=B(e);const i=s(e,"active")||e.open,o=s(e,"modal");o||F(e,"keydown",gt,!1),s(n,"overlay")||(n=Dt({class:"overlay"}),Mt(n,e),await it(90)),o||c(n,"click",ae,!1),i?ht(e,n):oe(e,n,o,t)}let D;function vt(t){F(document.body,"click",vt);const e=t.target,n=f("menu.active");for(let i=0;i<n.length;i++)bt(e,n[i],t)}function ce(t){setTimeout(()=>{const e=v(".field > input",t);e?e.focus():t.focus()},90)}function bt(t,e,n){D&&clearTimeout(D),D=setTimeout(()=>{x(document.body,"click",vt),h(document.activeElement,"input")||P();const i=s(e,"active"),o=(n==null?void 0:n.target)===t,u=!!t.closest("menu");if(!i&&u||i&&o){g(e,"active");return}g(f("menu.active"),"active"),y(e,"active"),ce(e)},90)}let k;function ue(t){const e=t.currentTarget;g(e,"active"),k&&clearTimeout(k)}function se(t,e){P();const n=f(".snackbar.active");for(let i=0;i<n.length;i++)g(n[i],"active");y(t,"active"),c(t,"click",ue),k&&clearTimeout(k),e!==-1&&(k=setTimeout(()=>{g(t,"active")},e??6e3))}function le(t){const e=w(t);e&&g(f(":scope > .page",e),"active"),y(t,"active")}function mt(t){const e=t instanceof MouseEvent,n=t.currentTarget,i=n.getBoundingClientRect(),o=Math.max(i.width,i.height),u=o/2,r=e?t.clientX-i.left-u:i.width/2-u,l=e?t.clientY-i.top-u:i.height/2-u,p=document.createElement("div");p.className="ripple-js";const d=document.createElement("div");d.style.inlineSize=d.style.blockSize=`${o}px`,d.style.left=`${r}px`,d.style.top=`${l}px`,c(d,"animationend",()=>{p.remove()}),p.appendChild(d),n.appendChild(p)}function fe(t){const e=t.target.closest(".slow-ripple, .ripple, .fast-ripple");e&&(Object.defineProperty(t,"currentTarget",{value:e,configurable:!0}),mt(t))}function de(t){const e=t.target.closest(".slow-ripple, .ripple, .fast-ripple");!e||t.key!==" "||(Object.defineProperty(t,"currentTarget",{value:e,configurable:!0}),mt(t))}function pe(){const t=document.body;t&&(c(t,"mousedown",fe),c(t,"keydown",de))}function J(t){const e=t.target;h(e,"progress")?kt(e):At()}function kt(t){requestAnimationFrame(()=>{if(!t.hasAttribute("value")&&!t.hasAttribute("max")){const e=s(t,"circle")?"50":"100";t.style.setProperty("--_value",e),t.setAttribute("value",e),t.setAttribute("max","100"),t.classList.add("indeterminate")}else t.style.setProperty("--_value",String(t.value))})}function At(){if(E&&!et&&!nt)return;const t=document.body,e=f("progress");e.length?x(t,"input",J,!1):F(t,"input",J,!1);for(let n=0;n<e.length;n++)kt(e[n])}let L,I=null;function tt(){L&&clearTimeout(L),L=setTimeout(()=>wt(),180)}async function K(t,e,n,i){if(!e&&(e=v(t.getAttribute("data-ui")),!e)){t.classList.toggle("active");return}if(_t(t),h(e,"dialog")){requestAnimationFrame(()=>yt(t,e));return}if(h(e,"menu")){requestAnimationFrame(()=>bt(t,e,i));return}if(s(e,"snackbar")){requestAnimationFrame(()=>se(e,n));return}if(s(e,"page")){requestAnimationFrame(()=>le(e));return}if(s(e,"active")){g(t,"active"),g(e,"active");return}y(e,"active")}function xt(){globalThis.ui||I||!globalThis.MutationObserver||(I=new MutationObserver(tt),I.observe(document.body,{childList:!0,subtree:!0}),tt())}function ge(t){const e=t.target.closest("[data-ui]");e&&K(e,null,null,t)}function he(t){const e=t.target.closest("[data-ui]");e&&h(e,"a")&&!e.getAttribute("href")&&t.key==="Enter"&&K(e,null,null,t)}function ye(){const t=document.body;t&&(c(t,"click",ge),c(t,"keydown",he))}function wt(t,e){if(t){if(t==="setup"){xt();return}if(t==="guid")return St();if(t==="mode")return pt(e);if(t==="theme")return dt(e);if(t==="themes")return Qt();const n=v(t);if(!n)return;K(n,n,e)}ye(),Vt(),pe(),Xt(),At()}function ve(){var e;if(globalThis.ui)return;const t=(e=globalThis.document)==null?void 0:e.documentElement;if(t){pt(ft()||t.dataset.mode||"auto");const n=Jt();n&&dt(n)}ie(),xt(),globalThis.ui=wt}ve();
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@stackific/md3",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.3",
|
|
4
4
|
"description": "Material Design 3 framework — SCSS + plain-JS. M3 tokens, palette utilities, dialogs, menus, sliders, snackbars; optional runtime theme generation when the consumer brings material-dynamic-colors.",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"license": "Apache-2.0",
|
|
@@ -29,12 +29,10 @@
|
|
|
29
29
|
".": "./dist/md3.js",
|
|
30
30
|
"./style": "./dist/md3.css",
|
|
31
31
|
"./assets/*": "./dist/assets/*",
|
|
32
|
-
"./src/*": "./src/*",
|
|
33
32
|
"./package.json": "./package.json"
|
|
34
33
|
},
|
|
35
34
|
"files": [
|
|
36
35
|
"dist",
|
|
37
|
-
"src",
|
|
38
36
|
"NOTICE",
|
|
39
37
|
"THIRD-PARTY-NOTICES"
|
|
40
38
|
],
|
package/src/main.js
DELETED
|
@@ -1,72 +0,0 @@
|
|
|
1
|
-
import {
|
|
2
|
-
addClass, next, prev, hasTag, insertBefore, wait, create,
|
|
3
|
-
hasClass, removeClass, on, off, queryAllDataUi, blurActiveElement, query, onWeak,
|
|
4
|
-
} from "../utils.js";
|
|
5
|
-
|
|
6
|
-
const _dialogs = [];
|
|
7
|
-
|
|
8
|
-
function onKeydownDialog(e) {
|
|
9
|
-
if (e.key === "Escape") {
|
|
10
|
-
const dialog = e.currentTarget;
|
|
11
|
-
void updateDialog(dialog, dialog);
|
|
12
|
-
}
|
|
13
|
-
}
|
|
14
|
-
|
|
15
|
-
function focusOnDialogOrElement(dialog) {
|
|
16
|
-
const element = query("[autofocus]", dialog) ?? dialog;
|
|
17
|
-
element.focus();
|
|
18
|
-
}
|
|
19
|
-
|
|
20
|
-
function closeDialog(dialog, overlay) {
|
|
21
|
-
removeClass(queryAllDataUi(dialog.id), "active");
|
|
22
|
-
removeClass(dialog, "active");
|
|
23
|
-
removeClass(overlay, "active");
|
|
24
|
-
|
|
25
|
-
dialog.close();
|
|
26
|
-
_dialogs.pop();
|
|
27
|
-
|
|
28
|
-
const previousDialog = _dialogs[_dialogs.length - 1];
|
|
29
|
-
if (previousDialog) previousDialog.focus();
|
|
30
|
-
}
|
|
31
|
-
|
|
32
|
-
async function openDialog(dialog, overlay, isModal, from) {
|
|
33
|
-
if (!hasTag(from, "button") && !hasClass(from, "button") && !hasClass(from, "chip")) addClass(from, "active");
|
|
34
|
-
addClass(overlay, "active");
|
|
35
|
-
addClass(dialog, "active");
|
|
36
|
-
|
|
37
|
-
if (isModal) dialog.showModal();
|
|
38
|
-
else dialog.show();
|
|
39
|
-
|
|
40
|
-
await wait(90);
|
|
41
|
-
|
|
42
|
-
if (!isModal) on(dialog, "keydown", onKeydownDialog, false);
|
|
43
|
-
_dialogs.push(dialog);
|
|
44
|
-
focusOnDialogOrElement(dialog);
|
|
45
|
-
}
|
|
46
|
-
|
|
47
|
-
function onClickOverlay(e) {
|
|
48
|
-
const overlay = e.currentTarget;
|
|
49
|
-
const dialog = next(overlay);
|
|
50
|
-
if (hasTag(dialog, "dialog")) closeDialog(dialog, overlay);
|
|
51
|
-
}
|
|
52
|
-
|
|
53
|
-
export async function updateDialog(from, dialog) {
|
|
54
|
-
blurActiveElement();
|
|
55
|
-
|
|
56
|
-
let overlay = prev(dialog);
|
|
57
|
-
const isActive = hasClass(dialog, "active") || dialog.open;
|
|
58
|
-
const isModal = hasClass(dialog, "modal");
|
|
59
|
-
|
|
60
|
-
if (!isModal) off(dialog, "keydown", onKeydownDialog, false);
|
|
61
|
-
|
|
62
|
-
if (!hasClass(overlay, "overlay")) {
|
|
63
|
-
overlay = create({ class: "overlay" });
|
|
64
|
-
insertBefore(overlay, dialog);
|
|
65
|
-
await wait(90);
|
|
66
|
-
}
|
|
67
|
-
|
|
68
|
-
if (!isModal) onWeak(overlay, "click", onClickOverlay, false);
|
|
69
|
-
|
|
70
|
-
if (isActive) closeDialog(dialog, overlay);
|
|
71
|
-
else void openDialog(dialog, overlay, isModal, from);
|
|
72
|
-
}
|
|
@@ -1,181 +0,0 @@
|
|
|
1
|
-
import {
|
|
2
|
-
query, next, prev, hasType, parent, queryAll, onWeak,
|
|
3
|
-
isChrome, isMac, isIOS, rootSizeInPixels,
|
|
4
|
-
} from "../utils.js";
|
|
5
|
-
|
|
6
|
-
function updatePlaceholder(element) {
|
|
7
|
-
if (!element.placeholder) element.placeholder = " ";
|
|
8
|
-
}
|
|
9
|
-
|
|
10
|
-
function onClickLabel(e) {
|
|
11
|
-
const label = e.currentTarget;
|
|
12
|
-
const field = parent(label);
|
|
13
|
-
const input = query("input:not([type=file], [type=checkbox], [type=radio]), select, textarea", field);
|
|
14
|
-
if (input) input.focus();
|
|
15
|
-
}
|
|
16
|
-
|
|
17
|
-
function onFocusInput(e) {
|
|
18
|
-
updateInput(e.currentTarget);
|
|
19
|
-
}
|
|
20
|
-
|
|
21
|
-
function onBlurInput(e) {
|
|
22
|
-
updateInput(e.currentTarget);
|
|
23
|
-
}
|
|
24
|
-
|
|
25
|
-
function onChangeFile(e) {
|
|
26
|
-
updateFile(e.currentTarget);
|
|
27
|
-
}
|
|
28
|
-
|
|
29
|
-
function onChangeColor(e) {
|
|
30
|
-
updateColor(e.currentTarget);
|
|
31
|
-
}
|
|
32
|
-
|
|
33
|
-
function onKeydownFile(e) {
|
|
34
|
-
updateFile(e.currentTarget, e);
|
|
35
|
-
}
|
|
36
|
-
|
|
37
|
-
function onKeydownColor(e) {
|
|
38
|
-
updateColor(e.currentTarget, e);
|
|
39
|
-
}
|
|
40
|
-
|
|
41
|
-
function onPasswordIconClick(e) {
|
|
42
|
-
const icon = e.currentTarget;
|
|
43
|
-
const input = query("input", parent(icon));
|
|
44
|
-
if (input && icon.textContent?.includes("visibility")) {
|
|
45
|
-
if (input.type === "password") {
|
|
46
|
-
input.type = "text";
|
|
47
|
-
icon.textContent = "visibility_off";
|
|
48
|
-
} else {
|
|
49
|
-
input.type = "password";
|
|
50
|
-
icon.textContent = "visibility";
|
|
51
|
-
}
|
|
52
|
-
}
|
|
53
|
-
}
|
|
54
|
-
|
|
55
|
-
function onInputTextarea(e) {
|
|
56
|
-
updateTextarea(e.currentTarget);
|
|
57
|
-
}
|
|
58
|
-
|
|
59
|
-
function onClickLabelDelegation(e) {
|
|
60
|
-
const from = e.target.closest(".field > label");
|
|
61
|
-
if (!from) return;
|
|
62
|
-
|
|
63
|
-
Object.defineProperty(e, "currentTarget", { value: from, configurable: true });
|
|
64
|
-
onClickLabel(e);
|
|
65
|
-
}
|
|
66
|
-
|
|
67
|
-
function updateAllLabels() {
|
|
68
|
-
const body = document.body;
|
|
69
|
-
if (!body) return;
|
|
70
|
-
|
|
71
|
-
onWeak(body, "click", onClickLabelDelegation);
|
|
72
|
-
}
|
|
73
|
-
|
|
74
|
-
function updateAllInputs() {
|
|
75
|
-
const inputs = queryAll(".field > input:not([type=file], [type=color], [type=range])");
|
|
76
|
-
for (let i = 0; i < inputs.length; i++) {
|
|
77
|
-
onWeak(inputs[i], "focus", onFocusInput);
|
|
78
|
-
onWeak(inputs[i], "blur", onBlurInput);
|
|
79
|
-
updateInput(inputs[i]);
|
|
80
|
-
}
|
|
81
|
-
}
|
|
82
|
-
|
|
83
|
-
function updateAllSelects() {
|
|
84
|
-
const selects = queryAll(".field > select");
|
|
85
|
-
for (let i = 0; i < selects.length; i++) {
|
|
86
|
-
onWeak(selects[i], "focus", onFocusInput);
|
|
87
|
-
onWeak(selects[i], "blur", onBlurInput);
|
|
88
|
-
}
|
|
89
|
-
}
|
|
90
|
-
|
|
91
|
-
function updateAllFiles() {
|
|
92
|
-
const files = queryAll(".field > input[type=file]");
|
|
93
|
-
for (let i = 0; i < files.length; i++) {
|
|
94
|
-
onWeak(files[i], "change", onChangeFile);
|
|
95
|
-
updateFile(files[i]);
|
|
96
|
-
}
|
|
97
|
-
}
|
|
98
|
-
|
|
99
|
-
function updateAllColors() {
|
|
100
|
-
const colors = queryAll(".field > input[type=color]");
|
|
101
|
-
for (let i = 0; i < colors.length; i++) {
|
|
102
|
-
onWeak(colors[i], "change", onChangeColor);
|
|
103
|
-
updateColor(colors[i]);
|
|
104
|
-
}
|
|
105
|
-
}
|
|
106
|
-
|
|
107
|
-
function updateAllTextareas() {
|
|
108
|
-
const textareas = queryAll(".field > textarea");
|
|
109
|
-
for (let i = 0; i < textareas.length; i++) {
|
|
110
|
-
onWeak(textareas[i], "focus", onFocusInput);
|
|
111
|
-
onWeak(textareas[i], "blur", onBlurInput);
|
|
112
|
-
updatePlaceholder(textareas[i]);
|
|
113
|
-
|
|
114
|
-
if (isChrome && !isMac && !isIOS) continue;
|
|
115
|
-
|
|
116
|
-
onWeak(textareas[i], "input", onInputTextarea);
|
|
117
|
-
updateTextarea(textareas[i]);
|
|
118
|
-
}
|
|
119
|
-
}
|
|
120
|
-
|
|
121
|
-
function updateAllPasswordIcons() {
|
|
122
|
-
const icons = queryAll(".field:has(> input[type=password]) > i, a");
|
|
123
|
-
for (let i = 0; i < icons.length; i++) onWeak(icons[i], "click", onPasswordIconClick);
|
|
124
|
-
}
|
|
125
|
-
|
|
126
|
-
function updateInput(input) {
|
|
127
|
-
if (hasType(input, "number") && !input.value) input.value = "";
|
|
128
|
-
updatePlaceholder(input);
|
|
129
|
-
}
|
|
130
|
-
|
|
131
|
-
function updateFile(input, e) {
|
|
132
|
-
if (e?.key === "Enter") {
|
|
133
|
-
const previousInput = prev(input);
|
|
134
|
-
if (!hasType(previousInput, "file")) return;
|
|
135
|
-
previousInput.click();
|
|
136
|
-
return;
|
|
137
|
-
}
|
|
138
|
-
|
|
139
|
-
const nextInput = next(input);
|
|
140
|
-
if (!hasType(nextInput, "text")) return;
|
|
141
|
-
nextInput.value = input.files ? Array.from(input.files).map((x) => x.name).join(", ") : "";
|
|
142
|
-
nextInput.readOnly = true;
|
|
143
|
-
onWeak(nextInput, "keydown", onKeydownFile, false);
|
|
144
|
-
updateInput(nextInput);
|
|
145
|
-
}
|
|
146
|
-
|
|
147
|
-
function updateColor(input, e) {
|
|
148
|
-
if (e?.key === "Enter") {
|
|
149
|
-
const previousInput = prev(input);
|
|
150
|
-
if (!hasType(previousInput, "color")) return;
|
|
151
|
-
previousInput.click();
|
|
152
|
-
return;
|
|
153
|
-
}
|
|
154
|
-
|
|
155
|
-
const nextInput = next(input);
|
|
156
|
-
if (!hasType(nextInput, "text")) return;
|
|
157
|
-
nextInput.readOnly = true;
|
|
158
|
-
nextInput.value = input.value;
|
|
159
|
-
onWeak(nextInput, "keydown", onKeydownColor, false);
|
|
160
|
-
updateInput(nextInput);
|
|
161
|
-
}
|
|
162
|
-
|
|
163
|
-
function updateTextarea(textarea) {
|
|
164
|
-
updatePlaceholder(textarea);
|
|
165
|
-
|
|
166
|
-
if (textarea.hasAttribute("rows")) return;
|
|
167
|
-
|
|
168
|
-
const rootSize = rootSizeInPixels();
|
|
169
|
-
textarea.style.blockSize = "auto";
|
|
170
|
-
textarea.style.blockSize = `${textarea.scrollHeight - rootSize}px`;
|
|
171
|
-
}
|
|
172
|
-
|
|
173
|
-
export function updateAllFields() {
|
|
174
|
-
updateAllLabels();
|
|
175
|
-
updateAllInputs();
|
|
176
|
-
updateAllSelects();
|
|
177
|
-
updateAllFiles();
|
|
178
|
-
updateAllColors();
|
|
179
|
-
updateAllTextareas();
|
|
180
|
-
updateAllPasswordIcons();
|
|
181
|
-
}
|
|
@@ -1,42 +0,0 @@
|
|
|
1
|
-
import {
|
|
2
|
-
query, queryAll, addClass, on, off, hasTag, hasClass, removeClass, blurActiveElement,
|
|
3
|
-
} from "../utils.js";
|
|
4
|
-
|
|
5
|
-
let _timeoutMenu;
|
|
6
|
-
|
|
7
|
-
function onClickDocument(e) {
|
|
8
|
-
off(document.body, "click", onClickDocument);
|
|
9
|
-
const body = e.target;
|
|
10
|
-
const menus = queryAll("menu.active");
|
|
11
|
-
for (let i = 0; i < menus.length; i++) updateMenu(body, menus[i], e);
|
|
12
|
-
}
|
|
13
|
-
|
|
14
|
-
function focusOnMenuOrInput(menu) {
|
|
15
|
-
setTimeout(() => {
|
|
16
|
-
const input = query(".field > input", menu);
|
|
17
|
-
if (input) input.focus();
|
|
18
|
-
else menu.focus();
|
|
19
|
-
}, 90);
|
|
20
|
-
}
|
|
21
|
-
|
|
22
|
-
export function updateMenu(from, menu, e) {
|
|
23
|
-
if (_timeoutMenu) clearTimeout(_timeoutMenu);
|
|
24
|
-
|
|
25
|
-
_timeoutMenu = setTimeout(() => {
|
|
26
|
-
on(document.body, "click", onClickDocument);
|
|
27
|
-
if (!hasTag(document.activeElement, "input")) blurActiveElement();
|
|
28
|
-
|
|
29
|
-
const isActive = hasClass(menu, "active");
|
|
30
|
-
const isEvent = e?.target === from;
|
|
31
|
-
const isChild = !!from.closest("menu");
|
|
32
|
-
|
|
33
|
-
if ((!isActive && isChild) || (isActive && isEvent)) {
|
|
34
|
-
removeClass(menu, "active");
|
|
35
|
-
return;
|
|
36
|
-
}
|
|
37
|
-
|
|
38
|
-
removeClass(queryAll("menu.active"), "active");
|
|
39
|
-
addClass(menu, "active");
|
|
40
|
-
focusOnMenuOrInput(menu);
|
|
41
|
-
}, 90);
|
|
42
|
-
}
|
|
@@ -1,35 +0,0 @@
|
|
|
1
|
-
import { queryAll, hasTag, off, on, isMac, isIOS, isChrome, hasClass } from "../utils.js";
|
|
2
|
-
|
|
3
|
-
function onInputDocument(e) {
|
|
4
|
-
const progress = e.target;
|
|
5
|
-
|
|
6
|
-
if (hasTag(progress, "progress")) {
|
|
7
|
-
updateProgress(progress);
|
|
8
|
-
} else {
|
|
9
|
-
updateAllProgress();
|
|
10
|
-
}
|
|
11
|
-
}
|
|
12
|
-
|
|
13
|
-
function updateProgress(progress) {
|
|
14
|
-
requestAnimationFrame(() => {
|
|
15
|
-
if (!progress.hasAttribute("value") && !progress.hasAttribute("max")) {
|
|
16
|
-
const value = hasClass(progress, "circle") ? "50" : "100";
|
|
17
|
-
progress.style.setProperty("--_value", value);
|
|
18
|
-
progress.setAttribute("value", value);
|
|
19
|
-
progress.setAttribute("max", "100");
|
|
20
|
-
progress.classList.add("indeterminate");
|
|
21
|
-
} else {
|
|
22
|
-
progress.style.setProperty("--_value", String(progress.value));
|
|
23
|
-
}
|
|
24
|
-
});
|
|
25
|
-
}
|
|
26
|
-
|
|
27
|
-
export function updateAllProgress() {
|
|
28
|
-
if (isChrome && !isMac && !isIOS) return;
|
|
29
|
-
|
|
30
|
-
const body = document.body;
|
|
31
|
-
const progresses = queryAll("progress");
|
|
32
|
-
if (!progresses.length) off(body, "input", onInputDocument, false);
|
|
33
|
-
else on(body, "input", onInputDocument, false);
|
|
34
|
-
for (let i = 0; i < progresses.length; i++) updateProgress(progresses[i]);
|
|
35
|
-
}
|
|
@@ -1,78 +0,0 @@
|
|
|
1
|
-
import {
|
|
2
|
-
query, queryAll, hasClass, on, off, parent, hasTag, onWeak, rootSizeInPixels,
|
|
3
|
-
} from "../utils.js";
|
|
4
|
-
|
|
5
|
-
function onInputDocument(e) {
|
|
6
|
-
const input = e.target;
|
|
7
|
-
if (!hasTag(input, "input") && !hasTag(input, "select")) return;
|
|
8
|
-
|
|
9
|
-
if (input.type === "range") {
|
|
10
|
-
input.focus();
|
|
11
|
-
updateRange(input);
|
|
12
|
-
} else {
|
|
13
|
-
updateAllRanges();
|
|
14
|
-
}
|
|
15
|
-
}
|
|
16
|
-
|
|
17
|
-
function onChangeInput(e) {
|
|
18
|
-
const isCoarse = window.matchMedia("(pointer: coarse)").matches;
|
|
19
|
-
if (!isCoarse) return;
|
|
20
|
-
|
|
21
|
-
const input = e.target;
|
|
22
|
-
input.blur();
|
|
23
|
-
}
|
|
24
|
-
|
|
25
|
-
function updateAllRanges() {
|
|
26
|
-
const body = document.body;
|
|
27
|
-
const ranges = queryAll(".slider > input[type=range]");
|
|
28
|
-
if (!ranges.length) off(body, "input", onInputDocument, false);
|
|
29
|
-
else on(body, "input", onInputDocument, false);
|
|
30
|
-
for (let i = 0; i < ranges.length; i++) updateRange(ranges[i]);
|
|
31
|
-
}
|
|
32
|
-
|
|
33
|
-
function updateRange(input) {
|
|
34
|
-
onWeak(input, "change", onChangeInput);
|
|
35
|
-
|
|
36
|
-
const label = parent(input);
|
|
37
|
-
const bar = query("span", label);
|
|
38
|
-
const inputs = queryAll("input", label);
|
|
39
|
-
if (!inputs.length || !bar) return;
|
|
40
|
-
|
|
41
|
-
const rootSize = rootSizeInPixels();
|
|
42
|
-
const thumb = hasClass(label, "max") ? 0 : (0.25 * rootSize * 100) / inputs[0].offsetWidth;
|
|
43
|
-
const percents = [];
|
|
44
|
-
const values = [];
|
|
45
|
-
for (let i = 0, n = inputs.length; i < n; i++) {
|
|
46
|
-
const min = parseFloat(inputs[i].min) || 0;
|
|
47
|
-
const max = parseFloat(inputs[i].max) || 100;
|
|
48
|
-
const value = parseFloat(inputs[i].value) || 0;
|
|
49
|
-
const percent = ((value - min) * 100) / (max - min);
|
|
50
|
-
const fix = thumb / 2 - (thumb * percent) / 100;
|
|
51
|
-
percents.push(percent + fix);
|
|
52
|
-
values.push(value);
|
|
53
|
-
}
|
|
54
|
-
|
|
55
|
-
let percent = percents[0];
|
|
56
|
-
let start = 0;
|
|
57
|
-
let end = 100 - start - percent;
|
|
58
|
-
let value1 = values[0];
|
|
59
|
-
let value2 = values[1] || 0;
|
|
60
|
-
if (inputs.length > 1) {
|
|
61
|
-
percent = Math.abs(percents[1] - percents[0]);
|
|
62
|
-
start = percents[1] > percents[0] ? percents[0] : percents[1];
|
|
63
|
-
end = 100 - start - percent;
|
|
64
|
-
|
|
65
|
-
if (value2 > value1) {
|
|
66
|
-
value1 = values[1] || 0;
|
|
67
|
-
value2 = values[0];
|
|
68
|
-
}
|
|
69
|
-
}
|
|
70
|
-
|
|
71
|
-
requestAnimationFrame(() => {
|
|
72
|
-
label.style.cssText = `--_start: ${start}%; --_end: ${end}%; --_value1: '${value1}'; --_value2: '${value2}';`;
|
|
73
|
-
});
|
|
74
|
-
}
|
|
75
|
-
|
|
76
|
-
export function updateAllSliders() {
|
|
77
|
-
updateAllRanges();
|
|
78
|
-
}
|
|
@@ -1,27 +0,0 @@
|
|
|
1
|
-
import { queryAll, addClass, removeClass, blurActiveElement, onWeak } from "../utils.js";
|
|
2
|
-
|
|
3
|
-
let _timeoutSnackbar;
|
|
4
|
-
|
|
5
|
-
function onClickSnackbar(e) {
|
|
6
|
-
const snackbar = e.currentTarget;
|
|
7
|
-
removeClass(snackbar, "active");
|
|
8
|
-
|
|
9
|
-
if (_timeoutSnackbar) clearTimeout(_timeoutSnackbar);
|
|
10
|
-
}
|
|
11
|
-
|
|
12
|
-
export function updateSnackbar(snackbar, milliseconds) {
|
|
13
|
-
blurActiveElement();
|
|
14
|
-
|
|
15
|
-
const activeSnackbars = queryAll(".snackbar.active");
|
|
16
|
-
for (let i = 0; i < activeSnackbars.length; i++) removeClass(activeSnackbars[i], "active");
|
|
17
|
-
addClass(snackbar, "active");
|
|
18
|
-
onWeak(snackbar, "click", onClickSnackbar);
|
|
19
|
-
|
|
20
|
-
if (_timeoutSnackbar) clearTimeout(_timeoutSnackbar);
|
|
21
|
-
|
|
22
|
-
if (milliseconds === -1) return;
|
|
23
|
-
|
|
24
|
-
_timeoutSnackbar = setTimeout(() => {
|
|
25
|
-
removeClass(snackbar, "active");
|
|
26
|
-
}, milliseconds ?? 6000);
|
|
27
|
-
}
|
|
@@ -1,46 +0,0 @@
|
|
|
1
|
-
import { onWeak } from "../utils.js";
|
|
2
|
-
|
|
3
|
-
function updateRipple(e) {
|
|
4
|
-
const isMouseEvent = e instanceof MouseEvent;
|
|
5
|
-
const element = e.currentTarget;
|
|
6
|
-
const rect = element.getBoundingClientRect();
|
|
7
|
-
const diameter = Math.max(rect.width, rect.height);
|
|
8
|
-
const radius = diameter / 2;
|
|
9
|
-
const x = isMouseEvent ? e.clientX - rect.left - radius : (rect.width / 2) - radius;
|
|
10
|
-
const y = isMouseEvent ? e.clientY - rect.top - radius : (rect.height / 2) - radius;
|
|
11
|
-
const rippleContainer = document.createElement("div");
|
|
12
|
-
rippleContainer.className = "ripple-js";
|
|
13
|
-
|
|
14
|
-
const ripple = document.createElement("div");
|
|
15
|
-
ripple.style.inlineSize = ripple.style.blockSize = `${diameter}px`;
|
|
16
|
-
ripple.style.left = `${x}px`;
|
|
17
|
-
ripple.style.top = `${y}px`;
|
|
18
|
-
onWeak(ripple, "animationend", () => { rippleContainer.remove(); });
|
|
19
|
-
|
|
20
|
-
rippleContainer.appendChild(ripple);
|
|
21
|
-
element.appendChild(rippleContainer);
|
|
22
|
-
}
|
|
23
|
-
|
|
24
|
-
function onMousedownRippleDelegation(e) {
|
|
25
|
-
const from = e.target.closest(".slow-ripple, .ripple, .fast-ripple");
|
|
26
|
-
if (!from) return;
|
|
27
|
-
|
|
28
|
-
Object.defineProperty(e, "currentTarget", { value: from, configurable: true });
|
|
29
|
-
updateRipple(e);
|
|
30
|
-
}
|
|
31
|
-
|
|
32
|
-
function onKeydownRippleDelegation(e) {
|
|
33
|
-
const from = e.target.closest(".slow-ripple, .ripple, .fast-ripple");
|
|
34
|
-
if (!from || e.key !== " ") return;
|
|
35
|
-
|
|
36
|
-
Object.defineProperty(e, "currentTarget", { value: from, configurable: true });
|
|
37
|
-
updateRipple(e);
|
|
38
|
-
}
|
|
39
|
-
|
|
40
|
-
export function updateAllRipples() {
|
|
41
|
-
const body = document.body;
|
|
42
|
-
if (!body) return;
|
|
43
|
-
|
|
44
|
-
onWeak(body, "mousedown", onMousedownRippleDelegation);
|
|
45
|
-
onWeak(body, "keydown", onKeydownRippleDelegation);
|
|
46
|
-
}
|