@luanlu/mk-motion 1.1.0 → 1.2.1

package/src/components/loading/loading.ts

@@ -0,0 +1,46 @@
+import './loading.css'
+
+export interface LoadingOptions {
+  text?: string
+  fullscreen?: boolean
+  target?: HTMLElement | string
+}
+
+export function showLoading(options: LoadingOptions = {}): () => void {
+  const mask = document.createElement('div')
+  mask.className = 'mk-loading-mask'
+
+  if (options.fullscreen) {
+    mask.classList.add('is-fullscreen')
+    document.body.appendChild(mask)
+  } else {
+    const target =
+      typeof options.target === 'string'
+        ? document.querySelector<HTMLElement>(options.target)!
+        : options.target || document.body
+
+    if (target && target !== document.body) {
+      target.style.position = 'relative'
+    }
+    ;(target || document.body).appendChild(mask)
+  }
+
+  const spinner = document.createElement('div')
+  spinner.className = 'mk-loading__spinner'
+  mask.appendChild(spinner)
+
+  if (options.text) {
+    const text = document.createElement('div')
+    text.className = 'mk-loading__text'
+    text.textContent = options.text
+    mask.appendChild(text)
+  }
+
+  return () => {
+    mask.remove()
+  }
+}
+
+export function showFullscreenLoading(text?: string): () => void {
+  return showLoading({ fullscreen: true, text })
+}

package/src/components/menu/menu.css

@@ -0,0 +1,121 @@
+.mk-menu {
+  list-style: none;
+  padding: 8px 0;
+  margin: 0;
+  font-size: var(--mk-text-sm);
+}
+
+.mk-menu--horizontal {
+  display: flex;
+  padding: 0;
+  border-bottom: 1px solid var(--mk-border);
+}
+
+.mk-menu-item {
+  position: relative;
+  transition: var(--mk-transition-colors);
+}
+
+.mk-menu-item__title {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 9px 16px;
+  color: var(--mk-text-secondary);
+  transition: var(--mk-transition-colors);
+  border-radius: 6px;
+  margin: 2px 8px;
+}
+
+.mk-menu--horizontal .mk-menu-item__title {
+  margin: 0;
+  border-radius: 0;
+  padding: 12px 16px;
+}
+
+.mk-menu-item__title:hover {
+  color: var(--mk-text);
+  background: var(--mk-surface-hover);
+}
+
+.mk-menu-item.is-active > .mk-menu-item__title {
+  color: var(--mk-primary);
+  background: var(--mk-primary-muted);
+}
+
+.mk-menu-item.is-disabled > .mk-menu-item__title {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+
+.mk-menu-item__icon {
+  width: 18px;
+  text-align: center;
+  font-size: 14px;
+  flex-shrink: 0;
+}
+
+.mk-menu-item__text {
+  flex: 1;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.mk-menu-item__arrow {
+  font-size: 14px;
+  transition: transform 0.2s;
+  color: var(--mk-text-tertiary);
+}
+
+.mk-menu-item.is-open > .mk-menu-item__title .mk-menu-item__arrow {
+  transform: rotate(90deg);
+}
+
+.mk-menu-submenu {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+  max-height: 0;
+  overflow: hidden;
+  transition: max-height 0.3s var(--mk-ease-default);
+}
+
+.mk-menu-submenu.is-open {
+  max-height: 1000px;
+}
+
+.mk-menu--horizontal .mk-menu-submenu {
+  position: absolute;
+  top: 100%;
+  left: 0;
+  min-width: 180px;
+  background: var(--mk-surface);
+  border: 1px solid var(--mk-border);
+  border-radius: var(--mk-radius);
+  box-shadow: var(--mk-shadow-lg);
+  z-index: var(--mk-z-dropdown);
+  max-height: none;
+  display: none;
+  padding: 4px 0;
+}
+
+.mk-menu--horizontal .mk-menu-item.has-children:hover > .mk-menu-submenu {
+  display: block;
+}
+
+/* Collapsed mode */
+.mk-menu.is-collapse .mk-menu-item__text,
+.mk-menu.is-collapse .mk-menu-item__arrow {
+  display: none;
+}
+
+.mk-menu.is-collapse .mk-menu-item__title {
+  justify-content: center;
+  padding: 12px 0;
+  margin: 2px 8px;
+}
+
+.mk-menu.is-collapse .mk-menu-submenu {
+  display: none !important;
+}

package/src/components/menu/menu.ts

@@ -0,0 +1,187 @@
+import './menu.css'
+import { Keys } from '../../a11y/keyboard'
+
+export interface MenuItem {
+  index: string
+  label: string
+  icon?: string
+  disabled?: boolean
+  children?: MenuItem[]
+}
+
+export interface MenuOptions {
+  mode?: 'vertical' | 'horizontal'
+  items: MenuItem[]
+  defaultActive?: string
+  defaultOpeneds?: string[]
+  collapse?: boolean
+  onSelect?: (index: string) => void
+  onOpen?: (index: string) => void
+  onClose?: (index: string) => void
+}
+
+export class MkMenu {
+  el: HTMLElement
+  private options: MenuOptions
+  private openeds: Set<string>
+  private activeIndex: string
+
+  constructor(container: HTMLElement | string, options: MenuOptions) {
+    const parent = typeof container === 'string' ? document.querySelector(container)! : container
+    this.options = { mode: 'vertical', collapse: false, ...options }
+    this.openeds = new Set(options.defaultOpeneds || [])
+    this.activeIndex = options.defaultActive || ''
+
+    this.el = document.createElement('ul')
+    this.el.className = `mk-menu mk-menu--${this.options.mode}`
+    if (this.options.collapse) this.el.classList.add('is-collapse')
+    this.el.setAttribute('role', 'menu')
+
+    this.render()
+    parent.appendChild(this.el)
+
+    this.setupKeyboard()
+  }
+
+  private render(): void {
+    this.el.innerHTML = ''
+    this.options.items.forEach(item => {
+      this.el.appendChild(this.renderItem(item, 0))
+    })
+  }
+
+  private renderItem(item: MenuItem, level: number): HTMLElement {
+    const hasChildren = item.children && item.children.length > 0
+    const isOpen = this.openeds.has(item.index)
+    const isActive = this.activeIndex === item.index
+    const isCollapsed = this.options.collapse && this.options.mode === 'vertical'
+
+    const li = document.createElement('li')
+    li.className = 'mk-menu-item'
+    if (item.disabled) li.classList.add('is-disabled')
+    if (isActive) li.classList.add('is-active')
+    if (hasChildren) li.classList.add('has-children')
+    if (isOpen) li.classList.add('is-open')
+    li.style.paddingLeft = isCollapsed ? '0' : `${16 + level * 16}px`
+
+    const title = document.createElement('div')
+    title.className = 'mk-menu-item__title'
+    title.style.cursor = item.disabled ? 'not-allowed' : 'pointer'
+    title.setAttribute('role', 'menuitem')
+    title.setAttribute('tabindex', item.disabled ? '-1' : '0')
+    if (item.disabled) {
+      title.setAttribute('aria-disabled', 'true')
+    }
+    if (hasChildren) {
+      title.setAttribute('aria-haspopup', 'true')
+      title.setAttribute('aria-expanded', String(isOpen))
+    }
+
+    if (item.icon) {
+      const icon = document.createElement('span')
+      icon.className = 'mk-menu-item__icon'
+      icon.textContent = item.icon
+      title.appendChild(icon)
+    }
+
+    const text = document.createElement('span')
+    text.className = 'mk-menu-item__text'
+    text.textContent = item.label
+    title.appendChild(text)
+
+    if (hasChildren && !isCollapsed) {
+      const arrow = document.createElement('span')
+      arrow.className = 'mk-menu-item__arrow'
+      arrow.textContent = '›'
+      title.appendChild(arrow)
+    }
+
+    title.addEventListener('click', () => {
+      if (item.disabled) return
+      if (hasChildren) {
+        if (isOpen) {
+          this.openeds.delete(item.index)
+          this.options.onClose?.(item.index)
+        } else {
+          this.openeds.add(item.index)
+          this.options.onOpen?.(item.index)
+        }
+        this.render()
+      } else {
+        this.activeIndex = item.index
+        this.options.onSelect?.(item.index)
+        this.render()
+      }
+    })
+
+    li.appendChild(title)
+
+    if (hasChildren && !isCollapsed) {
+      const sub = document.createElement('ul')
+      sub.className = 'mk-menu-submenu'
+      if (isOpen) sub.classList.add('is-open')
+      sub.setAttribute('role', 'menu')
+      item.children!.forEach(child => {
+        sub.appendChild(this.renderItem(child, level + 1))
+      })
+      li.appendChild(sub)
+    }
+
+    return li
+  }
+
+  private setupKeyboard(): void {
+    this.el.addEventListener('keydown', (e) => {
+      const active = document.activeElement as HTMLElement
+      if (!active?.classList.contains('mk-menu-item__title')) return
+
+      const li = active.parentElement as HTMLLIElement
+      const ul = li.parentElement as HTMLUListElement
+      const items = Array.from(ul.children)
+        .filter((el): el is HTMLLIElement => el.classList.contains('mk-menu-item'))
+        .map((li) => li.querySelector('.mk-menu-item__title') as HTMLElement)
+        .filter(Boolean)
+
+      const index = items.indexOf(active)
+
+      switch (e.key) {
+        case Keys.ArrowDown:
+          e.preventDefault()
+          items[index + 1]?.focus()
+          break
+        case Keys.ArrowUp:
+          e.preventDefault()
+          items[index - 1]?.focus()
+          break
+        case Keys.Enter:
+        case Keys.Space:
+          e.preventDefault()
+          active.click()
+          break
+        case Keys.Escape:
+          e.preventDefault()
+          // Close parent submenu if inside one
+          const parentLi = ul.closest('.mk-menu-item') as HTMLLIElement | null
+          if (parentLi && ul !== this.el) {
+            const parentTitle = parentLi.querySelector('.mk-menu-item__title') as HTMLElement | null
+            if (parentTitle) {
+              const isExpanded = parentTitle.getAttribute('aria-expanded') === 'true'
+              if (isExpanded) {
+                parentTitle.click()
+                parentTitle.focus()
+              }
+            }
+          }
+          break
+      }
+    })
+  }
+
+  destroy(): void {
+    this.el.remove()
+  }
+}
+
+export function createMenu(container: HTMLElement | string, options: MenuOptions): MkMenu {
+  return new MkMenu(container, options)
+}

package/src/components/message/message.css

@@ -0,0 +1,64 @@
+.mk-message-container {
+  position: fixed;
+  top: 16px;
+  left: 50%;
+  transform: translateX(-50%);
+  z-index: 9999;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  pointer-events: none;
+}
+
+.mk-message {
+  display: inline-flex;
+  align-items: center;
+  gap: 10px;
+  padding: 10px 16px;
+  border-radius: var(--mk-radius);
+  font-size: 13px;
+  background: var(--mk-surface);
+  border: 1px solid var(--mk-border);
+  pointer-events: auto;
+  min-width: 260px;
+  opacity: 0;
+  transform: translateY(-12px);
+  transition: all 0.2s ease;
+}
+
+.mk-message.is-show {
+  opacity: 1;
+  transform: translateY(0);
+}
+
+.mk-message__icon {
+  width: 18px; height: 18px;
+  display: flex; align-items: center; justify-content: center;
+  font-size: 13px;
+  flex-shrink: 0;
+  border-radius: 50%;
+}
+
+.mk-message__content {
+  flex: 1;
+  color: var(--mk-text);
+}
+
+.mk-message__close {
+  cursor: pointer;
+  color: var(--mk-text-tertiary);
+  font-size: 11px;
+  width: 20px; height: 20px;
+  display: flex; align-items: center; justify-content: center;
+  border-radius: 4px;
+  transition: var(--mk-transition);
+}
+.mk-message__close:hover {
+  color: var(--mk-text);
+  background: var(--mk-surface-hover);
+}
+
+.mk-message--success .mk-message__icon { color: var(--mk-success); }
+.mk-message--warning .mk-message__icon { color: var(--mk-warning); }
+.mk-message--error   .mk-message__icon { color: var(--mk-danger); }
+.mk-message--info    .mk-message__icon { color: var(--mk-primary); }

package/src/components/message/message.ts

@@ -0,0 +1,96 @@
+import './message.css'
+
+export interface MessageOptions {
+  type?: 'success' | 'warning' | 'error' | 'info'
+  duration?: number
+  closable?: boolean
+}
+
+const ICONS: Record<string, string> = {
+  success: '✓',
+  warning: '!',
+  error: '✕',
+  info: 'i',
+}
+
+const COLORS: Record<string, string> = {
+  success: '#67c23a',
+  warning: '#e6a23c',
+  error: '#f56c6c',
+  info: '#409eff',
+}
+
+let container: HTMLDivElement | null = null
+
+function getContainer(): HTMLDivElement {
+  if (!container) {
+    container = document.createElement('div')
+    container.className = 'mk-message-container'
+    document.body.appendChild(container)
+  }
+  return container
+}
+
+export function message(
+  msg: string,
+  options: MessageOptions = {}
+): () => void {
+  const opts = { type: 'info', duration: 3000, closable: true, ...options }
+  const el = document.createElement('div')
+  el.className = `mk-message mk-message--${opts.type}`
+
+  const iconWrap = document.createElement('span')
+  iconWrap.className = 'mk-message__icon'
+  iconWrap.style.color = COLORS[opts.type!]
+  iconWrap.textContent = ICONS[opts.type!]
+  el.appendChild(iconWrap)
+
+  const content = document.createElement('span')
+  content.className = 'mk-message__content'
+  content.textContent = msg
+  el.appendChild(content)
+
+  if (opts.closable) {
+    const close = document.createElement('span')
+    close.className = 'mk-message__close'
+    close.innerHTML = '✕'
+    close.addEventListener('click', () => removeMessage(el))
+    el.appendChild(close)
+  }
+
+  getContainer().appendChild(el)
+
+  requestAnimationFrame(() => el.classList.add('is-show'))
+
+  const timer = setTimeout(() => removeMessage(el), opts.duration)
+
+  return () => {
+    clearTimeout(timer)
+    removeMessage(el)
+  }
+}
+
+function removeMessage(el: HTMLDivElement): void {
+  el.classList.remove('is-show')
+  el.style.opacity = '0'
+  el.style.transform = 'translateY(-20px) scale(0.95)'
+  setTimeout(() => {
+    el.remove()
+    if (container && container.children.length === 0) {
+      container.remove()
+      container = null
+    }
+  }, 300)
+}
+
+export function messageSuccess(msg: string, options?: Omit<MessageOptions, 'type'>): () => void {
+  return message(msg, { ...options, type: 'success' })
+}
+
+export function messageError(msg: string, options?: Omit<MessageOptions, 'type'>): () => void {
+  return message(msg, { ...options, type: 'error' })
+}
+
+export function messageWarning(msg: string, options?: Omit<MessageOptions, 'type'>): () => void {
+  return message(msg, { ...options, type: 'warning' })
+}

package/src/components/popover/popover.css

@@ -0,0 +1,73 @@
+.mk-popover {
+  display: none;
+  opacity: 0;
+  transform: scale(0.96) translateY(2px);
+  transition: opacity var(--mk-duration-fast) var(--mk-ease-default),
+              transform var(--mk-duration-fast) var(--mk-ease-out);
+  filter: drop-shadow(var(--mk-shadow-lg));
+  background: var(--mk-surface-raised);
+  border: 1px solid var(--mk-border-hover);
+  border-radius: var(--mk-radius-md);
+  max-width: 320px;
+  pointer-events: auto;
+}
+
+.mk-popover.is-visible {
+  opacity: 1;
+  transform: scale(1) translateY(0);
+}
+
+.mk-popover__title {
+  padding: var(--mk-space-3) var(--mk-space-4) 0;
+  font-size: var(--mk-text-sm);
+  font-weight: var(--mk-font-semibold);
+  line-height: var(--mk-leading-tight);
+  color: var(--mk-text);
+}
+
+.mk-popover__content {
+  padding: var(--mk-space-3) var(--mk-space-4);
+  font-size: var(--mk-text-sm);
+  line-height: var(--mk-leading-normal);
+  color: var(--mk-text-secondary);
+}
+
+.mk-popover__arrow {
+  position: absolute;
+  width: 8px;
+  height: 8px;
+  background: var(--mk-surface-raised);
+  border: 1px solid var(--mk-border-hover);
+}
+
+.mk-popover__arrow.is-top {
+  top: -4px;
+  left: 50%;
+  transform: translateX(-50%) rotate(45deg);
+  border-right: none;
+  border-bottom: none;
+}
+
+.mk-popover__arrow.is-bottom {
+  bottom: -4px;
+  left: 50%;
+  transform: translateX(-50%) rotate(45deg);
+  border-left: none;
+  border-top: none;
+}
+
+.mk-popover__arrow.is-left {
+  left: -4px;
+  top: 50%;
+  transform: translateY(-50%) rotate(45deg);
+  border-right: none;
+  border-top: none;
+}
+
+.mk-popover__arrow.is-right {
+  right: -4px;
+  top: 50%;
+  transform: translateY(-50%) rotate(45deg);
+  border-left: none;
+  border-bottom: none;
+}