@e280/shiny 0.1.0-14 → 0.1.0-16

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 (277) hide show
  1. package/README.md +34 -80
  2. package/package.json +18 -25
  3. package/s/{components → _archive/components}/drawer/component.ts +2 -2
  4. package/s/{components → _archive/components}/drawer/showcase.ts +13 -0
  5. package/s/_archive/demo/utils/lipsum.ts +19 -0
  6. package/s/{demo → _archive/demo}/views/exhibit/style.css.ts +3 -0
  7. package/s/_archive/demo/views/showcase/style.css.ts +53 -0
  8. package/s/_archive/demo/views/showcase/view.ts +54 -0
  9. package/s/_archive/index.html.ts +34 -0
  10. package/s/_archive/index.ts +19 -0
  11. package/s/_archive/utils/states.ts +15 -0
  12. package/s/demo/main.bundle.ts +16 -0
  13. package/s/demo/main.css +71 -0
  14. package/s/demo/parts/exhibit.ts +15 -0
  15. package/s/demo/utils/lipsum.ts +1 -1
  16. package/s/demo/views/codebox/style.css.ts +43 -0
  17. package/s/demo/views/codebox/use-prism-styles.ts +13 -0
  18. package/s/demo/views/codebox/view.ts +39 -0
  19. package/s/demo/views/showcase/style.css.ts +42 -11
  20. package/s/demo/views/showcase/view.ts +41 -45
  21. package/s/demo/views/stylebox/view.ts +21 -0
  22. package/s/index.html.ts +42 -29
  23. package/s/index.ts +1 -17
  24. package/s/test.ts +5 -0
  25. package/s/theme/parts/core.ts +34 -0
  26. package/s/theme/parts/reset.ts +20 -0
  27. package/s/theme/parts/vars.ts +41 -0
  28. package/s/theme/theme-string.ts +15 -0
  29. package/s/theme/theme.css.ts +7 -0
  30. package/s/views/button/showcase.ts +43 -0
  31. package/s/views/button/style.css.ts +110 -0
  32. package/s/views/button/view.ts +30 -0
  33. package/s/views/copy/parts/copy-status.ts +3 -0
  34. package/s/views/copy/parts/determine-base-status.ts +7 -0
  35. package/s/views/copy/parts/use-copier.ts +20 -0
  36. package/s/views/copy/showcase.ts +54 -0
  37. package/s/views/copy/style.css.ts +46 -0
  38. package/s/views/copy/view.ts +58 -0
  39. package/s/views/drawer/control.ts +31 -0
  40. package/s/views/drawer/showcase.ts +83 -0
  41. package/s/views/drawer/style.css.ts +128 -0
  42. package/s/views/drawer/view.ts +76 -0
  43. package/s/views/tabs/control.ts +31 -0
  44. package/s/views/tabs/showcase.ts +89 -0
  45. package/s/views/tabs/style.css.ts +46 -0
  46. package/s/views/tabs/view.ts +66 -0
  47. package/x/demo/main.bundle.js +13 -0
  48. package/x/demo/main.bundle.js.map +1 -0
  49. package/x/demo/main.bundle.min.js +794 -0
  50. package/x/demo/main.bundle.min.js.map +7 -0
  51. package/x/demo/main.css +71 -0
  52. package/x/demo/parts/exhibit.d.ts +11 -0
  53. package/x/demo/parts/exhibit.js +2 -0
  54. package/x/demo/parts/exhibit.js.map +1 -0
  55. package/x/demo/utils/lipsum.d.ts +1 -1
  56. package/x/demo/utils/lipsum.js +1 -1
  57. package/x/demo/utils/lipsum.js.map +1 -1
  58. package/x/demo/views/codebox/style.css.js +42 -0
  59. package/x/demo/views/codebox/style.css.js.map +1 -0
  60. package/x/demo/views/codebox/use-prism-styles.d.ts +1 -0
  61. package/x/demo/views/codebox/use-prism-styles.js +12 -0
  62. package/x/demo/views/codebox/use-prism-styles.js.map +1 -0
  63. package/x/demo/views/codebox/view.d.ts +2 -0
  64. package/x/demo/views/codebox/view.js +29 -0
  65. package/x/demo/views/codebox/view.js.map +1 -0
  66. package/x/demo/views/showcase/style.css.js +42 -11
  67. package/x/demo/views/showcase/style.css.js.map +1 -1
  68. package/x/demo/views/showcase/view.d.ts +2 -7
  69. package/x/demo/views/showcase/view.js +39 -35
  70. package/x/demo/views/showcase/view.js.map +1 -1
  71. package/x/demo/views/stylebox/view.d.ts +3 -0
  72. package/x/demo/views/stylebox/view.js +13 -0
  73. package/x/demo/views/stylebox/view.js.map +1 -0
  74. package/x/index.d.ts +1 -11
  75. package/x/index.html +212 -62
  76. package/x/index.html.js +40 -26
  77. package/x/index.html.js.map +1 -1
  78. package/x/index.js +1 -11
  79. package/x/index.js.map +1 -1
  80. package/x/test.js +3 -0
  81. package/x/test.js.map +1 -0
  82. package/x/theme/parts/core.d.ts +1 -0
  83. package/x/theme/parts/core.js +33 -0
  84. package/x/theme/parts/core.js.map +1 -0
  85. package/x/theme/parts/reset.d.ts +1 -0
  86. package/x/theme/parts/reset.js +19 -0
  87. package/x/theme/parts/reset.js.map +1 -0
  88. package/x/theme/parts/vars.d.ts +1 -0
  89. package/x/theme/parts/vars.js +34 -0
  90. package/x/theme/parts/vars.js.map +1 -0
  91. package/x/theme/theme-string.d.ts +1 -0
  92. package/x/theme/theme-string.js +14 -0
  93. package/x/theme/theme-string.js.map +1 -0
  94. package/x/theme/theme.css.d.ts +1 -0
  95. package/x/theme/theme.css.js +4 -0
  96. package/x/theme/theme.css.js.map +1 -0
  97. package/x/views/button/showcase.d.ts +1 -0
  98. package/x/views/button/showcase.js +41 -0
  99. package/x/views/button/showcase.js.map +1 -0
  100. package/x/views/button/style.css.js +109 -0
  101. package/x/views/button/style.css.js.map +1 -0
  102. package/x/views/button/view.d.ts +4 -0
  103. package/x/views/button/view.js +22 -0
  104. package/x/views/button/view.js.map +1 -0
  105. package/x/views/copy/parts/copy-status.d.ts +1 -0
  106. package/x/views/copy/parts/copy-status.js +2 -0
  107. package/x/views/copy/parts/copy-status.js.map +1 -0
  108. package/x/views/copy/parts/determine-base-status.d.ts +1 -0
  109. package/x/views/copy/parts/determine-base-status.js +6 -0
  110. package/x/views/copy/parts/determine-base-status.js.map +1 -0
  111. package/x/views/copy/parts/use-copier.d.ts +6 -0
  112. package/x/views/copy/parts/use-copier.js +13 -0
  113. package/x/views/copy/parts/use-copier.js.map +1 -0
  114. package/x/views/copy/showcase.d.ts +1 -0
  115. package/x/views/copy/showcase.js +51 -0
  116. package/x/views/copy/showcase.js.map +1 -0
  117. package/x/views/copy/style.css.js.map +1 -0
  118. package/x/views/copy/view.d.ts +4 -0
  119. package/x/views/copy/view.js +47 -0
  120. package/x/views/copy/view.js.map +1 -0
  121. package/x/{components → views}/drawer/control.d.ts +1 -1
  122. package/x/views/drawer/control.js.map +1 -0
  123. package/x/views/drawer/showcase.d.ts +1 -0
  124. package/x/views/drawer/showcase.js +75 -0
  125. package/x/views/drawer/showcase.js.map +1 -0
  126. package/x/{components → views}/drawer/style.css.js +1 -0
  127. package/x/views/drawer/style.css.js.map +1 -0
  128. package/x/views/drawer/view.d.ts +6 -0
  129. package/x/views/drawer/view.js +60 -0
  130. package/x/views/drawer/view.js.map +1 -0
  131. package/x/{components → views}/tabs/control.d.ts +2 -2
  132. package/x/{components → views}/tabs/control.js +3 -3
  133. package/x/views/tabs/control.js.map +1 -0
  134. package/x/views/tabs/showcase.d.ts +1 -0
  135. package/x/views/tabs/showcase.js +86 -0
  136. package/x/views/tabs/showcase.js.map +1 -0
  137. package/x/{components → views}/tabs/style.css.js +5 -5
  138. package/x/views/tabs/style.css.js.map +1 -0
  139. package/x/views/tabs/view.d.ts +5 -0
  140. package/x/views/tabs/view.js +52 -0
  141. package/x/views/tabs/view.js.map +1 -0
  142. package/x/components/button/component.d.ts +0 -6
  143. package/x/components/button/component.js +0 -25
  144. package/x/components/button/component.js.map +0 -1
  145. package/x/components/button/showcase.d.ts +0 -1
  146. package/x/components/button/showcase.js +0 -116
  147. package/x/components/button/showcase.js.map +0 -1
  148. package/x/components/button/style.css.js +0 -62
  149. package/x/components/button/style.css.js.map +0 -1
  150. package/x/components/copy/component.d.ts +0 -376
  151. package/x/components/copy/component.js +0 -63
  152. package/x/components/copy/component.js.map +0 -1
  153. package/x/components/copy/showcase.d.ts +0 -1
  154. package/x/components/copy/showcase.js +0 -48
  155. package/x/components/copy/showcase.js.map +0 -1
  156. package/x/components/copy/style.css.js.map +0 -1
  157. package/x/components/drawer/component.d.ts +0 -387
  158. package/x/components/drawer/component.js +0 -73
  159. package/x/components/drawer/component.js.map +0 -1
  160. package/x/components/drawer/control.js.map +0 -1
  161. package/x/components/drawer/showcase.d.ts +0 -1
  162. package/x/components/drawer/showcase.js +0 -92
  163. package/x/components/drawer/showcase.js.map +0 -1
  164. package/x/components/drawer/style.css.js.map +0 -1
  165. package/x/components/example/component.d.ts +0 -371
  166. package/x/components/example/component.js +0 -22
  167. package/x/components/example/component.js.map +0 -1
  168. package/x/components/example/showcase.d.ts +0 -1
  169. package/x/components/example/showcase.js +0 -30
  170. package/x/components/example/showcase.js.map +0 -1
  171. package/x/components/example/style.css.js +0 -10
  172. package/x/components/example/style.css.js.map +0 -1
  173. package/x/components/foundation.css.d.ts +0 -1
  174. package/x/components/foundation.css.js +0 -14
  175. package/x/components/foundation.css.js.map +0 -1
  176. package/x/components/framework.d.ts +0 -8
  177. package/x/components/framework.js +0 -5
  178. package/x/components/framework.js.map +0 -1
  179. package/x/components/raw-components.d.ts +0 -12
  180. package/x/components/raw-components.js +0 -13
  181. package/x/components/raw-components.js.map +0 -1
  182. package/x/components/tabs/component.d.ts +0 -374
  183. package/x/components/tabs/component.js +0 -60
  184. package/x/components/tabs/component.js.map +0 -1
  185. package/x/components/tabs/control.js.map +0 -1
  186. package/x/components/tabs/showcase.d.ts +0 -1
  187. package/x/components/tabs/showcase.js +0 -167
  188. package/x/components/tabs/showcase.js.map +0 -1
  189. package/x/components/tabs/style.css.js.map +0 -1
  190. package/x/demo/demo.bundle.js +0 -42
  191. package/x/demo/demo.bundle.js.map +0 -1
  192. package/x/demo/demo.bundle.min.js +0 -877
  193. package/x/demo/demo.bundle.min.js.map +0 -7
  194. package/x/demo/lipsum.d.ts +0 -2
  195. package/x/demo/lipsum.js +0 -4
  196. package/x/demo/lipsum.js.map +0 -1
  197. package/x/demo/views/exhibit/style.css.d.ts +0 -2
  198. package/x/demo/views/exhibit/style.css.js +0 -81
  199. package/x/demo/views/exhibit/style.css.js.map +0 -1
  200. package/x/demo/views/exhibit/view.d.ts +0 -29
  201. package/x/demo/views/exhibit/view.js +0 -40
  202. package/x/demo/views/exhibit/view.js.map +0 -1
  203. package/x/demo/viewsets.d.ts +0 -17
  204. package/x/demo/viewsets.js +0 -9
  205. package/x/demo/viewsets.js.map +0 -1
  206. package/x/install/aura.bundle.js +0 -5
  207. package/x/install/aura.bundle.js.map +0 -1
  208. package/x/install/aura.bundle.min.js +0 -471
  209. package/x/install/aura.bundle.min.js.map +0 -7
  210. package/x/install/plain.bundle.d.ts +0 -1
  211. package/x/install/plain.bundle.js +0 -5
  212. package/x/install/plain.bundle.js.map +0 -1
  213. package/x/install/plain.bundle.min.js +0 -398
  214. package/x/install/plain.bundle.min.js.map +0 -7
  215. package/x/shiny.d.ts +0 -47
  216. package/x/shiny.js +0 -8
  217. package/x/shiny.js.map +0 -1
  218. package/x/tests.test.d.ts +0 -1
  219. package/x/tests.test.js +0 -3
  220. package/x/tests.test.js.map +0 -1
  221. package/x/themes/aura.css.d.ts +0 -1
  222. package/x/themes/aura.css.js +0 -85
  223. package/x/themes/aura.css.js.map +0 -1
  224. package/x/themes/index.barrel.d.ts +0 -2
  225. package/x/themes/index.barrel.js +0 -3
  226. package/x/themes/index.barrel.js.map +0 -1
  227. package/x/themes/index.d.ts +0 -2
  228. package/x/themes/index.js +0 -2
  229. package/x/themes/index.js.map +0 -1
  230. package/x/themes/infra/css-vars.d.ts +0 -15
  231. package/x/themes/infra/css-vars.js +0 -22
  232. package/x/themes/infra/css-vars.js.map +0 -1
  233. package/x/themes/plain.css.d.ts +0 -1
  234. package/x/themes/plain.css.js +0 -10
  235. package/x/themes/plain.css.js.map +0 -1
  236. /package/s/{components → _archive/components}/button/component.ts +0 -0
  237. /package/s/{components → _archive/components}/button/showcase.ts +0 -0
  238. /package/s/{components → _archive/components}/button/style.css.ts +0 -0
  239. /package/s/{components → _archive/components}/copy/component.ts +0 -0
  240. /package/s/{components → _archive/components}/copy/showcase.ts +0 -0
  241. /package/s/{components → _archive/components}/copy/style.css.ts +0 -0
  242. /package/s/{components → _archive/components}/drawer/control.ts +0 -0
  243. /package/s/{components → _archive/components}/drawer/style.css.ts +0 -0
  244. /package/s/{components → _archive/components}/example/component.ts +0 -0
  245. /package/s/{components → _archive/components}/example/showcase.ts +0 -0
  246. /package/s/{components → _archive/components}/example/style.css.ts +0 -0
  247. /package/s/{components → _archive/components}/foundation.css.ts +0 -0
  248. /package/s/{components → _archive/components}/framework.ts +0 -0
  249. /package/s/{components → _archive/components}/raw-components.ts +0 -0
  250. /package/s/{components → _archive/components}/tabs/component.ts +0 -0
  251. /package/s/{components → _archive/components}/tabs/control.ts +0 -0
  252. /package/s/{components → _archive/components}/tabs/showcase.ts +0 -0
  253. /package/s/{components → _archive/components}/tabs/style.css.ts +0 -0
  254. /package/s/{demo → _archive/demo}/demo.bundle.ts +0 -0
  255. /package/s/{demo → _archive/demo}/demo.css +0 -0
  256. /package/s/{demo → _archive/demo}/lipsum.ts +0 -0
  257. /package/s/{demo → _archive/demo}/views/exhibit/view.ts +0 -0
  258. /package/s/{demo → _archive/demo}/viewsets.ts +0 -0
  259. /package/s/{install → _archive/install}/aura.bundle.ts +0 -0
  260. /package/s/{install → _archive/install}/plain.bundle.ts +0 -0
  261. /package/s/{shiny.ts → _archive/shiny.ts} +0 -0
  262. /package/s/{tests.test.ts → _archive/tests.test.ts} +0 -0
  263. /package/s/{themes → _archive/themes}/aura.css.ts +0 -0
  264. /package/s/{themes → _archive/themes}/index.barrel.ts +0 -0
  265. /package/s/{themes → _archive/themes}/index.ts +0 -0
  266. /package/s/{themes → _archive/themes}/infra/css-vars.ts +0 -0
  267. /package/s/{themes → _archive/themes}/plain.css.ts +0 -0
  268. /package/x/{demo → _archive/demo}/demo.css +0 -0
  269. /package/x/demo/{demo.bundle.d.ts → main.bundle.d.ts} +0 -0
  270. /package/x/{components/button → demo/views/codebox}/style.css.d.ts +0 -0
  271. /package/x/{install/aura.bundle.d.ts → test.d.ts} +0 -0
  272. /package/x/{components/copy → views/button}/style.css.d.ts +0 -0
  273. /package/x/{components/drawer → views/copy}/style.css.d.ts +0 -0
  274. /package/x/{components → views}/copy/style.css.js +0 -0
  275. /package/x/{components → views}/drawer/control.js +0 -0
  276. /package/x/{components/example → views/drawer}/style.css.d.ts +0 -0
  277. /package/x/{components → views}/tabs/style.css.d.ts +0 -0
@@ -10,23 +10,23 @@ slot[part="tabs"] {
10
10
  display: flex;
11
11
  flex-wrap: wrap;
12
12
 
13
- &::slotted([data-active]) {
13
+ &::slotted([data-tabbed]) {
14
14
  opacity: 1;
15
15
  color: currentColor;
16
16
  text-decoration: underline;
17
17
  }
18
18
  }
19
19
 
20
- :host([snug]) slot[part="tabs"] {
20
+ slot[part="tabs"][data-snug] {
21
21
  &::slotted(*) {
22
- border-radius: 0.3em;
22
+ border-radius: var(--rounded);
23
23
  }
24
24
 
25
- &::slotted(:not([data-last], [data-next-is-active])) {
25
+ &::slotted(:not([data-last], [data-next-is-tabbed])) {
26
26
  border-right: none;
27
27
  }
28
28
 
29
- &::slotted([data-active]:not([data-first])) {
29
+ &::slotted([data-tabbed]:not([data-first])) {
30
30
  border-left: none;
31
31
  }
32
32
 
@@ -0,0 +1 @@
1
+ {"version":3,"file":"style.css.js","sourceRoot":"","sources":["../../../s/views/tabs/style.css.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,GAAG,EAAC,MAAM,KAAK,CAAA;AACvB,eAAe,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA0Cf,CAAA"}
@@ -0,0 +1,5 @@
1
+ import { TabsControl } from "./control.js";
2
+ export declare const ShinyTabs: import("@e280/sly").ShadowView<[options?: {
3
+ snug?: boolean;
4
+ control?: TabsControl;
5
+ } | undefined]>;
@@ -0,0 +1,52 @@
1
+ import { html } from "lit";
2
+ import { dom, shadow, useHost, useName, useOnce, useSignal, useStyles } from "@e280/sly";
3
+ import styleCss from "./style.css.js";
4
+ import { TabsControl } from "./control.js";
5
+ import { themeCss } from "../../theme/theme.css.js";
6
+ export const ShinyTabs = shadow((options = {}) => {
7
+ useName("shiny-tabs");
8
+ useStyles(themeCss, styleCss);
9
+ const host = useHost();
10
+ const attrs = useOnce(() => dom.attrs(host).spec({ index: Number }));
11
+ const control = useOnce(() => options.control ?? new TabsControl(attrs.index ?? 0));
12
+ const $tabs = useSignal([]);
13
+ const $panels = useSignal([]);
14
+ async function tabchange(event) {
15
+ const slot = event.currentTarget;
16
+ await $tabs.set(slot.assignedElements());
17
+ }
18
+ async function panelchange(event) {
19
+ const slot = event.currentTarget;
20
+ await $panels.set(slot.assignedElements());
21
+ }
22
+ attrs.index = control.$index();
23
+ control.length = $tabs().length;
24
+ function isNeighborActive(index, delta) {
25
+ const nextIndex = control.clamp(index + delta);
26
+ if (nextIndex === index)
27
+ return false;
28
+ return (nextIndex === control.index);
29
+ }
30
+ for (const [index, tab] of $tabs().entries()) {
31
+ const tabbed = (index === control.index);
32
+ const tabAttrs = dom.attrs(tab);
33
+ tabAttrs.booleans.disabled = tabbed;
34
+ tabAttrs.booleans["data-snug"] = options.snug;
35
+ tabAttrs.booleans["data-tabbed"] = tabbed;
36
+ tabAttrs.booleans["data-first"] = (index === 0);
37
+ tabAttrs.booleans["data-last"] = (index === (control.length - 1));
38
+ tabAttrs.booleans["data-next-is-tabbed"] = isNeighborActive(index, 1);
39
+ tabAttrs.booleans["data-previous-is-tabbed"] = isNeighborActive(index, -1);
40
+ tab.onclick = () => control.setIndex(index);
41
+ }
42
+ for (const [index, panel] of $panels().entries()) {
43
+ const tabbed = (index === control.index);
44
+ dom.attrs(panel).booleans["data-tabbed"] = tabbed;
45
+ dom.attrs(panel).booleans["hidden"] = !tabbed;
46
+ }
47
+ return html `
48
+ <slot part=tabs ?data-snug="${options.snug}" @slotchange="${tabchange}"></slot>
49
+ <slot part=panels name=panel @slotchange="${panelchange}"></slot>
50
+ `;
51
+ });
52
+ //# sourceMappingURL=view.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"view.js","sourceRoot":"","sources":["../../../s/views/tabs/view.ts"],"names":[],"mappings":"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"}
@@ -1,6 +0,0 @@
1
- import { Content } from "@e280/sly";
2
- import { ShinyContext, ShinyElement } from "../framework.js";
3
- declare const ShinyButton_base: import("@e280/sly").ComponentClass<typeof ShinyElement, [context: ShinyContext, content?: Content]>;
4
- export declare class ShinyButton extends ShinyButton_base {
5
- }
6
- export {};
@@ -1,25 +0,0 @@
1
- import { html } from "lit";
2
- import { view } from "@e280/sly";
3
- import styleCss from "./style.css.js";
4
- import { foundationCss } from "../foundation.css.js";
5
- import { ShinyElement } from "../framework.js";
6
- export class ShinyButton extends (view(use => (context, content) => {
7
- use.name("shiny-button");
8
- use.styles(foundationCss, context.theme, styleCss);
9
- const attrs = use.attrs.spec({
10
- disabled: Boolean,
11
- hidden: Boolean,
12
- });
13
- return html `
14
- <button
15
- part=button
16
- ?disabled="${attrs.disabled}"
17
- ?hidden="${attrs.hidden}">
18
- <slot>${content}</slot>
19
- </button>
20
- `;
21
- })
22
- .component(ShinyElement)
23
- .props(el => [el.context])) {
24
- }
25
- //# sourceMappingURL=component.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"component.js","sourceRoot":"","sources":["../../../s/components/button/component.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,IAAI,EAAC,MAAM,KAAK,CAAA;AACxB,OAAO,EAAU,IAAI,EAAC,MAAM,WAAW,CAAA;AACvC,OAAO,QAAQ,MAAM,gBAAgB,CAAA;AACrC,OAAO,EAAC,aAAa,EAAC,MAAM,sBAAsB,CAAA;AAClD,OAAO,EAAe,YAAY,EAAC,MAAM,iBAAiB,CAAA;AAE1D,MAAM,OAAO,WAAY,SAAQ,CAChC,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,CAAC,OAAqB,EAAE,OAAiB,EAAE,EAAE;IACxD,GAAG,CAAC,IAAI,CAAC,cAAc,CAAC,CAAA;IACxB,GAAG,CAAC,MAAM,CAAC,aAAa,EAAE,OAAO,CAAC,KAAK,EAAE,QAAQ,CAAC,CAAA;IAElD,MAAM,KAAK,GAAG,GAAG,CAAC,KAAK,CAAC,IAAI,CAAC;QAC5B,QAAQ,EAAE,OAAO;QACjB,MAAM,EAAE,OAAO;KACf,CAAC,CAAA;IAEF,OAAO,IAAI,CAAA;;;iBAGI,KAAK,CAAC,QAAQ;eAChB,KAAK,CAAC,MAAM;aACd,OAAO;;GAEjB,CAAA;AACF,CAAC,CAAC;KACD,SAAS,CAAC,YAAY,CAAC;KACvB,KAAK,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,EAAE,CAAC,OAAO,CAAU,CAAC,CACnC;CAAG"}
@@ -1 +0,0 @@
1
- export declare const buttonShowcase: () => import("lit-html/directive.js").DirectiveResult<import("lit-html/directive.js").DirectiveClass>;
@@ -1,116 +0,0 @@
1
- import { css, html } from "lit";
2
- import { Showcase } from "../../demo/views/showcase/view.js";
3
- const cssSnippet = `
4
- [view="shiny-button"] {
5
- --padding: 0.3em;
6
- font-size: 1em;
7
- color: currentColor;
8
- background: transparent;
9
- }
10
- `;
11
- export const buttonShowcase = () => Showcase({
12
- name: "button",
13
- style: css `
14
- .box {
15
- > * { font-size: 1.5em; }
16
- }
17
- `,
18
- exhibits: [
19
- {
20
- label: "basic",
21
- explain: html `<p>clicky-clacky pressy button.</p>`,
22
- snippets: [
23
- { label: "html", code: `<shiny-button>button</shiny-button>` },
24
- { label: "view", code: `ShinyButton("button")` },
25
- { label: "css", code: cssSnippet },
26
- ],
27
- style: css ``,
28
- presentation: views => html `
29
- ${views.ShinyButton.props().children("button").render()}
30
- `,
31
- },
32
- {
33
- label: "gradient",
34
- explain: html `<p>added <code>gradient</code> attribute.</p>`,
35
- snippets: [
36
- { label: "html", code: `<shiny-button gradient>button</shiny-button>` },
37
- { label: "view", code: `
38
- ShinyButton
39
- .props("button")
40
- .attr("gradient")
41
- .render()
42
- ` },
43
- { label: "css", code: cssSnippet },
44
- ],
45
- style: css ``,
46
- presentation: views => html `
47
- ${views.ShinyButton.props().attr("gradient").children("button").render()}
48
- `,
49
- },
50
- {
51
- label: "catalog",
52
- explain: html `<p>clicky-clacky pressy buttons.</p>`,
53
- snippets: [
54
- { label: "html", code: `
55
- <shiny-button calm gradient>calm</shiny-button>
56
- <shiny-button angry gradient>angry</shiny-button>
57
- <shiny-button happy gradient>happy</shiny-button>
58
- <shiny-button zesty gradient>zesty</shiny-button>
59
- <shiny-button sad gradient>sad</shiny-button>
60
- <shiny-button quirky gradient>quirky</shiny-button>
61
- <shiny-button plain gradient>plain</shiny-button>
62
- ` },
63
- { label: "view", code: `
64
- [
65
- ShinyButton.props().attr("calm").attr("gradient").children("calm").render(),
66
- ShinyButton.props().attr("angry").attr("gradient").children("angry").render(),
67
- ShinyButton.props().attr("happy").attr("gradient").children("happy").render(),
68
- ShinyButton.props().attr("zesty").attr("gradient").children("zesty").render(),
69
- ShinyButton.props().attr("sad").attr("gradient").children("sad").render(),
70
- ShinyButton.props().attr("quirky").attr("gradient").children("quirky").render(),
71
- ShinyButton.props().attr("plain").children("plain").render(),
72
- ]
73
- ` },
74
- { label: "css", code: cssSnippet },
75
- ],
76
- style: css ``,
77
- presentation: views => [
78
- views.ShinyButton.props()
79
- .attr("calm")
80
- .attr("gradient")
81
- .children("calm")
82
- .render(),
83
- views.ShinyButton.props()
84
- .attr("angry")
85
- .attr("gradient")
86
- .children("angry")
87
- .render(),
88
- views.ShinyButton.props()
89
- .attr("happy")
90
- .attr("gradient")
91
- .children("happy")
92
- .render(),
93
- views.ShinyButton.props()
94
- .attr("zesty")
95
- .attr("gradient")
96
- .children("zesty")
97
- .render(),
98
- views.ShinyButton.props()
99
- .attr("sad")
100
- .attr("gradient")
101
- .children("sad")
102
- .render(),
103
- views.ShinyButton.props()
104
- .attr("quirky")
105
- .attr("gradient")
106
- .children("quirky")
107
- .render(),
108
- views.ShinyButton.props()
109
- .attr("plain")
110
- .children("plain")
111
- .render(),
112
- ],
113
- },
114
- ],
115
- });
116
- //# sourceMappingURL=showcase.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"showcase.js","sourceRoot":"","sources":["../../../s/components/button/showcase.ts"],"names":[],"mappings":"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"}
@@ -1,62 +0,0 @@
1
- import { css } from "lit";
2
- export default css `@layer view {
3
-
4
- :host {
5
- opacity: 0.8;
6
- display: inline-flex;
7
- width: max-content;
8
- height: max-content;
9
-
10
- --padding: 0.3em;
11
- border-radius: 0.2em;
12
- border: 0.1em solid currentColor;
13
-
14
- cursor: pointer;
15
- background: transparent;
16
- user-select: none;
17
- }
18
-
19
- :host(:not([disabled]):is(:hover, :focus-visible)) { opacity: 1; }
20
- :host(:not([disabled]):active) { opacity: 0.6; }
21
-
22
- :host([disabled]) {
23
- cursor: default;
24
- color: var(--lame);
25
- }
26
-
27
- :host([hidden]) {
28
- display: none !important;
29
- }
30
-
31
- :host([lame]) { color: var(--lame); }
32
- :host([angry]) { color: var(--angry); }
33
- :host([zesty]) { color: var(--zesty); }
34
- :host([happy]) { color: var(--happy); }
35
- :host([calm]) { color: var(--calm); }
36
- :host([sad]) { color: var(--sad); }
37
- :host([quirky]) { color: var(--quirky); }
38
-
39
- button {
40
- background: transparent;
41
- border: none;
42
-
43
- font: inherit;
44
- color: inherit;
45
- cursor: inherit;
46
- text-shadow: inherit;
47
-
48
- display: inline-flex;
49
- justify-content: center;
50
- align-items: center;
51
-
52
- width: 100%;
53
- height: 100%;
54
- padding: var(--padding);
55
- }
56
-
57
- slot {
58
- display: contents;
59
- }
60
-
61
- }`;
62
- //# sourceMappingURL=style.css.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"style.css.js","sourceRoot":"","sources":["../../../s/components/button/style.css.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,GAAG,EAAC,MAAM,KAAK,CAAA;AACvB,eAAe,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA2DhB,CAAA"}