@e280/shiny 0.1.0-15 → 0.1.0-16

package/s/views/copy/showcase.ts

@@ -0,0 +1,54 @@
+
+import {css, html} from "lit"
+import {ShinyCopy} from "./view.js"
+import {exhibit} from "../../demo/parts/exhibit.js"
+import {Showcase} from "../../demo/views/showcase/view.js"
+
+export const copyShowcase = () => Showcase("ShinyCopy", [
+	exhibit({
+		name: "normal",
+		explain: "click-to-copy button.",
+		render: () => ShinyCopy("hello world"),
+		styleboxCss: css`
+			:host {
+				font-size: 5em;
+			}
+		`,
+		js: `
+			ShinyCopy("hello world")
+		`,
+		css: css`
+			[view="shiny-copy"] {
+				--shiny-happy: #0fa;
+				--shiny-angry: #f50;
+				--shiny-lame: #8888;
+				--shiny-inactive-opacity: 0.5;
+			}
+		`,
+	}),
+
+	exhibit({
+		name: "fail",
+		explain: html`
+			<p>click-to-copy button. <em>deliberately fails so you can see.</em></p>
+		`,
+		render: () => ShinyCopy("hello world", {fail: true}),
+		styleboxCss: css`
+			:host {
+				font-size: 4em;
+			}
+		`,
+		js: `
+			ShinyCopy("hello world", {fail: true})
+		`,
+		css: css`
+			[view="shiny-copy"] {
+				--shiny-happy: #0fa;
+				--shiny-angry: #f50;
+				--shiny-lame: #8888;
+				--shiny-inactive-opacity: 0.5;
+			}
+		`,
+	}),
+])
+

package/s/views/copy/style.css.ts

@@ -0,0 +1,46 @@
+
+import {css} from "lit"
+export default css`@layer view {
+
+button {
+	background: transparent;
+	border: none;
+	font-size: inherit;
+}
+
+button {
+	opacity: var(--inactive-opacity);
+	cursor: pointer;
+	cursor: copy;
+
+	color: inherit;
+	transition: all 300ms linear;
+
+	&:is(:hover, :focus-visible) {
+		opacity: 1;
+	}
+}
+
+[data-status="invalid"] {
+	color: var(--lame);
+}
+
+[data-status="good"] {
+	opacity: 1;
+	color: var(--happy);
+	filter: drop-shadow(0 0 0.3em color-mix(in oklab, transparent, currentColor 50%));
+}
+
+[data-status="bad"] {
+	opacity: 1;
+	color: var(--angry);
+	filter: drop-shadow(0 0 0.3em color-mix(in oklab, transparent, currentColor 50%));
+}
+
+svg {
+	width: 1em;
+	height: 1em;
+}
+
+}`
+

package/s/views/copy/view.ts

@@ -0,0 +1,58 @@
+
+import {html} from "lit"
+import {shadow, useCss, useName} from "@e280/sly"
+
+import styleCss from "./style.css.js"
+import clipboardSvg from "../../icons/tabler/clipboard.svg.js"
+import clipboardXFilledSvg from "../../icons/tabler/clipboard-x-filled.svg.js"
+import clipboardCheckFilledSvg from "../../icons/tabler/clipboard-check-filled.svg.js"
+
+import {useCopier} from "./parts/use-copier.js"
+import {themeCss} from "../../theme/theme.css.js"
+
+export const ShinyCopy = shadow((
+		text: string | undefined,
+		options: {ms?: number, fail?: boolean} = {},
+	) => {
+
+	useName("shiny-copy")
+	useCss(themeCss, styleCss)
+	const copier = useCopier(text, options.ms ?? 1000)
+
+	async function click() {
+		if (text === undefined) return
+		try {
+			if (options.fail)
+				throw new Error("copy failed on purpose for testing purposes")
+			await navigator.clipboard.writeText(text)
+			await copier.flash("good")
+		}
+		catch (error) {
+			console.error(error)
+			await copier.flash("bad")
+		}
+	}
+
+	return html`
+		<button data-status="${copier.status}" @click="${click}">
+			${(() => {switch (copier.status) {
+				case "neutral":
+					return clipboardSvg
+
+				case "invalid":
+					return clipboardSvg
+
+				case "good":
+					return clipboardCheckFilledSvg
+
+				case "bad":
+					return clipboardXFilledSvg
+
+				default:
+					throw new Error(`unknown copy status`)
+			}})()}
+			<slot></slot>
+		</button>
+	`
+})
+

package/s/views/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/views/drawer/showcase.ts

@@ -0,0 +1,83 @@
+
+import {css, html} from "lit"
+import {ShinyDrawer} from "./view.js"
+import {lipsum} from "../../demo/utils/lipsum.js"
+import {exhibit} from "../../demo/parts/exhibit.js"
+import {Showcase} from "../../demo/views/showcase/view.js"
+
+const styleboxCss = css`
+	:host {
+		font-size: 1em;
+		width: 100%;
+		min-height: 100%;
+	}
+	p + p {
+		margin-top: var(--padding);
+	}
+`
+
+const customCss = css`
+	[slot=plate] { padding-top: 2em; }
+	[view="shiny-drawer"] {
+		--slate-bg: color-mix(in oklch, var(--calm), #444);
+		&::part(slate) { padding: 1em; }
+		&:state(left)::part(slate) { border-bottom-right-radius: 0.5em; }
+		&:state(right)::part(slate) { border-bottom-left-radius: 0.5em; }
+	}
+`
+
+const render = (side: "left" | "right") => (
+	ShinyDrawer.with({
+		props: [{button: true, side}],
+		children: html`
+			<header>${lipsum.takeFirst()}</header>
+			<section slot=plate>
+				<p>${lipsum.takeFirst()}</p>
+				<p>${lipsum.takeFirst()}</p>
+			</section>
+		`,
+	})
+)
+
+export const drawerShowcase = () => Showcase("ShinyDrawer", [
+	exhibit({
+		name: "left",
+		explain: "slide-out panel. button optional.",
+		styleboxCss,
+		css: customCss,
+		render: () => render("left"),
+		js: `
+			ShinyDrawer.with({
+				props: [{button: true, side: "left"}],
+				children: html\`
+					<header>lorem kettlebell..</header>
+					<section slot=plate>
+						<p>lorem protein..</p>
+						<p>lorem caffeine..</p>
+					</section>
+				\`,
+			})
+		`,
+	}),
+
+	exhibit({
+		name: "right",
+		explain: "slide-out panel. button optional.",
+		styleboxCss,
+		css: customCss,
+		render: () => render("right"),
+		js: `
+			ShinyDrawer.with({
+				props: [{button: true, side: "right"}],
+				children: html\`
+					<header>lorem kettlebell..</header>
+					<section slot=plate>
+						<p>lorem protein..</p>
+						<p>lorem caffeine..</p>
+					</section>
+				\`,
+			})
+		`,
+	}),
+])
+

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

@@ -0,0 +1,128 @@
+
+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/views/drawer/view.ts

@@ -0,0 +1,76 @@
+
+import {html} from "lit"
+import {dom, shadow, useAttrs, useCss, useHost, useMount, useName, useOnce} from "@e280/sly"
+
+import styleCss from "./style.css.js"
+
+import {themeCss} from "../../theme/theme.css.js"
+import {DrawerControl} from "./control.js"
+import {States} from "../../utils/states.js"
+import xSvg from "../../icons/tabler/x.svg.js"
+import menu2Svg from "../../icons/tabler/menu-2.svg.js"
+
+export const ShinyDrawer = shadow((options: {
+		button?: boolean
+		side?: "left" | "right"
+		control?: DrawerControl
+	} = {}) => {
+
+	useName("shiny-drawer")
+	useCss(themeCss, styleCss)
+
+	const host = useHost()
+	const states = useOnce(() => new States(host))
+	const control = useOnce(() => (options.control ?? new DrawerControl()))
+
+	const attrs = useAttrs({
+		side: String,
+		button: Boolean,
+		open: Boolean,
+	})
+
+	attrs.open = control.isOpen
+
+	const button = options.button ?? attrs.button
+	const side = options.side ?? (attrs.side === "right" ? "right" : "left")
+	states.assign(side, control.isOpen ? "opened" : "closed")
+
+	useMount(() => dom.events(window, {keydown: (event: KeyboardEvent) => {
+		if (event.code === "Escape")
+			control.close()
+	}}))
+
+	function renderButton() {
+		return html`
+			<button part=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="${control.isOpen}" data-side="${side}">
+			<slot name=plate ?inert="${control.isOpen}"></slot>
+
+			<div class=clipper>
+				<div part=blanket @click="${control.close}" ?inert="${!control.isOpen}"></div>
+
+				<div part=tray>
+					<slot part=slate ?inert="${!control.isOpen}"></slot>
+					${button ?renderButton() :null}
+				</div>
+			</div>
+		</div>
+	`
+})
+

package/s/views/tabs/control.ts

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

package/s/views/tabs/showcase.ts

@@ -0,0 +1,89 @@
+
+import {css, html} from "lit"
+import {ShinyTabs} from "./view.js"
+import {ShinyButton} from "../button/view.js"
+import {lipsum} from "../../demo/utils/lipsum.js"
+import {exhibit} from "../../demo/parts/exhibit.js"
+import {Showcase} from "../../demo/views/showcase/view.js"
+
+export const tabsShowcase = () => Showcase("ShinyTabs", [
+	exhibit({
+		name: "shiny",
+		explain: "a button-bar of mutually-exclusive tabs. panels are optional.",
+		render: () => ShinyTabs.with({
+			props: [{snug: true}],
+			children: html`
+				${ShinyButton("alpha")}
+				${ShinyButton("bravo")}
+				${ShinyButton("charlie")}
+				<p slot=panel>${lipsum.takeFirst()}</p>
+				<p slot=panel>${lipsum.takeFirst()}</p>
+				<p slot=panel>${lipsum.takeFirst()}</p>
+			`,
+		}),
+		styleboxCss: css`
+			[view="shiny-button"] { font-size: 1.5em; }
+			p { margin-top: var(--padding); }
+		`,
+		js: `
+			ShinyTabs.with({
+				props: [{snug: true}],
+				children: html\`
+					\${ShinyButton("alpha")}
+					\${ShinyButton("bravo")}
+					\${ShinyButton("charlie")}
+					<p slot=panel>lorem kettlebell..</p>
+					<p slot=panel>lorem protein..</p>
+					<p slot=panel>lorem caffeine..</p>
+				\`,
+			})
+		`,
+		css: css`
+			[view="shiny-tabs"] {
+				--shiny-rounded: 0.5em;
+			}
+		`,
+	}),
+
+	exhibit({
+		name: "plain",
+		explain: "a button-bar of mutually-exclusive tabs. panels are optional.",
+		render: () => ShinyTabs.with({
+			props: [{snug: true}],
+			children: html`
+				<button>alpha</button>
+				<button>bravo</button>
+				<button>charlie</button>
+				<p slot=panel>${lipsum.takeFirst()}</p>
+				<p slot=panel>${lipsum.takeFirst()}</p>
+				<p slot=panel>${lipsum.takeFirst()}</p>
+			`,
+		}),
+		styleboxCss: css`
+			p { margin-top: var(--padding); }
+			button {
+				font-size: 1.5em;
+				padding: calc(var(--padding) / 2);
+			}
+		`,
+		js: `
+			ShinyTabs.with({
+				props: [{snug: true}],
+				children: html\`
+					<button>alpha</button>
+					<button>bravo</button>
+					<button>charlie</button>
+					<p slot=panel>lorem kettlebell..</p>
+					<p slot=panel>lorem protein..</p>
+					<p slot=panel>lorem caffeine..</p>
+				\`,
+			})
+		`,
+		css: css`
+			[view="shiny-tabs"] {
+				--shiny-rounded: 0.5em;
+			}
+		`,
+	}),
+])
+

package/s/views/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-tabbed]) {
+		opacity: 1;
+		color: currentColor;
+		text-decoration: underline;
+	}
+}
+
+slot[part="tabs"][data-snug] {
+	&::slotted(*) {
+		border-radius: var(--rounded);
+	}
+
+	&::slotted(:not([data-last], [data-next-is-tabbed])) {
+		border-right: none;
+	}
+
+	&::slotted([data-tabbed]: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;
+	}
+}
+
+} `
+

package/s/views/tabs/view.ts

@@ -0,0 +1,66 @@
+
+import {html} from "lit"
+import {dom, shadow, useHost, useName, useOnce, useSignal, useStyles} from "@e280/sly"
+import styleCss from "./style.css.js"
+import {TabsControl} from "./control.js"
+import {themeCss} from "../../theme/theme.css.js"
+
+export const ShinyTabs = shadow((options: {
+		snug?: boolean
+		control?: TabsControl
+	} = {}) => {
+
+	useName("shiny-tabs")
+	useStyles(themeCss, styleCss)
+
+	const host = useHost()
+	const attrs = useOnce(() => dom.attrs(host).spec({index: Number}))
+	const control = useOnce(() => options.control ?? new TabsControl(attrs.index ?? 0))
+
+	const $tabs = useSignal<HTMLElement[]>([])
+	const $panels = useSignal<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 tabbed = (index === control.index)
+		const tabAttrs = dom.attrs(tab)
+		tabAttrs.booleans.disabled = tabbed
+		tabAttrs.booleans["data-snug"] = options.snug
+		tabAttrs.booleans["data-tabbed"] = tabbed
+		tabAttrs.booleans["data-first"] = (index === 0)
+		tabAttrs.booleans["data-last"] = (index === (control.length - 1))
+		tabAttrs.booleans["data-next-is-tabbed"] = isNeighborActive(index, 1)
+		tabAttrs.booleans["data-previous-is-tabbed"] = isNeighborActive(index, -1)
+		tab.onclick = () => control.setIndex(index)
+	}
+
+	for (const [index, panel] of $panels().entries()) {
+		const tabbed = (index === control.index)
+		dom.attrs(panel).booleans["data-tabbed"] = tabbed
+		dom.attrs(panel).booleans["hidden"] = !tabbed
+	}
+
+	return html`
+		<slot part=tabs ?data-snug="${options.snug}" @slotchange="${tabchange}"></slot>
+		<slot part=panels name=panel @slotchange="${panelchange}"></slot>
+	`
+})
+