@mhmo91/schmancy 0.8.6 → 0.9.2

package/src/content-drawer/drawer.service.ts

@@ -0,0 +1,148 @@
+import { SchmancyEvents } from '@schmancy/types/events'
+import { BehaviorSubject, Subject, concatMap, delay, of, tap } from 'rxjs'
+import { ComponentType } from '../area/router.types'
+
+// type DrawerAction = 'dismiss' | 'render' | 'push'
+type TRef = Element | Window
+type TRenderRequest = ComponentType
+export type TRenderCustomEvent = CustomEvent<{
+	component: TRenderRequest
+	title?: string
+	state?: Record<string, unknown>
+	params?: Record<string, unknown>
+	props?: Record<string, unknown>
+}>
+
+export type DrawerPushOptions = {
+	component: ComponentType
+	state?: Record<string, unknown>
+	params?: Record<string, unknown>
+	props?: Record<string, unknown>
+}
+
+type DrawerCommand =
+	| { action: 'dismiss'; ref: TRef }
+	| { action: 'render'; ref: TRef; component: TRenderRequest; title?: string }
+	| { action: 'push'; ref: TRef; component: ComponentType; state?: Record<string, unknown>; params?: Record<string, unknown>; props?: Record<string, unknown> }
+
+class DrawerService {
+	private $drawer = new Subject<DrawerCommand>()
+	private pushCounter = 0
+	private isDismissing$ = new BehaviorSubject<boolean>(false)
+
+	constructor() {
+		// Use concatMap to queue commands and process them sequentially
+		this.$drawer.pipe(
+			concatMap(command => {
+				switch (command.action) {
+					case 'dismiss':
+						return of(command).pipe(
+							tap(() => {
+								this.isDismissing$.next(true)
+								this.dispatchToggleEvent(command.ref, 'close')
+							}),
+							// Wait for dismiss animation (250ms from sheet.ts)
+							delay(300),
+							tap(() => this.isDismissing$.next(false))
+						)
+					case 'render':
+						return of(command).pipe(
+							tap(() => {
+								this.dispatchToggleEvent(command.ref, 'open')
+								this.dispatchRenderEvent(command.ref, command.component, command.title)
+							})
+						)
+					case 'push':
+						return of(command).pipe(
+							tap(() => this.handlePush(command.ref, command.component, command.state, command.params, command.props))
+						)
+					default:
+						return of(null)
+				}
+			})
+		).subscribe()
+	}
+
+	private dispatchToggleEvent(ref: TRef, state: 'open' | 'close') {
+		ref.dispatchEvent(
+			new CustomEvent(SchmancyEvents.ContentDrawerToggle, {
+				detail: { state },
+				bubbles: true,
+				composed: true,
+			})
+		)
+	}
+
+	private dispatchRenderEvent(
+		ref: TRef,
+		component: TRenderRequest,
+		title?: string,
+		state?: Record<string, unknown>,
+		params?: Record<string, unknown>,
+		props?: Record<string, unknown>
+	) {
+		ref.dispatchEvent(
+			new CustomEvent('schmancy-content-drawer-render', {
+				detail: { component, title, state, params, props },
+				bubbles: true,
+				composed: true,
+			})
+		)
+	}
+
+	dimiss(ref: TRef) {
+		this.$drawer.next({
+			action: 'dismiss',
+			ref: ref,
+		})
+	}
+
+	render(ref: TRef, component: TRenderRequest, title?: string) {
+		ref.dispatchEvent(new CustomEvent('custom-event'))
+		this.$drawer.next({
+			action: 'render',
+			ref: ref,
+			component: component,
+			title,
+		})
+	}
+
+	private handlePush(
+		ref: TRef,
+		component: ComponentType,
+		state?: Record<string, unknown>,
+		params?: Record<string, unknown>,
+		props?: Record<string, unknown>
+	) {
+		// Auto-increment counter to make every push unique
+		// Area router uses distinctUntilChanged on component+state+params+props
+		// Without this, pushing same component with same props gets silently blocked
+		const enhancedState = {
+			...state,
+			_drawerPushId: ++this.pushCounter
+		}
+
+		this.dispatchToggleEvent(ref, 'open')
+		this.dispatchRenderEvent(ref, component, undefined, enhancedState, params, props)
+	}
+
+	/**
+	 * Push a component to the content drawer
+	 * Every push is guaranteed to render (auto-incremented unique ID prevents deduplication)
+	 * @param options - Component configuration object with optional state/params/props
+	 * @example
+	 * schmancyContentDrawer.push({
+	 *   component: myComponent,
+	 *   props: { id: '123' }
+	 * })
+	 */
+	push(options: DrawerPushOptions): void {
+		this.$drawer.next({
+			action: 'push',
+			ref: window,
+			...options,
+		})
+	}
+}
+
+export const schmancyContentDrawer = new DrawerService()

package/src/content-drawer/drawer.ts

@@ -0,0 +1,183 @@
+import { provide } from '@lit/context'
+import { $LitElement } from '@mixins/index'
+import { css, html, nothing } from 'lit'
+import { customElement, property, queryAssignedElements, state } from 'lit/decorators.js'
+import { debounceTime, distinctUntilChanged, fromEvent, map, merge, startWith, takeUntil, tap } from 'rxjs'
+import { SchmancyEvents, TRenderCustomEvent, area, sheet } from '..'
+import {
+	SchmancyContentDrawerID,
+	SchmancyContentDrawerMaxHeight,
+	SchmancyContentDrawerMinWidth,
+	SchmancyContentDrawerSheetMode,
+	SchmancyContentDrawerSheetState,
+	TSchmancyContentDrawerSheetMode,
+	TSchmancyContentDrawerSheetState,
+} from './context'
+
+/**
+ * @element schmancy-content-drawer
+ * @slot appbar - The appbar slot
+ * @slot - The content slot
+ */
+@customElement('schmancy-content-drawer')
+export class SchmancyContentDrawer extends $LitElement(css`
+	:host {
+		position: relative;
+		inset: 0;
+		display: block;
+		overflow: hidden;
+	}
+`) {
+	/**
+	 * The minimum width of the sheet
+	 * @attr	minWidth
+	 * @type {number}
+	 * @memberof SchmancyContentDrawer
+	 */
+
+	@provide({ context: SchmancyContentDrawerMinWidth })
+	minWidth: typeof SchmancyContentDrawerMinWidth.__context__ = {
+		main: 360,
+		sheet: 576,
+	}
+
+	/**
+	 * The state of the sheet
+	 * @attr open
+	 * @type {TSchmancyContentDrawerSheetState}
+	 */
+	@provide({ context: SchmancyContentDrawerSheetState })
+	@property()
+	open: TSchmancyContentDrawerSheetState
+
+	/**
+	 * The mode of the sheet
+	 * @type {TSchmancyContentDrawerSheetMode}
+	 * @memberof SchmancyContentDrawer
+	 * @protected
+	 */
+	@provide({ context: SchmancyContentDrawerSheetMode })
+	@state()
+	mode: TSchmancyContentDrawerSheetMode
+
+	@provide({ context: SchmancyContentDrawerID })
+	schmancyContentDrawerID = Math.floor(Math.random() * Date.now()).toString()
+
+	@provide({ context: SchmancyContentDrawerMaxHeight })
+	maxHeight = '100%'
+
+	@queryAssignedElements({ flatten: true })
+	assignedElements!: HTMLElement[]
+
+	firstUpdated(): void {
+		this.setupResizeListener()
+		this.setupToggleListener()
+		this.setupRenderListener()
+	}
+
+	private setupResizeListener() {
+		merge(
+			fromEvent<CustomEvent>(window, 'resize'),
+			fromEvent<CustomEvent>(window, SchmancyEvents.ContentDrawerResize)
+		)
+			.pipe(
+				startWith(true),
+				debounceTime(100),
+				map(() => this.clientWidth || window.innerWidth),
+				map(width => width >= this.minWidth.main + this.minWidth.sheet),
+				distinctUntilChanged(),
+				tap(() => this.updateMaxHeight()),
+				takeUntil(this.disconnecting)
+			)
+			.subscribe(isLargeScreen => this.updateMode(isLargeScreen))
+	}
+
+	private setupToggleListener() {
+		fromEvent<CustomEvent>(window, SchmancyEvents.ContentDrawerToggle)
+			.pipe(
+				tap(event => event.stopPropagation()),
+				map(event => event.detail.state),
+				takeUntil(this.disconnecting)
+			)
+			.subscribe(state => {
+				this.open = state
+			})
+	}
+
+	private setupRenderListener() {
+		fromEvent<TRenderCustomEvent>(window, 'schmancy-content-drawer-render')
+			.pipe(
+				tap(event => event.stopPropagation()),
+				map(event => event.detail),
+				takeUntil(this.disconnecting)
+			)
+			.subscribe(detail => this.handleRender(detail))
+	}
+
+	private updateMaxHeight() {
+		this.maxHeight = `${window.innerHeight - this.getOffsetTop(this)}px`
+		this.style.setProperty('max-height', this.maxHeight)
+	}
+
+	private updateMode(isLargeScreen: boolean) {
+		if (isLargeScreen) {
+			this.mode = 'push'
+			this.open = 'open'
+		} else {
+			this.mode = 'overlay'
+			this.open = 'close'
+		}
+	}
+
+	private handleRender(detail: TRenderCustomEvent['detail']) {
+		if (this.mode === 'push') {
+			area.push({
+				area: this.schmancyContentDrawerID,
+				component: detail.component,
+				historyStrategy: 'silent',
+				state: detail.state,
+				params: detail.params,
+				props: detail.props,
+			})
+		} else if (this.mode === 'overlay') {
+			sheet.open({
+				component: detail.component,
+				uid: this.schmancyContentDrawerID,
+				props: detail.props,
+			})
+		}
+	}
+
+	getOffsetTop(element: HTMLElement | null) {
+		let offsetTop = 0
+		while (element) {
+			offsetTop += element.offsetTop
+			element = element.offsetParent as HTMLElement | null
+		}
+		return offsetTop
+	}
+
+	protected render() {
+		if (!this.mode || !this.open) return nothing
+
+		const gridClasses = [
+			'grid h-full',
+			'grid-flow-col auto-cols-max',
+			'grid-rows-[1fr]',
+			'justify-items-stretch items-stretch',
+			this.mode === 'overlay' ? 'grid-cols-[1fr]' : 'grid-cols-[auto_1fr]'
+		].join(' ')
+
+		return html`
+			<div class=${gridClasses}>
+				<slot></slot>
+			</div>
+		`
+	}
+}
+
+declare global {
+	interface HTMLElementTagNameMap {
+		'schmancy-content-drawer': SchmancyContentDrawer
+	}
+}

package/src/content-drawer/index.ts

@@ -0,0 +1,5 @@
+export * from './drawer.service';
+export * from './context';
+export * from './drawer';
+export * from './main';
+export * from './sheet';

package/src/content-drawer/main.ts

@@ -0,0 +1,83 @@
+import { consume } from '@lit/context'
+import { $LitElement } from '@mixins/index'
+import { PropertyValueMap, css, html } from 'lit'
+import { customElement, property, state } from 'lit/decorators.js'
+import { SchmancyEvents } from '..'
+import {
+	SchmancyContentDrawerMaxHeight,
+	SchmancyContentDrawerMinWidth,
+	SchmancyContentDrawerSheetMode,
+	TSchmancyContentDrawerSheetMode,
+} from './context'
+import { when } from 'lit/directives/when.js'
+
+@customElement('schmancy-content-drawer-main')
+export class SchmancyContentDrawerMain extends $LitElement(css`
+	:host {
+		display: block;
+		overflow: hidden;
+	}
+`) {
+	@property({ type: Number })
+	minWidth: number
+
+	@consume({ context: SchmancyContentDrawerMinWidth, subscribe: true })
+	drawerMinWidth: typeof SchmancyContentDrawerMinWidth.__context__
+
+	@consume({ context: SchmancyContentDrawerSheetMode, subscribe: true })
+	@state()
+	mode: TSchmancyContentDrawerSheetMode
+
+	@consume({ context: SchmancyContentDrawerMaxHeight, subscribe: true })
+	@state()
+	maxHeight: string
+
+	connectedCallback(): void {
+		super.connectedCallback()
+		if (this.minWidth) this.drawerMinWidth.main = this.minWidth
+		else this.minWidth = this.drawerMinWidth.main
+	}
+
+	protected update(changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>): void {
+		super.update(changedProperties)
+		if (changedProperties.has('minWidth') && this.minWidth) {
+			this.drawerMinWidth.main = this.minWidth
+			this.dispatchEvent(new CustomEvent(SchmancyEvents.ContentDrawerResize, { bubbles: true, composed: true }))
+		}
+	}
+
+	render() {
+		const styles = {
+			minWidth: `${this.minWidth}px`,
+			maxHeight: this.maxHeight,
+		}
+
+		const gridClasses = [
+			'grid h-full relative overflow-scroll',
+			'grid-flow-col auto-cols-max',
+			'grid-rows-[1fr]',
+			'items-stretch justify-items-stretch',
+			this.mode === 'push' ? 'grid-cols-[auto_1fr]' : 'grid-cols-[1fr]'
+		].join(' ')
+
+		return html`
+			<section class="relative inset-0 h-full">
+				<div class=${gridClasses}>
+					<section style=${this.styleMap(styles)}>
+						<slot></slot>
+					</section>
+				</div>
+				${when(
+					this.mode === 'push',
+					() => html` <schmancy-divider class="absolute right-0 top-0" orientation="vertical"></schmancy-divider>`,
+				)}
+			</section>
+		`
+	}
+}
+
+declare global {
+	interface HTMLElementTagNameMap {
+		'schmancy-content-drawer-main': SchmancyContentDrawerMain
+	}
+}