@luanlu/mk-motion 1.1.0 → 1.2.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@luanlu/mk-motion",
-  "version": "1.1.0",
+  "version": "1.2.1",
   "description": "A lightweight, modern frontend animation library",
   "type": "module",
   "main": "./dist/mk-motion.umd.cjs",
@@ -23,11 +23,23 @@
         "types": "./src/vue/index.ts",
         "default": "./src/vue/index.ts"
       }
+    },
+    "./nuxt": {
+      "import": {
+        "types": "./src/nuxt/module.ts",
+        "default": "./src/nuxt/module.ts"
+      }
+    },
+    "./vite": {
+      "import": {
+        "types": "./src/vite/plugin.ts",
+        "default": "./src/vite/plugin.ts"
+      }
     }
   },
   "files": [
     "dist",
-    "src/vue"
+    "src"
   ],
   "publishConfig": {
     "access": "public"

package/src/a11y/focus-trap.ts

@@ -0,0 +1,64 @@
+/**
+ * Focus trap for modals, drawers, and popovers.
+ * Keeps keyboard focus within a given container.
+ */
+const FOCUSABLE_SELECTOR = [
+  'a[href]',
+  'button:not([disabled])',
+  'input:not([disabled])',
+  'select:not([disabled])',
+  'textarea:not([disabled])',
+  '[tabindex]:not([tabindex="-1"])',
+].join(',')
+
+export class FocusTrap {
+  private container: HTMLElement
+  private previousActiveElement: Element | null = null
+  private listeners: Array<() => void> = []
+
+  constructor(container: HTMLElement) {
+    this.container = container
+  }
+
+  activate(initialFocus?: HTMLElement): void {
+    this.previousActiveElement = document.activeElement
+    const focusable = this.getFocusableElements()
+    const toFocus = initialFocus || (focusable.length > 0 ? focusable[0] : null)
+    if (toFocus instanceof HTMLElement) {
+      toFocus.focus()
+    }
+
+    const handler = (e: KeyboardEvent) => this.handleKeyDown(e)
+    this.container.addEventListener('keydown', handler)
+    this.listeners.push(() => this.container.removeEventListener('keydown', handler))
+  }
+
+  deactivate(): void {
+    this.listeners.forEach((remove) => remove())
+    this.listeners = []
+    if (this.previousActiveElement instanceof HTMLElement) {
+      this.previousActiveElement.focus()
+    }
+  }
+
+  private getFocusableElements(): NodeListOf<HTMLElement> {
+    return this.container.querySelectorAll(FOCUSABLE_SELECTOR)
+  }
+
+  private handleKeyDown(e: KeyboardEvent): void {
+    if (e.key !== 'Tab') return
+    const focusable = Array.from(this.getFocusableElements())
+    if (focusable.length === 0) return
+
+    const first = focusable[0]
+    const last = focusable[focusable.length - 1]
+
+    if (e.shiftKey && document.activeElement === first) {
+      e.preventDefault()
+      last.focus()
+    } else if (!e.shiftKey && document.activeElement === last) {
+      e.preventDefault()
+      first.focus()
+    }
+  }
+}

package/src/a11y/keyboard.ts

@@ -0,0 +1,43 @@
+/**
+ * Keyboard navigation helpers for accessible components.
+ */
+
+export interface KeyHandler {
+  key: string
+  handler: (e: KeyboardEvent) => void
+  preventDefault?: boolean
+}
+
+/**
+ * Attach keyboard handlers to an element.
+ * Returns a cleanup function.
+ */
+export function onKey(el: HTMLElement, handlers: KeyHandler[]): () => void {
+  const listener = (e: KeyboardEvent) => {
+    for (const h of handlers) {
+      if (e.key === h.key) {
+        if (h.preventDefault !== false) e.preventDefault()
+        h.handler(e)
+        return
+      }
+    }
+  }
+  el.addEventListener('keydown', listener)
+  return () => el.removeEventListener('keydown', listener)
+}
+
+/**
+ * Common ARIA key patterns.
+ */
+export const Keys = {
+  Enter: 'Enter',
+  Escape: 'Escape',
+  Tab: 'Tab',
+  ArrowUp: 'ArrowUp',
+  ArrowDown: 'ArrowDown',
+  ArrowLeft: 'ArrowLeft',
+  ArrowRight: 'ArrowRight',
+  Home: 'Home',
+  End: 'End',
+  Space: ' ',
+} as const

package/src/components/alert/alert.css

@@ -0,0 +1,111 @@
+.mk-alert {
+  display: flex;
+  align-items: flex-start;
+  gap: var(--mk-space-3);
+  padding: var(--mk-space-3) var(--mk-space-4);
+  font-size: var(--mk-text-sm);
+  line-height: var(--mk-leading-snug);
+  color: var(--mk-text);
+  background: var(--mk-surface);
+  border: 1px solid var(--mk-border);
+  border-left-width: 4px;
+  border-radius: var(--mk-radius);
+  transition: var(--mk-transition-all);
+  overflow: hidden;
+}
+
+.mk-alert__icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 20px;
+  height: 20px;
+  flex-shrink: 0;
+  font-size: 14px;
+  font-weight: var(--mk-font-bold);
+  margin-top: 1px;
+}
+
+.mk-alert__content {
+  flex: 1;
+  min-width: 0;
+}
+
+.mk-alert__title {
+  font-weight: var(--mk-font-semibold);
+  margin-bottom: 2px;
+}
+
+.mk-alert__description {
+  color: var(--mk-text-secondary);
+  font-size: var(--mk-text-sm);
+}
+
+.mk-alert__close {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 20px;
+  height: 20px;
+  padding: 0;
+  margin: 0;
+  font-size: 18px;
+  line-height: 1;
+  color: var(--mk-text-tertiary);
+  background: transparent;
+  border: none;
+  border-radius: var(--mk-radius-sm);
+  cursor: pointer;
+  flex-shrink: 0;
+  transition: var(--mk-transition-colors);
+}
+
+.mk-alert__close:hover {
+  color: var(--mk-text);
+  background: rgba(255, 255, 255, 0.06);
+}
+
+/* Types */
+.mk-alert--info {
+  border-left-color: var(--mk-info);
+  background: var(--mk-info-soft);
+}
+.mk-alert--info .mk-alert__icon {
+  color: var(--mk-info);
+}
+
+.mk-alert--success {
+  border-left-color: var(--mk-success);
+  background: var(--mk-success-soft);
+}
+.mk-alert--success .mk-alert__icon {
+  color: var(--mk-success);
+}
+
+.mk-alert--warning {
+  border-left-color: var(--mk-warning);
+  background: var(--mk-warning-soft);
+}
+.mk-alert--warning .mk-alert__icon {
+  color: var(--mk-warning);
+}
+
+.mk-alert--danger {
+  border-left-color: var(--mk-danger);
+  background: var(--mk-danger-soft);
+}
+.mk-alert--danger .mk-alert__icon {
+  color: var(--mk-danger);
+}
+
+/* Closing animation */
+.mk-alert.is-closing {
+  transform: scale(0.98);
+  opacity: 0;
+  max-height: 0;
+  padding-top: 0;
+  padding-bottom: 0;
+  margin-top: 0;
+  margin-bottom: 0;
+  border-width: 0;
+}

package/src/components/alert/alert.ts

@@ -0,0 +1,107 @@
+import '../../styles/element-plus.css'
+import './alert.css'
+
+export interface AlertOptions {
+  type?: 'info' | 'success' | 'warning' | 'danger'
+  title?: string
+  description?: string
+  closable?: boolean
+  showIcon?: boolean
+  onClose?: () => void
+}
+
+const typeIcons: Record<string, string> = {
+  info: 'ℹ',
+  success: '✓',
+  warning: '⚠',
+  danger: '✕',
+}
+
+export class MkAlert {
+  el: HTMLDivElement
+  private options: AlertOptions
+
+  constructor(container: HTMLElement | string, options: AlertOptions = {}) {
+    const parent =
+      typeof container === 'string'
+        ? document.querySelector(container)!
+        : container
+
+    this.options = {
+      type: 'info',
+      showIcon: true,
+      ...options,
+    }
+
+    this.el = document.createElement('div')
+    this.el.className = this.buildClass()
+    this.el.setAttribute('role', 'alert')
+
+    if (this.options.showIcon) {
+      const icon = document.createElement('span')
+      icon.className = 'mk-alert__icon'
+      icon.textContent = typeIcons[this.options.type!]
+      this.el.appendChild(icon)
+    }
+
+    const content = document.createElement('div')
+    content.className = 'mk-alert__content'
+
+    if (this.options.title) {
+      const title = document.createElement('div')
+      title.className = 'mk-alert__title'
+      title.textContent = this.options.title
+      content.appendChild(title)
+    }
+
+    if (this.options.description) {
+      const desc = document.createElement('div')
+      desc.className = 'mk-alert__description'
+      desc.textContent = this.options.description
+      content.appendChild(desc)
+    }
+
+    this.el.appendChild(content)
+
+    if (this.options.closable) {
+      const closeBtn = document.createElement('button')
+      closeBtn.className = 'mk-alert__close'
+      closeBtn.setAttribute('aria-label', 'Close')
+      closeBtn.innerHTML = '×'
+      closeBtn.addEventListener('click', () => this.close())
+      this.el.appendChild(closeBtn)
+    }
+
+    parent.appendChild(this.el)
+  }
+
+  private buildClass(): string {
+    const classes = ['mk-alert', `mk-alert--${this.options.type}`]
+    if (this.options.closable) classes.push('is-closable')
+    return classes.join(' ')
+  }
+
+  close(): void {
+    this.el.classList.add('is-closing')
+    this.el.style.pointerEvents = 'none'
+    this.el.addEventListener(
+      'transitionend',
+      () => {
+        this.destroy()
+        this.options.onClose?.()
+      },
+      { once: true }
+    )
+  }
+
+  destroy(): void {
+    this.el.remove()
+  }
+}
+
+export function createAlert(
+  container: HTMLElement | string,
+  options?: AlertOptions
+): MkAlert {
+  return new MkAlert(container, options)
+}

package/src/components/avatar/avatar.css

@@ -0,0 +1,112 @@
+.mk-avatar {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 40px;
+  height: 40px;
+  font-size: var(--mk-text-sm);
+  font-weight: var(--mk-font-medium);
+  color: var(--mk-text);
+  background: var(--mk-surface-raised);
+  border: 1px solid var(--mk-border);
+  border-radius: var(--mk-radius-full);
+  overflow: hidden;
+  flex-shrink: 0;
+  user-select: none;
+}
+
+.mk-avatar__image {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  display: block;
+}
+
+.mk-avatar__fallback {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+  font-size: inherit;
+  font-weight: var(--mk-font-semibold);
+  color: var(--mk-text-secondary);
+  background: var(--mk-surface-hover);
+}
+
+/* Sizes */
+.mk-avatar--small {
+  width: 28px;
+  height: 28px;
+  font-size: var(--mk-text-xs);
+}
+
+.mk-avatar--large {
+  width: 56px;
+  height: 56px;
+  font-size: var(--mk-text-md);
+}
+
+/* Shape */
+.mk-avatar--square {
+  border-radius: var(--mk-radius);
+}
+
+/* Group */
+.mk-avatar-group {
+  display: inline-flex;
+  align-items: center;
+}
+
+.mk-avatar-group__item {
+  margin-left: -10px;
+  transition: transform var(--mk-duration-fast) var(--mk-ease-default);
+}
+
+.mk-avatar-group__item:first-child {
+  margin-left: 0;
+}
+
+.mk-avatar-group__item:hover {
+  transform: translateY(-2px);
+  z-index: 1;
+}
+
+.mk-avatar-group__item .mk-avatar {
+  border: 2px solid var(--mk-bg);
+}
+
+.mk-avatar-group__counter {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 40px;
+  height: 40px;
+  margin-left: -10px;
+  font-size: var(--mk-text-xs);
+  font-weight: var(--mk-font-semibold);
+  color: var(--mk-text-secondary);
+  background: var(--mk-surface-raised);
+  border: 2px solid var(--mk-bg);
+  border-radius: var(--mk-radius-full);
+  flex-shrink: 0;
+}
+
+.mk-avatar-group--small .mk-avatar-group__counter {
+  width: 28px;
+  height: 28px;
+}
+
+.mk-avatar-group--large .mk-avatar-group__counter {
+  width: 56px;
+  height: 56px;
+  font-size: var(--mk-text-sm);
+}
+
+.mk-avatar-group--small .mk-avatar-group__item {
+  margin-left: -7px;
+}
+
+.mk-avatar-group--large .mk-avatar-group__item {
+  margin-left: -14px;
+}

package/src/components/avatar/avatar.ts

@@ -0,0 +1,175 @@
+import '../../styles/element-plus.css'
+import './avatar.css'
+
+export interface AvatarOptions {
+  src?: string
+  text?: string
+  size?: 'small' | 'default' | 'large'
+  shape?: 'circle' | 'square'
+  icon?: string
+}
+
+export class MkAvatar {
+  el: HTMLDivElement
+  private options: AvatarOptions
+
+  constructor(container: HTMLElement | string, options: AvatarOptions = {}) {
+    const parent =
+      typeof container === 'string'
+        ? document.querySelector(container)!
+        : container
+
+    this.options = {
+      size: 'default',
+      shape: 'circle',
+      ...options,
+    }
+
+    this.el = document.createElement('div')
+    this.el.className = this.buildClass()
+
+    if (this.options.src) {
+      const img = document.createElement('img')
+      img.className = 'mk-avatar__image'
+      img.src = this.options.src
+      img.alt = this.options.text || ''
+      img.addEventListener('error', () => this.showFallback())
+      this.el.appendChild(img)
+    } else {
+      this.showFallback()
+    }
+
+    parent.appendChild(this.el)
+  }
+
+  private buildClass(): string {
+    const classes = ['mk-avatar']
+    if (this.options.size && this.options.size !== 'default') {
+      classes.push(`mk-avatar--${this.options.size}`)
+    }
+    if (this.options.shape && this.options.shape !== 'circle') {
+      classes.push(`mk-avatar--${this.options.shape}`)
+    }
+    return classes.join(' ')
+  }
+
+  private showFallback(): void {
+    const existing = this.el.querySelector('.mk-avatar__image')
+    if (existing) existing.remove()
+
+    const fallback = document.createElement('span')
+    fallback.className = 'mk-avatar__fallback'
+
+    if (this.options.icon) {
+      fallback.textContent = this.options.icon
+    } else if (this.options.text) {
+      fallback.textContent = this.options.text
+        .split(' ')
+        .map((w) => w[0])
+        .slice(0, 2)
+        .join('')
+        .toUpperCase()
+    } else {
+      fallback.textContent = '?'
+    }
+
+    this.el.appendChild(fallback)
+  }
+
+  setSrc(src: string): void {
+    this.options.src = src
+    const existingFallback = this.el.querySelector('.mk-avatar__fallback')
+    if (existingFallback) existingFallback.remove()
+
+    let img = this.el.querySelector('.mk-avatar__image') as HTMLImageElement | null
+    if (!img) {
+      img = document.createElement('img')
+      img.className = 'mk-avatar__image'
+      img.alt = this.options.text || ''
+      img.addEventListener('error', () => this.showFallback())
+      this.el.appendChild(img)
+    }
+    img.src = src
+  }
+
+  setText(text: string): void {
+    this.options.text = text
+    if (!this.options.src) {
+      this.showFallback()
+    }
+  }
+
+  destroy(): void {
+    this.el.remove()
+  }
+}
+
+export interface AvatarGroupOptions {
+  avatars: AvatarOptions[]
+  max?: number
+  size?: 'small' | 'default' | 'large'
+}
+
+export class MkAvatarGroup {
+  el: HTMLDivElement
+  private options: AvatarGroupOptions
+
+  constructor(container: HTMLElement | string, options: AvatarGroupOptions) {
+    const parent =
+      typeof container === 'string'
+        ? document.querySelector(container)!
+        : container
+
+    this.options = {
+      size: 'default',
+      ...options,
+    }
+
+    this.el = document.createElement('div')
+    this.el.className = 'mk-avatar-group'
+    if (this.options.size && this.options.size !== 'default') {
+      this.el.classList.add(`mk-avatar-group--${this.options.size}`)
+    }
+
+    const display = this.options.max
+      ? this.options.avatars.slice(0, this.options.max)
+      : this.options.avatars
+
+    display.forEach((avatarOpts) => {
+      const wrapper = document.createElement('div')
+      wrapper.className = 'mk-avatar-group__item'
+      new MkAvatar(wrapper, { size: this.options.size, ...avatarOpts })
+      this.el.appendChild(wrapper)
+    })
+
+    const remaining = this.options.max
+      ? this.options.avatars.length - this.options.max
+      : 0
+    if (remaining > 0) {
+      const counter = document.createElement('div')
+      counter.className = 'mk-avatar-group__counter'
+      counter.textContent = `+${remaining}`
+      this.el.appendChild(counter)
+    }
+
+    parent.appendChild(this.el)
+  }
+
+  destroy(): void {
+    this.el.remove()
+  }
+}
+
+export function createAvatar(
+  container: HTMLElement | string,
+  options?: AvatarOptions
+): MkAvatar {
+  return new MkAvatar(container, options)
+}
+
+export function createAvatarGroup(
+  container: HTMLElement | string,
+  options: AvatarGroupOptions
+): MkAvatarGroup {
+  return new MkAvatarGroup(container, options)
+}

package/src/components/breadcrumb/breadcrumb.css

@@ -0,0 +1,31 @@
+.mk-breadcrumb {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  font-size: var(--mk-text-sm);
+  color: var(--mk-text-secondary);
+}
+
+.mk-breadcrumb__item {
+  transition: var(--mk-transition-colors);
+}
+
+.mk-breadcrumb__item.is-link {
+  color: var(--mk-text-secondary);
+  cursor: pointer;
+}
+
+.mk-breadcrumb__item.is-link:hover {
+  color: var(--mk-primary);
+}
+
+.mk-breadcrumb__item.is-current {
+  color: var(--mk-text);
+  font-weight: var(--mk-font-medium);
+}
+
+.mk-breadcrumb__separator {
+  margin: 0 8px;
+  color: var(--mk-text-tertiary);
+  user-select: none;
+}