@qingwu-ui/scroll-fab 0.9.0-beta.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.cjs +420 -0
- package/dist/index.d.cts +111 -0
- package/dist/index.d.cts.map +1 -0
- package/dist/index.d.mts +111 -0
- package/dist/index.d.mts.map +1 -0
- package/dist/index.mjs +421 -0
- package/dist/index.mjs.map +1 -0
- package/dist/style.css +127 -0
- package/package.json +70 -0
package/dist/style.css
ADDED
|
@@ -0,0 +1,127 @@
|
|
|
1
|
+
/* ============================================================
|
|
2
|
+
青梧UI · ScrollFab 悬浮滚动栏样式
|
|
3
|
+
============================================================ */
|
|
4
|
+
|
|
5
|
+
.qsf-root {
|
|
6
|
+
--qsf-teal: var(--teal, #1e605a);
|
|
7
|
+
--qsf-amber: var(--amber, #b3721f);
|
|
8
|
+
--qsf-card: var(--card, #ffffff);
|
|
9
|
+
--qsf-line: var(--line, #dcdfd6);
|
|
10
|
+
--qsf-size: 48px;
|
|
11
|
+
--qsf-stroke: 3;
|
|
12
|
+
--qsf-z: 9999;
|
|
13
|
+
|
|
14
|
+
position: fixed;
|
|
15
|
+
top: var(--qsf-top, auto);
|
|
16
|
+
right: var(--qsf-right, 24px);
|
|
17
|
+
bottom: var(--qsf-bottom, calc(24px + env(safe-area-inset-bottom, 0px)));
|
|
18
|
+
left: var(--qsf-left, auto);
|
|
19
|
+
z-index: var(--qsf-z);
|
|
20
|
+
display: grid;
|
|
21
|
+
place-items: center;
|
|
22
|
+
width: var(--qsf-size);
|
|
23
|
+
height: var(--qsf-size);
|
|
24
|
+
margin: 0;
|
|
25
|
+
padding: 0;
|
|
26
|
+
border: 1px solid var(--qsf-line);
|
|
27
|
+
border-radius: 50%;
|
|
28
|
+
background: var(--qsf-card);
|
|
29
|
+
color: var(--qsf-teal);
|
|
30
|
+
box-shadow: 0 10px 28px -16px rgba(20, 31, 30, 0.45);
|
|
31
|
+
cursor: pointer;
|
|
32
|
+
/* 允许从按钮上直接滑动滚页：位移超阈值由 JS 放弃描边，不锁手势 */
|
|
33
|
+
touch-action: manipulation;
|
|
34
|
+
user-select: none;
|
|
35
|
+
-webkit-user-select: none;
|
|
36
|
+
-webkit-touch-callout: none;
|
|
37
|
+
transition:
|
|
38
|
+
transform 0.18s ease,
|
|
39
|
+
box-shadow 0.18s ease,
|
|
40
|
+
border-color 0.18s ease,
|
|
41
|
+
color 0.18s ease;
|
|
42
|
+
}
|
|
43
|
+
.qsf-root[hidden] {
|
|
44
|
+
display: none;
|
|
45
|
+
}
|
|
46
|
+
/* hover 反馈仅限真悬停设备，触屏不粘住 */
|
|
47
|
+
@media (hover: hover) {
|
|
48
|
+
.qsf-root:hover {
|
|
49
|
+
transform: translateY(-2px);
|
|
50
|
+
box-shadow: 0 16px 32px -16px rgba(20, 31, 30, 0.55);
|
|
51
|
+
}
|
|
52
|
+
}
|
|
53
|
+
.qsf-root:active {
|
|
54
|
+
transform: scale(0.96);
|
|
55
|
+
}
|
|
56
|
+
.qsf-root:focus-visible {
|
|
57
|
+
outline: 2px solid var(--qsf-teal);
|
|
58
|
+
outline-offset: 2px;
|
|
59
|
+
}
|
|
60
|
+
.qsf-root[data-mode="to-top"] {
|
|
61
|
+
color: var(--qsf-amber);
|
|
62
|
+
border-color: var(--qsf-amber);
|
|
63
|
+
}
|
|
64
|
+
|
|
65
|
+
.qsf-svg {
|
|
66
|
+
position: absolute;
|
|
67
|
+
inset: 0;
|
|
68
|
+
width: 100%;
|
|
69
|
+
height: 100%;
|
|
70
|
+
/* 12 点钟为描边起点 */
|
|
71
|
+
transform: rotate(-90deg);
|
|
72
|
+
pointer-events: none;
|
|
73
|
+
}
|
|
74
|
+
.qsf-track {
|
|
75
|
+
fill: none;
|
|
76
|
+
stroke: var(--qsf-line);
|
|
77
|
+
stroke-width: var(--qsf-stroke);
|
|
78
|
+
opacity: 0.5;
|
|
79
|
+
}
|
|
80
|
+
.qsf-bar {
|
|
81
|
+
fill: none;
|
|
82
|
+
stroke: currentColor;
|
|
83
|
+
stroke-width: var(--qsf-stroke);
|
|
84
|
+
stroke-linecap: round;
|
|
85
|
+
}
|
|
86
|
+
.qsf-track[hidden],
|
|
87
|
+
.qsf-bar[hidden] {
|
|
88
|
+
display: none;
|
|
89
|
+
}
|
|
90
|
+
|
|
91
|
+
.qsf-icon {
|
|
92
|
+
display: grid;
|
|
93
|
+
place-items: center;
|
|
94
|
+
width: 46%;
|
|
95
|
+
height: 46%;
|
|
96
|
+
}
|
|
97
|
+
.qsf-icon svg {
|
|
98
|
+
display: block;
|
|
99
|
+
width: 100%;
|
|
100
|
+
height: 100%;
|
|
101
|
+
transition: transform 0.2s ease;
|
|
102
|
+
}
|
|
103
|
+
.qsf-root[data-mode="to-top"] .qsf-icon svg {
|
|
104
|
+
transform: rotate(180deg);
|
|
105
|
+
}
|
|
106
|
+
|
|
107
|
+
.qsf-root.is-complete {
|
|
108
|
+
animation: qsf-pop 0.28s ease;
|
|
109
|
+
}
|
|
110
|
+
.qsf-root.is-complete .qsf-bar {
|
|
111
|
+
filter: drop-shadow(0 0 6px currentColor);
|
|
112
|
+
}
|
|
113
|
+
@keyframes qsf-pop {
|
|
114
|
+
40% {
|
|
115
|
+
transform: scale(1.08);
|
|
116
|
+
}
|
|
117
|
+
}
|
|
118
|
+
|
|
119
|
+
@media (prefers-reduced-motion: reduce) {
|
|
120
|
+
.qsf-root,
|
|
121
|
+
.qsf-icon svg {
|
|
122
|
+
transition: none;
|
|
123
|
+
}
|
|
124
|
+
.qsf-root.is-complete {
|
|
125
|
+
animation: none;
|
|
126
|
+
}
|
|
127
|
+
}
|
package/package.json
ADDED
|
@@ -0,0 +1,70 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "@qingwu-ui/scroll-fab",
|
|
3
|
+
"version": "0.9.0-beta.1",
|
|
4
|
+
"description": "Framework-agnostic floating scroll fab for Qingwu UI - hold-to-progress ring flips between scroll-to-bottom and back-to-top, rAF eased scrolling with user interrupt, touch first-class",
|
|
5
|
+
"type": "module",
|
|
6
|
+
"license": "Apache-2.0",
|
|
7
|
+
"sideEffects": [
|
|
8
|
+
"./dist/style.css"
|
|
9
|
+
],
|
|
10
|
+
"exports": {
|
|
11
|
+
".": {
|
|
12
|
+
"types": "./dist/index.d.mts",
|
|
13
|
+
"import": "./dist/index.mjs",
|
|
14
|
+
"require": "./dist/index.cjs"
|
|
15
|
+
},
|
|
16
|
+
"./style.css": "./dist/style.css",
|
|
17
|
+
"./package.json": "./package.json"
|
|
18
|
+
},
|
|
19
|
+
"main": "./dist/index.cjs",
|
|
20
|
+
"module": "./dist/index.mjs",
|
|
21
|
+
"types": "./dist/index.d.mts",
|
|
22
|
+
"files": [
|
|
23
|
+
"dist"
|
|
24
|
+
],
|
|
25
|
+
"scripts": {
|
|
26
|
+
"build": "tsdown && node -e \"require('fs').cpSync('src/style.css','dist/style.css')\"",
|
|
27
|
+
"typecheck": "tsc --noEmit",
|
|
28
|
+
"test": "vitest run",
|
|
29
|
+
"test:watch": "vitest",
|
|
30
|
+
"size": "size-limit"
|
|
31
|
+
},
|
|
32
|
+
"devDependencies": {
|
|
33
|
+
"@qingwu-ui/tsconfig": "workspace:*",
|
|
34
|
+
"@size-limit/preset-small-lib": "^13.0.1",
|
|
35
|
+
"happy-dom": "^20.11.1",
|
|
36
|
+
"size-limit": "^13.0.1",
|
|
37
|
+
"tsdown": "^0.22.14",
|
|
38
|
+
"typescript": "^7.0.2",
|
|
39
|
+
"vitest": "^4.1.10"
|
|
40
|
+
},
|
|
41
|
+
"size-limit": [
|
|
42
|
+
{
|
|
43
|
+
"path": "dist/index.mjs",
|
|
44
|
+
"limit": "8 kB"
|
|
45
|
+
}
|
|
46
|
+
],
|
|
47
|
+
"publishConfig": {
|
|
48
|
+
"access": "public"
|
|
49
|
+
},
|
|
50
|
+
"repository": {
|
|
51
|
+
"type": "git",
|
|
52
|
+
"url": "https://github.com/apricotdream/qingwu-ui.git",
|
|
53
|
+
"directory": "packages/scroll-fab"
|
|
54
|
+
},
|
|
55
|
+
"homepage": "https://github.com/apricotdream/qingwu-ui#readme",
|
|
56
|
+
"bugs": "https://github.com/apricotdream/qingwu-ui/issues",
|
|
57
|
+
"keywords": [
|
|
58
|
+
"scroll",
|
|
59
|
+
"fab",
|
|
60
|
+
"back-to-top",
|
|
61
|
+
"scroll-to-bottom",
|
|
62
|
+
"progress-ring",
|
|
63
|
+
"floating",
|
|
64
|
+
"qingwu"
|
|
65
|
+
],
|
|
66
|
+
"author": "Qingwu Team",
|
|
67
|
+
"engines": {
|
|
68
|
+
"node": ">=20"
|
|
69
|
+
}
|
|
70
|
+
}
|