webc.site 0.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (24) hide show
  1. package/INDEX.js +1 -0
  2. package/On.js +3 -0
  3. package/On.js.map +10 -0
  4. package/Scroll._.css +1 -0
  5. package/Scroll._.css.map +1 -0
  6. package/Scroll.css +1 -0
  7. package/Scroll.css.map +1 -0
  8. package/Scroll.js +3 -0
  9. package/Scroll.js.map +10 -0
  10. package/Wait._.css +1 -0
  11. package/Wait._.css.map +1 -0
  12. package/Wait.css +1 -0
  13. package/Wait.css.map +1 -0
  14. package/dom.js +3 -0
  15. package/dom.js.map +10 -0
  16. package/md/Scroll.js +51 -0
  17. package/md/Wait.js +25 -0
  18. package/package.json +1 -0
  19. package/svg/-oloHJiPWtJPJs8g_0WIaA.svg +1 -0
  20. package/svg/giUzPhnYmbjOG3VzqseH5g.svg +1 -0
  21. package/svg/sgoOOaKyF_KnkUoRKxWczw.svg +1 -0
  22. package/svg/yhI9x3s8u28j5vUN45useQ.svg +1 -0
  23. package/x.js +1 -0
  24. package/x.js.map +1 -0
package/INDEX.js ADDED
@@ -0,0 +1 @@
1
+ export default [["Wait","加载动画与表单提交遮罩",()=>import("./md/Wait.js")],["Scroll","自定义虚拟滚动条",()=>import("./md/Scroll.js")]];
package/On.js ADDED
@@ -0,0 +1,3 @@
1
+ var o=(t,n)=>{let e,r;for(e in n)r=n[e],t.addEventListener(e,r);return()=>{for(e in n)r=n[e],t.removeEventListener(e,r)}};export{o as On};
2
+
3
+ //# debugId=3DD78A4F28E4B48664756E2164756E21
package/On.js.map ADDED
@@ -0,0 +1,10 @@
1
+ {
2
+ "version": 3,
3
+ "sources": ["../../importmap/x/On.js"],
4
+ "sourcesContent": [
5
+ "export const On = (elem, dict) => {\n let event, func;\n for (event in dict) {\n func = dict[event];\n elem.addEventListener(event, func);\n }\n return () => {\n for (event in dict) {\n func = dict[event];\n elem.removeEventListener(event, func);\n }\n };\n};\n"
6
+ ],
7
+ "mappings": "AAAO,IAAM,EAAK,CAAC,EAAM,IAAS,CAChC,IAAI,EAAO,EACX,IAAK,KAAS,EACZ,EAAO,EAAK,GACZ,EAAK,iBAAiB,EAAO,CAAI,EAEnC,MAAO,IAAM,CACX,IAAK,KAAS,EACZ,EAAO,EAAK,GACZ,EAAK,oBAAoB,EAAO,CAAI",
8
+ "debugId": "3DD78A4F28E4B48664756E2164756E21",
9
+ "names": []
10
+ }
package/Scroll._.css ADDED
@@ -0,0 +1 @@
1
+ v-scroll,h-scroll{display:block}v-scroll::part(scroll),h-scroll::part(scroll){scrollbar-width:none;width:100%;height:100%;display:flex;position:relative;overflow:auto}v-scroll::part(scroll)::-webkit-scrollbar,h-scroll::part(scroll)::-webkit-scrollbar{display:none}v-scroll::part(bar),h-scroll::part(bar){user-select:none;z-index:999;--si-anim:none;--si-bg:#7d7d7d99;transition:all .2s,opacity 1s,box-shadow 1s;display:block;position:sticky;bottom:0}v-scroll::part(bar):hover,h-scroll::part(bar):hover,v-scroll::part(drag),h-scroll::part(drag){--si-anim:v-scroll-pop .4s ease-out;--si-bg:#7d7d7dcc;background:#0000000d;box-shadow:inset 0 1px 6px #fffc,inset 0 -2px 8px #0000000a,inset 0 0 0 1px #ffffff80;opacity:1!important}v-scroll::part(si),h-scroll::part(si){animation:var(--si-anim);background:var(--si-bg);border-radius:3px;margin:auto;transition:all .2s,opacity 1s,box-shadow 1s;display:block;position:absolute}v-scroll{--sh:inset 3px 0 3px -3px #0000004d, inset -3px 0 3px -3px #0000000d;width:100%;height:100%}v-scroll::part(scroll){overflow-x:hidden}v-scroll::part(bar){width:13px;height:100%;margin-left:-13px;top:0;left:100%}v-scroll::part(bar):hover,v-scroll::part(drag){cursor:var(--cursorScrollvSvg);width:21px;margin-left:-21px}v-scroll::part(si){cursor:var(--cursorScrollvSvg);width:7px;left:0;right:0}h-scroll{--sh:inset 0 3px 3px -3px #0000004d, inset 0 -3px 3px -3px #0000000d;width:100%}h-scroll::part(scroll){width:100%;display:block;overflow-y:hidden}h-scroll::part(bar){width:100%;height:13px;margin-top:-13px;left:0;right:0}h-scroll::part(bar):hover,h-scroll::part(drag){cursor:var(--cursorScrollhSvg);height:21px;margin-top:-21px}h-scroll::part(si){cursor:var(--cursorScrollhSvg);height:7px;top:0;bottom:0}body.drag{cursor:var(--cursorGrabSvg)!important}@-webkit-keyframes v-scroll-pop{0%{transform:scale(1)}40%{transform:scale(1.15)}to{transform:scale(1)}}@-moz-keyframes v-scroll-pop{0%{transform:scale(1)}40%{transform:scale(1.15)}to{transform:scale(1)}}@-o-keyframes v-scroll-pop{0%{transform:scale(1)}40%{transform:scale(1.15)}to{transform:scale(1)}}@keyframes v-scroll-pop{0%{transform:scale(1)}40%{transform:scale(1.15)}to{transform:scale(1)}}
package/Scroll._.css.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"sourceRoot":null,"mappings":"AAAA,gCAIA,uIASA,iGAIA,yLAWA,mRAUA,iMAUA,qGAKA,yCAGA,6EAOA,2GAMA,2EAMA,yFAIA,kEAKA,2EAOA,2GAMA,4EAMA,gDAGA","sources":["Users/z/git/webc-zh/lib/Scroll._.css"],"sourcesContent":["v-scroll,\nh-scroll {\n display: block;\n}\nv-scroll::part(scroll),\nh-scroll::part(scroll) {\n display: flex;\n height: 100%;\n overflow: auto;\n position: relative;\n scrollbar-width: none;\n width: 100%;\n}\nv-scroll::part(scroll)::-webkit-scrollbar,\nh-scroll::part(scroll)::-webkit-scrollbar {\n display: none;\n}\nv-scroll::part(bar),\nh-scroll::part(bar) {\n bottom: 0;\n display: block;\n position: sticky;\n transition: all 0.2s, opacity 1s, box-shadow 1s;\n user-select: none;\n z-index: 999;\n --si-anim: none;\n --si-bg: rgba(125,125,125,0.6);\n}\nv-scroll::part(bar):hover,\nh-scroll::part(bar):hover,\nv-scroll::part(drag),\nh-scroll::part(drag) {\n background: rgba(0,0,0,0.051);\n box-shadow: inset 0 1px 6px rgba(255,255,255,0.8), inset 0 -2px 8px rgba(0,0,0,0.039), inset 0 0 0 1px rgba(255,255,255,0.502);\n opacity: 1 !important;\n --si-anim: v-scroll-pop 0.4s ease-out;\n --si-bg: rgba(125,125,125,0.8);\n}\nv-scroll::part(si),\nh-scroll::part(si) {\n animation: var(--si-anim);\n background: var(--si-bg);\n border-radius: 3px;\n display: block;\n margin: auto;\n position: absolute;\n transition: all 0.2s, opacity 1s, box-shadow 1s;\n}\nv-scroll {\n height: 100%;\n width: 100%;\n --sh: inset 3px 0 3px -3px rgba(0,0,0,0.302), inset -3px 0 3px -3px rgba(0,0,0,0.051);\n}\nv-scroll::part(scroll) {\n overflow-x: hidden;\n}\nv-scroll::part(bar) {\n height: 100%;\n left: 100%;\n margin-left: -13px;\n top: 0;\n width: 13px;\n}\nv-scroll::part(bar):hover,\nv-scroll::part(drag) {\n cursor: var(--cursorScrollvSvg);\n margin-left: -21px;\n width: 21px;\n}\nv-scroll::part(si) {\n cursor: var(--cursorScrollvSvg);\n left: 0;\n right: 0;\n width: 7px;\n}\nh-scroll {\n width: 100%;\n --sh: inset 0 3px 3px -3px rgba(0,0,0,0.302), inset 0 -3px 3px -3px rgba(0,0,0,0.051);\n}\nh-scroll::part(scroll) {\n display: block;\n overflow-y: hidden;\n width: 100%;\n}\nh-scroll::part(bar) {\n height: 13px;\n left: 0;\n margin-top: -13px;\n right: 0;\n width: 100%;\n}\nh-scroll::part(bar):hover,\nh-scroll::part(drag) {\n cursor: var(--cursorScrollhSvg);\n height: 21px;\n margin-top: -21px;\n}\nh-scroll::part(si) {\n bottom: 0;\n cursor: var(--cursorScrollhSvg);\n height: 7px;\n top: 0;\n}\nbody.drag {\n cursor: var(--cursorGrabSvg) !important;\n}\n@-moz-keyframes v-scroll-pop {\n 0% {\n transform: scale(1);\n }\n 40% {\n transform: scale(1.15);\n }\n 100% {\n transform: scale(1);\n }\n}\n@-webkit-keyframes v-scroll-pop {\n 0% {\n transform: scale(1);\n }\n 40% {\n transform: scale(1.15);\n }\n 100% {\n transform: scale(1);\n }\n}\n@-o-keyframes v-scroll-pop {\n 0% {\n transform: scale(1);\n }\n 40% {\n transform: scale(1.15);\n }\n 100% {\n transform: scale(1);\n }\n}\n@keyframes v-scroll-pop {\n 0% {\n transform: scale(1);\n }\n 40% {\n transform: scale(1.15);\n }\n 100% {\n transform: scale(1);\n }\n}\n"],"names":[]}
package/Scroll.css ADDED
@@ -0,0 +1 @@
1
+ :root{--cursorGrabSvg:url(./svg/giUzPhnYmbjOG3VzqseH5g.svg) 8 7, grabbing;--cursorScrollhSvg:url(./svg/yhI9x3s8u28j5vUN45useQ.svg) 10 10, ew-resize;--cursorScrollvSvg:url(./svg/sgoOOaKyF_KnkUoRKxWczw.svg) 10 10, ns-resize}v-scroll,h-scroll{display:block}v-scroll::part(scroll),h-scroll::part(scroll){scrollbar-width:none;width:100%;height:100%;display:flex;position:relative;overflow:auto}v-scroll::part(scroll)::-webkit-scrollbar,h-scroll::part(scroll)::-webkit-scrollbar{display:none}v-scroll::part(bar),h-scroll::part(bar){user-select:none;z-index:999;--si-anim:none;--si-bg:#7d7d7d99;transition:all .2s,opacity 1s,box-shadow 1s;display:block;position:sticky;bottom:0}v-scroll::part(bar):hover,h-scroll::part(bar):hover,v-scroll::part(drag),h-scroll::part(drag){--si-anim:v-scroll-pop .4s ease-out;--si-bg:#7d7d7dcc;background:#0000000d;box-shadow:inset 0 1px 6px #fffc,inset 0 -2px 8px #0000000a,inset 0 0 0 1px #ffffff80;opacity:1!important}v-scroll::part(si),h-scroll::part(si){animation:var(--si-anim);background:var(--si-bg);border-radius:3px;margin:auto;transition:all .2s,opacity 1s,box-shadow 1s;display:block;position:absolute}v-scroll{--sh:inset 3px 0 3px -3px #0000004d, inset -3px 0 3px -3px #0000000d;width:100%;height:100%}v-scroll::part(scroll){overflow-x:hidden}v-scroll::part(bar){width:13px;height:100%;margin-left:-13px;top:0;left:100%}v-scroll::part(bar):hover,v-scroll::part(drag){cursor:var(--cursorScrollvSvg);width:21px;margin-left:-21px}v-scroll::part(si){cursor:var(--cursorScrollvSvg);width:7px;left:0;right:0}h-scroll{--sh:inset 0 3px 3px -3px #0000004d, inset 0 -3px 3px -3px #0000000d;width:100%}h-scroll::part(scroll){width:100%;display:block;overflow-y:hidden}h-scroll::part(bar){width:100%;height:13px;margin-top:-13px;left:0;right:0}h-scroll::part(bar):hover,h-scroll::part(drag){cursor:var(--cursorScrollhSvg);height:21px;margin-top:-21px}h-scroll::part(si){cursor:var(--cursorScrollhSvg);height:7px;top:0;bottom:0}body.drag{cursor:var(--cursorGrabSvg)!important}@-webkit-keyframes v-scroll-pop{0%{transform:scale(1)}40%{transform:scale(1.15)}to{transform:scale(1)}}@-moz-keyframes v-scroll-pop{0%{transform:scale(1)}40%{transform:scale(1.15)}to{transform:scale(1)}}@-o-keyframes v-scroll-pop{0%{transform:scale(1)}40%{transform:scale(1.15)}to{transform:scale(1)}}@keyframes v-scroll-pop{0%{transform:scale(1)}40%{transform:scale(1.15)}to{transform:scale(1)}}
package/Scroll.css.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"sourceRoot":null,"mappings":"AAAA,8NAKA,gCAIA,uIASA,iGAIA,yLAWA,mRAUA,iMAUA,qGAKA,yCAGA,6EAOA,2GAMA,2EAMA,yFAIA,kEAKA,2EAOA,2GAMA,4EAMA,gDAGA","sources":["Users/z/git/webc-zh/lib/Scroll.css"],"sourcesContent":[":root {\n --cursorGrabSvg: url(\"./svg/giUzPhnYmbjOG3VzqseH5g.svg\") 8 7, grabbing;\n --cursorScrollhSvg: url(\"./svg/yhI9x3s8u28j5vUN45useQ.svg\") 10 10, ew-resize;\n --cursorScrollvSvg: url(\"./svg/sgoOOaKyF_KnkUoRKxWczw.svg\") 10 10, ns-resize;\n}\nv-scroll,\nh-scroll {\n display: block;\n}\nv-scroll::part(scroll),\nh-scroll::part(scroll) {\n display: flex;\n height: 100%;\n overflow: auto;\n position: relative;\n scrollbar-width: none;\n width: 100%;\n}\nv-scroll::part(scroll)::-webkit-scrollbar,\nh-scroll::part(scroll)::-webkit-scrollbar {\n display: none;\n}\nv-scroll::part(bar),\nh-scroll::part(bar) {\n bottom: 0;\n display: block;\n position: sticky;\n transition: all 0.2s, opacity 1s, box-shadow 1s;\n user-select: none;\n z-index: 999;\n --si-anim: none;\n --si-bg: rgba(125,125,125,0.6);\n}\nv-scroll::part(bar):hover,\nh-scroll::part(bar):hover,\nv-scroll::part(drag),\nh-scroll::part(drag) {\n background: rgba(0,0,0,0.051);\n box-shadow: inset 0 1px 6px rgba(255,255,255,0.8), inset 0 -2px 8px rgba(0,0,0,0.039), inset 0 0 0 1px rgba(255,255,255,0.502);\n opacity: 1 !important;\n --si-anim: v-scroll-pop 0.4s ease-out;\n --si-bg: rgba(125,125,125,0.8);\n}\nv-scroll::part(si),\nh-scroll::part(si) {\n animation: var(--si-anim);\n background: var(--si-bg);\n border-radius: 3px;\n display: block;\n margin: auto;\n position: absolute;\n transition: all 0.2s, opacity 1s, box-shadow 1s;\n}\nv-scroll {\n height: 100%;\n width: 100%;\n --sh: inset 3px 0 3px -3px rgba(0,0,0,0.302), inset -3px 0 3px -3px rgba(0,0,0,0.051);\n}\nv-scroll::part(scroll) {\n overflow-x: hidden;\n}\nv-scroll::part(bar) {\n height: 100%;\n left: 100%;\n margin-left: -13px;\n top: 0;\n width: 13px;\n}\nv-scroll::part(bar):hover,\nv-scroll::part(drag) {\n cursor: var(--cursorScrollvSvg);\n margin-left: -21px;\n width: 21px;\n}\nv-scroll::part(si) {\n cursor: var(--cursorScrollvSvg);\n left: 0;\n right: 0;\n width: 7px;\n}\nh-scroll {\n width: 100%;\n --sh: inset 0 3px 3px -3px rgba(0,0,0,0.302), inset 0 -3px 3px -3px rgba(0,0,0,0.051);\n}\nh-scroll::part(scroll) {\n display: block;\n overflow-y: hidden;\n width: 100%;\n}\nh-scroll::part(bar) {\n height: 13px;\n left: 0;\n margin-top: -13px;\n right: 0;\n width: 100%;\n}\nh-scroll::part(bar):hover,\nh-scroll::part(drag) {\n cursor: var(--cursorScrollhSvg);\n height: 21px;\n margin-top: -21px;\n}\nh-scroll::part(si) {\n bottom: 0;\n cursor: var(--cursorScrollhSvg);\n height: 7px;\n top: 0;\n}\nbody.drag {\n cursor: var(--cursorGrabSvg) !important;\n}\n@-moz-keyframes v-scroll-pop {\n 0% {\n transform: scale(1);\n }\n 40% {\n transform: scale(1.15);\n }\n 100% {\n transform: scale(1);\n }\n}\n@-webkit-keyframes v-scroll-pop {\n 0% {\n transform: scale(1);\n }\n 40% {\n transform: scale(1.15);\n }\n 100% {\n transform: scale(1);\n }\n}\n@-o-keyframes v-scroll-pop {\n 0% {\n transform: scale(1);\n }\n 40% {\n transform: scale(1.15);\n }\n 100% {\n transform: scale(1);\n }\n}\n@keyframes v-scroll-pop {\n 0% {\n transform: scale(1);\n }\n 40% {\n transform: scale(1.15);\n }\n 100% {\n transform: scale(1);\n }\n}\n"],"names":[]}
package/Scroll.js ADDED
@@ -0,0 +1,3 @@
1
+ import{On as A}from"./On.js";import{D as I,newEl as H}from"./dom.js";(()=>{let{round:h,max:b,min:D}=Math,a=(r,l,...p)=>{let c=H(r);if(l)c.setAttribute("part",l);return c.append(...p),c},k=(r,l,p)=>{let c=r.toLowerCase(),f=l.toLowerCase(),_="client"+r,y="scroll"+r,d="scroll"+l,w="client"+p;return(i)=>{let C,m,g,v=-1,P=i.firstElementChild,u=a("i","si"),o=a("b","bar",u),T=(e=u[_])=>{let t=i[_],s=P[y];return[s-t,b(1,t-e-6),e,t,s]},E=(e)=>{if(!o.parentNode)return;let[t,s]=T(e),n=b(0,D(i[d],t));if(v!==-1&&v!==n)o.style.opacity=1,clearTimeout(C),C=setTimeout(()=>o.style.opacity=0,1000);v=n,u.style[f]=3+h(s*n/t)+"px"},G=(e)=>{if(m)return;let t=I.body;t.setPointerCapture(e.pointerId),t.classList.add("drag"),o.part.add("drag");let s=e[w],n=()=>{t.classList.remove("drag"),o.part.remove("drag"),x(),m=null},x=A(t,{pointermove:(R)=>{let[z,B]=T();i[d]+=h(z*(R[w]-s)/B),s=R[w]},pointerup:n,lostpointercapture:n});m=n},S=(e)=>{let t=o.getBoundingClientRect(),s=t[f],[n,x,R]=T();i[d]=h(n*b(D((e[w]-s-3-R/2)/x,1),0)),G(e)},N=[A(o,{pointerdown:S}),A(u,{pointerdown:(e)=>{e.stopPropagation(),G(e)}}),A(i,{scroll:()=>E()})],L=new ResizeObserver(()=>{clearTimeout(g),g=setTimeout(()=>{let[,,,e,t]=T();if(e<t){if(o.parentNode!==i)i.appendChild(o);let n=b(16,h(e*e/t));u.style[c]=n+"px",E(n)}else if(o.parentNode)o.remove()},200)}),X=()=>{if(clearTimeout(C),clearTimeout(g),N.forEach((e)=>e()),m)m();if(L.disconnect(),o.parentNode)o.remove()};return o.style.opacity=0,[i,P].forEach((e)=>L.observe(e)),X}};[["v","Height","Top","Y","flex-direction:column;width:100%;min-height:100%"],["h","Width","Left","X","min-width:100%;width:max-content;height:100%"]].map(([r,l,p,c,f])=>{let _=k(l,p,c);customElements.define(r+"-scroll",class extends HTMLElement{connectedCallback(){let y=a("b","",a("slot")),d=a("b","scroll",y);y.style.cssText="display:flex;"+f,this.attachShadow({mode:"open"}).appendChild(d),this._unbind=_(d)}disconnectedCallback(){this._unbind?.()}})})})();
2
+
3
+
package/Scroll.js.map ADDED
@@ -0,0 +1,10 @@
1
+ {
2
+ "version": 3,
3
+ "sources": ["../com/Scroll/Scroll.js"],
4
+ "sourcesContent": [
5
+ "import { On } from \"x/On.js\";\nimport { D, newEl } from \"x/dom.js\";\n\n(() => {\n const { round, max, min } = Math,\n PART = \"part\",\n BAR = \"bar\",\n SI = \"si\",\n DRAG = \"drag\",\n PX = \"px\",\n mk = (tag, part, ...kids) => {\n const e = newEl(tag);\n if (part) e.setAttribute(PART, part);\n e.append(...kids);\n return e;\n },\n mkScroll = (size, pos, axis) => {\n const style_size = size.toLowerCase(),\n style_pos = pos.toLowerCase(),\n client_size = \"client\" + size,\n scroll_size = \"scroll\" + size,\n scroll_pos = \"scroll\" + pos,\n client_pos = \"client\" + axis;\n return (ct) => {\n let timer_bar,\n ptr_unbind,\n timer_resize,\n pre_st = -1;\n const m = ct.firstElementChild,\n si = mk(\"i\", SI),\n bar = mk(\"b\", BAR, si),\n getGeo = (sih = si[client_size]) => {\n const ch = ct[client_size],\n sh = m[scroll_size];\n return [sh - ch, max(1, ch - sih - 6), sih, ch, sh];\n },\n updateTop = (h) => {\n if (!bar.parentNode) return;\n const [ds, db] = getGeo(h),\n st = max(0, min(ct[scroll_pos], ds));\n if (pre_st !== -1 && pre_st !== st) {\n bar.style.opacity = 1;\n clearTimeout(timer_bar);\n timer_bar = setTimeout(() => (bar.style.opacity = 0), 1e3);\n }\n pre_st = st;\n si.style[style_pos] = 3 + round((db * st) / ds) + PX;\n },\n onDown = (e) => {\n if (ptr_unbind) return;\n const bd = D.body;\n bd.setPointerCapture(e.pointerId);\n bd.classList.add(DRAG);\n bar.part.add(DRAG);\n let pre = e[client_pos];\n const detach = () => {\n bd.classList.remove(DRAG);\n bar.part.remove(DRAG);\n un_ptr();\n ptr_unbind = null;\n },\n un_ptr = On(bd, {\n pointermove: (e) => {\n const [ds, db] = getGeo();\n ct[scroll_pos] += round((ds * (e[client_pos] - pre)) / db);\n pre = e[client_pos];\n },\n pointerup: detach,\n lostpointercapture: detach,\n });\n ptr_unbind = detach;\n },\n onClick = (e) => {\n const rect = bar.getBoundingClientRect(),\n top = rect[style_pos],\n [ds, db, sih] = getGeo();\n ct[scroll_pos] = round(ds * max(min((e[client_pos] - top - 3 - sih / 2) / db, 1), 0));\n onDown(e);\n },\n unbind = [\n On(bar, { pointerdown: onClick }),\n On(si, {\n pointerdown: (e) => {\n e.stopPropagation();\n onDown(e);\n },\n }),\n On(ct, { scroll: () => updateTop() }),\n ],\n ob = new ResizeObserver(() => {\n clearTimeout(timer_resize);\n timer_resize = setTimeout(() => {\n const [, , , ch, sh] = getGeo(),\n is_turn = ch < sh;\n if (is_turn) {\n if (bar.parentNode !== ct) ct.appendChild(bar);\n const h = max(16, round((ch * ch) / sh));\n si.style[style_size] = h + PX;\n updateTop(h);\n } else if (bar.parentNode) {\n bar.remove();\n }\n }, 200);\n }),\n destroy = () => {\n clearTimeout(timer_bar);\n clearTimeout(timer_resize);\n unbind.forEach((f) => f());\n if (ptr_unbind) ptr_unbind();\n ob.disconnect();\n if (bar.parentNode) bar.remove();\n };\n bar.style.opacity = 0;\n [ct, m].forEach((i) => ob.observe(i));\n return destroy;\n };\n };\n\n [\n [\"v\", \"Height\", \"Top\", \"Y\", \"flex-direction:column;width:100%;min-height:100%\"],\n [\"h\", \"Width\", \"Left\", \"X\", \"min-width:100%;width:max-content;height:100%\"],\n ].map(([prefix, size, pos, axis, css]) => {\n const initScroll = mkScroll(size, pos, axis);\n customElements.define(\n prefix + \"-scroll\",\n class extends HTMLElement {\n connectedCallback() {\n const content = mk(\"b\", \"\", mk(\"slot\")),\n wrapper = mk(\"b\", \"scroll\", content);\n content.style.cssText = \"display:flex;\" + css;\n this.attachShadow({ mode: \"open\" }).appendChild(wrapper);\n this._unbind = initScroll(wrapper);\n }\n disconnectedCallback() {\n this._unbind?.();\n }\n },\n );\n });\n})();\n"
6
+ ],
7
+ "mappings": "AAAA,aAAS,gBACT,YAAS,WAAG,kBAEX,IAAM,CACL,IAAQ,QAAO,MAAK,OAAQ,KAM1B,EAAK,CAAC,EAAK,KAAS,IAAS,CAC3B,IAAM,EAAI,EAAM,CAAG,EACnB,GAAI,EAAM,EAAE,aAPP,OAO0B,CAAI,EAEnC,OADA,EAAE,OAAO,GAAG,CAAI,EACT,GAET,EAAW,CAAC,EAAM,EAAK,IAAS,CAC9B,IAAM,EAAa,EAAK,YAAY,EAClC,EAAY,EAAI,YAAY,EAC5B,EAAc,SAAW,EACzB,EAAc,SAAW,EACzB,EAAa,SAAW,EACxB,EAAa,SAAW,EAC1B,MAAO,CAAC,IAAO,CACb,IAAI,EACF,EACA,EACA,EAAS,GACL,EAAI,EAAG,kBACX,EAAK,EAAG,IAtBT,IAsBgB,EACf,EAAM,EAAG,IAxBT,MAwBmB,CAAE,EACrB,EAAS,CAAC,EAAM,EAAG,KAAiB,CAClC,IAAM,EAAK,EAAG,GACZ,EAAK,EAAE,GACT,MAAO,CAAC,EAAK,EAAI,EAAI,EAAG,EAAK,EAAM,CAAC,EAAG,EAAK,EAAI,CAAE,GAEpD,EAAY,CAAC,IAAM,CACjB,GAAI,CAAC,EAAI,WAAY,OACrB,IAAO,EAAI,GAAM,EAAO,CAAC,EACvB,EAAK,EAAI,EAAG,EAAI,EAAG,GAAa,CAAE,CAAC,EACrC,GAAI,IAAW,IAAM,IAAW,EAC9B,EAAI,MAAM,QAAU,EACpB,aAAa,CAAS,EACtB,EAAY,WAAW,IAAO,EAAI,MAAM,QAAU,EAAI,IAAG,EAE3D,EAAS,EACT,EAAG,MAAM,GAAa,EAAI,EAAO,EAAK,EAAM,CAAE,EArCjD,MAuCC,EAAS,CAAC,IAAM,CACd,GAAI,EAAY,OAChB,IAAM,EAAK,EAAE,KACb,EAAG,kBAAkB,EAAE,SAAS,EAChC,EAAG,UAAU,IA5Cd,MA4CsB,EACrB,EAAI,KAAK,IA7CV,MA6CkB,EACjB,IAAI,EAAM,EAAE,GACN,EAAS,IAAM,CACjB,EAAG,UAAU,OAhDlB,MAgD6B,EACxB,EAAI,KAAK,OAjDd,MAiDyB,EACpB,EAAO,EACP,EAAa,MAEf,EAAS,EAAG,EAAI,CACd,YAAa,CAAC,IAAM,CAClB,IAAO,EAAI,GAAM,EAAO,EACxB,EAAG,IAAe,EAAO,GAAM,EAAE,GAAc,GAAQ,CAAE,EACzD,EAAM,EAAE,IAEV,UAAW,EACX,mBAAoB,CACtB,CAAC,EACH,EAAa,GAEf,EAAU,CAAC,IAAM,CACf,IAAM,EAAO,EAAI,sBAAsB,EACrC,EAAM,EAAK,IACV,EAAI,EAAI,GAAO,EAAO,EACzB,EAAG,GAAc,EAAM,EAAK,EAAI,GAAK,EAAE,GAAc,EAAM,EAAI,EAAM,GAAK,EAAI,CAAC,EAAG,CAAC,CAAC,EACpF,EAAO,CAAC,GAEV,EAAS,CACP,EAAG,EAAK,CAAE,YAAa,CAAQ,CAAC,EAChC,EAAG,EAAI,CACL,YAAa,CAAC,IAAM,CAClB,EAAE,gBAAgB,EAClB,EAAO,CAAC,EAEZ,CAAC,EACD,EAAG,EAAI,CAAE,OAAQ,IAAM,EAAU,CAAE,CAAC,CACtC,EACA,EAAK,IAAI,eAAe,IAAM,CAC5B,aAAa,CAAY,EACzB,EAAe,WAAW,IAAM,CAC9B,OAAa,EAAI,GAAM,EAAO,EAE9B,GADY,EAAK,EACJ,CACX,GAAI,EAAI,aAAe,EAAI,EAAG,YAAY,CAAG,EAC7C,IAAM,EAAI,EAAI,GAAI,EAAO,EAAK,EAAM,CAAE,CAAC,EACvC,EAAG,MAAM,GAAc,EAxF9B,KAyFO,EAAU,CAAC,EACN,QAAI,EAAI,WACb,EAAI,OAAO,GAEZ,GAAG,EACP,EACD,EAAU,IAAM,CAId,GAHA,aAAa,CAAS,EACtB,aAAa,CAAY,EACzB,EAAO,QAAQ,CAAC,IAAM,EAAE,CAAC,EACrB,EAAY,EAAW,EAE3B,GADA,EAAG,WAAW,EACV,EAAI,WAAY,EAAI,OAAO,GAInC,OAFA,EAAI,MAAM,QAAU,EACpB,CAAC,EAAI,CAAC,EAAE,QAAQ,CAAC,IAAM,EAAG,QAAQ,CAAC,CAAC,EAC7B,IAIb,CACE,CAAC,IAAK,SAAU,MAAO,IAAK,kDAAkD,EAC9E,CAAC,IAAK,QAAS,OAAQ,IAAK,8CAA8C,CAC5E,EAAE,IAAI,EAAE,EAAQ,EAAM,EAAK,EAAM,KAAS,CACxC,IAAM,EAAa,EAAS,EAAM,EAAK,CAAI,EAC3C,eAAe,OACb,EAAS,UACT,cAAc,WAAY,CACxB,iBAAiB,EAAG,CAClB,IAAM,EAAU,EAAG,IAAK,GAAI,EAAG,MAAM,CAAC,EACpC,EAAU,EAAG,IAAK,SAAU,CAAO,EACrC,EAAQ,MAAM,QAAU,gBAAkB,EAC1C,KAAK,aAAa,CAAE,KAAM,MAAO,CAAC,EAAE,YAAY,CAAO,EACvD,KAAK,QAAU,EAAW,CAAO,EAEnC,oBAAoB,EAAG,CACrB,KAAK,UAAU,EAEnB,CACF,EACD,IACA",
8
+ "debugId": "1DBAB42F8A67745664756E2164756E21",
9
+ "names": []
10
+ }
package/Wait._.css ADDED
@@ -0,0 +1 @@
1
+ .wait,.ing{position:relative}.wait:before,.ing:before{background:var(--waitSvg) 50% 50%/64px no-repeat;content:"";cursor:wait;z-index:999;animation-name:fadeIn;animation-duration:1s;position:absolute;inset:0}.ing:before{background-color:#fff9}.wait{align-self:center;width:64px;height:64px;display:flex}@-webkit-keyframes fadeIn{0%{opacity:0}to{opacity:1}}@-moz-keyframes fadeIn{0%{opacity:0}to{opacity:1}}@-o-keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}
package/Wait._.css.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"sourceRoot":null,"mappings":"AAAA,6BAIA,mLAcA,mCAGA,4DAMA","sources":["Users/z/git/webc-zh/lib/Wait._.css"],"sourcesContent":[".wait,\n.ing {\n position: relative;\n}\n.wait:before,\n.ing:before {\n animation-duration: 1s;\n animation-name: fadeIn;\n background: var(--waitSvg) 50% 50%/64px no-repeat;\n bottom: 0;\n content: '';\n cursor: wait;\n left: 0;\n position: absolute;\n right: 0;\n top: 0;\n z-index: 999;\n}\n.ing:before {\n background-color: rgba(255,255,255,0.6);\n}\n.wait {\n align-self: center;\n display: flex;\n height: 64px;\n width: 64px;\n}\n@-moz-keyframes fadeIn {\n from {\n opacity: 0;\n }\n to {\n opacity: 1;\n }\n}\n@-webkit-keyframes fadeIn {\n from {\n opacity: 0;\n }\n to {\n opacity: 1;\n }\n}\n@-o-keyframes fadeIn {\n from {\n opacity: 0;\n }\n to {\n opacity: 1;\n }\n}\n@keyframes fadeIn {\n from {\n opacity: 0;\n }\n to {\n opacity: 1;\n }\n}\n"],"names":[]}
package/Wait.css ADDED
@@ -0,0 +1 @@
1
+ :root{--waitSvg:url(./svg/-oloHJiPWtJPJs8g_0WIaA.svg)}.wait,.ing{position:relative}.wait:before,.ing:before{background:var(--waitSvg) 50% 50%/64px no-repeat;content:"";cursor:wait;z-index:999;animation-name:fadeIn;animation-duration:1s;position:absolute;inset:0}.ing:before{background-color:#fff9}.wait{align-self:center;width:64px;height:64px;display:flex}@-webkit-keyframes fadeIn{0%{opacity:0}to{opacity:1}}@-moz-keyframes fadeIn{0%{opacity:0}to{opacity:1}}@-o-keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}
package/Wait.css.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"sourceRoot":null,"mappings":"AAAA,sDAGA,6BAIA,mLAcA,mCAGA,4DAMA","sources":["Users/z/git/webc-zh/lib/Wait.css"],"sourcesContent":[":root {\n --waitSvg: url(\"./svg/-oloHJiPWtJPJs8g_0WIaA.svg\");\n}\n.wait,\n.ing {\n position: relative;\n}\n.wait:before,\n.ing:before {\n animation-duration: 1s;\n animation-name: fadeIn;\n background: var(--waitSvg) 50% 50%/64px no-repeat;\n bottom: 0;\n content: '';\n cursor: wait;\n left: 0;\n position: absolute;\n right: 0;\n top: 0;\n z-index: 999;\n}\n.ing:before {\n background-color: rgba(255,255,255,0.6);\n}\n.wait {\n align-self: center;\n display: flex;\n height: 64px;\n width: 64px;\n}\n@-moz-keyframes fadeIn {\n from {\n opacity: 0;\n }\n to {\n opacity: 1;\n }\n}\n@-webkit-keyframes fadeIn {\n from {\n opacity: 0;\n }\n to {\n opacity: 1;\n }\n}\n@-o-keyframes fadeIn {\n from {\n opacity: 0;\n }\n to {\n opacity: 1;\n }\n}\n@keyframes fadeIn {\n from {\n opacity: 0;\n }\n to {\n opacity: 1;\n }\n}\n"],"names":[]}
package/dom.js ADDED
@@ -0,0 +1,3 @@
1
+ var e=document,n=e.body,t=e.createElement.bind(e);export{t as newEl,e as D,n as B};
2
+
3
+ //# debugId=C12225273B2567DB64756E2164756E21
package/dom.js.map ADDED
@@ -0,0 +1,10 @@
1
+ {
2
+ "version": 3,
3
+ "sources": ["../../importmap/x/dom.js"],
4
+ "sourcesContent": [
5
+ "export const D = document,\n B = D.body,\n newEl = D.createElement.bind(D);\n"
6
+ ],
7
+ "mappings": "AAAO,IAAM,EAAI,SACf,EAAI,EAAE,KACN,EAAQ,EAAE,cAAc,KAAK,CAAC",
8
+ "debugId": "C12225273B2567DB64756E2164756E21",
9
+ "names": []
10
+ }
package/md/Scroll.js ADDED
@@ -0,0 +1,51 @@
1
+ export default [`自定义虚拟滚动条
2
+
3
+ ## 功能
4
+
5
+ - **双向滚动**：提供垂直（\`v-scroll\`）和水平（\`h-scroll\`）滚动容器
6
+ - **尺寸响应**：监听内容与容器尺寸变化，自动更新滚动条尺寸与位置，无溢出时自动隐藏
7
+ - **交互支持**：支持滚轮滚动、滑块拖拽与轨道点击定位
8
+ - **状态显隐**：悬停或滚动时显示并加宽滑块，静止时自动隐藏
9
+
10
+ ## 使用
11
+
12
+ 在 HTML/Pug 中直接使用自定义标签：
13
+
14
+ \`\`\`html
15
+ <!-- 垂直滚动 -->
16
+ <v-scroll>
17
+ <div>滚动内容</div>
18
+ </v-scroll>
19
+
20
+ <!-- 水平滚动 -->
21
+ <h-scroll>
22
+ <div>滚动内容</div>
23
+ </h-scroll>
24
+ \`\`\`
25
+
26
+ 在 JS 中引入组件：
27
+
28
+ \`\`\`javascript
29
+ import "com/Scroll/scroll.js";
30
+ \`\`\`
31
+
32
+ ## 演示代码
33
+
34
+ \`\`\`svelte
35
+ <script>
36
+ import "com/Scroll/scroll.js";
37
+ </script>
38
+
39
+ <template lang="pug">
40
+ v-scroll
41
+ b(style="height: 1000px;") 垂直滚动内容
42
+ </template>
43
+
44
+ <style lang="stylus">
45
+ v-scroll
46
+ width 300px
47
+ height 400px
48
+ border 1px solid #0000000f
49
+ </style>
50
+ \`\`\`
51
+ `,()=>import("../../com/Scroll/Demo.svelte"),[["--cursorGrabSvg","giUzPhnYmbjOG3VzqseH5g","cursor/grab.svg"],["--cursorScrollhSvg","yhI9x3s8u28j5vUN45useQ","cursor/scrollh.svg"],["--cursorScrollvSvg","sgoOOaKyF_KnkUoRKxWczw","cursor/scrollv.svg"]]];
package/md/Wait.js ADDED
@@ -0,0 +1,25 @@
1
+ export default [`加载动画与表单提交遮罩
2
+
3
+ ## 功能
4
+
5
+ - **独立加载**：元素添加 \`.wait\` 类显示加载图标
6
+ - **表单遮罩**：表单添加 \`.ing\` 类显示遮罩与加载图标，防止重复提交
7
+
8
+ ## 使用
9
+
10
+ \`\`\`svelte
11
+ <template lang="pug">
12
+ // 独立加载动画
13
+ b.wait
14
+
15
+ // 表单提交遮罩
16
+ form.ing
17
+ input(type="text")
18
+ button(type="submit") 提交
19
+ </template>
20
+
21
+ <style lang="stylus">
22
+ @import "com/Wait/Wait.styl"
23
+ </style>
24
+ \`\`\`
25
+ `,()=>import("../../com/Wait/Demo.svelte"),[["--waitSvg","-oloHJiPWtJPJs8g_0WIaA","svg/wait.svg"]]];
package/package.json ADDED
@@ -0,0 +1 @@
1
+ {"name":"webc.site","version":"0.1.0","description":"","keywords":[],"homepage":"https://webc-zh.github.io","license":"MulanPSL-2.0","author":"i18n.site@gmail.com","repository":{"type":"git","url":"git+https://github.com/webc-zh/webc-zh.github.io.git"},"files":["./*"],"type":"module","exports":{"./*":"./*"},"scripts":{},"devDependencies":{}}
package/svg/-oloHJiPWtJPJs8g_0WIaA.svg ADDED
@@ -0,0 +1 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" width="300" height="300" preserveAspectRatio="xMidYMid" style="shape-rendering:geometricPrecision" viewBox="0 0 100 100"><circle cx="50" cy="50" r="0" fill="none" stroke="#000" stroke-width="2"><animate attributeName="r" begin="0s" calcMode="spline" dur="1s" keySplines="0 0.2 0.8 1" keyTimes="0;1" repeatCount="indefinite" values="0;40"/><animate attributeName="opacity" begin="0s" calcMode="spline" dur="1s" keySplines="0.2 0 0.8 1" keyTimes="0;1" repeatCount="indefinite" values="1;0"/></circle><circle cx="50" cy="50" r="0" fill="none" stroke="#333" stroke-width="2"><animate attributeName="r" begin="-0.5s" calcMode="spline" dur="1s" keySplines="0 0.2 0.8 1" keyTimes="0;1" repeatCount="indefinite" values="0;40"/><animate attributeName="opacity" begin="-0.5s" calcMode="spline" dur="3s" keySplines="0.2 0 0.8 1" keyTimes="0;1" repeatCount="indefinite" values="1;0"/></circle></svg>
package/svg/giUzPhnYmbjOG3VzqseH5g.svg ADDED
@@ -0,0 +1 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" width="15" height="14" fill="none"><path fill="#ffffffb3" fill-rule="evenodd" d="M3.573 2.036c.48-.178 1.427-.069 1.677.473.213.462.396 1.241.406 1.075.024-.369-.024-1.167.137-1.584.117-.304.347-.59.686-.69a1.9 1.9 0 0 1 .916-.056c.313.064.642.287.765.5.362.622.368 1.898.385 1.83.064-.272.07-1.229.283-1.584.141-.235.497-.445.687-.479.294-.052.656-.068.964-.008.25.05.586.344.677.487.22.344.342 1.316.38 1.658.015.141.073-.393.292-.736.406-.639 1.844-.763 1.898.64.026.653.02.623.02 1.063 0 .516-.012.828-.04 1.202-.03.4-.116 1.304-.24 1.742-.087.301-.372.978-.654 1.384 0 0-1.074 1.25-1.19 1.812-.118.563-.079.567-.103.965-.023.4.121.923.121.923s-.8.104-1.234.034c-.39-.062-.875-.84-1-1.078-.172-.328-.539-.265-.682-.023-.224.383-.709 1.07-1.05 1.113-.669.084-2.055.03-3.14.02 0 0 .185-1.01-.227-1.358-.305-.26-.83-.784-1.144-1.06l-.832-.92c-.283-.36-1.002-.93-1.243-1.986C.875 6.46.896 6 1.125 5.625c.232-.38.67-.589.854-.625.208-.042.692-.039.875.062.223.123.313.16.488.391.23.307.312.456.213.121-.076-.262-.322-.595-.434-.97-.109-.36-.4-.943-.38-1.526.008-.22.103-.77.832-1.042" clip-rule="evenodd"/><path stroke="#0000008c" stroke-linejoin="round" stroke-width=".75" d="M3.573 2.036c.48-.178 1.427-.069 1.677.473.213.462.396 1.241.406 1.075.024-.369-.024-1.167.137-1.584.117-.304.347-.59.686-.69a1.9 1.9 0 0 1 .916-.056c.313.064.642.287.765.5.362.622.368 1.898.385 1.83.064-.272.07-1.229.283-1.584.141-.235.497-.445.687-.479.294-.052.656-.068.964-.008.25.05.586.344.677.487.22.344.342 1.316.38 1.658.015.141.073-.393.292-.736.406-.639 1.844-.763 1.898.64.026.653.02.623.02 1.063 0 .516-.012.828-.04 1.202-.03.4-.116 1.304-.24 1.742-.087.301-.372.978-.654 1.384 0 0-1.074 1.25-1.19 1.812-.118.563-.079.567-.103.965-.023.4.121.923.121.923s-.8.104-1.234.034c-.39-.062-.875-.84-1-1.078-.172-.328-.539-.265-.682-.023-.224.383-.709 1.07-1.05 1.113-.669.084-2.055.03-3.14.02 0 0 .185-1.01-.227-1.358-.305-.26-.83-.784-1.144-1.06l-.832-.92c-.283-.36-1.002-.93-1.243-1.986C.875 6.46.896 6 1.125 5.625c.232-.38.67-.589.854-.625.208-.042.692-.039.875.062.223.123.313.16.488.391.23.307.312.456.213.121-.076-.262-.322-.595-.434-.97-.109-.36-.4-.943-.38-1.526.008-.22.103-.77.832-1.042Z" clip-rule="evenodd"/><path stroke="#0000008c" stroke-linecap="round" stroke-width=".75" d="M10.566 9.734V6.275M8.55 9.746l-.015-3.473m-1.98.032.02 3.426"/></svg>
package/svg/sgoOOaKyF_KnkUoRKxWczw.svg ADDED
@@ -0,0 +1 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24"><path fill="#fff" stroke="#000" stroke-linejoin="round" stroke-width="2" d="M12 2 6 8h4v8H6l6 6 6-6h-4V8h4z"/></svg>
package/svg/yhI9x3s8u28j5vUN45useQ.svg ADDED
@@ -0,0 +1 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24"><path fill="#fff" stroke="#000" stroke-linejoin="round" stroke-width="2" d="m22 12-6-6v4H8V6l-6 6 6 6v-4h8v4z"/></svg>
package/x.js ADDED
@@ -0,0 +1 @@
1
+ const e=(e,t)=>{let n,r;for(n in t)r=t[n],e.addEventListener(n,r);return()=>{for(n in t)r=t[n],e.removeEventListener(n,r)}},t=document,n=t.body,r=t.createElement.bind(t);export{n as B,t as D,e as On,r as newEl};
package/x.js.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"x.js","names":[],"sources":["../../importmap/x/On.js","../../importmap/x/dom.js"],"sourcesContent":["export const On = (elem, dict) => {\n let event, func;\n for (event in dict) {\n func = dict[event];\n elem.addEventListener(event, func);\n }\n return () => {\n for (event in dict) {\n func = dict[event];\n elem.removeEventListener(event, func);\n }\n };\n};\n","export const D = document,\n B = D.body,\n newEl = D.createElement.bind(D);\n"],"mappings":"AAAA,MAAa,GAAM,EAAM,IAAS,CAChC,IAAI,EAAO,EACX,IAAK,KAAS,EACZ,EAAO,EAAK,GACZ,EAAK,iBAAiB,EAAO,CAAI,EAEnC,UAAa,CACX,IAAK,KAAS,EACZ,EAAO,EAAK,GACZ,EAAK,oBAAoB,EAAO,CAAI,CAExC,CACF,ECZa,EAAI,SACf,EAAI,EAAE,KACN,EAAQ,EAAE,cAAc,KAAK,CAAC"}