@luanlu/mk-motion 1.2.0 → 1.2.1

package/src/components/table/table.css

@@ -0,0 +1,192 @@
+.mk-table-wrapper {
+  width: 100%;
+  border: 1px solid var(--mk-border);
+  border-radius: var(--mk-radius);
+  overflow: hidden;
+  background: var(--mk-surface);
+}
+
+.mk-table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: 13px;
+}
+
+.mk-table thead {
+  background: rgba(255,255,255,0.03);
+}
+
+.mk-table th {
+  padding: 10px 16px;
+  text-align: left;
+  font-weight: 500;
+  color: var(--mk-text-secondary);
+  border-bottom: 1px solid var(--mk-border);
+  font-size: 12px;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  white-space: nowrap;
+  cursor: default;
+  user-select: none;
+}
+
+.mk-table th.is-sortable {
+  cursor: pointer;
+}
+
+.mk-table th.is-sortable:hover {
+  color: var(--mk-text);
+  background: rgba(255,255,255,0.03);
+}
+
+.mk-table__sort-icon {
+  margin-left: 4px;
+  font-size: 10px;
+  opacity: 0.4;
+  display: inline-block;
+  width: 12px;
+  text-align: center;
+}
+
+.mk-table__sort-icon.is-active {
+  opacity: 1;
+  color: var(--mk-primary);
+}
+
+.mk-table td {
+  padding: 10px 16px;
+  color: var(--mk-text);
+  border-bottom: 1px solid var(--mk-border);
+  vertical-align: middle;
+}
+
+.mk-table tbody tr:last-child td {
+  border-bottom: none;
+}
+
+.mk-table tbody tr:hover {
+  background: rgba(99,102,241,0.03);
+}
+
+.mk-table tbody tr.is-editing td {
+  background: rgba(99,102,241,0.05);
+}
+
+/* Inline edit input */
+.mk-table__edit-input {
+  width: 100%;
+  padding: 6px 10px;
+  font-size: 13px;
+  color: var(--mk-text);
+  background: var(--mk-bg);
+  border: 1px solid var(--mk-border);
+  border-radius: 6px;
+  outline: none;
+  transition: var(--mk-transition);
+  box-sizing: border-box;
+}
+
+.mk-table__edit-input:focus {
+  border-color: var(--mk-primary);
+}
+
+/* Cell actions */
+.mk-table__actions {
+  display: flex;
+  gap: 8px;
+}
+
+.mk-table__action-btn {
+  font-size: 12px;
+  color: var(--mk-primary);
+  cursor: pointer;
+  padding: 2px 6px;
+  border-radius: 4px;
+  transition: var(--mk-transition);
+}
+
+.mk-table__action-btn:hover {
+  background: rgba(99,102,241,0.1);
+}
+
+.mk-table__action-btn.is-danger {
+  color: var(--mk-danger);
+}
+
+.mk-table__action-btn.is-danger:hover {
+  background: rgba(239,68,68,0.1);
+}
+
+/* Empty state */
+.mk-table__empty {
+  padding: 48px 24px;
+  text-align: center;
+  color: var(--mk-text-tertiary);
+  font-size: 14px;
+}
+
+/* Pagination */
+.mk-pagination {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 4px;
+  padding: 12px 16px;
+  border-top: 1px solid var(--mk-border);
+}
+
+.mk-pagination__btn {
+  min-width: 32px;
+  height: 32px;
+  padding: 0 8px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 13px;
+  color: var(--mk-text-secondary);
+  background: transparent;
+  border: 1px solid transparent;
+  border-radius: 6px;
+  cursor: pointer;
+  transition: var(--mk-transition);
+}
+
+.mk-pagination__btn:hover:not(:disabled) {
+  background: rgba(255,255,255,0.05);
+  color: var(--mk-text);
+}
+
+.mk-pagination__btn.is-active {
+  background: var(--mk-primary);
+  color: #fff;
+  border-color: var(--mk-primary);
+}
+
+.mk-pagination__btn:disabled {
+  opacity: 0.3;
+  cursor: not-allowed;
+}
+
+.mk-pagination__total {
+  font-size: 12px;
+  color: var(--mk-text-tertiary);
+  margin-right: auto;
+}
+
+.mk-pagination__size {
+  margin-left: auto;
+  font-size: 12px;
+  color: var(--mk-text-secondary);
+}
+
+.mk-pagination__size select {
+  margin-left: 6px;
+  padding: 4px 8px;
+  font-size: 12px;
+  color: var(--mk-text);
+  background: var(--mk-bg);
+  border: 1px solid var(--mk-border);
+  border-radius: 4px;
+  cursor: pointer;
+  outline: none;
+}

package/src/components/table/table.ts

@@ -0,0 +1,370 @@
+import './table.css'
+
+export interface TableColumn {
+  key: string
+  title: string
+  width?: string
+  sortable?: boolean
+  editable?: boolean
+  render?: (value: any, row: Record<string, any>, index: number) => HTMLElement | string
+}
+
+export interface TableOptions {
+  columns: TableColumn[]
+  data: Record<string, any>[]
+  pageSize?: number
+  onEdit?: (row: Record<string, any>, rowIndex: number) => void
+  onDelete?: (row: Record<string, any>, rowIndex: number) => void
+  onRowClick?: (row: Record<string, any>, rowIndex: number) => void
+}
+
+export class MkTable {
+  el: HTMLDivElement
+  private table: HTMLTableElement
+  private tbody: HTMLTableSectionElement
+  private columns: TableColumn[]
+  private data: Record<string, any>[]
+  private pageSize: number
+  private currentPage = 1
+  private sortState: { key: string; order: 'asc' | 'desc' } | null = null
+  private editingRow: number | null = null
+  private editCache: Record<string, any> | null = null
+  private filteredData: Record<string, any>[]
+
+  private callbacks: Pick<TableOptions, 'onEdit' | 'onDelete' | 'onRowClick'>
+
+  constructor(container: HTMLElement | string, options: TableOptions) {
+    const parent =
+      typeof container === 'string'
+        ? document.querySelector(container)!
+        : container
+
+    this.columns = options.columns
+    this.data = options.data
+    this.pageSize = options.pageSize || 10
+    this.filteredData = [...this.data]
+    this.callbacks = options
+
+    this.el = document.createElement('div')
+    this.el.className = 'mk-table-wrapper'
+
+    this.table = document.createElement('table')
+    this.table.className = 'mk-table'
+    this.table.setAttribute('role', 'table')
+
+    const thead = document.createElement('thead')
+    thead.setAttribute('role', 'rowgroup')
+    const headerRow = document.createElement('tr')
+    headerRow.setAttribute('role', 'row')
+    this.columns.forEach((col) => {
+      const th = document.createElement('th')
+      th.setAttribute('role', 'columnheader')
+      th.textContent = col.title
+      if (col.width) th.style.width = col.width
+      if (col.sortable) {
+        th.classList.add('is-sortable')
+        th.setAttribute('aria-sort', 'none')
+        const icon = document.createElement('span')
+        icon.className = 'mk-table__sort-icon'
+        icon.textContent = '⇅'
+        th.appendChild(icon)
+        th.addEventListener('click', () => this.handleSort(col.key))
+      }
+      headerRow.appendChild(th)
+    })
+    thead.appendChild(headerRow)
+    this.table.appendChild(thead)
+
+    this.tbody = document.createElement('tbody')
+    this.tbody.setAttribute('role', 'rowgroup')
+    this.table.appendChild(this.tbody)
+    this.el.appendChild(this.table)
+
+    parent.appendChild(this.el)
+    this.render()
+  }
+
+  private getDisplayData(): Record<string, any>[] {
+    if (this.sortState) {
+      const sorted = [...this.filteredData].sort((a, b) => {
+        const av = a[this.sortState!.key]
+        const bv = b[this.sortState!.key]
+        if (av < bv) return this.sortState!.order === 'asc' ? -1 : 1
+        if (av > bv) return this.sortState!.order === 'asc' ? 1 : -1
+        return 0
+      })
+      return sorted
+    }
+    return this.filteredData
+  }
+
+  private handleSort(key: string): void {
+    if (!this.sortState || this.sortState.key !== key) {
+      this.sortState = { key, order: 'asc' }
+    } else if (this.sortState.order === 'asc') {
+      this.sortState.order = 'desc'
+    } else {
+      this.sortState = null
+    }
+    this.render()
+  }
+
+  render(): void {
+    this.tbody.innerHTML = ''
+    const displayData = this.getDisplayData()
+    const start = (this.currentPage - 1) * this.pageSize
+    const pageData = displayData.slice(start, start + this.pageSize)
+
+    if (pageData.length === 0) {
+      const row = document.createElement('tr')
+      row.setAttribute('role', 'row')
+      const cell = document.createElement('td')
+      cell.setAttribute('role', 'cell')
+      cell.colSpan = this.columns.length
+      cell.className = 'mk-table__empty'
+      cell.textContent = '暂无数据'
+      row.appendChild(cell)
+      this.tbody.appendChild(row)
+    } else {
+      pageData.forEach((rowData, pageIndex) => {
+        const rowIndex = start + pageIndex
+        const tr = document.createElement('tr')
+        tr.setAttribute('role', 'row')
+        if (this.editingRow === rowIndex) tr.classList.add('is-editing')
+        tr.addEventListener('click', () => {
+          this.callbacks.onRowClick?.(rowData, rowIndex)
+        })
+
+        this.columns.forEach((col) => {
+          const td = document.createElement('td')
+          td.setAttribute('role', 'cell')
+          if (this.editingRow === rowIndex && col.editable && col.key !== 'actions') {
+            const input = document.createElement('input')
+            input.className = 'mk-table__edit-input'
+            input.value = String(this.editCache![col.key] ?? rowData[col.key] ?? '')
+            input.addEventListener('input', (e) => {
+              this.editCache![col.key] = (e.target as HTMLInputElement).value
+            })
+            input.addEventListener('keydown', (e) => {
+              if (e.key === 'Enter') this.saveEdit()
+              if (e.key === 'Escape') this.cancelEdit()
+            })
+            td.appendChild(input)
+          } else if (col.render) {
+            const rendered = col.render(rowData[col.key], rowData, rowIndex)
+            if (rendered instanceof HTMLElement) {
+              td.appendChild(rendered)
+            } else if (typeof rendered === 'string' && rendered.includes('<')) {
+              td.innerHTML = rendered
+            } else {
+              td.textContent = String(rendered)
+            }
+          } else {
+            td.textContent = rowData[col.key] !== undefined ? String(rowData[col.key]) : ''
+          }
+          tr.appendChild(td)
+        })
+        this.tbody.appendChild(tr)
+      })
+    }
+
+    this.renderPagination(displayData.length)
+    this.updateSortIcons()
+  }
+
+  private updateSortIcons(): void {
+    const headers = this.table.querySelectorAll('th')
+    headers.forEach((th) => {
+      const icon = th.querySelector('.mk-table__sort-icon')
+      if (icon) {
+        icon.classList.remove('is-active')
+        icon.textContent = '⇅'
+        th.setAttribute('aria-sort', 'none')
+      }
+    })
+    if (this.sortState) {
+      const colIndex = this.columns.findIndex((c) => c.key === this.sortState!.key)
+      if (colIndex >= 0) {
+        const th = headers[colIndex]
+        const icon = th?.querySelector('.mk-table__sort-icon')
+        if (icon) {
+          icon.classList.add('is-active')
+          icon.textContent = this.sortState.order === 'asc' ? '↑' : '↓'
+        }
+        if (th) {
+          th.setAttribute('aria-sort', this.sortState.order === 'asc' ? 'ascending' : 'descending')
+        }
+      }
+    }
+  }
+
+  private renderPagination(total: number): void {
+    const existing = this.el.querySelector('.mk-pagination')
+    existing?.remove()
+
+    const totalPages = Math.max(1, Math.ceil(total / this.pageSize))
+    const pagination = document.createElement('div')
+    pagination.className = 'mk-pagination'
+
+    const totalEl = document.createElement('span')
+    totalEl.className = 'mk-pagination__total'
+    totalEl.textContent = `共 ${total} 条`
+    pagination.appendChild(totalEl)
+
+    const prev = document.createElement('button')
+    prev.className = 'mk-pagination__btn'
+    prev.textContent = '‹'
+    prev.disabled = this.currentPage <= 1
+    prev.addEventListener('click', () => {
+      if (this.currentPage > 1) {
+        this.currentPage--
+        this.render()
+      }
+    })
+    pagination.appendChild(prev)
+
+    const maxVisible = 5
+    let startPage = Math.max(1, this.currentPage - Math.floor(maxVisible / 2))
+    let endPage = Math.min(totalPages, startPage + maxVisible - 1)
+    if (endPage - startPage + 1 < maxVisible) {
+      startPage = Math.max(1, endPage - maxVisible + 1)
+    }
+
+    if (startPage > 1) {
+      pagination.appendChild(this.createPageBtn(1))
+      if (startPage > 2) {
+        const dots = document.createElement('span')
+        dots.className = 'mk-pagination__btn'
+        dots.textContent = '...'
+        dots.style.cursor = 'default'
+        pagination.appendChild(dots)
+      }
+    }
+
+    for (let i = startPage; i <= endPage; i++) {
+      pagination.appendChild(this.createPageBtn(i))
+    }
+
+    if (endPage < totalPages) {
+      if (endPage < totalPages - 1) {
+        const dots = document.createElement('span')
+        dots.className = 'mk-pagination__btn'
+        dots.textContent = '...'
+        dots.style.cursor = 'default'
+        pagination.appendChild(dots)
+      }
+      pagination.appendChild(this.createPageBtn(totalPages))
+    }
+
+    const next = document.createElement('button')
+    next.className = 'mk-pagination__btn'
+    next.textContent = '›'
+    next.disabled = this.currentPage >= totalPages
+    next.addEventListener('click', () => {
+      if (this.currentPage < totalPages) {
+        this.currentPage++
+        this.render()
+      }
+    })
+    pagination.appendChild(next)
+
+    const sizeEl = document.createElement('span')
+    sizeEl.className = 'mk-pagination__size'
+    sizeEl.innerHTML = `
+      每页
+      <select>
+        <option value="10" ${this.pageSize === 10 ? 'selected' : ''}>10</option>
+        <option value="20" ${this.pageSize === 20 ? 'selected' : ''}>20</option>
+        <option value="50" ${this.pageSize === 50 ? 'selected' : ''}>50</option>
+      </select>
+      条
+    `
+    sizeEl.querySelector('select')!.addEventListener('change', (e) => {
+      this.pageSize = Number((e.target as HTMLSelectElement).value)
+      this.currentPage = 1
+      this.render()
+    })
+    pagination.appendChild(sizeEl)
+
+    this.el.appendChild(pagination)
+  }
+
+  private createPageBtn(page: number): HTMLButtonElement {
+    const btn = document.createElement('button')
+    btn.className = 'mk-pagination__btn'
+    btn.textContent = String(page)
+    if (page === this.currentPage) btn.classList.add('is-active')
+    btn.addEventListener('click', () => {
+      this.currentPage = page
+      this.render()
+    })
+    return btn
+  }
+
+  setData(data: Record<string, any>[]): void {
+    this.data = data
+    this.filteredData = [...data]
+    this.currentPage = 1
+    this.render()
+  }
+
+  filter(predicate: (row: Record<string, any>) => boolean): void {
+    this.filteredData = this.data.filter(predicate)
+    this.currentPage = 1
+    this.render()
+  }
+
+  clearFilter(): void {
+    this.filteredData = [...this.data]
+    this.currentPage = 1
+    this.render()
+  }
+
+  startEdit(rowIndex: number): void {
+    this.editingRow = rowIndex
+    this.editCache = { ...this.filteredData[rowIndex] }
+    this.render()
+    const input = this.tbody.querySelector('.mk-table__edit-input') as HTMLInputElement
+    input?.focus()
+  }
+
+  saveEdit(): void {
+    if (this.editingRow !== null && this.editCache) {
+      const rowData = this.editCache
+      this.filteredData[this.editingRow] = rowData
+      const origIndex = this.data.findIndex(
+        (r, i) => i === this.editingRow || JSON.stringify(r) === JSON.stringify(rowData)
+      )
+      if (origIndex >= 0) this.data[origIndex] = rowData
+      this.callbacks.onEdit?.(rowData, this.editingRow)
+    }
+    this.editingRow = null
+    this.editCache = null
+    this.render()
+  }
+
+  cancelEdit(): void {
+    this.editingRow = null
+    this.editCache = null
+    this.render()
+  }
+
+  deleteRow(rowIndex: number): void {
+    const row = this.filteredData[rowIndex]
+    this.data = this.data.filter((r) => r !== row)
+    this.filteredData = this.filteredData.filter((r) => r !== row)
+    this.callbacks.onDelete?.(row, rowIndex)
+    if (this.filteredData.length <= (this.currentPage - 1) * this.pageSize && this.currentPage > 1) {
+      this.currentPage--
+    }
+    this.render()
+  }
+
+  destroy(): void {
+    this.el.remove()
+  }
+}
+
+export function createTable(container: HTMLElement | string, options: TableOptions): MkTable {
+  return new MkTable(container, options)
+}

package/src/components/tabs/tabs.css

@@ -0,0 +1,138 @@
+.mk-tabs {
+  display: flex;
+  flex-direction: column;
+  gap: var(--mk-space-3);
+}
+
+.mk-tabs__header {
+  position: relative;
+  display: flex;
+  align-items: center;
+  gap: var(--mk-space-1);
+}
+
+.mk-tabs__item {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0 var(--mk-space-3);
+  height: 36px;
+  font-size: var(--mk-text-sm);
+  font-weight: var(--mk-font-medium);
+  color: var(--mk-text-secondary);
+  background: transparent;
+  border: none;
+  border-radius: var(--mk-radius);
+  cursor: pointer;
+  outline: none;
+  white-space: nowrap;
+  transition: var(--mk-transition-colors);
+}
+
+.mk-tabs__item:hover:not(.is-disabled) {
+  color: var(--mk-text);
+  background: var(--mk-surface-hover);
+}
+
+.mk-tabs__item.is-active {
+  color: var(--mk-text);
+}
+
+.mk-tabs__item.is-disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+
+/* Line type */
+.mk-tabs--line .mk-tabs__header {
+  border-bottom: 1px solid var(--mk-border);
+  gap: 0;
+}
+
+.mk-tabs--line .mk-tabs__item {
+  border-radius: 0;
+  margin-bottom: -1px;
+}
+
+.mk-tabs--line .mk-tabs__item.is-active {
+  color: var(--mk-primary);
+}
+
+.mk-tabs__indicator {
+  position: absolute;
+  bottom: 0;
+  height: 2px;
+  background: var(--mk-primary);
+  border-radius: 1px;
+  transition: left var(--mk-duration-normal) var(--mk-ease-out-expo),
+              width var(--mk-duration-normal) var(--mk-ease-out-expo);
+}
+
+/* Card type */
+.mk-tabs--card .mk-tabs__header {
+  gap: 0;
+  background: var(--mk-surface);
+  border: 1px solid var(--mk-border);
+  border-radius: var(--mk-radius);
+  padding: 3px;
+}
+
+.mk-tabs--card .mk-tabs__item {
+  flex: 1;
+  border-radius: var(--mk-radius-sm);
+}
+
+.mk-tabs--card .mk-tabs__item.is-active {
+  background: var(--mk-surface-raised);
+  box-shadow: var(--mk-shadow-sm);
+}
+
+/* Pill type */
+.mk-tabs--pill .mk-tabs__header {
+  gap: var(--mk-space-1);
+  background: var(--mk-surface);
+  border: 1px solid var(--mk-border);
+  border-radius: var(--mk-radius-full);
+  padding: 3px;
+}
+
+.mk-tabs--pill .mk-tabs__item {
+  border-radius: var(--mk-radius-full);
+}
+
+.mk-tabs--pill .mk-tabs__item.is-active {
+  background: var(--mk-primary);
+  color: #fff;
+}
+
+.mk-tabs--pill .mk-tabs__item:hover:not(.is-disabled):not(.is-active) {
+  background: var(--mk-surface-hover);
+}
+
+/* Content */
+.mk-tabs__content {
+  position: relative;
+  min-height: 0;
+}
+
+.mk-tabs__panel {
+  display: none;
+  font-size: var(--mk-text-sm);
+  color: var(--mk-text-secondary);
+  line-height: var(--mk-leading-normal);
+  opacity: 0;
+  transform: translateY(4px);
+  transition: opacity var(--mk-duration-normal) var(--mk-ease-default),
+              transform var(--mk-duration-normal) var(--mk-ease-out);
+}
+
+.mk-tabs__panel.is-active {
+  opacity: 1;
+  transform: translateY(0);
+}
+
+.mk-tabs__panel.is-entering {
+  opacity: 0;
+  transform: translateY(4px);
+}