webc.site 0.1.23 → 0.1.24
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 +59 -1
- package/Scroll.css +2 -1
- package/Wait.css +2 -1
- package/package.json +1 -1
- package/reset.css +1 -0
- package/Scroll._.css +0 -1
- package/Scroll._.css.map +0 -1
- package/Scroll.css.map +0 -1
- package/Scroll.js.map +0 -1
- package/Wait._.css +0 -1
- package/Wait._.css.map +0 -1
- package/Wait.css.map +0 -1
- package/svg/-oloHJiPWtJPJs8g_0WIaA.svg +0 -1
- package/svg/giUzPhnYmbjOG3VzqseH5g.svg +0 -1
- package/svg/sgoOOaKyF_KnkUoRKxWczw.svg +0 -1
- package/svg/yhI9x3s8u28j5vUN45useQ.svg +0 -1
package/README.md
CHANGED
|
@@ -12,7 +12,65 @@
|
|
|
12
12
|
|
|
13
13
|
点击组件右上角的『在线调试』可以调试无打包的组件。
|
|
14
14
|
|
|
15
|
-
|
|
15
|
+
## 使用
|
|
16
|
+
|
|
17
|
+
### 1. CDN 直接引用 (无需打包)
|
|
18
|
+
|
|
19
|
+
对于无需打包、直接在浏览器中引用的使用场景，你可以通过 CDN 直接引用 JS 与 CSS 文件。
|
|
20
|
+
|
|
21
|
+
以 `Scroll` 组件（虚拟滚动条）为例：
|
|
22
|
+
|
|
23
|
+
#### 使用 jsdelivr:
|
|
24
|
+
|
|
25
|
+
```html
|
|
26
|
+
<link href="//cdn.jsdelivr.net/npm/webc.site@0.1.23/Scroll.css" rel="stylesheet" />
|
|
27
|
+
<script type="module">
|
|
28
|
+
import "//cdn.jsdelivr.net/npm/webc.site@0.1.23/Scroll.js";
|
|
29
|
+
</script>
|
|
30
|
+
```
|
|
31
|
+
|
|
32
|
+
#### 使用 淘宝镜像 npmmirror（对中国大陆线路友好）:
|
|
33
|
+
|
|
34
|
+
```html
|
|
35
|
+
<link href="//registry.npmmirror.com/webc.site/0.1.23/files/Scroll.css" rel="stylesheet" />
|
|
36
|
+
<script type="module">
|
|
37
|
+
import "//registry.npmmirror.com/webc.site/0.1.23/files/Scroll.js";
|
|
38
|
+
</script>
|
|
39
|
+
```
|
|
40
|
+
|
|
41
|
+
---
|
|
42
|
+
|
|
43
|
+
### 2. 按需添加至本地项目 (用于构建打包)
|
|
44
|
+
|
|
45
|
+
项目支持类似于 [shadcn](https://ui.shadcn.com) 的按需添加组件机制。如果你使用构建工具，可在你的项目中直接运行以下命令将组件下载并添加至本地：
|
|
46
|
+
|
|
47
|
+
```bash
|
|
48
|
+
bunx webc.add <组件名>
|
|
49
|
+
```
|
|
50
|
+
|
|
51
|
+
例如添加 `Scroll` 组件（虚拟滚动条）：
|
|
52
|
+
|
|
53
|
+
```bash
|
|
54
|
+
bunx webc.add Scroll
|
|
55
|
+
```
|
|
56
|
+
|
|
57
|
+
**命令行实现机制：**
|
|
58
|
+
|
|
59
|
+
- 运行该命令时，它会向 npm 注册表查询并解析 `webc.com` 对应的包源。
|
|
60
|
+
- 自动下载包源文件并提取对应的组件源码，将其按需编译并输出到本地项目中对应的 `lib/组件名` 目录下，且会把组件相关的 Stylus 自动编译成 CSS 放入公共样式中。
|
|
61
|
+
|
|
62
|
+
---
|
|
63
|
+
|
|
64
|
+
### 3. 配合 `vite-plugin-svg-var` 优化 SVG 资源
|
|
65
|
+
|
|
66
|
+
为了优化打包体积并大幅减少网络请求，建议在 Vite 构建器中配合使用 [vite-plugin-svg-var](https://www.npmjs.com/package/vite-plugin-svg-var) 插件。
|
|
67
|
+
|
|
68
|
+
#### 插件的用途与核心特性：
|
|
69
|
+
|
|
70
|
+
- **智能去重**：自动对 `public/svg` 下的所有 SVG 内容进行 MD5 哈希计算。即使不同路径或文件名对应同一个 SVG 内容，也只会在 CSS 中生成单一变量，所有引用都将映射到该变量，避免冗余打包。
|
|
71
|
+
- **UTF-8 安全编码**：将 SVG 直接转换为更轻量、体积更小的 UTF-8 编码 `data:image/svg+xml` URL 写入 CSS 变量，比传统的 Base64 编码方式体积更小、压缩率更高。
|
|
72
|
+
- **自动注入与替换**：在构建或运行开发服务器时，它会自动在项目入口 JS（如匹配 `/page/entry/**/*.js`）中注入虚拟的 CSS 变量样式，并将 CSS/Stylus/Svelte 中原本引用的 `url("/svg/xxx.svg")` 自动替换为 CSS 变量形式（如 `var(--xxxSvg)`）。这意味着所有 SVG 将被直接内联合并在 CSS 中，页面加载时无需发起任何多余的 SVG 图片 HTTP 请求。
|
|
73
|
+
- **开发阶段热更新 (HMR)**：自动监听 `public/svg` 文件夹，当新增、删除或修改 SVG 文件时，插件会自动重新扫描并生成 CSS 变量，且触发模块热重载，方便高效调试。
|
|
16
74
|
|
|
17
75
|
## 初衷
|
|
18
76
|
|
package/Scroll.css
CHANGED
|
@@ -1 +1,2 @@
|
|
|
1
|
-
:root{--cursorGrabSvg:url(
|
|
1
|
+
:root{--cursorGrabSvg:url(/com/Scroll/cursor/grab.svg) 8 7, grabbing;--cursorScrollhSvg:url(/com/Scroll/cursor/scrollh.svg) 10 10, ew-resize;--cursorScrollvSvg:url(/com/Scroll/cursor/scrollv.svg) 10 10, ns-resize}
|
|
2
|
+
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/Wait.css
CHANGED
|
@@ -1 +1,2 @@
|
|
|
1
|
-
:root{--waitSvg:url(
|
|
1
|
+
:root{--waitSvg:url(/com/Wait/svg/wait.svg)}
|
|
2
|
+
.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/package.json
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"name":"webc.site","version":"0.1.
|
|
1
|
+
{"name":"webc.site","version":"0.1.24","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"},"bin":{"webc-i":"./cli.js"},"files":["./*"],"type":"module","exports":{"./*":"./*"},"scripts":{},"dependencies":{"@3-/read":"^0.1.4","ansis":"^4.3.0","stylus":"^0.64.0","tar":"^7.5.15","yargs":"^18.0.0"},"devDependencies":{}}
|
package/reset.css
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
*,:before,:after{border-color:var(--un-default-border-color,#e5e7eb) ;box-sizing:border-box;border-style:solid;border-width:0}html,:host{font-feature-settings:normal ;font-variation-settings:normal ;-moz-tab-size:4;tab-size:4;-webkit-tap-highlight-color:transparent ;-webkit-text-size-adjust:100%;font-family:ui-sans-serif,system-ui,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;line-height:1.5}body{line-height:inherit ;margin:0}hr{color:inherit ;border-top-width:1px;height:0}abbr:where([title]){text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-feature-settings:normal ;font-variation-settings:normal ;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-size:1em}small{font-size:80%}sub,sup{vertical-align:baseline;font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}table{border-collapse:collapse ;border-color:inherit ;text-indent:0}button,input,optgroup,select,textarea{color:inherit ;font-feature-settings:inherit ;font-variation-settings:inherit ;font-family:inherit;font-size:100%;font-weight:inherit ;line-height:inherit ;margin:0;padding:0}button,select{text-transform:none}button,[type=button],[type=reset],[type=submit]{-webkit-appearance:button;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{outline-offset:-2px ;-webkit-appearance:textfield}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{font:inherit ;-webkit-appearance:button}summary{display:list-item}blockquote,dl,dd,h1,h2,h3,h4,h5,h6,hr,figure,p,pre{margin:0}fieldset{margin:0;padding:0}legend{padding:0}ol,ul,menu{margin:0;padding:0;list-style:none}dialog{padding:0}textarea{resize:vertical}input::placeholder,textarea::placeholder{color:#9ca3af;opacity:1}button,[role=button]{cursor:pointer}:disabled{cursor:default}img,svg,video,canvas,audio,iframe,embed,object{vertical-align:middle;display:block}img,video{max-width:100%;height:auto}[hidden]:where(:not([hidden=until-found])){display:none}
|
package/Scroll._.css
DELETED
|
@@ -1 +0,0 @@
|
|
|
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
DELETED
|
@@ -1 +0,0 @@
|
|
|
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.map
DELETED
|
@@ -1 +0,0 @@
|
|
|
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.map
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"Scroll.js","names":[],"sources":["../com/Scroll/Scroll.js"],"sourcesContent":["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.bind(null, undefined) }),\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"],"mappings":"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"}
|
package/Wait._.css
DELETED
|
@@ -1 +0,0 @@
|
|
|
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
DELETED
|
@@ -1 +0,0 @@
|
|
|
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.map
DELETED
|
@@ -1 +0,0 @@
|
|
|
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":[]}
|
|
@@ -1 +0,0 @@
|
|
|
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>
|
|
@@ -1 +0,0 @@
|
|
|
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>
|
|
@@ -1 +0,0 @@
|
|
|
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>
|
|
@@ -1 +0,0 @@
|
|
|
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>
|