@e280/shiny 0.1.0-2 → 0.1.0-21

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

@@ -0,0 +1,110 @@
+
+import {css} from "lit"
+export default css`@layer view {
+
+:host {
+	display: inline-flex;
+	width: max-content;
+	height: max-content;
+
+	cursor: pointer;
+	background: transparent;
+	user-select: none;
+
+	--button-padding: 0.3em 0.7em;
+	--button-color: var(--calm);
+}
+
+slot {
+	z-index: 1;
+	position: relative;
+	display: block;
+}
+
+button {
+	opacity: 0.8;
+	position: relative;
+
+	font: inherit;
+	cursor: inherit;
+	text-shadow: inherit;
+	font-weight: medium;
+
+	display: inline-flex;
+	justify-content: center;
+	align-items: center;
+
+	width: 100%;
+	height: 100%;
+	padding: var(--button-padding);
+
+	border-radius: 2em;
+	background: var(--button-color);
+	text-shadow: 0.1em 0.1em 0.1em #0004;
+	box-shadow: 0.1em 0.2em 0.3em #0002;
+
+	color: white;
+	border: none;
+	background: linear-gradient(
+		to bottom right,
+		color-mix(in oklab, var(--button-color), white 40%),
+		color-mix(in oklab, var(--button-color), black 20%)
+	);
+
+	&::before {
+		content: "";
+		display: block;
+		position: absolute;
+		z-index: 0;
+		inset: 0.15em;
+		border-radius: inherit;
+		background: color-mix(in oklab, var(--button-color), #0004 50%);
+	}
+
+	&:not([disabled]):is(:hover, :focus-visible) { opacity: 1; }
+	&:not([disabled]):active { opacity: 0.6; }
+
+	&[data-vibe="lame"] { --button-color: var(--lame); }
+	&[data-vibe="angry"] { --button-color: var(--angry); }
+	&[data-vibe="zesty"] { --button-color: var(--zesty); }
+	&[data-vibe="happy"] { --button-color: var(--happy); }
+	&[data-vibe="calm"] { --button-color: var(--calm); }
+	&[data-vibe="sad"] { --button-color: var(--sad); }
+	&[data-vibe="quirky"] { --button-color: var(--quirky); }
+	&[data-vibe="tabbed"] { --button-color: var(--tabbed); }
+
+	> * {
+		position: relative;
+		z-index: 1;
+	}
+
+	&[disabled] {
+		cursor: default;
+	}
+
+	&[hidden] {
+		display: none !important;
+	}
+}
+
+:host([data-tabbed]) > button {
+	opacity: 1;
+	filter: brightness(120%);
+}
+
+:host(:not([data-tabbed])) > button[disabled] {
+	--button-color: var(--lame);
+}
+
+:host([data-snug]:not([data-last])) > button {
+	border-top-right-radius: 0;
+	border-bottom-right-radius: 0;
+}
+
+:host([data-snug]:not([data-first])) > button {
+	border-top-left-radius: 0;
+	border-bottom-left-radius: 0;
+}
+
+}`
+

package/s/views/button/view.ts

@@ -0,0 +1,32 @@
+
+import {html} from "lit"
+import {Content, shadow, useCss, useName, useAttrs} from "@e280/sly"
+
+import styleCss from "./style.css.js"
+import {themeCss} from "../../theme/theme.css.js"
+
+export const ShinyButton = shadow((content?: Content, options: {
+		vibe?: "calm" | "lame" | "happy" | "sad" | "angry" | "zesty" | "quirky"
+		onClick?: (event: PointerEvent) => void
+	} = {}) => {
+
+	useName("shiny-button")
+	useCss(themeCss, styleCss)
+
+	const attrs = useAttrs({
+		hidden: Boolean,
+		disabled: Boolean,
+	})
+
+	return html`
+		<button
+			part=button
+			data-vibe="${options.vibe ?? "calm"}"
+			?disabled="${attrs.disabled}"
+			?hidden="${attrs.hidden}"
+			@click="${options.onClick}">
+			<slot>${content}</slot>
+		</button>
+	`
+})
+

package/s/views/copy/parts/copy-status.ts

@@ -0,0 +1,3 @@
+
+export type CopyStatus = "neutral" | "good" | "bad" | "invalid"
+

package/s/views/copy/parts/determine-base-status.ts

@@ -0,0 +1,7 @@
+
+export function determineBaseStatus(text: string | undefined) {
+	return text === undefined
+		? "invalid"
+		: "neutral"
+}
+

package/s/views/copy/parts/use-copier.ts

@@ -0,0 +1,20 @@
+
+import {debounce} from "@e280/stz"
+import {useOnce, useSignal} from "@e280/sly"
+
+import {CopyStatus} from "./copy-status.js"
+import {determineBaseStatus} from "./determine-base-status.js"
+
+export function useCopier(text: string | undefined, ms: number) {
+	const $status = useSignal<CopyStatus>(determineBaseStatus(text))
+
+	const reset = useOnce(() => debounce(ms, () => $status.set(determineBaseStatus(text))))
+
+	const flash = useOnce(() => async(status: CopyStatus) => {
+		await $status.set(status)
+		await reset()
+	})
+
+	return {reset, flash, status: $status()}
+}
+

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,51 @@
+
+import {css} from "lit"
+export default css`@layer view {
+
+button {
+	background: transparent;
+	border: none;
+	font-size: inherit;
+}
+
+button {
+	opacity: var(--inactive-opacity);
+	display: flex;
+	align-items: center;
+
+	cursor: copy;
+	color: inherit;
+	transition: all var(--anim-duration) linear;
+
+	&:is(:hover, :focus-visible) {
+		opacity: 1;
+	}
+
+	> span {
+		display: flex;
+	}
+}
+
+[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,60 @@
+
+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}" part=button>
+			<span part=icon>
+				${(() => {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`)
+				}})()}
+			</span>
+			<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)
+	}
+}
+