@luanlu/mk-motion 1.1.0 → 1.2.1

package/src/components/breadcrumb/breadcrumb.ts

@@ -0,0 +1,71 @@
+import './breadcrumb.css'
+
+export interface BreadcrumbItem {
+  label: string
+  href?: string
+  onClick?: () => void
+}
+
+export interface BreadcrumbOptions {
+  items: BreadcrumbItem[]
+  separator?: string | HTMLElement
+}
+
+export class MkBreadcrumb {
+  el: HTMLElement
+
+  constructor(container: HTMLElement | string, options: BreadcrumbOptions) {
+    const parent = typeof container === 'string' ? document.querySelector(container)! : container
+
+    this.el = document.createElement('nav')
+    this.el.className = 'mk-breadcrumb'
+    this.el.setAttribute('aria-label', 'breadcrumb')
+
+    const sep = options.separator ?? '/'
+
+    options.items.forEach((item, index) => {
+      const isLast = index === options.items.length - 1
+
+      if (index > 0) {
+        const separatorEl = document.createElement('span')
+        separatorEl.className = 'mk-breadcrumb__separator'
+        if (typeof sep === 'string') {
+          separatorEl.textContent = sep
+        } else if (sep instanceof HTMLElement) {
+          separatorEl.appendChild(sep)
+        }
+        this.el.appendChild(separatorEl)
+      }
+
+      if (isLast) {
+        const span = document.createElement('span')
+        span.className = 'mk-breadcrumb__item is-current'
+        span.setAttribute('aria-current', 'page')
+        span.textContent = item.label
+        this.el.appendChild(span)
+      } else {
+        const link = document.createElement(item.href ? 'a' : 'span')
+        link.className = 'mk-breadcrumb__item is-link'
+        if (item.href) {
+          (link as HTMLAnchorElement).href = item.href
+        }
+        link.textContent = item.label
+        link.style.cursor = item.onClick || item.href ? 'pointer' : 'default'
+        if (item.onClick) {
+          link.addEventListener('click', item.onClick)
+        }
+        this.el.appendChild(link)
+      }
+    })
+
+    parent.appendChild(this.el)
+  }
+
+  destroy(): void {
+    this.el.remove()
+  }
+}
+
+export function createBreadcrumb(container: HTMLElement | string, options: BreadcrumbOptions): MkBreadcrumb {
+  return new MkBreadcrumb(container, options)
+}

package/src/components/button/button.css

@@ -0,0 +1,108 @@
+.mk-button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  padding: 0 16px;
+  height: 36px;
+  font-size: 13px;
+  font-weight: 500;
+  white-space: nowrap;
+  cursor: pointer;
+  background: var(--mk-surface);
+  border: 1px solid var(--mk-border);
+  border-radius: var(--mk-radius);
+  color: var(--mk-text);
+  outline: none;
+  transition: var(--mk-transition);
+  user-select: none;
+  margin-right: 8px;
+  margin-bottom: 4px;
+}
+.mk-button:last-child {
+  margin-right: 0;
+}
+
+.mk-button:hover {
+  background: var(--mk-surface-hover);
+  border-color: var(--mk-border-hover);
+}
+
+.mk-button:active {
+  transform: translateY(0.5px);
+}
+
+.mk-button.is-disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+
+/* Primary */
+.mk-button--primary {
+  background: var(--mk-primary);
+  border-color: var(--mk-primary);
+  color: #fff;
+}
+.mk-button--primary:hover {
+  background: var(--mk-primary-hover);
+  border-color: var(--mk-primary-hover);
+}
+.mk-button--primary:active {
+  background: var(--mk-primary-active);
+  border-color: var(--mk-primary-active);
+}
+
+/* Success / Warning / Danger */
+.mk-button--success { background: var(--mk-success); border-color: var(--mk-success); color: #fff; }
+.mk-button--success:hover { opacity: 0.9; }
+
+.mk-button--warning { background: var(--mk-warning); border-color: var(--mk-warning); color: #000; }
+.mk-button--warning:hover { opacity: 0.9; }
+
+.mk-button--danger { background: var(--mk-danger); border-color: var(--mk-danger); color: #fff; }
+.mk-button--danger:hover { opacity: 0.9; }
+
+/* Text */
+.mk-button--text {
+  background: transparent;
+  border-color: transparent;
+  color: var(--mk-primary);
+  padding: 0 8px;
+}
+.mk-button--text:hover {
+  background: rgba(99,102,241,0.08);
+}
+
+/* Sizes */
+.mk-button--small { padding: 0 12px; height: 28px; font-size: 12px; border-radius: 6px; }
+.mk-button--large { padding: 0 20px; height: 44px; font-size: 14px; }
+
+/* Round / Circle */
+.mk-button.is-round { border-radius: var(--mk-radius-full); }
+.mk-button.is-circle { border-radius: 50%; padding: 0; width: 36px; height: 36px; }
+.mk-button--small.is-circle { width: 28px; height: 28px; }
+.mk-button--large.is-circle { width: 44px; height: 44px; }
+
+/* Loading */
+.mk-button.is-loading { pointer-events: none; }
+.mk-button__spinner {
+  width: 14px; height: 14px;
+  border: 2px solid rgba(255,255,255,0.2);
+  border-top-color: #fff;
+  border-radius: 50%;
+  animation: mk-spin 0.6s linear infinite;
+}
+@keyframes mk-spin { to { transform: rotate(360deg); } }
+
+/* Ripple */
+.mk-button__ripple {
+  position: absolute;
+  border-radius: 50%;
+  background: rgba(255,255,255,0.2);
+  pointer-events: none;
+  transform: scale(0);
+  animation: mk-ripple 0.4s ease-out forwards;
+}
+@keyframes mk-ripple {
+  to { transform: scale(2.5); opacity: 0; }
+}

package/src/components/button/button.ts

@@ -0,0 +1,140 @@
+import '../../styles/element-plus.css'
+import './button.css'
+import { withMotion, type MotionOptions } from '../../motion/component-motion.ts'
+
+export interface ButtonOptions {
+  type?: 'default' | 'primary' | 'success' | 'warning' | 'danger' | 'text'
+  size?: 'default' | 'small' | 'large'
+  plain?: boolean
+  round?: boolean
+  circle?: boolean
+  disabled?: boolean
+  loading?: boolean
+  text?: string
+  icon?: string
+  onClick?: (e: MouseEvent) => void
+  motion?: MotionOptions
+}
+
+export class MkButton {
+  el: HTMLButtonElement
+  private options: ButtonOptions
+  private motion: ReturnType<typeof withMotion> | null = null
+
+  constructor(container: HTMLElement | string, options: ButtonOptions = {}) {
+    const parent =
+      typeof container === 'string'
+        ? document.querySelector(container)!
+        : container
+
+    this.options = {
+      type: 'default',
+      size: 'default',
+      ...options,
+    }
+
+    this.el = document.createElement('button')
+    this.el.type = 'button'
+    this.el.className = this.buildClass()
+    this.el.disabled = !!this.options.disabled || !!this.options.loading
+    if (this.options.icon && !this.options.text) {
+      this.el.setAttribute('aria-label', 'Button')
+    }
+    this.updateAriaDisabled()
+
+    if (this.options.loading) {
+      this.el.classList.add('is-loading')
+      const spinner = document.createElement('span')
+      spinner.className = 'mk-button__spinner'
+      this.el.appendChild(spinner)
+    }
+
+    if (this.options.icon && !this.options.loading) {
+      const icon = document.createElement('span')
+      icon.textContent = this.options.icon
+      this.el.appendChild(icon)
+    }
+
+    if (this.options.text) {
+      const span = document.createElement('span')
+      span.textContent = this.options.text
+      this.el.appendChild(span)
+    }
+
+    this.el.addEventListener('click', (e) => {
+      this.createRipple(e)
+      this.options.onClick?.(e)
+    })
+
+    parent.appendChild(this.el)
+
+    this.motion = withMotion(this.el, options.motion || { hover: 'lift', active: 'press', focus: 'ring', enter: 'fadeIn', duration: 200 })
+  }
+
+  private buildClass(): string {
+    const classes = ['mk-button']
+    if (this.options.type && this.options.type !== 'default') {
+      classes.push(`mk-button--${this.options.type}`)
+    }
+    if (this.options.size && this.options.size !== 'default') {
+      classes.push(`mk-button--${this.options.size}`)
+    }
+    if (this.options.plain) classes.push('is-plain')
+    if (this.options.round) classes.push('is-round')
+    if (this.options.circle) classes.push('is-circle')
+    if (this.options.loading) classes.push('is-loading')
+    if (this.options.disabled) classes.push('is-disabled')
+    return classes.join(' ')
+  }
+
+  private createRipple(e: MouseEvent): void {
+    const rect = this.el.getBoundingClientRect()
+    const size = Math.max(rect.width, rect.height)
+    const ripple = document.createElement('span')
+    ripple.className = 'mk-button__ripple'
+    ripple.style.width = ripple.style.height = `${size}px`
+    ripple.style.left = `${e.clientX - rect.left - size / 2}px`
+    ripple.style.top = `${e.clientY - rect.top - size / 2}px`
+    this.el.appendChild(ripple)
+    setTimeout(() => ripple.remove(), 600)
+  }
+
+  setLoading(loading: boolean): void {
+    this.options.loading = loading
+    this.el.classList.toggle('is-loading', loading)
+    this.el.disabled = loading || !!this.options.disabled
+    this.updateAriaDisabled()
+
+    const spinner = this.el.querySelector('.mk-button__spinner')
+    if (loading && !spinner) {
+      const s = document.createElement('span')
+      s.className = 'mk-button__spinner'
+      this.el.insertBefore(s, this.el.firstChild)
+    } else if (!loading && spinner) {
+      spinner.remove()
+    }
+  }
+
+  setDisabled(disabled: boolean): void {
+    this.options.disabled = disabled
+    this.el.classList.toggle('is-disabled', disabled)
+    this.el.disabled = disabled || !!this.options.loading
+    this.updateAriaDisabled()
+  }
+
+  private updateAriaDisabled(): void {
+    this.el.setAttribute('aria-disabled', String(this.el.disabled))
+  }
+
+  destroy(): void {
+    this.motion?.destroy()
+    this.el.remove()
+  }
+}
+
+export function createButton(
+  container: HTMLElement | string,
+  options?: ButtonOptions
+): MkButton {
+  return new MkButton(container, options)
+}

package/src/components/card/card.css

@@ -0,0 +1,52 @@
+.mk-card {
+  background: var(--mk-surface);
+  border: 1px solid var(--mk-border);
+  border-radius: var(--mk-radius-lg);
+  overflow: hidden;
+  transition: var(--mk-transition);
+}
+
+.mk-card:hover {
+  border-color: var(--mk-border-hover);
+}
+
+.mk-card__header {
+  padding: 16px 20px 12px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.mk-card__title {
+  font-size: 14px;
+  font-weight: 600;
+  color: var(--mk-text);
+}
+
+.mk-card__body {
+  padding: 0 20px 16px;
+  color: var(--mk-text-secondary);
+  font-size: 13px;
+  line-height: 1.6;
+}
+
+.mk-card__footer {
+  padding: 10px 20px;
+  border-top: 1px solid var(--mk-border);
+  color: var(--mk-text-tertiary);
+  font-size: 12px;
+}
+
+.mk-card__image {
+  width: 100%;
+  height: 160px;
+  object-fit: cover;
+  display: block;
+  border-bottom: 1px solid var(--mk-border);
+}
+
+/* Loading */
+.mk-card.is-loading .mk-card__body {
+  opacity: 0.4;
+  pointer-events: none;
+}

package/src/components/card/card.ts

@@ -0,0 +1,87 @@
+import './card.css'
+import { withMotion, type MotionOptions } from '../../motion/component-motion.ts'
+
+export interface CardOptions {
+  title?: string
+  body?: string
+  footer?: string
+  image?: string
+  shadow?: 'always' | 'hover' | 'never'
+  loading?: boolean
+  motion?: MotionOptions
+}
+
+export class MkCard {
+  el: HTMLDivElement
+  private motion: ReturnType<typeof withMotion> | null = null
+
+  constructor(container: HTMLElement | string, options: CardOptions = {}) {
+    const parent =
+      typeof container === 'string'
+        ? document.querySelector(container)!
+        : container
+
+    this.el = document.createElement('div')
+    this.el.className = 'mk-card'
+
+    if (options.shadow) {
+      if (options.shadow === 'always') this.el.classList.add('is-always-shadow')
+      else if (options.shadow === 'hover') this.el.classList.add('is-hover-shadow')
+    }
+    if (options.loading) {
+      this.el.classList.add('is-loading')
+    }
+
+    if (options.image) {
+      const img = document.createElement('img')
+      img.className = 'mk-card__image'
+      img.src = options.image
+      img.alt = ''
+      this.el.appendChild(img)
+    }
+
+    if (options.title) {
+      const header = document.createElement('div')
+      header.className = 'mk-card__header'
+      const title = document.createElement('span')
+      title.className = 'mk-card__title'
+      title.textContent = options.title
+      header.appendChild(title)
+      this.el.appendChild(header)
+    }
+
+    const body = document.createElement('div')
+    body.className = 'mk-card__body'
+    if (options.body) {
+      body.innerHTML = options.body
+    }
+    this.el.appendChild(body)
+
+    if (options.footer) {
+      const footer = document.createElement('div')
+      footer.className = 'mk-card__footer'
+      footer.textContent = options.footer
+      this.el.appendChild(footer)
+    }
+
+    parent.appendChild(this.el)
+
+    this.motion = withMotion(this.el, options.motion || { hover: 'lift', duration: 300 })
+  }
+
+  setLoading(loading: boolean): void {
+    this.el.classList.toggle('is-loading', loading)
+  }
+
+  destroy(): void {
+    this.motion?.destroy()
+    this.el.remove()
+  }
+}
+
+export function createCard(
+  container: HTMLElement | string,
+  options?: CardOptions
+): MkCard {
+  return new MkCard(container, options)
+}

package/src/components/collapse/collapse.css

@@ -0,0 +1,76 @@
+.mk-collapse {
+  border: 1px solid var(--mk-border);
+  border-radius: var(--mk-radius);
+  background: var(--mk-surface);
+  overflow: hidden;
+}
+
+.mk-collapse__item {
+  border-bottom: 1px solid var(--mk-border);
+}
+
+.mk-collapse__item:last-child {
+  border-bottom: none;
+}
+
+.mk-collapse__header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--mk-space-3);
+  padding: var(--mk-space-3) var(--mk-space-4);
+  font-size: var(--mk-text-sm);
+  font-weight: var(--mk-font-medium);
+  color: var(--mk-text);
+  cursor: pointer;
+  user-select: none;
+  transition: background-color var(--mk-duration-fast) var(--mk-ease-default);
+  outline: none;
+}
+
+.mk-collapse__header:hover {
+  background: var(--mk-surface-hover);
+}
+
+.mk-collapse__header:focus-visible {
+  box-shadow: inset 0 0 0 2px var(--mk-primary-soft);
+}
+
+.mk-collapse__item.is-disabled .mk-collapse__header {
+  color: var(--mk-text-disabled);
+  cursor: not-allowed;
+  background: transparent;
+}
+
+.mk-collapse__title {
+  flex: 1;
+  min-width: 0;
+}
+
+.mk-collapse__arrow {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 16px;
+  height: 16px;
+  color: var(--mk-text-tertiary);
+  transition: transform var(--mk-duration-normal) var(--mk-ease-out);
+  flex-shrink: 0;
+}
+
+.mk-collapse__arrow.is-expanded {
+  transform: rotate(90deg);
+}
+
+.mk-collapse__content {
+  max-height: 0;
+  overflow: hidden;
+  transition: max-height var(--mk-duration-normal) var(--mk-ease-out);
+}
+
+.mk-collapse__inner {
+  padding: 0 var(--mk-space-4) var(--mk-space-3);
+  font-size: var(--mk-text-sm);
+  line-height: var(--mk-leading-normal);
+  color: var(--mk-text-secondary);
+}

package/src/components/collapse/collapse.ts

@@ -0,0 +1,168 @@
+import '../../styles/element-plus.css'
+import './collapse.css'
+
+export interface CollapseItem {
+  title: string
+  content: string | HTMLElement
+  disabled?: boolean
+}
+
+export interface CollapsePanelOptions {
+  items: CollapseItem[]
+  accordion?: boolean
+  activeKeys?: number[]
+}
+
+let collapseIdCounter = 0
+
+export class MkCollapse {
+  el: HTMLDivElement
+  private options: CollapsePanelOptions
+  private activeKeys: Set<number>
+  private itemEls: Array<{
+    header: HTMLDivElement
+    content: HTMLDivElement
+    inner: HTMLDivElement
+    arrow: HTMLSpanElement
+    contentId: string
+  }> = []
+
+  constructor(container: HTMLElement | string, options: CollapsePanelOptions) {
+    const parent =
+      typeof container === 'string'
+        ? document.querySelector(container)!
+        : container
+
+    this.options = {
+      accordion: false,
+      activeKeys: [],
+      ...options,
+    }
+
+    this.activeKeys = new Set(this.options.activeKeys)
+
+    this.el = document.createElement('div')
+    this.el.className = 'mk-collapse'
+
+    this.options.items.forEach((item, index) => {
+      const contentId = `mk-collapse-content-${++collapseIdCounter}`
+
+      const itemEl = document.createElement('div')
+      itemEl.className = 'mk-collapse__item'
+      if (item.disabled) itemEl.classList.add('is-disabled')
+
+      const header = document.createElement('div')
+      header.className = 'mk-collapse__header'
+      header.setAttribute('role', 'button')
+      header.setAttribute('tabindex', item.disabled ? '-1' : '0')
+      header.setAttribute('aria-expanded', 'false')
+      header.setAttribute('aria-controls', contentId)
+
+      const title = document.createElement('span')
+      title.className = 'mk-collapse__title'
+      title.textContent = item.title
+
+      const arrow = document.createElement('span')
+      arrow.className = 'mk-collapse__arrow'
+      arrow.innerHTML =
+        '<svg width="12" height="12" viewBox="0 0 12 12" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M4 2l4 4-4 4"/></svg>'
+
+      header.appendChild(title)
+      header.appendChild(arrow)
+      itemEl.appendChild(header)
+
+      const content = document.createElement('div')
+      content.className = 'mk-collapse__content'
+      content.id = contentId
+
+      const inner = document.createElement('div')
+      inner.className = 'mk-collapse__inner'
+      if (typeof item.content === 'string') {
+        inner.innerHTML = item.content
+      } else {
+        inner.appendChild(item.content)
+      }
+      content.appendChild(inner)
+      itemEl.appendChild(content)
+
+      this.itemEls.push({ header, content, inner, arrow, contentId })
+
+      this.el.appendChild(itemEl)
+
+      if (!item.disabled) {
+        header.addEventListener('click', () => this.toggle(index))
+        header.addEventListener('keydown', (e) => {
+          if (e.key === 'Enter' || e.key === ' ') {
+            e.preventDefault()
+            this.toggle(index)
+          }
+        })
+      }
+    })
+
+    parent.appendChild(this.el)
+
+    requestAnimationFrame(() => {
+      this.itemEls.forEach((_, index) => {
+        this.updateItemState(index)
+      })
+    })
+  }
+
+  private toggle(index: number): void {
+    const isActive = this.activeKeys.has(index)
+
+    if (this.options.accordion) {
+      const wasActive = Array.from(this.activeKeys)
+      this.activeKeys.clear()
+      if (!isActive) {
+        this.activeKeys.add(index)
+      }
+      wasActive.forEach((key) => this.updateItemState(key))
+      this.updateItemState(index)
+    } else {
+      if (isActive) {
+        this.activeKeys.delete(index)
+      } else {
+        this.activeKeys.add(index)
+      }
+      this.updateItemState(index)
+    }
+  }
+
+  private updateItemState(index: number): void {
+    const item = this.itemEls[index]
+    if (!item) return
+
+    const isActive = this.activeKeys.has(index)
+    const itemEl = item.header.parentElement as HTMLDivElement
+
+    item.header.setAttribute('aria-expanded', String(isActive))
+    item.arrow.classList.toggle('is-expanded', isActive)
+    itemEl.classList.toggle('is-active', isActive)
+
+    if (isActive) {
+      item.content.style.maxHeight = `${item.inner.scrollHeight}px`
+    } else {
+      item.content.style.maxHeight = '0px'
+    }
+  }
+
+  setActiveKeys(keys: number[]): void {
+    const prev = new Set(this.activeKeys)
+    this.activeKeys = new Set(keys)
+    prev.forEach((key) => this.updateItemState(key))
+    keys.forEach((key) => this.updateItemState(key))
+  }
+
+  destroy(): void {
+    this.el.remove()
+  }
+}
+
+export function createCollapse(
+  container: HTMLElement | string,
+  options: CollapsePanelOptions
+): MkCollapse {
+  return new MkCollapse(container, options)
+}