@nu-grid/nuxt 0.1.1

package/dist/runtime/cell-types/rating/RatingEditor.vue

@@ -0,0 +1,219 @@
+<script setup>
+import { computed, nextTick, onMounted, ref, watch } from "vue";
+import { useNuGridCellEditor } from "../../composables";
+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 containerRef = ref(null);
+const clearButtonRef = ref(null);
+const hoveredStar = ref(null);
+const selectedStar = ref(null);
+const focusedIndex = ref(null);
+const dummyRef = ref(null);
+const {
+  handleKeydown: baseHandleKeydown,
+  handleBlur: baseHandleBlur,
+  scheduleNavigation
+} = useNuGridCellEditor(props, emit, dummyRef);
+const rating = computed({
+  get: () => props.modelValue ?? null,
+  set: (value) => emit("update:modelValue", value)
+});
+watch(
+  () => props.modelValue,
+  (value) => {
+    selectedStar.value = value ?? null;
+    if (focusedIndex.value === null) {
+      focusedIndex.value = value ?? 0;
+    }
+  },
+  { immediate: true }
+);
+watch(
+  () => props.shouldFocus,
+  (shouldFocus) => {
+    if (shouldFocus && containerRef.value) {
+      nextTick(() => {
+        containerRef.value?.focus({ preventScroll: true });
+      });
+    }
+  },
+  { immediate: true }
+);
+onMounted(() => {
+  if (props.shouldFocus && containerRef.value) {
+    nextTick(() => {
+      containerRef.value?.focus({ preventScroll: true });
+    });
+  }
+});
+function handleContainerBlur(event) {
+  const nextTarget = event.relatedTarget;
+  if (nextTarget && containerRef.value?.contains(nextTarget)) return;
+  baseHandleBlur();
+}
+function setRating(value, closeEditor = false) {
+  const selection = window.getSelection?.();
+  if (selection && selection.type !== "None") {
+    selection.removeAllRanges();
+  }
+  rating.value = value;
+  selectedStar.value = value;
+  focusedIndex.value = value ?? 0;
+  if (closeEditor) {
+    emit("stop-editing");
+  }
+}
+function handleKeydown(e) {
+  e.stopPropagation();
+  if (e.key === "ArrowLeft") {
+    e.preventDefault();
+    if (focusedIndex.value === null || focusedIndex.value === 0) {
+      focusedIndex.value = 5;
+      selectedStar.value = 5;
+      rating.value = 5;
+    } else if (focusedIndex.value === 1) {
+      focusedIndex.value = 0;
+      selectedStar.value = null;
+      rating.value = null;
+    } else {
+      focusedIndex.value = focusedIndex.value - 1;
+      selectedStar.value = focusedIndex.value;
+      rating.value = focusedIndex.value;
+    }
+    return;
+  }
+  if (e.key === "ArrowRight") {
+    e.preventDefault();
+    if (focusedIndex.value === null || focusedIndex.value === 0) {
+      focusedIndex.value = 1;
+      selectedStar.value = 1;
+      rating.value = 1;
+    } else if (focusedIndex.value >= 5) {
+      focusedIndex.value = 0;
+      selectedStar.value = null;
+      rating.value = null;
+    } else {
+      focusedIndex.value = focusedIndex.value + 1;
+      selectedStar.value = focusedIndex.value;
+      rating.value = focusedIndex.value;
+    }
+    return;
+  }
+  if (e.key === "0") {
+    e.preventDefault();
+    setRating(null, true);
+    return;
+  }
+  if (e.key >= "1" && e.key <= "5") {
+    e.preventDefault();
+    const value = Number.parseInt(e.key, 10);
+    setRating(value, true);
+    return;
+  }
+  if (e.key === "Enter") {
+    e.preventDefault();
+    if (focusedIndex.value === 0) {
+      setRating(null, true);
+    } else {
+      emit("stop-editing");
+    }
+    return;
+  }
+  if (e.key === " ") {
+    e.preventDefault();
+    if (focusedIndex.value === 0) {
+      setRating(null, false);
+    } else if (focusedIndex.value !== null && focusedIndex.value >= 1 && focusedIndex.value <= 5) {
+      setRating(focusedIndex.value, false);
+    }
+    return;
+  }
+  if (e.key === "Tab") {
+    e.preventDefault();
+    scheduleNavigation(e.shiftKey ? "previous" : "next");
+    return;
+  }
+  if (e.key === "Escape") {
+    e.preventDefault();
+    emit("cancel-editing");
+    return;
+  }
+  if (e.key === "ArrowUp" || e.key === "ArrowDown") {
+    e.preventDefault();
+    scheduleNavigation(e.key === "ArrowUp" ? "up" : "down");
+    return;
+  }
+  baseHandleKeydown(e);
+}
+</script>
+
+<template>
+  <div
+    ref="containerRef"
+    class="flex items-center gap-1 rounded border-2 border-transparent p-1 outline-none select-none
+      focus-visible:border-primary-500"
+    tabindex="0"
+    @keydown="handleKeydown"
+    @blur="handleContainerBlur"
+    @mouseleave="hoveredStar = null"
+    @focus="
+  () => {
+    if (focusedIndex === null) focusedIndex = selectedStar ?? 0;
+  }
+"
+    @mousedown.prevent.stop
+    @pointerdown.prevent.stop
+    @selectstart.prevent
+  >
+    <button
+      v-for="star in 5"
+      :key="star"
+      type="button"
+      class="rounded transition-all hover:scale-110 focus:outline-none"
+      :class="[
+  star <= (hoveredStar ?? selectedStar ?? rating ?? 0) ? 'text-yellow-400' : 'text-gray-300',
+  focusedIndex === star ? 'ring-2 ring-primary-500 ring-offset-0' : ''
+]"
+      tabindex="0"
+      @mousedown.prevent
+      @click="setRating(star, true)"
+      @mouseenter="hoveredStar = star"
+      @mouseleave="hoveredStar = null"
+      @focus="focusedIndex = star"
+    >
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 24 24"
+        fill="currentColor"
+        class="h-5 w-5"
+      >
+        <path
+          d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"
+        />
+      </svg>
+    </button>
+    <UButton
+      ref="clearButtonRef"
+      icon="i-heroicons-x-mark"
+      size="xs"
+      color="neutral"
+      variant="ghost"
+      class="ml-2"
+      tabindex="0"
+      :class="focusedIndex === 0 ? 'ring-2 ring-primary-500 ring-offset-0' : ''"
+      @mousedown.prevent
+      @click="setRating(null, true)"
+      @focus="focusedIndex = 0"
+    />
+  </div>
+</template>

package/dist/runtime/cell-types/rating/RatingEditor.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/rating/RatingFilter.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/rating/RatingFilter.vue

@@ -0,0 +1,74 @@
+<script setup>
+import { computed, ref } 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 operator = ref("gte");
+const operators = [
+  { value: "equals", label: "Equals" },
+  { value: "gte", label: "At least" },
+  { value: "lte", label: "At most" },
+  { value: "between", label: "Between" }
+];
+const filterValue2 = ref(null);
+function clearFilter() {
+  filterValue.value = null;
+  filterValue2.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="operator"
+        :options="operators"
+        option-attribute="label"
+        value-attribute="value"
+        class="flex-1"
+      />
+      <UButton
+        v-if="context.isFiltered"
+        icon="i-heroicons-x-mark"
+        size="xs"
+        color="neutral"
+        variant="ghost"
+        @click="clearFilter"
+      />
+    </div>
+    <div class="flex items-center gap-2">
+      <USelect
+        v-model="filterValue"
+        :options="[1, 2, 3, 4, 5].map((n) => ({ value: n, label: `${n} \u2B50` }))"
+        option-attribute="label"
+        value-attribute="value"
+        placeholder="Rating..."
+        autofocus
+        class="flex-1"
+        @update:model-value="context.setFilterValue($event)"
+      />
+    </div>
+    <div v-if="operator === 'between'" class="flex items-center gap-2">
+      <span class="text-sm text-muted">and</span>
+      <USelect
+        v-model="filterValue2"
+        :options="[1, 2, 3, 4, 5].map((n) => ({ value: n, label: `${n} \u2B50` }))"
+        option-attribute="label"
+        value-attribute="value"
+        placeholder="To..."
+        class="flex-1"
+        @update:model-value="
+  context.setFilterValue({
+    from: filterValue,
+    to: filterValue2 ? Number(filterValue2) : null
+  })
+"
+      />
+    </div>
+  </div>
+</template>

package/dist/runtime/cell-types/rating/RatingFilter.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;

package/dist/runtime/cell-types/rating/RatingRenderer.d.vue.ts

@@ -0,0 +1,10 @@
+interface Props {
+    value: any;
+    row: any;
+    cell: any;
+    editable: boolean;
+    onUpdateValue?: (value: any) => void;
+}
+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/rating/RatingRenderer.vue

@@ -0,0 +1,75 @@
+<script setup>
+import { computed, ref } from "vue";
+defineOptions({ inheritAttrs: false });
+const props = defineProps({
+  value: { type: null, required: true },
+  row: { type: null, required: true },
+  cell: { type: null, required: true },
+  editable: { type: Boolean, required: true },
+  onUpdateValue: { type: Function, required: false }
+});
+const hoveredStar = ref(null);
+const rating = computed(() => {
+  const value = props.value;
+  if (value === null || value === void 0 || value === "") return null;
+  const numValue = Number(value);
+  if (Number.isNaN(numValue)) return null;
+  return Math.max(1, Math.min(5, Math.round(numValue)));
+});
+const displayValue = computed(() => hoveredStar.value ?? rating.value);
+const isInteractive = computed(() => props.editable && typeof props.onUpdateValue === "function");
+function handleSet(value) {
+  if (!isInteractive.value) return;
+  props.onUpdateValue?.(value);
+}
+function starClass(star) {
+  return star <= (displayValue.value ?? 0) ? "text-yellow-400" : "text-gray-300";
+}
+</script>
+
+<template>
+  <div class="flex items-center gap-1" :class="isInteractive ? 'cursor-pointer' : 'opacity-70'">
+    <button
+      v-for="star in 5"
+      :key="star"
+      type="button"
+      class="rounded transition-all hover:scale-105 focus-visible:ring-2
+        focus-visible:ring-primary-500 focus-visible:outline-none"
+      :class="starClass(star)"
+      :disabled="!isInteractive"
+      :tabindex="isInteractive ? 0 : -1"
+      :aria-label="`Set rating to ${star}`"
+      @mouseenter="isInteractive && (hoveredStar = star)"
+      @mouseleave="isInteractive && (hoveredStar = null)"
+      @focus="isInteractive && (hoveredStar = star)"
+      @blur="isInteractive && (hoveredStar = null)"
+      @click.stop="handleSet(star)"
+    >
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 24 24"
+        fill="currentColor"
+        class="h-5 w-5"
+      >
+        <path
+          d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"
+        />
+      </svg>
+    </button>
+    <UButton
+      icon="i-heroicons-x-mark"
+      size="xs"
+      color="neutral"
+      variant="ghost"
+      class="ml-1"
+      :disabled="!isInteractive"
+      :tabindex="isInteractive ? 0 : -1"
+      aria-label="Clear rating"
+      @click.stop="handleSet(null)"
+    />
+    <span v-if="displayValue !== null" class="ml-1 text-sm text-gray-500"
+      >{{ displayValue }}/5</span
+    >
+    <span v-else class="ml-1 text-sm text-gray-400">—</span>
+  </div>
+</template>

package/dist/runtime/cell-types/rating/RatingRenderer.vue.d.ts

@@ -0,0 +1,10 @@
+interface Props {
+    value: any;
+    row: any;
+    cell: any;
+    editable: boolean;
+    onUpdateValue?: (value: any) => void;
+}
+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/rating/index.d.ts

@@ -0,0 +1,6 @@
+import type { NuGridCellType } from '../../types/cells.js';
+/**
+ * Rating cell type
+ * 1-5 star rating with visual stars and range filter
+ */
+export declare const ratingCellType: NuGridCellType;

package/dist/runtime/cell-types/rating/index.js

@@ -0,0 +1,67 @@
+import RatingEditor from "./RatingEditor.vue";
+import RatingFilter from "./RatingFilter.vue";
+import RatingRenderer from "./RatingRenderer.vue";
+export const ratingCellType = {
+  name: "rating",
+  displayName: "Rating",
+  description: "1-5 star rating column with visual stars",
+  editor: RatingEditor,
+  renderer: RatingRenderer,
+  filter: {
+    component: RatingFilter,
+    defaultOperator: "gte"
+  },
+  enableFiltering: true,
+  validation: (value) => {
+    if (value === null || value === void 0) {
+      return { valid: true };
+    }
+    const numValue = Number(value);
+    if (Number.isNaN(numValue) || numValue < 0 || numValue > 5) {
+      return {
+        valid: false,
+        message: "Rating must be between 0 and 5"
+      };
+    }
+    return { valid: true };
+  },
+  formatter: (value) => {
+    if (value === null || value === void 0) return "";
+    const numValue = Number(value);
+    if (Number.isNaN(numValue)) return String(value);
+    return `${numValue} \u2B50`;
+  },
+  keyboardHandler: (event, context) => {
+    const { isFocused, canEdit, getValue, row, columnDef, data, tableApi, emitChange } = context;
+    if (isFocused && canEdit) {
+      if (event.key === "0") {
+        const oldValue = getValue();
+        const rowIndex = data.findIndex((r, index) => {
+          return tableApi.options.getRowId?.(r, index) === row.id || r === row.original;
+        });
+        if (rowIndex !== -1 && columnDef.accessorKey) {
+          const key = columnDef.accessorKey;
+          data[rowIndex][key] = null;
+          emitChange(oldValue, null);
+        }
+        return { handled: true, preventDefault: true, stopPropagation: true };
+      } else if (event.key >= "1" && event.key <= "5") {
+        const newValue = Number.parseInt(event.key);
+        const oldValue = getValue();
+        const rowIndex = data.findIndex((r, index) => {
+          return tableApi.options.getRowId?.(r, index) === row.id || r === row.original;
+        });
+        if (rowIndex !== -1 && columnDef.accessorKey) {
+          const key = columnDef.accessorKey;
+          data[rowIndex][key] = newValue;
+          emitChange(oldValue, newValue);
+        }
+        return { handled: true, preventDefault: true, stopPropagation: true };
+      }
+    }
+    return { handled: false };
+  },
+  defaultColumnDef: {
+    size: 120
+  }
+};

package/dist/runtime/cell-types/selection/SelectionEditor.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/selection/SelectionEditor.vue

@@ -0,0 +1,42 @@
+<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 isSelected = computed(() => props.row.getIsSelected());
+const canRowBeSelected = computed(() => props.row.getCanSelect());
+const { handleKeydown, handleBlur } = useNuGridCellEditor(props, emit, checkboxRef, () => {
+  checkboxRef.value?.focus({ preventScroll: true });
+});
+const handleToggle = (value) => {
+  if (!canRowBeSelected.value) {
+    return;
+  }
+  props.row.toggleSelected(!!value);
+  emit("update:modelValue", value);
+};
+</script>
+
+<template>
+  <NuGridCellCheckbox
+    ref="checkboxRef"
+    :model-value="isSelected"
+    :interactive="canRowBeSelected"
+    :disabled="!canRowBeSelected"
+    @update:model-value="handleToggle"
+    @keydown="handleKeydown"
+    @blur="handleBlur"
+  />
+</template>

package/dist/runtime/cell-types/selection/SelectionEditor.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/selection/SelectionRenderer.d.vue.ts

@@ -0,0 +1,14 @@
+import type { Row } from '@tanstack/vue-table';
+interface Props {
+    row: Row<any>;
+    editable?: boolean;
+}
+declare const __VLS_export: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:value": (value: boolean | "indeterminate") => any;
+}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{
+    "onUpdate:value"?: ((value: boolean | "indeterminate") => any) | undefined;
+}>, {
+    editable: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/cell-types/selection/SelectionRenderer.vue

@@ -0,0 +1,25 @@
+<script setup>
+import NuGridCellCheckbox from "../../components/NuGridCellCheckbox.vue";
+defineOptions({ inheritAttrs: false });
+const props = defineProps({
+  row: { type: Object, required: true },
+  editable: { type: Boolean, required: false, default: false }
+});
+const emit = defineEmits(["update:value"]);
+const isSelected = computed(() => props.row.getIsSelected());
+const canRowBeSelected = computed(() => props.row.getCanSelect());
+const handleUpdate = (newValue) => {
+  if (!canRowBeSelected.value) return;
+  props.row.toggleSelected(!!newValue);
+  emit("update:value", newValue);
+};
+</script>
+
+<template>
+  <NuGridCellCheckbox
+    :model-value="isSelected"
+    :disabled="!canRowBeSelected"
+    :interactive="canRowBeSelected"
+    @update:model-value="handleUpdate"
+  />
+</template>

package/dist/runtime/cell-types/selection/SelectionRenderer.vue.d.ts

@@ -0,0 +1,14 @@
+import type { Row } from '@tanstack/vue-table';
+interface Props {
+    row: Row<any>;
+    editable?: boolean;
+}
+declare const __VLS_export: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:value": (value: boolean | "indeterminate") => any;
+}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{
+    "onUpdate:value"?: ((value: boolean | "indeterminate") => any) | undefined;
+}>, {
+    editable: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/cell-types/selection/index.d.ts

@@ -0,0 +1,8 @@
+import type { NuGridCellType } from '../../types/cells.js';
+/**
+ * Selection cell type
+ * Selection checkbox with special keyboard handling:
+ * - Space: Toggle the selection state directly without entering edit mode
+ * - Enter: Prevent entering edit mode (do nothing)
+ */
+export declare const selectionCellType: NuGridCellType;