@e280/shiny 0.1.0-17 → 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.
Files changed (25) hide show
  1. package/README.md +1 -1
  2. package/package.json +2 -2
  3. package/s/demo/views/codebox/style.css.ts +3 -1
  4. package/s/demo/views/showcase/style.css.ts +2 -6
  5. package/s/theme/parts/vars.ts +1 -1
  6. package/s/views/button/view.ts +3 -1
  7. package/s/views/copy/style.css.ts +8 -3
  8. package/s/views/copy/view.ts +15 -13
  9. package/s/views/tabs/showcase.ts +1 -1
  10. package/x/demo/main.bundle.min.js +21 -15
  11. package/x/demo/main.bundle.min.js.map +2 -2
  12. package/x/demo/views/codebox/style.css.js +3 -1
  13. package/x/demo/views/codebox/style.css.js.map +1 -1
  14. package/x/demo/views/showcase/style.css.js +2 -6
  15. package/x/demo/views/showcase/style.css.js.map +1 -1
  16. package/x/index.html +3 -3
  17. package/x/theme/parts/vars.js +1 -1
  18. package/x/views/button/view.d.ts +1 -0
  19. package/x/views/button/view.js +2 -1
  20. package/x/views/button/view.js.map +1 -1
  21. package/x/views/copy/style.css.js +8 -3
  22. package/x/views/copy/style.css.js.map +1 -1
  23. package/x/views/copy/view.js +4 -2
  24. package/x/views/copy/view.js.map +1 -1
  25. package/x/views/tabs/showcase.js +1 -1
package/x/demo/views/codebox/style.css.js CHANGED
@@ -12,6 +12,7 @@ export default css `@layer view {
12
12
  flex-direction: column;
13
13
  background: #0003;
14
14
  border-radius: var(--rounded);
15
+ backdrop-filter: blur(0.5em);
15
16
  }
16
17
 
17
18
  header {
@@ -34,8 +35,9 @@ header {
34
35
  code {
35
36
  padding: calc(var(--padding) / 4) var(--padding);
36
37
  color: var(--code);
37
- white-space: pre-wrap;
38
+ white-space: pre;
38
39
  tab-size: 2;
40
+ overflow-x: auto;
39
41
  }
40
42
 
41
43
  }`;
package/x/demo/views/codebox/style.css.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"style.css.js","sourceRoot":"","sources":["../../../../s/demo/views/codebox/style.css.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,GAAG,EAAC,MAAM,KAAK,CAAA;AACvB,eAAe,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAuChB,CAAA"}
1
+ {"version":3,"file":"style.css.js","sourceRoot":"","sources":["../../../../s/demo/views/codebox/style.css.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,GAAG,EAAC,MAAM,KAAK,CAAA;AACvB,eAAe,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAyChB,CAAA"}
package/x/demo/views/showcase/style.css.js CHANGED
@@ -3,19 +3,15 @@ export default css `@layer view {
3
3
 
4
4
  section.showcase {
5
5
  position: relative;
6
-
7
6
  display: flex;
8
7
  flex-direction: column;
9
-
10
8
  padding: 1em;
11
- border-radius: var(--rounded);
12
9
  gap: var(--padding);
13
10
 
14
11
  background: linear-gradient(to right top, #252dd985, #aa6affbd);
15
- backdrop-filter: blur(0.5em);
16
-
17
12
  box-shadow: 0 0 5em #5d1fadaa;
18
13
  border-top: 2px solid #fff4;
14
+ border-radius: var(--rounded);
19
15
 
20
16
  &::before {
21
17
  z-index: 0;
@@ -55,8 +51,8 @@ header {
55
51
 
56
52
  > * {
57
53
  flex: 1 1 0;
54
+ min-width: 0;
58
55
  }
59
-
60
56
  }
61
57
 
62
58
  .codezone {
package/x/demo/views/showcase/style.css.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"style.css.js","sourceRoot":"","sources":["../../../../s/demo/views/showcase/style.css.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,GAAG,EAAC,MAAM,KAAK,CAAA;AACvB,eAAe,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAgFhB,CAAA"}
1
+ {"version":3,"file":"style.css.js","sourceRoot":"","sources":["../../../../s/demo/views/showcase/style.css.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,GAAG,EAAC,MAAM,KAAK,CAAA;AACvB,eAAe,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA4EhB,CAAA"}
package/x/index.html CHANGED
@@ -8,7 +8,7 @@
8
8
 
9
9
  <title>shiny</title>
10
10
  <link rel="icon" href="/assets/favicon.png"/>
11
- <script type="module" src="demo/main.bundle.min.js?v=435226d7004c"></script>
11
+ <script type="module" src="demo/main.bundle.min.js?v=697a6c5d02a7"></script>
12
12
 
13
13
  <style>
14
14
 
@@ -34,7 +34,7 @@
34
34
  --sad: var(--shiny-sad, #74f);
35
35
  --quirky: var(--shiny-quirky, #f49);
36
36
  --inactive-opacity: var(--shiny-inactive-opacity, 0.5);
37
- --anim-duration: var(--shiny-anim-duration, 300ms);
37
+ --anim-duration: var(--shiny-anim-duration, 150ms);
38
38
  }
39
39
 
40
40
  }
@@ -297,7 +297,7 @@ color: green;
297
297
  <body>
298
298
  <h1>
299
299
  <strong>✨shiny✨</strong>
300
- <small>v0.1.0-17</small>
300
+ <small>v0.1.0-19</small>
301
301
  </h1>
302
302
 
303
303
  <section>
package/x/theme/parts/vars.js CHANGED
@@ -20,7 +20,7 @@ export const varsString = css `@layer vars {
20
20
  "sad": "#74f",
21
21
  "quirky": "#f49",
22
22
  "inactive-opacity": "0.5",
23
- "anim-duration": "300ms",
23
+ "anim-duration": "150ms",
24
24
  })}
25
25
  }
26
26
 
package/x/views/button/view.d.ts CHANGED
@@ -1,4 +1,5 @@
1
1
  import { Content } from "@e280/sly";
2
2
  export declare const ShinyButton: import("@e280/sly").ShadowView<[content?: Content, options?: {
3
3
  vibe?: "calm" | "lame" | "happy" | "sad" | "angry" | "zesty" | "quirky";
4
+ onClick?: (event: PointerEvent) => void;
4
5
  } | undefined]>;
package/x/views/button/view.js CHANGED
@@ -14,7 +14,8 @@ export const ShinyButton = shadow((content, options = {}) => {
14
14
  part=button
15
15
  data-vibe="${options.vibe ?? "calm"}"
16
16
  ?disabled="${attrs.disabled}"
17
- ?hidden="${attrs.hidden}">
17
+ ?hidden="${attrs.hidden}"
18
+ @click="${options.onClick}">
18
19
  <slot>${content}</slot>
19
20
  </button>
20
21
  `;
package/x/views/button/view.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"view.js","sourceRoot":"","sources":["../../../s/views/button/view.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,IAAI,EAAC,MAAM,KAAK,CAAA;AACxB,OAAO,EAAU,MAAM,EAAE,MAAM,EAAE,OAAO,EAAE,QAAQ,EAAC,MAAM,WAAW,CAAA;AAEpE,OAAO,QAAQ,MAAM,gBAAgB,CAAA;AACrC,OAAO,EAAC,QAAQ,EAAC,MAAM,0BAA0B,CAAA;AAEjD,MAAM,CAAC,MAAM,WAAW,GAAG,MAAM,CAAC,CAAC,OAAiB,EAAE,UAEjD,EAAE,EAAE,EAAE;IAEV,OAAO,CAAC,cAAc,CAAC,CAAA;IACvB,MAAM,CAAC,QAAQ,EAAE,QAAQ,CAAC,CAAA;IAE1B,MAAM,KAAK,GAAG,QAAQ,CAAC;QACtB,MAAM,EAAE,OAAO;QACf,QAAQ,EAAE,OAAO;KACjB,CAAC,CAAA;IAEF,OAAO,IAAI,CAAA;;;gBAGI,OAAO,CAAC,IAAI,IAAI,MAAM;gBACtB,KAAK,CAAC,QAAQ;cAChB,KAAK,CAAC,MAAM;WACf,OAAO;;EAEhB,CAAA;AACF,CAAC,CAAC,CAAA"}
1
+ {"version":3,"file":"view.js","sourceRoot":"","sources":["../../../s/views/button/view.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,IAAI,EAAC,MAAM,KAAK,CAAA;AACxB,OAAO,EAAU,MAAM,EAAE,MAAM,EAAE,OAAO,EAAE,QAAQ,EAAC,MAAM,WAAW,CAAA;AAEpE,OAAO,QAAQ,MAAM,gBAAgB,CAAA;AACrC,OAAO,EAAC,QAAQ,EAAC,MAAM,0BAA0B,CAAA;AAEjD,MAAM,CAAC,MAAM,WAAW,GAAG,MAAM,CAAC,CAAC,OAAiB,EAAE,UAGjD,EAAE,EAAE,EAAE;IAEV,OAAO,CAAC,cAAc,CAAC,CAAA;IACvB,MAAM,CAAC,QAAQ,EAAE,QAAQ,CAAC,CAAA;IAE1B,MAAM,KAAK,GAAG,QAAQ,CAAC;QACtB,MAAM,EAAE,OAAO;QACf,QAAQ,EAAE,OAAO;KACjB,CAAC,CAAA;IAEF,OAAO,IAAI,CAAA;;;gBAGI,OAAO,CAAC,IAAI,IAAI,MAAM;gBACtB,KAAK,CAAC,QAAQ;cAChB,KAAK,CAAC,MAAM;aACb,OAAO,CAAC,OAAO;WACjB,OAAO;;EAEhB,CAAA;AACF,CAAC,CAAC,CAAA"}
package/x/views/copy/style.css.js CHANGED
@@ -9,15 +9,20 @@ button {
9
9
 
10
10
  button {
11
11
  opacity: var(--inactive-opacity);
12
- cursor: pointer;
13
- cursor: copy;
12
+ display: flex;
13
+ align-items: center;
14
14
 
15
+ cursor: copy;
15
16
  color: inherit;
16
- transition: all 300ms linear;
17
+ transition: all var(--anim-duration) linear;
17
18
 
18
19
  &:is(:hover, :focus-visible) {
19
20
  opacity: 1;
20
21
  }
22
+
23
+ > span {
24
+ display: flex;
25
+ }
21
26
  }
22
27
 
23
28
  [data-status="invalid"] {
package/x/views/copy/style.css.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"style.css.js","sourceRoot":"","sources":["../../../s/views/copy/style.css.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,GAAG,EAAC,MAAM,KAAK,CAAA;AACvB,eAAe,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA0ChB,CAAA"}
1
+ {"version":3,"file":"style.css.js","sourceRoot":"","sources":["../../../s/views/copy/style.css.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,GAAG,EAAC,MAAM,KAAK,CAAA;AACvB,eAAe,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA+ChB,CAAA"}
package/x/views/copy/view.js CHANGED
@@ -25,8 +25,9 @@ export const ShinyCopy = shadow((text, options = {}) => {
25
25
  }
26
26
  }
27
27
  return html `
28
- <button data-status="${copier.status}" @click="${click}">
29
- ${(() => {
28
+ <button data-status="${copier.status}" @click="${click}" part=button>
29
+ <span part=icon>
30
+ ${(() => {
30
31
  switch (copier.status) {
31
32
  case "neutral":
32
33
  return clipboardSvg;
@@ -40,6 +41,7 @@ export const ShinyCopy = shadow((text, options = {}) => {
40
41
  throw new Error(`unknown copy status`);
41
42
  }
42
43
  })()}
44
+ </span>
43
45
  <slot></slot>
44
46
  </button>
45
47
  `;
package/x/views/copy/view.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"view.js","sourceRoot":"","sources":["../../../s/views/copy/view.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,IAAI,EAAC,MAAM,KAAK,CAAA;AACxB,OAAO,EAAC,MAAM,EAAE,MAAM,EAAE,OAAO,EAAC,MAAM,WAAW,CAAA;AAEjD,OAAO,QAAQ,MAAM,gBAAgB,CAAA;AACrC,OAAO,YAAY,MAAM,qCAAqC,CAAA;AAC9D,OAAO,mBAAmB,MAAM,8CAA8C,CAAA;AAC9E,OAAO,uBAAuB,MAAM,kDAAkD,CAAA;AAEtF,OAAO,EAAC,SAAS,EAAC,MAAM,uBAAuB,CAAA;AAC/C,OAAO,EAAC,QAAQ,EAAC,MAAM,0BAA0B,CAAA;AAEjD,MAAM,CAAC,MAAM,SAAS,GAAG,MAAM,CAAC,CAC9B,IAAwB,EACxB,UAAyC,EAAE,EAC1C,EAAE;IAEJ,OAAO,CAAC,YAAY,CAAC,CAAA;IACrB,MAAM,CAAC,QAAQ,EAAE,QAAQ,CAAC,CAAA;IAC1B,MAAM,MAAM,GAAG,SAAS,CAAC,IAAI,EAAE,OAAO,CAAC,EAAE,IAAI,IAAI,CAAC,CAAA;IAElD,KAAK,UAAU,KAAK;QACnB,IAAI,IAAI,KAAK,SAAS;YAAE,OAAM;QAC9B,IAAI,CAAC;YACJ,IAAI,OAAO,CAAC,IAAI;gBACf,MAAM,IAAI,KAAK,CAAC,6CAA6C,CAAC,CAAA;YAC/D,MAAM,SAAS,CAAC,SAAS,CAAC,SAAS,CAAC,IAAI,CAAC,CAAA;YACzC,MAAM,MAAM,CAAC,KAAK,CAAC,MAAM,CAAC,CAAA;QAC3B,CAAC;QACD,OAAO,KAAK,EAAE,CAAC;YACd,OAAO,CAAC,KAAK,CAAC,KAAK,CAAC,CAAA;YACpB,MAAM,MAAM,CAAC,KAAK,CAAC,KAAK,CAAC,CAAA;QAC1B,CAAC;IACF,CAAC;IAED,OAAO,IAAI,CAAA;yBACa,MAAM,CAAC,MAAM,aAAa,KAAK;KACnD,CAAC,GAAG,EAAE;QAAE,QAAQ,MAAM,CAAC,MAAM,EAAE,CAAC;YACjC,KAAK,SAAS;gBACb,OAAO,YAAY,CAAA;YAEpB,KAAK,SAAS;gBACb,OAAO,YAAY,CAAA;YAEpB,KAAK,MAAM;gBACV,OAAO,uBAAuB,CAAA;YAE/B,KAAK,KAAK;gBACT,OAAO,mBAAmB,CAAA;YAE3B;gBACC,MAAM,IAAI,KAAK,CAAC,qBAAqB,CAAC,CAAA;QACxC,CAAC;IAAA,CAAC,CAAC,EAAE;;;EAGN,CAAA;AACF,CAAC,CAAC,CAAA"}
1
+ {"version":3,"file":"view.js","sourceRoot":"","sources":["../../../s/views/copy/view.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,IAAI,EAAC,MAAM,KAAK,CAAA;AACxB,OAAO,EAAC,MAAM,EAAE,MAAM,EAAE,OAAO,EAAC,MAAM,WAAW,CAAA;AAEjD,OAAO,QAAQ,MAAM,gBAAgB,CAAA;AACrC,OAAO,YAAY,MAAM,qCAAqC,CAAA;AAC9D,OAAO,mBAAmB,MAAM,8CAA8C,CAAA;AAC9E,OAAO,uBAAuB,MAAM,kDAAkD,CAAA;AAEtF,OAAO,EAAC,SAAS,EAAC,MAAM,uBAAuB,CAAA;AAC/C,OAAO,EAAC,QAAQ,EAAC,MAAM,0BAA0B,CAAA;AAEjD,MAAM,CAAC,MAAM,SAAS,GAAG,MAAM,CAAC,CAC9B,IAAwB,EACxB,UAAyC,EAAE,EAC1C,EAAE;IAEJ,OAAO,CAAC,YAAY,CAAC,CAAA;IACrB,MAAM,CAAC,QAAQ,EAAE,QAAQ,CAAC,CAAA;IAC1B,MAAM,MAAM,GAAG,SAAS,CAAC,IAAI,EAAE,OAAO,CAAC,EAAE,IAAI,IAAI,CAAC,CAAA;IAElD,KAAK,UAAU,KAAK;QACnB,IAAI,IAAI,KAAK,SAAS;YAAE,OAAM;QAC9B,IAAI,CAAC;YACJ,IAAI,OAAO,CAAC,IAAI;gBACf,MAAM,IAAI,KAAK,CAAC,6CAA6C,CAAC,CAAA;YAC/D,MAAM,SAAS,CAAC,SAAS,CAAC,SAAS,CAAC,IAAI,CAAC,CAAA;YACzC,MAAM,MAAM,CAAC,KAAK,CAAC,MAAM,CAAC,CAAA;QAC3B,CAAC;QACD,OAAO,KAAK,EAAE,CAAC;YACd,OAAO,CAAC,KAAK,CAAC,KAAK,CAAC,CAAA;YACpB,MAAM,MAAM,CAAC,KAAK,CAAC,KAAK,CAAC,CAAA;QAC1B,CAAC;IACF,CAAC;IAED,OAAO,IAAI,CAAA;yBACa,MAAM,CAAC,MAAM,aAAa,KAAK;;MAElD,CAAC,GAAG,EAAE;QAAE,QAAQ,MAAM,CAAC,MAAM,EAAE,CAAC;YACjC,KAAK,SAAS;gBACb,OAAO,YAAY,CAAA;YAEpB,KAAK,SAAS;gBACb,OAAO,YAAY,CAAA;YAEpB,KAAK,MAAM;gBACV,OAAO,uBAAuB,CAAA;YAE/B,KAAK,KAAK;gBACT,OAAO,mBAAmB,CAAA;YAE3B;gBACC,MAAM,IAAI,KAAK,CAAC,qBAAqB,CAAC,CAAA;QACxC,CAAC;IAAA,CAAC,CAAC,EAAE;;;;EAIP,CAAA;AACF,CAAC,CAAC,CAAA"}
package/x/views/tabs/showcase.js CHANGED
@@ -20,7 +20,7 @@ export const tabsShowcase = () => Showcase("ShinyTabs", [
20
20
  `,
21
21
  }),
22
22
  styleboxCss: css `
23
- [view="shiny-button"] { font-size: 1.5em; }
23
+ [view="shiny-button"] { font-size: 1.2em; }
24
24
  p { margin-top: var(--padding); }
25
25
  `,
26
26
  js: `