@e280/shiny 0.1.0-10 → 0.1.0-12

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/
 
 
@@ -92,13 +94,16 @@
     ```html
     <style>
       html {
-	      --shiny-bg: #111;
-	      --shiny-alpha: #afa;
-	      --shiny-happy: #0fa;
-	      --shiny-sad: #74f;
-	      --shiny-angry: #f50;
-	      --shiny-lame: #8888;
-	      --shiny-inactive-opacity: 0.5;
+        --shiny-bg: #111;
+        --shiny-alpha: #def;
+        --shiny-lame: #8888;
+        --shiny-inactive-opacity: 0.5;
+        --shiny-angry: #f50;
+        --shiny-zesty: #cf0;
+        --shiny-happy: #0fa;
+        --shiny-calm: #0af;
+        --shiny-sad: #74f;
+        --shiny-quirky: #f49;
       }
     </style>
     ```

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@e280/shiny",
-	"version": "0.1.0-10",
+	"version": "0.1.0-12",
 	"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

@@ -0,0 +1,30 @@
+
+import {html} from "lit"
+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, content?: Content) => {
+		use.name("shiny-button")
+		use.styles(foundationCss, context.theme, styleCss)
+
+		const attrs = use.attrs.spec({
+			disabled: Boolean,
+			hidden: Boolean,
+		})
+
+		return html`
+			<button
+				part=button
+				?disabled="${attrs.disabled}"
+				?hidden="${attrs.hidden}">
+					<slot>${content}</slot>
+			</button>
+		`
+	})
+	.component(ShinyElement)
+	.props(el => [el.context] as const)
+) {}
+

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

@@ -0,0 +1,63 @@
+
+import {css} from "lit"
+export default css`@layer view {
+
+:host {
+	opacity: 0.8;
+	display: inline-flex;
+	width: max-content;
+	height: max-content;
+
+	--padding: 0.3em;
+	border-radius: 0.2em;
+	border: 0.1em solid currentColor;
+
+	cursor: pointer;
+	background: transparent;
+	user-select: none;
+}
+
+:host(:not([disabled]):is(:hover, :focus-visible)) { opacity: 1; }
+:host(:not([disabled]):active) { opacity: 0.6; }
+
+:host([disabled]) {
+	cursor: default;
+	color: var(--lame);
+}
+
+:host([hidden]) {
+	display: none !important;
+}
+
+:host([lame]) { color: var(--lame); }
+:host([angry]) { color: var(--angry); }
+:host([zesty]) { color: var(--zesty); }
+:host([happy]) { color: var(--happy); }
+:host([calm]) { color: var(--calm); }
+:host([sad]) { color: var(--sad); }
+:host([quirky]) { color: var(--quirky); }
+
+button {
+	background: transparent;
+	border: none;
+
+	font: inherit;
+	color: inherit;
+	cursor: inherit;
+	text-shadow: inherit;
+
+	display: inline-flex;
+	justify-content: center;
+	align-items: center;
+
+	width: 100%;
+	height: 100%;
+	padding: var(--padding);
+}
+
+slot {
+	display: contents;
+}
+
+}`
+

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/raw-components.ts

@@ -1,10 +1,12 @@
 
+import {ShinyButton} from "./button/component.js"
 import {ShinyCopy} from "./copy/component.js"
 import {ShinyDrawer} from "./drawer/component.js"
 import {ShinyExample} from "./example/component.js"
 import {ShinyTabs} from "./tabs/component.js"
 
 export const rawComponents = {
+	ShinyButton,
 	ShinyCopy,
 	ShinyDrawer,
 	ShinyExample,

package/s/components/tabs/component.ts

@@ -29,10 +29,21 @@ export class ShinyTabs extends (
 		attrs.index = control.$index()
 		control.length = $tabs().length
 
+		function isNeighborActive(index: number, delta: number) {
+			const nextIndex = control.clamp(index + delta)
+			if (nextIndex === index) return false
+			return (nextIndex === control.index)
+		}
+
 		for (const [index, tab] of $tabs().entries()) {
 			const active = (index === control.index)
-			dom.attrs(tab).booleans.active = active
-			dom.attrs(tab).booleans.disabled = active
+			const tabAttrs = dom.attrs(tab)
+			tabAttrs.booleans.disabled = active
+			tabAttrs.booleans["data-active"] = active
+			tabAttrs.booleans["data-first"] = (index === 0)
+			tabAttrs.booleans["data-last"] = (index === (control.length - 1))
+			tabAttrs.booleans["data-next-is-active"] = isNeighborActive(index, 1)
+			tabAttrs.booleans["data-previous-is-active"] = isNeighborActive(index, -1)
 			tab.onclick = () => control.setIndex(index)
 		}
 

package/s/components/tabs/control.ts

@@ -9,14 +9,14 @@ export class TabControl {
 		this.$index.value = start
 	}
 
-	#clamp(index: number) {
+	clamp(index: number) {
 		index = Math.min(index, this.length - 1)
 		index = Math.max(index, 0)
 		return index
 	}
 
 	get index() {
-		return this.#clamp(this.$index.get())
+		return this.clamp(this.$index.get())
 	}
 
 	async setIndex(index: number) {
@@ -24,7 +24,7 @@ export class TabControl {
 	}
 
 	async shimmy(delta: number) {
-		const index = this.#clamp(this.index + delta)
+		const index = this.clamp(this.index + delta)
 		return this.setIndex(index)
 	}
 }