@e280/shiny 0.1.0-2 → 0.1.0-4

package/x/demo/demo.bundle.js

@@ -3,7 +3,17 @@ import { dom, view } from "@e280/sly";
 import { shiny } from "../shiny.js";
 import { basic } from "../themes/basic.css.js";
 import { Demonstration } from "./views/demonstration/view.js";
+import { makeLipsumDispenser } from "./utils/lipsum.js";
 const { views } = shiny({ theme: basic });
+const labels = {
+    html: "html web component",
+    view: "sly view",
+    css: "custom css",
+};
+const lipsum = (() => {
+    const dispenser = makeLipsumDispenser();
+    return () => dispenser.takeRandom();
+})();
 dom.register({ ShinyDemo: view.component(use => {
         use.styles(css `
 		:host {
@@ -11,10 +21,6 @@ dom.register({ ShinyDemo: view.component(use => {
 			flex-direction: column;
 			gap: 1em;
 		}
-
-		[view="shiny-copy"]::part(content) {
-			font-size: 4em;
-		}
 	`);
         return [
             Demonstration({
@@ -23,13 +29,106 @@ dom.register({ ShinyDemo: view.component(use => {
                 explain: html `
 				<p>button for click-to-copy text</p>
 			`,
-                exampleComponent: `
-				<shiny-copy text="hello world"></shiny-copy>
+                snippets: [
+                    [labels.html, `
+					<shiny-copy text="hello world"></shiny-copy>
+				`],
+                    [labels.view, `
+					ShinyCopy("hello world")
+				`],
+                    [labels.css, `
+					shiny-copy {
+						font-size: 1em;
+						--good: #0f4;
+						--bad: #f40;
+						--invalid: #8888;
+						--inactive-opacity: 0.5;
+					}
+				`],
+                ],
+                content: views.ShinyCopy("hello world"),
+                style: css `
+				.content sly-view {
+					font-size: 4em;
+				}
+			`,
+            }),
+            Demonstration({
+                views,
+                name: "shiny-drawer",
+                explain: html `
+				<p>slide-out panel with optional burger button</p>
 			`,
-                exampleView: `
-				ShinyCopy("hello world")
+                snippets: [
+                    [labels.html, `
+					<shiny-drawer button>
+						<header>example</header>
+						<section slot=plate>lorem kettlebell..</section>
+					</shiny-drawer>
+				`],
+                    [labels.view, `
+					ShinyDrawer.props().children(html\`
+						<header>example</header>
+						<section slot=plate>lorem kettlebell..</section>
+					\`).render()
+				`],
+                    [labels.css, `
+					shiny-drawer {
+						--button-size: 2em;
+						--drawer-height: auto;
+						--anim-duration: 200ms;
+						--blanket-bg: #1118;
+						--blanket-backdrop-filter: blur(0.5em);
+						--inactive-opacity: 0.5;
+					}
+				`],
+                ],
+                content: views.ShinyDrawer.props()
+                    .children(html `
+					<header>
+						<h2>example drawer</h2>
+						<p>you can put any content in here.</p>
+						<p class=lipsum>${lipsum()}</p>
+					</header>
+					<section slot=plate>
+						<p class=lipsum>${lipsum()}</p>
+					</section>
+				`)
+                    .render(),
+                style: css `
+				.content sly-view {
+					border-radius: 0.5em;
+					overflow: hidden;
+					--button-size: 3em;
+
+					p.lipsum {
+						opacity: 0.7;
+						font-family: serif;
+						font-style: italic;
+					}
+
+					header {
+						padding: 0.5em;
+						border-bottom-right-radius: 0.5em;
+						background: linear-gradient(
+							to top right,
+							#00a9dd69,
+							#70ffd77a
+						);
+						> * + * { margin-top: 0.5em; }
+					}
+
+					section {
+						display: flex;
+						flex-direction: column;
+						justify-content: center;
+						min-height: 100%;
+						padding: 1em;
+						padding-top: 3em;
+						> * + * { margin-top: 0.5em; }
+					}
+				}
 			`,
-                content: views.ShinyCopy("hello world"),
             }),
         ];
     }) });

package/x/demo/demo.bundle.js.map

@@ -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,aAAa,EAAC,MAAM,+BAA+B,CAAA;AAE3D,MAAM,EAAC,KAAK,EAAC,GAAG,KAAK,CAAC,EAAC,KAAK,EAAE,KAAK,EAAC,CAAC,CAAA;AAErC,GAAG,CAAC,QAAQ,CAAC,EAAC,SAAS,EAAE,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,EAAE;QAC7C,GAAG,CAAC,MAAM,CAAC,GAAG,CAAA;;;;;;;;;;EAUb,CAAC,CAAA;QAEF,OAAO;YACN,aAAa,CAAC;gBACb,KAAK;gBACL,IAAI,EAAE,YAAY;gBAClB,OAAO,EAAE,IAAI,CAAA;;IAEZ;gBACD,gBAAgB,EAAE;;IAEjB;gBACD,WAAW,EAAE;;IAEZ;gBACD,OAAO,EAAE,KAAK,CAAC,SAAS,CAAC,aAAa,CAAC;aACvC,CAAC;SACF,CAAA;IACF,CAAC,CAAC,EAAC,CAAC,CAAA;AAEJ,OAAO,CAAC,GAAG,CAAC,QAAQ,CAAC,CAAA"}
+{"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,aAAa,EAAC,MAAM,+BAA+B,CAAA;AAC3D,OAAO,EAAE,mBAAmB,EAAE,MAAM,mBAAmB,CAAA;AAEvD,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;YACF,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;;;;;KAKb,CAAC;oBACF,CAAC,MAAM,CAAC,GAAG,EAAE;;;;;;;;;KASZ,CAAC;iBACF;gBACD,OAAO,EAAE,KAAK,CAAC,WAAW,CAAC,KAAK,EAAE;qBAChC,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"}