@luanlu/mk-motion 1.1.0 → 1.2.1

package/src/components/tabs/tabs.ts

@@ -0,0 +1,211 @@
+import '../../styles/element-plus.css'
+import './tabs.css'
+import { Keys } from '../../a11y/keyboard'
+
+export interface TabItem {
+  label: string
+  content?: string | HTMLElement
+  disabled?: boolean
+}
+
+export interface TabsOptions {
+  type?: 'line' | 'card' | 'pill'
+  items?: TabItem[]
+  activeIndex?: number
+  onChange?: (index: number) => void
+}
+
+let tabsIdCounter = 0
+
+export class MkTabs {
+  el: HTMLDivElement
+  private options: TabsOptions
+  private headerEl: HTMLDivElement
+  private contentEl: HTMLDivElement
+  private indicatorEl: HTMLDivElement | null = null
+  private tabItems: HTMLButtonElement[] = []
+  private panels: HTMLDivElement[] = []
+  private currentIndex: number
+  private tabIdPrefix: string
+
+  constructor(container: HTMLElement | string, options: TabsOptions = {}) {
+    const parent =
+      typeof container === 'string'
+        ? document.querySelector(container)!
+        : container
+
+    this.options = {
+      type: 'line',
+      items: [],
+      activeIndex: 0,
+      ...options,
+    }
+    this.currentIndex = this.options.activeIndex!
+    this.tabIdPrefix = `mk-tabs-${++tabsIdCounter}`
+
+    this.el = document.createElement('div')
+    this.el.className = `mk-tabs mk-tabs--${this.options.type}`
+
+    this.headerEl = document.createElement('div')
+    this.headerEl.className = 'mk-tabs__header'
+    this.headerEl.setAttribute('role', 'tablist')
+    this.el.appendChild(this.headerEl)
+
+    this.contentEl = document.createElement('div')
+    this.contentEl.className = 'mk-tabs__content'
+    this.el.appendChild(this.contentEl)
+
+    if (this.options.type === 'line') {
+      this.indicatorEl = document.createElement('div')
+      this.indicatorEl.className = 'mk-tabs__indicator'
+      this.headerEl.appendChild(this.indicatorEl)
+    }
+
+    this.renderTabs()
+    this.setActive(this.currentIndex, false)
+
+    parent.appendChild(this.el)
+  }
+
+  private renderTabs(): void {
+    this.options.items?.forEach((item, index) => {
+      const panelId = `${this.tabIdPrefix}-panel-${index}`
+      const tabId = `${this.tabIdPrefix}-tab-${index}`
+
+      const tabBtn = document.createElement('button')
+      tabBtn.className = 'mk-tabs__item'
+      tabBtn.type = 'button'
+      tabBtn.textContent = item.label
+      tabBtn.id = tabId
+      tabBtn.setAttribute('role', 'tab')
+      tabBtn.setAttribute('aria-controls', panelId)
+      if (item.disabled) {
+        tabBtn.disabled = true
+        tabBtn.classList.add('is-disabled')
+      }
+      tabBtn.addEventListener('click', () => {
+        if (item.disabled) return
+        this.setActive(index)
+      })
+      this.headerEl.appendChild(tabBtn)
+      this.tabItems.push(tabBtn)
+
+      const panel = document.createElement('div')
+      panel.className = 'mk-tabs__panel'
+      panel.id = panelId
+      panel.setAttribute('role', 'tabpanel')
+      panel.setAttribute('aria-labelledby', tabId)
+      if (item.content) {
+        if (typeof item.content === 'string') {
+          panel.textContent = item.content
+        } else {
+          panel.appendChild(item.content)
+        }
+      }
+      this.contentEl.appendChild(panel)
+      this.panels.push(panel)
+    })
+
+    this.headerEl.addEventListener('keydown', (e) => {
+      if (![Keys.ArrowLeft, Keys.ArrowRight, Keys.Home, Keys.End].includes(e.key as any)) return
+      const tabs = this.tabItems.filter((_, i) => !this.options.items?.[i]?.disabled)
+      const activeTab = this.tabItems[this.currentIndex]
+      let currentIdx = tabs.indexOf(activeTab)
+      if (currentIdx === -1) currentIdx = 0
+
+      let nextIdx = currentIdx
+      switch (e.key) {
+        case Keys.ArrowLeft:
+          e.preventDefault()
+          nextIdx = currentIdx > 0 ? currentIdx - 1 : tabs.length - 1
+          break
+        case Keys.ArrowRight:
+          e.preventDefault()
+          nextIdx = currentIdx < tabs.length - 1 ? currentIdx + 1 : 0
+          break
+        case Keys.Home:
+          e.preventDefault()
+          nextIdx = 0
+          break
+        case Keys.End:
+          e.preventDefault()
+          nextIdx = tabs.length - 1
+          break
+      }
+      const nextTab = tabs[nextIdx]
+      if (nextTab) {
+        const realIndex = this.tabItems.indexOf(nextTab)
+        this.setActive(realIndex)
+        nextTab.focus()
+      }
+    })
+  }
+
+  setActive(index: number, animate = true): void {
+    if (index < 0 || index >= this.tabItems.length) return
+    if (this.options.items?.[index]?.disabled) return
+
+    const prevIndex = this.currentIndex
+    this.currentIndex = index
+
+    this.tabItems.forEach((tab, i) => {
+      const isActive = i === index
+      tab.classList.toggle('is-active', isActive)
+      tab.setAttribute('aria-selected', String(isActive))
+      tab.setAttribute('tabindex', isActive ? '0' : '-1')
+    })
+
+    this.panels.forEach((panel, i) => {
+      const isActive = i === index
+      panel.classList.toggle('is-active', isActive)
+
+      if (isActive) {
+        panel.style.display = 'block'
+        if (animate) {
+          requestAnimationFrame(() => {
+            panel.classList.add('is-entering')
+            requestAnimationFrame(() => {
+              panel.classList.remove('is-entering')
+            })
+          })
+        }
+      } else {
+        panel.style.display = 'none'
+        panel.classList.remove('is-entering')
+      }
+    })
+
+    if (this.indicatorEl) {
+      this.updateIndicator()
+    }
+
+    if (prevIndex !== index) {
+      this.options.onChange?.(index)
+    }
+  }
+
+  private updateIndicator(): void {
+    if (!this.indicatorEl) return
+    const activeTab = this.tabItems[this.currentIndex]
+    if (!activeTab) return
+    const headerRect = this.headerEl.getBoundingClientRect()
+    const tabRect = activeTab.getBoundingClientRect()
+    this.indicatorEl.style.left = `${tabRect.left - headerRect.left + this.headerEl.scrollLeft}px`
+    this.indicatorEl.style.width = `${tabRect.width}px`
+  }
+
+  getActive(): number {
+    return this.currentIndex
+  }
+
+  destroy(): void {
+    this.el.remove()
+  }
+}
+
+export function createTabs(
+  container: HTMLElement | string,
+  options?: TabsOptions
+): MkTabs {
+  return new MkTabs(container, options)
+}

package/src/components/tag/tag.css

@@ -0,0 +1,123 @@
+.mk-tag {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  padding: 0 8px;
+  height: 24px;
+  font-size: var(--mk-text-xs);
+  font-weight: var(--mk-font-medium);
+  line-height: 1;
+  color: var(--mk-text);
+  background: var(--mk-surface-raised);
+  border: 1px solid var(--mk-border);
+  border-radius: var(--mk-radius-sm);
+  white-space: nowrap;
+  user-select: none;
+  transition: var(--mk-transition-all);
+  vertical-align: middle;
+}
+
+.mk-tag.is-round {
+  border-radius: var(--mk-radius-full);
+}
+
+.mk-tag.is-closable {
+  padding-right: 4px;
+}
+
+/* Sizes */
+.mk-tag--small {
+  padding: 0 6px;
+  height: 20px;
+  font-size: 11px;
+}
+.mk-tag--small.is-closable {
+  padding-right: 2px;
+}
+
+.mk-tag--large {
+  padding: 0 12px;
+  height: 32px;
+  font-size: var(--mk-text-sm);
+}
+.mk-tag--large.is-closable {
+  padding-right: 6px;
+}
+
+/* Types */
+.mk-tag--primary {
+  background: var(--mk-primary-soft);
+  border-color: var(--mk-primary);
+  color: var(--mk-primary-hover);
+}
+.mk-tag--success {
+  background: var(--mk-success-soft);
+  border-color: var(--mk-success);
+  color: var(--mk-green-400);
+}
+.mk-tag--warning {
+  background: var(--mk-warning-soft);
+  border-color: var(--mk-warning);
+  color: var(--mk-amber-400);
+}
+.mk-tag--danger {
+  background: var(--mk-danger-soft);
+  border-color: var(--mk-danger);
+  color: var(--mk-red-400);
+}
+.mk-tag--info {
+  background: var(--mk-info-soft);
+  border-color: var(--mk-info);
+  color: var(--mk-sky-400);
+}
+
+/* Plain */
+.mk-tag.is-plain {
+  background: transparent;
+}
+.mk-tag--primary.is-plain {
+  border-color: var(--mk-primary);
+  color: var(--mk-primary-hover);
+}
+.mk-tag--success.is-plain {
+  border-color: var(--mk-success);
+  color: var(--mk-green-400);
+}
+.mk-tag--warning.is-plain {
+  border-color: var(--mk-warning);
+  color: var(--mk-amber-400);
+}
+.mk-tag--danger.is-plain {
+  border-color: var(--mk-danger);
+  color: var(--mk-red-400);
+}
+.mk-tag--info.is-plain {
+  border-color: var(--mk-info);
+  color: var(--mk-sky-400);
+}
+
+/* Close button */
+.mk-tag__close {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 16px;
+  height: 16px;
+  font-size: 14px;
+  line-height: 1;
+  color: inherit;
+  opacity: 0.6;
+  cursor: pointer;
+  border-radius: var(--mk-radius-sm);
+  transition: var(--mk-transition-all);
+}
+.mk-tag__close:hover {
+  opacity: 1;
+  background: rgba(255, 255, 255, 0.1);
+}
+
+/* Closing animation */
+.mk-tag.is-closing {
+  transform: scale(0.85);
+  opacity: 0;
+}

package/src/components/tag/tag.ts

@@ -0,0 +1,112 @@
+import '../../styles/element-plus.css'
+import './tag.css'
+import { withMotion, type MotionOptions } from '../../motion/component-motion.ts'
+import { onKey, Keys } from '../../a11y/keyboard.ts'
+
+export interface TagOptions {
+  type?: 'default' | 'primary' | 'success' | 'warning' | 'danger' | 'info'
+  size?: 'small' | 'default' | 'large'
+  closable?: boolean
+  round?: boolean
+  plain?: boolean
+  text?: string
+  onClose?: () => void
+  motion?: MotionOptions
+}
+
+export class MkTag {
+  el: HTMLSpanElement
+  private options: TagOptions
+  private motion: ReturnType<typeof withMotion> | null = null
+  private _cleanupCloseKey?: () => void
+
+  constructor(container: HTMLElement | string, options: TagOptions = {}) {
+    const parent =
+      typeof container === 'string'
+        ? document.querySelector(container)!
+        : container
+
+    this.options = {
+      type: 'default',
+      size: 'default',
+      ...options,
+    }
+
+    this.el = document.createElement('span')
+    this.el.className = this.buildClass()
+
+    if (this.options.text) {
+      this.el.textContent = this.options.text
+    }
+
+    if (this.options.closable) {
+      const closeBtn = document.createElement('span')
+      closeBtn.className = 'mk-tag__close'
+      closeBtn.innerHTML = '×'
+      closeBtn.setAttribute('role', 'button')
+      closeBtn.setAttribute('tabindex', '0')
+      closeBtn.setAttribute('aria-label', 'Close')
+      closeBtn.addEventListener('click', (e) => {
+        e.stopPropagation()
+        this.close()
+      })
+      this._cleanupCloseKey = onKey(closeBtn, [
+        { key: Keys.Enter, handler: () => this.close() },
+        { key: Keys.Space, handler: () => this.close() },
+      ])
+      this.el.appendChild(closeBtn)
+    }
+
+    parent.appendChild(this.el)
+
+    this.motion = withMotion(this.el, options.motion || { hover: 'scale', enter: 'zoomIn', duration: 200 })
+  }
+
+  private buildClass(): string {
+    const classes = ['mk-tag']
+    if (this.options.type && this.options.type !== 'default') {
+      classes.push(`mk-tag--${this.options.type}`)
+    }
+    if (this.options.size && this.options.size !== 'default') {
+      classes.push(`mk-tag--${this.options.size}`)
+    }
+    if (this.options.plain) classes.push('is-plain')
+    if (this.options.round) classes.push('is-round')
+    if (this.options.closable) classes.push('is-closable')
+    return classes.join(' ')
+  }
+
+  setText(text: string): void {
+    this.options.text = text
+    if (this.options.closable) {
+      const closeBtn = this.el.querySelector('.mk-tag__close')
+      this.el.childNodes.forEach((node) => {
+        if (node !== closeBtn) node.remove()
+      })
+      this.el.insertBefore(document.createTextNode(text), closeBtn)
+    } else {
+      this.el.textContent = text
+    }
+  }
+
+  private close(): void {
+    this.el.style.pointerEvents = 'none'
+    this.motion?.playExit().then(() => {
+      this.destroy()
+    })
+    this.options.onClose?.()
+  }
+
+  destroy(): void {
+    this._cleanupCloseKey?.()
+    this.motion?.destroy()
+    this.el.remove()
+  }
+}
+
+export function createTag(
+  container: HTMLElement | string,
+  options?: TagOptions
+): MkTag {
+  return new MkTag(container, options)
+}

package/src/components/tooltip/tooltip.css

@@ -0,0 +1,66 @@
+.mk-tooltip {
+  display: none;
+  pointer-events: 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-md));
+  max-width: 280px;
+}
+
+.mk-tooltip.is-visible {
+  opacity: 1;
+  transform: scale(1) translateY(0);
+}
+
+.mk-tooltip__content {
+  padding: 6px 10px;
+  font-size: var(--mk-text-xs);
+  font-weight: var(--mk-font-medium);
+  line-height: var(--mk-leading-snug);
+  color: var(--mk-text);
+  background: var(--mk-surface-raised);
+  border: 1px solid var(--mk-border-hover);
+  border-radius: var(--mk-radius-md);
+}
+
+.mk-tooltip__arrow {
+  position: absolute;
+  width: 8px;
+  height: 8px;
+  background: var(--mk-surface-raised);
+  border: 1px solid var(--mk-border-hover);
+}
+
+.mk-tooltip__arrow.is-top {
+  top: -4px;
+  left: 50%;
+  transform: translateX(-50%) rotate(45deg);
+  border-right: none;
+  border-bottom: none;
+}
+
+.mk-tooltip__arrow.is-bottom {
+  bottom: -4px;
+  left: 50%;
+  transform: translateX(-50%) rotate(45deg);
+  border-left: none;
+  border-top: none;
+}
+
+.mk-tooltip__arrow.is-left {
+  left: -4px;
+  top: 50%;
+  transform: translateY(-50%) rotate(45deg);
+  border-right: none;
+  border-top: none;
+}
+
+.mk-tooltip__arrow.is-right {
+  right: -4px;
+  top: 50%;
+  transform: translateY(-50%) rotate(45deg);
+  border-left: none;
+  border-bottom: none;
+}

package/src/components/tooltip/tooltip.ts

@@ -0,0 +1,185 @@
+import '../../styles/element-plus.css'
+import './tooltip.css'
+
+export interface TooltipOptions {
+  content?: string | HTMLElement
+  placement?: 'top' | 'bottom' | 'left' | 'right'
+  delay?: number
+  offset?: number
+}
+
+let tooltipEl: HTMLDivElement | null = null
+let arrowEl: HTMLDivElement | null = null
+let contentEl: HTMLDivElement | null = null
+let showTimer: ReturnType<typeof setTimeout> | null = null
+let hideTimer: ReturnType<typeof setTimeout> | null = null
+let activeTarget: HTMLElement | null = null
+const TOOLTIP_ID = 'mk-tooltip'
+
+function getTooltip(): HTMLDivElement {
+  if (!tooltipEl) {
+    tooltipEl = document.createElement('div')
+    tooltipEl.className = 'mk-tooltip'
+    tooltipEl.id = TOOLTIP_ID
+    tooltipEl.setAttribute('role', 'tooltip')
+    tooltipEl.style.position = 'absolute'
+    tooltipEl.style.zIndex = 'var(--mk-z-tooltip)'
+
+    arrowEl = document.createElement('div')
+    arrowEl.className = 'mk-tooltip__arrow'
+    tooltipEl.appendChild(arrowEl)
+
+    contentEl = document.createElement('div')
+    contentEl.className = 'mk-tooltip__content'
+    tooltipEl.appendChild(contentEl)
+
+    document.body.appendChild(tooltipEl)
+  }
+  return tooltipEl
+}
+
+function setTooltipContent(content: string | HTMLElement): void {
+  const tip = getTooltip()
+  const c = tip.querySelector('.mk-tooltip__content') as HTMLDivElement
+  c.innerHTML = ''
+  if (typeof content === 'string') {
+    c.textContent = content
+  } else {
+    c.appendChild(content)
+  }
+}
+
+function positionTooltip(target: HTMLElement, placement: string, offset: number): void {
+  const tip = getTooltip()
+  const arrow = tip.querySelector('.mk-tooltip__arrow') as HTMLDivElement
+  const rect = target.getBoundingClientRect()
+  const tipRect = tip.getBoundingClientRect()
+  const scrollX = window.scrollX
+  const scrollY = window.scrollY
+
+  let top = 0
+  let left = 0
+  let arrowClass = ''
+
+  switch (placement) {
+    case 'top':
+      top = rect.top + scrollY - tipRect.height - offset
+      left = rect.left + scrollX + rect.width / 2 - tipRect.width / 2
+      arrowClass = 'is-bottom'
+      break
+    case 'bottom':
+      top = rect.bottom + scrollY + offset
+      left = rect.left + scrollX + rect.width / 2 - tipRect.width / 2
+      arrowClass = 'is-top'
+      break
+    case 'left':
+      top = rect.top + scrollY + rect.height / 2 - tipRect.height / 2
+      left = rect.left + scrollX - tipRect.width - offset
+      arrowClass = 'is-right'
+      break
+    case 'right':
+      top = rect.top + scrollY + rect.height / 2 - tipRect.height / 2
+      left = rect.right + scrollX + offset
+      arrowClass = 'is-left'
+      break
+    default:
+      top = rect.top + scrollY - tipRect.height - offset
+      left = rect.left + scrollX + rect.width / 2 - tipRect.width / 2
+      arrowClass = 'is-bottom'
+  }
+
+  // Viewport boundary adjustments
+  const padding = 8
+  if (left < padding) left = padding
+  if (left + tipRect.width > window.innerWidth - padding) {
+    left = window.innerWidth - tipRect.width - padding
+  }
+  if (top < padding) top = padding
+
+  tip.style.top = `${top}px`
+  tip.style.left = `${left}px`
+
+  arrow.className = `mk-tooltip__arrow ${arrowClass}`
+}
+
+function showTooltip(target: HTMLElement, options: Required<TooltipOptions>): void {
+  if (hideTimer) {
+    clearTimeout(hideTimer)
+    hideTimer = null
+  }
+
+  activeTarget = target
+  target.setAttribute('aria-describedby', TOOLTIP_ID)
+  setTooltipContent(options.content)
+
+  const tip = getTooltip()
+  tip.classList.remove('is-visible')
+
+  // Force layout to measure before positioning
+  tip.style.visibility = 'hidden'
+  tip.style.display = 'block'
+
+  requestAnimationFrame(() => {
+    if (activeTarget !== target) return
+    positionTooltip(target, options.placement, options.offset)
+    tip.style.visibility = 'visible'
+    tip.classList.add('is-visible')
+  })
+}
+
+function hideTooltip(): void {
+  if (!tooltipEl) return
+  tooltipEl.classList.remove('is-visible')
+  hideTimer = setTimeout(() => {
+    if (!tooltipEl?.classList.contains('is-visible')) {
+      tooltipEl!.style.display = 'none'
+    }
+  }, 200)
+  if (activeTarget) {
+    activeTarget.removeAttribute('aria-describedby')
+  }
+  activeTarget = null
+}
+
+export function createTooltip(
+  target: HTMLElement,
+  options: TooltipOptions = {}
+): () => void {
+  const opts: Required<TooltipOptions> = {
+    content: '',
+    placement: 'top',
+    delay: 150,
+    offset: 8,
+    ...options,
+  }
+
+  const onEnter = () => {
+    if (showTimer) clearTimeout(showTimer)
+    showTimer = setTimeout(() => {
+      showTooltip(target, opts)
+    }, opts.delay)
+  }
+
+  const onLeave = () => {
+    if (showTimer) {
+      clearTimeout(showTimer)
+      showTimer = null
+    }
+    hideTooltip()
+  }
+
+  target.addEventListener('mouseenter', onEnter)
+  target.addEventListener('mouseleave', onLeave)
+  target.addEventListener('focus', onEnter)
+  target.addEventListener('blur', onLeave)
+
+  return () => {
+    target.removeEventListener('mouseenter', onEnter)
+    target.removeEventListener('mouseleave', onLeave)
+    target.removeEventListener('focus', onEnter)
+    target.removeEventListener('blur', onLeave)
+    if (activeTarget === target) {
+      hideTooltip()
+    }
+  }
+}