@e280/shiny 0.1.0-3 → 0.1.0-5

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 (88) hide show
  1. package/README.md +26 -7
  2. package/package.json +1 -1
  3. package/s/{ui → components}/copy/style.css.ts +1 -1
  4. package/s/components/drawer/component.ts +82 -0
  5. package/s/components/drawer/drawer.ts +31 -0
  6. package/s/components/drawer/style.css.ts +118 -0
  7. package/s/{ui → components}/example/component.ts +1 -0
  8. package/s/{ui → components}/raw-components.ts +2 -0
  9. package/s/demo/demo.bundle.ts +116 -9
  10. package/s/demo/utils/lipsum.ts +19 -0
  11. package/s/demo/views/demonstration/style.css.ts +1 -0
  12. package/s/demo/views/demonstration/view.ts +5 -6
  13. package/s/icons/tabler/menu-2.svg.ts +4 -0
  14. package/s/icons/tabler/x.svg.ts +4 -0
  15. package/s/index.ts +3 -3
  16. package/s/{install.bundle.ts → install/basic.bundle.ts} +2 -2
  17. package/s/shiny.ts +2 -2
  18. package/s/themes/basic.css.ts +3 -0
  19. package/x/components/copy/component.js.map +1 -0
  20. package/x/{ui → components}/copy/style.css.js +1 -1
  21. package/x/components/copy/style.css.js.map +1 -0
  22. package/x/components/drawer/component.d.ts +383 -0
  23. package/x/components/drawer/component.js +69 -0
  24. package/x/components/drawer/component.js.map +1 -0
  25. package/x/components/drawer/drawer.d.ts +9 -0
  26. package/x/components/drawer/drawer.js +24 -0
  27. package/x/components/drawer/drawer.js.map +1 -0
  28. package/x/components/drawer/style.css.js +117 -0
  29. package/x/components/drawer/style.css.js.map +1 -0
  30. package/x/{ui → components}/example/component.js +1 -0
  31. package/x/components/example/component.js.map +1 -0
  32. package/x/components/example/style.css.d.ts +2 -0
  33. package/x/components/example/style.css.js.map +1 -0
  34. package/x/components/framework.js.map +1 -0
  35. package/x/{ui → components}/raw-components.d.ts +2 -0
  36. package/x/{ui → components}/raw-components.js +2 -0
  37. package/x/components/raw-components.js.map +1 -0
  38. package/x/demo/demo.bundle.js +112 -9
  39. package/x/demo/demo.bundle.js.map +1 -1
  40. package/x/demo/demo.bundle.min.js +247 -30
  41. package/x/demo/demo.bundle.min.js.map +4 -4
  42. package/x/demo/utils/lipsum.d.ts +2 -0
  43. package/x/demo/utils/lipsum.js +11 -0
  44. package/x/demo/utils/lipsum.js.map +1 -0
  45. package/x/demo/views/demonstration/style.css.js +1 -0
  46. package/x/demo/views/demonstration/style.css.js.map +1 -1
  47. package/x/demo/views/demonstration/view.d.ts +3 -2
  48. package/x/demo/views/demonstration/view.js +2 -3
  49. package/x/demo/views/demonstration/view.js.map +1 -1
  50. package/x/icons/tabler/menu-2.svg.d.ts +2 -0
  51. package/x/icons/tabler/menu-2.svg.js +3 -0
  52. package/x/icons/tabler/menu-2.svg.js.map +1 -0
  53. package/x/icons/tabler/x.svg.d.ts +2 -0
  54. package/x/icons/tabler/x.svg.js +3 -0
  55. package/x/icons/tabler/x.svg.js.map +1 -0
  56. package/x/index.d.ts +3 -3
  57. package/x/index.html +2 -2
  58. package/x/index.js +3 -3
  59. package/x/index.js.map +1 -1
  60. package/x/install/basic.bundle.js +5 -0
  61. package/x/install/basic.bundle.js.map +1 -0
  62. package/x/{install.bundle.min.js → install/basic.bundle.min.js} +158 -15
  63. package/x/{install.bundle.min.js.map → install/basic.bundle.min.js.map} +4 -4
  64. package/x/shiny.d.ts +14 -1
  65. package/x/shiny.js +1 -1
  66. package/x/shiny.js.map +1 -1
  67. package/x/themes/basic.css.js +3 -0
  68. package/x/themes/basic.css.js.map +1 -1
  69. package/x/install.bundle.js +0 -5
  70. package/x/install.bundle.js.map +0 -1
  71. package/x/ui/copy/component.js.map +0 -1
  72. package/x/ui/copy/style.css.js.map +0 -1
  73. package/x/ui/example/component.js.map +0 -1
  74. package/x/ui/example/style.css.js.map +0 -1
  75. package/x/ui/framework.js.map +0 -1
  76. package/x/ui/raw-components.js.map +0 -1
  77. /package/s/{ui → components}/copy/component.ts +0 -0
  78. /package/s/{ui → components}/example/style.css.ts +0 -0
  79. /package/s/{ui → components}/framework.ts +0 -0
  80. /package/x/{ui → components}/copy/component.d.ts +0 -0
  81. /package/x/{ui → components}/copy/component.js +0 -0
  82. /package/x/{ui → components}/copy/style.css.d.ts +0 -0
  83. /package/x/{ui/example → components/drawer}/style.css.d.ts +0 -0
  84. /package/x/{ui → components}/example/component.d.ts +0 -0
  85. /package/x/{ui → components}/example/style.css.js +0 -0
  86. /package/x/{ui → components}/framework.d.ts +0 -0
  87. /package/x/{ui → components}/framework.js +0 -0
  88. /package/x/{install.bundle.d.ts → install/basic.bundle.d.ts} +0 -0
package/README.md CHANGED
@@ -1,22 +1,22 @@
1
1
 
2
2
  ![](https://i.imgur.com/F1J78wH.png)
3
3
 
4
- # ✨shiny
4
+ # ✨shiny✨
5
5
  > *web ui components*
6
6
 
7
7
  - 💁 ***see all the components at https://shiny.e280.org/*** 👈
8
8
  - 👷 built with [🦝sly](https://github.com/e280/sly) and [🔥lit](https://lit.dev/)
9
- - 🍋 all components are available as ***web components*** or ***sly views***
9
+ - 🎭 duality: all components are available as ***web components*** or ***sly views***
10
10
  - 🧑‍💻 a project by https://e280.org/
11
11
 
12
12
 
13
13
 
14
14
  <br/><br/>
15
15
 
16
- ## ✨ instant html installation
16
+ ## 🍭 instant html installation
17
17
  - put this in your html `<head>`
18
18
  ```html
19
- <script async src="https://shiny.e280.org/install.bundle.min.js"></script>
19
+ <script async src="https://shiny.e280.org/install/basic.bundle.min.js"></script>
20
20
  ```
21
21
  - you're ready to put shiny components in your html `<body>`
22
22
  ```html
@@ -28,7 +28,7 @@
28
28
 
29
29
  <br/><br/>
30
30
 
31
- ## ✨ web app installation
31
+ ## 🍬 web app installation
32
32
  - install shiny and friends
33
33
  ```sh
34
34
  npm install @e280/shiny @e280/sly lit
@@ -51,7 +51,7 @@
51
51
 
52
52
  <br/><br/>
53
53
 
54
- ## ✨ views are for the cool kids
54
+ ## 😎 views are for the cool kids
55
55
  - hey, remember those `views` you got from the install snippet?
56
56
  ```ts
57
57
  const {components, views} = shiny({theme: themes.basic})
@@ -82,7 +82,26 @@
82
82
 
83
83
  <br/><br/>
84
84
 
85
- ## ✨shiny is by e280
85
+ ## 💅 page-wide css customization
86
+ - put this in your `<head>` and you can customize colors and stuff
87
+ ```html
88
+ <style>
89
+ :root {
90
+ --shiny-bg: #111;
91
+ --shiny-alpha: #afa;
92
+ --shiny-good: #0f4;
93
+ --shiny-bad: #f40;
94
+ --shiny-invalid: #8888;
95
+ --shiny-inactive-opacity: 0.5;
96
+ }
97
+ </style>
98
+ ```
99
+
100
+
101
+
102
+ <br/><br/>
103
+
104
+ ## 🧑‍💻 by e280
86
105
  reward us with github stars
87
106
  build with us at https://e280.org/ if you're good at dev
88
107
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@e280/shiny",
3
- "version": "0.1.0-3",
3
+ "version": "0.1.0-5",
4
4
  "description": "✨ web ui components",
5
5
  "license": "MIT",
6
6
  "type": "module",
package/s/{ui → components}/copy/style.css.ts RENAMED
@@ -9,7 +9,7 @@ button {
9
9
  }
10
10
 
11
11
  button {
12
- opacity: 0.5;
12
+ opacity: var(--inactive-opacity);
13
13
  cursor: pointer;
14
14
  cursor: copy;
15
15
 
package/s/components/drawer/component.ts ADDED
@@ -0,0 +1,82 @@
1
+
2
+ import {html} from "lit"
3
+ import {dom, view} from "@e280/sly"
4
+
5
+ import {Drawer} from "./drawer.js"
6
+ import styleCss from "./style.css.js"
7
+ import xSvg from "../../icons/tabler/x.svg.js"
8
+ import menu2Svg from "../../icons/tabler/menu-2.svg.js"
9
+ import {ShinyContext, ShinyElement} from "../framework.js"
10
+
11
+ export class ShinyDrawer extends (
12
+ view(use => (context: ShinyContext, options: {
13
+ button: boolean
14
+ side?: "left" | "right"
15
+ drawer?: Drawer
16
+ }) => {
17
+
18
+ use.name("shiny-drawer")
19
+ use.styles(context.theme, styleCss)
20
+
21
+ const button = options.button
22
+ const side = options.side ?? "left"
23
+ const drawer = use.once(() => (options.drawer ?? new Drawer()))
24
+
25
+ use.mount(() => dom.events(window, {keydown: (event: KeyboardEvent) => {
26
+ if (event.code === "Escape")
27
+ drawer.close()
28
+ }}))
29
+
30
+ dom.attrs(use.element).booleans.open = drawer.isOpen
31
+
32
+ return html`
33
+ <div class=shell ?data-open="${drawer.isOpen}" data-side="${side}">
34
+ <slot name=plate ?inert="${drawer.isOpen}"></slot>
35
+
36
+ <div class=clipper>
37
+ <div part=blanket @click="${drawer.close}" ?inert="${!drawer.isOpen}"></div>
38
+
39
+ <div part=tray>
40
+ <slot ?inert="${!drawer.isOpen}"></slot>
41
+
42
+ ${button
43
+ ? html`
44
+ <button @click="${drawer.toggle}">
45
+ ${drawer.isOpen
46
+ ? html`
47
+ <slot name=button-x>
48
+ ${xSvg}
49
+ </slot>
50
+ `
51
+ : html`
52
+ <slot name=button>
53
+ ${menu2Svg}
54
+ </slot>
55
+ `}
56
+ </button>
57
+ `
58
+ : null}
59
+ </div>
60
+ </div>
61
+ </div>
62
+ `
63
+ })
64
+ .component(class extends ShinyElement {
65
+ attrs = dom.attrs(this).spec({
66
+ open: Boolean,
67
+ button: Boolean,
68
+ side: String,
69
+ })
70
+ drawer = new Drawer(this.attrs.open)
71
+ get isOpen() { return this.drawer.isOpen }
72
+ get toggle() { return this.drawer.toggle }
73
+ get open() { return this.drawer.open }
74
+ get close() { return this.drawer.close }
75
+ })
76
+ .props(el => [el.context, {
77
+ drawer: el.drawer,
78
+ button: el.attrs.button,
79
+ side: el.attrs.side === "right" ? "right" : "left",
80
+ }] as const)
81
+ ) {}
82
+
package/s/components/drawer/drawer.ts ADDED
@@ -0,0 +1,31 @@
1
+
2
+ import {signal} from "@e280/strata"
3
+
4
+ export class Drawer {
5
+ $open = signal(false)
6
+
7
+ constructor(startOpen = false) {
8
+ if (startOpen) this.$open.set(true)
9
+ }
10
+
11
+ get isOpen() {
12
+ return this.$open.get()
13
+ }
14
+
15
+ async setOpen(value: boolean) {
16
+ return this.$open.set(value)
17
+ }
18
+
19
+ open = async() => {
20
+ await this.setOpen(true)
21
+ }
22
+
23
+ close = async() => {
24
+ await this.setOpen(false)
25
+ }
26
+
27
+ toggle = async() => {
28
+ return this.setOpen(!this.isOpen)
29
+ }
30
+ }
31
+
package/s/components/drawer/style.css.ts ADDED
@@ -0,0 +1,118 @@
1
+
2
+ import {css} from "lit"
3
+ export default css`
4
+
5
+ :host {
6
+ display: block;
7
+ width: 100%;
8
+ height: 100%;
9
+ --button-size: 2em;
10
+ --drawer-height: auto;
11
+ --anim-duration: 200ms;
12
+ --blanket-bg: #1118;
13
+ --blanket-backdrop-filter: blur(0.5em);
14
+ }
15
+
16
+ .shell {
17
+ position: relative;
18
+ width: 100%;
19
+ height: 100%;
20
+
21
+ [part="blanket"] {
22
+ opacity: 0;
23
+
24
+ content: "";
25
+ display: block;
26
+ position: absolute;
27
+ inset: 0;
28
+
29
+ background: var(--blanket-bg);
30
+ backdrop-filter: var(--blanket-backdrop-filter);
31
+
32
+ will-change: opacity;
33
+ transition: all var(--anim-duration) ease;
34
+ }
35
+
36
+ .clipper {
37
+ pointer-events: none;
38
+ position: absolute;
39
+ inset: 0;
40
+ width: 100%;
41
+ height: 100%;
42
+ overflow: hidden;
43
+ > * { pointer-events: all; }
44
+ }
45
+
46
+ [part="tray"] {
47
+ position: absolute;
48
+ top: 0;
49
+ width: calc(100% - var(--button-size));
50
+ height: 100%;
51
+
52
+ opacity: 1;
53
+ transform: translateX(-100%);
54
+ will-change: opacity, transform;
55
+ transition: all var(--anim-duration) ease;
56
+
57
+ > slot {
58
+ display: block;
59
+ height: var(--drawer-height);
60
+ max-height: 100%;
61
+ overflow-y: auto;
62
+ }
63
+
64
+ > button {
65
+ position: absolute;
66
+ top: 0;
67
+ left: 100%;
68
+
69
+ opacity: var(--inactive-opacity);
70
+ background: transparent;
71
+ border: none;
72
+ cursor: pointer;
73
+
74
+ &:is(:hover, :focus-visible) {
75
+ opacity: 1;
76
+ }
77
+
78
+ > slot {
79
+ display: contents;
80
+ }
81
+
82
+ svg {
83
+ width: var(--button-size);
84
+ height: var(--button-size);
85
+ }
86
+ }
87
+ }
88
+
89
+ &[data-side="right"] {
90
+ [part="tray"] {
91
+ right: 0;
92
+ transform: translateX(100%);
93
+ > button {
94
+ left: unset;
95
+ right: 100%;
96
+ }
97
+ }
98
+ }
99
+
100
+ slot[name="plate"] {
101
+ display: block;
102
+ width: 100%;
103
+ height: 100%;
104
+ }
105
+
106
+ &[data-open] {
107
+ [part="blanket"] {
108
+ opacity: 1;
109
+ }
110
+ [part="tray"] {
111
+ opacity: 1;
112
+ transform: translateX(0%);
113
+ }
114
+ }
115
+ }
116
+
117
+ `
118
+
package/s/{ui → components}/example/component.ts RENAMED
@@ -6,6 +6,7 @@ import {ShinyContext, ShinyElement} from "../framework.js"
6
6
 
7
7
  export class ShinyExample extends (
8
8
  view(use => (context: ShinyContext, start: number) => {
9
+ use.name("shiny-example")
9
10
  use.styles(context.theme, styleCss)
10
11
 
11
12
  const $count = use.signal(start)
package/s/{ui → components}/raw-components.ts RENAMED
@@ -1,9 +1,11 @@
1
1
 
2
2
  import {ShinyCopy} from "./copy/component.js"
3
+ import {ShinyDrawer} from "./drawer/component.js"
3
4
  import {ShinyExample} from "./example/component.js"
4
5
 
5
6
  export const rawComponents = {
6
7
  ShinyCopy,
8
+ ShinyDrawer,
7
9
  ShinyExample,
8
10
  }
9
11
 
package/s/demo/demo.bundle.ts CHANGED
@@ -3,10 +3,23 @@ import {css, html} from "lit"
3
3
  import {dom, view} from "@e280/sly"
4
4
  import {shiny} from "../shiny.js"
5
5
  import {basic} from "../themes/basic.css.js"
6
+ import {makeLipsumDispenser} from "./utils/lipsum.js"
6
7
  import {Demonstration} from "./views/demonstration/view.js"
8
+ import { Drawer } from "../components/drawer/drawer.js"
7
9
 
8
10
  const {views} = shiny({theme: basic})
9
11
 
12
+ const labels = {
13
+ html: "html web component",
14
+ view: "sly view",
15
+ css: "custom css",
16
+ }
17
+
18
+ const lipsum = (() => {
19
+ const dispenser = makeLipsumDispenser()
20
+ return () => dispenser.takeRandom()
21
+ })()
22
+
10
23
  dom.register({ShinyDemo: view.component(use => {
11
24
  use.styles(css`
12
25
  :host {
@@ -14,10 +27,6 @@ dom.register({ShinyDemo: view.component(use => {
14
27
  flex-direction: column;
15
28
  gap: 1em;
16
29
  }
17
-
18
- [view="shiny-copy"]::part(content) {
19
- font-size: 4em;
20
- }
21
30
  `)
22
31
 
23
32
  return [
@@ -27,13 +36,111 @@ dom.register({ShinyDemo: view.component(use => {
27
36
  explain: html`
28
37
  <p>button for click-to-copy text</p>
29
38
  `,
30
- exampleComponent: `
31
- <shiny-copy text="hello world"></shiny-copy>
39
+ snippets: [
40
+ [labels.html, `
41
+ <shiny-copy text="hello world"></shiny-copy>
42
+ `],
43
+ [labels.view, `
44
+ ShinyCopy("hello world")
45
+ `],
46
+ [labels.css, `
47
+ shiny-copy {
48
+ font-size: 1em;
49
+ --good: #0f4;
50
+ --bad: #f40;
51
+ --invalid: #8888;
52
+ --inactive-opacity: 0.5;
53
+ }
54
+ `],
55
+ ],
56
+ content: views.ShinyCopy("hello world"),
57
+ style: css`
58
+ .content sly-view {
59
+ font-size: 4em;
60
+ }
32
61
  `,
33
- exampleView: `
34
- ShinyCopy("hello world")
62
+ }),
63
+
64
+ Demonstration({
65
+ views,
66
+ name: "shiny-drawer",
67
+ explain: html`
68
+ <p>slide-out panel with optional burger button</p>
69
+ `,
70
+ snippets: [
71
+ [labels.html, `
72
+ <shiny-drawer button side=left>
73
+ <header>example</header>
74
+ <section slot=plate>lorem kettlebell..</section>
75
+ </shiny-drawer>
76
+ `],
77
+ [labels.view, `
78
+ ShinyDrawer
79
+ .props({button: true, side: "left"})
80
+ .children(html\`
81
+ <header>example</header>
82
+ <section slot=plate>lorem kettlebell..</section>
83
+ \`)
84
+ .render()
85
+ `],
86
+ [labels.css, `
87
+ shiny-drawer {
88
+ --button-size: 2em;
89
+ --drawer-height: auto;
90
+ --anim-duration: 200ms;
91
+ --blanket-bg: #1118;
92
+ --blanket-backdrop-filter: blur(0.5em);
93
+ --inactive-opacity: 0.5;
94
+ }
95
+ `],
96
+ ],
97
+ content: views.ShinyDrawer
98
+ .props({button: true})
99
+ .children(html`
100
+ <header>
101
+ <h2>example drawer</h2>
102
+ <p>you can put any content in here.</p>
103
+ <p class=lipsum>${lipsum()}</p>
104
+ </header>
105
+ <section slot=plate>
106
+ <p class=lipsum>${lipsum()}</p>
107
+ </section>
108
+ `)
109
+ .render(),
110
+ style: css`
111
+ .content sly-view {
112
+ border-radius: 0.5em;
113
+ overflow: hidden;
114
+ --button-size: 3em;
115
+
116
+ p.lipsum {
117
+ opacity: 0.7;
118
+ font-family: serif;
119
+ font-style: italic;
120
+ }
121
+
122
+ header {
123
+ padding: 0.5em;
124
+ border-bottom-right-radius: 0.5em;
125
+ background: linear-gradient(
126
+ to top right,
127
+ #00a9dd69,
128
+ #70ffd77a
129
+ );
130
+ > * + * { margin-top: 0.5em; }
131
+ }
132
+
133
+ section {
134
+ display: flex;
135
+ flex-direction: column;
136
+ justify-content: center;
137
+ min-height: 100%;
138
+ padding: 1em;
139
+ padding-top: 3em;
140
+ > * + * { margin-top: 0.5em; }
141
+ }
142
+ }
35
143
  `,
36
- content: views.ShinyCopy("hello world"),
37
144
  }),
38
145
  ]
39
146
  })})
package/s/demo/utils/lipsum.ts ADDED
@@ -0,0 +1,19 @@
1
+
2
+ import {Dispenser} from "@e280/stz"
3
+
4
+ export const makeLipsumDispenser = () => new Dispenser(() => [
5
+ `lorem kettlebell dolor sit amet, mountain squats consectetur trail-running. adipiscing deadlift elit, sed do 45lb turkish get-up eiusmod tempor incididunt ut hike magna aliqua. ut enim ad minim clean & press, quis nostrud exercitation lunges ullamco kettlebell snatch trailhead nisi ut aliquip ex dolore summit irure dolor.`,
6
+
7
+ `lorem protein dolor sit amet, creatine scoop elit shaker bottle tempor. grilled steak magna keto-fasting culpa, carb-loading perspiciatis cheat day. whey isolate dolor sit macros elit, intermittent fasting tempor electrolyte magna; barefoot shoes culpa, liver perspiciatis ancestral squat rack gospel. lorem bulking dolor sit cut elit, tdee tracker tempor calorie deficit magna; chicken breast culpa gatorade perspiciatis meal prep.`,
8
+
9
+ `lorem caffeine dolor sit amet, double espresso elit cold brew tempor jitter. adderall magna focus culpa, lion’s mane perspiciatis nootropic. nicotine gum dolor sit vape elit, dopamine hit tempor buzz magna; lsd microdosing culpa, productivity perspiciatis agile sprint. lorem latte dolor sit drip elit, french press tempor aeropress magna; insomnia culpa, circadian rhythm perspiciatis blue light filter.`,
10
+
11
+ `lorem arch dolor sit amet, pacman -Syu elit rolling release tempor breakage. i3-gaps commodo tiling, bspwm magna culpa xinitrc. alias neovim configs in .dotfiles forest, r/unixporn veniam rice showcase perspiciatis.`,
12
+
13
+ `lorem authlocal dolor sit amet, user-sovereign identity elit, cryptographic tempor signatures. ed25519 magna keypair culpa, elliptic perspiciatis handshake ut zero-knowledge proof. decentralized login elit mnemonic seed tempor recovery phrase. DID magna alias culpa federation, lorem oauth2 perspiciatis antiquated.`,
14
+
15
+ `lorem webgpu dolor sit amet, fragment shader elit vertex buffer tempor pipeline; bindgroup magna sampler culpa, wgsl perspiciatis alignment bug. compute pass workgroup barrier magna, mipmap cascade culpa drawcall instancing overflow. spir-v dolor sit wasm elit, canvas context lost magna; fallback webgl2 perspiciatis, polyfill slowpath dolore, glsl antique culpa extension hell 144hz tearing. command encoder perspiciatis out-of-memory, chromium nightly.`,
16
+
17
+ `lorem sedentary dolor sit amet, infinite scroll elit chair-bound tempor. commit marathon magna carpal tunnel culpa, caffeine perspiciatis heartbeat irregular. lorem backlog dolor sit ticket elit, jira sprint tempor sedentary slump magna; gym membership culpa expired, standing desk perspiciatis unused. lorem procrastination dolor sit youtube elit, keyboard crumbs tempor pizza box magna; cardio avoidant culpa, hike someday perspiciatis maybe.`,
18
+ ])
19
+
package/s/demo/views/demonstration/style.css.ts CHANGED
@@ -78,6 +78,7 @@ export default css`
78
78
  white-space: pre;
79
79
  text-wrap: wrap;
80
80
  tab-size: 2;
81
+ word-break: break-word;
81
82
 
82
83
  font-size: 0.8em;
83
84
  font-family: monospace;
package/s/demo/views/demonstration/view.ts CHANGED
@@ -1,5 +1,5 @@
1
1
 
2
- import {html} from "lit"
2
+ import {CSSResultGroup, html} from "lit"
3
3
  import {untab} from "@e280/stz"
4
4
  import {Content, view} from "@e280/sly"
5
5
  import styleCss from "./style.css.js"
@@ -10,13 +10,13 @@ export const Demonstration = view(use => (options: {
10
10
  name: string
11
11
  explain: Content
12
12
  views: ShinyViews
13
- exampleComponent: string
14
- exampleView: string
13
+ snippets: [label: string, code: string][]
15
14
  content: Content
15
+ style: CSSResultGroup
16
16
  }) => {
17
17
 
18
18
  use.name(options.name)
19
- use.styles(basic, styleCss)
19
+ use.styles(basic, styleCss, options.style)
20
20
 
21
21
  function codeblock(heading: string, code: string) {
22
22
  const cleanCode = untab(code).trim()
@@ -36,8 +36,7 @@ export const Demonstration = view(use => (options: {
36
36
  <h2>✨ ${options.name}</h2>
37
37
  <div class=explain>${options.explain}</div>
38
38
  <div class=codes>
39
- ${codeblock("html web component", options.exampleComponent)}
40
- ${codeblock("sly view", options.exampleView)}
39
+ ${options.snippets.map(([label, code]) => codeblock(label, code))}
41
40
  </div>
42
41
  </div>
43
42
 
package/s/icons/tabler/menu-2.svg.ts ADDED
@@ -0,0 +1,4 @@
1
+
2
+ import {svg} from "lit"
3
+ export default svg`<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-menu-2"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M4 6l16 0" /><path d="M4 12l16 0" /><path d="M4 18l16 0" /></svg>`
4
+
package/s/icons/tabler/x.svg.ts ADDED
@@ -0,0 +1,4 @@
1
+
2
+ import {svg} from "lit"
3
+ export default svg`<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-x"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M18 6l-12 12" /><path d="M6 6l12 12" /></svg>`
4
+
package/s/index.ts CHANGED
@@ -1,9 +1,9 @@
1
1
 
2
2
  export * from "./themes/index.js"
3
3
 
4
- export * from "./ui/example/component.js"
5
- export * from "./ui/copy/component.js"
6
- export * from "./ui/framework.js"
4
+ export * from "./components/example/component.js"
5
+ export * from "./components/copy/component.js"
6
+ export * from "./components/framework.js"
7
7
 
8
8
  export * from "./shiny.js"
9
9
 
package/s/{install.bundle.ts → install/basic.bundle.ts} RENAMED
@@ -1,7 +1,7 @@
1
1
 
2
2
  import {dom} from "@e280/sly"
3
- import {shiny} from "./shiny.js"
4
- import {basic} from "./themes/basic.css.js"
3
+ import {shiny} from "../shiny.js"
4
+ import {basic} from "../themes/basic.css.js"
5
5
 
6
6
  dom.register(
7
7
  shiny({theme: basic}).components
package/s/shiny.ts CHANGED
@@ -1,7 +1,7 @@
1
1
 
2
2
  import {contextualizeComponents, getViews} from "@e280/sly"
3
- import {ShinyContext} from "./ui/framework.js"
4
- import {rawComponents} from "./ui/raw-components.js"
3
+ import {ShinyContext} from "./components/framework.js"
4
+ import {rawComponents} from "./components/raw-components.js"
5
5
 
6
6
  export function shiny(context: ShinyContext) {
7
7
  const components = contextualizeComponents(context, rawComponents)
package/s/themes/basic.css.ts CHANGED
@@ -7,11 +7,14 @@ ${cssReset}
7
7
 
8
8
  :host {
9
9
  display: block;
10
+
10
11
  --bg: var(--shiny-bg, #111);
11
12
  --alpha: var(--shiny-alpha, #afa);
12
13
  --good: var(--shiny-good, #0f4);
13
14
  --bad: var(--shiny-bad, #f40);
14
15
  --invalid: var(--shiny-invalid, #8888);
16
+
17
+ --inactive-opacity: var(--shiny-inactive-opacity, 0.5);
15
18
  }
16
19
 
17
20
  `
package/x/components/copy/component.js.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"component.js","sourceRoot":"","sources":["../../../s/components/copy/component.ts"],"names":[],"mappings":"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"}
package/x/{ui → components}/copy/style.css.js RENAMED
@@ -8,7 +8,7 @@ button {
8
8
  }
9
9
 
10
10
  button {
11
- opacity: 0.5;
11
+ opacity: var(--inactive-opacity);
12
12
  cursor: pointer;
13
13
  cursor: copy;
14
14
 
package/x/components/copy/style.css.js.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"style.css.js","sourceRoot":"","sources":["../../../s/components/copy/style.css.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,GAAG,EAAC,MAAM,KAAK,CAAA;AACvB,eAAe,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA0CjB,CAAA"}