@e280/shiny 0.1.0-2 → 0.1.0-21

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 (247) hide show
  1. package/README.md +51 -63
  2. package/package.json +19 -26
  3. package/s/_archive/components/button/component.ts +30 -0
  4. package/s/_archive/components/button/showcase.ts +119 -0
  5. package/s/_archive/components/button/style.css.ts +63 -0
  6. package/s/{ui → _archive/components}/copy/component.ts +12 -5
  7. package/s/_archive/components/copy/showcase.ts +51 -0
  8. package/s/{ui → _archive/components}/copy/style.css.ts +6 -6
  9. package/s/_archive/components/drawer/component.ts +90 -0
  10. package/s/_archive/components/drawer/control.ts +31 -0
  11. package/s/_archive/components/drawer/showcase.ts +111 -0
  12. package/s/_archive/components/drawer/style.css.ts +127 -0
  13. package/s/{ui → _archive/components}/example/component.ts +6 -4
  14. package/s/_archive/components/example/showcase.ts +32 -0
  15. package/s/{ui → _archive/components}/example/style.css.ts +2 -2
  16. package/s/_archive/components/foundation.css.ts +15 -0
  17. package/s/{ui → _archive/components}/framework.ts +1 -2
  18. package/s/_archive/components/raw-components.ts +15 -0
  19. package/s/_archive/components/tabs/component.ts +70 -0
  20. package/s/_archive/components/tabs/control.ts +31 -0
  21. package/s/_archive/components/tabs/showcase.ts +171 -0
  22. package/s/_archive/components/tabs/style.css.ts +46 -0
  23. package/s/_archive/demo/demo.bundle.ts +47 -0
  24. package/s/{demo → _archive/demo}/demo.css +1 -0
  25. package/s/_archive/demo/lipsum.ts +6 -0
  26. package/s/_archive/demo/utils/lipsum.ts +19 -0
  27. package/s/_archive/demo/views/exhibit/style.css.ts +85 -0
  28. package/s/_archive/demo/views/exhibit/view.ts +61 -0
  29. package/s/_archive/demo/views/showcase/style.css.ts +53 -0
  30. package/s/_archive/demo/views/showcase/view.ts +54 -0
  31. package/s/_archive/demo/viewsets.ts +12 -0
  32. package/s/_archive/index.html.ts +34 -0
  33. package/s/_archive/index.ts +19 -0
  34. package/s/_archive/install/aura.bundle.ts +9 -0
  35. package/s/_archive/install/plain.bundle.ts +9 -0
  36. package/s/{shiny.ts → _archive/shiny.ts} +2 -2
  37. package/s/_archive/themes/aura.css.ts +86 -0
  38. package/s/_archive/themes/index.barrel.ts +4 -0
  39. package/s/{themes → _archive/themes}/index.ts +1 -0
  40. package/s/_archive/themes/infra/css-vars.ts +46 -0
  41. package/s/_archive/themes/plain.css.ts +11 -0
  42. package/s/_archive/utils/states.ts +15 -0
  43. package/s/demo/globals.d.ts +3 -0
  44. package/s/demo/main.bundle.ts +16 -0
  45. package/s/demo/main.css +71 -0
  46. package/s/demo/parts/exhibit.ts +15 -0
  47. package/s/demo/utils/lipsum.ts +19 -0
  48. package/s/demo/views/codebox/style.css.ts +45 -0
  49. package/s/demo/views/codebox/use-prism-styles.ts +13 -0
  50. package/s/demo/views/codebox/view.ts +39 -0
  51. package/s/demo/views/showcase/style.css.ts +80 -0
  52. package/s/demo/views/showcase/view.ts +50 -0
  53. package/s/demo/views/stylebox/view.ts +21 -0
  54. package/s/icons/tabler/menu-2.svg.ts +4 -0
  55. package/s/icons/tabler/x.svg.ts +4 -0
  56. package/s/index.html.ts +42 -32
  57. package/s/index.ts +6 -7
  58. package/s/test.ts +5 -0
  59. package/s/theme/parts/core.ts +34 -0
  60. package/s/theme/parts/reset.ts +20 -0
  61. package/s/theme/parts/vars.ts +41 -0
  62. package/s/theme/theme-string.ts +15 -0
  63. package/s/theme/theme.css.ts +7 -0
  64. package/s/utils/states.ts +15 -0
  65. package/s/views/button/showcase.ts +43 -0
  66. package/s/views/button/style.css.ts +110 -0
  67. package/s/views/button/view.ts +32 -0
  68. package/s/views/copy/parts/copy-status.ts +3 -0
  69. package/s/views/copy/parts/determine-base-status.ts +7 -0
  70. package/s/views/copy/parts/use-copier.ts +20 -0
  71. package/s/views/copy/showcase.ts +54 -0
  72. package/s/views/copy/style.css.ts +51 -0
  73. package/s/views/copy/view.ts +60 -0
  74. package/s/views/drawer/control.ts +31 -0
  75. package/s/views/drawer/showcase.ts +83 -0
  76. package/s/views/drawer/style.css.ts +128 -0
  77. package/s/views/drawer/view.ts +76 -0
  78. package/s/views/tabs/control.ts +31 -0
  79. package/s/views/tabs/showcase.ts +89 -0
  80. package/s/views/tabs/style.css.ts +46 -0
  81. package/s/views/tabs/view.ts +66 -0
  82. package/x/{demo → _archive/demo}/demo.css +1 -0
  83. package/x/demo/main.bundle.js +13 -0
  84. package/x/demo/main.bundle.js.map +1 -0
  85. package/x/demo/main.bundle.min.js +811 -0
  86. package/x/demo/main.bundle.min.js.map +7 -0
  87. package/x/demo/main.css +71 -0
  88. package/x/demo/parts/exhibit.d.ts +11 -0
  89. package/x/demo/parts/exhibit.js +2 -0
  90. package/x/demo/parts/exhibit.js.map +1 -0
  91. package/x/demo/utils/lipsum.d.ts +2 -0
  92. package/x/demo/utils/lipsum.js +11 -0
  93. package/x/demo/utils/lipsum.js.map +1 -0
  94. package/x/demo/views/codebox/style.css.js +44 -0
  95. package/x/demo/views/codebox/style.css.js.map +1 -0
  96. package/x/demo/views/codebox/use-prism-styles.d.ts +1 -0
  97. package/x/demo/views/codebox/use-prism-styles.js +12 -0
  98. package/x/demo/views/codebox/use-prism-styles.js.map +1 -0
  99. package/x/demo/views/codebox/view.d.ts +2 -0
  100. package/x/demo/views/codebox/view.js +29 -0
  101. package/x/demo/views/codebox/view.js.map +1 -0
  102. package/x/demo/views/showcase/style.css.js +79 -0
  103. package/x/demo/views/showcase/style.css.js.map +1 -0
  104. package/x/demo/views/showcase/view.d.ts +2 -0
  105. package/x/demo/views/showcase/view.js +44 -0
  106. package/x/demo/views/showcase/view.js.map +1 -0
  107. package/x/demo/views/stylebox/view.d.ts +3 -0
  108. package/x/demo/views/stylebox/view.js +13 -0
  109. package/x/demo/views/stylebox/view.js.map +1 -0
  110. package/x/icons/tabler/menu-2.svg.d.ts +2 -0
  111. package/x/icons/tabler/menu-2.svg.js +3 -0
  112. package/x/icons/tabler/menu-2.svg.js.map +1 -0
  113. package/x/icons/tabler/x.svg.d.ts +2 -0
  114. package/x/icons/tabler/x.svg.js +3 -0
  115. package/x/icons/tabler/x.svg.js.map +1 -0
  116. package/x/index.d.ts +6 -5
  117. package/x/index.html +212 -61
  118. package/x/index.html.js +40 -29
  119. package/x/index.html.js.map +1 -1
  120. package/x/index.js +6 -5
  121. package/x/index.js.map +1 -1
  122. package/x/test.js +3 -0
  123. package/x/test.js.map +1 -0
  124. package/x/theme/parts/core.d.ts +1 -0
  125. package/x/theme/parts/core.js +33 -0
  126. package/x/theme/parts/core.js.map +1 -0
  127. package/x/theme/parts/reset.d.ts +1 -0
  128. package/x/theme/parts/reset.js +19 -0
  129. package/x/theme/parts/reset.js.map +1 -0
  130. package/x/theme/parts/vars.d.ts +1 -0
  131. package/x/theme/parts/vars.js +34 -0
  132. package/x/theme/parts/vars.js.map +1 -0
  133. package/x/theme/theme-string.d.ts +1 -0
  134. package/x/theme/theme-string.js +14 -0
  135. package/x/theme/theme-string.js.map +1 -0
  136. package/x/theme/theme.css.d.ts +1 -0
  137. package/x/theme/theme.css.js +4 -0
  138. package/x/theme/theme.css.js.map +1 -0
  139. package/x/utils/states.d.ts +5 -0
  140. package/x/utils/states.js +13 -0
  141. package/x/utils/states.js.map +1 -0
  142. package/x/views/button/showcase.d.ts +1 -0
  143. package/x/views/button/showcase.js +41 -0
  144. package/x/views/button/showcase.js.map +1 -0
  145. package/x/views/button/style.css.js +109 -0
  146. package/x/views/button/style.css.js.map +1 -0
  147. package/x/views/button/view.d.ts +5 -0
  148. package/x/views/button/view.js +23 -0
  149. package/x/views/button/view.js.map +1 -0
  150. package/x/views/copy/parts/copy-status.d.ts +1 -0
  151. package/x/views/copy/parts/copy-status.js +2 -0
  152. package/x/views/copy/parts/copy-status.js.map +1 -0
  153. package/x/views/copy/parts/determine-base-status.d.ts +1 -0
  154. package/x/views/copy/parts/determine-base-status.js +6 -0
  155. package/x/views/copy/parts/determine-base-status.js.map +1 -0
  156. package/x/views/copy/parts/use-copier.d.ts +6 -0
  157. package/x/views/copy/parts/use-copier.js +13 -0
  158. package/x/views/copy/parts/use-copier.js.map +1 -0
  159. package/x/views/copy/showcase.d.ts +1 -0
  160. package/x/views/copy/showcase.js +51 -0
  161. package/x/views/copy/showcase.js.map +1 -0
  162. package/x/views/copy/style.css.d.ts +2 -0
  163. package/x/{ui → views}/copy/style.css.js +14 -9
  164. package/x/views/copy/style.css.js.map +1 -0
  165. package/x/views/copy/view.d.ts +4 -0
  166. package/x/views/copy/view.js +49 -0
  167. package/x/views/copy/view.js.map +1 -0
  168. package/x/views/drawer/control.d.ts +9 -0
  169. package/x/views/drawer/control.js +24 -0
  170. package/x/views/drawer/control.js.map +1 -0
  171. package/x/views/drawer/showcase.d.ts +1 -0
  172. package/x/views/drawer/showcase.js +75 -0
  173. package/x/views/drawer/showcase.js.map +1 -0
  174. package/x/views/drawer/style.css.d.ts +2 -0
  175. package/x/views/drawer/style.css.js +127 -0
  176. package/x/views/drawer/style.css.js.map +1 -0
  177. package/x/views/drawer/view.d.ts +6 -0
  178. package/x/views/drawer/view.js +60 -0
  179. package/x/views/drawer/view.js.map +1 -0
  180. package/x/views/tabs/control.d.ts +9 -0
  181. package/x/views/tabs/control.js +24 -0
  182. package/x/views/tabs/control.js.map +1 -0
  183. package/x/views/tabs/showcase.d.ts +1 -0
  184. package/x/views/tabs/showcase.js +86 -0
  185. package/x/views/tabs/showcase.js.map +1 -0
  186. package/x/views/tabs/style.css.d.ts +2 -0
  187. package/x/views/tabs/style.css.js +45 -0
  188. package/x/views/tabs/style.css.js.map +1 -0
  189. package/x/views/tabs/view.d.ts +5 -0
  190. package/x/views/tabs/view.js +52 -0
  191. package/x/views/tabs/view.js.map +1 -0
  192. package/s/demo/demo.bundle.ts +0 -42
  193. package/s/demo/views/demonstration/style.css.ts +0 -108
  194. package/s/demo/views/demonstration/view.ts +0 -49
  195. package/s/install.bundle.ts +0 -9
  196. package/s/themes/basic.css.ts +0 -18
  197. package/s/themes/index.barrel.ts +0 -3
  198. package/s/ui/raw-components.ts +0 -9
  199. package/x/demo/demo.bundle.js +0 -37
  200. package/x/demo/demo.bundle.js.map +0 -1
  201. package/x/demo/demo.bundle.min.js +0 -277
  202. package/x/demo/demo.bundle.min.js.map +0 -7
  203. package/x/demo/views/demonstration/style.css.js +0 -107
  204. package/x/demo/views/demonstration/style.css.js.map +0 -1
  205. package/x/demo/views/demonstration/view.d.ts +0 -10
  206. package/x/demo/views/demonstration/view.js +0 -36
  207. package/x/demo/views/demonstration/view.js.map +0 -1
  208. package/x/install.bundle.js +0 -5
  209. package/x/install.bundle.js.map +0 -1
  210. package/x/install.bundle.min.js +0 -135
  211. package/x/install.bundle.min.js.map +0 -7
  212. package/x/shiny.d.ts +0 -14
  213. package/x/shiny.js +0 -8
  214. package/x/shiny.js.map +0 -1
  215. package/x/tests.test.d.ts +0 -1
  216. package/x/tests.test.js +0 -3
  217. package/x/tests.test.js.map +0 -1
  218. package/x/themes/basic.css.d.ts +0 -1
  219. package/x/themes/basic.css.js +0 -17
  220. package/x/themes/basic.css.js.map +0 -1
  221. package/x/themes/index.barrel.d.ts +0 -1
  222. package/x/themes/index.barrel.js +0 -2
  223. package/x/themes/index.barrel.js.map +0 -1
  224. package/x/themes/index.d.ts +0 -1
  225. package/x/themes/index.js +0 -2
  226. package/x/themes/index.js.map +0 -1
  227. package/x/ui/copy/component.d.ts +0 -372
  228. package/x/ui/copy/component.js +0 -56
  229. package/x/ui/copy/component.js.map +0 -1
  230. package/x/ui/copy/style.css.js.map +0 -1
  231. package/x/ui/example/component.d.ts +0 -371
  232. package/x/ui/example/component.js +0 -20
  233. package/x/ui/example/component.js.map +0 -1
  234. package/x/ui/example/style.css.js +0 -10
  235. package/x/ui/example/style.css.js.map +0 -1
  236. package/x/ui/framework.d.ts +0 -8
  237. package/x/ui/framework.js +0 -6
  238. package/x/ui/framework.js.map +0 -1
  239. package/x/ui/raw-components.d.ts +0 -6
  240. package/x/ui/raw-components.js +0 -7
  241. package/x/ui/raw-components.js.map +0 -1
  242. /package/s/{tests.test.ts → _archive/tests.test.ts} +0 -0
  243. /package/x/demo/{demo.bundle.d.ts → main.bundle.d.ts} +0 -0
  244. /package/x/demo/views/{demonstration → codebox}/style.css.d.ts +0 -0
  245. /package/x/{ui/copy → demo/views/showcase}/style.css.d.ts +0 -0
  246. /package/x/{install.bundle.d.ts → test.d.ts} +0 -0
  247. /package/x/{ui/example → views/button}/style.css.d.ts +0 -0
package/README.md CHANGED
@@ -1,92 +1,80 @@
1
1
 
2
2
  ![](https://i.imgur.com/F1J78wH.png)
3
3
 
4
- # ✨shiny
5
- > *web ui components*
4
+ # ✨shiny✨
5
+ > *sly web ui library*
6
6
 
7
- - 💁 ***see all the components at https://shiny.e280.org/*** 👈
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
+ - 🎨 customizable via css vars and shadow parts
10
+ - 🧩 using [tabler icons](https://github.com/tabler/tabler-icons)
10
11
  - 🧑‍💻 a project by https://e280.org/
11
12
 
12
13
 
13
14
 
14
15
  <br/><br/>
15
16
 
16
- ## ✨ instant html installation
17
- - put this in your html `<head>`
18
- ```html
19
- <script async src="https://shiny.e280.org/install.bundle.min.js"></script>
20
- ```
21
- - you're ready to put shiny components in your html `<body>`
22
- ```html
23
- <shiny-copy text="hello world"></shiny-copy>
24
- ```
25
- - go pick your favorites at https://shiny.e280.org/
26
-
27
-
28
-
29
- <br/><br/>
30
-
31
- ## ✨ web app installation
32
- - install shiny and friends
33
- ```sh
17
+ ## 🍭 shiny install and setup
18
+ - install shiny and friends into your project
19
+ ```bash
34
20
  npm install @e280/shiny @e280/sly lit
35
21
  ```
36
- - import stuff
37
- ```ts
22
+ - use some shiny views in your lit html
23
+ ```js
24
+ import {html} from "lit"
38
25
  import {dom} from "@e280/sly"
39
- import {shiny, themes} from "@e280/shiny"
40
- ```
41
- - prepare the components/views and choose a theme
42
- ```ts
43
- const {components, views} = shiny({theme: themes.basic})
44
- ```
45
- - (optional) register the components
46
- ```ts
47
- dom.register(components)
26
+ import {ShinyButton, ShinyCopy} from "@e280/shiny"
27
+
28
+ dom.render(dom(".demo"), html`
29
+ <div>
30
+ example text
31
+ ${ShinyButton("e280")}
32
+ ${ShinyCopy("hello world")}
33
+ </div>
34
+ `)
48
35
  ```
36
+ - go shopping for more views at https://shiny.e280.org/
49
37
 
50
38
 
51
39
 
52
40
  <br/><br/>
53
41
 
54
- ## ✨ views are for the cool kids
55
- - hey, remember those `views` you got from the install snippet?
56
- ```ts
57
- const {components, views} = shiny({theme: themes.basic})
58
- ```
59
- - well you can yoink out a view you wanna use
60
- ```ts
61
- const {ShinyCopy} = views
62
- ```
63
- - then you can render it directly in your lit templates
64
- ```ts
65
- import {html} from "lit"
66
- import {dom, view} from "@e280/sly"
67
-
68
- dom.register({
69
- MyComponent: view.component(use => html`
70
- <div>
71
- ${ShinyCopy("hello world")}
72
- </div>
73
- `)
74
- })
42
+ ## 💅 shiny css customization
43
+ - put this in your `<head>`
44
+ ```html
45
+ <style>
46
+ html {
47
+ --shiny-bg: #111;
48
+ --shiny-alpha: #def;
49
+
50
+ --shiny-rounded: 0.5em;
51
+ --shiny-padding: 0.5em;
52
+
53
+ --shiny-prime: #d068ff;
54
+ --shiny-code: #3f1;
55
+ --shiny-link: cyan;
56
+ --shiny-selection: white;
57
+ --shiny-selection-bg: #f70;
58
+
59
+ --shiny-lame: #8888;
60
+ --shiny-angry: #f50;
61
+ --shiny-zesty: #cf0;
62
+ --shiny-happy: #0fa;
63
+ --shiny-calm: #0af;
64
+ --shiny-sad: #74f;
65
+ --shiny-quirky: #f49;
66
+
67
+ --shiny-inactive-opacity: 0.5;
68
+ --shiny-anim-duration: 150ms;
69
+ }
70
+ </style>
75
71
  ```
76
- - you get nice typescript typings
77
- - no juggling annoying web component dom registrations
78
- - you're just using the shiny views directly
79
- - learn more about [🦝sly](https://github.com/e280/sly) and [🔥lit](https://lit.dev/)
80
72
 
81
73
 
82
74
 
83
75
  <br/><br/>
84
76
 
85
- ## ✨shiny is by e280
77
+ ## 🧑‍💻 by e280
86
78
  reward us with github stars
87
79
  build with us at https://e280.org/ if you're good at dev
88
80
 
89
-
90
-
91
- <br/><br/>
92
-
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@e280/shiny",
3
- "version": "0.1.0-2",
4
- "description": "✨ web ui components",
3
+ "version": "0.1.0-21",
4
+ "description": "✨ web ui library",
5
5
  "license": "MIT",
6
6
  "type": "module",
7
7
  "main": "./x/index.js",
@@ -13,34 +13,29 @@
13
13
  "x",
14
14
  "s"
15
15
  ],
16
+ "scripts": {
17
+ "build": "rm -rf x && mkdir x && tsc && scute -v && ln -s \"$(realpath s)\" x/s && ln -s \"$(realpath assets)\" x/assets",
18
+ "dev": "octo 'tsc -w' 'scute -vw' 'node --watch x/test.js' 'hottie x --debounce 300'",
19
+ "test": "node x/test.js",
20
+ "count": "find s -path '*/_archive' -prune -o -name '*.ts' -exec wc -l {} +"
21
+ },
16
22
  "peerDependencies": {
17
- "@e280/sly": "^0.2.0-22",
18
- "lit": "^3.3.1"
23
+ "@e280/sly": "^0.3.7",
24
+ "lit": "^3.3.2"
19
25
  },
20
26
  "dependencies": {
21
- "@e280/strata": "^0.2.0-14",
22
- "@e280/stz": "^0.2.7"
27
+ "@e280/strata": "^0.3.3",
28
+ "@e280/stz": "^0.2.32",
29
+ "prismjs": "^1.30.0"
23
30
  },
24
31
  "devDependencies": {
25
- "@e280/science": "^0.1.2",
26
- "@e280/scute": "^0.1.0",
32
+ "@e280/hottie": "^0.1.0",
33
+ "@e280/octo": "^0.1.0",
34
+ "@e280/science": "^0.1.10",
35
+ "@e280/scute": "^0.3.2",
36
+ "@types/prismjs": "^1.26.6",
27
37
  "http-server": "^14.1.1",
28
- "npm-run-all": "^4.1.5",
29
- "typescript": "^5.9.2"
30
- },
31
- "scripts": {
32
- "build": "run-s _clean _ln _tsc _scute",
33
- "start": "octo 'scute -vw' 'tsc -w' 'node --watch x/tests.test.js' 'http-server x'",
34
- "count": "find s -path '*/_archive' -prune -o -name '*.ts' -exec wc -l {} +",
35
- "test": "node x/tests.test.js",
36
- "test-inspect": "node inspect x/tests.test.js",
37
- "_clean": "rm -rf x && mkdir x",
38
- "_tsc": "tsc",
39
- "_scute": "scute -v",
40
- "_ln": "run-s _ln:s _ln:assets",
41
- "_ln:s": "ln -s \"$(realpath s)\" x/s",
42
- "_ln:assets": "ln -s \"$(realpath assets)\" x/assets",
43
- "_lnx:stz": "rm -rf node_modules/@e280/stz && ln -s \"$(realpath ../stz)\" node_modules/@e280/stz"
38
+ "typescript": "^6.0.3"
44
39
  },
45
40
  "author": "Chase Moskal <chasemoskal@gmail.com>",
46
41
  "homepage": "https://github.com/e280/shiny#readme",
@@ -54,8 +49,6 @@
54
49
  "keywords": [
55
50
  "web ui",
56
51
  "ui library",
57
- "components",
58
- "web components",
59
52
  "lit",
60
53
  "sly"
61
54
  ]
package/s/_archive/components/button/component.ts ADDED
@@ -0,0 +1,30 @@
1
+
2
+ import {html} from "lit"
3
+ import {Content, view} from "@e280/sly"
4
+ import styleCss from "./style.css.js"
5
+ import {foundationCss} from "../foundation.css.js"
6
+ import {ShinyContext, ShinyElement} from "../framework.js"
7
+
8
+ export class ShinyButton extends (
9
+ view(use => (context: ShinyContext, content?: Content) => {
10
+ use.name("shiny-button")
11
+ use.styles(foundationCss, context.theme, styleCss)
12
+
13
+ const attrs = use.attrs.spec({
14
+ disabled: Boolean,
15
+ hidden: Boolean,
16
+ })
17
+
18
+ return html`
19
+ <button
20
+ part=button
21
+ ?disabled="${attrs.disabled}"
22
+ ?hidden="${attrs.hidden}">
23
+ <slot>${content}</slot>
24
+ </button>
25
+ `
26
+ })
27
+ .component(ShinyElement)
28
+ .props(el => [el.context] as const)
29
+ ) {}
30
+
package/s/_archive/components/button/showcase.ts ADDED
@@ -0,0 +1,119 @@
1
+
2
+ import {css, html} from "lit"
3
+ import {Showcase} from "../../demo/views/showcase/view.js"
4
+
5
+ const cssSnippet = `
6
+ [view="shiny-button"] {
7
+ --padding: 0.3em;
8
+ font-size: 1em;
9
+ color: currentColor;
10
+ background: transparent;
11
+ }
12
+ `
13
+
14
+ export const buttonShowcase = () => Showcase({
15
+ name: "button",
16
+ style: css`
17
+ .box {
18
+ > * { font-size: 1.5em; }
19
+ }
20
+ `,
21
+ exhibits: [
22
+ {
23
+ label: "basic",
24
+ explain: html`<p>clicky-clacky pressy button.</p>`,
25
+ snippets: [
26
+ {label: "html", code: `<shiny-button>button</shiny-button>`},
27
+ {label: "view", code: `ShinyButton("button")`},
28
+ {label: "css", code: cssSnippet},
29
+ ],
30
+ style: css``,
31
+ presentation: views => html`
32
+ ${views.ShinyButton.props().children("button").render()}
33
+ `,
34
+ },
35
+ {
36
+ label: "gradient",
37
+ explain: html`<p>added <code>gradient</code> attribute.</p>`,
38
+ snippets: [
39
+ {label: "html", code: `<shiny-button gradient>button</shiny-button>`},
40
+ {label: "view", code: `
41
+ ShinyButton
42
+ .props("button")
43
+ .attr("gradient")
44
+ .render()
45
+ `},
46
+ {label: "css", code: cssSnippet},
47
+ ],
48
+ style: css``,
49
+ presentation: views => html`
50
+ ${views.ShinyButton.props().attr("gradient").children("button").render()}
51
+ `,
52
+ },
53
+ {
54
+ label: "catalog",
55
+ explain: html`<p>clicky-clacky pressy buttons.</p>`,
56
+ snippets: [
57
+ {label: "html", code: `
58
+ <shiny-button calm gradient>calm</shiny-button>
59
+ <shiny-button angry gradient>angry</shiny-button>
60
+ <shiny-button happy gradient>happy</shiny-button>
61
+ <shiny-button zesty gradient>zesty</shiny-button>
62
+ <shiny-button sad gradient>sad</shiny-button>
63
+ <shiny-button quirky gradient>quirky</shiny-button>
64
+ <shiny-button plain gradient>plain</shiny-button>
65
+ `},
66
+ {label: "view", code: `
67
+ [
68
+ ShinyButton.props().attr("calm").attr("gradient").children("calm").render(),
69
+ ShinyButton.props().attr("angry").attr("gradient").children("angry").render(),
70
+ ShinyButton.props().attr("happy").attr("gradient").children("happy").render(),
71
+ ShinyButton.props().attr("zesty").attr("gradient").children("zesty").render(),
72
+ ShinyButton.props().attr("sad").attr("gradient").children("sad").render(),
73
+ ShinyButton.props().attr("quirky").attr("gradient").children("quirky").render(),
74
+ ShinyButton.props().attr("plain").children("plain").render(),
75
+ ]
76
+ `},
77
+ {label: "css", code: cssSnippet},
78
+ ],
79
+ style: css``,
80
+ presentation: views => [
81
+ views.ShinyButton.props()
82
+ .attr("calm")
83
+ .attr("gradient")
84
+ .children("calm")
85
+ .render(),
86
+ views.ShinyButton.props()
87
+ .attr("angry")
88
+ .attr("gradient")
89
+ .children("angry")
90
+ .render(),
91
+ views.ShinyButton.props()
92
+ .attr("happy")
93
+ .attr("gradient")
94
+ .children("happy")
95
+ .render(),
96
+ views.ShinyButton.props()
97
+ .attr("zesty")
98
+ .attr("gradient")
99
+ .children("zesty")
100
+ .render(),
101
+ views.ShinyButton.props()
102
+ .attr("sad")
103
+ .attr("gradient")
104
+ .children("sad")
105
+ .render(),
106
+ views.ShinyButton.props()
107
+ .attr("quirky")
108
+ .attr("gradient")
109
+ .children("quirky")
110
+ .render(),
111
+ views.ShinyButton.props()
112
+ .attr("plain")
113
+ .children("plain")
114
+ .render(),
115
+ ],
116
+ },
117
+ ],
118
+ })
119
+
package/s/_archive/components/button/style.css.ts ADDED
@@ -0,0 +1,63 @@
1
+
2
+ import {css} from "lit"
3
+ export default css`@layer view {
4
+
5
+ :host {
6
+ opacity: 0.8;
7
+ display: inline-flex;
8
+ width: max-content;
9
+ height: max-content;
10
+
11
+ --padding: 0.3em;
12
+ border-radius: 0.2em;
13
+ border: 0.1em solid currentColor;
14
+
15
+ cursor: pointer;
16
+ background: transparent;
17
+ user-select: none;
18
+ }
19
+
20
+ :host(:not([disabled]):is(:hover, :focus-visible)) { opacity: 1; }
21
+ :host(:not([disabled]):active) { opacity: 0.6; }
22
+
23
+ :host([disabled]) {
24
+ cursor: default;
25
+ color: var(--lame);
26
+ }
27
+
28
+ :host([hidden]) {
29
+ display: none !important;
30
+ }
31
+
32
+ :host([lame]) { color: var(--lame); }
33
+ :host([angry]) { color: var(--angry); }
34
+ :host([zesty]) { color: var(--zesty); }
35
+ :host([happy]) { color: var(--happy); }
36
+ :host([calm]) { color: var(--calm); }
37
+ :host([sad]) { color: var(--sad); }
38
+ :host([quirky]) { color: var(--quirky); }
39
+
40
+ button {
41
+ background: transparent;
42
+ border: none;
43
+
44
+ font: inherit;
45
+ color: inherit;
46
+ cursor: inherit;
47
+ text-shadow: inherit;
48
+
49
+ display: inline-flex;
50
+ justify-content: center;
51
+ align-items: center;
52
+
53
+ width: 100%;
54
+ height: 100%;
55
+ padding: var(--padding);
56
+ }
57
+
58
+ slot {
59
+ display: contents;
60
+ }
61
+
62
+ }`
63
+
package/s/{ui → _archive/components}/copy/component.ts RENAMED
@@ -1,9 +1,10 @@
1
1
 
2
+ import {html} from "lit"
2
3
  import {debounce} from "@e280/stz"
3
4
  import {dom, view} from "@e280/sly"
4
5
 
5
- import {html} from "lit"
6
6
  import styleCss from "./style.css.js"
7
+ import {foundationCss} from "../foundation.css.js"
7
8
  import {ShinyContext, ShinyElement} from "../framework.js"
8
9
  import clipboardSvg from "../../icons/tabler/clipboard.svg.js"
9
10
  import clipboardXFilledSvg from "../../icons/tabler/clipboard-x-filled.svg.js"
@@ -12,7 +13,7 @@ import clipboardCheckFilledSvg from "../../icons/tabler/clipboard-check-filled.s
12
13
  export class ShinyCopy extends (
13
14
  view(use => (context: ShinyContext, text: string | undefined, ms = 1000) => {
14
15
  use.name("shiny-copy")
15
- use.styles(context.theme, styleCss)
16
+ use.styles(foundationCss, context.theme, styleCss)
16
17
 
17
18
  type Status = "neutral" | "good" | "bad" | "invalid"
18
19
 
@@ -32,6 +33,8 @@ export class ShinyCopy extends (
32
33
  async function click() {
33
34
  if (text === undefined) return
34
35
  try {
36
+ if (use.attrs.booleans.fail)
37
+ throw new Error("copy failed on purpose for testing purposes")
35
38
  await navigator.clipboard.writeText(text)
36
39
  await statusFlash("good")
37
40
  }
@@ -46,7 +49,7 @@ export class ShinyCopy extends (
46
49
  case "invalid": return clipboardSvg
47
50
  case "good": return clipboardCheckFilledSvg
48
51
  case "bad": return clipboardXFilledSvg
49
- default: throw new Error(`invalid copy status`)
52
+ default: throw new Error(`unknown copy status`)
50
53
  }})()
51
54
 
52
55
  return html`
@@ -56,11 +59,15 @@ export class ShinyCopy extends (
56
59
  `
57
60
  })
58
61
  .component(class extends ShinyElement {
59
- attrs = dom.attrs(this).spec({
62
+ #attrs = dom.attrs(this).spec({
60
63
  text: String,
61
64
  ms: Number,
62
65
  })
66
+ get text() { return this.#attrs.text }
67
+ set text(v) { this.#attrs.text = v }
68
+ get ms() { return this.#attrs.ms }
69
+ set ms(v) { this.#attrs.ms = v }
63
70
  })
64
- .props(el => [el.context, el.attrs.text, el.attrs.ms])
71
+ .props(el => [el.context, el.text, el.ms])
65
72
  ) {}
66
73
 
package/s/_archive/components/copy/showcase.ts ADDED
@@ -0,0 +1,51 @@
1
+
2
+ import {css, html} from "lit"
3
+ import {Showcase} from "../../demo/views/showcase/view.js"
4
+
5
+ const cssSnippet = `
6
+ [view="shiny-copy"] {
7
+ font-size: 1em;
8
+ --happy: #0fa;
9
+ --angry: #f50;
10
+ --lame: #8888;
11
+ --inactive-opacity: 0.5;
12
+ }
13
+ `
14
+
15
+ export const copyShowcase = () => Showcase({
16
+ name: "copy",
17
+ style: css`
18
+ .box {
19
+ > * { font-size: 4em; }
20
+ }
21
+ `,
22
+ exhibits: [
23
+ {
24
+ label: "succeed",
25
+ explain: html`<p>click-to-copy text button.</p>`,
26
+ snippets: [
27
+ {label: "html", code: `<shiny-copy text="hello world"></shiny-button>`},
28
+ {label: "view", code: `ShinyCopy("hello world")`},
29
+ {label: "css", code: cssSnippet},
30
+ ],
31
+ style: css``,
32
+ presentation: views => html`
33
+ ${views.ShinyCopy("hello world")}
34
+ `,
35
+ },
36
+ {
37
+ label: "fail",
38
+ explain: html`<p>copy text button, deliberately fails so you can see.</p>`,
39
+ snippets: [
40
+ {label: "html", code: `<shiny-copy fail></shiny-button>`},
41
+ {label: "view", code: `ShinyCopy.props("").attr("fail").render()`},
42
+ {label: "css", code: cssSnippet},
43
+ ],
44
+ style: css``,
45
+ presentation: views => html`
46
+ ${views.ShinyCopy.props("").attr("fail").render()}
47
+ `,
48
+ },
49
+ ],
50
+ })
51
+
package/s/{ui → _archive/components}/copy/style.css.ts RENAMED
@@ -1,6 +1,6 @@
1
1
 
2
2
  import {css} from "lit"
3
- export default css`
3
+ export default css`@layer view {
4
4
 
5
5
  button {
6
6
  background: transparent;
@@ -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
 
@@ -22,18 +22,18 @@ button {
22
22
  }
23
23
 
24
24
  [data-status="invalid"] {
25
- color: var(--invalid);
25
+ color: var(--lame);
26
26
  }
27
27
 
28
28
  [data-status="good"] {
29
29
  opacity: 1;
30
- color: var(--good);
30
+ color: var(--happy);
31
31
  filter: drop-shadow(0 0 0.3em color-mix(in oklab, transparent, currentColor 50%));
32
32
  }
33
33
 
34
34
  [data-status="bad"] {
35
35
  opacity: 1;
36
- color: var(--bad);
36
+ color: var(--angry);
37
37
  filter: drop-shadow(0 0 0.3em color-mix(in oklab, transparent, currentColor 50%));
38
38
  }
39
39
 
@@ -42,5 +42,5 @@ svg {
42
42
  height: 1em;
43
43
  }
44
44
 
45
- `
45
+ }`
46
46
 
package/s/_archive/components/drawer/component.ts ADDED
@@ -0,0 +1,90 @@
1
+
2
+ import {html} from "lit"
3
+ import {dom, view} from "@e280/sly"
4
+
5
+ import styleCss from "./style.css.js"
6
+ import {DrawerControl} from "./control.js"
7
+ import {States} from "../../utils/states.js"
8
+ import xSvg from "../../icons/tabler/x.svg.js"
9
+ import {foundationCss} from "../foundation.css.js"
10
+ import menu2Svg from "../../icons/tabler/menu-2.svg.js"
11
+ import {ShinyContext, ShinyElement} from "../framework.js"
12
+
13
+ export class ShinyDrawer extends (
14
+ view(use => (context: ShinyContext, options: {
15
+ button?: boolean
16
+ side?: "left" | "right"
17
+ control?: DrawerControl
18
+ }) => {
19
+
20
+ use.name("shiny-drawer")
21
+ use.styles(foundationCss, context.theme, styleCss)
22
+ const states = use.once(() => new States(use.element))
23
+
24
+ const button = options.button ?? use.attrs.booleans.button
25
+ const side = options.side ?? (use.attrs.strings.side === "right" ? "right" : "left")
26
+ const control = use.once(() => (options.control ?? new DrawerControl()))
27
+ states.assign(side, control.isOpen ? "opened" : "closed")
28
+
29
+ use.mount(() => dom.events(window, {keydown: (event: KeyboardEvent) => {
30
+ if (event.code === "Escape")
31
+ control.close()
32
+ }}))
33
+
34
+ dom.attrs(use.element).booleans.open = control.isOpen
35
+
36
+ function renderButton() {
37
+ return html`
38
+ <button part=button @click="${control.toggle}">
39
+ ${control.isOpen
40
+ ? html`
41
+ <slot name=button-x>
42
+ ${xSvg}
43
+ </slot>
44
+ `
45
+ : html`
46
+ <slot name=button>
47
+ ${menu2Svg}
48
+ </slot>
49
+ `}
50
+ </button>
51
+ `
52
+ }
53
+
54
+ return html`
55
+ <div class=shell ?data-open="${control.isOpen}" data-side="${side}">
56
+ <slot name=plate ?inert="${control.isOpen}"></slot>
57
+
58
+ <div class=clipper>
59
+ <div part=blanket @click="${control.close}" ?inert="${!control.isOpen}"></div>
60
+
61
+ <div part=tray>
62
+ <slot part=slate ?inert="${!control.isOpen}"></slot>
63
+ ${button ?renderButton() :null}
64
+ </div>
65
+ </div>
66
+ </div>
67
+ `
68
+ })
69
+ .component(class extends ShinyElement {
70
+ #attrs = dom.attrs(this).spec({
71
+ open: Boolean,
72
+ button: Boolean,
73
+ side: String,
74
+ })
75
+
76
+ get button() { return this.#attrs.button }
77
+ set button(v) { this.#attrs.button = v }
78
+
79
+ get side() { return this.#attrs.side === "right" ? "right" : "left" }
80
+ set side(v) { this.#attrs.side = v }
81
+
82
+ control = new DrawerControl(this.#attrs.open)
83
+ get isOpen() { return this.control.isOpen }
84
+ get toggle() { return this.control.toggle }
85
+ get open() { return this.control.open }
86
+ get close() { return this.control.close }
87
+ })
88
+ .props(el => [el.context, {control: el.control}] as const)
89
+ ) {}
90
+