@mhmo91/schmancy 0.8.6 → 0.9.2

package/src/json/index.ts

@@ -0,0 +1 @@
+export * from './json'

package/src/json/json.ts

@@ -0,0 +1,55 @@
+import { TailwindElement } from '@mixins/index'
+import { css, html } from 'lit'
+import { customElement, property } from 'lit/decorators.js'
+import { unsafeHTML } from 'lit/directives/unsafe-html.js'
+import { $notify } from '@schmancy/notification'
+
+@customElement('schmancy-json')
+export class SchmancyJson extends TailwindElement(css`:host { display: block }`) {
+	@property({ type: Object }) data: Record<string, any> = {}
+	@property({ type: Array }) highlightKeys: string[] = []
+	@property({ type: Boolean }) compact = false
+
+	private highlightChanges(json: string, changedKeys: string[]): string {
+		let highlighted = json
+		changedKeys.forEach(key => {
+			const regex = new RegExp(`("${key}":\\s*)([^,\\n}]+)`, 'g')
+			highlighted = highlighted.replace(regex, (_match, keyPart, valuePart) => {
+				return `${keyPart}<span class="text-warning-default font-bold">${valuePart}</span>`
+			})
+		})
+		return highlighted
+	}
+
+	private async copyJSON() {
+		try {
+			await navigator.clipboard.writeText(JSON.stringify(this.data, null, 2))
+			$notify.success('JSON copied to clipboard')
+		} catch (error) {
+			$notify.error('Failed to copy JSON')
+		}
+	}
+
+	render() {
+		const jsonString = JSON.stringify(this.data, null, this.compact ? 0 : 2)
+		const highlighted = this.highlightKeys.length > 0 ? this.highlightChanges(jsonString, this.highlightKeys) : jsonString
+
+		return html`
+			<div
+				class="bg-surface-container rounded-lg p-2 font-mono overflow-auto cursor-pointer hover:bg-surface-container-high transition-colors"
+				@click=${this.copyJSON}
+			>
+				<div class="flex items-center justify-between mb-1">
+					<schmancy-icon size="12px" class="text-on-surface-variant">content_copy</schmancy-icon>
+				</div>
+				<pre class="text-[10px] leading-tight">${unsafeHTML(highlighted)}</pre>
+			</div>
+		`
+	}
+}
+
+declare global {
+	interface HTMLElementTagNameMap {
+		'schmancy-json': SchmancyJson
+	}
+}

package/src/layout/flex/flex.scss

@@ -0,0 +1,4 @@
+:host {
+	display: block;
+	background-color: inherit;
+}

package/src/layout/flex/flex.ts

@@ -0,0 +1,74 @@
+import { html, unsafeCSS } from 'lit'
+import { customElement, property } from 'lit/decorators.js'
+import { classMap } from 'lit/directives/class-map.js'
+import { styleMap } from 'lit/directives/style-map.js'
+import Layout from '../layout'
+import style from './flex.scss?inline'
+
+/**
+ * @deprecated Use Tailwind CSS flex classes directly instead of this component.
+ * This component will be removed in a future version.
+ * 
+ * Migration guide:
+ * - Replace <schmancy-flex> with <div class="flex ...">
+ * - Use Tailwind's flex utilities: flex-row, flex-col, gap-*, items-*, justify-*, etc.
+ * 
+ * @element schmancy-flex
+ */
+@customElement('schmancy-flex')
+export class SchmancyFlex extends Layout {
+	static styles = [Layout.styles, unsafeCSS(style)]
+	layout = true
+	@property({ type: String, reflect: true }) flow: 'row' | 'row-reverse' | 'col' | 'col-reverse' = 'col'
+	@property({ type: String, reflect: true }) wrap: 'wrap' | 'nowrap' | 'wrap-reverse' = 'wrap'
+	@property({ type: String, reflect: true }) align: 'start' | 'center' | 'end' | 'stretch' | 'baseline' = 'start'
+	@property({ type: String, reflect: true }) justify: 'start' | 'center' | 'end' | 'stretch' | 'between' = 'start'
+	@property({ type: String, reflect: true }) gap: 'none' | 'sm' | 'md' | 'lg' = 'none'
+
+	render() {
+		const classes = {
+			flex: true,
+			// Direction
+			'flex-col': this.flow === 'row',
+			'flex-col-reverse': this.flow === 'row-reverse',
+			'flex-row': this.flow === 'col',
+			'flex-row-reverse': this.flow === 'col-reverse',
+			// Wrap
+			'flex-wrap': this.wrap === 'wrap',
+			'flex-wrap-reverse': this.wrap === 'wrap-reverse',
+			'flex-nowrap': this.wrap === 'nowrap',
+			// Align
+			'items-start': this.align === 'start',
+			'items-center': this.align === 'center',
+			'items-end': this.align === 'end',
+			'items-stretch': this.align === 'stretch',
+			'justify-baseline': this.align === 'baseline',
+
+			// Justify
+			'justify-center': this.justify === 'center',
+			'justify-end': this.justify === 'end',
+			'justify-start': this.justify === 'start',
+			'justify-stretch': this.justify === 'stretch',
+			'justify-between': this.justify === 'between',
+
+			// Gap
+			'gap-0': this.gap === 'none',
+			'gap-2': this.gap === 'sm',
+			'gap-4': this.gap === 'md',
+			'gap-8': this.gap === 'lg',
+		}
+
+		const styles = {}
+		return html`
+			<section class=${classMap(classes)} style=${styleMap(styles)}>
+				<slot></slot>
+			</section>
+		`
+	}
+}
+
+declare global {
+	interface HTMLElementTagNameMap {
+		'schmancy-flex': SchmancyFlex
+	}
+}

package/src/layout/flex/index.ts

@@ -0,0 +1 @@
+export * from './flex';

package/src/layout/grid/.readme

@@ -0,0 +1,79 @@
+Certainly! Below is a basic template for a README file for your Lit element component named `SchmancyGrid`. You can customize it further based on your project's specific details and requirements.
+
+---
+
+# SchmancyGrid
+
+`SchmancyGrid` is a flexible grid layout component built with Lit, incorporating the `animejs` library for animations. This component provides a versatile grid structure with support for various configurations, including flow, alignment, justification, gap size, and animation effects.
+
+## Installation
+
+```bash
+npm install @mhmo91/schmancy
+```
+
+## Usage
+
+```js
+<!-- Import the scrip -->
+import SchmancyGrid from '@mhmo91/schmancy'
+```
+
+```html
+<!-- Use the component in your HTML -->
+<schmancy-grid flow="row" align="center" justify="start" gap="md" cols="3" rows="2" wrap>
+	<!-- Add your content here -->
+	<div>Item 1</div>
+	<div>Item 2</div>
+	<!-- ... -->
+</schmancy-grid>
+```
+
+## Properties
+
+- `flow` (String): Controls the grid flow (`row`, `col`, `dense`, `row-dense`, `col-dense`). Default is `row`.
+- `align` (String): Align items along the cross-axis (`start`, `center`, `end`, `stretch`, `baseline`). Default is `stretch`.
+- `justify` (String): Justify items along the main axis (`start`, `center`, `end`, `stretch`). Default is `stretch`.
+- `gap` (String): Set the gap size between grid items (`none`, `sm`, `md`, `lg`). Default is `none`.
+- `cols` (Number): Number of columns in the grid.
+- `rows` (Number): Number of rows in the grid.
+- `anime` (Object): Animation configuration using the `animejs` library. Default is an empty object.
+- `wrap` (Boolean): Whether to allow items to wrap onto multiple lines. Default is `false`.
+
+## Examples
+
+### Basic Example
+
+```html
+<schmancy-grid>
+	<div>Item 1</div>
+	<div>Item 2</div>
+	<div>Item 3</div>
+</schmancy-grid>
+```
+
+### Grid with Animation
+
+```html
+<schmancy-grid
+	flow="col"
+	align="center"
+	justify="center"
+	gap="md"
+	cols="4"
+	anime="{ easing: 'easeInOutQuad', duration: 1000 }"
+>
+	<div>Item 1</div>
+	<div>Item 2</div>
+	<div>Item 3</div>
+	<!-- ... -->
+</schmancy-grid>
+```
+
+## License
+
+This project is licensed under the [MIT License](LICENSE).
+
+---
+
+Feel free to customize the content according to your specific needs. Include additional sections, such as "Contributing," "Issues," or "Acknowledgments," if applicable to your project.

package/src/layout/grid/grid.scss

@@ -0,0 +1,5 @@
+:host {
+	height: max-content;
+	width: -webkit-fill-available;
+	display: block;
+}

package/src/layout/grid/grid.ts

@@ -0,0 +1,121 @@
+import { html, unsafeCSS } from 'lit'
+import { customElement, property, queryAssignedElements } from 'lit/decorators.js'
+import { debounceTime, distinctUntilChanged, fromEvent, map, startWith, takeUntil } from 'rxjs'
+import Layout from '../layout'
+import style from './grid.scss?inline'
+
+/**
+ * @deprecated Use Tailwind CSS grid classes directly instead of this component.
+ * This component will be removed in a future version.
+ * 
+ * Migration guide:
+ * - Replace <schmancy-grid> with <div class="grid ...">
+ * - Use Tailwind's grid utilities: grid-cols-*, gap-*, items-*, justify-items-*, etc.
+ * 
+ * @element schmancy-grid
+ */
+@customElement('schmancy-grid')
+export class SchmancyGrid extends Layout {
+	static styles = [Layout.styles, unsafeCSS(style)]
+	layout = true
+	@property({ type: String }) flow: 'row' | 'col' | 'dense' | 'row-dense' | 'col-dense' = 'row'
+	@property({ type: String }) align: 'start' | 'center' | 'end' | 'stretch' | 'baseline' = 'stretch'
+	@property({ type: String }) justify: 'start' | 'center' | 'end' | 'stretch' = 'stretch'
+	@property({ type: String }) content: 'start' | 'center' | 'end' | 'stretch' | 'around' | 'evenly' | 'between' =
+		'stretch'
+	@property({ type: String }) gap: 'none' | 'xs' | 'sm' | 'md' | 'lg' = 'none'
+
+	@property({ type: String }) cols?: string
+	@property({ type: String }) rows?: string
+	@property({ type: Object }) rcols?: {
+		xs?: string | number
+		sm?: string | number
+		md?: string | number
+		lg?: string | number
+		xl?: string | number
+		'2xl'?: string | number
+	}
+
+	@property({ type: Boolean }) wrap = false
+
+	@queryAssignedElements() assignedElements!: HTMLElement[]
+
+	firstUpdated() {
+		if (this.rcols)
+			fromEvent<CustomEvent>(window, 'resize')
+				.pipe(
+					map(event => event.target as Window),
+					startWith(1),
+					map(() => (this.clientWidth ? this.clientWidth : window.innerWidth)),
+					distinctUntilChanged(),
+					takeUntil(this.disconnecting),
+					debounceTime(10),
+					map(w => {
+						let cols
+						if (this.rcols?.['2xl'] && w >= 1536) cols = this.rcols?.['2xl']
+						else if (this.rcols?.xl && w >= 1280) cols = this.rcols?.xl
+						else if (this.rcols?.lg && w >= 1024) cols = this.rcols?.lg
+						else if (this.rcols?.md && w >= 768) cols = this.rcols?.md
+						else if (this.rcols?.sm && w >= 640) cols = this.rcols?.sm
+						else if (this.rcols?.xs && w < 640) cols = this.rcols?.xs
+						return cols
+					}),
+				)
+				.subscribe(cols => {
+					this.cols = cols
+				})
+	}
+
+	render() {
+		const classes = {
+			'h-full': true,
+			'grid flex-1': true,
+			// flow classes: https://tailwindcss.com/docs/grid-auto-flow
+			'grid-flow-row auto-rows-max': this.flow === 'row',
+			'grid-flow-col auto-cols-max': this.flow === 'col',
+			'grid-flow-row-dense': this.flow === 'row-dense',
+			'grid-flow-col-dense': this.flow === 'col-dense',
+			'grid-flow-dense': this.flow === 'dense',
+
+			'justify-center': this.content === 'center',
+			'justify-end': this.content === 'end',
+			'justify-start': this.content === 'start',
+			'justify-stretch': this.content === 'stretch',
+			'justify-between': this.content === 'between',
+			'justify-around': this.content === 'around',
+			'justify-evenly': this.content === 'evenly',
+
+			'justify-items-center': this.justify === 'center',
+			'justify-items-end': this.justify === 'end',
+			'justify-items-start': this.justify === 'start',
+			'justify-items-stretch': this.justify === 'stretch',
+			'items-center': this.align === 'center',
+			'items-end': this.align === 'end',
+			'items-start': this.align === 'start',
+			'items-stretch': this.align === 'stretch',
+			'items-baseline': this.align === 'baseline',
+			'gap-0': this.gap === 'none',
+			'gap-1': this.gap === 'xs',
+			'gap-2': this.gap === 'sm',
+			'gap-4': this.gap === 'md',
+			'gap-8': this.gap === 'lg',
+			'flex-nowrap': this.wrap,
+			'flex-wrap': !this.wrap,
+		}
+		const style = {
+			gridTemplateRows: this.rows ? this.rows : undefined,
+			gridTemplateColumns: this.cols ? this.cols : undefined,
+		}
+		return html`
+			<section class="${this.classMap(classes)}" style=${this.styleMap(style)}>
+				<slot> </slot>
+			</section>
+		`
+	}
+}
+
+declare global {
+	interface HTMLElementTagNameMap {
+		'schmancy-grid': SchmancyGrid
+	}
+}

package/src/layout/grid/index.ts

@@ -0,0 +1 @@
+export * from './grid';

package/src/layout/index.ts

@@ -0,0 +1,5 @@
+export * from './flex'
+export * from './grid'
+export * from './scroll'
+export * from './v2'
+export * from './layout'

package/src/layout/layout.ts

@@ -0,0 +1,122 @@
+import { TailwindElement } from '@mixins/index'
+import { property } from 'lit/decorators.js'
+
+/**
+ * @deprecated Use Tailwind CSS utility classes directly on HTML elements instead of this base class.
+ * This component will be removed in a future version.
+ * 
+ * Migration guide:
+ * - Use inline styles or Tailwind utility classes for layout properties
+ * - Replace properties like padding, margin, width, etc. with their CSS equivalents
+ * 
+ * @class Layout
+ */
+export default class Layout extends TailwindElement() {
+	static styles = [this.styles]
+	layout = true
+	@property({ type: Boolean }) center: boolean | undefined = undefined
+	@property({ type: String }) padding: string | undefined
+	@property({ type: String }) margin: string | undefined
+	@property({ type: String }) width: string | undefined
+	@property({ type: String }) height: string | undefined
+	@property({ type: String }) minWidth: string | undefined
+	@property({ type: String }) minHeight: string | undefined
+	@property({ type: String }) maxWidth: string | undefined
+	@property({ type: String }) maxHeight: string | undefined
+	@property({ type: String }) display:
+		| 'block'
+		| 'inline-block'
+		| 'inline'
+		| 'flex'
+		| 'inline-flex'
+		| 'grid'
+		| 'inline-grid'
+		| 'table'
+		| 'inline-table'
+		| 'flow-root'
+		| 'none'
+		| undefined = undefined
+	@property({ type: String }) overflow: 'visible' | 'hidden' | 'scroll' | 'auto' | undefined = undefined
+	@property({ type: String }) overflowX: 'visible' | 'hidden' | 'scroll' | 'auto' | undefined = undefined
+	@property({ type: String }) overflowY: 'visible' | 'hidden' | 'scroll' | 'auto' | undefined = undefined
+	@property({ type: String }) position: 'static' | 'relative' | 'absolute' | 'fixed' | 'sticky' | undefined = undefined
+	@property({ type: String }) top: string | undefined
+	@property({ type: String }) right: string | undefined
+	@property({ type: String }) bottom: string | undefined
+	@property({ type: String }) left: string | undefined
+	@property({ type: String }) inset: string | undefined
+	@property({ type: String }) zIndex: string | undefined
+
+	@property({ type: String }) border: string | undefined
+	@property({ type: String }) borderTop: string | undefined
+	@property({ type: String }) borderRight: string | undefined
+	@property({ type: String }) borderBottom: string | undefined
+	@property({ type: String }) borderLeft: string | undefined
+	@property({ type: String }) borderColor: string | undefined
+	@property({ type: String }) borderRadius: string | undefined
+	@property({ type: String }) borderWidth: string | undefined
+
+	@property({ type: String }) boxShadow: string | undefined
+	@property({ type: String }) opacity: string | undefined
+	@property({ type: String }) background: string | undefined
+	@property({ type: String }) backgroundImage: string | undefined
+	@property({ type: String }) backgroundPosition: string | undefined
+	@property({ type: String }) backgroundSize: string | undefined
+	@property({ type: String }) backgroundRepeat: string | undefined
+	@property({ type: String }) backgroundAttachment: string | undefined
+	@property({ type: String }) backgroundColor: string | undefined
+	@property({ type: String }) backgroundClip: string | undefined
+	@property({ type: String }) backgroundOrigin: string | undefined
+	@property({ type: String }) backgroundBlendMode: string | undefined
+	@property({ type: String }) filter: string | undefined
+	@property({ type: String }) backdropFilter: string | undefined
+
+	connectedCallback(): void {
+		super.connectedCallback()
+		this.style.setProperty('padding', this.padding ?? '')
+		this.style.setProperty('margin', this.margin ?? '')
+		this.style.setProperty('width', this.width ?? '')
+		this.style.setProperty('height', this.height ?? '')
+		this.style.setProperty('min-width', this.minWidth ?? '')
+		this.style.setProperty('min-height', this.minHeight ?? '')
+		this.style.setProperty('max-width', this.maxWidth ?? '')
+		this.style.setProperty('max-height', this.maxHeight ?? '')
+		this.style.setProperty('display', this.display ?? '')
+		this.style.setProperty('overflow', this.overflow ?? '')
+		this.style.setProperty('overflow-x', this.overflowX ?? '')
+		this.style.setProperty('overflow-y', this.overflowY ?? '')
+		this.style.setProperty('position', this.position ?? '')
+		this.style.setProperty('top', this.top ?? '')
+		this.style.setProperty('right', this.right ?? '')
+		this.style.setProperty('bottom', this.bottom ?? '')
+		this.style.setProperty('left', this.left ?? '')
+		this.style.setProperty('inset', this.inset ?? '')
+		this.style.setProperty('z-index', this.zIndex ?? '')
+		this.style.setProperty('border', this.border ?? '')
+		this.style.setProperty('border-top', this.borderTop ?? '')
+		this.style.setProperty('border-right', this.borderRight ?? '')
+		this.style.setProperty('border-bottom', this.borderBottom ?? '')
+		this.style.setProperty('border-left', this.borderLeft ?? '')
+		this.style.setProperty('border-color', this.borderColor ?? '')
+		this.style.setProperty('border-radius', this.borderRadius ?? '')
+		this.style.setProperty('border-width', this.borderWidth ?? '')
+		this.style.setProperty('box-shadow', this.boxShadow ?? '')
+		this.style.setProperty('opacity', this.opacity ?? '')
+		this.style.setProperty('background', this.background ?? '')
+		this.style.setProperty('background-image', this.backgroundImage ?? '')
+		this.style.setProperty('background-position', this.backgroundPosition ?? '')
+		this.style.setProperty('background-size', this.backgroundSize ?? '')
+		this.style.setProperty('background-repeat', this.backgroundRepeat ?? '')
+		this.style.setProperty('background-attachment', this.backgroundAttachment ?? '')
+		this.style.setProperty('background-color', this.backgroundColor ?? '')
+		this.style.setProperty('background-clip', this.backgroundClip ?? '')
+		this.style.setProperty('background-origin', this.backgroundOrigin ?? '')
+		this.style.setProperty('background-blend-mode', this.backgroundBlendMode ?? '')
+		this.style.setProperty('filter', this.filter ?? '')
+		this.style.setProperty('backdrop-filter', this.backdropFilter ?? '')
+		if (this.center) {
+			this.style.setProperty('margin-left', 'auto')
+			this.style.setProperty('margin-right', 'auto')
+		}
+	}
+}

package/src/layout/scroll/index.ts

@@ -0,0 +1 @@
+export * from './scroll'