@e280/shiny 0.1.0-4 → 0.1.0-5
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +8 -8
- package/package.json +1 -1
- package/s/components/drawer/component.ts +11 -3
- package/s/components/drawer/style.css.ts +11 -0
- package/s/demo/demo.bundle.ts +13 -7
- package/s/{install.bundle.ts → install/basic.bundle.ts} +2 -2
- package/x/components/drawer/component.d.ts +5 -3
- package/x/components/drawer/component.js +6 -3
- package/x/components/drawer/component.js.map +1 -1
- package/x/components/drawer/style.css.js +11 -0
- package/x/components/drawer/style.css.js.map +1 -1
- package/x/demo/demo.bundle.js +11 -7
- package/x/demo/demo.bundle.js.map +1 -1
- package/x/demo/demo.bundle.min.js +31 -17
- package/x/demo/demo.bundle.min.js.map +4 -4
- package/x/index.html +2 -2
- package/x/install/basic.bundle.js +5 -0
- package/x/install/basic.bundle.js.map +1 -0
- package/x/{install.bundle.min.js → install/basic.bundle.min.js} +20 -9
- package/x/{install.bundle.min.js.map → install/basic.bundle.min.js.map} +4 -4
- package/x/shiny.d.ts +8 -6
- package/x/install.bundle.js +0 -5
- package/x/install.bundle.js.map +0 -1
- /package/x/{install.bundle.d.ts → install/basic.bundle.d.ts} +0 -0
package/README.md
CHANGED
|
@@ -1,22 +1,22 @@
|
|
|
1
1
|
|
|
2
2
|
|
|
3
3
|
|
|
4
|
-
# ✨shiny
|
|
4
|
+
# ✨shiny✨
|
|
5
5
|
> *web ui components*
|
|
6
6
|
|
|
7
7
|
- 💁 ***see all the components at https://shiny.e280.org/*** 👈
|
|
8
8
|
- 👷 built with [🦝sly](https://github.com/e280/sly) and [🔥lit](https://lit.dev/)
|
|
9
|
-
-
|
|
9
|
+
- 🎭 duality: all components are available as ***web components*** or ***sly views***
|
|
10
10
|
- 🧑💻 a project by https://e280.org/
|
|
11
11
|
|
|
12
12
|
|
|
13
13
|
|
|
14
14
|
<br/><br/>
|
|
15
15
|
|
|
16
|
-
##
|
|
16
|
+
## 🍭 instant html installation
|
|
17
17
|
- put this in your html `<head>`
|
|
18
18
|
```html
|
|
19
|
-
<script async src="https://shiny.e280.org/install.bundle.min.js"></script>
|
|
19
|
+
<script async src="https://shiny.e280.org/install/basic.bundle.min.js"></script>
|
|
20
20
|
```
|
|
21
21
|
- you're ready to put shiny components in your html `<body>`
|
|
22
22
|
```html
|
|
@@ -28,7 +28,7 @@
|
|
|
28
28
|
|
|
29
29
|
<br/><br/>
|
|
30
30
|
|
|
31
|
-
##
|
|
31
|
+
## 🍬 web app installation
|
|
32
32
|
- install shiny and friends
|
|
33
33
|
```sh
|
|
34
34
|
npm install @e280/shiny @e280/sly lit
|
|
@@ -51,7 +51,7 @@
|
|
|
51
51
|
|
|
52
52
|
<br/><br/>
|
|
53
53
|
|
|
54
|
-
##
|
|
54
|
+
## 😎 views are for the cool kids
|
|
55
55
|
- hey, remember those `views` you got from the install snippet?
|
|
56
56
|
```ts
|
|
57
57
|
const {components, views} = shiny({theme: themes.basic})
|
|
@@ -82,7 +82,7 @@
|
|
|
82
82
|
|
|
83
83
|
<br/><br/>
|
|
84
84
|
|
|
85
|
-
##
|
|
85
|
+
## 💅 page-wide css customization
|
|
86
86
|
- put this in your `<head>` and you can customize colors and stuff
|
|
87
87
|
```html
|
|
88
88
|
<style>
|
|
@@ -101,7 +101,7 @@
|
|
|
101
101
|
|
|
102
102
|
<br/><br/>
|
|
103
103
|
|
|
104
|
-
##
|
|
104
|
+
## 🧑💻 by e280
|
|
105
105
|
reward us with github stars
|
|
106
106
|
build with us at https://e280.org/ if you're good at dev
|
|
107
107
|
|
package/package.json
CHANGED
|
@@ -9,11 +9,17 @@ import menu2Svg from "../../icons/tabler/menu-2.svg.js"
|
|
|
9
9
|
import {ShinyContext, ShinyElement} from "../framework.js"
|
|
10
10
|
|
|
11
11
|
export class ShinyDrawer extends (
|
|
12
|
-
view(use => (context: ShinyContext, options: {
|
|
12
|
+
view(use => (context: ShinyContext, options: {
|
|
13
|
+
button: boolean
|
|
14
|
+
side?: "left" | "right"
|
|
15
|
+
drawer?: Drawer
|
|
16
|
+
}) => {
|
|
17
|
+
|
|
13
18
|
use.name("shiny-drawer")
|
|
14
19
|
use.styles(context.theme, styleCss)
|
|
15
20
|
|
|
16
|
-
const button = options.button
|
|
21
|
+
const button = options.button
|
|
22
|
+
const side = options.side ?? "left"
|
|
17
23
|
const drawer = use.once(() => (options.drawer ?? new Drawer()))
|
|
18
24
|
|
|
19
25
|
use.mount(() => dom.events(window, {keydown: (event: KeyboardEvent) => {
|
|
@@ -24,7 +30,7 @@ export class ShinyDrawer extends (
|
|
|
24
30
|
dom.attrs(use.element).booleans.open = drawer.isOpen
|
|
25
31
|
|
|
26
32
|
return html`
|
|
27
|
-
<div class=shell ?data-open="${drawer.isOpen}">
|
|
33
|
+
<div class=shell ?data-open="${drawer.isOpen}" data-side="${side}">
|
|
28
34
|
<slot name=plate ?inert="${drawer.isOpen}"></slot>
|
|
29
35
|
|
|
30
36
|
<div class=clipper>
|
|
@@ -59,6 +65,7 @@ export class ShinyDrawer extends (
|
|
|
59
65
|
attrs = dom.attrs(this).spec({
|
|
60
66
|
open: Boolean,
|
|
61
67
|
button: Boolean,
|
|
68
|
+
side: String,
|
|
62
69
|
})
|
|
63
70
|
drawer = new Drawer(this.attrs.open)
|
|
64
71
|
get isOpen() { return this.drawer.isOpen }
|
|
@@ -69,6 +76,7 @@ export class ShinyDrawer extends (
|
|
|
69
76
|
.props(el => [el.context, {
|
|
70
77
|
drawer: el.drawer,
|
|
71
78
|
button: el.attrs.button,
|
|
79
|
+
side: el.attrs.side === "right" ? "right" : "left",
|
|
72
80
|
}] as const)
|
|
73
81
|
) {}
|
|
74
82
|
|
|
@@ -86,6 +86,17 @@ export default css`
|
|
|
86
86
|
}
|
|
87
87
|
}
|
|
88
88
|
|
|
89
|
+
&[data-side="right"] {
|
|
90
|
+
[part="tray"] {
|
|
91
|
+
right: 0;
|
|
92
|
+
transform: translateX(100%);
|
|
93
|
+
> button {
|
|
94
|
+
left: unset;
|
|
95
|
+
right: 100%;
|
|
96
|
+
}
|
|
97
|
+
}
|
|
98
|
+
}
|
|
99
|
+
|
|
89
100
|
slot[name="plate"] {
|
|
90
101
|
display: block;
|
|
91
102
|
width: 100%;
|
package/s/demo/demo.bundle.ts
CHANGED
|
@@ -3,8 +3,9 @@ import {css, html} from "lit"
|
|
|
3
3
|
import {dom, view} from "@e280/sly"
|
|
4
4
|
import {shiny} from "../shiny.js"
|
|
5
5
|
import {basic} from "../themes/basic.css.js"
|
|
6
|
+
import {makeLipsumDispenser} from "./utils/lipsum.js"
|
|
6
7
|
import {Demonstration} from "./views/demonstration/view.js"
|
|
7
|
-
import {
|
|
8
|
+
import { Drawer } from "../components/drawer/drawer.js"
|
|
8
9
|
|
|
9
10
|
const {views} = shiny({theme: basic})
|
|
10
11
|
|
|
@@ -59,6 +60,7 @@ dom.register({ShinyDemo: view.component(use => {
|
|
|
59
60
|
}
|
|
60
61
|
`,
|
|
61
62
|
}),
|
|
63
|
+
|
|
62
64
|
Demonstration({
|
|
63
65
|
views,
|
|
64
66
|
name: "shiny-drawer",
|
|
@@ -67,16 +69,19 @@ dom.register({ShinyDemo: view.component(use => {
|
|
|
67
69
|
`,
|
|
68
70
|
snippets: [
|
|
69
71
|
[labels.html, `
|
|
70
|
-
<shiny-drawer button>
|
|
72
|
+
<shiny-drawer button side=left>
|
|
71
73
|
<header>example</header>
|
|
72
74
|
<section slot=plate>lorem kettlebell..</section>
|
|
73
75
|
</shiny-drawer>
|
|
74
76
|
`],
|
|
75
77
|
[labels.view, `
|
|
76
|
-
ShinyDrawer
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
78
|
+
ShinyDrawer
|
|
79
|
+
.props({button: true, side: "left"})
|
|
80
|
+
.children(html\`
|
|
81
|
+
<header>example</header>
|
|
82
|
+
<section slot=plate>lorem kettlebell..</section>
|
|
83
|
+
\`)
|
|
84
|
+
.render()
|
|
80
85
|
`],
|
|
81
86
|
[labels.css, `
|
|
82
87
|
shiny-drawer {
|
|
@@ -89,7 +94,8 @@ dom.register({ShinyDemo: view.component(use => {
|
|
|
89
94
|
}
|
|
90
95
|
`],
|
|
91
96
|
],
|
|
92
|
-
content: views.ShinyDrawer
|
|
97
|
+
content: views.ShinyDrawer
|
|
98
|
+
.props({button: true})
|
|
93
99
|
.children(html`
|
|
94
100
|
<header>
|
|
95
101
|
<h2>example drawer</h2>
|
|
@@ -5,6 +5,7 @@ declare const ShinyDrawer_base: import("@e280/sly").ComponentClass<{
|
|
|
5
5
|
attrs: import("@e280/sly").AttrTypes<{
|
|
6
6
|
open: BooleanConstructor;
|
|
7
7
|
button: BooleanConstructor;
|
|
8
|
+
side: StringConstructor;
|
|
8
9
|
}>;
|
|
9
10
|
drawer: Drawer;
|
|
10
11
|
get isOpen(): boolean;
|
|
@@ -372,10 +373,11 @@ declare const ShinyDrawer_base: import("@e280/sly").ComponentClass<{
|
|
|
372
373
|
focus(options?: FocusOptions): void;
|
|
373
374
|
};
|
|
374
375
|
styles: import("lit").CSSResultGroup | undefined;
|
|
375
|
-
}, [context: ShinyContext, options
|
|
376
|
-
button
|
|
376
|
+
}, [context: ShinyContext, options: {
|
|
377
|
+
button: boolean;
|
|
378
|
+
side?: "left" | "right";
|
|
377
379
|
drawer?: Drawer;
|
|
378
|
-
}
|
|
380
|
+
}]>;
|
|
379
381
|
export declare class ShinyDrawer extends ShinyDrawer_base {
|
|
380
382
|
}
|
|
381
383
|
export {};
|
|
@@ -5,10 +5,11 @@ import styleCss from "./style.css.js";
|
|
|
5
5
|
import xSvg from "../../icons/tabler/x.svg.js";
|
|
6
6
|
import menu2Svg from "../../icons/tabler/menu-2.svg.js";
|
|
7
7
|
import { ShinyElement } from "../framework.js";
|
|
8
|
-
export class ShinyDrawer extends (view(use => (context, options
|
|
8
|
+
export class ShinyDrawer extends (view(use => (context, options) => {
|
|
9
9
|
use.name("shiny-drawer");
|
|
10
10
|
use.styles(context.theme, styleCss);
|
|
11
|
-
const button = options.button
|
|
11
|
+
const button = options.button;
|
|
12
|
+
const side = options.side ?? "left";
|
|
12
13
|
const drawer = use.once(() => (options.drawer ?? new Drawer()));
|
|
13
14
|
use.mount(() => dom.events(window, { keydown: (event) => {
|
|
14
15
|
if (event.code === "Escape")
|
|
@@ -16,7 +17,7 @@ export class ShinyDrawer extends (view(use => (context, options = {}) => {
|
|
|
16
17
|
} }));
|
|
17
18
|
dom.attrs(use.element).booleans.open = drawer.isOpen;
|
|
18
19
|
return html `
|
|
19
|
-
<div class=shell ?data-open="${drawer.isOpen}">
|
|
20
|
+
<div class=shell ?data-open="${drawer.isOpen}" data-side="${side}">
|
|
20
21
|
<slot name=plate ?inert="${drawer.isOpen}"></slot>
|
|
21
22
|
|
|
22
23
|
<div class=clipper>
|
|
@@ -51,6 +52,7 @@ export class ShinyDrawer extends (view(use => (context, options = {}) => {
|
|
|
51
52
|
attrs = dom.attrs(this).spec({
|
|
52
53
|
open: Boolean,
|
|
53
54
|
button: Boolean,
|
|
55
|
+
side: String,
|
|
54
56
|
});
|
|
55
57
|
drawer = new Drawer(this.attrs.open);
|
|
56
58
|
get isOpen() { return this.drawer.isOpen; }
|
|
@@ -61,6 +63,7 @@ export class ShinyDrawer extends (view(use => (context, options = {}) => {
|
|
|
61
63
|
.props(el => [el.context, {
|
|
62
64
|
drawer: el.drawer,
|
|
63
65
|
button: el.attrs.button,
|
|
66
|
+
side: el.attrs.side === "right" ? "right" : "left",
|
|
64
67
|
}])) {
|
|
65
68
|
}
|
|
66
69
|
//# sourceMappingURL=component.js.map
|
|
@@ -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,EAAC,MAAM,EAAC,MAAM,aAAa,CAAA;AAClC,OAAO,QAAQ,MAAM,gBAAgB,CAAA;AACrC,OAAO,IAAI,MAAM,6BAA6B,CAAA;AAC9C,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,
|
|
1
|
+
{"version":3,"file":"component.js","sourceRoot":"","sources":["../../../s/components/drawer/component.ts"],"names":[],"mappings":"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"}
|
|
@@ -85,6 +85,17 @@ export default css `
|
|
|
85
85
|
}
|
|
86
86
|
}
|
|
87
87
|
|
|
88
|
+
&[data-side="right"] {
|
|
89
|
+
[part="tray"] {
|
|
90
|
+
right: 0;
|
|
91
|
+
transform: translateX(100%);
|
|
92
|
+
> button {
|
|
93
|
+
left: unset;
|
|
94
|
+
right: 100%;
|
|
95
|
+
}
|
|
96
|
+
}
|
|
97
|
+
}
|
|
98
|
+
|
|
88
99
|
slot[name="plate"] {
|
|
89
100
|
display: block;
|
|
90
101
|
width: 100%;
|
|
@@ -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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAkHjB,CAAA"}
|
package/x/demo/demo.bundle.js
CHANGED
|
@@ -2,8 +2,8 @@ import { css, html } from "lit";
|
|
|
2
2
|
import { dom, view } from "@e280/sly";
|
|
3
3
|
import { shiny } from "../shiny.js";
|
|
4
4
|
import { basic } from "../themes/basic.css.js";
|
|
5
|
-
import { Demonstration } from "./views/demonstration/view.js";
|
|
6
5
|
import { makeLipsumDispenser } from "./utils/lipsum.js";
|
|
6
|
+
import { Demonstration } from "./views/demonstration/view.js";
|
|
7
7
|
const { views } = shiny({ theme: basic });
|
|
8
8
|
const labels = {
|
|
9
9
|
html: "html web component",
|
|
@@ -61,16 +61,19 @@ dom.register({ ShinyDemo: view.component(use => {
|
|
|
61
61
|
`,
|
|
62
62
|
snippets: [
|
|
63
63
|
[labels.html, `
|
|
64
|
-
<shiny-drawer button>
|
|
64
|
+
<shiny-drawer button side=left>
|
|
65
65
|
<header>example</header>
|
|
66
66
|
<section slot=plate>lorem kettlebell..</section>
|
|
67
67
|
</shiny-drawer>
|
|
68
68
|
`],
|
|
69
69
|
[labels.view, `
|
|
70
|
-
ShinyDrawer
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
70
|
+
ShinyDrawer
|
|
71
|
+
.props({button: true, side: "left"})
|
|
72
|
+
.children(html\`
|
|
73
|
+
<header>example</header>
|
|
74
|
+
<section slot=plate>lorem kettlebell..</section>
|
|
75
|
+
\`)
|
|
76
|
+
.render()
|
|
74
77
|
`],
|
|
75
78
|
[labels.css, `
|
|
76
79
|
shiny-drawer {
|
|
@@ -83,7 +86,8 @@ dom.register({ ShinyDemo: view.component(use => {
|
|
|
83
86
|
}
|
|
84
87
|
`],
|
|
85
88
|
],
|
|
86
|
-
content: views.ShinyDrawer
|
|
89
|
+
content: views.ShinyDrawer
|
|
90
|
+
.props({ button: true })
|
|
87
91
|
.children(html `
|
|
88
92
|
<header>
|
|
89
93
|
<h2>example drawer</h2>
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"demo.bundle.js","sourceRoot":"","sources":["../../s/demo/demo.bundle.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,GAAG,EAAE,IAAI,EAAC,MAAM,KAAK,CAAA;AAC7B,OAAO,EAAC,GAAG,EAAE,IAAI,EAAC,MAAM,WAAW,CAAA;AACnC,OAAO,EAAC,KAAK,EAAC,MAAM,aAAa,CAAA;AACjC,OAAO,EAAC,KAAK,EAAC,MAAM,wBAAwB,CAAA;AAC5C,OAAO,EAAC,
|
|
1
|
+
{"version":3,"file":"demo.bundle.js","sourceRoot":"","sources":["../../s/demo/demo.bundle.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,GAAG,EAAE,IAAI,EAAC,MAAM,KAAK,CAAA;AAC7B,OAAO,EAAC,GAAG,EAAE,IAAI,EAAC,MAAM,WAAW,CAAA;AACnC,OAAO,EAAC,KAAK,EAAC,MAAM,aAAa,CAAA;AACjC,OAAO,EAAC,KAAK,EAAC,MAAM,wBAAwB,CAAA;AAC5C,OAAO,EAAC,mBAAmB,EAAC,MAAM,mBAAmB,CAAA;AACrD,OAAO,EAAC,aAAa,EAAC,MAAM,+BAA+B,CAAA;AAG3D,MAAM,EAAC,KAAK,EAAC,GAAG,KAAK,CAAC,EAAC,KAAK,EAAE,KAAK,EAAC,CAAC,CAAA;AAErC,MAAM,MAAM,GAAG;IACd,IAAI,EAAE,oBAAoB;IAC1B,IAAI,EAAE,UAAU;IAChB,GAAG,EAAE,YAAY;CACjB,CAAA;AAED,MAAM,MAAM,GAAG,CAAC,GAAG,EAAE;IACpB,MAAM,SAAS,GAAG,mBAAmB,EAAE,CAAA;IACvC,OAAO,GAAG,EAAE,CAAC,SAAS,CAAC,UAAU,EAAE,CAAA;AACpC,CAAC,CAAC,EAAE,CAAA;AAEJ,GAAG,CAAC,QAAQ,CAAC,EAAC,SAAS,EAAE,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,EAAE;QAC7C,GAAG,CAAC,MAAM,CAAC,GAAG,CAAA;;;;;;EAMb,CAAC,CAAA;QAEF,OAAO;YACN,aAAa,CAAC;gBACb,KAAK;gBACL,IAAI,EAAE,YAAY;gBAClB,OAAO,EAAE,IAAI,CAAA;;IAEZ;gBACD,QAAQ,EAAE;oBACT,CAAC,MAAM,CAAC,IAAI,EAAE;;KAEb,CAAC;oBACF,CAAC,MAAM,CAAC,IAAI,EAAE;;KAEb,CAAC;oBACF,CAAC,MAAM,CAAC,GAAG,EAAE;;;;;;;;KAQZ,CAAC;iBACF;gBACD,OAAO,EAAE,KAAK,CAAC,SAAS,CAAC,aAAa,CAAC;gBACvC,KAAK,EAAE,GAAG,CAAA;;;;IAIT;aACD,CAAC;YAEF,aAAa,CAAC;gBACb,KAAK;gBACL,IAAI,EAAE,cAAc;gBACpB,OAAO,EAAE,IAAI,CAAA;;IAEZ;gBACD,QAAQ,EAAE;oBACT,CAAC,MAAM,CAAC,IAAI,EAAE;;;;;KAKb,CAAC;oBACF,CAAC,MAAM,CAAC,IAAI,EAAE;;;;;;;;KAQb,CAAC;oBACF,CAAC,MAAM,CAAC,GAAG,EAAE;;;;;;;;;KASZ,CAAC;iBACF;gBACD,OAAO,EAAE,KAAK,CAAC,WAAW;qBACxB,KAAK,CAAC,EAAC,MAAM,EAAE,IAAI,EAAC,CAAC;qBACrB,QAAQ,CAAC,IAAI,CAAA;;;;wBAIM,MAAM,EAAE;;;wBAGR,MAAM,EAAE;;KAE3B,CAAC;qBACD,MAAM,EAAE;gBACV,KAAK,EAAE,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAiCT;aACD,CAAC;SACF,CAAA;IACF,CAAC,CAAC,EAAC,CAAC,CAAA;AAEJ,OAAO,CAAC,GAAG,CAAC,QAAQ,CAAC,CAAA"}
|
|
@@ -176,6 +176,17 @@ ${B}
|
|
|
176
176
|
}
|
|
177
177
|
}
|
|
178
178
|
|
|
179
|
+
&[data-side="right"] {
|
|
180
|
+
[part="tray"] {
|
|
181
|
+
right: 0;
|
|
182
|
+
transform: translateX(100%);
|
|
183
|
+
> button {
|
|
184
|
+
left: unset;
|
|
185
|
+
right: 100%;
|
|
186
|
+
}
|
|
187
|
+
}
|
|
188
|
+
}
|
|
189
|
+
|
|
179
190
|
slot[name="plate"] {
|
|
180
191
|
display: block;
|
|
181
192
|
width: 100%;
|
|
@@ -193,19 +204,19 @@ ${B}
|
|
|
193
204
|
}
|
|
194
205
|
}
|
|
195
206
|
|
|
196
|
-
`;var Qe=_`<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-x"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M18 6l-12 12" /><path d="M6 6l12 12" /></svg>`;var Ge=_`<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-menu-2"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M4 6l16 0" /><path d="M4 12l16 0" /><path d="M4 18l16 0" /></svg>`;var Xt=class extends g(t=>(e,s
|
|
197
|
-
<div class=shell ?data-open="${
|
|
198
|
-
<slot name=plate ?inert="${
|
|
207
|
+
`;var Qe=_`<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-x"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M18 6l-12 12" /><path d="M6 6l12 12" /></svg>`;var Ge=_`<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-menu-2"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M4 6l16 0" /><path d="M4 12l16 0" /><path d="M4 18l16 0" /></svg>`;var Xt=class extends g(t=>(e,s)=>{t.name("shiny-drawer"),t.styles(e.theme,Ke);let o=s.button,i=s.side??"left",n=t.once(()=>s.drawer??new ft);return t.mount(()=>u.events(window,{keydown:c=>{c.code==="Escape"&&n.close()}})),u.attrs(t.element).booleans.open=n.isOpen,y`
|
|
208
|
+
<div class=shell ?data-open="${n.isOpen}" data-side="${i}">
|
|
209
|
+
<slot name=plate ?inert="${n.isOpen}"></slot>
|
|
199
210
|
|
|
200
211
|
<div class=clipper>
|
|
201
|
-
<div part=blanket @click="${
|
|
212
|
+
<div part=blanket @click="${n.close}" ?inert="${!n.isOpen}"></div>
|
|
202
213
|
|
|
203
214
|
<div part=tray>
|
|
204
|
-
<slot ?inert="${!
|
|
215
|
+
<slot ?inert="${!n.isOpen}"></slot>
|
|
205
216
|
|
|
206
217
|
${o?y`
|
|
207
|
-
<button @click="${
|
|
208
|
-
${
|
|
218
|
+
<button @click="${n.toggle}">
|
|
219
|
+
${n.isOpen?y`
|
|
209
220
|
<slot name=button-x>
|
|
210
221
|
${Qe}
|
|
211
222
|
</slot>
|
|
@@ -219,7 +230,7 @@ ${B}
|
|
|
219
230
|
</div>
|
|
220
231
|
</div>
|
|
221
232
|
</div>
|
|
222
|
-
`}).component(class extends R{attrs=u.attrs(this).spec({open:Boolean,button:Boolean});drawer=new ft(this.attrs.open);get isOpen(){return this.drawer.isOpen}get toggle(){return this.drawer.toggle}get open(){return this.drawer.open}get close(){return this.drawer.close}}).props(t=>[t.context,{drawer:t.drawer,button:t.attrs.button}]){};var tr=d`
|
|
233
|
+
`}).component(class extends R{attrs=u.attrs(this).spec({open:Boolean,button:Boolean,side:String});drawer=new ft(this.attrs.open);get isOpen(){return this.drawer.isOpen}get toggle(){return this.drawer.toggle}get open(){return this.drawer.open}get close(){return this.drawer.close}}).props(t=>[t.context,{drawer:t.drawer,button:t.attrs.button,side:t.attrs.side==="right"?"right":"left"}]){};var tr=d`
|
|
223
234
|
|
|
224
235
|
button {
|
|
225
236
|
padding: 1em;
|
|
@@ -230,7 +241,7 @@ button {
|
|
|
230
241
|
<button @click="${()=>{o.value++}}">
|
|
231
242
|
${o()}
|
|
232
243
|
</button>
|
|
233
|
-
`}).component(class extends R{attrs=u.attrs(this).spec({start:Number})}).props(t=>[t.context,t.attrs.start??1]){};var er={ShinyCopy:Ft,ShinyDrawer:Xt,ShinyExample:Yt};function rr(r){let t=Xe(r,er),e=Fe(t);return{components:t,views:e}}var sr=d`
|
|
244
|
+
`}).component(class extends R{attrs=u.attrs(this).spec({start:Number})}).props(t=>[t.context,t.attrs.start??1]){};var er={ShinyCopy:Ft,ShinyDrawer:Xt,ShinyExample:Yt};function rr(r){let t=Xe(r,er),e=Fe(t);return{components:t,views:e}}var sr=()=>new Et(()=>["lorem kettlebell dolor sit amet, mountain squats consectetur trail-running. adipiscing deadlift elit, sed do 45lb turkish get-up eiusmod tempor incididunt ut hike magna aliqua. ut enim ad minim clean & press, quis nostrud exercitation lunges ullamco kettlebell snatch trailhead nisi ut aliquip ex dolore summit irure dolor.","lorem protein dolor sit amet, creatine scoop elit shaker bottle tempor. grilled steak magna keto-fasting culpa, carb-loading perspiciatis cheat day. whey isolate dolor sit macros elit, intermittent fasting tempor electrolyte magna; barefoot shoes culpa, liver perspiciatis ancestral squat rack gospel. lorem bulking dolor sit cut elit, tdee tracker tempor calorie deficit magna; chicken breast culpa gatorade perspiciatis meal prep.","lorem caffeine dolor sit amet, double espresso elit cold brew tempor jitter. adderall magna focus culpa, lion\u2019s mane perspiciatis nootropic. nicotine gum dolor sit vape elit, dopamine hit tempor buzz magna; lsd microdosing culpa, productivity perspiciatis agile sprint. lorem latte dolor sit drip elit, french press tempor aeropress magna; insomnia culpa, circadian rhythm perspiciatis blue light filter.","lorem arch dolor sit amet, pacman -Syu elit rolling release tempor breakage. i3-gaps commodo tiling, bspwm magna culpa xinitrc. alias neovim configs in .dotfiles forest, r/unixporn veniam rice showcase perspiciatis.","lorem authlocal dolor sit amet, user-sovereign identity elit, cryptographic tempor signatures. ed25519 magna keypair culpa, elliptic perspiciatis handshake ut zero-knowledge proof. decentralized login elit mnemonic seed tempor recovery phrase. DID magna alias culpa federation, lorem oauth2 perspiciatis antiquated.","lorem webgpu dolor sit amet, fragment shader elit vertex buffer tempor pipeline; bindgroup magna sampler culpa, wgsl perspiciatis alignment bug. compute pass workgroup barrier magna, mipmap cascade culpa drawcall instancing overflow. spir-v dolor sit wasm elit, canvas context lost magna; fallback webgl2 perspiciatis, polyfill slowpath dolore, glsl antique culpa extension hell 144hz tearing. command encoder perspiciatis out-of-memory, chromium nightly.","lorem sedentary dolor sit amet, infinite scroll elit chair-bound tempor. commit marathon magna carpal tunnel culpa, caffeine perspiciatis heartbeat irregular. lorem backlog dolor sit ticket elit, jira sprint tempor sedentary slump magna; gym membership culpa expired, standing desk perspiciatis unused. lorem procrastination dolor sit youtube elit, keyboard crumbs tempor pizza box magna; cardio avoidant culpa, hike someday perspiciatis maybe."]);var or=d`
|
|
234
245
|
|
|
235
246
|
:host {
|
|
236
247
|
position: relative;
|
|
@@ -335,7 +346,7 @@ button {
|
|
|
335
346
|
border: 1px dashed #fff4;
|
|
336
347
|
}
|
|
337
348
|
|
|
338
|
-
`;var pe=g(r=>t=>{r.name(t.name),r.styles(G,
|
|
349
|
+
`;var pe=g(r=>t=>{r.name(t.name),r.styles(G,or,t.style);function e(s,o){let i=Oe(o).trim();return y`
|
|
339
350
|
<div class=codeblock>
|
|
340
351
|
<div class=zone>
|
|
341
352
|
<h3>${s}</h3>
|
|
@@ -355,7 +366,7 @@ button {
|
|
|
355
366
|
<div class=content part=content>
|
|
356
367
|
${t.content}
|
|
357
368
|
</div>
|
|
358
|
-
`});var
|
|
369
|
+
`});var{views:Zt}=rr({theme:G}),tt={html:"html web component",view:"sly view",css:"custom css"},ir=(()=>{let r=sr();return()=>r.takeRandom()})();u.register({ShinyDemo:g.component(r=>(r.styles(d`
|
|
359
370
|
:host {
|
|
360
371
|
display: flex;
|
|
361
372
|
flex-direction: column;
|
|
@@ -382,15 +393,18 @@ button {
|
|
|
382
393
|
`}),pe({views:Zt,name:"shiny-drawer",explain:y`
|
|
383
394
|
<p>slide-out panel with optional burger button</p>
|
|
384
395
|
`,snippets:[[tt.html,`
|
|
385
|
-
<shiny-drawer button>
|
|
396
|
+
<shiny-drawer button side=left>
|
|
386
397
|
<header>example</header>
|
|
387
398
|
<section slot=plate>lorem kettlebell..</section>
|
|
388
399
|
</shiny-drawer>
|
|
389
400
|
`],[tt.view,`
|
|
390
|
-
ShinyDrawer
|
|
391
|
-
|
|
392
|
-
|
|
393
|
-
|
|
401
|
+
ShinyDrawer
|
|
402
|
+
.props({button: true, side: "left"})
|
|
403
|
+
.children(html\`
|
|
404
|
+
<header>example</header>
|
|
405
|
+
<section slot=plate>lorem kettlebell..</section>
|
|
406
|
+
\`)
|
|
407
|
+
.render()
|
|
394
408
|
`],[tt.css,`
|
|
395
409
|
shiny-drawer {
|
|
396
410
|
--button-size: 2em;
|
|
@@ -400,7 +414,7 @@ button {
|
|
|
400
414
|
--blanket-backdrop-filter: blur(0.5em);
|
|
401
415
|
--inactive-opacity: 0.5;
|
|
402
416
|
}
|
|
403
|
-
`]],content:Zt.ShinyDrawer.props().children(y`
|
|
417
|
+
`]],content:Zt.ShinyDrawer.props({button:!0}).children(y`
|
|
404
418
|
<header>
|
|
405
419
|
<h2>example drawer</h2>
|
|
406
420
|
<p>you can put any content in here.</p>
|