@e280/shiny 0.1.0-13 → 0.1.0-15
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.
- package/README.md +12 -8
- package/package.json +5 -5
- package/s/components/button/showcase.ts +1 -1
- package/s/components/copy/showcase.ts +1 -1
- package/s/components/drawer/component.ts +2 -2
- package/s/components/drawer/showcase.ts +19 -1
- package/s/components/drawer/style.css.ts +2 -0
- package/s/components/example/component.ts +2 -2
- package/s/components/example/showcase.ts +32 -0
- package/s/components/tabs/showcase.ts +7 -2
- package/s/demo/views/exhibit/style.css.ts +3 -0
- package/s/themes/aura.css.ts +5 -5
- package/x/components/button/showcase.js +1 -1
- package/x/components/copy/showcase.js +1 -1
- package/x/components/drawer/component.js +2 -2
- package/x/components/drawer/component.js.map +1 -1
- package/x/components/drawer/showcase.js +19 -1
- package/x/components/drawer/showcase.js.map +1 -1
- package/x/components/drawer/style.css.js +2 -0
- package/x/components/drawer/style.css.js.map +1 -1
- package/x/components/example/component.d.ts +1 -1
- package/x/components/example/component.js +2 -2
- package/x/components/example/component.js.map +1 -1
- package/x/components/example/showcase.d.ts +1 -0
- package/x/components/example/showcase.js +30 -0
- package/x/components/example/showcase.js.map +1 -0
- package/x/components/tabs/showcase.js +7 -2
- package/x/components/tabs/showcase.js.map +1 -1
- package/x/demo/demo.bundle.min.js +106 -78
- package/x/demo/demo.bundle.min.js.map +4 -4
- package/x/demo/views/exhibit/style.css.js +3 -0
- package/x/demo/views/exhibit/style.css.js.map +1 -1
- package/x/demo/views/exhibit/view.d.ts +1 -1
- package/x/demo/viewsets.d.ts +1 -1
- package/x/index.html +2 -2
- package/x/install/aura.bundle.min.js +32 -30
- package/x/install/aura.bundle.min.js.map +4 -4
- package/x/install/plain.bundle.min.js +28 -26
- package/x/install/plain.bundle.min.js.map +4 -4
- package/x/shiny.d.ts +2 -2
- package/x/themes/aura.css.js +5 -5
package/README.md
CHANGED
|
@@ -45,29 +45,33 @@
|
|
|
45
45
|
```ts
|
|
46
46
|
const {components, views} = shiny({theme: themes.aura})
|
|
47
47
|
```
|
|
48
|
-
- `aura` — (default) cosmic dreamy seaside nebula vibes
|
|
49
|
-
- `plain` — bare-bones spartan theme, buttons look lame
|
|
50
48
|
- (optional) register the components
|
|
51
49
|
```ts
|
|
52
50
|
dom.register(components)
|
|
53
51
|
```
|
|
54
52
|
- or use views instead of components
|
|
55
|
-
-
|
|
53
|
+
- go shopping at https://shiny.e280.org/
|
|
54
|
+
|
|
55
|
+
|
|
56
|
+
|
|
57
|
+
<br/><br/>
|
|
58
|
+
|
|
59
|
+
## 🎨 themes
|
|
60
|
+
|
|
61
|
+
- **`aura`** — cosmic dreamy seaside nebula vibes
|
|
62
|
+
- `plain` — bare-bones spartan theme, for diy, buttons look lame
|
|
56
63
|
|
|
57
64
|
|
|
58
65
|
|
|
59
66
|
<br/><br/>
|
|
60
67
|
|
|
61
68
|
## 😎 views are for the cool kids
|
|
62
|
-
- hey, remember those `views` you got from the install snippet?
|
|
63
|
-
```ts
|
|
64
|
-
const {components, views} = shiny({theme: themes.aura})
|
|
65
|
-
```
|
|
69
|
+
- hey, remember those `views` you got from the web app install snippet?
|
|
66
70
|
- well you can yoink out a view you wanna use
|
|
67
71
|
```ts
|
|
68
72
|
const {ShinyCopy} = views
|
|
69
73
|
```
|
|
70
|
-
- then you can
|
|
74
|
+
- then you can use 'em directly in your lit templates
|
|
71
75
|
```ts
|
|
72
76
|
import {html} from "lit"
|
|
73
77
|
import {dom, view} from "@e280/sly"
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@e280/shiny",
|
|
3
|
-
"version": "0.1.0-
|
|
3
|
+
"version": "0.1.0-15",
|
|
4
4
|
"description": "✨ web ui components",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"type": "module",
|
|
@@ -14,16 +14,16 @@
|
|
|
14
14
|
"s"
|
|
15
15
|
],
|
|
16
16
|
"peerDependencies": {
|
|
17
|
-
"@e280/sly": "^0.2.0-
|
|
17
|
+
"@e280/sly": "^0.2.0-28",
|
|
18
18
|
"lit": "^3.3.1"
|
|
19
19
|
},
|
|
20
20
|
"dependencies": {
|
|
21
|
-
"@e280/strata": "^0.2.0
|
|
22
|
-
"@e280/stz": "^0.2.
|
|
21
|
+
"@e280/strata": "^0.2.0",
|
|
22
|
+
"@e280/stz": "^0.2.10"
|
|
23
23
|
},
|
|
24
24
|
"devDependencies": {
|
|
25
25
|
"@e280/science": "^0.1.2",
|
|
26
|
-
"@e280/scute": "^0.1.
|
|
26
|
+
"@e280/scute": "^0.1.1",
|
|
27
27
|
"http-server": "^14.1.1",
|
|
28
28
|
"npm-run-all": "^4.1.5",
|
|
29
29
|
"typescript": "^5.9.3"
|
|
@@ -24,7 +24,7 @@ export class ShinyDrawer extends (
|
|
|
24
24
|
const button = options.button ?? use.attrs.booleans.button
|
|
25
25
|
const side = options.side ?? (use.attrs.strings.side === "right" ? "right" : "left")
|
|
26
26
|
const control = use.once(() => (options.control ?? new DrawerControl()))
|
|
27
|
-
states.assign(side)
|
|
27
|
+
states.assign(side, control.isOpen ? "opened" : "closed")
|
|
28
28
|
|
|
29
29
|
use.mount(() => dom.events(window, {keydown: (event: KeyboardEvent) => {
|
|
30
30
|
if (event.code === "Escape")
|
|
@@ -35,7 +35,7 @@ export class ShinyDrawer extends (
|
|
|
35
35
|
|
|
36
36
|
function renderButton() {
|
|
37
37
|
return html`
|
|
38
|
-
<button @click="${control.toggle}">
|
|
38
|
+
<button part=button @click="${control.toggle}">
|
|
39
39
|
${control.isOpen
|
|
40
40
|
? html`
|
|
41
41
|
<slot name=button-x>
|
|
@@ -9,7 +9,7 @@ const lip2 = lipsum()
|
|
|
9
9
|
const lip3 = lipsum()
|
|
10
10
|
|
|
11
11
|
const cssSnippet = `
|
|
12
|
-
shiny-drawer {
|
|
12
|
+
[view="shiny-drawer"] {
|
|
13
13
|
--button-size: 2em;
|
|
14
14
|
--anim-duration: 200ms;
|
|
15
15
|
--slate-hidden-opacity: 1;
|
|
@@ -19,6 +19,24 @@ const cssSnippet = `
|
|
|
19
19
|
transparent,
|
|
20
20
|
var(--bg)
|
|
21
21
|
);
|
|
22
|
+
--slate-bg: linear-gradient(
|
|
23
|
+
to top right,
|
|
24
|
+
color-mix(in oklab, var(--calm), #222 50%),
|
|
25
|
+
color-mix(in oklab, var(--calm), #888 50%)
|
|
26
|
+
);
|
|
27
|
+
|
|
28
|
+
&:state(opened) {}
|
|
29
|
+
&:state(closed) {}
|
|
30
|
+
|
|
31
|
+
&:state(left) {}
|
|
32
|
+
&:state(right) {}
|
|
33
|
+
|
|
34
|
+
&::part(tray) {}
|
|
35
|
+
&::part(blanket) {}
|
|
36
|
+
&::part(button) {}
|
|
37
|
+
&::part(slate) {}
|
|
38
|
+
|
|
39
|
+
&::part(plate) {}
|
|
22
40
|
}
|
|
23
41
|
`
|
|
24
42
|
|
|
@@ -6,6 +6,7 @@ export default css`@layer view {
|
|
|
6
6
|
display: block;
|
|
7
7
|
width: 100%;
|
|
8
8
|
height: 100%;
|
|
9
|
+
--slate-bg: transparent;
|
|
9
10
|
--button-size: 2em;
|
|
10
11
|
--blanket-backdrop-filter: blur(0.5em);
|
|
11
12
|
--slate-hidden-opacity: 1;
|
|
@@ -64,6 +65,7 @@ export default css`@layer view {
|
|
|
64
65
|
display: block;
|
|
65
66
|
height: 100%;
|
|
66
67
|
overflow-y: auto;
|
|
68
|
+
background: var(--slate-bg);
|
|
67
69
|
}
|
|
68
70
|
|
|
69
71
|
> button {
|
|
@@ -6,7 +6,7 @@ import {foundationCss} from "../foundation.css.js"
|
|
|
6
6
|
import {ShinyContext, ShinyElement} from "../framework.js"
|
|
7
7
|
|
|
8
8
|
export class ShinyExample extends (
|
|
9
|
-
view(use => (context: ShinyContext, start
|
|
9
|
+
view(use => (context: ShinyContext, start = 1) => {
|
|
10
10
|
use.name("shiny-example")
|
|
11
11
|
use.styles(foundationCss, context.theme, styleCss)
|
|
12
12
|
|
|
@@ -22,6 +22,6 @@ export class ShinyExample extends (
|
|
|
22
22
|
.component(class extends ShinyElement {
|
|
23
23
|
attrs = dom.attrs(this).spec({start: Number})
|
|
24
24
|
})
|
|
25
|
-
.props(el => [el.context, el.attrs.start
|
|
25
|
+
.props(el => [el.context, el.attrs.start] as const)
|
|
26
26
|
) {}
|
|
27
27
|
|
|
@@ -0,0 +1,32 @@
|
|
|
1
|
+
|
|
2
|
+
import {css, html} from "lit"
|
|
3
|
+
import {Showcase} from "../../demo/views/showcase/view.js"
|
|
4
|
+
|
|
5
|
+
export const drawerShowcase = () => Showcase({
|
|
6
|
+
name: "drawer",
|
|
7
|
+
style: css`
|
|
8
|
+
.box {}
|
|
9
|
+
`,
|
|
10
|
+
exhibits: [
|
|
11
|
+
{
|
|
12
|
+
label: "example",
|
|
13
|
+
explain: html`<p>example component.</p>`,
|
|
14
|
+
snippets: [
|
|
15
|
+
{label: "html", code: `
|
|
16
|
+
<shiny-example></shiny-example>
|
|
17
|
+
`},
|
|
18
|
+
{label: "view", code: `
|
|
19
|
+
ShinyExample()
|
|
20
|
+
`},
|
|
21
|
+
{label: "css", code: `
|
|
22
|
+
[view="shiny-example"] {}
|
|
23
|
+
`},
|
|
24
|
+
],
|
|
25
|
+
style: css``,
|
|
26
|
+
presentation: views => html`
|
|
27
|
+
${views.ShinyExample()}
|
|
28
|
+
`,
|
|
29
|
+
},
|
|
30
|
+
],
|
|
31
|
+
})
|
|
32
|
+
|
|
@@ -8,10 +8,15 @@ const lip2 = lipsum()
|
|
|
8
8
|
const lip3 = lipsum()
|
|
9
9
|
|
|
10
10
|
const cssSnippet = `
|
|
11
|
-
shiny-tabs {
|
|
11
|
+
[view="shiny-tabs"] {
|
|
12
12
|
&::part(tabs) {}
|
|
13
13
|
&::part(panels) {}
|
|
14
|
-
|
|
14
|
+
|
|
15
|
+
/* buttons */
|
|
16
|
+
> :not([slot="panel"]) {}
|
|
17
|
+
|
|
18
|
+
/* panels */
|
|
19
|
+
> [slot="panel"] {}
|
|
15
20
|
}
|
|
16
21
|
`
|
|
17
22
|
|
|
@@ -16,6 +16,7 @@ export default css`@layer view {
|
|
|
16
16
|
.meta {
|
|
17
17
|
display: flex;
|
|
18
18
|
flex-direction: column;
|
|
19
|
+
justify-content: space-between;
|
|
19
20
|
gap: 1em;
|
|
20
21
|
}
|
|
21
22
|
|
|
@@ -25,6 +26,7 @@ export default css`@layer view {
|
|
|
25
26
|
flex-direction: column;
|
|
26
27
|
gap: 0.5em;
|
|
27
28
|
padding: 0.5em;
|
|
29
|
+
max-height: 20em;
|
|
28
30
|
|
|
29
31
|
background: #0002;
|
|
30
32
|
box-shadow: inset 0.2em 0.3em 2em #0004;
|
|
@@ -44,6 +46,7 @@ export default css`@layer view {
|
|
|
44
46
|
}
|
|
45
47
|
|
|
46
48
|
> code {
|
|
49
|
+
flex: 1 1 auto;
|
|
47
50
|
display: block;
|
|
48
51
|
|
|
49
52
|
white-space: pre;
|
package/s/themes/aura.css.ts
CHANGED
|
@@ -59,14 +59,14 @@ export const aura = css`@layer overlay {
|
|
|
59
59
|
|
|
60
60
|
:host([view="shiny-drawer"]:not([plain])) {
|
|
61
61
|
display: block;
|
|
62
|
+
--slate-bg: linear-gradient(
|
|
63
|
+
to top right,
|
|
64
|
+
color-mix(in oklab, var(--calm), #222 50%),
|
|
65
|
+
color-mix(in oklab, var(--calm), #888 50%)
|
|
66
|
+
);
|
|
62
67
|
|
|
63
68
|
&::part(slate) {
|
|
64
69
|
padding: 1em;
|
|
65
|
-
background: linear-gradient(
|
|
66
|
-
to top right,
|
|
67
|
-
#00a9dd69,
|
|
68
|
-
#70ffd77a
|
|
69
|
-
);
|
|
70
70
|
}
|
|
71
71
|
}
|
|
72
72
|
|
|
@@ -14,7 +14,7 @@ export class ShinyDrawer extends (view(use => (context, options) => {
|
|
|
14
14
|
const button = options.button ?? use.attrs.booleans.button;
|
|
15
15
|
const side = options.side ?? (use.attrs.strings.side === "right" ? "right" : "left");
|
|
16
16
|
const control = use.once(() => (options.control ?? new DrawerControl()));
|
|
17
|
-
states.assign(side);
|
|
17
|
+
states.assign(side, control.isOpen ? "opened" : "closed");
|
|
18
18
|
use.mount(() => dom.events(window, { keydown: (event) => {
|
|
19
19
|
if (event.code === "Escape")
|
|
20
20
|
control.close();
|
|
@@ -22,7 +22,7 @@ export class ShinyDrawer extends (view(use => (context, options) => {
|
|
|
22
22
|
dom.attrs(use.element).booleans.open = control.isOpen;
|
|
23
23
|
function renderButton() {
|
|
24
24
|
return html `
|
|
25
|
-
<button @click="${control.toggle}">
|
|
25
|
+
<button part=button @click="${control.toggle}">
|
|
26
26
|
${control.isOpen
|
|
27
27
|
? html `
|
|
28
28
|
<slot name=button-x>
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"component.js","sourceRoot":"","sources":["../../../s/components/drawer/component.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,IAAI,EAAC,MAAM,KAAK,CAAA;AACxB,OAAO,EAAC,GAAG,EAAE,IAAI,EAAC,MAAM,WAAW,CAAA;AAEnC,OAAO,QAAQ,MAAM,gBAAgB,CAAA;AACrC,OAAO,EAAC,aAAa,EAAC,MAAM,cAAc,CAAA;AAC1C,OAAO,EAAC,MAAM,EAAC,MAAM,uBAAuB,CAAA;AAC5C,OAAO,IAAI,MAAM,6BAA6B,CAAA;AAC9C,OAAO,EAAC,aAAa,EAAC,MAAM,sBAAsB,CAAA;AAClD,OAAO,QAAQ,MAAM,kCAAkC,CAAA;AACvD,OAAO,EAAe,YAAY,EAAC,MAAM,iBAAiB,CAAA;AAE1D,MAAM,OAAO,WAAY,SAAQ,CAChC,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,CAAC,OAAqB,EAAE,OAIlC,EAAE,EAAE;IAEL,GAAG,CAAC,IAAI,CAAC,cAAc,CAAC,CAAA;IACxB,GAAG,CAAC,MAAM,CAAC,aAAa,EAAE,OAAO,CAAC,KAAK,EAAE,QAAQ,CAAC,CAAA;IAClD,MAAM,MAAM,GAAG,GAAG,CAAC,IAAI,CAAC,GAAG,EAAE,CAAC,IAAI,MAAM,CAAC,GAAG,CAAC,OAAO,CAAC,CAAC,CAAA;IAEtD,MAAM,MAAM,GAAG,OAAO,CAAC,MAAM,IAAI,GAAG,CAAC,KAAK,CAAC,QAAQ,CAAC,MAAM,CAAA;IAC1D,MAAM,IAAI,GAAG,OAAO,CAAC,IAAI,IAAI,CAAC,GAAG,CAAC,KAAK,CAAC,OAAO,CAAC,IAAI,KAAK,OAAO,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,CAAA;IACpF,MAAM,OAAO,GAAG,GAAG,CAAC,IAAI,CAAC,GAAG,EAAE,CAAC,CAAC,OAAO,CAAC,OAAO,IAAI,IAAI,aAAa,EAAE,CAAC,CAAC,CAAA;IACxE,MAAM,CAAC,MAAM,CAAC,IAAI,CAAC,CAAA;
|
|
1
|
+
{"version":3,"file":"component.js","sourceRoot":"","sources":["../../../s/components/drawer/component.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,IAAI,EAAC,MAAM,KAAK,CAAA;AACxB,OAAO,EAAC,GAAG,EAAE,IAAI,EAAC,MAAM,WAAW,CAAA;AAEnC,OAAO,QAAQ,MAAM,gBAAgB,CAAA;AACrC,OAAO,EAAC,aAAa,EAAC,MAAM,cAAc,CAAA;AAC1C,OAAO,EAAC,MAAM,EAAC,MAAM,uBAAuB,CAAA;AAC5C,OAAO,IAAI,MAAM,6BAA6B,CAAA;AAC9C,OAAO,EAAC,aAAa,EAAC,MAAM,sBAAsB,CAAA;AAClD,OAAO,QAAQ,MAAM,kCAAkC,CAAA;AACvD,OAAO,EAAe,YAAY,EAAC,MAAM,iBAAiB,CAAA;AAE1D,MAAM,OAAO,WAAY,SAAQ,CAChC,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,CAAC,OAAqB,EAAE,OAIlC,EAAE,EAAE;IAEL,GAAG,CAAC,IAAI,CAAC,cAAc,CAAC,CAAA;IACxB,GAAG,CAAC,MAAM,CAAC,aAAa,EAAE,OAAO,CAAC,KAAK,EAAE,QAAQ,CAAC,CAAA;IAClD,MAAM,MAAM,GAAG,GAAG,CAAC,IAAI,CAAC,GAAG,EAAE,CAAC,IAAI,MAAM,CAAC,GAAG,CAAC,OAAO,CAAC,CAAC,CAAA;IAEtD,MAAM,MAAM,GAAG,OAAO,CAAC,MAAM,IAAI,GAAG,CAAC,KAAK,CAAC,QAAQ,CAAC,MAAM,CAAA;IAC1D,MAAM,IAAI,GAAG,OAAO,CAAC,IAAI,IAAI,CAAC,GAAG,CAAC,KAAK,CAAC,OAAO,CAAC,IAAI,KAAK,OAAO,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,CAAA;IACpF,MAAM,OAAO,GAAG,GAAG,CAAC,IAAI,CAAC,GAAG,EAAE,CAAC,CAAC,OAAO,CAAC,OAAO,IAAI,IAAI,aAAa,EAAE,CAAC,CAAC,CAAA;IACxE,MAAM,CAAC,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,MAAM,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAA;IAEzD,GAAG,CAAC,KAAK,CAAC,GAAG,EAAE,CAAC,GAAG,CAAC,MAAM,CAAC,MAAM,EAAE,EAAC,OAAO,EAAE,CAAC,KAAoB,EAAE,EAAE;YACrE,IAAI,KAAK,CAAC,IAAI,KAAK,QAAQ;gBAC1B,OAAO,CAAC,KAAK,EAAE,CAAA;QACjB,CAAC,EAAC,CAAC,CAAC,CAAA;IAEJ,GAAG,CAAC,KAAK,CAAC,GAAG,CAAC,OAAO,CAAC,CAAC,QAAQ,CAAC,IAAI,GAAG,OAAO,CAAC,MAAM,CAAA;IAErD,SAAS,YAAY;QACpB,OAAO,IAAI,CAAA;kCACoB,OAAO,CAAC,MAAM;OACzC,OAAO,CAAC,MAAM;YACf,CAAC,CAAC,IAAI,CAAA;;UAEF,IAAI;;OAEP;YACD,CAAC,CAAC,IAAI,CAAA;;UAEF,QAAQ;;OAEX;;IAEH,CAAA;IACF,CAAC;IAED,OAAO,IAAI,CAAA;kCACqB,OAAO,CAAC,MAAM,gBAAgB,IAAI;+BACrC,OAAO,CAAC,MAAM;;;iCAGZ,OAAO,CAAC,KAAK,aAAa,CAAC,OAAO,CAAC,MAAM;;;iCAGzC,CAAC,OAAO,CAAC,MAAM;QACxC,MAAM,CAAC,CAAC,CAAA,YAAY,EAAE,CAAC,CAAC,CAAA,IAAI;;;;GAIjC,CAAA;AACF,CAAC,CAAC;KACD,SAAS,CAAC,KAAM,SAAQ,YAAY;IACpC,MAAM,GAAG,GAAG,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC;QAC7B,IAAI,EAAE,OAAO;QACb,MAAM,EAAE,OAAO;QACf,IAAI,EAAE,MAAM;KACZ,CAAC,CAAA;IAEF,IAAI,MAAM,KAAK,OAAO,IAAI,CAAC,MAAM,CAAC,MAAM,CAAA,CAAC,CAAC;IAC1C,IAAI,MAAM,CAAC,CAAC,IAAI,IAAI,CAAC,MAAM,CAAC,MAAM,GAAG,CAAC,CAAA,CAAC,CAAC;IAExC,IAAI,IAAI,KAAK,OAAO,IAAI,CAAC,MAAM,CAAC,IAAI,KAAK,OAAO,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,CAAA,CAAC,CAAC;IACrE,IAAI,IAAI,CAAC,CAAC,IAAI,IAAI,CAAC,MAAM,CAAC,IAAI,GAAG,CAAC,CAAA,CAAC,CAAC;IAEpC,OAAO,GAAG,IAAI,aAAa,CAAC,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,CAAA;IAC7C,IAAI,MAAM,KAAK,OAAO,IAAI,CAAC,OAAO,CAAC,MAAM,CAAA,CAAC,CAAC;IAC3C,IAAI,MAAM,KAAK,OAAO,IAAI,CAAC,OAAO,CAAC,MAAM,CAAA,CAAC,CAAC;IAC3C,IAAI,IAAI,KAAK,OAAO,IAAI,CAAC,OAAO,CAAC,IAAI,CAAA,CAAC,CAAC;IACvC,IAAI,KAAK,KAAK,OAAO,IAAI,CAAC,OAAO,CAAC,KAAK,CAAA,CAAC,CAAC;CACzC,CAAC;KACD,KAAK,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,EAAE,CAAC,OAAO,EAAE,EAAC,OAAO,EAAE,EAAE,CAAC,OAAO,EAAC,CAAU,CAAC,CAC1D;CAAG"}
|
|
@@ -5,7 +5,7 @@ const lip1 = lipsum();
|
|
|
5
5
|
const lip2 = lipsum();
|
|
6
6
|
const lip3 = lipsum();
|
|
7
7
|
const cssSnippet = `
|
|
8
|
-
shiny-drawer {
|
|
8
|
+
[view="shiny-drawer"] {
|
|
9
9
|
--button-size: 2em;
|
|
10
10
|
--anim-duration: 200ms;
|
|
11
11
|
--slate-hidden-opacity: 1;
|
|
@@ -15,6 +15,24 @@ const cssSnippet = `
|
|
|
15
15
|
transparent,
|
|
16
16
|
var(--bg)
|
|
17
17
|
);
|
|
18
|
+
--slate-bg: linear-gradient(
|
|
19
|
+
to top right,
|
|
20
|
+
color-mix(in oklab, var(--calm), #222 50%),
|
|
21
|
+
color-mix(in oklab, var(--calm), #888 50%)
|
|
22
|
+
);
|
|
23
|
+
|
|
24
|
+
&:state(opened) {}
|
|
25
|
+
&:state(closed) {}
|
|
26
|
+
|
|
27
|
+
&:state(left) {}
|
|
28
|
+
&:state(right) {}
|
|
29
|
+
|
|
30
|
+
&::part(tray) {}
|
|
31
|
+
&::part(blanket) {}
|
|
32
|
+
&::part(button) {}
|
|
33
|
+
&::part(slate) {}
|
|
34
|
+
|
|
35
|
+
&::part(plate) {}
|
|
18
36
|
}
|
|
19
37
|
`;
|
|
20
38
|
const makeExhibit = (side) => ({
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"showcase.js","sourceRoot":"","sources":["../../../s/components/drawer/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;AAG1D,MAAM,IAAI,GAAG,MAAM,EAAE,CAAA;AACrB,MAAM,IAAI,GAAG,MAAM,EAAE,CAAA;AACrB,MAAM,IAAI,GAAG,MAAM,EAAE,CAAA;AAErB,MAAM,UAAU,GAAG
|
|
1
|
+
{"version":3,"file":"showcase.js","sourceRoot":"","sources":["../../../s/components/drawer/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;AAG1D,MAAM,IAAI,GAAG,MAAM,EAAE,CAAA;AACrB,MAAM,IAAI,GAAG,MAAM,EAAE,CAAA;AACrB,MAAM,IAAI,GAAG,MAAM,EAAE,CAAA;AAErB,MAAM,UAAU,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA8BlB,CAAA;AAED,MAAM,WAAW,GAAG,CAAC,IAAsB,EAAiB,EAAE,CAAC,CAAC;IAC/D,KAAK,EAAE,IAAI;IACX,OAAO,EAAE,IAAI,CAAA,0CAA0C;IACvD,QAAQ,EAAE;QACT,EAAC,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE;+BACO,IAAI;;;;GAIhC,EAAC;QACF,EAAC,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE;;mCAEW,IAAI;;;;;;GAMpC,EAAC;QACF,EAAC,KAAK,EAAE,KAAK,EAAE,IAAI,EAAE,UAAU,EAAC;KAChC;IACD,KAAK,EAAE,GAAG,CAAA,EAAE;IACZ,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,IAAI,CAAA;IACxB,KAAK,CAAC,WAAW;SACjB,KAAK,CAAC,EAAC,MAAM,EAAE,IAAI,EAAE,IAAI,EAAC,CAAC;SAC3B,QAAQ,CAAC,IAAI,CAAA;;;;uBAIM,IAAI;;;uBAGJ,IAAI;uBACJ,IAAI;;IAEvB,CAAC;SACD,MAAM,EAAE;EACV;CACD,CAAC,CAAA;AAEF,MAAM,CAAC,MAAM,cAAc,GAAG,GAAG,EAAE,CAAC,QAAQ,CAAC;IAC5C,IAAI,EAAE,QAAQ;IACd,KAAK,EAAE,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;EAoBT;IACD,QAAQ,EAAE;QACT,WAAW,CAAC,MAAM,CAAC;QACnB,WAAW,CAAC,OAAO,CAAC;KACpB;CACD,CAAC,CAAA"}
|
|
@@ -5,6 +5,7 @@ export default css `@layer view {
|
|
|
5
5
|
display: block;
|
|
6
6
|
width: 100%;
|
|
7
7
|
height: 100%;
|
|
8
|
+
--slate-bg: transparent;
|
|
8
9
|
--button-size: 2em;
|
|
9
10
|
--blanket-backdrop-filter: blur(0.5em);
|
|
10
11
|
--slate-hidden-opacity: 1;
|
|
@@ -63,6 +64,7 @@ export default css `@layer view {
|
|
|
63
64
|
display: block;
|
|
64
65
|
height: 100%;
|
|
65
66
|
overflow-y: auto;
|
|
67
|
+
background: var(--slate-bg);
|
|
66
68
|
}
|
|
67
69
|
|
|
68
70
|
> button {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"style.css.js","sourceRoot":"","sources":["../../../s/components/drawer/style.css.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,GAAG,EAAC,MAAM,KAAK,CAAA;AACvB,eAAe,GAAG,CAAA
|
|
1
|
+
{"version":3,"file":"style.css.js","sourceRoot":"","sources":["../../../s/components/drawer/style.css.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,GAAG,EAAC,MAAM,KAAK,CAAA;AACvB,eAAe,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA2HhB,CAAA"}
|
|
@@ -365,7 +365,7 @@ declare const ShinyExample_base: import("@e280/sly").ComponentClass<{
|
|
|
365
365
|
focus(options?: FocusOptions): void;
|
|
366
366
|
};
|
|
367
367
|
styles: import("lit").CSSResultGroup | undefined;
|
|
368
|
-
}, [context: ShinyContext, start
|
|
368
|
+
}, [context: ShinyContext, start?: any]>;
|
|
369
369
|
export declare class ShinyExample extends ShinyExample_base {
|
|
370
370
|
}
|
|
371
371
|
export {};
|
|
@@ -3,7 +3,7 @@ import { dom, view } from "@e280/sly";
|
|
|
3
3
|
import styleCss from "./style.css.js";
|
|
4
4
|
import { foundationCss } from "../foundation.css.js";
|
|
5
5
|
import { ShinyElement } from "../framework.js";
|
|
6
|
-
export class ShinyExample extends (view(use => (context, start) => {
|
|
6
|
+
export class ShinyExample extends (view(use => (context, start = 1) => {
|
|
7
7
|
use.name("shiny-example");
|
|
8
8
|
use.styles(foundationCss, context.theme, styleCss);
|
|
9
9
|
const $count = use.signal(start);
|
|
@@ -17,6 +17,6 @@ export class ShinyExample extends (view(use => (context, start) => {
|
|
|
17
17
|
.component(class extends ShinyElement {
|
|
18
18
|
attrs = dom.attrs(this).spec({ start: Number });
|
|
19
19
|
})
|
|
20
|
-
.props(el => [el.context, el.attrs.start
|
|
20
|
+
.props(el => [el.context, el.attrs.start])) {
|
|
21
21
|
}
|
|
22
22
|
//# sourceMappingURL=component.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"component.js","sourceRoot":"","sources":["../../../s/components/example/component.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,IAAI,EAAC,MAAM,KAAK,CAAA;AACxB,OAAO,EAAC,GAAG,EAAE,IAAI,EAAC,MAAM,WAAW,CAAA;AACnC,OAAO,QAAQ,MAAM,gBAAgB,CAAA;AACrC,OAAO,EAAC,aAAa,EAAC,MAAM,sBAAsB,CAAA;AAClD,OAAO,EAAe,YAAY,EAAC,MAAM,iBAAiB,CAAA;AAE1D,MAAM,OAAO,YAAa,SAAQ,CACjC,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,CAAC,OAAqB,EAAE,
|
|
1
|
+
{"version":3,"file":"component.js","sourceRoot":"","sources":["../../../s/components/example/component.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,IAAI,EAAC,MAAM,KAAK,CAAA;AACxB,OAAO,EAAC,GAAG,EAAE,IAAI,EAAC,MAAM,WAAW,CAAA;AACnC,OAAO,QAAQ,MAAM,gBAAgB,CAAA;AACrC,OAAO,EAAC,aAAa,EAAC,MAAM,sBAAsB,CAAA;AAClD,OAAO,EAAe,YAAY,EAAC,MAAM,iBAAiB,CAAA;AAE1D,MAAM,OAAO,YAAa,SAAQ,CACjC,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,CAAC,OAAqB,EAAE,KAAK,GAAG,CAAC,EAAE,EAAE;IAChD,GAAG,CAAC,IAAI,CAAC,eAAe,CAAC,CAAA;IACzB,GAAG,CAAC,MAAM,CAAC,aAAa,EAAE,OAAO,CAAC,KAAK,EAAE,QAAQ,CAAC,CAAA;IAElD,MAAM,MAAM,GAAG,GAAG,CAAC,MAAM,CAAC,KAAK,CAAC,CAAA;IAChC,MAAM,SAAS,GAAG,GAAG,EAAE,GAAG,MAAM,CAAC,KAAK,EAAE,CAAA,CAAC,CAAC,CAAA;IAE1C,OAAO,IAAI,CAAA;qBACQ,SAAS;MACxB,MAAM,EAAE;;GAEX,CAAA;AACF,CAAC,CAAC;KACD,SAAS,CAAC,KAAM,SAAQ,YAAY;IACpC,KAAK,GAAG,GAAG,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,EAAC,KAAK,EAAE,MAAM,EAAC,CAAC,CAAA;CAC7C,CAAC;KACD,KAAK,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,EAAE,CAAC,OAAO,EAAE,EAAE,CAAC,KAAK,CAAC,KAAK,CAAU,CAAC,CACnD;CAAG"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export declare const drawerShowcase: () => import("lit-html/directive.js").DirectiveResult<import("lit-html/directive.js").DirectiveClass>;
|
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
import { css, html } from "lit";
|
|
2
|
+
import { Showcase } from "../../demo/views/showcase/view.js";
|
|
3
|
+
export const drawerShowcase = () => Showcase({
|
|
4
|
+
name: "drawer",
|
|
5
|
+
style: css `
|
|
6
|
+
.box {}
|
|
7
|
+
`,
|
|
8
|
+
exhibits: [
|
|
9
|
+
{
|
|
10
|
+
label: "example",
|
|
11
|
+
explain: html `<p>example component.</p>`,
|
|
12
|
+
snippets: [
|
|
13
|
+
{ label: "html", code: `
|
|
14
|
+
<shiny-example></shiny-example>
|
|
15
|
+
` },
|
|
16
|
+
{ label: "view", code: `
|
|
17
|
+
ShinyExample()
|
|
18
|
+
` },
|
|
19
|
+
{ label: "css", code: `
|
|
20
|
+
[view="shiny-example"] {}
|
|
21
|
+
` },
|
|
22
|
+
],
|
|
23
|
+
style: css ``,
|
|
24
|
+
presentation: views => html `
|
|
25
|
+
${views.ShinyExample()}
|
|
26
|
+
`,
|
|
27
|
+
},
|
|
28
|
+
],
|
|
29
|
+
});
|
|
30
|
+
//# sourceMappingURL=showcase.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"showcase.js","sourceRoot":"","sources":["../../../s/components/example/showcase.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,GAAG,EAAE,IAAI,EAAC,MAAM,KAAK,CAAA;AAC7B,OAAO,EAAC,QAAQ,EAAC,MAAM,mCAAmC,CAAA;AAE1D,MAAM,CAAC,MAAM,cAAc,GAAG,GAAG,EAAE,CAAC,QAAQ,CAAC;IAC5C,IAAI,EAAE,QAAQ;IACd,KAAK,EAAE,GAAG,CAAA;;EAET;IACD,QAAQ,EAAE;QACT;YACC,KAAK,EAAE,SAAS;YAChB,OAAO,EAAE,IAAI,CAAA,2BAA2B;YACxC,QAAQ,EAAE;gBACT,EAAC,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE;;KAErB,EAAC;gBACF,EAAC,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE;;KAErB,EAAC;gBACF,EAAC,KAAK,EAAE,KAAK,EAAE,IAAI,EAAE;;KAEpB,EAAC;aACF;YACD,KAAK,EAAE,GAAG,CAAA,EAAE;YACZ,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,IAAI,CAAA;MACxB,KAAK,CAAC,YAAY,EAAE;IACtB;SACD;KACD;CACD,CAAC,CAAA"}
|
|
@@ -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
|
-
|
|
11
|
+
|
|
12
|
+
/* buttons */
|
|
13
|
+
> :not([slot="panel"]) {}
|
|
14
|
+
|
|
15
|
+
/* panels */
|
|
16
|
+
> [slot="panel"] {}
|
|
12
17
|
}
|
|
13
18
|
`;
|
|
14
19
|
export const tabsShowcase = () => Showcase({
|
|
@@ -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
|
|
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"}
|