@e280/shiny 0.1.0-11 → 0.1.0-13

package/README.md

@@ -5,8 +5,10 @@
 > *web ui components*
 
 - 💁 ***see all the components at https://shiny.e280.org/*** 👈
-- 👷 built with [🦝sly](https://github.com/e280/sly) and [🔥lit](https://lit.dev/)
 - 🎭 duality: all components are available as ***web components*** or ***sly views***
+- 👷 built with [🦝sly](https://github.com/e280/sly) and [🔥lit](https://lit.dev/)
+- 🎨 totally customizable, via theme presets, custom themes, css vars and parts
+- 🧩 using [tabler icons](https://github.com/tabler/tabler-icons)
 - 🧑‍💻 a project by https://e280.org/
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@e280/shiny",
-	"version": "0.1.0-11",
+	"version": "0.1.0-13",
 	"description": "✨ web ui components",
 	"license": "MIT",
 	"type": "module",
@@ -14,7 +14,7 @@
 		"s"
 	],
 	"peerDependencies": {
-		"@e280/sly": "^0.2.0-25",
+		"@e280/sly": "^0.2.0-26",
 		"lit": "^3.3.1"
 	},
 	"dependencies": {
@@ -26,7 +26,7 @@
 		"@e280/scute": "^0.1.0",
 		"http-server": "^14.1.1",
 		"npm-run-all": "^4.1.5",
-		"typescript": "^5.9.2"
+		"typescript": "^5.9.3"
 	},
 	"scripts": {
 		"build": "run-s _clean _ln _tsc _scute",

package/s/components/button/component.ts

@@ -1,12 +1,12 @@
 
 import {html} from "lit"
-import {view} from "@e280/sly"
+import {Content, view} from "@e280/sly"
 import styleCss from "./style.css.js"
 import {foundationCss} from "../foundation.css.js"
 import {ShinyContext, ShinyElement} from "../framework.js"
 
 export class ShinyButton extends (
-	view(use => (context: ShinyContext) => {
+	view(use => (context: ShinyContext, content?: Content) => {
 		use.name("shiny-button")
 		use.styles(foundationCss, context.theme, styleCss)
 
@@ -20,7 +20,7 @@ export class ShinyButton extends (
 				part=button
 				?disabled="${attrs.disabled}"
 				?hidden="${attrs.hidden}">
-					<slot></slot>
+					<slot>${content}</slot>
 			</button>
 		`
 	})

package/s/components/button/showcase.ts

@@ -0,0 +1,119 @@
+
+import {css, html} from "lit"
+import {Showcase} from "../../demo/views/showcase/view.js"
+
+const cssSnippet = `
+	shiny-button {
+		--padding: 0.3em;
+		font-size: 1em;
+		color: currentColor;
+		background: transparent;
+	}
+`
+
+export const buttonShowcase = () => Showcase({
+	name: "button",
+	style: css`
+		.box {
+			> * { font-size: 1.5em; }
+		}
+	`,
+	exhibits: [
+		{
+			label: "basic",
+			explain: html`<p>clicky-clacky pressy button.</p>`,
+			snippets: [
+				{label: "html", code: `<shiny-button>button</shiny-button>`},
+				{label: "view", code: `ShinyButton("button")`},
+				{label: "css", code: cssSnippet},
+			],
+			style: css``,
+			presentation: views => html`
+				${views.ShinyButton.props().children("button").render()}
+			`,
+		},
+		{
+			label: "gradient",
+			explain: html`<p>added <code>gradient</code> attribute.</p>`,
+			snippets: [
+				{label: "html", code: `<shiny-button gradient>button</shiny-button>`},
+				{label: "view", code: `
+					ShinyButton
+						.props("button")
+						.attr("gradient")
+						.render()
+				`},
+				{label: "css", code: cssSnippet},
+			],
+			style: css``,
+			presentation: views => html`
+				${views.ShinyButton.props().attr("gradient").children("button").render()}
+			`,
+		},
+		{
+			label: "catalog",
+			explain: html`<p>clicky-clacky pressy buttons.</p>`,
+			snippets: [
+				{label: "html", code: `
+					<shiny-button calm gradient>calm</shiny-button>
+					<shiny-button angry gradient>angry</shiny-button>
+					<shiny-button happy gradient>happy</shiny-button>
+					<shiny-button zesty gradient>zesty</shiny-button>
+					<shiny-button sad gradient>sad</shiny-button>
+					<shiny-button quirky gradient>quirky</shiny-button>
+					<shiny-button plain gradient>plain</shiny-button>
+				`},
+				{label: "view", code: `
+					[
+						ShinyButton.props().attr("calm").attr("gradient").children("calm").render(),
+						ShinyButton.props().attr("angry").attr("gradient").children("angry").render(),
+						ShinyButton.props().attr("happy").attr("gradient").children("happy").render(),
+						ShinyButton.props().attr("zesty").attr("gradient").children("zesty").render(),
+						ShinyButton.props().attr("sad").attr("gradient").children("sad").render(),
+						ShinyButton.props().attr("quirky").attr("gradient").children("quirky").render(),
+						ShinyButton.props().attr("plain").children("plain").render(),
+					]
+				`},
+				{label: "css", code: cssSnippet},
+			],
+			style: css``,
+			presentation: views => [
+				views.ShinyButton.props()
+					.attr("calm")
+					.attr("gradient")
+					.children("calm")
+					.render(),
+				views.ShinyButton.props()
+					.attr("angry")
+					.attr("gradient")
+					.children("angry")
+					.render(),
+				views.ShinyButton.props()
+					.attr("happy")
+					.attr("gradient")
+					.children("happy")
+					.render(),
+				views.ShinyButton.props()
+					.attr("zesty")
+					.attr("gradient")
+					.children("zesty")
+					.render(),
+				views.ShinyButton.props()
+					.attr("sad")
+					.attr("gradient")
+					.children("sad")
+					.render(),
+				views.ShinyButton.props()
+					.attr("quirky")
+					.attr("gradient")
+					.children("quirky")
+					.render(),
+				views.ShinyButton.props()
+					.attr("plain")
+					.children("plain")
+					.render(),
+			],
+		},
+	],
+})
+

package/s/components/button/style.css.ts

@@ -44,7 +44,6 @@ button {
 	font: inherit;
 	color: inherit;
 	cursor: inherit;
-	outline: inherit;
 	text-shadow: inherit;
 
 	display: inline-flex;

package/s/components/copy/component.ts

@@ -33,6 +33,8 @@ export class ShinyCopy extends (
 		async function click() {
 			if (text === undefined) return
 			try {
+				if (use.attrs.booleans.fail)
+					throw new Error("copy failed on purpose for testing purposes")
 				await navigator.clipboard.writeText(text)
 				await statusFlash("good")
 			}
@@ -47,7 +49,7 @@ export class ShinyCopy extends (
 			case "invalid": return clipboardSvg
 			case "good": return clipboardCheckFilledSvg
 			case "bad": return clipboardXFilledSvg
-			default: throw new Error(`invalid copy status`)
+			default: throw new Error(`unknown copy status`)
 		}})()
 
 		return html`

package/s/components/copy/showcase.ts

@@ -0,0 +1,51 @@
+
+import {css, html} from "lit"
+import {Showcase} from "../../demo/views/showcase/view.js"
+
+const cssSnippet = `
+	shiny-copy {
+		font-size: 1em;
+		--happy: #0fa;
+		--angry: #f50;
+		--lame: #8888;
+		--inactive-opacity: 0.5;
+	}
+`
+
+export const copyShowcase = () => Showcase({
+	name: "copy",
+	style: css`
+		.box {
+			> * { font-size: 4em; }
+		}
+	`,
+	exhibits: [
+		{
+			label: "succeed",
+			explain: html`<p>click-to-copy text button.</p>`,
+			snippets: [
+				{label: "html", code: `<shiny-copy text="hello world"></shiny-button>`},
+				{label: "view", code: `ShinyCopy("hello world")`},
+				{label: "css", code: cssSnippet},
+			],
+			style: css``,
+			presentation: views => html`
+				${views.ShinyCopy("hello world")}
+			`,
+		},
+		{
+			label: "fail",
+			explain: html`<p>copy text button, deliberately fails so you can see.</p>`,
+			snippets: [
+				{label: "html", code: `<shiny-copy fail></shiny-button>`},
+				{label: "view", code: `ShinyCopy.props("").attr("fail").render()`},
+				{label: "css", code: cssSnippet},
+			],
+			style: css``,
+			presentation: views => html`
+				${views.ShinyCopy.props("").attr("fail").render()}
+			`,
+		},
+	],
+})
+

package/s/components/drawer/component.ts

@@ -12,7 +12,7 @@ import {ShinyContext, ShinyElement} from "../framework.js"
 
 export class ShinyDrawer extends (
 	view(use => (context: ShinyContext, options: {
-			button: boolean
+			button?: boolean
 			side?: "left" | "right"
 			control?: DrawerControl
 		}) => {
@@ -21,44 +21,46 @@ export class ShinyDrawer extends (
 		use.styles(foundationCss, context.theme, styleCss)
 		const states = use.once(() => new States(use.element))
 
-		const side = options.side ?? "left"
-		const drawer = use.once(() => (options.control ?? new DrawerControl()))
+		const button = options.button ?? use.attrs.booleans.button
+		const side = options.side ?? (use.attrs.strings.side === "right" ? "right" : "left")
+		const control = use.once(() => (options.control ?? new DrawerControl()))
 		states.assign(side)
 
 		use.mount(() => dom.events(window, {keydown: (event: KeyboardEvent) => {
 			if (event.code === "Escape")
-				drawer.close()
+				control.close()
 		}}))
 
-		dom.attrs(use.element).booleans.open = drawer.isOpen
+		dom.attrs(use.element).booleans.open = control.isOpen
+
+		function renderButton() {
+			return html`
+				<button @click="${control.toggle}">
+					${control.isOpen
+						? html`
+							<slot name=button-x>
+								${xSvg}
+							</slot>
+						`
+						: html`
+							<slot name=button>
+								${menu2Svg}
+							</slot>
+						`}
+				</button>
+			`
+		}
 
 		return html`
-			<div class=shell ?data-open="${drawer.isOpen}" data-side="${side}">
-				<slot name=plate ?inert="${drawer.isOpen}"></slot>
+			<div class=shell ?data-open="${control.isOpen}" data-side="${side}">
+				<slot name=plate ?inert="${control.isOpen}"></slot>
 
 				<div class=clipper>
-					<div part=blanket @click="${drawer.close}" ?inert="${!drawer.isOpen}"></div>
+					<div part=blanket @click="${control.close}" ?inert="${!control.isOpen}"></div>
 
 					<div part=tray>
-						<slot ?inert="${!drawer.isOpen}"></slot>
-
-						${options.button
-							? html`
-								<button @click="${drawer.toggle}">
-									${drawer.isOpen
-										? html`
-											<slot name=button-x>
-												${xSvg}
-											</slot>
-										`
-										: html`
-											<slot name=button>
-												${menu2Svg}
-											</slot>
-										`}
-								</button>
-							`
-							: null}
+						<slot part=slate ?inert="${!control.isOpen}"></slot>
+						${button ?renderButton() :null}
 					</div>
 				</div>
 			</div>
@@ -83,10 +85,6 @@ export class ShinyDrawer extends (
 		get open() { return this.control.open }
 		get close() { return this.control.close }
 	})
-	.props(el => [el.context, {
-		control: el.control,
-		button: el.button,
-		side: el.side,
-	}] as const)
+	.props(el => [el.context, {control: el.control}] as const)
 ) {}
 

package/s/components/drawer/showcase.ts

@@ -0,0 +1,93 @@
+
+import {css, html} from "lit"
+import {lipsum} from "../../demo/lipsum.js"
+import {Showcase} from "../../demo/views/showcase/view.js"
+import {ExhibitParams} from "../../demo/views/exhibit/view.js"
+
+const lip1 = lipsum()
+const lip2 = lipsum()
+const lip3 = lipsum()
+
+const cssSnippet = `
+	shiny-drawer {
+		--button-size: 2em;
+		--anim-duration: 200ms;
+		--slate-hidden-opacity: 1;
+		--blanket-backdrop-filter: blur(0.5em);
+		--blanket-bg: color-mix(
+			in oklab,
+			transparent,
+			var(--bg)
+		);
+	}
+`
+
+const makeExhibit = (side: "left" | "right"): ExhibitParams => ({
+	label: side,
+	explain: html`<p>slide-out panel. button optional.</p>`,
+	snippets: [
+		{label: "html", code: `
+			<shiny-drawer button side=${side}>
+				<header>example</header>
+				<section slot=plate>lorem kettlebell..</section>
+			</shiny-drawer>
+		`},
+		{label: "view", code: `
+			ShinyDrawer
+				.props({button: true, side: "${side}"})
+				.children(html\`
+					<header>example</header>
+					<section slot=plate>lorem kettlebell..</section>
+				\`)
+				.render()
+		`},
+		{label: "css", code: cssSnippet},
+	],
+	style: css``,
+	presentation: views => html`
+		${views.ShinyDrawer
+			.props({button: true, side})
+			.children(html`
+				<header>
+					<h2>example drawer</h2>
+					<p>you can put any content in here.</p>
+					<p class=lipsum>${lip1}</p>
+				</header>
+				<section slot=plate>
+					<p class=lipsum>${lip2}</p>
+					<p class=lipsum>${lip3}</p>
+				</section>
+			`)
+			.render()}
+	`,
+})
+
+export const drawerShowcase = () => Showcase({
+	name: "drawer",
+	style: css`
+		.box 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; }
+			}
+		}
+	`,
+	exhibits: [
+		makeExhibit("left"),
+		makeExhibit("right"),
+	],
+})
+

package/s/components/drawer/style.css.ts

@@ -7,8 +7,8 @@ export default css`@layer view {
 	width: 100%;
 	height: 100%;
 	--button-size: 2em;
-	--anim-duration: 200ms;
 	--blanket-backdrop-filter: blur(0.5em);
+	--slate-hidden-opacity: 1;
 	--blanket-bg: color-mix(in oklab, transparent, var(--bg));
 }
 
@@ -52,12 +52,15 @@ export default css`@layer view {
 		height: auto;
 		max-height: 100%;
 
-		opacity: 1;
 		transform: translateX(-100%);
 		will-change: opacity, transform;
 		transition: all var(--anim-duration) ease;
 
-		> slot {
+		> [part="slate"] {
+			opacity: var(--slate-hidden-opacity);
+			will-change: opacity;
+			transition: opacity var(--anim-duration) ease;
+
 			display: block;
 			height: 100%;
 			overflow-y: auto;
@@ -110,8 +113,10 @@ export default css`@layer view {
 			opacity: 1;
 		}
 		[part="tray"] {
-			opacity: 1;
 			transform: translateX(0%);
+			> [part="slate"] {
+				opacity: 1;
+			}
 		}
 	}
 }

package/s/components/tabs/showcase.ts

@@ -0,0 +1,166 @@
+
+import {css, html} from "lit"
+import {lipsum} from "../../demo/lipsum.js"
+import {Showcase} from "../../demo/views/showcase/view.js"
+
+const lip1 = lipsum()
+const lip2 = lipsum()
+const lip3 = lipsum()
+
+const cssSnippet = `
+	shiny-tabs {
+		&::part(tabs) {}
+		&::part(panels) {}
+		> shiny-button {}
+	}
+`
+
+export const tabsShowcase = () => Showcase({
+	name: "tabs",
+	style: css`
+		.box {
+			place-content: start start;
+			p { margin-top: 0.5em; }
+			button { padding: 1em; }
+		}
+	`,
+	exhibits: [
+		{
+			label: "shiny snug",
+			explain: html`<p>button bar. panels optional.</p>`,
+			snippets: [
+				{label: "html", code: `
+					<shiny-tabs snug>
+						<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>
+				`},
+				{label: "view", code: `
+					ShinyTabs
+						.props()
+						.attr("snug")
+						.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()
+				`},
+				{label: "css", code: cssSnippet},
+			],
+			style: css``,
+			presentation: views => html`
+				${views.ShinyTabs
+					.props()
+					.attr("snug")
+					.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>${lip1}</p>
+						<p slot=panel class=lipsum>${lip2}</p>
+						<p slot=panel class=lipsum>${lip3}</p>
+					`)
+					.render()}
+			`,
+		},
+		{
+			label: "regular",
+			explain: html`<p>button bar. panels optional.</p>`,
+			snippets: [
+				{label: "html", code: `
+					<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>
+				`},
+				{label: "view", code: `
+					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()
+				`},
+				{label: "css", code: cssSnippet},
+			],
+			style: css``,
+			presentation: views => html`
+				${views.ShinyTabs
+					.props()
+					.children(html`
+						<button>tab1</button>
+						<button>tab2</button>
+						<button>tab3</button>
+						<p slot=panel class=lipsum>${lip1}</p>
+						<p slot=panel class=lipsum>${lip2}</p>
+						<p slot=panel class=lipsum>${lip3}</p>
+					`)
+					.render()}
+			`,
+		},
+		{
+			label: "regular snug",
+			explain: html`<p>button bar. panels optional.</p>`,
+			snippets: [
+				{label: "html", code: `
+					<shiny-tabs snug>
+						<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>
+				`},
+				{label: "view", code: `
+					ShinyTabs
+						.props()
+						.attr("snug")
+						.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()
+				`},
+				{label: "css", code: cssSnippet},
+			],
+			style: css``,
+			presentation: views => html`
+				${views.ShinyTabs
+					.props()
+					.attr("snug")
+					.children(html`
+						<button>tab1</button>
+						<button>tab2</button>
+						<button>tab3</button>
+						<p slot=panel class=lipsum>${lip1}</p>
+						<p slot=panel class=lipsum>${lip2}</p>
+						<p slot=panel class=lipsum>${lip3}</p>
+					`)
+					.render()}
+			`,
+		},
+	],
+})
+

package/s/components/tabs/style.css.ts

@@ -9,16 +9,19 @@ export default css`@layer view {
 
 slot[part="tabs"] {
 	display: flex;
-
-	&::slotted(*) {
-		border-radius: 0.3em;
-	}
+	flex-wrap: wrap;
 
 	&::slotted([data-active]) {
 		opacity: 1;
 		color: currentColor;
 		text-decoration: underline;
 	}
+}
+
+:host([snug]) slot[part="tabs"] {
+	&::slotted(*) {
+		border-radius: 0.3em;
+	}
 
 	&::slotted(:not([data-last], [data-next-is-active])) {
 		border-right: none;