@e280/shiny 0.1.0-1 → 0.1.0-10

package/x/demo/aura-views.js

@@ -0,0 +1,4 @@
+import { shiny } from "../shiny.js";
+import { aura } from "../themes/aura.css.js";
+export const auraViews = shiny({ theme: aura }).views;
+//# sourceMappingURL=aura-views.js.map

package/x/demo/aura-views.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"aura-views.js","sourceRoot":"","sources":["../../s/demo/aura-views.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,KAAK,EAAC,MAAM,aAAa,CAAA;AACjC,OAAO,EAAC,IAAI,EAAC,MAAM,uBAAuB,CAAA;AAE1C,MAAM,CAAC,MAAM,SAAS,GAAG,KAAK,CAAC,EAAC,KAAK,EAAE,IAAI,EAAC,CAAC,CAAC,KAAK,CAAA"}

package/x/demo/demo.bundle.js

@@ -1,9 +1,22 @@
 import { css, html } from "lit";
 import { dom, view } from "@e280/sly";
-import { themes } from "../themes/index.js";
-import { themeViews } from "../ui/themers.js";
+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 views = themeViews(themes.basic);
+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();
 dom.register({ ShinyDemo: view.component(use => {
         use.styles(css `
 		:host {
@@ -12,26 +25,197 @@ dom.register({ ShinyDemo: view.component(use => {
 			gap: 1em;
 		}
 
-		[view="shiny-copy"]::part(content) {
-			font-size: 4em;
+		.themes {
+			display: flex;
+			justify-content: end;
+			gap: 0.5em;
+
+			span {
+				font-size: 1.2em;
+				opacity: 0.5;
+				font-family: serif;
+				font-style: italic;
+			}
+
+			[view="shiny-tabs"] {
+				display: flex;
+			}
 		}
 	`);
-        return [
+        const tabControl = use.once(() => new TabControl(0));
+        const $viewset = use.derived(() => viewsets.at(tabControl.$index()));
+        const views = $viewset().views;
+        dispenser.takeAll();
+        const demonstrations = [
             Demonstration({
-                views,
                 name: "shiny-copy",
                 explain: html `
-				<p>button for click-to-copy text</p>
+				<p>click-to-copy text button.</p>
 			`,
-                exampleView: `
-				ShinyCopy("hello world")
+                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;
+				}
 			`,
-                exampleComponent: `
-				<shiny-copy text="hello world"></shiny-copy>
+            }),
+            Demonstration({
+                name: "shiny-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; }
+					}
+				}
+			`,
+            }),
+            Demonstration({
+                name: "shiny-tabs",
+                explain: html `
+				<p>button bar. panels optional.</p>
+			`,
+                snippets: [
+                    [labels.html, `
+					<shiny-tabs>
+						<button>tab1</button>
+						<button>tab2</button>
+						<button>tab3</button>
+						<div slot=panel>panel1</div>
+						<div slot=panel>panel2</div>
+						<div slot=panel>panel3</div>
+					</shiny-tabs>
+				`],
+                    [labels.view, `
+					ShinyTabs
+						.props()
+						.children(html\`
+							<button>tab1</button>
+							<button>tab2</button>
+							<button>tab3</button>
+							<div slot=panel>panel1</div>
+							<div slot=panel>panel2</div>
+							<div slot=panel>panel3</div>
+						\`)
+						.render()
+				`],
+                    [labels.css, `
+					shiny-tabs::part(tabs) {}
+					shiny-tabs::part(panels) {}
+				`],
+                ],
+                content: views.ShinyTabs
+                    .props()
+                    .children(html `
+					<button>tab1</button>
+					<button>tab2</button>
+					<button>tab3</button>
+					<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; }
+				}
 			`,
-                content: views.ShinyCopy("hello world"),
             }),
         ];
+        return html `
+		<div class=themes>
+			<span>theme</span>
+			${auraViews.ShinyTabs
+            .props(tabControl)
+            .children(viewsets.map(viewset => html `
+					<button>${viewset.label}</button>
+				`))
+            .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":"AACA,OAAO,EAAC,GAAG,EAAE,IAAI,EAAC,MAAM,KAAK,CAAA;AAC7B,OAAO,EAAC,GAAG,EAAE,IAAI,EAAC,MAAM,WAAW,CAAA;AACnC,OAAO,EAAC,MAAM,EAAC,MAAM,oBAAoB,CAAA;AACzC,OAAO,EAAC,UAAU,EAAC,MAAM,kBAAkB,CAAA;AAC3C,OAAO,EAAC,aAAa,EAAC,MAAM,+BAA+B,CAAA;AAE3D,MAAM,KAAK,GAAG,UAAU,CAAC,MAAM,CAAC,KAAK,CAAC,CAAA;AAEtC,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,WAAW,EAAE;;IAEZ;gBACD,gBAAgB,EAAE;;IAEjB;gBACD,OAAO,EAAE,KAAK,CAAC,SAAS,CAAC,aAAa,CAAC;aACvC,CAAC;SACF,CAAA;IACF,CAAC,CAAC,EAAC,CAAC,CAAA;AAEJ,OAAO,CAAC,GAAG,CAAC,SAAS,CAAC,CAAA"}
+{"version":3,"file":"demo.bundle.js","sourceRoot":"","sources":["../../s/demo/demo.bundle.ts"],"names":[],"mappings":"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"}