@luanlu/mk-motion 1.2.0 → 1.2.1

package/src/components/dialog/dialog.css

@@ -0,0 +1,78 @@
+.mk-dialog-overlay {
+  position: fixed;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.6);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 2000;
+  opacity: 0;
+  transition: opacity 0.2s ease;
+}
+.mk-dialog-overlay.is-open { opacity: 1; }
+
+.mk-dialog {
+  background: var(--mk-surface);
+  border: 1px solid var(--mk-border);
+  border-radius: var(--mk-radius-lg);
+  min-width: 400px;
+  max-width: 90vw;
+  max-height: 85vh;
+  display: flex;
+  flex-direction: column;
+  transform: scale(0.95);
+  opacity: 0;
+  transition: all 0.2s ease;
+}
+
+.mk-dialog-overlay.is-open .mk-dialog {
+  transform: scale(1);
+  opacity: 1;
+}
+
+.mk-dialog__header {
+  padding: 18px 20px 14px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.mk-dialog__title {
+  font-size: 15px;
+  font-weight: 600;
+  color: var(--mk-text);
+}
+
+.mk-dialog__close {
+  cursor: pointer;
+  color: var(--mk-text-tertiary);
+  font-size: 16px;
+  width: 24px; height: 24px;
+  display: flex; align-items: center; justify-content: center;
+  border-radius: 4px;
+  transition: var(--mk-transition);
+}
+.mk-dialog__close:hover {
+  color: var(--mk-text);
+  background: var(--mk-surface-hover);
+}
+
+.mk-dialog__body {
+  padding: 6px 20px 18px;
+  overflow-y: auto;
+  flex: 1;
+  color: var(--mk-text-secondary);
+  font-size: 13px;
+  line-height: 1.6;
+}
+
+.mk-dialog__footer {
+  padding: 12px 20px 16px;
+  display: flex;
+  justify-content: flex-end;
+  gap: 8px;
+  border-top: 1px solid var(--mk-border);
+}
+
+.mk-dialog.is-center { text-align: center; }
+.mk-dialog.is-center .mk-dialog__footer { justify-content: center; }

package/src/components/dialog/dialog.ts

@@ -0,0 +1,164 @@
+import '../button/button.css'
+import './dialog.css'
+import { FocusTrap } from '../../a11y/focus-trap'
+import { onKey, Keys } from '../../a11y/keyboard'
+
+export interface DialogOptions {
+  title?: string
+  content?: string | HTMLElement
+  showClose?: boolean
+  showCancel?: boolean
+  center?: boolean
+  cancelText?: string
+  confirmText?: string
+  onConfirm?: () => void
+  onCancel?: () => void
+  onClose?: () => void
+}
+
+let dialogIdCounter = 0
+
+export class MkDialog {
+  private overlay: HTMLDivElement
+  private dialog: HTMLDivElement
+  private options: DialogOptions
+  private focusTrap: FocusTrap
+  private escapeCleanup: (() => void) | null = null
+  private confirmBtn: HTMLButtonElement
+  private titleId: string
+
+  constructor(options: DialogOptions = {}) {
+    this.options = {
+      showClose: true,
+      showCancel: true,
+      ...options,
+    }
+
+    this.overlay = document.createElement('div')
+    this.overlay.className = 'mk-dialog-overlay'
+    this.overlay.style.display = 'none'
+
+    this.dialog = document.createElement('div')
+    this.dialog.className = 'mk-dialog'
+    if (this.options.center) this.dialog.classList.add('is-center')
+    this.dialog.setAttribute('role', 'dialog')
+    this.dialog.setAttribute('aria-modal', 'true')
+
+    // Header
+    const header = document.createElement('div')
+    header.className = 'mk-dialog__header'
+
+    const title = document.createElement('span')
+    title.className = 'mk-dialog__title'
+    title.textContent = this.options.title || ''
+    this.titleId = `mk-dialog-title-${++dialogIdCounter}`
+    title.id = this.titleId
+    this.dialog.setAttribute('aria-labelledby', this.titleId)
+    header.appendChild(title)
+
+    if (this.options.showClose) {
+      const close = document.createElement('span')
+      close.className = 'mk-dialog__close'
+      close.innerHTML = '✕'
+      close.setAttribute('role', 'button')
+      close.setAttribute('tabindex', '0')
+      close.setAttribute('aria-label', 'Close')
+      close.addEventListener('click', () => this.close())
+      close.addEventListener('keydown', (e) => {
+        if (e.key === 'Enter' || e.key === ' ') {
+          e.preventDefault()
+          this.close()
+        }
+      })
+      header.appendChild(close)
+    }
+
+    this.dialog.appendChild(header)
+
+    // Body
+    const body = document.createElement('div')
+    body.className = 'mk-dialog__body'
+    if (typeof this.options.content === 'string') {
+      body.innerHTML = this.options.content
+    } else if (this.options.content) {
+      body.appendChild(this.options.content)
+    }
+    this.dialog.appendChild(body)
+
+    // Footer
+    const footer = document.createElement('div')
+    footer.className = 'mk-dialog__footer'
+
+    if (this.options.showCancel) {
+      const cancelBtn = document.createElement('button')
+      cancelBtn.className = 'mk-button'
+      cancelBtn.textContent = this.options.cancelText || '取消'
+      cancelBtn.addEventListener('click', () => {
+        this.options.onCancel?.()
+        this.close()
+      })
+      footer.appendChild(cancelBtn)
+    }
+
+    this.confirmBtn = document.createElement('button')
+    this.confirmBtn.className = 'mk-button mk-button--primary'
+    this.confirmBtn.textContent = this.options.confirmText || '确定'
+    this.confirmBtn.addEventListener('click', () => {
+      this.options.onConfirm?.()
+      this.close()
+    })
+    footer.appendChild(this.confirmBtn)
+
+    this.dialog.appendChild(footer)
+
+    this.overlay.appendChild(this.dialog)
+
+    this.overlay.addEventListener('click', (e) => {
+      if (e.target === this.overlay) {
+        this.options.onClose?.()
+        this.close()
+      }
+    })
+
+    document.body.appendChild(this.overlay)
+
+    this.focusTrap = new FocusTrap(this.dialog)
+  }
+
+  open(): void {
+    this.overlay.style.display = 'flex'
+    requestAnimationFrame(() => {
+      this.overlay.classList.add('is-open')
+      this.focusTrap.activate(this.confirmBtn)
+      this.escapeCleanup = onKey(this.dialog, [
+        { key: Keys.Escape, handler: () => this.close() },
+      ])
+    })
+  }
+
+  close(): void {
+    this.overlay.classList.remove('is-open')
+    if (this.escapeCleanup) {
+      this.escapeCleanup()
+      this.escapeCleanup = null
+    }
+    this.focusTrap.deactivate()
+    setTimeout(() => {
+      this.overlay.style.display = 'none'
+      this.options.onClose?.()
+    }, 300)
+  }
+
+  destroy(): void {
+    if (this.escapeCleanup) {
+      this.escapeCleanup()
+      this.escapeCleanup = null
+    }
+    this.focusTrap.deactivate()
+    this.overlay.remove()
+  }
+}
+
+export function createDialog(options?: DialogOptions): MkDialog {
+  return new MkDialog(options)
+}

package/src/components/drawer/drawer.css

@@ -0,0 +1,73 @@
+.mk-drawer-overlay {
+  position: fixed;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.5);
+  z-index: 2000;
+  opacity: 0;
+  transition: opacity 0.2s ease;
+}
+.mk-drawer-overlay.is-open { opacity: 1; }
+
+.mk-drawer {
+  position: fixed;
+  background: var(--mk-surface);
+  border: 1px solid var(--mk-border);
+  display: flex;
+  flex-direction: column;
+  transition: transform 0.25s ease;
+}
+
+.mk-drawer--right {
+  top: 0; right: 0; bottom: 0;
+  width: 340px;
+  border-left: 1px solid var(--mk-border);
+  border-radius: var(--mk-radius-lg) 0 0 var(--mk-radius-lg);
+  transform: translateX(100%);
+}
+.mk-drawer-overlay.is-open .mk-drawer--right { transform: translateX(0); }
+
+.mk-drawer--left {
+  top: 0; left: 0; bottom: 0;
+  width: 340px;
+  border-right: 1px solid var(--mk-border);
+  border-radius: 0 var(--mk-radius-lg) var(--mk-radius-lg) 0;
+  transform: translateX(-100%);
+}
+.mk-drawer-overlay.is-open .mk-drawer--left { transform: translateX(0); }
+
+.mk-drawer__header {
+  padding: 18px 20px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  border-bottom: 1px solid var(--mk-border);
+}
+
+.mk-drawer__title {
+  font-size: 15px;
+  font-weight: 600;
+  color: var(--mk-text);
+}
+
+.mk-drawer__close {
+  cursor: pointer;
+  color: var(--mk-text-tertiary);
+  font-size: 16px;
+  width: 24px; height: 24px;
+  display: flex; align-items: center; justify-content: center;
+  border-radius: 4px;
+  transition: var(--mk-transition);
+}
+.mk-drawer__close:hover {
+  color: var(--mk-text);
+  background: var(--mk-surface-hover);
+}
+
+.mk-drawer__body {
+  padding: 16px 20px;
+  flex: 1;
+  overflow-y: auto;
+  color: var(--mk-text-secondary);
+  font-size: 13px;
+  line-height: 1.6;
+}

package/src/components/drawer/drawer.ts

@@ -0,0 +1,131 @@
+import './drawer.css'
+import { FocusTrap } from '../../a11y/focus-trap'
+import { onKey, Keys } from '../../a11y/keyboard'
+
+export interface DrawerOptions {
+  title?: string
+  content?: string | HTMLElement
+  direction?: 'right' | 'left' | 'top' | 'bottom'
+  size?: number
+  showClose?: boolean
+  onClose?: () => void
+}
+
+export class MkDrawer {
+  private overlay: HTMLDivElement
+  private drawer: HTMLDivElement
+  private options: DrawerOptions
+  private focusTrap: FocusTrap
+  private escapeCleanup: (() => void) | null = null
+
+  constructor(options: DrawerOptions = {}) {
+    this.options = {
+      direction: 'right',
+      showClose: true,
+      ...options,
+    }
+
+    this.overlay = document.createElement('div')
+    this.overlay.className = 'mk-drawer-overlay'
+    this.overlay.style.display = 'none'
+
+    this.drawer = document.createElement('div')
+    this.drawer.className = `mk-drawer mk-drawer--${this.options.direction}`
+    this.drawer.setAttribute('role', 'dialog')
+    this.drawer.setAttribute('aria-modal', 'true')
+    if (this.options.size) {
+      if (this.options.direction === 'right' || this.options.direction === 'left') {
+        this.drawer.style.width = `${this.options.size}px`
+      } else {
+        this.drawer.style.height = `${this.options.size}px`
+      }
+    }
+
+    // Header
+    const header = document.createElement('div')
+    header.className = 'mk-drawer__header'
+
+    const title = document.createElement('span')
+    title.className = 'mk-drawer__title'
+    title.textContent = this.options.title || ''
+    header.appendChild(title)
+
+    if (this.options.showClose) {
+      const close = document.createElement('span')
+      close.className = 'mk-drawer__close'
+      close.innerHTML = '✕'
+      close.setAttribute('role', 'button')
+      close.setAttribute('tabindex', '0')
+      close.setAttribute('aria-label', 'Close')
+      close.addEventListener('click', () => this.close())
+      close.addEventListener('keydown', (e) => {
+        if (e.key === 'Enter' || e.key === ' ') {
+          e.preventDefault()
+          this.close()
+        }
+      })
+      header.appendChild(close)
+    }
+
+    this.drawer.appendChild(header)
+
+    // Body
+    const body = document.createElement('div')
+    body.className = 'mk-drawer__body'
+    if (typeof this.options.content === 'string') {
+      body.innerHTML = this.options.content
+    } else if (this.options.content) {
+      body.appendChild(this.options.content)
+    }
+    this.drawer.appendChild(body)
+
+    this.overlay.appendChild(this.drawer)
+
+    this.overlay.addEventListener('click', (e) => {
+      if (e.target === this.overlay) {
+        this.close()
+      }
+    })
+
+    document.body.appendChild(this.overlay)
+
+    this.focusTrap = new FocusTrap(this.drawer)
+  }
+
+  open(): void {
+    this.overlay.style.display = 'block'
+    requestAnimationFrame(() => {
+      this.overlay.classList.add('is-open')
+      this.focusTrap.activate()
+      this.escapeCleanup = onKey(this.drawer, [
+        { key: Keys.Escape, handler: () => this.close() },
+      ])
+    })
+  }
+
+  close(): void {
+    this.overlay.classList.remove('is-open')
+    if (this.escapeCleanup) {
+      this.escapeCleanup()
+      this.escapeCleanup = null
+    }
+    this.focusTrap.deactivate()
+    setTimeout(() => {
+      this.overlay.style.display = 'none'
+      this.options.onClose?.()
+    }, 300)
+  }
+
+  destroy(): void {
+    if (this.escapeCleanup) {
+      this.escapeCleanup()
+      this.escapeCleanup = null
+    }
+    this.focusTrap.deactivate()
+    this.overlay.remove()
+  }
+}
+
+export function createDrawer(options?: DrawerOptions): MkDrawer {
+  return new MkDrawer(options)
+}

package/src/components/empty/empty.css

@@ -0,0 +1,36 @@
+.mk-empty {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: var(--mk-space-8) var(--mk-space-4);
+  text-align: center;
+  color: var(--mk-text-tertiary);
+}
+
+.mk-empty__image {
+  width: 120px;
+  height: 120px;
+  margin-bottom: var(--mk-space-4);
+  color: var(--mk-text-tertiary);
+  opacity: 0.8;
+}
+
+.mk-empty__image svg {
+  width: 100%;
+  height: 100%;
+}
+
+.mk-empty__image img {
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
+}
+
+.mk-empty__description {
+  margin: 0;
+  font-size: var(--mk-text-sm);
+  font-weight: var(--mk-font-medium);
+  line-height: var(--mk-leading-normal);
+  color: var(--mk-text-secondary);
+}

package/src/components/empty/empty.ts

@@ -0,0 +1,85 @@
+import '../../styles/element-plus.css'
+import './empty.css'
+
+export interface EmptyOptions {
+  description?: string
+  image?: string | 'default'
+  imageStyle?: Partial<CSSStyleDeclaration>
+}
+
+const defaultSvg = `<svg viewBox="0 0 120 120" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <rect x="20" y="30" width="80" height="60" rx="8" stroke="currentColor" stroke-width="1.5" opacity="0.3"/>
+  <circle cx="45" cy="55" r="8" fill="currentColor" opacity="0.2"/>
+  <rect x="60" y="48" width="28" height="4" rx="2" fill="currentColor" opacity="0.2"/>
+  <rect x="60" y="58" width="20" height="4" rx="2" fill="currentColor" opacity="0.15"/>
+  <line x1="35" y1="82" x2="85" y2="82" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" opacity="0.15"/>
+  <line x1="45" y1="90" x2="75" y2="90" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" opacity="0.1"/>
+</svg>`
+
+export class MkEmpty {
+  el: HTMLDivElement
+  private options: EmptyOptions
+
+  constructor(container: HTMLElement | string, options: EmptyOptions = {}) {
+    const parent =
+      typeof container === 'string'
+        ? document.querySelector(container)!
+        : container
+
+    this.options = {
+      image: 'default',
+      ...options,
+    }
+
+    this.el = document.createElement('div')
+    this.el.className = 'mk-empty'
+
+    const imageWrap = document.createElement('div')
+    imageWrap.className = 'mk-empty__image'
+    if (this.options.imageStyle) {
+      Object.assign(imageWrap.style, this.options.imageStyle)
+    }
+
+    if (this.options.image === 'default') {
+      imageWrap.innerHTML = defaultSvg
+    } else if (this.options.image) {
+      const img = document.createElement('img')
+      img.src = this.options.image
+      img.alt = ''
+      imageWrap.appendChild(img)
+    }
+
+    this.el.appendChild(imageWrap)
+
+    if (this.options.description) {
+      const desc = document.createElement('p')
+      desc.className = 'mk-empty__description'
+      desc.textContent = this.options.description
+      this.el.appendChild(desc)
+    }
+
+    parent.appendChild(this.el)
+  }
+
+  setDescription(text: string): void {
+    this.options.description = text
+    let desc = this.el.querySelector('.mk-empty__description') as HTMLParagraphElement | null
+    if (!desc) {
+      desc = document.createElement('p')
+      desc.className = 'mk-empty__description'
+      this.el.appendChild(desc)
+    }
+    desc.textContent = text
+  }
+
+  destroy(): void {
+    this.el.remove()
+  }
+}
+
+export function createEmpty(
+  container: HTMLElement | string,
+  options?: EmptyOptions
+): MkEmpty {
+  return new MkEmpty(container, options)
+}

package/src/components/form/checkbox.css

@@ -0,0 +1,56 @@
+.mk-checkbox {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  cursor: pointer;
+  user-select: none;
+  font-size: 13px;
+  color: var(--mk-text);
+}
+
+.mk-checkbox__input {
+  width: 16px;
+  height: 16px;
+  border: 1.5px solid var(--mk-border);
+  border-radius: 4px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: var(--mk-transition);
+  flex-shrink: 0;
+  background: var(--mk-surface);
+}
+
+.mk-checkbox:hover .mk-checkbox__input {
+  border-color: var(--mk-border-hover);
+}
+
+.mk-checkbox.is-checked .mk-checkbox__input {
+  background: var(--mk-primary);
+  border-color: var(--mk-primary);
+}
+
+.mk-checkbox__check {
+  color: #fff;
+  font-size: 11px;
+  opacity: 0;
+  transform: scale(0.5);
+  transition: all 0.15s ease;
+}
+
+.mk-checkbox.is-checked .mk-checkbox__check {
+  opacity: 1;
+  transform: scale(1);
+}
+
+.mk-checkbox.is-disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+
+/* Group */
+.mk-checkbox-group {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 12px;
+}