@morscherlab/mint-sdk 1.0.0-beta.2 → 1.0.0-beta.3

package/src/components/DataFrame.vue

@@ -2,6 +2,9 @@
 /** Data table with sortable columns, search, pagination, and optional row selection. */
 import { ref, computed } 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.
@@ -114,43 +117,27 @@ function formatCell(col: DataFrameColumn, row: Record<string, unknown>, index: n
   return String(value)
 }
 
-// Filtering
-const filteredData = computed(() => {
-  if (!props.searchable || !searchQuery.value.trim()) return props.data
-  const query = searchQuery.value.toLowerCase()
-  const keys = props.searchKeys ?? props.columns.map(c => c.key)
-  return props.data.filter(row =>
-    keys.some(key => {
-      const val = getCellValue(row, key)
-      return val !== null && val !== undefined && String(val).toLowerCase().includes(query)
-    })
-  )
+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))
+  },
 })
-
-// Sorting
-const sortedData = computed(() => {
-  const sort = activeSort.value
-  if (!sort || !sort.direction) return filteredData.value
-
-  const col = props.columns.find(c => c.key === sort.key)
-  if (!col) return filteredData.value
-
-  return [...filteredData.value].sort((a, b) => {
-    const aVal = getCellValue(a, sort.key)
-    const bVal = getCellValue(b, sort.key)
-
-    if (aVal === null || aVal === undefined) return 1
-    if (bVal === null || bVal === undefined) return -1
-
-    let cmp = 0
-    if (typeof aVal === 'number' && typeof bVal === 'number') {
-      cmp = aVal - bVal
-    } else {
-      cmp = String(aVal).localeCompare(String(bVal))
-    }
-    return sort.direction === 'asc' ? cmp : -cmp
-  })
+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(() => {
@@ -199,11 +186,15 @@ function isColumnSortable(col: DataFrameColumn): boolean {
 }
 
 // Selection
+const pageRowKeys = computed(() =>
+  paginatedData.value.map((row, i) => getRowKey(row, i))
+)
+const rowSelection = useListSelection({
+  selected: () => props.selectedKeys,
+  items: pageRowKeys,
+})
 const allSelected = computed(() => {
-  if (!props.selectable || paginatedData.value.length === 0) return false
-  return paginatedData.value.every((row, i) =>
-    props.selectedKeys.includes(getRowKey(row, i))
-  )
+  return props.selectable && rowSelection.isAllSelected.value
 })
 
 const selectIndeterminate = computed(() => {
@@ -214,19 +205,12 @@ function toggleSelectAll() {
   if (allSelected.value) {
     emit('update:selectedKeys', [])
   } else {
-    emit('update:selectedKeys', paginatedData.value.map((row, i) => getRowKey(row, i)))
+    emit('update:selectedKeys', rowSelection.itemValues.value)
   }
 }
 
 function toggleRowSelect(key: string | number) {
-  const next = [...props.selectedKeys]
-  const idx = next.indexOf(key)
-  if (idx >= 0) {
-    next.splice(idx, 1)
-  } else {
-    next.push(key)
-  }
-  emit('update:selectedKeys', next)
+  emit('update:selectedKeys', rowSelection.toggleValue(key))
 }
 
 const wrapperStyle = computed(() => {
@@ -325,7 +309,7 @@ const wrapperStyle = computed(() => {
               'mint-dataframe__row',
               {
                 'mint-dataframe__row--striped': striped && rowIndex % 2 === 1,
-                'mint-dataframe__row--selected': selectedKeys.includes(getRowKey(row, rowIndex)),
+                'mint-dataframe__row--selected': rowSelection.isSelected(getRowKey(row, rowIndex)),
               },
             ]"
             @click="emit('row-click', row, rowIndex)"
@@ -333,7 +317,7 @@ const wrapperStyle = computed(() => {
             <td v-if="selectable" class="mint-dataframe__td mint-dataframe__td--checkbox">
               <input
                 type="checkbox"
-                :checked="selectedKeys.includes(getRowKey(row, rowIndex))"
+                :checked="rowSelection.isSelected(getRowKey(row, rowIndex))"
                 class="mint-dataframe__checkbox"
                 @click.stop
                 @change="toggleRowSelect(getRowKey(row, rowIndex))"

package/src/components/DatePicker.vue

@@ -1,6 +1,10 @@
 <script setup lang="ts">
 /** Input that opens a calendar dropdown for selecting a single date, with clearable support. */
-import { ref, computed, watch, onMounted, onUnmounted } from 'vue'
+import { ref, computed, watch } from 'vue'
+import { useCalendarGrid, type CalendarGridDay } from '../composables/useCalendarGrid'
+import { useDropdownState } from '../composables/useDropdownState'
+import { useEventListener } from '../composables/useEventListener'
+import CalendarGridPanel from './CalendarGridPanel.vue'
 
 interface Props {
   modelValue?: string
@@ -24,12 +28,25 @@ const emit = defineEmits<{
   'update:modelValue': [value: string | undefined]
 }>()
 
-const isOpen = ref(false)
-const containerRef = ref<HTMLDivElement>()
-const inputRef = ref<HTMLDivElement>()
-const dropdownRef = ref<HTMLDivElement>()
+const inputRef = ref<HTMLDivElement | null>(null)
+const dropdownRef = ref<HTMLDivElement | null>(null)
 const dropdownStyle = ref<Record<string, string>>({})
-const currentMonth = ref(new Date())
+const { isOpen, rootRef: containerRef, close, toggle } = useDropdownState({
+  insideRefs: [dropdownRef],
+})
+const {
+  weekDays,
+  monthYear,
+  calendarDays,
+  isDateDisabled,
+  formatDateValue,
+  setCurrentMonthFromDate,
+  prevMonth,
+  nextMonth,
+} = useCalendarGrid({
+  min: () => props.min,
+  max: () => props.max,
+})
 
 const selectedDate = computed(() => {
   if (!props.modelValue) return null
@@ -46,114 +63,29 @@ const displayValue = computed(() => {
   })
 })
 
-const monthYear = computed(() => {
-  return currentMonth.value.toLocaleDateString('en-US', {
-    year: 'numeric',
-    month: 'long',
-  })
-})
-
-const weekDays = ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa']
-
-const calendarDays = computed(() => {
-  const year = currentMonth.value.getFullYear()
-  const month = currentMonth.value.getMonth()
-
-  const firstDay = new Date(year, month, 1)
-  const lastDay = new Date(year, month + 1, 0)
-
-  const days: { date: Date; isCurrentMonth: boolean; isDisabled: boolean }[] = []
-
-  // Previous month days
-  const startPadding = firstDay.getDay()
-  for (let i = startPadding - 1; i >= 0; i--) {
-    const date = new Date(year, month, -i)
-    days.push({ date, isCurrentMonth: false, isDisabled: isDateDisabled(date) })
-  }
-
-  // Current month days
-  for (let i = 1; i <= lastDay.getDate(); i++) {
-    const date = new Date(year, month, i)
-    days.push({ date, isCurrentMonth: true, isDisabled: isDateDisabled(date) })
-  }
-
-  // Next month days
-  const endPadding = 42 - days.length
-  for (let i = 1; i <= endPadding; i++) {
-    const date = new Date(year, month + 1, i)
-    days.push({ date, isCurrentMonth: false, isDisabled: isDateDisabled(date) })
-  }
-
-  return days
-})
-
-function isDateDisabled(date: Date): boolean {
-  if (props.min) {
-    const minDate = new Date(props.min + 'T00:00:00')
-    if (date < minDate) return true
-  }
-  if (props.max) {
-    const maxDate = new Date(props.max + 'T00:00:00')
-    if (date > maxDate) return true
-  }
-  return false
-}
-
-function isSameDay(date1: Date, date2: Date | null): boolean {
-  if (!date2) return false
-  return date1.toDateString() === date2.toDateString()
-}
-
-function isToday(date: Date): boolean {
-  return date.toDateString() === new Date().toDateString()
-}
-
-function formatDateValue(date: Date): string {
-  const year = date.getFullYear()
-  const month = String(date.getMonth() + 1).padStart(2, '0')
-  const day = String(date.getDate()).padStart(2, '0')
-  return `${year}-${month}-${day}`
-}
-
-function selectDate(day: { date: Date; isDisabled: boolean }) {
+function selectDate(day: CalendarGridDay) {
   if (day.isDisabled || props.disabled) return
   emit('update:modelValue', formatDateValue(day.date))
-  isOpen.value = false
-}
-
-function prevMonth() {
-  currentMonth.value = new Date(
-    currentMonth.value.getFullYear(),
-    currentMonth.value.getMonth() - 1,
-    1
-  )
-}
-
-function nextMonth() {
-  currentMonth.value = new Date(
-    currentMonth.value.getFullYear(),
-    currentMonth.value.getMonth() + 1,
-    1
-  )
+  close()
 }
 
 function goToToday() {
   const today = new Date()
-  currentMonth.value = new Date(today.getFullYear(), today.getMonth(), 1)
+  setCurrentMonthFromDate(today)
   if (!isDateDisabled(today)) {
     emit('update:modelValue', formatDateValue(today))
-    isOpen.value = false
+    close()
   }
 }
 
 function clear() {
   emit('update:modelValue', undefined)
-  isOpen.value = false
+  close()
 }
 
 function toggleCalendar() {
   if (props.disabled) return
-  isOpen.value = !isOpen.value
+  toggle()
 }
 
 function updateDropdownPosition() {
@@ -168,41 +100,21 @@ function updateDropdownPosition() {
   }
 }
 
-function handleClickOutside(event: MouseEvent) {
-  const target = event.target as Node
-  if (containerRef.value?.contains(target)) return
-  if (dropdownRef.value?.contains(target)) return
-  isOpen.value = false
-}
-
 function handleScrollOrResize() {
-  if (isOpen.value) isOpen.value = false
+  close()
 }
 
 watch(isOpen, (open) => {
   if (open) {
     updateDropdownPosition()
     if (selectedDate.value) {
-      currentMonth.value = new Date(
-        selectedDate.value.getFullYear(),
-        selectedDate.value.getMonth(),
-        1
-      )
+      setCurrentMonthFromDate(selectedDate.value)
     }
   }
 })
 
-onMounted(() => {
-  document.addEventListener('click', handleClickOutside)
-  window.addEventListener('scroll', handleScrollOrResize, true)
-  window.addEventListener('resize', handleScrollOrResize)
-})
-
-onUnmounted(() => {
-  document.removeEventListener('click', handleClickOutside)
-  window.removeEventListener('scroll', handleScrollOrResize, true)
-  window.removeEventListener('resize', handleScrollOrResize)
-})
+useEventListener(() => window, 'scroll', handleScrollOrResize, true)
+useEventListener(() => window, 'resize', handleScrollOrResize)
 </script>
 
 <template>
@@ -247,79 +159,34 @@ onUnmounted(() => {
           aria-modal="true"
           aria-label="Date picker"
         >
-        <div class="mint-date-picker__header">
-          <button
-            type="button"
-            aria-label="Previous month"
-            class="mint-date-picker__nav-btn"
-            @click="prevMonth"
-          >
-            <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-date-picker__month-year">{{ monthYear }}</span>
-          <button
-            type="button"
-            aria-label="Next month"
-            class="mint-date-picker__nav-btn"
-            @click="nextMonth"
-          >
-            <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>
-
-        <div class="mint-date-picker__weekdays">
-          <div
-            v-for="day in weekDays"
-            :key="day"
-            class="mint-date-picker__weekday"
-          >
-            {{ day }}
+          <CalendarGridPanel
+            :week-days="weekDays"
+            :month-year="monthYear"
+            :days="calendarDays"
+            :selected-date="selectedDate"
+            @previous-month="prevMonth"
+            @next-month="nextMonth"
+            @select="selectDate"
+          />
+
+          <div class="mint-date-picker__footer">
+            <button
+              type="button"
+              class="mint-date-picker__footer-btn mint-date-picker__today-btn"
+              @click="goToToday"
+            >
+              Today
+            </button>
+            <button
+              v-if="clearable && modelValue"
+              type="button"
+              class="mint-date-picker__footer-btn mint-date-picker__clear-btn"
+              @click="clear"
+            >
+              Clear
+            </button>
           </div>
         </div>
-
-        <div class="mint-date-picker__grid">
-          <button
-            v-for="(day, index) in calendarDays"
-            :key="index"
-            type="button"
-            :disabled="day.isDisabled"
-            :aria-label="day.date.toLocaleDateString('en-US', { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' })"
-            :aria-selected="isSameDay(day.date, selectedDate)"
-            :class="[
-              'mint-date-picker__day',
-              !day.isCurrentMonth ? 'mint-date-picker__day--other-month' : '',
-              day.isDisabled ? 'mint-date-picker__day--disabled' : '',
-              isSameDay(day.date, selectedDate) ? 'mint-date-picker__day--selected' : '',
-              isToday(day.date) && !isSameDay(day.date, selectedDate) ? 'mint-date-picker__day--today' : '',
-            ]"
-            @click="selectDate(day)"
-          >
-            {{ day.date.getDate() }}
-          </button>
-        </div>
-
-        <div class="mint-date-picker__footer">
-          <button
-            type="button"
-            class="mint-date-picker__footer-btn mint-date-picker__today-btn"
-            @click="goToToday"
-          >
-            Today
-          </button>
-          <button
-            v-if="clearable && modelValue"
-            type="button"
-            class="mint-date-picker__footer-btn mint-date-picker__clear-btn"
-            @click="clear"
-          >
-            Clear
-          </button>
-        </div>
-        </div>
       </Transition>
     </Teleport>
   </div>