Vue 3 Complex Component Development: API Design for Select and Pagination

type SelectOption = string | number | Record<string, any>

interface Props {
  modelValue?: string | number
  options?: SelectOption[]      // Union type, rejects bare any
  labelKey?: string             // Default 'label'
  valueKey?: string             // Default 'value'
  placeholder?: string
  name?: string                 // Supports native form submission
  size?: 'sm' | 'md' | 'lg'
  disabled?: boolean
  error?: boolean
}

<template>
  <select
    class="mg-select"
    :class="[`mg-select-${size}`, { 'mg-select-error': error }]"
    :value="modelValue"
    :disabled="disabled"
    :name="name"
    v-bind="$attrs"
    @change="handleChange"
  >
    <option v-if="placeholder" value="" disabled hidden>
      {{ placeholder }}
    </option>
    <option
      v-for="item in options || []"
      :key="getValue(item)"
      :value="getValue(item)"
      :disabled="item.disabled"
    >
      {{ getLabel(item) }}
    </option>
  </select>
</template>

<script setup lang="ts">
// ... type definitions

const getLabel = (item: any): string => {
  if (item === null || item === undefined) return ''
  if (typeof item !== 'object') return String(item)
  const label = item[props.labelKey]
  return label !== undefined ? String(label) : String(item)
}

const getValue = (item: any): any => {
  if (item === null || item === undefined) return undefined
  if (typeof item !== 'object') return item
  const val = item[props.valueKey]
  return val !== undefined ? val : item
}

// 🔥 Core: Solving the fatal issue where native select always returns strings
const handleChange = (event: Event) => {
  const target = event.target as HTMLSelectElement
  const rawValue = target.value

  // Attempt to find the original type (number or object value) from the original options
  const originalItem = (props.options || []).find(item => String(getValue(item)) === rawValue)
  const finalValue = originalItem !== undefined ? getValue(originalItem) : rawValue

  emit('update:modelValue', finalValue)
  emit('change', finalValue)
}
</script>

<!-- Object array (default fields) -->
<Select v-model="category" :options="categories" name="category" />

<!-- Custom field names -->
<Select v-model="category" :options="cats" label-key="name" value-key="id" />

<!-- String array (type preserved automatically) -->
<Select v-model="color" :options="['Red', 'Green', 'Blue']" />

<!-- Number array -->
<Select v-model="num" :options="[10, 20, 30]" />

<!-- Disabled options -->
<Select v-model="status" :options="statusOptions" />

interface Props {
  currentPage: number       // v-model:current-page
  totalPages: number
  size?: 'sm' | 'md' | 'lg'
}

<template>
  <nav class="mg-pagination" :class="`mg-pagination-${size}`">
    <button class="mg-pagination-btn" :disabled="currentPage === 1" @click="goPrev">
      Previous
    </button>

    <span v-if="!editing" class="mg-pagination-current" @click="startEdit">
      {{ currentPage }}
    </span>
    <input
      v-else
      ref="inputRef"
      v-model="inputPage"
      type="number"
      class="mg-pagination-input"
      :min="1"
      :max="totalPages"
      @blur="commit"
      @keyup.enter="commit"
    />

    <span class="mg-pagination-sep">/</span>
    <span class="mg-pagination-total">{{ totalPages }}</span>

    <button class="mg-pagination-btn" :disabled="currentPage === totalPages" @click="goNext">
      Next
    </button>
  </nav>
</template>

<script setup lang="ts">
import { ref, nextTick } from 'vue'

const props = defineProps<{ currentPage: number; totalPages: number; size?: string }>()
const emit = defineEmits<{ 'update:currentPage': [page: number] }>()

const editing = ref(false)
const inputPage = ref(props.currentPage)
const inputRef = ref<HTMLInputElement>()

const goPrev = () => { if (props.currentPage > 1) emit('update:currentPage', props.currentPage - 1) }
const goNext = () => { if (props.currentPage < props.totalPages) emit('update:currentPage', props.currentPage + 1) }

const startEdit = () => {
  editing.value = true
  inputPage.value = props.currentPage
  nextTick(() => inputRef.value?.focus())
}

const commit = () => {
  editing.value = false
  const raw = inputPage.value
  const pageNum = parseInt(String(raw), 10)

  // Invalid input: abandon without updating the page
  if (isNaN(pageNum)) return

  let page = Math.min(Math.max(pageNum, 1), props.totalPages)
  if (page !== props.currentPage) {
    emit('update:currentPage', page)
  }
}
</script>

// composables/useKeyboardPagination.ts
import { onMounted, onUnmounted } from 'vue'

export function useKeyboardPagination(onPrev: () => void, onNext: () => void) {
  const handleKeyDown = (e: KeyboardEvent) => {
    // 🔥 Critical: Don't trigger pagination if focus is in an input or textarea
    const target = e.target as HTMLElement
    if (target.tagName === 'INPUT' || target.tagName === 'TEXTAREA') return

    if (e.key === 'ArrowLeft') onPrev()
    if (e.key === 'ArrowRight') onNext()
  }

  onMounted(() => window.addEventListener('keydown', handleKeyDown))
  onUnmounted(() => window.removeEventListener('keydown', handleKeyDown))
}

// composables/useMoongatePagination.ts
import { ref, type Ref } from 'vue'
import { useRouteQueryNumber } from './useRouteQuery'
import { useKeyboardPagination } from './useKeyboardPagination'

export function useMoongatePagination(totalPages: Ref<number>) {
  const page = useRouteQueryNumber('page', { defaultValue: 1 })

  const goPrev = () => { if (page.value > 1) page.value-- }
  const goNext = () => { if (page.value < totalPages.value) page.value++ }

  // Keyboard events are assembled internally
  useKeyboardPagination(goPrev, goNext)

  return { page, goPrev, goNext }
}

<script setup>
const totalPages = ref(10)
const { page, goPrev, goNext } = useMoongatePagination(totalPages)
// No need to handle keyboard events separately — everything is automatic
</script>

<template>
  <Pagination v-model:current-page="page" :total-pages="totalPages" />
  <!-- You can also use custom buttons linked to the pagination state -->
  <button @click="goPrev">Previous</button>
  <button @click="goNext">Next</button>
</template>

┌─────────────────────────────────────────────────────────────┐
│                    Complex Component Data Flow               │
│  ┌─────────────┐    ┌─────────────┐    ┌─────────────┐     │
│  │ External    │ -> │ Data        │ -> │ Internal    │     │
│  │ Data        │    │ Adapter     │    │ State       │     │
│  │ (options)   │    │ (getLabel/  │    │ (selected)  │     │
│  └─────────────┘    │  getValue)  │    └──────┬──────┘     │
│                     └─────────────┘           │            │
│                                              ↓            │
│  ┌─────────────┐    ┌─────────────┐    ┌─────────────┐     │
│  │ Global      │ <- │ State       │ <- │ User        │     │
│  │ Environment │    │ Synchronizer│    │ Interaction │     │
│  │ (route/key) │    │ (watch/     │    │ (click/     │     │
│  └─────────────┘    │  event)     │    │  keyboard)  │     │
│                     └─────────────┘    └─────────────┘     │
└─────────────────────────────────────────────────────────────┘

// ❌ SSR error: document is not defined
watch(() => modelValue.value, (val) => {
  if (val) {
    document.body.style.overflow = 'hidden'  // ← document does not exist on server
  }
}, { immediate: true })

const isBrowser = typeof window !== 'undefined' && typeof document !== 'undefined'

// ✅ Correct approach
watch(() => modelValue.value, (val) => {
  if (!isBrowser) return  // SSR safe
  if (val) {
    document.body.style.overflow = 'hidden'
    window.addEventListener('keydown', handleKeydown)
  }
}, { immediate: true })

onMounted(() => {
  if (!isBrowser) return
  // Only execute DOM operations in browser environment
})

onBeforeUnmount(() => {
  if (!isBrowser) return
  document.body.style.overflow = ''
  window.removeEventListener('keydown', handleKeydown)
})