@e280/shiny 0.1.0-2 → 0.1.0-20

package/s/_archive/components/drawer/control.ts

@@ -0,0 +1,31 @@
+
+import {signal} from "@e280/strata"
+
+export class DrawerControl {
+	$open = signal(false)
+
+	constructor(startOpen = false) {
+		if (startOpen) this.$open.set(true)
+	}
+
+	get isOpen() {
+		return this.$open.get()
+	}
+
+	async setOpen(value: boolean) {
+		return this.$open.set(value)
+	}
+
+	open = async() => {
+		await this.setOpen(true)
+	}
+
+	close = async() => {
+		await this.setOpen(false)
+	}
+
+	toggle = async() => {
+		return this.setOpen(!this.isOpen)
+	}
+}
+

package/s/_archive/components/drawer/showcase.ts

@@ -0,0 +1,111 @@
+
+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 = `
+	[view="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)
+		);
+		--slate-bg: linear-gradient(
+			to top right,
+			color-mix(in oklab, var(--calm), #222 50%),
+			color-mix(in oklab, var(--calm), #888 50%)
+		);
+
+		&:state(opened) {}
+		&:state(closed) {}
+
+		&:state(left) {}
+		&:state(right) {}
+
+		&::part(tray) {}
+		&::part(blanket) {}
+		&::part(button) {}
+		&::part(slate) {}
+
+		&::part(plate) {}
+	}
+`
+
+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/_archive/components/drawer/style.css.ts

@@ -0,0 +1,127 @@
+
+import {css} from "lit"
+export default css`@layer view {
+
+:host {
+	display: block;
+	width: 100%;
+	height: 100%;
+	--slate-bg: transparent;
+	--button-size: 2em;
+	--blanket-backdrop-filter: blur(0.5em);
+	--slate-hidden-opacity: 1;
+	--blanket-bg: color-mix(in oklab, transparent, var(--bg));
+}
+
+.shell {
+	position: relative;
+	width: 100%;
+	height: 100%;
+
+	[part="blanket"] {
+		opacity: 0;
+
+		content: "";
+		display: block;
+		position: absolute;
+		inset: 0;
+
+		background: var(--blanket-bg);
+		backdrop-filter: var(--blanket-backdrop-filter);
+
+		will-change: opacity;
+		transition: all var(--anim-duration) ease;
+	}
+
+	.clipper {
+		pointer-events: none;
+		position: absolute;
+		inset: 0;
+		width: 100%;
+		height: 100%;
+		overflow: hidden;
+		> * { pointer-events: all; }
+	}
+
+	[part="tray"] {
+		position: absolute;
+		top: 0;
+		width: calc(100% - var(--button-size));
+
+		display: flex;
+		flex-direction: column;
+		height: auto;
+		max-height: 100%;
+
+		transform: translateX(-100%);
+		will-change: opacity, transform;
+		transition: all var(--anim-duration) ease;
+
+		> [part="slate"] {
+			opacity: var(--slate-hidden-opacity);
+			will-change: opacity;
+			transition: opacity var(--anim-duration) ease;
+
+			display: block;
+			height: 100%;
+			overflow-y: auto;
+			background: var(--slate-bg);
+		}
+
+		> button {
+			position: absolute;
+			top: 0;
+			left: 100%;
+
+			opacity: var(--inactive-opacity);
+			background: transparent;
+			border: none;
+			cursor: pointer;
+
+			&:is(:hover, :focus-visible) {
+				opacity: 1;
+			}
+
+			> slot {
+				display: contents;
+			}
+
+			svg {
+				width: var(--button-size);
+				height: var(--button-size);
+			}
+		}
+	}
+
+	&[data-side="right"] {
+		[part="tray"] {
+			right: 0;
+			transform: translateX(100%);
+			> button {
+				left: unset;
+				right: 100%;
+			}
+		}
+	}
+
+	slot[name="plate"] {
+		display: block;
+		width: 100%;
+		height: 100%;
+	}
+
+	&[data-open] {
+		[part="blanket"] {
+			opacity: 1;
+		}
+		[part="tray"] {
+			transform: translateX(0%);
+			> [part="slate"] {
+				opacity: 1;
+			}
+		}
+	}
+}
+
+}`
+

package/s/{ui → _archive/components}/example/component.ts

@@ -1,12 +1,14 @@
 
-import {dom, view} from "@e280/sly"
 import {html} from "lit"
+import {dom, view} from "@e280/sly"
 import styleCss from "./style.css.js"
+import {foundationCss} from "../foundation.css.js"
 import {ShinyContext, ShinyElement} from "../framework.js"
 
 export class ShinyExample extends (
-	view(use => (context: ShinyContext, start: number) => {
-		use.styles(context.theme, styleCss)
+	view(use => (context: ShinyContext, start = 1) => {
+		use.name("shiny-example")
+		use.styles(foundationCss, context.theme, styleCss)
 
 		const $count = use.signal(start)
 		const increment = () => { $count.value++ }
@@ -20,6 +22,6 @@ export class ShinyExample extends (
 	.component(class extends ShinyElement {
 		attrs = dom.attrs(this).spec({start: Number})
 	})
-	.props(el => [el.context, el.attrs.start ?? 1] as const)
+	.props(el => [el.context, el.attrs.start] as const)
 ) {}
 

package/s/_archive/components/example/showcase.ts

@@ -0,0 +1,32 @@
+
+import {css, html} from "lit"
+import {Showcase} from "../../demo/views/showcase/view.js"
+
+export const drawerShowcase = () => Showcase({
+	name: "drawer",
+	style: css`
+		.box {}
+	`,
+	exhibits: [
+		{
+			label: "example",
+			explain: html`<p>example component.</p>`,
+			snippets: [
+				{label: "html", code: `
+					<shiny-example></shiny-example>
+				`},
+				{label: "view", code: `
+					ShinyExample()
+				`},
+				{label: "css", code: `
+					[view="shiny-example"] {}
+				`},
+			],
+			style: css``,
+			presentation: views => html`
+				${views.ShinyExample()}
+			`,
+		},
+	],
+})
+

package/s/{ui → _archive/components}/example/style.css.ts

@@ -1,11 +1,11 @@
 
 import {css} from "lit"
-export default css`
+export default css`@layer view {
 
 button {
 	padding: 1em;
 	min-width: 4em;
 }
 
-`
+}`
 

package/s/_archive/components/foundation.css.ts

@@ -0,0 +1,15 @@
+
+import {css} from "lit"
+import {cssReset} from "@e280/sly"
+export const foundationCss = css`
+
+@layer reset, underlay, view, overlay;
+
+${cssReset}
+
+@layer overlay {
+	[hidden] { display: none !important; }
+}
+
+`
+

package/s/{ui → _archive/components}/framework.ts

@@ -1,11 +1,10 @@
 
 import {CSSResultGroup} from "lit"
 import {BaseElement} from "@e280/sly"
-import {basic} from "../themes/basic.css.js"
 
 export type ShinyContext = {theme: CSSResultGroup}
 
 export class ShinyElement extends BaseElement {
-	context: ShinyContext = {theme: basic}
+	context!: ShinyContext
 }
 

package/s/_archive/components/raw-components.ts

@@ -0,0 +1,15 @@
+
+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,
+	ShinyTabs,
+}
+

package/s/_archive/components/tabs/component.ts

@@ -0,0 +1,70 @@
+
+import {html} from "lit"
+import {dom, view} from "@e280/sly"
+import styleCss from "./style.css.js"
+import {TabControl} from "./control.js"
+import {foundationCss} from "../foundation.css.js"
+import {ShinyContext, ShinyElement} from "../framework.js"
+
+export class ShinyTabs extends (
+	view(use => (context: ShinyContext, controlOption?: TabControl) => {
+		use.name("shiny-tabs")
+		use.styles(foundationCss, context.theme, styleCss)
+
+		const attrs = use.attrs.spec({index: Number})
+		const control = use.once(() => controlOption ?? new TabControl(attrs.index ?? 0))
+		const $tabs = use.signal<HTMLElement[]>([])
+		const $panels = use.signal<HTMLElement[]>([])
+
+		async function tabchange(event: Event) {
+			const slot = event.currentTarget! as HTMLSlotElement
+			await $tabs.set(slot.assignedElements() as HTMLElement[])
+		}
+
+		async function panelchange(event: Event) {
+			const slot = event.currentTarget! as HTMLSlotElement
+			await $panels.set(slot.assignedElements() as HTMLElement[])
+		}
+
+		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)
+			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)
+		}
+
+		for (const [index, tab] of $panels().entries()) {
+			const active = (index === control.index)
+			dom.attrs(tab).booleans.active = active
+			dom.attrs(tab).booleans.hidden = !active
+		}
+
+		return html`
+			<slot part=tabs @slotchange="${tabchange}"></slot>
+			<slot part=panels name=panel @slotchange="${panelchange}"></slot>
+		`
+	})
+	.component(class extends ShinyElement {
+		control = new TabControl()
+		get index() { return this.control.index }
+		get length() { return this.control.length }
+		setIndex = this.control.setIndex.bind(this.control)
+		shimmy = this.control.shimmy.bind(this.control)
+	})
+	.props(el => [el.context, el.control] as const)
+) {}
+

package/s/_archive/components/tabs/control.ts

@@ -0,0 +1,31 @@
+
+import {signal} from "@e280/strata"
+
+export class TabControl {
+	length = 1
+	$index = signal(0)
+
+	constructor(start = 0) {
+		this.$index.value = start
+	}
+
+	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())
+	}
+
+	async setIndex(index: number) {
+		return this.$index.set(index)
+	}
+
+	async shimmy(delta: number) {
+		const index = this.clamp(this.index + delta)
+		return this.setIndex(index)
+	}
+}
+

package/s/_archive/components/tabs/showcase.ts

@@ -0,0 +1,171 @@
+
+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 = `
+	[view="shiny-tabs"] {
+		&::part(tabs) {}
+		&::part(panels) {}
+
+		/* buttons */
+		> :not([slot="panel"]) {}
+
+		/* panels */
+		> [slot="panel"] {}
+	}
+`
+
+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/_archive/components/tabs/style.css.ts

@@ -0,0 +1,46 @@
+
+import {css} from "lit"
+export default css`@layer view {
+
+:host {
+	display: inline-flex;
+	flex-direction: column;
+}
+
+slot[part="tabs"] {
+	display: flex;
+	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;
+	}
+
+	&::slotted([data-active]:not([data-first])) {
+		border-left: none;
+	}
+
+	&::slotted(:not([data-last])) {
+		border-top-right-radius: 0;
+		border-bottom-right-radius: 0;
+	}
+
+	&::slotted(:not([data-first])) {
+		border-top-left-radius: 0;
+		border-bottom-left-radius: 0;
+	}
+}
+
+} `
+