@e280/shiny 0.1.0-12 → 0.1.0-14

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 (57) hide show
  1. package/README.md +12 -8
  2. package/package.json +1 -1
  3. package/s/components/button/showcase.ts +1 -1
  4. package/s/components/copy/showcase.ts +1 -1
  5. package/s/components/drawer/showcase.ts +6 -1
  6. package/s/components/drawer/style.css.ts +2 -0
  7. package/s/components/example/component.ts +2 -2
  8. package/s/components/example/showcase.ts +32 -0
  9. package/s/components/tabs/showcase.ts +102 -4
  10. package/s/components/tabs/style.css.ts +7 -4
  11. package/s/demo/views/exhibit/style.css.ts +1 -1
  12. package/s/demo/views/exhibit/view.ts +3 -1
  13. package/s/demo/views/showcase/style.css.ts +3 -0
  14. package/s/demo/views/showcase/view.ts +21 -21
  15. package/s/themes/aura.css.ts +5 -5
  16. package/x/components/button/showcase.js +1 -1
  17. package/x/components/copy/showcase.js +1 -1
  18. package/x/components/drawer/showcase.js +6 -1
  19. package/x/components/drawer/showcase.js.map +1 -1
  20. package/x/components/drawer/style.css.js +2 -0
  21. package/x/components/drawer/style.css.js.map +1 -1
  22. package/x/components/example/component.d.ts +1 -1
  23. package/x/components/example/component.js +2 -2
  24. package/x/components/example/component.js.map +1 -1
  25. package/x/components/example/showcase.d.ts +1 -0
  26. package/x/components/example/showcase.js +30 -0
  27. package/x/components/example/showcase.js.map +1 -0
  28. package/x/components/tabs/showcase.js +102 -4
  29. package/x/components/tabs/showcase.js.map +1 -1
  30. package/x/components/tabs/style.css.js +7 -4
  31. package/x/components/tabs/style.css.js.map +1 -1
  32. package/x/demo/demo.bundle.min.js +157 -78
  33. package/x/demo/demo.bundle.min.js.map +2 -2
  34. package/x/demo/views/exhibit/style.css.js +1 -1
  35. package/x/demo/views/exhibit/view.d.ts +1 -1
  36. package/x/demo/views/exhibit/view.js +3 -1
  37. package/x/demo/views/exhibit/view.js.map +1 -1
  38. package/x/demo/views/showcase/style.css.js +3 -0
  39. package/x/demo/views/showcase/style.css.js.map +1 -1
  40. package/x/demo/views/showcase/view.js +4 -4
  41. package/x/demo/views/showcase/view.js.map +1 -1
  42. package/x/demo/viewsets.d.ts +1 -1
  43. package/x/index.html +2 -2
  44. package/x/install/aura.bundle.min.js +16 -11
  45. package/x/install/aura.bundle.min.js.map +2 -2
  46. package/x/install/plain.bundle.min.js +11 -6
  47. package/x/install/plain.bundle.min.js.map +2 -2
  48. package/x/shiny.d.ts +2 -2
  49. package/x/themes/aura.css.js +5 -5
  50. package/s/demo/views/demonstration/style.css.ts +0 -124
  51. package/s/demo/views/demonstration/view.ts +0 -57
  52. package/x/demo/views/demonstration/style.css.d.ts +0 -2
  53. package/x/demo/views/demonstration/style.css.js +0 -123
  54. package/x/demo/views/demonstration/style.css.js.map +0 -1
  55. package/x/demo/views/demonstration/view.d.ts +0 -12
  56. package/x/demo/views/demonstration/view.js +0 -44
  57. package/x/demo/views/demonstration/view.js.map +0 -1
package/x/components/tabs/showcase.js CHANGED
@@ -5,10 +5,15 @@ const lip1 = lipsum();
5
5
  const lip2 = lipsum();
6
6
  const lip3 = lipsum();
7
7
  const cssSnippet = `
8
- shiny-tabs {
8
+ [view="shiny-tabs"] {
9
9
  &::part(tabs) {}
10
10
  &::part(panels) {}
11
- > shiny-button {}
11
+
12
+ /* buttons */
13
+ > :not([slot="panel"]) {}
14
+
15
+ /* panels */
16
+ > [slot="panel"] {}
12
17
  }
13
18
  `;
14
19
  export const tabsShowcase = () => Showcase({
@@ -17,15 +22,16 @@ export const tabsShowcase = () => Showcase({
17
22
  .box {
18
23
  place-content: start start;
19
24
  p { margin-top: 0.5em; }
25
+ button { padding: 1em; }
20
26
  }
21
27
  `,
22
28
  exhibits: [
23
29
  {
24
- label: "tabs",
30
+ label: "shiny snug",
25
31
  explain: html `<p>button bar. panels optional.</p>`,
26
32
  snippets: [
27
33
  { label: "html", code: `
28
- <shiny-tabs>
34
+ <shiny-tabs snug>
29
35
  <shiny-button>tab1</shiny-button>
30
36
  <shiny-button>tab2</shiny-button>
31
37
  <shiny-button>tab3</shiny-button>
@@ -37,6 +43,7 @@ export const tabsShowcase = () => Showcase({
37
43
  { label: "view", code: `
38
44
  ShinyTabs
39
45
  .props()
46
+ .attr("snug")
40
47
  .children(html\`
41
48
  \${ShinyButton.props().children("tab1").render()}
42
49
  \${ShinyButton.props().children("tab2").render()}
@@ -53,6 +60,7 @@ export const tabsShowcase = () => Showcase({
53
60
  presentation: views => html `
54
61
  ${views.ShinyTabs
55
62
  .props()
63
+ .attr("snug")
56
64
  .children(html `
57
65
  ${views.ShinyButton.props().children("tab1").render()}
58
66
  ${views.ShinyButton.props().children("tab2").render()}
@@ -64,6 +72,96 @@ export const tabsShowcase = () => Showcase({
64
72
  .render()}
65
73
  `,
66
74
  },
75
+ {
76
+ label: "regular",
77
+ explain: html `<p>button bar. panels optional.</p>`,
78
+ snippets: [
79
+ { label: "html", code: `
80
+ <shiny-tabs>
81
+ <button>tab1</button>
82
+ <button>tab2</button>
83
+ <button>tab3</button>
84
+ <div slot=panel>panel1</div>
85
+ <div slot=panel>panel2</div>
86
+ <div slot=panel>panel3</div>
87
+ </shiny-tabs>
88
+ ` },
89
+ { label: "view", code: `
90
+ ShinyTabs
91
+ .props()
92
+ .children(html\`
93
+ <button>tab1</button>
94
+ <button>tab2</button>
95
+ <button>tab3</button>
96
+ <div slot=panel>panel1</div>
97
+ <div slot=panel>panel2</div>
98
+ <div slot=panel>panel3</div>
99
+ \`)
100
+ .render()
101
+ ` },
102
+ { label: "css", code: cssSnippet },
103
+ ],
104
+ style: css ``,
105
+ presentation: views => html `
106
+ ${views.ShinyTabs
107
+ .props()
108
+ .children(html `
109
+ <button>tab1</button>
110
+ <button>tab2</button>
111
+ <button>tab3</button>
112
+ <p slot=panel class=lipsum>${lip1}</p>
113
+ <p slot=panel class=lipsum>${lip2}</p>
114
+ <p slot=panel class=lipsum>${lip3}</p>
115
+ `)
116
+ .render()}
117
+ `,
118
+ },
119
+ {
120
+ label: "regular snug",
121
+ explain: html `<p>button bar. panels optional.</p>`,
122
+ snippets: [
123
+ { label: "html", code: `
124
+ <shiny-tabs snug>
125
+ <button>tab1</button>
126
+ <button>tab2</button>
127
+ <button>tab3</button>
128
+ <div slot=panel>panel1</div>
129
+ <div slot=panel>panel2</div>
130
+ <div slot=panel>panel3</div>
131
+ </shiny-tabs>
132
+ ` },
133
+ { label: "view", code: `
134
+ ShinyTabs
135
+ .props()
136
+ .attr("snug")
137
+ .children(html\`
138
+ <button>tab1</button>
139
+ <button>tab2</button>
140
+ <button>tab3</button>
141
+ <div slot=panel>panel1</div>
142
+ <div slot=panel>panel2</div>
143
+ <div slot=panel>panel3</div>
144
+ \`)
145
+ .render()
146
+ ` },
147
+ { label: "css", code: cssSnippet },
148
+ ],
149
+ style: css ``,
150
+ presentation: views => html `
151
+ ${views.ShinyTabs
152
+ .props()
153
+ .attr("snug")
154
+ .children(html `
155
+ <button>tab1</button>
156
+ <button>tab2</button>
157
+ <button>tab3</button>
158
+ <p slot=panel class=lipsum>${lip1}</p>
159
+ <p slot=panel class=lipsum>${lip2}</p>
160
+ <p slot=panel class=lipsum>${lip3}</p>
161
+ `)
162
+ .render()}
163
+ `,
164
+ },
67
165
  ],
68
166
  });
69
167
  //# sourceMappingURL=showcase.js.map
package/x/components/tabs/showcase.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"showcase.js","sourceRoot":"","sources":["../../../s/components/tabs/showcase.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,GAAG,EAAE,IAAI,EAAC,MAAM,KAAK,CAAA;AAC7B,OAAO,EAAC,MAAM,EAAC,MAAM,sBAAsB,CAAA;AAC3C,OAAO,EAAC,QAAQ,EAAC,MAAM,mCAAmC,CAAA;AAE1D,MAAM,IAAI,GAAG,MAAM,EAAE,CAAA;AACrB,MAAM,IAAI,GAAG,MAAM,EAAE,CAAA;AACrB,MAAM,IAAI,GAAG,MAAM,EAAE,CAAA;AAErB,MAAM,UAAU,GAAG;;;;;;CAMlB,CAAA;AAED,MAAM,CAAC,MAAM,YAAY,GAAG,GAAG,EAAE,CAAC,QAAQ,CAAC;IAC1C,IAAI,EAAE,MAAM;IACZ,KAAK,EAAE,GAAG,CAAA;;;;;EAKT;IACD,QAAQ,EAAE;QACT;YACC,KAAK,EAAE,MAAM;YACb,OAAO,EAAE,IAAI,CAAA,qCAAqC;YAClD,QAAQ,EAAE;gBACT,EAAC,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE;;;;;;;;;KASrB,EAAC;gBACF,EAAC,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE;;;;;;;;;;;;KAYrB,EAAC;gBACF,EAAC,KAAK,EAAE,KAAK,EAAE,IAAI,EAAE,UAAU,EAAC;aAChC;YACD,KAAK,EAAE,GAAG,CAAA,EAAE;YACZ,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,IAAI,CAAA;MACxB,KAAK,CAAC,SAAS;iBACf,KAAK,EAAE;iBACP,QAAQ,CAAC,IAAI,CAAA;QACX,KAAK,CAAC,WAAW,CAAC,KAAK,EAAE,CAAC,QAAQ,CAAC,MAAM,CAAC,CAAC,MAAM,EAAE;QACnD,KAAK,CAAC,WAAW,CAAC,KAAK,EAAE,CAAC,QAAQ,CAAC,MAAM,CAAC,CAAC,MAAM,EAAE;QACnD,KAAK,CAAC,WAAW,CAAC,KAAK,EAAE,CAAC,QAAQ,CAAC,MAAM,CAAC,CAAC,MAAM,EAAE;mCACxB,IAAI;mCACJ,IAAI;mCACJ,IAAI;MACjC,CAAC;iBACD,MAAM,EAAE;IACV;SACD;KACD;CACD,CAAC,CAAA"}
1
+ {"version":3,"file":"showcase.js","sourceRoot":"","sources":["../../../s/components/tabs/showcase.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,GAAG,EAAE,IAAI,EAAC,MAAM,KAAK,CAAA;AAC7B,OAAO,EAAC,MAAM,EAAC,MAAM,sBAAsB,CAAA;AAC3C,OAAO,EAAC,QAAQ,EAAC,MAAM,mCAAmC,CAAA;AAE1D,MAAM,IAAI,GAAG,MAAM,EAAE,CAAA;AACrB,MAAM,IAAI,GAAG,MAAM,EAAE,CAAA;AACrB,MAAM,IAAI,GAAG,MAAM,EAAE,CAAA;AAErB,MAAM,UAAU,GAAG;;;;;;;;;;;CAWlB,CAAA;AAED,MAAM,CAAC,MAAM,YAAY,GAAG,GAAG,EAAE,CAAC,QAAQ,CAAC;IAC1C,IAAI,EAAE,MAAM;IACZ,KAAK,EAAE,GAAG,CAAA;;;;;;EAMT;IACD,QAAQ,EAAE;QACT;YACC,KAAK,EAAE,YAAY;YACnB,OAAO,EAAE,IAAI,CAAA,qCAAqC;YAClD,QAAQ,EAAE;gBACT,EAAC,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE;;;;;;;;;KASrB,EAAC;gBACF,EAAC,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE;;;;;;;;;;;;;KAarB,EAAC;gBACF,EAAC,KAAK,EAAE,KAAK,EAAE,IAAI,EAAE,UAAU,EAAC;aAChC;YACD,KAAK,EAAE,GAAG,CAAA,EAAE;YACZ,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,IAAI,CAAA;MACxB,KAAK,CAAC,SAAS;iBACf,KAAK,EAAE;iBACP,IAAI,CAAC,MAAM,CAAC;iBACZ,QAAQ,CAAC,IAAI,CAAA;QACX,KAAK,CAAC,WAAW,CAAC,KAAK,EAAE,CAAC,QAAQ,CAAC,MAAM,CAAC,CAAC,MAAM,EAAE;QACnD,KAAK,CAAC,WAAW,CAAC,KAAK,EAAE,CAAC,QAAQ,CAAC,MAAM,CAAC,CAAC,MAAM,EAAE;QACnD,KAAK,CAAC,WAAW,CAAC,KAAK,EAAE,CAAC,QAAQ,CAAC,MAAM,CAAC,CAAC,MAAM,EAAE;mCACxB,IAAI;mCACJ,IAAI;mCACJ,IAAI;MACjC,CAAC;iBACD,MAAM,EAAE;IACV;SACD;QACD;YACC,KAAK,EAAE,SAAS;YAChB,OAAO,EAAE,IAAI,CAAA,qCAAqC;YAClD,QAAQ,EAAE;gBACT,EAAC,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE;;;;;;;;;KASrB,EAAC;gBACF,EAAC,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE;;;;;;;;;;;;KAYrB,EAAC;gBACF,EAAC,KAAK,EAAE,KAAK,EAAE,IAAI,EAAE,UAAU,EAAC;aAChC;YACD,KAAK,EAAE,GAAG,CAAA,EAAE;YACZ,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,IAAI,CAAA;MACxB,KAAK,CAAC,SAAS;iBACf,KAAK,EAAE;iBACP,QAAQ,CAAC,IAAI,CAAA;;;;mCAIgB,IAAI;mCACJ,IAAI;mCACJ,IAAI;MACjC,CAAC;iBACD,MAAM,EAAE;IACV;SACD;QACD;YACC,KAAK,EAAE,cAAc;YACrB,OAAO,EAAE,IAAI,CAAA,qCAAqC;YAClD,QAAQ,EAAE;gBACT,EAAC,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE;;;;;;;;;KASrB,EAAC;gBACF,EAAC,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE;;;;;;;;;;;;;KAarB,EAAC;gBACF,EAAC,KAAK,EAAE,KAAK,EAAE,IAAI,EAAE,UAAU,EAAC;aAChC;YACD,KAAK,EAAE,GAAG,CAAA,EAAE;YACZ,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,IAAI,CAAA;MACxB,KAAK,CAAC,SAAS;iBACf,KAAK,EAAE;iBACP,IAAI,CAAC,MAAM,CAAC;iBACZ,QAAQ,CAAC,IAAI,CAAA;;;;mCAIgB,IAAI;mCACJ,IAAI;mCACJ,IAAI;MACjC,CAAC;iBACD,MAAM,EAAE;IACV;SACD;KACD;CACD,CAAC,CAAA"}
package/x/components/tabs/style.css.js CHANGED
@@ -8,16 +8,19 @@ export default css `@layer view {
8
8
 
9
9
  slot[part="tabs"] {
10
10
  display: flex;
11
-
12
- &::slotted(*) {
13
- border-radius: 0.3em;
14
- }
11
+ flex-wrap: wrap;
15
12
 
16
13
  &::slotted([data-active]) {
17
14
  opacity: 1;
18
15
  color: currentColor;
19
16
  text-decoration: underline;
20
17
  }
18
+ }
19
+
20
+ :host([snug]) slot[part="tabs"] {
21
+ &::slotted(*) {
22
+ border-radius: 0.3em;
23
+ }
21
24
 
22
25
  &::slotted(:not([data-last], [data-next-is-active])) {
23
26
  border-right: none;
package/x/components/tabs/style.css.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"style.css.js","sourceRoot":"","sources":["../../../s/components/tabs/style.css.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,GAAG,EAAC,MAAM,KAAK,CAAA;AACvB,eAAe,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAuCf,CAAA"}
1
+ {"version":3,"file":"style.css.js","sourceRoot":"","sources":["../../../s/components/tabs/style.css.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,GAAG,EAAC,MAAM,KAAK,CAAA;AACvB,eAAe,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA0Cf,CAAA"}