@antelopejs/dms 0.0.1

package/frontend-vue/layers/dms-ui/app/composables/form/useUploadWithProgress.ts

@@ -0,0 +1,40 @@
+export interface PresignResponse {
+  uploadUrl: string;
+  resourceKey: string;
+  headers: Record<string, string>;
+}
+
+const UPLOAD_SUCCESS_MIN = 200;
+const UPLOAD_SUCCESS_MAX = 300;
+
+/**
+ * Uploads a file to the presigned storage URL with a PUT request, reporting
+ * real upload progress and rejecting on a non-2xx response (a plain `fetch`
+ * exposes neither). Shared by the file and image form fields.
+ */
+export function useUploadWithProgress() {
+  const uploadWithProgress = (
+    presign: PresignResponse,
+    file: File,
+    onProgress: (progress: number) => void,
+  ): Promise<void> =>
+    new Promise((resolve, reject) => {
+      const xhr = new XMLHttpRequest();
+      xhr.open("PUT", presign.uploadUrl);
+      Object.entries(presign.headers ?? {}).forEach(([name, value]) =>
+        xhr.setRequestHeader(name, value),
+      );
+      xhr.upload.onprogress = (event) => {
+        if (!event.lengthComputable) return;
+        onProgress(Math.round((event.loaded / event.total) * 100));
+      };
+      xhr.onload = () =>
+        xhr.status >= UPLOAD_SUCCESS_MIN && xhr.status < UPLOAD_SUCCESS_MAX
+          ? resolve()
+          : reject(new Error(`Upload failed (${xhr.status})`));
+      xhr.onerror = () => reject(new Error("Upload failed"));
+      xhr.send(file);
+    });
+
+  return { uploadWithProgress };
+}

package/frontend-vue/layers/dms-ui/app/composables/resolveDmsComponent.ts

@@ -0,0 +1,61 @@
+import { camelize, capitalize, type Component } from "vue";
+
+function normalizeComponentName(name: string): string {
+  return name.toLowerCase().replace(/[^a-z0-9]/g, "");
+}
+
+function findRegistryKey(
+  name: string,
+  components: Record<string, Component>,
+): string | undefined {
+  if (components[name]) return name;
+
+  const pascal = capitalize(camelize(name));
+  if (components[pascal]) return pascal;
+
+  const normalized = normalizeComponentName(name);
+  for (const key of Object.keys(components)) {
+    if (normalizeComponentName(key) === normalized) {
+      return key;
+    }
+  }
+
+  return undefined;
+}
+
+/**
+ * Resolve a DMS component by name from the Vue app's global registry.
+ * All frontend module components are registered globally as lazy async chunks,
+ * so this only returns a loader reference — the component code is fetched
+ * when it first renders. Lookup tolerates PascalCase, kebab-case and
+ * lowercase variants, matching what backend data may contain.
+ */
+export function resolveDmsComponent(name?: string): Component | undefined {
+  if (!name) return undefined;
+
+  // _context is a private Vue API, but it is the only runtime view of the
+  // global registry; the DMS preloader reads it the same way.
+  const components = useDmsApp().vueApp._context.components;
+  const key = findRegistryKey(name, components);
+
+  if (!key && import.meta.env.DEV) {
+    console.warn(
+      `[resolveDmsComponent] No globally registered component matches "${name}". ` +
+        "Check the componentName sent by the backend and that the component's " +
+        "directory is declared with global: true.",
+    );
+  }
+
+  return key ? components[key] : undefined;
+}
+
+/**
+ * Resolve the canonical registered name of a DMS component. The DMS app's
+ * preloadComponents()/prefetchComponents() look components up by their exact
+ * registered name, so backend-provided variants must go through this first.
+ */
+export function resolveDmsComponentName(name?: string): string | undefined {
+  if (!name) return undefined;
+
+  return findRegistryKey(name, useDmsApp().vueApp._context.components);
+}

package/frontend-vue/layers/dms-ui/app/composables/tab/shortcuts/index.ts

@@ -0,0 +1,3 @@
+import { TAB_SHIFT_LETTER_METADATA } from "./tabShortcuts";
+
+export const TAB_SHORTCUTS_METADATA = [TAB_SHIFT_LETTER_METADATA];

package/frontend-vue/layers/dms-ui/app/composables/tab/shortcuts/tabBuildShortcuts.ts

@@ -0,0 +1,16 @@
+import type { TabItem } from "../types";
+
+export function buildTabShortcuts(
+  items: TabItem[],
+  goToTab: (index: number) => void,
+): Record<string, () => void> {
+  const shortcuts: Record<string, () => void> = {};
+
+  items.forEach((item, index) => {
+    if (item.shortcut) {
+      shortcuts[`shift_${item.shortcut.toLowerCase()}`] = () => goToTab(index);
+    }
+  });
+
+  return shortcuts;
+}

package/frontend-vue/layers/dms-ui/app/composables/tab/shortcuts/tabShortcuts.ts

@@ -0,0 +1,8 @@
+export const TAB_SHIFT_LETTER_METADATA: ShortcutMetadata = {
+  key: ["$keyboard.shift", "$keyboard.letter_placeholder"],
+  descriptionKey: "$dms.shortcuts.tab.shift_letter.description",
+  component: "$dms.components.tab",
+  condition: {
+    descriptionKey: "$dms.shortcuts.tab.shift_letter.condition",
+  },
+};

package/frontend-vue/layers/dms-ui/app/composables/tab/shortcuts/useTabShortcuts.ts

@@ -0,0 +1,14 @@
+import { buildTabShortcuts } from "./tabBuildShortcuts";
+
+interface UseTabShortcutsParams {
+  items: TabItem[];
+  goToTab: (index: number) => void;
+}
+
+export function useTabShortcuts({
+  items,
+  goToTab,
+}: UseTabShortcutsParams): void {
+  const shortcuts = buildTabShortcuts(items, goToTab);
+  defineShortcuts(shortcuts);
+}

package/frontend-vue/layers/dms-ui/app/composables/tab/types/composable.ts

@@ -0,0 +1,11 @@
+export interface UseTabReturn {
+  activeTab: Ref<string>;
+  nextTab: () => void;
+  previousTab: () => void;
+  goToTab: (index: number | string) => void;
+  goToFirstTab: () => void;
+  goToLastTab: () => void;
+  resetTabs: () => void;
+  loading: Ref<boolean>;
+  watchState: Ref<Record<string, unknown>>;
+}

package/frontend-vue/layers/dms-ui/app/composables/tab/types/events.ts

@@ -0,0 +1,3 @@
+export const TabEvents = {
+  TAB_CHANGE: "DmsComponent.Tab.Change",
+} as const;

package/frontend-vue/layers/dms-ui/app/composables/tab/types/index.ts

@@ -0,0 +1,3 @@
+export * from "./item";
+export * from "./props";
+export * from "./composable";

package/frontend-vue/layers/dms-ui/app/composables/tab/types/item.ts

@@ -0,0 +1,11 @@
+import type { AvatarProps, BadgeProps } from "@nuxt/ui";
+
+export interface TabItem {
+  label: string;
+  slot: string;
+  icon?: string;
+  badge?: string | number | BadgeProps;
+  disabled?: boolean;
+  shortcut?: string;
+  avatar?: AvatarProps;
+}

package/frontend-vue/layers/dms-ui/app/composables/tab/types/props.ts

@@ -0,0 +1,25 @@
+import type { TabItem } from "./item";
+
+interface TabComponentProps {
+  componentId: string;
+  pageId: string;
+  routeParams?: Record<string, string>;
+  watchActions?: WatchAction[];
+  childCount?: number;
+}
+
+export enum TabVariant {
+  pill = "pill",
+  link = "link",
+}
+
+export interface TabProps extends TabComponentProps {
+  items: TabItem[];
+  color?: Color;
+  size?: Size;
+  variant?: TabVariant;
+  orientation?: AxeOrientation;
+  unmountOnHide?: boolean;
+  persistState?: boolean;
+  stateKey?: string;
+}

package/frontend-vue/layers/dms-ui/app/composables/tab/useTab.ts

@@ -0,0 +1,122 @@
+export function useTab(
+  tabCount: Ref<number> | number,
+  props: TabProps,
+): UseTabReturn {
+  const stateKey = props.stateKey || "tab";
+
+  const { sendComponentEvent } = useComponentEvent(props.componentId);
+  const { isLoading: loading, state: watchState } = useWatch(
+    props.watchActions || [],
+  );
+
+  const route = useDmsRoute();
+  const router = useDmsRouter();
+
+  const totalTabs = computed(() =>
+    isNumber(tabCount) ? tabCount : tabCount.value,
+  );
+
+  const getInitialTab = () => {
+    if (props.persistState && route.query[stateKey]) {
+      const tabFromUrl = route.query[stateKey] as string;
+      const tabIndex = Number.parseInt(tabFromUrl, 10);
+      if (
+        !Number.isNaN(tabIndex) &&
+        tabIndex >= 0 &&
+        tabIndex < totalTabs.value
+      ) {
+        return tabFromUrl;
+      }
+    }
+    return String(0);
+  };
+
+  const activeTab = ref<string>(getInitialTab());
+
+  const updateUrl = async (newTab: string) => {
+    if (!props.persistState) return;
+
+    const query = { ...route.query };
+    if (newTab === "0") {
+      // eslint-disable-next-line @typescript-eslint/no-dynamic-delete
+      delete query[stateKey];
+    } else {
+      query[stateKey] = newTab;
+    }
+    await router.push({ query });
+  };
+
+  const goToTab = (index: number | string) => {
+    const indexNum = isString(index) ? Number.parseInt(index, 10) : index;
+    const indexStr = String(indexNum);
+
+    if (indexNum < 0 || indexNum >= totalTabs.value) {
+      return;
+    }
+
+    if (indexStr === activeTab.value) return;
+
+    activeTab.value = indexStr;
+  };
+
+  const nextTab = () => {
+    const currentIndex = Number.parseInt(activeTab.value, 10);
+    const nextIndex = Math.min(currentIndex + 1, totalTabs.value - 1);
+    goToTab(nextIndex);
+  };
+
+  const previousTab = () => {
+    const currentIndex = Number.parseInt(activeTab.value, 10);
+    const prevIndex = Math.max(currentIndex - 1, 0);
+    goToTab(prevIndex);
+  };
+
+  const goToFirstTab = () => goToTab(0);
+  const goToLastTab = () => goToTab(totalTabs.value - 1);
+
+  const resetTabs = () => {
+    activeTab.value = "0";
+    updateUrl("0");
+  };
+
+  watch(activeTab, async (newTab, oldTab) => {
+    if (newTab !== oldTab) {
+      sendComponentEvent(TabEvents.TAB_CHANGE, props.componentId, {
+        previousTab: Number.parseInt(oldTab, 10),
+        currentTab: Number.parseInt(newTab, 10),
+      });
+
+      await updateUrl(newTab);
+    }
+  });
+
+  watch(
+    () => route.query[stateKey],
+    (newValue) => {
+      if (!props.persistState) return;
+
+      const tabStr = newValue as string;
+      const tabIndex = Number.parseInt(tabStr, 10);
+      if (
+        !Number.isNaN(tabIndex) &&
+        tabIndex >= 0 &&
+        tabIndex < totalTabs.value &&
+        tabStr !== activeTab.value
+      ) {
+        activeTab.value = tabStr;
+      }
+    },
+  );
+
+  return {
+    activeTab,
+    nextTab,
+    previousTab,
+    goToTab,
+    goToFirstTab,
+    goToLastTab,
+    resetTabs,
+    loading,
+    watchState,
+  };
+}

package/frontend-vue/layers/dms-ui/app/composables/table-view/kanban.ts

@@ -0,0 +1,151 @@
+import type { InjectionKey, Ref } from "vue";
+import type { TableViewColumn } from "./types";
+
+/**
+ * The few inputs the (unchanged) KanbanBoard needs beyond the generic
+ * {@link TableViewDisplayContext}: the two-way group-by field shared with the
+ * options-menu selector, and the raw edit/delete action configs for per-row rule
+ * evaluation. Everything else (query, componentId, pageId, labelKey) is read from
+ * the generic context. Provided by TableView and injected by the kanban adapter
+ * — slotted content is a descendant of TableView, so a native inject reaches it.
+ */
+export interface KanbanDisplayBridge {
+  groupByField: Ref<string>;
+  editAction?: boolean | RowActionConfig;
+  deleteAction?: boolean | RowActionConfig;
+}
+
+export const KANBAN_DISPLAY_BRIDGE_KEY: InjectionKey<KanbanDisplayBridge> =
+  Symbol("dms:kanban-display-bridge");
+
+export interface KanbanColumnDef {
+  /** Stringified value, used as key and in filter queries */
+  value: string;
+  /** Raw value persisted on the item when a card is dropped here */
+  rawValue: unknown;
+  label: string;
+  color?: string;
+}
+
+export interface KanbanSelectItemOption {
+  value: unknown;
+  label: string;
+  icon?: string;
+  iconColor?: string;
+  textColor?: string;
+}
+
+export type KanbanLabelTranslator = (label: string) => string;
+
+interface KanbanColumnTypeOptions extends Record<string, unknown> {
+  multiple?: boolean;
+  items?: KanbanSelectItemOption[];
+  onlineLabel?: string;
+  offlineLabel?: string;
+  onlineColor?: string;
+  offlineColor?: string;
+}
+
+interface KanbanColumnBuilderContext {
+  options?: KanbanColumnTypeOptions;
+  translate: KanbanLabelTranslator;
+}
+
+interface KanbanColumnTypeHandler {
+  isEligible: (options?: KanbanColumnTypeOptions) => boolean;
+  build: (context: KanbanColumnBuilderContext) => KanbanColumnDef[];
+}
+
+interface BinaryColumnLabels {
+  trueLabel: string;
+  falseLabel: string;
+  trueColor?: string;
+  falseColor?: string;
+}
+
+const BOOLEAN_COLUMN_LABELS: BinaryColumnLabels = {
+  trueLabel: "$dms.table.filter.boolean.checked",
+  falseLabel: "$dms.table.filter.boolean.unchecked",
+  trueColor: "success",
+};
+
+const STATUS_COLUMN_DEFAULTS = {
+  onlineLabel: "$common.status.online",
+  offlineLabel: "$common.status.offline",
+  onlineColor: "primary",
+};
+
+const buildBinaryColumns = (
+  translate: KanbanLabelTranslator,
+  labels: BinaryColumnLabels,
+): KanbanColumnDef[] => [
+  {
+    value: "false",
+    rawValue: false,
+    label: translate(labels.falseLabel),
+    color: labels.falseColor,
+  },
+  {
+    value: "true",
+    rawValue: true,
+    label: translate(labels.trueLabel),
+    color: labels.trueColor,
+  },
+];
+
+const buildSelectColumns = ({
+  options,
+  translate,
+}: KanbanColumnBuilderContext): KanbanColumnDef[] =>
+  (options?.items ?? []).map((item) => ({
+    value: String(item.value),
+    rawValue: item.value,
+    label: translate(item.label),
+    color: item.iconColor || item.textColor,
+  }));
+
+const buildStatusColumns = ({
+  options,
+  translate,
+}: KanbanColumnBuilderContext): KanbanColumnDef[] =>
+  buildBinaryColumns(translate, {
+    trueLabel: options?.onlineLabel ?? STATUS_COLUMN_DEFAULTS.onlineLabel,
+    falseLabel: options?.offlineLabel ?? STATUS_COLUMN_DEFAULTS.offlineLabel,
+    trueColor: options?.onlineColor ?? STATUS_COLUMN_DEFAULTS.onlineColor,
+    falseColor: options?.offlineColor,
+  });
+
+const KANBAN_COLUMN_TYPE_HANDLERS: Record<string, KanbanColumnTypeHandler> = {
+  select: {
+    isEligible: (options) => !options?.multiple,
+    build: buildSelectColumns,
+  },
+  boolean: {
+    isEligible: () => true,
+    build: ({ translate }) =>
+      buildBinaryColumns(translate, BOOLEAN_COLUMN_LABELS),
+  },
+  status: {
+    isEligible: () => true,
+    build: buildStatusColumns,
+  },
+};
+
+const getColumnTypeOptions = (
+  column: TableViewColumn,
+): KanbanColumnTypeOptions | undefined =>
+  column.type.inputComponent?.options as KanbanColumnTypeOptions | undefined;
+
+export const isEligibleKanbanColumn = (column: TableViewColumn): boolean => {
+  const handler = KANBAN_COLUMN_TYPE_HANDLERS[column.type.id];
+  return !!handler?.isEligible(getColumnTypeOptions(column));
+};
+
+export const buildKanbanColumns = (
+  column: TableViewColumn,
+  translate: KanbanLabelTranslator,
+): KanbanColumnDef[] => {
+  const handler = KANBAN_COLUMN_TYPE_HANDLERS[column.type.id];
+  if (!handler) return [];
+  return handler.build({ options: getColumnTypeOptions(column), translate });
+};

package/frontend-vue/layers/dms-ui/app/composables/table-view/shortcuts/index.ts

@@ -0,0 +1,61 @@
+import type { ShallowRef } from "vue";
+import type { RowSelectionState } from "@tanstack/vue-table";
+import type {
+  TableRowActionOptions,
+  Data,
+} from "../../../build/components/table/Table.vue";
+import {
+  TABLE_VIEW_META_R_METADATA,
+  createTableViewMetaRShortcut,
+} from "./tableViewMetaR";
+import {
+  TABLE_VIEW_SHIFT_N_METADATA,
+  createTableViewShiftNShortcut,
+} from "./tableViewShiftN";
+import {
+  TABLE_VIEW_ESCAPE_METADATA,
+  createTableViewEscapeShortcut,
+} from "./tableViewEscape";
+import {
+  TABLE_VIEW_SHIFT_A_METADATA,
+  createTableViewShiftAShortcut,
+} from "./tableViewShiftA";
+import { TABLE_VIEW_DELETE_METADATA } from "./tableViewDelete";
+import { TABLE_VIEW_SHIFT_F_METADATA } from "./tableViewShiftF";
+
+export const TABLE_VIEW_SHORTCUTS_METADATA = [
+  TABLE_VIEW_META_R_METADATA,
+  TABLE_VIEW_SHIFT_N_METADATA,
+  TABLE_VIEW_ESCAPE_METADATA,
+  TABLE_VIEW_SHIFT_A_METADATA,
+  TABLE_VIEW_DELETE_METADATA,
+  TABLE_VIEW_SHIFT_F_METADATA,
+];
+
+interface BuildTableViewShortcutsParams<T extends Data> {
+  refresh: () => void;
+  tableProps: ComputedRef<{
+    rowActions?: TableRowActionOptions;
+    rowIdKey?: string;
+  }>;
+  newRow: () => void;
+  globalFilter: ShallowRef<string | undefined>;
+  rowSelect: Ref<RowSelectionState>;
+  data: Ref<{ results: T[] } | null | undefined>;
+}
+
+export function buildTableViewShortcuts<T extends Data>({
+  refresh,
+  tableProps,
+  newRow,
+  globalFilter,
+  rowSelect,
+  data,
+}: BuildTableViewShortcutsParams<T>): Record<string, () => void> {
+  return {
+    meta_r: createTableViewMetaRShortcut(refresh),
+    shift_n: createTableViewShiftNShortcut(tableProps, newRow),
+    escape: createTableViewEscapeShortcut(globalFilter, rowSelect),
+    shift_a: createTableViewShiftAShortcut(tableProps, data, rowSelect),
+  };
+}

package/frontend-vue/layers/dms-ui/app/composables/table-view/shortcuts/tableViewDelete.ts

@@ -0,0 +1,23 @@
+import type { TableRowActionOptions } from "../../../build/components/table/Table.vue";
+
+export const TABLE_VIEW_DELETE_METADATA: ShortcutMetadata = {
+  key: ["$keyboard.delete"],
+  descriptionKey: "$dms.shortcuts.tableview.delete.description",
+  component: "$dms.components.tableview",
+  condition: {
+    descriptionKey: "$dms.shortcuts.tableview.delete.condition",
+    check: "rowActions.delete",
+  },
+};
+
+export function createTableViewDeleteShortcut(
+  hoveredRowId: Ref<string | null>,
+  rowActions: TableRowActionOptions | undefined,
+  onDelete: (ids: string[]) => void,
+) {
+  return () => {
+    if (hoveredRowId.value && isActionEnabled(rowActions?.delete)) {
+      onDelete([hoveredRowId.value]);
+    }
+  };
+}

package/frontend-vue/layers/dms-ui/app/composables/table-view/shortcuts/tableViewEscape.ts

@@ -0,0 +1,24 @@
+import type { ShallowRef } from "vue";
+import type { RowSelectionState } from "@tanstack/vue-table";
+
+export const TABLE_VIEW_ESCAPE_METADATA: ShortcutMetadata = {
+  key: ["$keyboard.escape"],
+  descriptionKey: "$dms.shortcuts.tableview.escape.description",
+  component: "$dms.components.tableview",
+};
+
+export function createTableViewEscapeShortcut(
+  globalFilter: ShallowRef<string | undefined>,
+  rowSelect: Ref<RowSelectionState>,
+) {
+  return () => {
+    if (
+      globalFilter.value === undefined &&
+      Object.keys(rowSelect.value).length
+    ) {
+      rowSelect.value = {};
+      return;
+    }
+    globalFilter.value = undefined;
+  };
+}

package/frontend-vue/layers/dms-ui/app/composables/table-view/shortcuts/tableViewMetaR.ts

@@ -0,0 +1,9 @@
+export const TABLE_VIEW_META_R_METADATA: ShortcutMetadata = {
+  key: ["$keyboard.meta", "r"],
+  descriptionKey: "$dms.shortcuts.tableview.meta_r.description",
+  component: "$dms.components.tableview",
+};
+
+export function createTableViewMetaRShortcut(refresh: () => void) {
+  return () => refresh();
+}

package/frontend-vue/layers/dms-ui/app/composables/table-view/shortcuts/tableViewShiftA.ts

@@ -0,0 +1,41 @@
+import type {
+  TableRowActionOptions,
+  Data,
+} from "../../../build/components/table/Table.vue";
+import type { RowSelectionState } from "@tanstack/vue-table";
+import { get } from "@nuxt/ui/runtime/utils/index.js";
+
+const DEFAULT_ROW_ID_KEY = "_id";
+
+export const TABLE_VIEW_SHIFT_A_METADATA: ShortcutMetadata = {
+  key: ["$keyboard.shift", "a"],
+  descriptionKey: "$dms.shortcuts.tableview.shift_a.description",
+  component: "$dms.components.tableview",
+  condition: {
+    descriptionKey: "$dms.shortcuts.tableview.shift_a.condition",
+    check: "rowActions.hasSelection",
+  },
+};
+
+export function createTableViewShiftAShortcut<T extends Data>(
+  tableProps: ComputedRef<{
+    rowActions?: TableRowActionOptions;
+    rowIdKey?: string;
+  }>,
+  data: Ref<{ results: T[] } | null | undefined>,
+  rowSelect: Ref<RowSelectionState>,
+) {
+  return () => {
+    if (tableProps.value.rowActions?.hasSelection && data.value?.results) {
+      const rowIdKey = tableProps.value.rowIdKey ?? DEFAULT_ROW_ID_KEY;
+      const newSelection: RowSelectionState = {};
+      data.value.results.forEach((row: T) => {
+        const id = get(row, rowIdKey);
+        if (id) {
+          newSelection[id] = true;
+        }
+      });
+      rowSelect.value = { ...rowSelect.value, ...newSelection };
+    }
+  };
+}

package/frontend-vue/layers/dms-ui/app/composables/table-view/shortcuts/tableViewShiftF.ts

@@ -0,0 +1,18 @@
+export const TABLE_VIEW_SHIFT_F_METADATA: ShortcutMetadata = {
+  key: ["$keyboard.shift", "f"],
+  descriptionKey: "$dms.shortcuts.tableview.shift_f.description",
+  component: "$dms.components.tableview",
+};
+
+export function createTableViewShiftFShortcut(
+  searchActive: Ref<boolean>,
+  globalFilterState: Ref<string | undefined>,
+  focusSearchBar: () => void,
+) {
+  return async () => {
+    searchActive.value = true;
+    globalFilterState.value = "";
+    await nextTick();
+    focusSearchBar();
+  };
+}

package/frontend-vue/layers/dms-ui/app/composables/table-view/shortcuts/tableViewShiftN.ts

@@ -0,0 +1,22 @@
+import type { TableRowActionOptions } from "../../../build/components/table/Table.vue";
+
+export const TABLE_VIEW_SHIFT_N_METADATA: ShortcutMetadata = {
+  key: ["$keyboard.shift", "n"],
+  descriptionKey: "$dms.shortcuts.tableview.shift_n.description",
+  component: "$dms.components.tableview",
+  condition: {
+    descriptionKey: "$dms.shortcuts.tableview.shift_n.condition",
+    check: "rowActions.add",
+  },
+};
+
+export function createTableViewShiftNShortcut(
+  tableProps: ComputedRef<{ rowActions?: TableRowActionOptions }>,
+  newRow: () => void,
+) {
+  return () => {
+    if (isActionEnabled(tableProps.value.rowActions?.add)) {
+      newRow();
+    }
+  };
+}