The query layer for
frontend arrays

import { createQuery } from '@datafluxgrid/fluxgrid-data';

interface User {
  id:         number;
  name:       string;
  role:       'Admin' | 'Editor' | 'Viewer';
  department: string;
  salary:     number;
}

const userQuery = createQuery<User>({
  search:   ['name', 'department'],
  sort:     { field: 'salary', dir: 'desc' },
  pageSize: 5,
});

const result = userQuery.run(users, { term, page });
// result.data    → typed as User[]
// result.total   → typed as number
// result.hasNext → typed as boolean

const taskQuery = createQuery({
  search:  ['title', 'assignee'],
  groupBy: 'status',
  sort:    { field: 'priority', dir: 'asc' },
});

const { groups, total } = taskQuery.run(tasks, { term });

// groups = {
//   'Todo':        [{ title: 'Design page', ... }],
//   'In Progress': [{ title: 'Fix bug', ... }],
//   'Done':        [{ title: 'Write docs', ... }],
// }

Object.entries(groups).map(([status, items]) => (
  <section key={status}>
    <h3>{status} ({items.length})</h3>
    {items.map(task => <TaskCard task={task} />)}
  </section>
))

const saved = userQuery.toJSON();
localStorage.setItem('myQuery', JSON.stringify(saved));

const restored = createQuery.fromJSON(
  JSON.parse(localStorage.getItem('myQuery'))
);

// toJSON() produces:
// {
//   search:   ['name', 'email'],
//   sort:     { field: 'name', dir: 'asc' },
//   pageSize: 10
// }

// Use cases:
// — Save user filter view between sessions
// — Share filtered table via URL param
// — Send pipeline to server for execution

<script setup>
import { ref, computed } from 'vue';
import { createQuery } from '@datafluxgrid/fluxgrid-data';

const props = defineProps(['users']);
const term  = ref('');
const page  = ref(1);

const userQuery = createQuery({
  search: ['name', 'role'],
  sort:   { field: 'name' },
  pageSize: 10,
});

const result = computed(() =>
  userQuery.run(props.users, {
    term: term.value, page: page.value
  })
);
</script>

<template>
  <input v-model="term" @input="page = 1" />
  <p>{{ result.from }}–{{ result.to }} of {{ result.total }}</p>
  <button :disabled="!result.hasPrev" @click="page--">Prev</button>
  <button :disabled="!result.hasNext" @click="page++">Next</button>
</template>