webc.site 0.1.1 → 0.1.16

package/Scroll.js

@@ -1,3 +1,3 @@
-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?.()}})})})();
+import { On as A, D as I, newEl as H } from "./x.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?.()}})})})();
 
 

package/package.json

@@ -1 +1 @@
-{"name":"webc.site","version":"0.1.1","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":{}}
+{"name":"webc.site","version":"0.1.16","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/INDEX.js

@@ -1 +0,0 @@
-export default [["Wait","加载动画与表单提交遮罩",()=>import("./md/Wait.js")],["Scroll","自定义虚拟滚动条",()=>import("./md/Scroll.js")]];

package/On.js

@@ -1,3 +0,0 @@
-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};
-
-//# debugId=3DD78A4F28E4B48664756E2164756E21

package/On.js.map

@@ -1,10 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../importmap/x/On.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"
-  ],
-  "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",
-  "debugId": "3DD78A4F28E4B48664756E2164756E21",
-  "names": []
-}

package/dom.js

@@ -1,3 +0,0 @@
-var e=document,n=e.body,t=e.createElement.bind(e);export{t as newEl,e as D,n as B};
-
-//# debugId=C12225273B2567DB64756E2164756E21

package/dom.js.map

@@ -1,10 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../importmap/x/dom.js"],
-  "sourcesContent": [
-    "export const D = document,\n  B = D.body,\n  newEl = D.createElement.bind(D);\n"
-  ],
-  "mappings": "AAAO,IAAM,EAAI,SACf,EAAI,EAAE,KACN,EAAQ,EAAE,cAAc,KAAK,CAAC",
-  "debugId": "C12225273B2567DB64756E2164756E21",
-  "names": []
-}

package/md/Scroll.js

@@ -1,51 +0,0 @@
-export default [`自定义虚拟滚动条
-
-## 功能
-
-- **双向滚动**：提供垂直（\`v-scroll\`）和水平（\`h-scroll\`）滚动容器
-- **尺寸响应**：监听内容与容器尺寸变化，自动更新滚动条尺寸与位置，无溢出时自动隐藏
-- **交互支持**：支持滚轮滚动、滑块拖拽与轨道点击定位
-- **状态显隐**：悬停或滚动时显示并加宽滑块，静止时自动隐藏
-
-## 使用
-
-在 HTML/Pug 中直接使用自定义标签：
-
-\`\`\`html
-<!-- 垂直滚动 -->
-<v-scroll>
-  <div>滚动内容</div>
-</v-scroll>
-
-<!-- 水平滚动 -->
-<h-scroll>
-  <div>滚动内容</div>
-</h-scroll>
-\`\`\`
-
-在 JS 中引入组件：
-
-\`\`\`javascript
-import "com/Scroll/scroll.js";
-\`\`\`
-
-## 演示代码
-
-\`\`\`svelte
-<script>
-import "com/Scroll/scroll.js";
-</script>
-
-<template lang="pug">
-v-scroll
-  b(style="height: 1000px;") 垂直滚动内容
-</template>
-
-<style lang="stylus">
-v-scroll
-  width 300px
-  height 400px
-  border 1px solid #0000000f
-</style>
-\`\`\`
-`,()=>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

@@ -1,25 +0,0 @@
-export default [`加载动画与表单提交遮罩
-
-## 功能
-
-- **独立加载**：元素添加 \`.wait\` 类显示加载图标
-- **表单遮罩**：表单添加 \`.ing\` 类显示遮罩与加载图标，防止重复提交
-
-## 使用
-
-\`\`\`svelte
-<template lang="pug">
-// 独立加载动画
-b.wait
-
-// 表单提交遮罩
-form.ing
-  input(type="text")
-  button(type="submit") 提交
-</template>
-
-<style lang="stylus">
-@import "com/Wait/Wait.styl"
-</style>
-\`\`\`
-`,()=>import("../../com/Wait/Demo.svelte"),[["--waitSvg","-oloHJiPWtJPJs8g_0WIaA","svg/wait.svg"]]];