@e280/shiny 0.1.0-14 → 0.1.0-16

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/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"}