Конвертация данных

toQueryParams(params: Record<string, unknown>): URLSearchParams

toQueryParams({ page: 1, limit: 10 })
// URLSearchParams: "page=1&limit=10"

toQueryParams({ search: 'test', page: null })
// null/undefined значения пропускаются: "search=test"

toQueryParams({ ids: [1, 2, 3] })
// Массивы с индексами: "ids[0]=1&ids[1]=2&ids[2]=3"

toQueryParams({ 'tags[]': ['a', 'b'] })
// Массивы с []: "tags[]=a&tags[]=b"

const filters = { page: 1, search: 'order', status: 'active' }
const params = toQueryParams(filters)
const response = await fetch(`/api/orders?${params.toString()}`)

interface SelectOption {
  label: string
  value: string | number
}

toSelectOptions<T>(
  items: T[] | null | undefined,
  labelKey?: keyof T | ((item: T) => string),
  valueKey?: keyof T | ((item: T) => string | number),
  valueSuffix?: string
): SelectOption[]

const services = [
  { id: 1, title: { ru: 'Услуга 1' } },
  { id: 2, title: { ru: 'Услуга 2' } }
]

// С путём к вложенному значению
toSelectOptions(services, 'title.ru', 'id')
// [{ label: 'Услуга 1', value: 1 }, { label: 'Услуга 2', value: 2 }]

// С кастомной функцией
toSelectOptions(users, u => `${u.first_name} ${u.last_name}`, 'id')
// [{ label: 'Иван Иванов', value: 1 }, ...]

// С суффиксом для value
toSelectOptions(services, 'title.ru', 'id', '_default')
// [{ label: 'Услуга 1', value: '1_default' }, ...]

<script setup>
const cities = await $fetch('/api/cities')
const cityOptions = toSelectOptions(cities, 'name', 'id')
</script>

<template>
  <USelect v-model="selectedCity" :items="cityOptions" />
</template>

convertToFormData(obj: Record<string, unknown>): FormData

const data = {
  title: { ru: 'Заголовок', kk: 'Тақырып' },
  file: fileInput.files[0]
}

const formData = convertToFormData(data)
// FormData с полями:
// - title[ru]: "Заголовок"
// - title[kk]: "Тақырып"
// - file: File

const uploadDocument = async (file: File, metadata: object) => {
  const formData = convertToFormData({
    document: file,
    ...metadata
  })

  return await $fetch('/api/documents', {
    method: 'POST',
    body: formData
  })
}

getQueryValue<T>(
  query: Record<string, string | null | (string | null)[] | undefined>,
  key: string,
  defaultValue: T
): T

const query = { page: '1', search: 'test' }

getQueryValue(query, 'page', 1)        // "1"
getQueryValue(query, 'search', '')     // "test"
getQueryValue(query, 'missing', 'default')  // "default"

// Если значение — массив, возвращает первый элемент
const queryWithArray = { ids: ['1', '2'] }
getQueryValue(queryWithArray, 'ids', '')  // "1"

<script setup>
const route = useRoute()

const page = getQueryValue(route.query, 'page', '1')
const search = getQueryValue(route.query, 'search', '')
</script>

getNestedValue<T = unknown>(
  obj: Record<string, unknown> | null | undefined,
  path: string | string[]
): T | undefined

const order = {
  customer: {
    address: {
      city: 'Алматы'
    }
  }
}

getNestedValue(order, 'customer.address.city')   // "Алматы"
getNestedValue(order, ['customer', 'address', 'city'])  // "Алматы"
getNestedValue(order, 'customer.phone')          // undefined
getNestedValue(null, 'any.path')                 // undefined

const columns = [
  {
    key: 'city',
    label: 'Город',
    cell: ({ row }) => getNestedValue(row, 'customer.address.city') ?? '—'
  }
]