@luanlu/mk-motion 1.1.0 → 1.2.1

package/src/components/form/slider.ts

@@ -0,0 +1,148 @@
+import './slider.css'
+import { onKey, Keys } from '../../a11y/keyboard.ts'
+
+export interface SliderOptions {
+  min?: number
+  max?: number
+  step?: number
+  value?: number
+  showValue?: boolean
+  onChange?: (value: number) => void
+}
+
+export class MkSlider {
+  el: HTMLDivElement
+  private track: HTMLDivElement
+  private fill: HTMLDivElement
+  private thumb: HTMLDivElement
+  private valueEl?: HTMLDivElement
+  private options: Required<Omit<SliderOptions, 'onChange'>> & Pick<SliderOptions, 'onChange'>
+  private _value: number
+  private dragging = false
+  private _cleanupKey?: () => void
+
+  constructor(container: HTMLElement | string, options: SliderOptions = {}) {
+    const parent =
+      typeof container === 'string'
+        ? document.querySelector(container)!
+        : container
+
+    this.options = {
+      min: 0,
+      max: 100,
+      step: 1,
+      value: 0,
+      showValue: true,
+      ...options,
+    }
+    this._value = this.options.value
+
+    this.el = document.createElement('div')
+    this.el.className = 'mk-slider'
+
+    this.track = document.createElement('div')
+    this.track.className = 'mk-slider__track'
+
+    this.fill = document.createElement('div')
+    this.fill.className = 'mk-slider__fill'
+    this.track.appendChild(this.fill)
+
+    this.thumb = document.createElement('div')
+    this.thumb.className = 'mk-slider__thumb'
+    this.thumb.setAttribute('role', 'slider')
+    this.thumb.setAttribute('tabindex', '0')
+    this.track.appendChild(this.thumb)
+
+    this.el.appendChild(this.track)
+
+    if (this.options.showValue) {
+      this.valueEl = document.createElement('div')
+      this.valueEl.className = 'mk-slider__value'
+      this.el.appendChild(this.valueEl)
+    }
+
+    this.updateUI()
+
+    this._cleanupKey = onKey(this.thumb, [
+      { key: Keys.ArrowLeft, handler: () => this.adjustValue(-this.options.step) },
+      { key: Keys.ArrowRight, handler: () => this.adjustValue(this.options.step) },
+      { key: Keys.Home, handler: () => { this.value = this.options.min } },
+      { key: Keys.End, handler: () => { this.value = this.options.max } },
+    ])
+
+    this.track.addEventListener('mousedown', (e) => this.onStart(e.clientX))
+    this.thumb.addEventListener('mousedown', (e) => {
+      e.stopPropagation()
+      this.onStart(e.clientX)
+    })
+
+    document.addEventListener('mousemove', (e) => this.onMove(e.clientX))
+    document.addEventListener('mouseup', () => this.onEnd())
+
+    // Touch
+    this.track.addEventListener('touchstart', (e) => this.onStart(e.touches[0].clientX), { passive: true })
+    document.addEventListener('touchmove', (e) => this.onMove(e.touches[0].clientX), { passive: true })
+    document.addEventListener('touchend', () => this.onEnd())
+
+    parent.appendChild(this.el)
+  }
+
+  private onStart(clientX: number): void {
+    this.dragging = true
+    this.updateFromPosition(clientX)
+  }
+
+  private onMove(clientX: number): void {
+    if (!this.dragging) return
+    this.updateFromPosition(clientX)
+  }
+
+  private onEnd(): void {
+    this.dragging = false
+  }
+
+  private updateFromPosition(clientX: number): void {
+    const rect = this.track.getBoundingClientRect()
+    const percent = Math.max(0, Math.min(1, (clientX - rect.left) / rect.width))
+    const raw = this.options.min + percent * (this.options.max - this.options.min)
+    const stepped = Math.round(raw / this.options.step) * this.options.step
+    this.value = Math.max(this.options.min, Math.min(this.options.max, stepped))
+  }
+
+  get value(): number {
+    return this._value
+  }
+
+  set value(v: number) {
+    if (this._value !== v) {
+      this._value = v
+      this.updateUI()
+      this.options.onChange?.(v)
+    }
+  }
+
+  private updateUI(): void {
+    const percent = (this._value - this.options.min) / (this.options.max - this.options.min)
+    this.fill.style.width = `${percent * 100}%`
+    this.thumb.style.left = `${percent * 100}%`
+    if (this.valueEl) {
+      this.valueEl.textContent = String(this._value)
+    }
+    this.updateAria()
+  }
+
+  private updateAria(): void {
+    this.thumb.setAttribute('aria-valuenow', String(this._value))
+    this.thumb.setAttribute('aria-valuemin', String(this.options.min))
+    this.thumb.setAttribute('aria-valuemax', String(this.options.max))
+  }
+
+  private adjustValue(delta: number): void {
+    this.value = Math.max(this.options.min, Math.min(this.options.max, this._value + delta))
+  }
+
+  destroy(): void {
+    this._cleanupKey?.()
+    this.el.remove()
+  }
+}

package/src/components/input/input.css

@@ -0,0 +1,92 @@
+.mk-input-wrapper {
+  position: relative;
+  display: inline-flex;
+  width: 100%;
+  max-width: 320px;
+  align-items: center;
+}
+
+.mk-input {
+  width: 100%;
+  height: 36px;
+  padding: 0 12px;
+  font-size: 13px;
+  color: var(--mk-text);
+  background: var(--mk-surface);
+  border: 1px solid var(--mk-border);
+  border-radius: var(--mk-radius);
+  outline: none;
+  transition: var(--mk-transition);
+}
+
+.mk-input::placeholder { color: var(--mk-text-tertiary); }
+
+.mk-input:hover {
+  border-color: var(--mk-border-hover);
+}
+
+.mk-input:focus {
+  border-color: var(--mk-primary);
+}
+
+/* Error */
+.mk-input-wrapper.is-error .mk-input {
+  border-color: var(--mk-danger);
+  animation: mk-input-shake 0.3s ease;
+}
+
+.mk-input-wrapper.is-success .mk-input {
+  border-color: var(--mk-success);
+}
+
+.mk-input__suffix {
+  position: absolute;
+  right: 10px;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  color: var(--mk-text-tertiary);
+}
+
+.mk-input__suffix-item {
+  cursor: pointer;
+  font-size: 13px;
+  width: 20px; height: 20px;
+  display: flex; align-items: center; justify-content: center;
+  border-radius: 4px;
+  transition: var(--mk-transition);
+}
+.mk-input__suffix-item:hover {
+  color: var(--mk-text);
+  background: var(--mk-surface-hover);
+}
+
+.mk-input__clear {
+  opacity: 0;
+  transition: opacity 0.2s;
+}
+.mk-input-wrapper:hover .mk-input__clear,
+.mk-input:focus ~ .mk-input__suffix .mk-input__clear {
+  opacity: 1;
+}
+
+.mk-input__errormsg {
+  position: absolute;
+  bottom: -20px;
+  left: 0;
+  font-size: 12px;
+  color: var(--mk-danger);
+  opacity: 0;
+  transform: translateY(-2px);
+  transition: var(--mk-transition);
+}
+.mk-input__errormsg.show {
+  opacity: 1;
+  transform: translateY(0);
+}
+
+@keyframes mk-input-shake {
+  0%, 100% { transform: translateX(0); }
+  25% { transform: translateX(-4px); }
+  75% { transform: translateX(4px); }
+}

package/src/components/input/input.ts

@@ -0,0 +1,162 @@
+import './input.css'
+import { withMotion, type MotionOptions } from '../../motion/component-motion.ts'
+
+export interface InputOptions {
+  placeholder?: string
+  type?: string
+  value?: string
+  disabled?: boolean
+  clearable?: boolean
+  showPassword?: boolean
+  validate?: (value: string) => string | null
+  onInput?: (value: string) => void
+  onEnter?: (value: string) => void
+  motion?: MotionOptions
+}
+
+export class MkInput {
+  el: HTMLDivElement
+  input: HTMLInputElement
+  private options: InputOptions
+  private errorMsg: HTMLSpanElement
+  private motion: ReturnType<typeof withMotion> | null = null
+
+  constructor(container: HTMLElement | string, options: InputOptions = {}) {
+    const parent =
+      typeof container === 'string'
+        ? document.querySelector(container)!
+        : container
+
+    this.options = { ...options }
+
+    this.el = document.createElement('div')
+    this.el.className = 'mk-input-wrapper'
+
+    const inputId = `mk-input-${Math.random().toString(36).slice(2)}`
+
+    this.input = document.createElement('input')
+    this.input.className = 'mk-input'
+    this.input.id = inputId
+    this.input.type = this.options.type || 'text'
+    this.input.placeholder = this.options.placeholder || ''
+    this.input.value = this.options.value || ''
+    this.input.disabled = !!this.options.disabled
+
+    this.el.appendChild(this.input)
+
+    const suffix = document.createElement('span')
+    suffix.className = 'mk-input__suffix'
+
+    if (this.options.clearable) {
+      const clear = document.createElement('span')
+      clear.className = 'mk-input__suffix-item mk-input__clear'
+      clear.innerHTML = '✕'
+      clear.addEventListener('click', () => {
+        this.input.value = ''
+        this.input.focus()
+        this.options.onInput?.('')
+        this.clearError()
+      })
+      suffix.appendChild(clear)
+    }
+
+    if (this.options.showPassword && this.input.type === 'password') {
+      const eye = document.createElement('span')
+      eye.className = 'mk-input__suffix-item'
+      eye.innerHTML = '👁'
+      eye.title = '显示密码'
+      let showing = false
+      eye.addEventListener('click', () => {
+        showing = !showing
+        this.input.type = showing ? 'text' : 'password'
+        eye.innerHTML = showing ? '🙈' : '👁'
+      })
+      suffix.appendChild(eye)
+    }
+
+    if (suffix.children.length > 0) {
+      this.el.appendChild(suffix)
+    }
+
+    this.errorMsg = document.createElement('span')
+    this.errorMsg.className = 'mk-input__errormsg'
+    this.errorMsg.id = `${inputId}-error`
+    this.el.appendChild(this.errorMsg)
+
+    this.input.addEventListener('input', () => {
+      this.options.onInput?.(this.input.value)
+      this.clearError()
+    })
+
+    this.input.addEventListener('keydown', (e) => {
+      if (e.key === 'Enter') {
+        this.options.onEnter?.(this.input.value)
+      }
+    })
+
+    this.input.addEventListener('blur', () => {
+      this.validate()
+    })
+
+    parent.appendChild(this.el)
+
+    this.motion = withMotion(this.input, options.motion || { focus: 'ring', enter: 'fadeIn', duration: 200 })
+  }
+
+  get value(): string {
+    return this.input.value
+  }
+
+  set value(v: string) {
+    this.input.value = v
+  }
+
+  validate(): boolean {
+    if (!this.options.validate) return true
+    const error = this.options.validate(this.input.value)
+    if (error) {
+      this.showError(error)
+      return false
+    }
+    this.clearError()
+    return true
+  }
+
+  showError(msg: string): void {
+    this.el.classList.add('is-error')
+    this.el.classList.remove('is-success')
+    this.errorMsg.textContent = msg
+    this.errorMsg.classList.add('show')
+    this.input.setAttribute('aria-invalid', 'true')
+    this.input.setAttribute('aria-describedby', this.errorMsg.id)
+  }
+
+  showSuccess(): void {
+    this.el.classList.remove('is-error')
+    this.el.classList.add('is-success')
+    this.errorMsg.classList.remove('show')
+  }
+
+  clearError(): void {
+    this.el.classList.remove('is-error')
+    this.errorMsg.classList.remove('show')
+    this.input.removeAttribute('aria-invalid')
+    this.input.removeAttribute('aria-describedby')
+  }
+
+  focus(): void {
+    this.input.focus()
+  }
+
+  destroy(): void {
+    this.motion?.destroy()
+    this.el.remove()
+  }
+}
+
+export function createInput(
+  container: HTMLElement | string,
+  options?: InputOptions
+): MkInput {
+  return new MkInput(container, options)
+}

package/src/components/layout/divider.css

@@ -0,0 +1,32 @@
+.mk-divider {
+  display: flex;
+  align-items: center;
+  color: var(--mk-text-tertiary);
+  font-size: 13px;
+  margin: 16px 0;
+}
+
+.mk-divider::before,
+.mk-divider::after {
+  content: '';
+  flex: 1;
+  height: 1px;
+  background: var(--mk-border);
+}
+
+.mk-divider--horizontal::before { margin-right: 12px; }
+.mk-divider--horizontal::after { margin-left: 12px; }
+
+.mk-divider--vertical {
+  display: inline-block;
+  width: 1px;
+  height: 1em;
+  background: var(--mk-border);
+  margin: 0 8px;
+  vertical-align: middle;
+}
+
+.mk-divider--dashed::before,
+.mk-divider--dashed::after {
+  background: repeating-linear-gradient(90deg, var(--mk-border), var(--mk-border) 4px, transparent 4px, transparent 8px);
+}

package/src/components/layout/divider.ts

@@ -0,0 +1,42 @@
+import './divider.css'
+
+export interface DividerOptions {
+  text?: string
+  direction?: 'horizontal' | 'vertical'
+  dashed?: boolean
+}
+
+export class MkDivider {
+  el: HTMLDivElement
+
+  constructor(container: HTMLElement | string, options: DividerOptions = {}) {
+    const parent =
+      typeof container === 'string'
+        ? document.querySelector(container)!
+        : container
+
+    this.el = document.createElement('div')
+    this.el.className = 'mk-divider'
+
+    if (options.direction === 'vertical') {
+      this.el.classList.add('mk-divider--vertical')
+    } else {
+      this.el.classList.add('mk-divider--horizontal')
+    }
+    if (options.dashed) this.el.classList.add('mk-divider--dashed')
+    if (options.text) this.el.textContent = options.text
+
+    parent.appendChild(this.el)
+  }
+
+  destroy(): void {
+    this.el.remove()
+  }
+}
+
+export function createDivider(
+  container: HTMLElement | string,
+  options?: DividerOptions
+): MkDivider {
+  return new MkDivider(container, options)
+}

package/src/components/layout/row.css

@@ -0,0 +1,64 @@
+.mk-row {
+  display: flex;
+  flex-wrap: wrap;
+  margin: 0 -8px;
+}
+
+.mk-row--no-wrap { flex-wrap: nowrap; }
+.mk-row--justify-start { justify-content: flex-start; }
+.mk-row--justify-center { justify-content: center; }
+.mk-row--justify-end { justify-content: flex-end; }
+.mk-row--justify-space-between { justify-content: space-between; }
+.mk-row--justify-space-around { justify-content: space-around; }
+.mk-row--align-top { align-items: flex-start; }
+.mk-row--align-middle { align-items: center; }
+.mk-row--align-bottom { align-items: flex-end; }
+
+.mk-col {
+  padding: 0 8px;
+  flex: 0 0 auto;
+}
+
+.mk-col--flex { flex: 1; }
+
+/* 24-column grid */
+.mk-col-1 { flex: 0 0 4.1667%; }
+.mk-col-2 { flex: 0 0 8.3333%; }
+.mk-col-3 { flex: 0 0 12.5%; }
+.mk-col-4 { flex: 0 0 16.6667%; }
+.mk-col-5 { flex: 0 0 20.8333%; }
+.mk-col-6 { flex: 0 0 25%; }
+.mk-col-7 { flex: 0 0 29.1667%; }
+.mk-col-8 { flex: 0 0 33.3333%; }
+.mk-col-9 { flex: 0 0 37.5%; }
+.mk-col-10 { flex: 0 0 41.6667%; }
+.mk-col-11 { flex: 0 0 45.8333%; }
+.mk-col-12 { flex: 0 0 50%; }
+.mk-col-13 { flex: 0 0 54.1667%; }
+.mk-col-14 { flex: 0 0 58.3333%; }
+.mk-col-15 { flex: 0 0 62.5%; }
+.mk-col-16 { flex: 0 0 66.6667%; }
+.mk-col-17 { flex: 0 0 70.8333%; }
+.mk-col-18 { flex: 0 0 75%; }
+.mk-col-19 { flex: 0 0 79.1667%; }
+.mk-col-20 { flex: 0 0 83.3333%; }
+.mk-col-21 { flex: 0 0 87.5%; }
+.mk-col-22 { flex: 0 0 91.6667%; }
+.mk-col-23 { flex: 0 0 95.8333%; }
+.mk-col-24 { flex: 0 0 100%; }
+
+/* Responsive - md (768px) */
+@media (min-width: 768px) {
+  .mk-col-md-6 { flex: 0 0 25%; }
+  .mk-col-md-8 { flex: 0 0 33.3333%; }
+  .mk-col-md-12 { flex: 0 0 50%; }
+  .mk-col-md-24 { flex: 0 0 100%; }
+}
+
+/* Responsive - lg (1024px) */
+@media (min-width: 1024px) {
+  .mk-col-lg-6 { flex: 0 0 25%; }
+  .mk-col-lg-8 { flex: 0 0 33.3333%; }
+  .mk-col-lg-12 { flex: 0 0 50%; }
+  .mk-col-lg-24 { flex: 0 0 100%; }
+}

package/src/components/layout/row.ts

@@ -0,0 +1,57 @@
+import './row.css'
+
+export interface RowOptions {
+  gutter?: number
+  justify?: 'start' | 'center' | 'end' | 'space-between' | 'space-around'
+  align?: 'top' | 'middle' | 'bottom'
+  wrap?: boolean
+}
+
+export class MkRow {
+  el: HTMLDivElement
+
+  constructor(container: HTMLElement | string, options: RowOptions = {}) {
+    const parent =
+      typeof container === 'string'
+        ? document.querySelector(container)!
+        : container
+
+    this.el = document.createElement('div')
+    this.el.className = 'mk-row'
+
+    if (options.justify) this.el.classList.add(`mk-row--justify-${options.justify}`)
+    if (options.align) this.el.classList.add(`mk-row--align-${options.align}`)
+    if (options.wrap === false) this.el.classList.add('mk-row--no-wrap')
+    if (options.gutter) {
+      this.el.style.margin = `0 -${options.gutter / 2}px`
+    }
+
+    parent.appendChild(this.el)
+  }
+
+  addCol(span: number | 'flex', content?: string | HTMLElement, className?: string): HTMLDivElement {
+    const col = document.createElement('div')
+    col.className = `mk-col mk-col-${span === 'flex' ? 'flex' : span}`
+    if (className) col.classList.add(className)
+
+    if (typeof content === 'string') {
+      col.innerHTML = content
+    } else if (content) {
+      col.appendChild(content)
+    }
+
+    this.el.appendChild(col)
+    return col
+  }
+
+  destroy(): void {
+    this.el.remove()
+  }
+}
+
+export function createRow(
+  container: HTMLElement | string,
+  options?: RowOptions
+): MkRow {
+  return new MkRow(container, options)
+}

package/src/components/layout/space.css

@@ -0,0 +1,14 @@
+.mk-space {
+  display: inline-flex;
+  align-items: center;
+  flex-wrap: wrap;
+}
+
+.mk-space--vertical { flex-direction: column; }
+
+.mk-space--small { gap: 4px; }
+.mk-space--default { gap: 8px; }
+.mk-space--large { gap: 16px; }
+
+.mk-space--wrap { flex-wrap: wrap; }
+.mk-space--nowrap { flex-wrap: nowrap; }

package/src/components/layout/space.ts

@@ -0,0 +1,48 @@
+import './space.css'
+
+export interface SpaceOptions {
+  direction?: 'horizontal' | 'vertical'
+  size?: 'small' | 'default' | 'large'
+  wrap?: boolean
+}
+
+export class MkSpace {
+  el: HTMLDivElement
+
+  constructor(container: HTMLElement | string, options: SpaceOptions = {}) {
+    const parent =
+      typeof container === 'string'
+        ? document.querySelector(container)!
+        : container
+
+    this.el = document.createElement('div')
+    this.el.className = 'mk-space'
+
+    if (options.direction === 'vertical') this.el.classList.add('mk-space--vertical')
+    if (options.size) this.el.classList.add(`mk-space--${options.size}`)
+    if (options.wrap !== false) this.el.classList.add('mk-space--wrap')
+
+    parent.appendChild(this.el)
+  }
+
+  add(content: string | HTMLElement): void {
+    if (typeof content === 'string') {
+      const span = document.createElement('span')
+      span.innerHTML = content
+      this.el.appendChild(span)
+    } else {
+      this.el.appendChild(content)
+    }
+  }
+
+  destroy(): void {
+    this.el.remove()
+  }
+}
+
+export function createSpace(
+  container: HTMLElement | string,
+  options?: SpaceOptions
+): MkSpace {
+  return new MkSpace(container, options)
+}

package/src/components/loading/loading.css

@@ -0,0 +1,37 @@
+.mk-loading-mask {
+  position: absolute;
+  inset: 0;
+  background: rgba(9, 9, 11, 0.8);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 100;
+  border-radius: inherit;
+  flex-direction: column;
+  gap: 10px;
+}
+
+.mk-loading-mask.is-fullscreen {
+  position: fixed;
+  background: rgba(9, 9, 11, 0.85);
+  z-index: 9999;
+  border-radius: 0;
+}
+
+.mk-loading__spinner {
+  width: 32px;
+  height: 32px;
+  border: 2px solid var(--mk-border);
+  border-top-color: var(--mk-primary);
+  border-radius: 50%;
+  animation: mk-spin 0.7s linear infinite;
+}
+
+.mk-loading__text {
+  font-size: 13px;
+  color: var(--mk-text-secondary);
+}
+
+@keyframes mk-spin {
+  to { transform: rotate(360deg); }
+}