@luanlu/mk-motion 1.2.0 → 1.2.1

package/src/components/form/checkbox.ts

@@ -0,0 +1,119 @@
+import './checkbox.css'
+import { onKey, Keys } from '../../a11y/keyboard.ts'
+
+export interface CheckboxOptions {
+  label?: string
+  checked?: boolean
+  disabled?: boolean
+  onChange?: (checked: boolean) => void
+}
+
+export class MkCheckbox {
+  el: HTMLLabelElement
+  private options: CheckboxOptions
+  private _checked: boolean
+  private _cleanupKey?: () => void
+
+  constructor(container: HTMLElement | string, options: CheckboxOptions = {}) {
+    const parent =
+      typeof container === 'string'
+        ? document.querySelector(container)!
+        : container
+
+    this.options = { checked: false, ...options }
+    this._checked = this.options.checked!
+
+    this.el = document.createElement('label')
+    this.el.className = 'mk-checkbox'
+    if (this._checked) this.el.classList.add('is-checked')
+    if (this.options.disabled) this.el.classList.add('is-disabled')
+    this.el.setAttribute('role', 'checkbox')
+    this.el.setAttribute('aria-checked', String(this._checked))
+    if (!this.options.disabled) {
+      this.el.setAttribute('tabindex', '0')
+    }
+
+    const box = document.createElement('span')
+    box.className = 'mk-checkbox__input'
+    const check = document.createElement('span')
+    check.className = 'mk-checkbox__check'
+    check.textContent = '✓'
+    box.appendChild(check)
+    this.el.appendChild(box)
+
+    if (this.options.label) {
+      const text = document.createElement('span')
+      text.textContent = this.options.label
+      this.el.appendChild(text)
+    }
+
+    this.el.addEventListener('click', () => {
+      if (this.options.disabled) return
+      this.toggle()
+    })
+
+    this._cleanupKey = onKey(this.el, [
+      { key: Keys.Space, handler: () => this.toggle() },
+    ])
+
+    parent.appendChild(this.el)
+  }
+
+  get checked(): boolean {
+    return this._checked
+  }
+
+  set checked(v: boolean) {
+    this._checked = v
+    this.el.classList.toggle('is-checked', v)
+    this.el.setAttribute('aria-checked', String(v))
+    this.options.onChange?.(v)
+  }
+
+  toggle(): void {
+    this.checked = !this._checked
+  }
+
+  destroy(): void {
+    this._cleanupKey?.()
+    this.el.remove()
+  }
+}
+
+export function createCheckbox(
+  container: HTMLElement | string,
+  options?: CheckboxOptions
+): MkCheckbox {
+  return new MkCheckbox(container, options)
+}
+
+/* ===== Checkbox Group ===== */
+export class MkCheckboxGroup {
+  el: HTMLDivElement
+  private checkboxes: MkCheckbox[] = []
+
+  constructor(container: HTMLElement | string) {
+    const parent =
+      typeof container === 'string'
+        ? document.querySelector(container)!
+        : container
+
+    this.el = document.createElement('div')
+    this.el.className = 'mk-checkbox-group'
+    parent.appendChild(this.el)
+  }
+
+  add(options: CheckboxOptions): MkCheckbox {
+    const cb = new MkCheckbox(this.el, options)
+    this.checkboxes.push(cb)
+    return cb
+  }
+
+  getValues(): boolean[] {
+    return this.checkboxes.map((cb) => cb.checked)
+  }
+
+  destroy(): void {
+    this.el.remove()
+  }
+}

package/src/components/form/radio.css

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

package/src/components/form/radio.ts

@@ -0,0 +1,153 @@
+import './radio.css'
+import { onKey, Keys } from '../../a11y/keyboard.ts'
+
+export interface RadioOptions {
+  label?: string
+  value: string | number
+  checked?: boolean
+  disabled?: boolean
+  onChange?: (value: string | number) => void
+}
+
+export class MkRadio {
+  el: HTMLLabelElement
+  private options: RadioOptions
+  private _checked: boolean
+
+  constructor(container: HTMLElement | string, options: RadioOptions) {
+    const parent =
+      typeof container === 'string'
+        ? document.querySelector(container)!
+        : container
+
+    this.options = { checked: false, ...options }
+    this._checked = this.options.checked!
+
+    this.el = document.createElement('label')
+    this.el.className = 'mk-radio'
+    if (this._checked) this.el.classList.add('is-checked')
+    if (this.options.disabled) this.el.classList.add('is-disabled')
+    this.el.setAttribute('role', 'radio')
+    this.el.setAttribute('aria-checked', String(this._checked))
+
+    const box = document.createElement('span')
+    box.className = 'mk-radio__input'
+    const dot = document.createElement('span')
+    dot.className = 'mk-radio__dot'
+    box.appendChild(dot)
+    this.el.appendChild(box)
+
+    if (this.options.label) {
+      const text = document.createElement('span')
+      text.textContent = this.options.label
+      this.el.appendChild(text)
+    }
+
+    this.el.addEventListener('click', () => {
+      if (this.options.disabled) return
+      this.options.onChange?.(this.options.value)
+    })
+
+    parent.appendChild(this.el)
+  }
+
+  setChecked(checked: boolean): void {
+    this._checked = checked
+    this.el.classList.toggle('is-checked', checked)
+    this.el.setAttribute('aria-checked', String(checked))
+  }
+
+  getValue(): string | number {
+    return this.options.value
+  }
+
+  destroy(): void {
+    this.el.remove()
+  }
+}
+
+/* ===== Radio Group ===== */
+export class MkRadioGroup {
+  el: HTMLDivElement
+  private radios: MkRadio[] = []
+  private _value: string | number | undefined
+  private _cleanupKey?: () => void
+
+  constructor(
+    container: HTMLElement | string,
+    options: { value?: string | number; onChange?: (value: string | number) => void } = {}
+  ) {
+    const parent =
+      typeof container === 'string'
+        ? document.querySelector(container)!
+        : container
+
+    this._value = options.value
+
+    this.el = document.createElement('div')
+    this.el.className = 'mk-radio-group'
+    this.el.setAttribute('role', 'radiogroup')
+    parent.appendChild(this.el)
+
+    this._cleanupKey = onKey(this.el, [
+      { key: Keys.ArrowUp, handler: () => this.focusRadio(-1) },
+      { key: Keys.ArrowLeft, handler: () => this.focusRadio(-1) },
+      { key: Keys.ArrowDown, handler: () => this.focusRadio(1) },
+      { key: Keys.ArrowRight, handler: () => this.focusRadio(1) },
+    ])
+  }
+
+  add(radioOptions: Omit<RadioOptions, 'onChange'>): MkRadio {
+    const radio = new MkRadio(this.el, {
+      ...radioOptions,
+      onChange: (value) => {
+        this.setValue(value)
+      },
+    })
+    const checked = radioOptions.value === this._value
+    radio.setChecked(checked)
+    if (this._value === undefined && this.radios.length === 0) {
+      radio.el.setAttribute('tabindex', '0')
+    } else {
+      radio.el.setAttribute('tabindex', checked ? '0' : '-1')
+    }
+    this.radios.push(radio)
+    return radio
+  }
+
+  setValue(value: string | number): void {
+    this._value = value
+    this.radios.forEach((r) => {
+      const checked = r.getValue() === value
+      r.setChecked(checked)
+      r.el.setAttribute('tabindex', checked ? '0' : '-1')
+    })
+  }
+
+  getValue(): string | number | undefined {
+    return this._value
+  }
+
+  private focusRadio(dir: number): void {
+    let current = this.radios.findIndex((r) => r.el.getAttribute('tabindex') === '0')
+    if (current === -1) current = this.radios.findIndex((r) => r.el.classList.contains('is-checked'))
+    if (current === -1) current = 0
+    let next = current
+    for (let i = 0; i < this.radios.length; i++) {
+      next = (next + dir + this.radios.length) % this.radios.length
+      if (!this.radios[next].el.classList.contains('is-disabled')) {
+        break
+      }
+    }
+    if (next !== current || this.radios.length === 1) {
+      this.radios.forEach((r, i) => r.el.setAttribute('tabindex', i === next ? '0' : '-1'))
+      this.radios[next].el.focus()
+      this.setValue(this.radios[next].getValue())
+    }
+  }
+
+  destroy(): void {
+    this._cleanupKey?.()
+    this.el.remove()
+  }
+}

package/src/components/form/select.css

@@ -0,0 +1,91 @@
+.mk-select {
+  position: relative;
+  display: inline-flex;
+  width: 100%;
+  max-width: 320px;
+}
+
+.mk-select__trigger {
+  width: 100%;
+  height: 36px;
+  padding: 0 32px 0 12px;
+  font-size: 13px;
+  color: var(--mk-text);
+  background: var(--mk-surface);
+  border: 1px solid var(--mk-border);
+  border-radius: var(--mk-radius);
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  outline: none;
+  transition: var(--mk-transition);
+  user-select: none;
+}
+
+.mk-select__trigger:hover {
+  border-color: var(--mk-border-hover);
+}
+
+.mk-select__trigger.is-open {
+  border-color: var(--mk-primary);
+}
+
+.mk-select__arrow {
+  position: absolute;
+  right: 10px;
+  color: var(--mk-text-tertiary);
+  font-size: 10px;
+  transition: transform 0.2s;
+}
+
+.mk-select__trigger.is-open .mk-select__arrow {
+  transform: rotate(180deg);
+}
+
+.mk-select__dropdown {
+  position: absolute;
+  top: calc(100% + 4px);
+  left: 0;
+  right: 0;
+  background: var(--mk-surface);
+  border: 1px solid var(--mk-border);
+  border-radius: var(--mk-radius);
+  z-index: 100;
+  max-height: 240px;
+  overflow-y: auto;
+  opacity: 0;
+  transform: translateY(-4px);
+  pointer-events: none;
+  transition: all 0.15s ease;
+  box-shadow: var(--mk-shadow-lg);
+}
+
+.mk-select__dropdown.is-open {
+  opacity: 1;
+  transform: translateY(0);
+  pointer-events: auto;
+}
+
+.mk-select__option {
+  padding: 8px 12px;
+  font-size: 13px;
+  color: var(--mk-text);
+  cursor: pointer;
+  transition: var(--mk-transition);
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.mk-select__option:hover {
+  background: var(--mk-surface-hover);
+}
+
+.mk-select__option.is-selected {
+  background: rgba(99,102,241,0.1);
+  color: var(--mk-primary);
+}
+
+.mk-select__placeholder {
+  color: var(--mk-text-tertiary);
+}

package/src/components/form/select.ts

@@ -0,0 +1,174 @@
+import './select.css'
+import { onKey, Keys } from '../../a11y/keyboard.ts'
+
+export interface SelectOption {
+  label: string
+  value: string | number
+  disabled?: boolean
+}
+
+export interface SelectOptions {
+  placeholder?: string
+  options: SelectOption[]
+  value?: string | number
+  onChange?: (value: string | number) => void
+}
+
+export class MkSelect {
+  el: HTMLDivElement
+  private trigger: HTMLDivElement
+  private dropdown: HTMLDivElement
+  private options: SelectOptions
+  private _value: string | number | undefined
+  private isOpen = false
+  private _cleanupKey?: () => void
+
+  constructor(container: HTMLElement | string, options: SelectOptions) {
+    const parent =
+      typeof container === 'string'
+        ? document.querySelector(container)!
+        : container
+
+    this.options = options
+    this._value = options.value
+
+    this.el = document.createElement('div')
+    this.el.className = 'mk-select'
+
+    this.trigger = document.createElement('div')
+    this.trigger.className = 'mk-select__trigger'
+    this.trigger.setAttribute('role', 'combobox')
+    this.trigger.setAttribute('aria-haspopup', 'listbox')
+    this.trigger.setAttribute('aria-expanded', 'false')
+    this.trigger.setAttribute('tabindex', '0')
+    this.trigger.addEventListener('click', () => this.toggle())
+
+    const label = document.createElement('span')
+    label.className = 'mk-select__label'
+    this.updateLabel(label)
+    this.trigger.appendChild(label)
+
+    const arrow = document.createElement('span')
+    arrow.className = 'mk-select__arrow'
+    arrow.textContent = '▼'
+    this.trigger.appendChild(arrow)
+
+    this.dropdown = document.createElement('div')
+    this.dropdown.className = 'mk-select__dropdown'
+    this.dropdown.setAttribute('role', 'listbox')
+
+    options.options.forEach((opt) => {
+      const item = document.createElement('div')
+      item.className = 'mk-select__option'
+      item.textContent = opt.label
+      item.setAttribute('role', 'option')
+      item.setAttribute('aria-selected', String(opt.value === this._value))
+      if (opt.disabled) {
+        item.setAttribute('aria-disabled', 'true')
+        item.style.opacity = '0.4'
+        item.style.pointerEvents = 'none'
+      }
+      item.addEventListener('click', () => {
+        this.setValue(opt.value)
+        this.close()
+      })
+      this.dropdown.appendChild(item)
+    })
+
+    this.el.appendChild(this.trigger)
+    this.el.appendChild(this.dropdown)
+    parent.appendChild(this.el)
+
+    this._cleanupKey = onKey(this.trigger, [
+      { key: Keys.ArrowDown, handler: () => this.moveSelection(1) },
+      { key: Keys.ArrowUp, handler: () => this.moveSelection(-1) },
+      { key: Keys.Enter, handler: () => {
+        if (this.isOpen) this.close()
+        else this.open()
+      }},
+      { key: Keys.Escape, handler: () => this.close() },
+    ])
+
+    document.addEventListener('click', (e) => {
+      if (!this.el.contains(e.target as Node)) this.close()
+    })
+  }
+
+  private updateLabel(labelEl: HTMLSpanElement): void {
+    const selected = this.options.options.find((o) => o.value === this._value)
+    if (selected) {
+      labelEl.textContent = selected.label
+      labelEl.classList.remove('mk-select__placeholder')
+    } else {
+      labelEl.textContent = this.options.placeholder || '请选择'
+      labelEl.classList.add('mk-select__placeholder')
+    }
+  }
+
+  get value(): string | number | undefined {
+    return this._value
+  }
+
+  setValue(v: string | number): void {
+    this._value = v
+    const label = this.trigger.querySelector('.mk-select__label') as HTMLSpanElement
+    this.updateLabel(label)
+    this.renderOptions()
+    this.options.onChange?.(v)
+  }
+
+  private renderOptions(): void {
+    const items = this.dropdown.querySelectorAll('.mk-select__option')
+    items.forEach((item, i) => {
+      const opt = this.options.options[i]
+      item.classList.toggle('is-selected', opt.value === this._value)
+      item.setAttribute('aria-selected', String(opt.value === this._value))
+    })
+  }
+
+  private toggle(): void {
+    this.isOpen ? this.close() : this.open()
+  }
+
+  open(): void {
+    this.isOpen = true
+    this.trigger.setAttribute('aria-expanded', 'true')
+    this.trigger.classList.add('is-open')
+    this.dropdown.classList.add('is-open')
+    this.renderOptions()
+  }
+
+  close(): void {
+    this.isOpen = false
+    this.trigger.setAttribute('aria-expanded', 'false')
+    this.trigger.classList.remove('is-open')
+    this.dropdown.classList.remove('is-open')
+  }
+
+  private moveSelection(dir: number): void {
+    if (!this.isOpen) {
+      this.open()
+    }
+    const currentIndex = this.options.options.findIndex((o) => o.value === this._value)
+    let next = currentIndex
+    for (let i = 0; i < this.options.options.length; i++) {
+      next = (next + dir + this.options.options.length) % this.options.options.length
+      if (!this.options.options[next].disabled) {
+        this.setValue(this.options.options[next].value)
+        return
+      }
+    }
+  }
+
+  destroy(): void {
+    this._cleanupKey?.()
+    this.el.remove()
+  }
+}
+
+export function createSelect(
+  container: HTMLElement | string,
+  options: SelectOptions
+): MkSelect {
+  return new MkSelect(container, options)
+}

package/src/components/form/slider.css

@@ -0,0 +1,56 @@
+.mk-slider {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  width: 100%;
+  max-width: 320px;
+}
+
+.mk-slider__track {
+  position: relative;
+  flex: 1;
+  height: 4px;
+  background: var(--mk-border);
+  border-radius: 2px;
+  cursor: pointer;
+}
+
+.mk-slider__fill {
+  position: absolute;
+  left: 0;
+  top: 0;
+  height: 100%;
+  background: var(--mk-primary);
+  border-radius: 2px;
+  pointer-events: none;
+}
+
+.mk-slider__thumb {
+  position: absolute;
+  top: 50%;
+  width: 16px;
+  height: 16px;
+  background: var(--mk-primary);
+  border: 2px solid var(--mk-surface);
+  border-radius: 50%;
+  transform: translate(-50%, -50%);
+  cursor: grab;
+  transition: transform 0.15s, box-shadow 0.15s;
+  box-shadow: var(--mk-shadow-sm);
+}
+
+.mk-slider__thumb:hover {
+  transform: translate(-50%, -50%) scale(1.2);
+}
+
+.mk-slider__thumb:active {
+  cursor: grabbing;
+}
+
+.mk-slider__value {
+  font-size: 13px;
+  color: var(--mk-text-secondary);
+  min-width: 32px;
+  text-align: right;
+  font-variant-numeric: tabular-nums;
+}