@e280/shiny 0.1.0-11 → 0.1.0-12

package/x/demo/demo.bundle.js

@@ -1,22 +1,10 @@
-import { css, html } from "lit";
+import { css } from "lit";
 import { dom, view } from "@e280/sly";
-import { shiny } from "../shiny.js";
-import { auraViews } from "./aura-views.js";
-import { plain } from "../themes/plain.css.js";
-import { makeLipsumDispenser } from "./utils/lipsum.js";
-import { TabControl } from "../components/tabs/control.js";
-import { Demonstration } from "./views/demonstration/view.js";
-const viewsets = [
-    { label: "aura", views: auraViews },
-    { label: "plain", views: shiny({ theme: plain }).views },
-];
-const labels = {
-    html: { button: "html", text: "html web component" },
-    view: { button: "view", text: "sly view" },
-    css: { button: "css", text: "custom css" },
-};
-const dispenser = makeLipsumDispenser();
-const lipsum = () => dispenser.takeFirst();
+import { lipsumDispenser } from "./lipsum.js";
+import { copyShowcase } from "../components/copy/showcase.js";
+import { tabsShowcase } from "../components/tabs/showcase.js";
+import { buttonShowcase } from "../components/button/showcase.js";
+import { drawerShowcase } from "../components/drawer/showcase.js";
 dom.register({ ShinyDemo: view.component(use => {
         use.styles(css `
 		:host {
@@ -42,262 +30,13 @@ dom.register({ ShinyDemo: view.component(use => {
 			}
 		}
 	`);
-        const tabControl = use.once(() => new TabControl(0));
-        const $viewset = use.derived(() => viewsets.at(tabControl.$index()));
-        const views = $viewset().views;
-        dispenser.takeAll();
-        const demonstrations = [
-            Demonstration({
-                name: "button",
-                explain: html `
-				<p>clicky-clacky pressy button.</p>
-			`,
-                snippets: [
-                    [labels.html, `
-					<shiny-button>hello</shiny-button>
-				`],
-                    [labels.view, `
-					ShinyButton
-						.props()
-						.children("hello")
-						.render()
-				`],
-                    [labels.css, `
-					shiny-button {
-						font-size: 1em;
-						--happy: #0fa;
-						--angry: #f50;
-						--lame: #8888;
-						--inactive-opacity: 0.5;
-					}
-				`],
-                ],
-                content: [
-                    views.ShinyButton.props()
-                        .children("button")
-                        .render(),
-                    views.ShinyButton.props()
-                        .attr("gradient", true)
-                        .children("gradient")
-                        .render(),
-                    views.ShinyButton.props()
-                        .attr("angry", true)
-                        .attr("gradient", true)
-                        .children("angry")
-                        .render(),
-                    views.ShinyButton.props()
-                        .attr("happy", true)
-                        .attr("gradient", true)
-                        .children("happy")
-                        .render(),
-                    views.ShinyButton.props()
-                        .attr("zesty", true)
-                        .attr("gradient", true)
-                        .children("zesty")
-                        .render(),
-                    views.ShinyButton.props()
-                        .attr("sad", true)
-                        .attr("gradient", true)
-                        .children("sad")
-                        .render(),
-                    views.ShinyButton.props()
-                        .attr("quirky", true)
-                        .attr("gradient", true)
-                        .children("quirky")
-                        .render(),
-                    views.ShinyButton.props()
-                        .attr("plain", true)
-                        .children("plain")
-                        .render(),
-                ],
-                style: css `
-				.content {
-					flex-direction: row;
-					flex-wrap: wrap;
-					align-content: center;
-					gap: 0.5em;
-
-					sly-view {
-						font-size: 1.2em;
-					}
-				}
-			`,
-            }),
-            Demonstration({
-                name: "tabs",
-                explain: html `
-				<p>button bar. panels optional.</p>
-			`,
-                snippets: [
-                    [labels.html, `
-					<shiny-tabs>
-						<shiny-button>tab1</shiny-button>
-						<shiny-button>tab2</shiny-button>
-						<shiny-button>tab3</shiny-button>
-						<div slot=panel>panel1</div>
-						<div slot=panel>panel2</div>
-						<div slot=panel>panel3</div>
-					</shiny-tabs>
-				`],
-                    [labels.view, `
-					ShinyTabs
-						.props()
-						.children(html\`
-							\${ShinyButton.props()
-								.children("tab1").render()}
-							\${ShinyButton.props()
-								.children("tab2").render()}
-							\${ShinyButton.props()
-								.children("tab3").render()}
-							<div slot=panel>panel1</div>
-							<div slot=panel>panel2</div>
-							<div slot=panel>panel3</div>
-						\`)
-						.render()
-				`],
-                    [labels.css, `
-					shiny-tabs {
-						&::part(tabs) {}
-						&::part(panels) {}
-						> shiny-button {}
-					}
-				`],
-                ],
-                content: views.ShinyTabs
-                    .props()
-                    .children(html `
-					${views.ShinyButton.props().children("tab1").render()}
-					${views.ShinyButton.props().children("tab2").render()}
-					${views.ShinyButton.props().children("tab3").render()}
-					<p slot=panel class=lipsum>${lipsum()}</p>
-					<p slot=panel class=lipsum>${lipsum()}</p>
-					<p slot=panel class=lipsum>${lipsum()}</p>
-				`)
-                    .render(),
-                style: css `
-				.content {
-					justify-content: start;
-					p { margin-top: 0.5em; }
-				}
-			`,
-            }),
-            Demonstration({
-                name: "copy",
-                explain: html `
-				<p>click-to-copy text button.</p>
-			`,
-                snippets: [
-                    [labels.html, `
-					<shiny-copy text="hello world"></shiny-copy>
-				`],
-                    [labels.view, `
-					ShinyCopy("hello world")
-				`],
-                    [labels.css, `
-					shiny-copy {
-						font-size: 1em;
-						--happy: #0fa;
-						--angry: #f50;
-						--lame: #8888;
-						--inactive-opacity: 0.5;
-					}
-				`],
-                ],
-                content: views.ShinyCopy("hello world"),
-                style: css `
-				.content sly-view {
-					font-size: 4em;
-				}
-			`,
-            }),
-            Demonstration({
-                name: "drawer",
-                explain: html `
-				<p>slide-out panel. button optional.</p>
-			`,
-                snippets: [
-                    [labels.html, `
-					<shiny-drawer button side=left>
-						<header>example</header>
-						<section slot=plate>
-							lorem kettlebell..
-						</section>
-					</shiny-drawer>
-				`],
-                    [labels.view, `
-					ShinyDrawer
-						.props({button: true, side: "left"})
-						.children(html\`
-							<header>example</header>
-							<section slot=plate>
-								lorem kettlebell..
-							</section>
-						\`)
-						.render()
-				`],
-                    [labels.css, `
-					shiny-drawer {
-						--button-size: 2em;
-						--anim-duration: 200ms;
-						--blanket-backdrop-filter: blur(0.5em);
-						--blanket-bg: color-mix(
-							in oklab,
-							transparent,
-							var(--bg)
-						);
-					}
-				`],
-                ],
-                content: views.ShinyDrawer
-                    .props({ button: true })
-                    .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>
-						<p class=lipsum>${lipsum()}</p>
-					</section>
-				`)
-                    .render(),
-                style: css `
-				.content sly-view {
-					border-radius: 0.5em;
-					overflow: hidden;
-					--button-size: 3em;
-
-					header {
-						> * + * { 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; }
-					}
-				}
-			`,
-            }),
+        lipsumDispenser.takeAll();
+        return [
+            buttonShowcase(),
+            copyShowcase(),
+            drawerShowcase(),
+            tabsShowcase(),
         ];
-        return html `
-		<div class=themes>
-			<span>theme</span>
-			${auraViews.ShinyTabs
-            .props(tabControl)
-            .children(viewsets.map(viewset => html `
-					${auraViews.ShinyButton.props().children(viewset.label).render()}
-				`))
-            .render()}
-		</div>
-
-		${demonstrations}
-	`;
     }) });
-console.log("✨shiny");
+console.log("✨shiny✨");
 //# sourceMappingURL=demo.bundle.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"demo.bundle.js","sourceRoot":"","sources":["../../s/demo/demo.bundle.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"demo.bundle.js","sourceRoot":"","sources":["../../s/demo/demo.bundle.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,GAAG,EAAC,MAAM,KAAK,CAAA;AACvB,OAAO,EAAC,GAAG,EAAE,IAAI,EAAC,MAAM,WAAW,CAAA;AACnC,OAAO,EAAC,eAAe,EAAC,MAAM,aAAa,CAAA;AAC3C,OAAO,EAAC,YAAY,EAAC,MAAM,gCAAgC,CAAA;AAC3D,OAAO,EAAC,YAAY,EAAC,MAAM,gCAAgC,CAAA;AAC3D,OAAO,EAAC,cAAc,EAAC,MAAM,kCAAkC,CAAA;AAC/D,OAAO,EAAC,cAAc,EAAC,MAAM,kCAAkC,CAAA;AAE/D,GAAG,CAAC,QAAQ,CAAC,EAAC,SAAS,EAAE,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,EAAE;QAC7C,GAAG,CAAC,MAAM,CAAC,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;EAuBb,CAAC,CAAA;QAEF,eAAe,CAAC,OAAO,EAAE,CAAA;QAEzB,OAAO;YACN,cAAc,EAAE;YAChB,YAAY,EAAE;YACd,cAAc,EAAE;YAChB,YAAY,EAAE;SACd,CAAA;IACF,CAAC,CAAC,EAAC,CAAC,CAAA;AAEJ,OAAO,CAAC,GAAG,CAAC,SAAS,CAAC,CAAA"}