[Features] useRouteQuery transform data (get/set)

[Ken Kieu]

Clear and concise description of the problem

Clear and concise description of the problem

Some time I would like to transform data before use. In my case. There are two case to use.

// orders?page=2&orderBy=no:asc&orderBy=status:desc

const filters = reactive({
  page: useRouteQuery('page', '1', {
    transform: ({
      get: (value) => parseInt(value),
      set: (value) => value.toString()
    })
  }),
  orderBy: useRouteQuery('orderBy', [], {
    transform: ({
      get: (value) => value.map((v) => v.split(':'))
        .map(([key, order]) => ({
          key: key.toLowerCase(),
          order: order.toLowerCase(),
        })),
      set: (value) => value.map(({ key, order }) => `${key}:${order}`)
    })
  })
})

From orders?page=2&orderBy=no:asc&orderBy=status:desc
We will have

filters.page = 2
filters.orderBy = [{ key: 'no', order: 'asc' }, { key: 'status', order: 'desc' }]

Otherways

filters.page = 2
filters.orderBy = [{ key: 'no', order: 'desc' }, { key: 'time', order: 'desc' }]
// =>> orders?page=2&orderBy=no:desc&orderBy=time:desc

Suggested solution

Add transform (get/set) function in ReactiveRouteOptions

Alternative

No response

Additional context

No response

Validations

• Follow our Code of Conduct
• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn't already an issue that request the same feature to avoid creating a duplicate.