@morscherlab/mint-sdk 1.2.0-beta.1 → 1.2.0-beta.3

package/src/components/DataFrame.vue

@@ -1,520 +0,0 @@
-<script setup lang="ts">
-/** Data table with sortable columns, search, pagination, and optional row selection. */
-import { ref, computed, onBeforeUnmount } from 'vue'
-import type { DataFrameColumn, SortState, PaginationState } from '../types'
-import { useSortedItems } from '../composables/useSortedItems'
-import { useTextSearch } from '../composables/useTextSearch'
-import { useListSelection } from '../composables/useListSelection'
-
-/**
- * DataFrame - Data table with sorting, searching, pagination, and row selection.
- *
- * @example
- * ```vue
- * <DataFrame
- *   :data="rows"
- *   :columns="[
- *     { key: 'name', label: 'Name', sortable: true },
- *     { key: 'age', label: 'Age', align: 'right' }
- *   ]"
- *   sortable
- *   searchable
- *   :pagination="{ page: 1, pageSize: 10, total: 100 }"
- * />
- * ```
- */
-interface Props {
-  /** Array of data objects */
-  data: Record<string, unknown>[]
-  /** Column definitions */
-  columns: DataFrameColumn[]
-  /** Unique key for each row (property name or function) */
-  rowKey?: string | ((row: Record<string, unknown>) => string | number)
-  /** Alternate row background colors */
-  striped?: boolean
-  /** Show table borders */
-  bordered?: boolean
-  /** Table size */
-  size?: 'sm' | 'md' | 'lg'
-  /** Make header sticky on scroll */
-  stickyHeader?: boolean
-  /** Maximum table height (enables vertical scroll) */
-  maxHeight?: string | number
-  /** Show loading overlay */
-  loading?: boolean
-  /** Empty state message */
-  emptyText?: string
-  /** Enable column sorting */
-  sortable?: boolean
-  /** Current sort state (controlled mode) */
-  sort?: SortState | null
-  /** Pagination state or false to disable */
-  pagination?: PaginationState | false
-  /** Enable search input */
-  searchable?: boolean
-  /** Search input placeholder */
-  searchPlaceholder?: string
-  /** Column keys to search (defaults to all) */
-  searchKeys?: string[]
-  /** Enable row selection with checkboxes */
-  selectable?: boolean
-  /** Currently selected row keys */
-  selectedKeys?: (string | number)[]
-  /** Make each body row act as a click/keyboard target. */
-  clickableRows?: boolean
-  /** Show a trailing action column with a per-row delete button. */
-  deletable?: boolean
-  /** Tooltip / aria-label for the row delete button. */
-  deleteLabel?: string
-  /** Allow dragging a column's right edge to resize it. */
-  resizable?: boolean
-  /** Controlled column widths in px, keyed by column key (omit for uncontrolled). */
-  columnWidths?: Record<string, number>
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  striped: true,
-  bordered: true,
-  size: 'md',
-  stickyHeader: false,
-  loading: false,
-  emptyText: 'No data',
-  sortable: false,
-  pagination: false,
-  searchable: false,
-  searchPlaceholder: 'Search...',
-  selectable: false,
-  selectedKeys: () => [],
-  clickableRows: false,
-  deletable: false,
-  deleteLabel: 'Delete row',
-  resizable: false,
-})
-
-/**
- * @event update:sort - Emitted when sort state changes
- * @event update:pagination - Emitted when page changes
- * @event update:selectedKeys - Emitted when row selection changes
- * @event row-click - Emitted when a row is clicked
- * @event cell-click - Emitted when a cell is clicked
- */
-const emit = defineEmits<{
-  'update:sort': [sort: SortState | null]
-  'update:pagination': [pagination: PaginationState]
-  'update:selectedKeys': [keys: (string | number)[]]
-  'update:columnWidths': [widths: Record<string, number>]
-  'row-click': [row: Record<string, unknown>, index: number]
-  'cell-click': [value: unknown, column: DataFrameColumn, row: Record<string, unknown>]
-  'delete-row': [row: Record<string, unknown>, index: number]
-}>()
-
-const searchQuery = ref('')
-const internalSort = ref<SortState | null>(null)
-
-const activeSort = computed(() => props.sort !== undefined ? props.sort : internalSort.value)
-
-function getRowKey(row: Record<string, unknown>, index: number): string | number {
-  if (!props.rowKey) return index
-  if (typeof props.rowKey === 'function') return props.rowKey(row)
-  return row[props.rowKey] as string | number
-}
-
-function getCellValue(row: Record<string, unknown>, key: string): unknown {
-  return key.split('.').reduce((obj: unknown, k) => {
-    if (obj && typeof obj === 'object') return (obj as Record<string, unknown>)[k]
-    return undefined
-  }, row)
-}
-
-function formatCell(col: DataFrameColumn, row: Record<string, unknown>, index: number): string {
-  const value = getCellValue(row, col.key)
-  if (col.formatter) return col.formatter(value, row, index)
-  if (value === null || value === undefined) return ''
-  return String(value)
-}
-
-const textSearch = useTextSearch({
-  items: () => props.data,
-  query: searchQuery,
-  enabled: () => props.searchable,
-  getText: (row) => {
-    const keys = props.searchKeys ?? props.columns.map(c => c.key)
-    return keys.map(key => getCellValue(row, key))
-  },
-})
-const filteredData = textSearch.filteredItems
-
-const tableSort = useSortedItems({
-  items: filteredData,
-  sort: activeSort,
-  enabled: () => {
-    const sort = activeSort.value
-    return Boolean(sort?.direction && props.columns.some(c => c.key === sort.key))
-  },
-  getValue: (row, key) => getCellValue(row, key),
-})
-const sortedData = tableSort.sortedItems
-
-// Pagination
-const paginatedData = computed(() => {
-  if (!props.pagination) return sortedData.value
-  const { page, pageSize } = props.pagination
-  const start = (page - 1) * pageSize
-  return sortedData.value.slice(start, start + pageSize)
-})
-
-const totalPages = computed(() => {
-  if (!props.pagination) return 1
-  return Math.max(1, Math.ceil(sortedData.value.length / props.pagination.pageSize))
-})
-
-function handleSort(col: DataFrameColumn) {
-  if (!col.sortable && !props.sortable) return
-
-  const current = activeSort.value
-  let next: SortState | null
-
-  if (current?.key === col.key) {
-    if (current.direction === 'asc') {
-      next = { key: col.key, direction: 'desc' }
-    } else if (current.direction === 'desc') {
-      next = null
-    } else {
-      next = { key: col.key, direction: 'asc' }
-    }
-  } else {
-    next = { key: col.key, direction: 'asc' }
-  }
-
-  if (props.sort === undefined) {
-    internalSort.value = next
-  }
-  emit('update:sort', next)
-}
-
-function handlePageChange(page: number) {
-  if (!props.pagination) return
-  emit('update:pagination', { ...props.pagination, page })
-}
-
-function handleRowClick(row: Record<string, unknown>, index: number) {
-  emit('row-click', row, index)
-}
-
-function handleRowKeydown(event: KeyboardEvent, row: Record<string, unknown>, index: number) {
-  if (!props.clickableRows) return
-  if (event.key !== 'Enter' && event.key !== ' ') return
-  event.preventDefault()
-  handleRowClick(row, index)
-}
-
-function handleCellClick(row: Record<string, unknown>, col: DataFrameColumn, index: number) {
-  emit('cell-click', getCellValue(row, col.key), col, row)
-  if (props.clickableRows) {
-    handleRowClick(row, index)
-  }
-}
-
-function isColumnSortable(col: DataFrameColumn): boolean {
-  return col.sortable === true || (props.sortable && col.sortable !== false)
-}
-
-// Selection
-const pageRowKeys = computed(() =>
-  paginatedData.value.map((row, i) => getRowKey(row, i))
-)
-const rowSelection = useListSelection({
-  selected: () => props.selectedKeys,
-  items: pageRowKeys,
-})
-const allSelected = computed(() => {
-  return props.selectable && rowSelection.isAllSelected.value
-})
-
-const selectIndeterminate = computed(() => {
-  return props.selectedKeys.length > 0 && !allSelected.value
-})
-
-function toggleSelectAll() {
-  if (allSelected.value) {
-    emit('update:selectedKeys', [])
-  } else {
-    emit('update:selectedKeys', rowSelection.itemValues.value)
-  }
-}
-
-function toggleRowSelect(key: string | number) {
-  emit('update:selectedKeys', rowSelection.toggleValue(key))
-}
-
-// Column resizing — uncontrolled by default; pass `columnWidths` to control it.
-const MIN_COL_WIDTH = 48
-const internalWidths = ref<Record<string, number>>({})
-const activeWidths = computed(() => props.columnWidths ?? internalWidths.value)
-
-function toCssSize(value: string | number | undefined): string | undefined {
-  if (value === undefined) return undefined
-  return typeof value === 'number' ? `${value}px` : value
-}
-
-function columnStyle(col: DataFrameColumn) {
-  return {
-    width: toCssSize(activeWidths.value[col.key] ?? col.width),
-    minWidth: toCssSize(col.minWidth),
-  }
-}
-
-let resizeState: { key: string; startX: number; startWidth: number; min: number } | null = null
-
-function startResize(col: DataFrameColumn, event: MouseEvent) {
-  event.preventDefault()
-  event.stopPropagation()
-  const th = (event.target as HTMLElement).closest('th')
-  const startWidth =
-    th instanceof HTMLElement ? th.offsetWidth : (typeof col.width === 'number' ? col.width : MIN_COL_WIDTH)
-  const min = Math.max(MIN_COL_WIDTH, typeof col.minWidth === 'number' ? col.minWidth : 0)
-  resizeState = { key: col.key, startX: event.clientX, startWidth, min }
-  window.addEventListener('mousemove', onResizeMove)
-  window.addEventListener('mouseup', stopResize)
-}
-
-function onResizeMove(event: MouseEvent) {
-  if (!resizeState) return
-  const next = Math.max(resizeState.min, resizeState.startWidth + (event.clientX - resizeState.startX))
-  const widths = { ...activeWidths.value, [resizeState.key]: next }
-  if (props.columnWidths === undefined) internalWidths.value = widths
-  emit('update:columnWidths', widths)
-}
-
-function stopResize() {
-  resizeState = null
-  window.removeEventListener('mousemove', onResizeMove)
-  window.removeEventListener('mouseup', stopResize)
-}
-
-onBeforeUnmount(stopResize)
-
-function handleDeleteRow(row: Record<string, unknown>, index: number) {
-  emit('delete-row', row, index)
-}
-
-const wrapperStyle = computed(() => {
-  if (!props.maxHeight) return undefined
-  const maxHeight = typeof props.maxHeight === 'number' ? `${props.maxHeight}px` : props.maxHeight
-  return { maxHeight, overflowY: 'auto' as const }
-})
-</script>
-
-<template>
-  <div
-    :class="[
-      'mint-dataframe',
-      { 'mint-dataframe--bordered': bordered },
-    ]"
-  >
-    <!-- Search header -->
-    <div v-if="searchable" class="mint-dataframe__header">
-      <div class="mint-dataframe__search-wrapper">
-        <svg class="mint-dataframe__search-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-          <circle cx="11" cy="11" r="8" /><path d="m21 21-4.34-4.34" />
-        </svg>
-        <input
-          v-model="searchQuery"
-          type="text"
-          class="mint-dataframe__search"
-          :placeholder="searchPlaceholder"
-        />
-      </div>
-    </div>
-
-    <!-- Table wrapper -->
-    <div class="mint-dataframe__table-wrapper" :style="wrapperStyle">
-      <table class="mint-dataframe__table">
-        <thead :class="['mint-dataframe__thead', { 'mint-dataframe__thead--sticky': stickyHeader }]">
-          <tr>
-            <th v-if="selectable" class="mint-dataframe__th mint-dataframe__th--checkbox">
-              <input
-                type="checkbox"
-                :checked="allSelected"
-                :indeterminate="selectIndeterminate"
-                class="mint-dataframe__checkbox"
-                @change="toggleSelectAll"
-              />
-            </th>
-            <th
-              v-for="col in columns"
-              :key="col.key"
-              :class="[
-                'mint-dataframe__th',
-                `mint-dataframe__th--${size}`,
-                `mint-dataframe__th--align-${col.align ?? 'left'}`,
-                {
-                  'mint-dataframe__th--sortable': isColumnSortable(col),
-                  'mint-dataframe__th--sorted': activeSort?.key === col.key && activeSort?.direction,
-                  'mint-dataframe__th--resizable': resizable,
-                },
-              ]"
-              :style="columnStyle(col)"
-              @click="isColumnSortable(col) ? handleSort(col) : undefined"
-            >
-              <slot :name="`header-${col.key}`" :column="col">
-                <div class="mint-dataframe__th-content">
-                  <span>{{ col.label }}</span>
-                  <svg
-                    v-if="isColumnSortable(col)"
-                    :class="[
-                      'mint-dataframe__sort-icon',
-                      {
-                        'mint-dataframe__sort-icon--asc': activeSort?.key === col.key && activeSort?.direction === 'asc',
-                        'mint-dataframe__sort-icon--desc': activeSort?.key === col.key && activeSort?.direction === 'desc',
-                      },
-                    ]"
-                    viewBox="0 0 24 24"
-                    fill="none"
-                    stroke="currentColor"
-                    stroke-width="2"
-                    stroke-linecap="round"
-                    stroke-linejoin="round"
-                  >
-                    <path d="m21 16-4 4-4-4" /><path d="M17 20V4" /><path d="m3 8 4-4 4 4" /><path d="M7 4v16" />
-                  </svg>
-                </div>
-              </slot>
-              <span
-                v-if="resizable"
-                class="mint-dataframe__resize-handle"
-                role="separator"
-                aria-orientation="vertical"
-                aria-label="Resize column"
-                @mousedown="startResize(col, $event)"
-                @click.stop
-              />
-            </th>
-            <th
-              v-if="deletable"
-              :class="['mint-dataframe__th', `mint-dataframe__th--${size}`, 'mint-dataframe__th--actions']"
-              aria-label="Actions"
-            />
-          </tr>
-        </thead>
-
-        <tbody>
-          <tr
-            v-for="(row, rowIndex) in paginatedData"
-            :key="getRowKey(row, rowIndex)"
-            :class="[
-              'mint-dataframe__row',
-              {
-                'mint-dataframe__row--striped': striped && rowIndex % 2 === 1,
-                'mint-dataframe__row--selected': rowSelection.isSelected(getRowKey(row, rowIndex)),
-                'mint-dataframe__row--clickable': clickableRows,
-              },
-            ]"
-            :tabindex="clickableRows ? 0 : undefined"
-            :role="clickableRows ? 'button' : undefined"
-            @click="handleRowClick(row, rowIndex)"
-            @keydown="handleRowKeydown($event, row, rowIndex)"
-          >
-            <td v-if="selectable" class="mint-dataframe__td mint-dataframe__td--checkbox">
-              <input
-                type="checkbox"
-                :checked="rowSelection.isSelected(getRowKey(row, rowIndex))"
-                class="mint-dataframe__checkbox"
-                @click.stop
-                @change="toggleRowSelect(getRowKey(row, rowIndex))"
-              />
-            </td>
-            <td
-              v-for="col in columns"
-              :key="col.key"
-              :class="[
-                'mint-dataframe__td',
-                `mint-dataframe__td--${size}`,
-                `mint-dataframe__td--align-${col.align ?? 'left'}`,
-                { 'mint-dataframe__td--ellipsis': col.ellipsis },
-              ]"
-              @click.stop="handleCellClick(row, col, rowIndex)"
-            >
-              <slot :name="`cell-${col.key}`" :value="getCellValue(row, col.key)" :row="row" :column="col" :index="rowIndex">
-                {{ formatCell(col, row, rowIndex) }}
-              </slot>
-            </td>
-            <td
-              v-if="deletable"
-              :class="['mint-dataframe__td', `mint-dataframe__td--${size}`, 'mint-dataframe__td--actions']"
-            >
-              <button
-                type="button"
-                class="mint-dataframe__delete-btn"
-                :aria-label="deleteLabel"
-                :title="deleteLabel"
-                @click.stop="handleDeleteRow(row, rowIndex)"
-              >
-                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-                  <path d="M3 6h18" /><path d="M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2" /><path d="M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6" /><path d="M10 11v6" /><path d="M14 11v6" />
-                </svg>
-              </button>
-            </td>
-          </tr>
-        </tbody>
-      </table>
-
-      <!-- Empty state -->
-      <div v-if="paginatedData.length === 0 && !loading" class="mint-dataframe__empty">
-        <slot name="empty">
-          <svg class="mint-dataframe__empty-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-            <polyline points="22 12 16 12 14 15 10 15 8 12 2 12" /><path d="M5.45 5.11 2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z" />
-          </svg>
-          <p class="mint-dataframe__empty-text">{{ emptyText }}</p>
-        </slot>
-      </div>
-
-      <!-- Loading overlay -->
-      <div v-if="loading" class="mint-dataframe__loading">
-        <slot name="loading">
-          <svg class="mint-dataframe__loading-spinner" viewBox="0 0 24 24" fill="none" aria-hidden="true">
-            <circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="3" opacity="0.25" />
-            <path d="M12 2a10 10 0 0 1 10 10" stroke="currentColor" stroke-width="3" stroke-linecap="round" />
-          </svg>
-        </slot>
-      </div>
-    </div>
-
-    <!-- Footer / Pagination -->
-    <div v-if="pagination" class="mint-dataframe__footer">
-      <slot name="footer">
-        <span class="mint-dataframe__page-info">
-          {{ (pagination.page - 1) * pagination.pageSize + 1 }}&ndash;{{ Math.min(pagination.page * pagination.pageSize, sortedData.length) }}
-          of {{ sortedData.length }}
-        </span>
-        <div class="mint-dataframe__page-controls">
-          <button
-            type="button"
-            class="mint-dataframe__page-btn"
-            :disabled="pagination.page <= 1"
-            @click="handlePageChange(pagination.page - 1)"
-          >
-            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-              <path d="m15 18-6-6 6-6" />
-            </svg>
-          </button>
-          <span class="mint-dataframe__page-number">{{ pagination.page }} / {{ totalPages }}</span>
-          <button
-            type="button"
-            class="mint-dataframe__page-btn"
-            :disabled="pagination.page >= totalPages"
-            @click="handlePageChange(pagination.page + 1)"
-          >
-            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-              <path d="m9 18 6-6-6-6" />
-            </svg>
-          </button>
-        </div>
-      </slot>
-    </div>
-  </div>
-</template>
-
-<style>
-@import '../styles/components/dataframe.css';
-</style>

package/src/components/DatePicker.story.vue

@@ -1,119 +0,0 @@
-<script setup lang="ts">
-import DatePicker from './DatePicker.vue'
-
-const sizes = ['sm', 'md', 'lg'] as const
-
-function initPlayground() {
-  return {
-    value: '2026-04-22',
-    placeholder: 'Select date',
-    size: 'md' as const,
-    clearable: true,
-    disabled: false,
-    error: false,
-    useMin: false,
-    min: '',
-    useMax: false,
-    max: '',
-  }
-}
-</script>
-
-<template>
-  <Story title="Base Inputs/DatePicker">
-    <Variant title="Playground" :init-state="initPlayground">
-      <template #default="{ state }">
-        <div style="padding: 2rem; max-width: 400px; margin: 0 auto;">
-          <DatePicker
-            v-model="state.value"
-            :placeholder="state.placeholder"
-            :disabled="state.disabled"
-            :error="state.error"
-            :size="state.size"
-            :clearable="state.clearable"
-            :min="state.useMin ? state.min : undefined"
-            :max="state.useMax ? state.max : undefined"
-          />
-          <p style="margin-top: 1rem; font-size: 0.875rem; color: var(--text-muted, #94a3b8);">
-            Value: <code>{{ JSON.stringify(state.value) }}</code>
-          </p>
-        </div>
-      </template>
-
-      <template #controls="{ state }">
-        <HstText v-model="state.value" title="Value (YYYY-MM-DD)" />
-        <HstText v-model="state.placeholder" title="Placeholder" />
-        <HstSelect
-          v-model="state.size"
-          title="Size"
-          :options="sizes.map(s => ({ label: s, value: s }))"
-        />
-        <HstCheckbox v-model="state.clearable" title="Clearable" />
-        <HstCheckbox v-model="state.disabled" title="Disabled" />
-        <HstCheckbox v-model="state.error" title="Error" />
-        <HstCheckbox v-model="state.useMin" title="Use Min Date" />
-        <HstText v-model="state.min" title="Min Date" />
-        <HstCheckbox v-model="state.useMax" title="Use Max Date" />
-        <HstText v-model="state.max" title="Max Date" />
-      </template>
-    </Variant>
-
-    <Variant title="Sizes">
-      <div style="padding: 2rem; max-width: 400px; margin: 0 auto; display: flex; flex-direction: column; gap: 1rem;">
-        <div v-for="size in sizes" :key="size">
-          <p style="margin: 0 0 0.5rem; font-size: 0.75rem; color: var(--text-muted, #94a3b8); text-transform: uppercase; letter-spacing: 0.05em;">
-            {{ size }}
-          </p>
-          <DatePicker :size="size" placeholder="Select date..." />
-        </div>
-      </div>
-    </Variant>
-
-    <Variant title="Pre-selected Date">
-      <div style="padding: 2rem; max-width: 400px; margin: 0 auto;">
-        <DatePicker model-value="2026-02-10" />
-      </div>
-    </Variant>
-
-    <Variant title="With Date Range Constraints">
-      <div style="padding: 2rem; max-width: 400px; margin: 0 auto;">
-        <p style="margin: 0 0 0.5rem; font-size: 0.875rem; color: var(--text-primary, #e2e8f0);">
-          Only dates in February 2026
-        </p>
-        <DatePicker
-          model-value="2026-02-10"
-          min="2026-02-01"
-          max="2026-02-28"
-        />
-      </div>
-    </Variant>
-
-    <Variant title="Error State">
-      <div style="padding: 2rem; max-width: 400px; margin: 0 auto;">
-        <DatePicker
-          model-value="2026-01-01"
-          error
-          placeholder="Invalid date"
-        />
-      </div>
-    </Variant>
-
-    <Variant title="Disabled">
-      <div style="padding: 2rem; max-width: 400px; margin: 0 auto;">
-        <DatePicker
-          model-value="2026-02-10"
-          disabled
-        />
-      </div>
-    </Variant>
-
-    <Variant title="Not Clearable">
-      <div style="padding: 2rem; max-width: 400px; margin: 0 auto;">
-        <DatePicker
-          model-value="2026-02-10"
-          :clearable="false"
-        />
-      </div>
-    </Variant>
-  </Story>
-</template>