@nu-grid/nuxt 0.1.1

package/LICENSE.md

@@ -0,0 +1,21 @@
+# MIT License
+
+Copyright (c) 2024 NuGrid Contributors
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,261 @@
+<p align="center">
+  <img src="nu-grid-logo.svg" alt="NuGrid Logo" width="400" />
+</p>
+
+<h1 align="center">NuGrid</h1>
+
+<p align="center">
+  <a href="https://npmjs.com/package/@nu-grid/nuxt"><img src="https://img.shields.io/npm/v/@nu-grid/nuxt/latest.svg?style=flat&colorA=020420&colorB=00DC82" alt="npm version"></a>
+  <a href="https://npm.chart.dev/@nu-grid/nuxt"><img src="https://img.shields.io/npm/dm/@nu-grid/nuxt.svg?style=flat&colorA=020420&colorB=00DC82" alt="npm downloads"></a>
+  <a href="https://npmjs.com/package/@nu-grid/nuxt"><img src="https://img.shields.io/npm/l/@nu-grid/nuxt.svg?style=flat&colorA=020420&colorB=00DC82" alt="License"></a>
+  <a href="https://nuxt.com"><img src="https://img.shields.io/badge/Nuxt-020420?logo=nuxt.js" alt="Nuxt"></a>
+</p>
+
+A powerful, feature-rich data grid component for Nuxt applications with virtualization, inline editing, and TanStack Table integration.
+
+- [Release Notes](/CHANGELOG.md)
+- [Demos](https://www.nug-rid.dev/demos)
+- [Documentation](https://www.nu-grid.dev)
+
+## Features
+
+- **High Performance** - Virtualized rendering handles thousands of rows smoothly
+- **Inline Editing** - Edit cells directly with built-in validation support
+- **Row Grouping** - Group data by columns with expandable/collapsible groups
+- **Keyboard Navigation** - Excel-like navigation and editing experience
+- **Theming** - Full customization with Nuxt UI design system integration
+- **TanStack Table** - Built on TanStack Table for sorting, filtering, and pagination
+
+### Built-in Cell Types
+
+- Text & Textarea
+- Number & Currency
+- Date (with date picker)
+- Boolean (checkbox)
+- Selection (dropdown)
+- Rating (star rating)
+- Lookup (autocomplete/search)
+- Action Menu
+
+### Additional Capabilities
+
+- Column resizing, pinning, and reordering
+- Row selection (single and multi-select)
+- Excel export
+- State persistence (save/restore column widths, sorting, filters)
+- Custom cell type support
+- Comprehensive event system
+
+## Installation
+
+```bash
+# Using pnpm
+pnpm add @nu-grid/nuxt @nuxt/ui @vueuse/nuxt
+
+# Using npm
+npm install @nu-grid/nuxt @nuxt/ui @vueuse/nuxt
+
+# Using yarn
+yarn add @nu-grid/nuxt @nuxt/ui @vueuse/nuxt
+```
+
+Add `@nu-grid/nuxt` to your `nuxt.config.ts`:
+
+```ts
+export default defineNuxtConfig({
+  modules: ['@nuxt/ui', '@nu-grid/nuxt'],
+})
+```
+
+### CSS Setup
+
+NuGrid requires its CSS to be imported in your application's main stylesheet. This ensures Tailwind scans the component classes for proper theming and focus styling.
+
+Add the following to your `main.css` (or equivalent):
+
+```css
+@import "tailwindcss";
+@import "@nuxt/ui";
+@import "@nu-grid/nuxt/css";
+```
+
+## Quick Start
+
+```vue
+<script setup lang="ts">
+import type { NuGridColumn } from '@nu-grid/nuxt/types'
+
+interface Person {
+  id: number
+  name: string
+  email: string
+  age: number
+}
+
+const columns: NuGridColumn<Person>[] = [
+  { accessorKey: 'name', header: 'Name' },
+  { accessorKey: 'email', header: 'Email' },
+  { accessorKey: 'age', header: 'Age', cellType: 'number' }
+]
+
+const data = ref<Person[]>([
+  { id: 1, name: 'John Doe', email: 'john@example.com', age: 32 },
+  { id: 2, name: 'Jane Smith', email: 'jane@example.com', age: 28 },
+  { id: 3, name: 'Bob Wilson', email: 'bob@example.com', age: 45 }
+])
+</script>
+
+<template>
+  <NuGrid :columns="columns" :data="data" />
+</template>
+```
+
+### Enabling Editing
+
+```vue
+<script setup lang="ts">
+const columns: NuGridColumn<Person>[] = [
+  { accessorKey: 'name', header: 'Name', editable: true },
+  { accessorKey: 'email', header: 'Email', editable: true },
+  {
+    accessorKey: 'age',
+    header: 'Age',
+    cellType: 'number',
+    editable: true
+  }
+]
+</script>
+
+<template>
+  <NuGrid
+    :columns="columns"
+    :data="data"
+    editable
+    @cell-value-changed="handleChange"
+  />
+</template>
+```
+
+### With Virtualization
+
+For large datasets, enable virtualization for optimal performance:
+
+```vue
+<template>
+  <NuGrid
+    :columns="columns"
+    :data="largeDataset"
+    virtualized
+    :row-height="40"
+    style="height: 600px"
+  />
+</template>
+```
+
+### Row Grouping
+
+```vue
+<template>
+  <NuGridGroup
+    :columns="columns"
+    :data="data"
+    :group-by="['department', 'status']"
+  />
+</template>
+```
+
+## Props
+
+| Prop           | Type                                | Default       | Description                |
+| -------------- | ----------------------------------- | ------------- | -------------------------- |
+| `columns`      | `NuGridColumn<T>[]`                 | required      | Column definitions         |
+| `data`         | `T[]`                               | required      | Row data array             |
+| `editable`     | `boolean`                           | `false`       | Enable inline editing      |
+| `virtualized`  | `boolean`                           | `false`       | Enable virtualization      |
+| `rowHeight`    | `number`                            | `40`          | Row height in pixels       |
+| `rowSelection` | `boolean \| 'single' \| 'multiple'` | `false`       | Enable row selection       |
+| `theme`        | `NuGridTheme`                       | default theme | Custom theme configuration |
+
+## Events
+
+| Event                   | Payload                               | Description             |
+| ----------------------- | ------------------------------------- | ----------------------- |
+| `cell-click`            | `{ row, column, value }`              | Cell was clicked        |
+| `cell-double-click`     | `{ row, column, value }`              | Cell was double-clicked |
+| `cell-value-changed`    | `{ row, column, oldValue, newValue }` | Cell value was edited   |
+| `row-selection-changed` | `{ selectedRows }`                    | Row selection changed   |
+| `validation-error`      | `{ row, column, error }`              | Validation failed       |
+
+See [EVENTS.md](/EVENTS.md) for a complete event reference.
+
+## Development
+
+```bash
+# Install dependencies
+pnpm install
+
+# Generate type stubs and prepare
+pnpm run dev:prepare
+
+# Start development server with playground
+pnpm run dev
+
+# Start documentation site
+pnpm run docs
+
+# Run tests
+pnpm run test
+
+# Run tests in watch mode
+pnpm run test:watch
+
+# Run E2E tests
+pnpm run test:e2e
+
+# Type check
+pnpm run test:types
+
+# Lint
+pnpm run lint
+
+# Format
+pnpm run format
+
+# Build for production
+pnpm run prepack
+
+# Release
+pnpm run release
+```
+
+## Project Structure
+
+```
+src/
+├── module.ts              # Nuxt module entry
+└── runtime/
+    ├── components/        # Vue components
+    ├── composables/       # Vue composables
+    ├── cell-types/        # Built-in cell types
+    ├── types/             # TypeScript definitions
+    └── themes/            # Theme configurations
+
+docs/                      # Documentation site
+playgrounds/nuxt/          # Development playground
+test/                      # Unit tests
+e2e/                       # End-to-end tests
+```
+
+## Contributing
+
+Contributions are welcome! Please read our contributing guidelines before submitting a pull request.
+
+1. Fork the repository
+2. Create your feature branch (`git checkout -b feature/amazing-feature`)
+3. Commit your changes (`git commit -m 'Add amazing feature'`)
+4. Push to the branch (`git push origin feature/amazing-feature`)
+5. Open a Pull Request
+
+## License
+
+[MIT](./LICENSE.md)

package/dist/module.d.mts

@@ -0,0 +1,13 @@
+import * as _nuxt_schema from '@nuxt/schema';
+
+interface ModuleOptions {
+    /**
+     * Prefix for NuGrid components
+     * @default 'NuGrid'
+     */
+    prefix?: string;
+}
+declare const _default: _nuxt_schema.NuxtModule<ModuleOptions, ModuleOptions, false>;
+
+export { _default as default };
+export type { ModuleOptions };

package/dist/module.json

@@ -0,0 +1,9 @@
+{
+  "name": "@nu-grid/nuxt",
+  "configKey": "nuGrid",
+  "version": "0.1.1",
+  "builder": {
+    "@nuxt/module-builder": "1.0.2",
+    "unbuild": "3.6.1"
+  }
+}

package/dist/module.mjs

@@ -0,0 +1,52 @@
+import { defineNuxtModule, createResolver, addPlugin, addImports, addComponentsDir } from '@nuxt/kit';
+
+const module$1 = defineNuxtModule({
+  meta: {
+    name: "@nu-grid/nuxt",
+    configKey: "nuGrid"
+  },
+  // Default configuration options of the Nuxt module
+  defaults: {
+    prefix: "NuGrid"
+  },
+  setup(options, nuxt) {
+    const resolver = createResolver(import.meta.url);
+    const runtimeDir = resolver.resolve("./runtime");
+    nuxt.options.alias["#nu-grid"] = runtimeDir;
+    nuxt.options.alias["#nu-grid/types"] = resolver.resolve("./runtime/types");
+    nuxt.options.alias["#nu-grid/types/*"] = resolver.resolve("./runtime/types/*");
+    nuxt.options.alias["#nu-grid/composables"] = resolver.resolve("./runtime/composables");
+    nuxt.options.alias["#nu-grid/composables/*"] = resolver.resolve("./runtime/composables/*");
+    nuxt.options.alias["#nu-grid/cell-types"] = resolver.resolve("./runtime/cell-types");
+    nuxt.options.alias["#nu-grid/cell-types/*"] = resolver.resolve("./runtime/cell-types/*");
+    nuxt.options.alias["#nu-grid/config"] = resolver.resolve("./runtime/config");
+    nuxt.options.alias["#nu-grid/config/*"] = resolver.resolve("./runtime/config/*");
+    nuxt.options.alias["#nu-grid/cells"] = resolver.resolve("./runtime/types/cells");
+    addPlugin(resolver.resolve("./runtime/plugin"));
+    addImports([
+      {
+        name: "useNuGridCellEditor",
+        from: resolver.resolve("runtime/composables/useNuGridCellEditor")
+      },
+      {
+        name: "useNuGridCellTypeRegistry",
+        from: resolver.resolve("runtime/composables/useNuGridCellTypeRegistry")
+      },
+      {
+        name: "nuGridCellTypeRegistry",
+        from: resolver.resolve("runtime/composables/useNuGridCellTypeRegistry")
+      }
+    ]);
+    addComponentsDir({
+      path: resolver.resolve("runtime/components"),
+      prefix: options.prefix
+    });
+    addComponentsDir({
+      path: resolver.resolve("runtime/cell-types"),
+      prefix: options.prefix,
+      pathPrefix: false
+    });
+  }
+});
+
+export { module$1 as default };

package/dist/runtime/cell-types/action-menu/ActionMenuRenderer.d.vue.ts

@@ -0,0 +1,12 @@
+import type { Cell, Row } from '@tanstack/vue-table';
+interface Props {
+    row: Row<any>;
+    cell?: Cell<any, unknown>;
+}
+declare const __VLS_export: import("vue").DefineComponent<Props, {
+    openMenu: () => void;
+    closeMenu: () => void;
+    isOpen: any;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/cell-types/action-menu/ActionMenuRenderer.vue

@@ -0,0 +1,123 @@
+<script setup>
+defineOptions({ inheritAttrs: false });
+const props = defineProps({
+  row: { type: Object, required: true },
+  cell: { type: Object, required: false }
+});
+const meta = computed(
+  () => props.cell?.column.columnDef.meta
+);
+const isActionsEnabled = computed(() => {
+  if (!meta.value) return false;
+  if (meta.value.enabledRef?.value === false) return false;
+  if (meta.value.isRowEnabledFn) {
+    return meta.value.isRowEnabledFn(props.row);
+  }
+  return meta.value.actionMenuEnabled ?? true;
+});
+const menuItems = computed(() => {
+  if (!meta.value?.getActions || !isActionsEnabled.value) return [];
+  return meta.value.getActions(props.row);
+});
+const buttonConfig = computed(() => ({
+  icon: meta.value?.button?.icon ?? "i-lucide-ellipsis-vertical",
+  color: meta.value?.button?.color ?? "neutral",
+  variant: meta.value?.button?.variant ?? "ghost",
+  class: meta.value?.button?.class ?? "ml-auto"
+}));
+const buttonProps = computed(() => ({
+  "icon": buttonConfig.value.icon,
+  "color": buttonConfig.value.color,
+  "variant": buttonConfig.value.variant,
+  "class": buttonConfig.value.class,
+  "disabled": !isActionsEnabled.value,
+  "tabindex": -1,
+  "aria-label": "Actions"
+}));
+const containerRef = ref(null);
+function getOrCreateMenuOpenRef(rowId) {
+  const states = meta.value?.menuOpenStates;
+  if (!states) return null;
+  if (!states.has(rowId)) {
+    states.set(rowId, ref(false));
+  }
+  return states.get(rowId);
+}
+const menuOpen = computed({
+  get: () => {
+    const rowId = String(props.row.id);
+    const menuRef = getOrCreateMenuOpenRef(rowId);
+    return menuRef?.value ?? false;
+  },
+  set: (value) => {
+    const rowId = String(props.row.id);
+    const menuRef = getOrCreateMenuOpenRef(rowId);
+    if (menuRef) {
+      menuRef.value = value;
+    }
+  }
+});
+watch(
+  () => menuOpen.value,
+  (isOpen, wasOpen) => {
+    if (wasOpen && !isOpen) {
+      nextTick(() => {
+        const cell = containerRef.value?.closest("[data-cell-index]");
+        if (cell) {
+          cell.focus({ preventScroll: true });
+        }
+      });
+    }
+  }
+);
+function handleKeyDown(event) {
+  if (!menuOpen.value && (event.key === "ArrowDown" || event.key === "ArrowUp")) {
+    event.stopPropagation();
+    event.preventDefault();
+  }
+}
+function openMenuOnClick() {
+  if (isActionsEnabled.value) {
+    menuOpen.value = true;
+  }
+}
+function openMenuOnKeydown(event) {
+  if (event.key === "Enter" || event.key === " ") {
+    event.preventDefault();
+    if (isActionsEnabled.value) {
+      menuOpen.value = true;
+    }
+  }
+}
+defineExpose({
+  openMenu: () => {
+    if (isActionsEnabled.value) menuOpen.value = true;
+  },
+  closeMenu: () => {
+    menuOpen.value = false;
+  },
+  isOpen: menuOpen
+});
+</script>
+
+<template>
+  <div
+    ref="containerRef"
+    class="flex items-center justify-end"
+    data-action-menu-cell
+    @keydown.capture="handleKeyDown"
+  >
+    <!-- Performance optimization: Only render UDropdownMenu when menu is open -->
+    <!-- When closed, render a simple button that's much lighter weight -->
+    <UDropdownMenu
+      v-if="menuOpen"
+      v-model:open="menuOpen"
+      :content="{ align: 'end' }"
+      :items="menuItems"
+    >
+      <UButton v-bind="buttonProps" />
+    </UDropdownMenu>
+    <!-- Lightweight button when menu is closed - no UDropdownMenu overhead -->
+    <UButton v-else v-bind="buttonProps" @click="openMenuOnClick" @keydown="openMenuOnKeydown" />
+  </div>
+</template>

package/dist/runtime/cell-types/action-menu/ActionMenuRenderer.vue.d.ts

@@ -0,0 +1,12 @@
+import type { Cell, Row } from '@tanstack/vue-table';
+interface Props {
+    row: Row<any>;
+    cell?: Cell<any, unknown>;
+}
+declare const __VLS_export: import("vue").DefineComponent<Props, {
+    openMenu: () => void;
+    closeMenu: () => void;
+    isOpen: any;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/cell-types/action-menu/index.d.ts

@@ -0,0 +1,8 @@
+import type { NuGridCellType } from '../../types/cells.js';
+/**
+ * Action menu cell type
+ * Action menu with special keyboard handling:
+ * - Space or Enter: Open the action menu (only opens, doesn't toggle - closing is done via Escape or clicking outside)
+ * - Escape: Close the action menu (handled by UDropdownMenu component)
+ */
+export declare const actionMenuCellType: NuGridCellType;

package/dist/runtime/cell-types/action-menu/index.js

@@ -0,0 +1,28 @@
+import { ref } from "vue";
+import ActionMenuRenderer from "./ActionMenuRenderer.vue";
+export const actionMenuCellType = {
+  name: "action-menu",
+  displayName: "Action Menu",
+  description: "Action menu column with row-specific actions",
+  // No editor for action menu - it's not tied to data
+  renderer: ActionMenuRenderer,
+  keyboardHandler: (event, context) => {
+    const { isFocused, row, cell } = context;
+    if (isFocused && (event.key === " " || event.key === "Enter")) {
+      const meta = cell.column.columnDef.meta;
+      const menuOpenStates = meta?.menuOpenStates;
+      if (menuOpenStates) {
+        const rowId = String(row.id);
+        if (!menuOpenStates.has(rowId)) {
+          menuOpenStates.set(rowId, ref(false));
+        }
+        const menuOpenRef = menuOpenStates.get(rowId);
+        if (!menuOpenRef.value) {
+          menuOpenRef.value = true;
+        }
+        return { handled: true, preventDefault: true, stopPropagation: true };
+      }
+    }
+    return { handled: false };
+  }
+};

package/dist/runtime/cell-types/boolean/BooleanEditor.d.vue.ts

@@ -0,0 +1,15 @@
+import type { NuGridCellEditorProps } from '../../types/index.js';
+type __VLS_Props = NuGridCellEditorProps;
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    "update:modelValue": (value: any) => any;
+    "update:isNavigating": (value: boolean) => any;
+    "stop-editing": (moveDirection?: "up" | "down" | "next" | "previous" | undefined) => any;
+    "cancel-editing": () => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onUpdate:modelValue"?: ((value: any) => any) | undefined;
+    "onUpdate:isNavigating"?: ((value: boolean) => any) | undefined;
+    "onStop-editing"?: ((moveDirection?: "up" | "down" | "next" | "previous" | undefined) => any) | undefined;
+    "onCancel-editing"?: (() => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/cell-types/boolean/BooleanEditor.vue

@@ -0,0 +1,32 @@
+<script setup>
+import { ref } from "vue";
+import NuGridCellCheckbox from "../../components/NuGridCellCheckbox.vue";
+import { useNuGridCellEditor } from "../../composables/useNuGridCellEditor";
+defineOptions({ inheritAttrs: false });
+const props = defineProps({
+  modelValue: { type: null, required: true },
+  cell: { type: null, required: true },
+  row: { type: Object, required: true },
+  isNavigating: { type: Boolean, required: true },
+  shouldFocus: { type: Boolean, required: true },
+  validationError: { type: [String, null], required: false },
+  showValidationErrors: { type: String, required: false },
+  interactionRouter: { type: Object, required: false }
+});
+const emit = defineEmits(["update:modelValue", "stop-editing", "cancel-editing", "update:isNavigating"]);
+const checkboxRef = ref(null);
+const { handleKeydown, handleBlur } = useNuGridCellEditor(props, emit, checkboxRef, () => {
+  checkboxRef.value?.focus({ preventScroll: true });
+});
+</script>
+
+<template>
+  <NuGridCellCheckbox
+    ref="checkboxRef"
+    :model-value="modelValue"
+    :interactive="true"
+    @update:model-value="emit('update:modelValue', $event)"
+    @keydown="handleKeydown"
+    @blur="handleBlur"
+  />
+</template>

package/dist/runtime/cell-types/boolean/BooleanEditor.vue.d.ts

@@ -0,0 +1,15 @@
+import type { NuGridCellEditorProps } from '../../types/index.js';
+type __VLS_Props = NuGridCellEditorProps;
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    "update:modelValue": (value: any) => any;
+    "update:isNavigating": (value: boolean) => any;
+    "stop-editing": (moveDirection?: "up" | "down" | "next" | "previous" | undefined) => any;
+    "cancel-editing": () => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onUpdate:modelValue"?: ((value: any) => any) | undefined;
+    "onUpdate:isNavigating"?: ((value: boolean) => any) | undefined;
+    "onStop-editing"?: ((moveDirection?: "up" | "down" | "next" | "previous" | undefined) => any) | undefined;
+    "onCancel-editing"?: (() => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/cell-types/boolean/BooleanFilter.d.vue.ts

@@ -0,0 +1,7 @@
+import type { NuGridFilterContext } from '../../types/cells.js';
+interface Props {
+    context: NuGridFilterContext;
+}
+declare const __VLS_export: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/cell-types/boolean/BooleanFilter.vue

@@ -0,0 +1,42 @@
+<script setup>
+import { computed } from "vue";
+const props = defineProps({
+  context: { type: Object, required: true }
+});
+const filterValue = computed({
+  get: () => props.context.filterValue.value,
+  set: (value) => props.context.setFilterValue(value)
+});
+const options = [
+  { value: true, label: "True" },
+  { value: false, label: "False" },
+  { value: null, label: "All" }
+];
+function clearFilter() {
+  filterValue.value = null;
+  props.context.clearFilter();
+}
+</script>
+
+<template>
+  <div class="min-w-[200px] space-y-2 p-2">
+    <div class="flex items-center gap-2">
+      <USelect
+        v-model="filterValue"
+        :options="options"
+        option-attribute="label"
+        value-attribute="value"
+        class="flex-1"
+        autofocus
+      />
+      <UButton
+        v-if="context.isFiltered"
+        icon="i-heroicons-x-mark"
+        size="xs"
+        color="neutral"
+        variant="ghost"
+        @click="clearFilter"
+      />
+    </div>
+  </div>
+</template>

package/dist/runtime/cell-types/boolean/BooleanFilter.vue.d.ts

@@ -0,0 +1,7 @@
+import type { NuGridFilterContext } from '../../types/cells.js';
+interface Props {
+    context: NuGridFilterContext;
+}
+declare const __VLS_export: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;