@e280/shiny 0.1.0-18 → 0.1.0-19
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 +1 -1
- package/package.json +2 -2
- package/s/theme/parts/vars.ts +1 -1
- package/s/views/copy/style.css.ts +8 -3
- package/s/views/copy/view.ts +15 -13
- package/x/demo/main.bundle.min.js +13 -6
- package/x/demo/main.bundle.min.js.map +2 -2
- package/x/index.html +3 -3
- package/x/theme/parts/vars.js +1 -1
- package/x/views/copy/style.css.js +8 -3
- package/x/views/copy/style.css.js.map +1 -1
- package/x/views/copy/view.js +4 -2
- package/x/views/copy/view.js.map +1 -1
package/README.md
CHANGED
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@e280/shiny",
|
|
3
|
-
"version": "0.1.0-
|
|
3
|
+
"version": "0.1.0-19",
|
|
4
4
|
"description": "✨ web ui library",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"type": "module",
|
|
@@ -29,7 +29,7 @@
|
|
|
29
29
|
"prismjs": "^1.30.0"
|
|
30
30
|
},
|
|
31
31
|
"devDependencies": {
|
|
32
|
-
"@e280/hottie": "^0.1.0-
|
|
32
|
+
"@e280/hottie": "^0.1.0-4",
|
|
33
33
|
"@e280/octo": "^0.1.0-12",
|
|
34
34
|
"@e280/science": "^0.1.8",
|
|
35
35
|
"@e280/scute": "^0.3.0-1",
|
package/s/theme/parts/vars.ts
CHANGED
|
@@ -10,15 +10,20 @@ button {
|
|
|
10
10
|
|
|
11
11
|
button {
|
|
12
12
|
opacity: var(--inactive-opacity);
|
|
13
|
-
|
|
14
|
-
|
|
13
|
+
display: flex;
|
|
14
|
+
align-items: center;
|
|
15
15
|
|
|
16
|
+
cursor: copy;
|
|
16
17
|
color: inherit;
|
|
17
|
-
transition: all
|
|
18
|
+
transition: all var(--anim-duration) linear;
|
|
18
19
|
|
|
19
20
|
&:is(:hover, :focus-visible) {
|
|
20
21
|
opacity: 1;
|
|
21
22
|
}
|
|
23
|
+
|
|
24
|
+
> span {
|
|
25
|
+
display: flex;
|
|
26
|
+
}
|
|
22
27
|
}
|
|
23
28
|
|
|
24
29
|
[data-status="invalid"] {
|
package/s/views/copy/view.ts
CHANGED
|
@@ -34,23 +34,25 @@ export const ShinyCopy = shadow((
|
|
|
34
34
|
}
|
|
35
35
|
|
|
36
36
|
return html`
|
|
37
|
-
<button data-status="${copier.status}" @click="${click}">
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
37
|
+
<button data-status="${copier.status}" @click="${click}" part=button>
|
|
38
|
+
<span part=icon>
|
|
39
|
+
${(() => {switch (copier.status) {
|
|
40
|
+
case "neutral":
|
|
41
|
+
return clipboardSvg
|
|
41
42
|
|
|
42
|
-
|
|
43
|
-
|
|
43
|
+
case "invalid":
|
|
44
|
+
return clipboardSvg
|
|
44
45
|
|
|
45
|
-
|
|
46
|
-
|
|
46
|
+
case "good":
|
|
47
|
+
return clipboardCheckFilledSvg
|
|
47
48
|
|
|
48
|
-
|
|
49
|
-
|
|
49
|
+
case "bad":
|
|
50
|
+
return clipboardXFilledSvg
|
|
50
51
|
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
52
|
+
default:
|
|
53
|
+
throw new Error(`unknown copy status`)
|
|
54
|
+
}})()}
|
|
55
|
+
</span>
|
|
54
56
|
<slot></slot>
|
|
55
57
|
</button>
|
|
56
58
|
`
|
|
@@ -37,15 +37,20 @@ button {
|
|
|
37
37
|
|
|
38
38
|
button {
|
|
39
39
|
opacity: var(--inactive-opacity);
|
|
40
|
-
|
|
41
|
-
|
|
40
|
+
display: flex;
|
|
41
|
+
align-items: center;
|
|
42
42
|
|
|
43
|
+
cursor: copy;
|
|
43
44
|
color: inherit;
|
|
44
|
-
transition: all
|
|
45
|
+
transition: all var(--anim-duration) linear;
|
|
45
46
|
|
|
46
47
|
&:is(:hover, :focus-visible) {
|
|
47
48
|
opacity: 1;
|
|
48
49
|
}
|
|
50
|
+
|
|
51
|
+
> span {
|
|
52
|
+
display: flex;
|
|
53
|
+
}
|
|
49
54
|
}
|
|
50
55
|
|
|
51
56
|
[data-status="invalid"] {
|
|
@@ -102,7 +107,7 @@ a {
|
|
|
102
107
|
}`;var rs=lt`@layer vars {
|
|
103
108
|
|
|
104
109
|
:is(:root, :host) {
|
|
105
|
-
${ho({bg:"#111",alpha:"#def",rounded:"0.5em",padding:"0.5em",prime:"#d068ff",code:"#3f1",link:"cyan",selection:"white","selection-bg":"#f70",lame:"#8888",angry:"#f50",zesty:"#cf0",happy:"#0fa",calm:"#0af",sad:"#74f",quirky:"#f49","inactive-opacity":"0.5","anim-duration":"
|
|
110
|
+
${ho({bg:"#111",alpha:"#def",rounded:"0.5em",padding:"0.5em",prime:"#d068ff",code:"#3f1",link:"cyan",selection:"white","selection-bg":"#f70",lame:"#8888",angry:"#f50",zesty:"#cf0",happy:"#0fa",calm:"#0af",sad:"#74f",quirky:"#f49","inactive-opacity":"0.5","anim-duration":"150ms"})}
|
|
106
111
|
}
|
|
107
112
|
|
|
108
113
|
}`;function po([r,t]){return`--${r}: var(--shiny-${r}, ${t});`}function ho(r){return Object.entries(r).map(po).join(`
|
|
@@ -131,8 +136,10 @@ ${ss}
|
|
|
131
136
|
${es}
|
|
132
137
|
|
|
133
138
|
`;var N=new CSSStyleSheet;N.replaceSync(os);var te=j((r,t={})=>{D("shiny-copy"),I(N,Kr);let e=ts(r,t.ms??1e3);async function s(){if(r!==void 0)try{if(t.fail)throw new Error("copy failed on purpose for testing purposes");await navigator.clipboard.writeText(r),await e.flash("good")}catch(o){console.error(o),await e.flash("bad")}}return C`
|
|
134
|
-
<button data-status="${e.status}" @click="${s}">
|
|
135
|
-
|
|
139
|
+
<button data-status="${e.status}" @click="${s}" part=button>
|
|
140
|
+
<span part=icon>
|
|
141
|
+
${(()=>{switch(e.status){case"neutral":return pr;case"invalid":return pr;case"good":return Qr;case"bad":return Yr;default:throw new Error("unknown copy status")}})()}
|
|
142
|
+
</span>
|
|
136
143
|
<slot></slot>
|
|
137
144
|
</button>
|
|
138
145
|
`});var G=r=>r;var ns=S`@layer view {
|