@luanlu/mk-motion 1.1.0 → 1.2.1

package/src/components/popover/popover.ts

@@ -0,0 +1,279 @@
+import '../../styles/element-plus.css'
+import './popover.css'
+import { FocusTrap } from '../../a11y/focus-trap'
+import { onKey, Keys } from '../../a11y/keyboard'
+
+export interface PopoverOptions {
+  content?: string | HTMLElement
+  title?: string
+  placement?: 'top' | 'bottom' | 'left' | 'right'
+  trigger?: 'click' | 'hover'
+  width?: number
+  offset?: number
+}
+
+export class MkPopover {
+  el: HTMLDivElement
+  private options: PopoverOptions
+  private popoverEl: HTMLDivElement | null = null
+  private arrowEl: HTMLDivElement | null = null
+  private contentEl: HTMLDivElement | null = null
+  private showTimer: ReturnType<typeof setTimeout> | null = null
+  private hideTimer: ReturnType<typeof setTimeout> | null = null
+  private isVisible = false
+  private cleanupFns: Array<() => void> = []
+  private focusTrap: FocusTrap | null = null
+  private escapeCleanup: (() => void) | null = null
+  constructor(target: HTMLElement, options: PopoverOptions = {}) {
+    this.options = {
+      placement: 'top',
+      trigger: 'hover',
+      offset: 8,
+      ...options,
+    }
+
+    this.el = document.createElement('div')
+    this.el.style.display = 'contents'
+
+    this.buildPopover()
+
+    if (this.options.trigger === 'click') {
+      const onClick = (e: MouseEvent) => {
+        e.stopPropagation()
+        this.toggle()
+      }
+      target.addEventListener('click', onClick)
+      this.cleanupFns.push(() => target.removeEventListener('click', onClick))
+
+      const onDocClick = (e: MouseEvent) => {
+        if (
+          this.isVisible &&
+          this.popoverEl &&
+          !this.popoverEl.contains(e.target as Node) &&
+          e.target !== target
+        ) {
+          this.hide()
+        }
+      }
+      document.addEventListener('click', onDocClick)
+      this.cleanupFns.push(() => document.removeEventListener('click', onDocClick))
+    } else {
+      const onEnter = () => {
+        if (this.hideTimer) {
+          clearTimeout(this.hideTimer)
+          this.hideTimer = null
+        }
+        this.showTimer = setTimeout(() => this.show(), 150)
+      }
+      const onLeave = () => {
+        if (this.showTimer) {
+          clearTimeout(this.showTimer)
+          this.showTimer = null
+        }
+        this.hideTimer = setTimeout(() => this.hide(), 150)
+      }
+
+      target.addEventListener('mouseenter', onEnter)
+      target.addEventListener('mouseleave', onLeave)
+      target.addEventListener('focus', onEnter)
+      target.addEventListener('blur', onLeave)
+
+      this.cleanupFns.push(() => target.removeEventListener('mouseenter', onEnter))
+      this.cleanupFns.push(() => target.removeEventListener('mouseleave', onLeave))
+      this.cleanupFns.push(() => target.removeEventListener('focus', onEnter))
+      this.cleanupFns.push(() => target.removeEventListener('blur', onLeave))
+
+      if (this.popoverEl) {
+        const onPopoverEnter = () => {
+          if (this.hideTimer) {
+            clearTimeout(this.hideTimer)
+            this.hideTimer = null
+          }
+        }
+        const onPopoverLeave = () => {
+          this.hideTimer = setTimeout(() => this.hide(), 150)
+        }
+        this.popoverEl.addEventListener('mouseenter', onPopoverEnter)
+        this.popoverEl.addEventListener('mouseleave', onPopoverLeave)
+        this.cleanupFns.push(() => this.popoverEl!.removeEventListener('mouseenter', onPopoverEnter))
+        this.cleanupFns.push(() => this.popoverEl!.removeEventListener('mouseleave', onPopoverLeave))
+      }
+    }
+
+    target.appendChild(this.el)
+  }
+
+  private buildPopover(): void {
+    this.popoverEl = document.createElement('div')
+    this.popoverEl.className = 'mk-popover'
+    this.popoverEl.style.position = 'absolute'
+    this.popoverEl.style.zIndex = 'var(--mk-z-popover)'
+    this.popoverEl.setAttribute('role', this.options.trigger === 'click' ? 'dialog' : 'tooltip')
+    if (this.options.trigger === 'click') {
+      this.popoverEl.setAttribute('tabindex', '-1')
+    }
+    if (this.options.width) {
+      this.popoverEl.style.width = `${this.options.width}px`
+    }
+
+    this.arrowEl = document.createElement('div')
+    this.arrowEl.className = 'mk-popover__arrow'
+    this.popoverEl.appendChild(this.arrowEl)
+
+    if (this.options.title) {
+      const title = document.createElement('div')
+      title.className = 'mk-popover__title'
+      title.textContent = this.options.title
+      this.popoverEl.appendChild(title)
+    }
+
+    this.contentEl = document.createElement('div')
+    this.contentEl.className = 'mk-popover__content'
+    if (typeof this.options.content === 'string') {
+      this.contentEl.textContent = this.options.content
+    } else if (this.options.content) {
+      this.contentEl.appendChild(this.options.content)
+    }
+    this.popoverEl.appendChild(this.contentEl)
+
+    document.body.appendChild(this.popoverEl)
+  }
+
+  private position(): void {
+    if (!this.popoverEl || !this.arrowEl) return
+
+    const target = this.el.parentElement as HTMLElement
+    const rect = target.getBoundingClientRect()
+    const popRect = this.popoverEl.getBoundingClientRect()
+    const scrollX = window.scrollX
+    const scrollY = window.scrollY
+    const offset = this.options.offset!
+
+    let top = 0
+    let left = 0
+    let arrowClass = ''
+
+    switch (this.options.placement) {
+      case 'top':
+        top = rect.top + scrollY - popRect.height - offset
+        left = rect.left + scrollX + rect.width / 2 - popRect.width / 2
+        arrowClass = 'is-bottom'
+        break
+      case 'bottom':
+        top = rect.bottom + scrollY + offset
+        left = rect.left + scrollX + rect.width / 2 - popRect.width / 2
+        arrowClass = 'is-top'
+        break
+      case 'left':
+        top = rect.top + scrollY + rect.height / 2 - popRect.height / 2
+        left = rect.left + scrollX - popRect.width - offset
+        arrowClass = 'is-right'
+        break
+      case 'right':
+        top = rect.top + scrollY + rect.height / 2 - popRect.height / 2
+        left = rect.right + scrollX + offset
+        arrowClass = 'is-left'
+        break
+      default:
+        top = rect.top + scrollY - popRect.height - offset
+        left = rect.left + scrollX + rect.width / 2 - popRect.width / 2
+        arrowClass = 'is-bottom'
+    }
+
+    const padding = 8
+    if (left < padding) left = padding
+    if (left + popRect.width > window.innerWidth - padding) {
+      left = window.innerWidth - popRect.width - padding
+    }
+    if (top < padding) top = padding
+
+    this.popoverEl.style.top = `${top}px`
+    this.popoverEl.style.left = `${left}px`
+    this.arrowEl.className = `mk-popover__arrow ${arrowClass}`
+  }
+
+  show(): void {
+    if (!this.popoverEl) return
+    this.isVisible = true
+
+    this.popoverEl.classList.remove('is-visible')
+    this.popoverEl.style.visibility = 'hidden'
+    this.popoverEl.style.display = 'block'
+
+    requestAnimationFrame(() => {
+      if (!this.isVisible) return
+      this.position()
+      this.popoverEl!.style.visibility = 'visible'
+      this.popoverEl!.classList.add('is-visible')
+
+      if (this.options.trigger === 'click') {
+        if (!this.focusTrap) {
+          this.focusTrap = new FocusTrap(this.popoverEl!)
+        }
+        this.focusTrap.activate(this.popoverEl!)
+        this.escapeCleanup = onKey(this.popoverEl!, [
+          { key: Keys.Escape, handler: () => this.hide() },
+        ])
+      }
+    })
+  }
+
+  hide(): void {
+    if (!this.popoverEl) return
+    this.isVisible = false
+    this.popoverEl.classList.remove('is-visible')
+    if (this.escapeCleanup) {
+      this.escapeCleanup()
+      this.escapeCleanup = null
+    }
+    if (this.focusTrap) {
+      this.focusTrap.deactivate()
+    }
+    this.hideTimer = setTimeout(() => {
+      if (!this.isVisible) {
+        this.popoverEl!.style.display = 'none'
+      }
+    }, 200)
+  }
+
+  toggle(): void {
+    if (this.isVisible) {
+      this.hide()
+    } else {
+      this.show()
+    }
+  }
+
+  setContent(content: string | HTMLElement): void {
+    if (!this.contentEl) return
+    this.contentEl.innerHTML = ''
+    if (typeof content === 'string') {
+      this.contentEl.textContent = content
+    } else {
+      this.contentEl.appendChild(content)
+    }
+  }
+
+  destroy(): void {
+    this.cleanupFns.forEach((fn) => fn())
+    this.cleanupFns = []
+    if (this.showTimer) clearTimeout(this.showTimer)
+    if (this.hideTimer) clearTimeout(this.hideTimer)
+    if (this.escapeCleanup) {
+      this.escapeCleanup()
+      this.escapeCleanup = null
+    }
+    if (this.focusTrap) {
+      this.focusTrap.deactivate()
+    }
+    this.popoverEl?.remove()
+    this.el.remove()
+  }
+}
+
+export function createPopover(
+  target: HTMLElement,
+  options?: PopoverOptions
+): MkPopover {
+  return new MkPopover(target, options)
+}

package/src/components/progress/progress.css

@@ -0,0 +1,112 @@
+.mk-progress {
+  display: flex;
+  align-items: center;
+  gap: var(--mk-space-3);
+  font-size: var(--mk-text-sm);
+  color: var(--mk-text-secondary);
+}
+
+.mk-progress.is-hide-info {
+  gap: 0;
+}
+
+/* Line */
+.mk-progress--line {
+  width: 100%;
+}
+
+.mk-progress__track {
+  flex: 1;
+  height: 8px;
+  background: var(--mk-surface-hover);
+  border-radius: var(--mk-radius-full);
+  overflow: hidden;
+}
+
+.mk-progress__bar {
+  height: 100%;
+  background: var(--mk-primary);
+  border-radius: var(--mk-radius-full);
+  transition: width var(--mk-duration-slow) var(--mk-ease-out);
+}
+
+.mk-progress__text {
+  min-width: 36px;
+  text-align: right;
+  font-size: var(--mk-text-sm);
+  font-weight: var(--mk-font-medium);
+  color: var(--mk-text-secondary);
+  flex-shrink: 0;
+}
+
+.mk-progress.is-success .mk-progress__bar,
+.mk-progress.is-success .mk-progress__path-circle {
+  background: var(--mk-success);
+  stroke: var(--mk-success);
+}
+
+.mk-progress.is-exception .mk-progress__bar,
+.mk-progress.is-exception .mk-progress__path-circle {
+  background: var(--mk-danger);
+  stroke: var(--mk-danger);
+}
+
+.mk-progress.is-active .mk-progress__bar {
+  background: var(--mk-primary);
+  position: relative;
+  overflow: hidden;
+}
+
+.mk-progress.is-active .mk-progress__bar::after {
+  content: '';
+  position: absolute;
+  inset: 0;
+  background: linear-gradient(
+    90deg,
+    transparent 0%,
+    rgba(255, 255, 255, 0.25) 50%,
+    transparent 100%
+  );
+  animation: mk-progress-active 1.5s ease-in-out infinite;
+}
+
+@keyframes mk-progress-active {
+  0% { transform: translateX(-100%); }
+  100% { transform: translateX(100%); }
+}
+
+/* Circle / Dashboard */
+.mk-progress--circle,
+.mk-progress--dashboard {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 120px;
+  height: 120px;
+}
+
+.mk-progress__svg {
+  position: absolute;
+  inset: 0;
+}
+
+.mk-progress__track-circle {
+  stroke: var(--mk-surface-hover);
+}
+
+.mk-progress__path-circle {
+  stroke: var(--mk-primary);
+  transition: stroke-dashoffset var(--mk-duration-slow) var(--mk-ease-out);
+}
+
+.mk-progress--circle .mk-progress__text,
+.mk-progress--dashboard .mk-progress__text {
+  position: relative;
+  z-index: 1;
+  text-align: center;
+  min-width: auto;
+  font-size: var(--mk-text-md);
+  font-weight: var(--mk-font-semibold);
+  color: var(--mk-text);
+}

package/src/components/progress/progress.ts

@@ -0,0 +1,171 @@
+import '../../styles/element-plus.css'
+import './progress.css'
+
+export interface ProgressOptions {
+  type?: 'line' | 'circle' | 'dashboard'
+  percent?: number
+  strokeWidth?: number
+  color?: string
+  status?: 'success' | 'exception' | 'active'
+  showInfo?: boolean
+}
+
+export class MkProgress {
+  el: HTMLDivElement
+  private options: ProgressOptions
+  private barEl: HTMLDivElement | null = null
+  private textEl: HTMLSpanElement | null = null
+  private circleSvg: SVGSVGElement | null = null
+  private circleTrack: SVGCircleElement | null = null
+  private circlePath: SVGCircleElement | null = null
+
+  constructor(container: HTMLElement | string, options: ProgressOptions = {}) {
+    const parent =
+      typeof container === 'string'
+        ? document.querySelector(container)!
+        : container
+
+    this.options = {
+      type: 'line',
+      percent: 0,
+      showInfo: true,
+      ...options,
+    }
+
+    this.el = document.createElement('div')
+    this.el.className = this.buildClass()
+
+    if (this.options.type === 'line') {
+      this.renderLine()
+    } else {
+      this.renderCircleOrDashboard()
+    }
+
+    parent.appendChild(this.el)
+
+    requestAnimationFrame(() => {
+      this.setPercent(this.options.percent!)
+    })
+  }
+
+  private buildClass(): string {
+    const classes = ['mk-progress', `mk-progress--${this.options.type}`]
+    if (this.options.status) classes.push(`is-${this.options.status}`)
+    if (!this.options.showInfo) classes.push('is-hide-info')
+    return classes.join(' ')
+  }
+
+  private renderLine(): void {
+    const track = document.createElement('div')
+    track.className = 'mk-progress__track'
+    if (this.options.strokeWidth) {
+      track.style.height = `${this.options.strokeWidth}px`
+    }
+
+    this.barEl = document.createElement('div')
+    this.barEl.className = 'mk-progress__bar'
+    track.appendChild(this.barEl)
+    this.el.appendChild(track)
+
+    if (this.options.showInfo) {
+      this.textEl = document.createElement('span')
+      this.textEl.className = 'mk-progress__text'
+      this.el.appendChild(this.textEl)
+    }
+  }
+
+  private renderCircleOrDashboard(): void {
+    const size = 120
+    const strokeWidth = this.options.strokeWidth || 6
+    const radius = (size - strokeWidth) / 2
+    const circumference = 2 * Math.PI * radius
+    const isDashboard = this.options.type === 'dashboard'
+    const dashArray = isDashboard ? circumference * 0.75 : circumference
+
+    this.circleSvg = document.createElementNS('http://www.w3.org/2000/svg', 'svg')
+    this.circleSvg.setAttribute('width', `${size}`)
+    this.circleSvg.setAttribute('height', `${size}`)
+    this.circleSvg.setAttribute('viewBox', `0 0 ${size} ${size}`)
+    this.circleSvg.classList.add('mk-progress__svg')
+
+    this.circleTrack = document.createElementNS('http://www.w3.org/2000/svg', 'circle')
+    this.circleTrack.setAttribute('cx', `${size / 2}`)
+    this.circleTrack.setAttribute('cy', `${size / 2}`)
+    this.circleTrack.setAttribute('r', `${radius}`)
+    this.circleTrack.setAttribute('fill', 'none')
+    this.circleTrack.setAttribute('stroke-width', `${strokeWidth}`)
+    this.circleTrack.classList.add('mk-progress__track-circle')
+
+    this.circlePath = document.createElementNS('http://www.w3.org/2000/svg', 'circle')
+    this.circlePath.setAttribute('cx', `${size / 2}`)
+    this.circlePath.setAttribute('cy', `${size / 2}`)
+    this.circlePath.setAttribute('r', `${radius}`)
+    this.circlePath.setAttribute('fill', 'none')
+    this.circlePath.setAttribute('stroke-width', `${strokeWidth}`)
+    this.circlePath.setAttribute('stroke-linecap', 'round')
+    this.circlePath.style.strokeDasharray = `${dashArray} ${circumference}`
+    this.circlePath.style.strokeDashoffset = `${dashArray}`
+    this.circlePath.style.transformOrigin = '50% 50%'
+
+    if (isDashboard) {
+      this.circleTrack.style.transform = 'rotate(135deg)'
+      this.circleTrack.style.transformOrigin = '50% 50%'
+      this.circlePath.style.transform = 'rotate(135deg)'
+    } else {
+      this.circleTrack.style.transform = 'rotate(-90deg)'
+      this.circleTrack.style.transformOrigin = '50% 50%'
+      this.circlePath.style.transform = 'rotate(-90deg)'
+    }
+
+    this.circlePath.classList.add('mk-progress__path-circle')
+
+    this.circleSvg.appendChild(this.circleTrack)
+    this.circleSvg.appendChild(this.circlePath)
+    this.el.appendChild(this.circleSvg)
+
+    if (this.options.showInfo) {
+      this.textEl = document.createElement('span')
+      this.textEl.className = 'mk-progress__text'
+      this.el.appendChild(this.textEl)
+    }
+  }
+
+  setPercent(percent: number): void {
+    const clamped = Math.max(0, Math.min(100, percent))
+    this.options.percent = clamped
+
+    if (this.options.type === 'line' && this.barEl) {
+      this.barEl.style.width = `${clamped}%`
+      if (this.options.color) {
+        this.barEl.style.background = this.options.color
+      }
+    } else if (this.circlePath && this.circleSvg) {
+      const size = 120
+      const strokeWidth = this.options.strokeWidth || 6
+      const radius = (size - strokeWidth) / 2
+      const circumference = 2 * Math.PI * radius
+      const isDashboard = this.options.type === 'dashboard'
+      const totalLength = isDashboard ? circumference * 0.75 : circumference
+      const offset = totalLength - (clamped / 100) * totalLength
+      this.circlePath.style.strokeDashoffset = `${offset}`
+      if (this.options.color) {
+        this.circlePath.style.stroke = this.options.color
+      }
+    }
+
+    if (this.textEl) {
+      this.textEl.textContent = `${Math.round(clamped)}%`
+    }
+  }
+
+  destroy(): void {
+    this.el.remove()
+  }
+}
+
+export function createProgress(
+  container: HTMLElement | string,
+  options?: ProgressOptions
+): MkProgress {
+  return new MkProgress(container, options)
+}

package/src/components/steps/steps.css

@@ -0,0 +1,127 @@
+.mk-steps {
+  display: flex;
+  width: 100%;
+}
+
+.mk-steps--horizontal {
+  flex-direction: row;
+}
+
+.mk-steps--vertical {
+  flex-direction: column;
+}
+
+.mk-step {
+  position: relative;
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  text-align: center;
+}
+
+.mk-steps--vertical .mk-step {
+  flex-direction: row;
+  align-items: flex-start;
+  text-align: left;
+  padding-bottom: 16px;
+}
+
+.mk-step__head {
+  position: relative;
+  width: 32px;
+  height: 32px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.mk-step__line {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: 100%;
+  height: 1px;
+  background: var(--mk-border);
+  transform: translateY(-50%);
+  z-index: 0;
+}
+
+.mk-step.is-last .mk-step__line {
+  display: none;
+}
+
+.mk-step.is-finish .mk-step__line {
+  background: var(--mk-primary);
+}
+
+.mk-step__icon {
+  position: relative;
+  z-index: 1;
+  width: 28px;
+  height: 28px;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 12px;
+  font-weight: 600;
+  background: var(--mk-surface);
+  border: 2px solid var(--mk-border);
+  color: var(--mk-text-tertiary);
+  transition: var(--mk-transition-colors);
+}
+
+.mk-step.is-process .mk-step__icon {
+  background: var(--mk-primary);
+  border-color: var(--mk-primary);
+  color: #fff;
+  box-shadow: 0 0 0 4px var(--mk-primary-muted);
+}
+
+.mk-step.is-finish .mk-step__icon {
+  background: var(--mk-primary);
+  border-color: var(--mk-primary);
+  color: #fff;
+}
+
+.mk-step.is-error .mk-step__icon {
+  background: var(--mk-danger);
+  border-color: var(--mk-danger);
+  color: #fff;
+}
+
+.mk-step__main {
+  margin-top: 8px;
+}
+
+.mk-steps--vertical .mk-step__main {
+  margin-top: 0;
+  margin-left: 12px;
+}
+
+.mk-step__title {
+  font-size: var(--mk-text-sm);
+  font-weight: var(--mk-font-medium);
+  color: var(--mk-text);
+}
+
+.mk-step.is-wait .mk-step__title {
+  color: var(--mk-text-tertiary);
+}
+
+.mk-step__description {
+  font-size: var(--mk-text-xs);
+  color: var(--mk-text-tertiary);
+  margin-top: 4px;
+}
+
+.mk-steps--small .mk-step__icon {
+  width: 22px;
+  height: 22px;
+  font-size: 10px;
+}
+
+.mk-steps--small .mk-step__title {
+  font-size: var(--mk-text-xs);
+}