@e280/shiny 0.1.0-2 → 0.1.0-21

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.2em; }
+			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>
+	`
+})
+

package/x/{demo → _archive/demo}/demo.css

@@ -6,6 +6,7 @@
 		--bg: #333;
 		--color: #fff;
 		--prime: #d068ff;
+		--code: #3f1;
 		--link: cyan;
 
 		--selection: white;

package/x/demo/main.bundle.js

@@ -0,0 +1,13 @@
+import { dom } from "@e280/sly";
+import { copyShowcase } from "../views/copy/showcase.js";
+import { tabsShowcase } from "../views/tabs/showcase.js";
+import { buttonShowcase } from "../views/button/showcase.js";
+import { drawerShowcase } from "../views/drawer/showcase.js";
+dom.render(dom(".gallery"), [
+    buttonShowcase(),
+    copyShowcase(),
+    tabsShowcase(),
+    drawerShowcase(),
+]);
+console.log("✨shiny✨");
+//# sourceMappingURL=main.bundle.js.map

package/x/demo/main.bundle.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"main.bundle.js","sourceRoot":"","sources":["../../s/demo/main.bundle.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,GAAG,EAAC,MAAM,WAAW,CAAA;AAC7B,OAAO,EAAC,YAAY,EAAC,MAAM,2BAA2B,CAAA;AACtD,OAAO,EAAC,YAAY,EAAC,MAAM,2BAA2B,CAAA;AACtD,OAAO,EAAC,cAAc,EAAC,MAAM,6BAA6B,CAAA;AAC1D,OAAO,EAAC,cAAc,EAAC,MAAM,6BAA6B,CAAA;AAE1D,GAAG,CAAC,MAAM,CAAC,GAAG,CAAC,UAAU,CAAC,EAAE;IAC3B,cAAc,EAAE;IAChB,YAAY,EAAE;IACd,YAAY,EAAE;IACd,cAAc,EAAE;CAChB,CAAC,CAAA;AAEF,OAAO,CAAC,GAAG,CAAC,SAAS,CAAC,CAAA"}