@abraca/nuxt 0.3.0 → 1.5.0

package/dist/runtime/components/renderers/table/ATableFlatMode.d.vue.ts

@@ -0,0 +1,21 @@
+import type { useTableView } from '../../../composables/useTableView.js';
+type __VLS_Props = {
+    tree: ReturnType<typeof import('../../../composables/useChildTree').useChildTree>;
+    tableView: ReturnType<typeof useTableView>;
+    states: any[];
+    myClientId: number;
+    setLocalState: (state: Record<string, any>) => void;
+    editable?: boolean;
+};
+declare function addRow(): void;
+declare function addMetaColumn(): void;
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {
+    addMetaColumn: typeof addMetaColumn;
+    addRow: typeof addRow;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    openNode: (id: string, label: string) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onOpenNode?: ((id: string, label: string) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/renderers/table/ATableFlatMode.vue

@@ -0,0 +1,370 @@
+<script setup>
+import { ref, computed, onBeforeUnmount } from "vue";
+import { useTouchDrag } from "../../../composables/useTouchDrag";
+import ATableColumnHeader from "./ATableColumnHeader.vue";
+import ATableCell from "./cells/ATableCell.vue";
+const props = defineProps({
+  tree: { type: null, required: true },
+  tableView: { type: null, required: true },
+  states: { type: Array, required: true },
+  myClientId: { type: Number, required: true },
+  setLocalState: { type: Function, required: true },
+  editable: { type: Boolean, required: false }
+});
+const emit = defineEmits(["openNode"]);
+function camelToTitle(s) {
+  return s.replace(/([a-z])([A-Z])/g, "$1 $2").replace(/([A-Z]+)([A-Z][a-z])/g, "$1 $2").replace(/^./, (c) => c.toUpperCase());
+}
+const rawRows = computed(
+  () => props.tree.childrenOf(null).sort((a, b) => (a.order ?? 0) - (b.order ?? 0))
+);
+const rows = computed(() => {
+  const key = props.tableView.sortKey.value;
+  if (!key) return rawRows.value;
+  const dir = props.tableView.sortDir.value;
+  return props.tableView.sortEntries(rawRows.value, key, dir);
+});
+const NAME_COL = {
+  id: "__label",
+  type: "label",
+  label: "Name"
+};
+const configuredCols = computed(() => props.tableView.columnDefs.value);
+const autoDetectedCols = computed(() => {
+  const configuredKeys = new Set(configuredCols.value.map((c) => c.metaKey));
+  const detectedKeys = props.tableView.detectMetaKeys(rawRows.value);
+  return detectedKeys.filter((key) => !configuredKeys.has(key)).map((key) => ({
+    id: `meta:${key}`,
+    type: "meta",
+    metaKey: key,
+    metaType: props.tableView.inferColumnType(rawRows.value, key),
+    label: camelToTitle(key)
+  }));
+});
+const allColumns = computed(() => {
+  const cols = [NAME_COL, ...configuredCols.value, ...autoDetectedCols.value];
+  const order = props.tableView.columnOrder.value;
+  if (!order.length) return cols;
+  const colMap = new Map(cols.map((c) => [c.id, c]));
+  const ordered = [];
+  for (const id of order) {
+    const col = colMap.get(id);
+    if (col) {
+      ordered.push(col);
+      colMap.delete(id);
+    }
+  }
+  for (const col of colMap.values()) ordered.push(col);
+  return ordered;
+});
+const TYPE_MIN_WIDTHS = {
+  text: 180,
+  number: 100,
+  date: 150,
+  datetime: 170,
+  select: 130,
+  multiselect: 160,
+  tags: 160,
+  toggle: 80,
+  rating: 140,
+  url: 180,
+  color: 100,
+  slider: 150,
+  members: 140,
+  priority: 130,
+  status: 130
+};
+function getColumnWidth(col) {
+  const explicit = props.tableView.columnWidths.value[col.id];
+  if (explicit) return explicit;
+  if (col.type === "label") return 200;
+  return TYPE_MIN_WIDTHS[col.metaType ?? "text"] ?? 140;
+}
+function getCellValue(row, col) {
+  if (col.type === "label") {
+    return row.label && row.label !== "Untitled" ? row.label : "";
+  }
+  return row.meta?.[col.metaKey] ?? null;
+}
+function setCellValue(row, col, value) {
+  if (col.type === "label") {
+    const str = typeof value === "string" ? value.trim() : String(value ?? "");
+    props.tree.renameEntry(row.id, str || "Untitled");
+  } else {
+    props.tree.updateMeta(row.id, { [col.metaKey]: value });
+  }
+}
+function addRow() {
+  props.tree.createChild(null, "");
+}
+function deleteRow(row) {
+  props.tree.deleteEntry(row.id);
+}
+function addMetaColumn() {
+  const existing = /* @__PURE__ */ new Set([
+    ...configuredCols.value.map((c) => c.metaKey),
+    ...autoDetectedCols.value.map((c) => c.metaKey)
+  ]);
+  let n = 1;
+  let key = "field1";
+  while (existing.has(key)) {
+    n++;
+    key = `field${n}`;
+  }
+  props.tableView.addColumn({
+    id: `meta:${key}`,
+    type: "meta",
+    metaKey: key,
+    metaType: "text",
+    label: `Field ${n}`
+  });
+}
+function deleteColumn(col) {
+  if (col.type === "label") return;
+  props.tableView.removeColumn(col.id);
+  if (col.metaKey) {
+    for (const row of rawRows.value) {
+      if (row.meta?.[col.metaKey] !== void 0) {
+        const newMeta = { ...row.meta };
+        delete newMeta[col.metaKey];
+        props.tree.treeMap.set(row.id, { ...props.tree.treeMap.get(row.id), meta: newMeta });
+      }
+    }
+  }
+}
+function renameColumn(col, label) {
+  if (col.type === "label") return;
+  props.tableView.renameColumn(col.id, label);
+}
+function onResizeStart(e, colId) {
+  const startX = e.clientX;
+  const col = allColumns.value.find((c) => c.id === colId);
+  const startWidth = getColumnWidth(col ?? { id: colId, type: "meta", label: "" });
+  props.setLocalState({ "table:resizing": colId });
+  function onMove(ev) {
+    const newWidth = Math.max(80, startWidth + (ev.clientX - startX));
+    props.tableView.setColumnWidth(colId, newWidth);
+  }
+  function onUp() {
+    document.removeEventListener("pointermove", onMove);
+    document.removeEventListener("pointerup", onUp);
+    document.body.style.userSelect = "";
+    document.body.style.cursor = "";
+    props.setLocalState({ "table:resizing": null });
+  }
+  document.addEventListener("pointermove", onMove);
+  document.addEventListener("pointerup", onUp);
+  document.body.style.userSelect = "none";
+  document.body.style.cursor = "col-resize";
+}
+const editingCell = ref(null);
+function startEdit(row, col) {
+  if (props.editable === false) return;
+  editingCell.value = { rowId: row.id, colId: col.id };
+  props.setLocalState({ "table:editing": { rowId: row.id, fieldId: col.id } });
+}
+function stopEdit() {
+  editingCell.value = null;
+  props.setLocalState({ "table:editing": null });
+}
+function onCellUpdate(row, col, value) {
+  setCellValue(row, col, value);
+}
+const {
+  dragId: rowDragId,
+  dragOverId: rowDragOverId,
+  handlePointerDown: handleRowPointerDown
+} = useTouchDrag({
+  idAttr: "data-drag-id",
+  onDrop: (srcId, targetId) => {
+    if (srcId === targetId) return;
+    const items = rawRows.value;
+    const srcIdx = items.findIndex((r) => r.id === srcId);
+    const targetIdx = items.findIndex((r) => r.id === targetId);
+    if (srcIdx === -1 || targetIdx === -1) return;
+    const prev = items[targetIdx - (targetIdx > srcIdx ? 0 : 1)];
+    const next = items[targetIdx + (targetIdx > srcIdx ? 1 : 0)];
+    let newOrder;
+    if (!prev && !next) newOrder = Date.now();
+    else if (!prev) newOrder = next.order - 1e3;
+    else if (!next) newOrder = prev.order + 1e3;
+    else newOrder = (prev.order + next.order) / 2;
+    props.tree.moveEntry(srcId, null, newOrder);
+  }
+});
+const {
+  dragId: colDragId,
+  dragOverId: colDragOverId,
+  handlePointerDown: handleColPointerDown
+} = useTouchDrag({
+  idAttr: "data-col-drag-id",
+  onDrop: (srcId, targetId) => {
+    if (srcId === targetId) return;
+    const cols = allColumns.value;
+    const srcIdx = cols.findIndex((c) => c.id === srcId);
+    const targetIdx = cols.findIndex((c) => c.id === targetId);
+    if (srcIdx === -1 || targetIdx === -1) return;
+    const reordered = [...cols];
+    const [moved] = reordered.splice(srcIdx, 1);
+    reordered.splice(targetIdx, 0, moved);
+    props.tableView.setColumnOrder(reordered.map((c) => c.id));
+  }
+});
+function handleSort(key, dir) {
+  if (dir === "clear") props.tableView.setSort(void 0);
+  else props.tableView.setSort(key, dir);
+}
+function cellEditor(rowId, fieldId) {
+  return props.states.filter((s) => s.clientId !== props.myClientId).find(
+    (s) => s["table:editing"]?.rowId === rowId && s["table:editing"]?.fieldId === fieldId
+  );
+}
+onBeforeUnmount(() => {
+  props.setLocalState({
+    "table:editing": null,
+    "table:resizing": null
+  });
+});
+defineExpose({ addMetaColumn, addRow });
+</script>
+
+<template>
+  <div class="flex-1 overflow-auto">
+    <div
+      v-if="rows.length === 0 && configuredCols.length === 0"
+      class="flex flex-col items-center justify-center h-full gap-3 text-center py-12"
+    >
+      <UIcon
+        name="i-lucide-table"
+        class="size-10 text-(--ui-text-dimmed)"
+      />
+      <p class="text-sm text-(--ui-text-muted)">
+        No rows yet
+      </p>
+      <UButton
+        v-if="editable !== false"
+        icon="i-lucide-plus"
+        label="Add row"
+        size="sm"
+        @click="addRow"
+      />
+    </div>
+
+    <template v-else>
+      <table
+        class="text-sm border-collapse"
+        style="table-layout: fixed; min-width: 100%;"
+      >
+        <thead class="sticky top-0 bg-(--ui-bg) z-10">
+          <tr class="border-b border-(--ui-border)">
+            <th class="w-0 p-0" />
+            <th class="w-6 px-1" />
+            <th class="text-left px-2 py-2 text-xs font-medium text-(--ui-text-muted) w-20">
+              #
+            </th>
+            <ATableColumnHeader
+              v-for="col in allColumns"
+              :key="col.id"
+              :column-id="col.id"
+              :label="col.label"
+              :width="getColumnWidth(col)"
+              :sort-key="tableView.sortKey.value"
+              :sort-dir="tableView.sortDir.value"
+              :can-rename="editable !== false && col.type !== 'label'"
+              :can-delete="editable !== false && col.type !== 'label'"
+              :can-drag="editable !== false"
+              :data-col-drag-id="col.id"
+              :class="[
+  colDragOverId === col.id ? 'border-l-2 border-(--ui-primary)' : '',
+  colDragId === col.id ? 'opacity-30' : ''
+]"
+              @rename="renameColumn(col, $event)"
+              @delete="deleteColumn(col)"
+              @sort="handleSort(col.id === '__label' ? '__label' : col.metaKey ?? col.id, $event)"
+              @resize-start="onResizeStart($event, col.id)"
+              @drag-pointer-down="handleColPointerDown($event, col.id)"
+            />
+          </tr>
+        </thead>
+        <TransitionGroup
+          name="trow"
+          tag="tbody"
+        >
+          <tr
+            v-for="(row, idx) in rows"
+            :key="row.id"
+            :data-drag-id="row.id"
+            class="group hover:bg-(--ui-bg-elevated)"
+            :class="[
+  rowDragOverId === row.id ? 'border-t-2 border-(--ui-primary)' : 'border-b border-(--ui-border)',
+  rowDragId === row.id ? 'opacity-30' : ''
+]"
+          >
+            <td class="w-0 p-0" />
+            <td
+              class="px-1 py-1.5 text-(--ui-text-dimmed) opacity-0 group-hover:opacity-60 cursor-grab w-6 touch-none"
+              @pointerdown="editable !== false && handleRowPointerDown($event, row.id)"
+            >
+              <UIcon
+                name="i-lucide-grip-vertical"
+                class="size-4"
+              />
+            </td>
+            <td class="px-2 py-1.5 text-xs text-(--ui-text-dimmed) select-none w-20">
+              <div class="flex items-center gap-0.5">
+                <span class="w-4 text-center">{{ idx + 1 }}</span>
+                <UButton
+                  icon="i-lucide-external-link"
+                  size="xs"
+                  variant="ghost"
+                  color="neutral"
+                  class="opacity-0 group-hover:opacity-100"
+                  @click="emit('openNode', row.id, row.label)"
+                />
+                <UButton
+                  v-if="editable !== false"
+                  icon="i-lucide-trash-2"
+                  size="xs"
+                  variant="ghost"
+                  color="error"
+                  class="opacity-0 group-hover:opacity-100"
+                  @click="deleteRow(row)"
+                />
+              </div>
+            </td>
+            <td
+              v-for="col in allColumns"
+              :key="col.id"
+              class="px-1 py-0.5"
+              :style="
+  cellEditor(row.id, col.id) ? { outline: `2px solid ${cellEditor(row.id, col.id).user?.color}` } : {}
+"
+            >
+              <ATableCell
+                :value="getCellValue(row, col)"
+                :meta-type="col.type === 'label' ? 'text' : col.metaType ?? 'text'"
+                :editing="editingCell?.rowId === row.id && editingCell?.colId === col.id"
+                :column="col"
+                @update:model-value="onCellUpdate(row, col, $event)"
+                @start-edit="startEdit(row, col)"
+                @stop-edit="stopEdit"
+              />
+            </td>
+          </tr>
+        </TransitionGroup>
+      </table>
+
+      <button
+        v-if="editable !== false"
+        class="w-full text-left px-3 py-2 text-xs text-(--ui-text-dimmed) hover:bg-(--ui-bg-elevated) border-b border-(--ui-border) transition-colors"
+        @click="addRow"
+      >
+        + Add row
+      </button>
+    </template>
+  </div>
+</template>
+
+<style scoped>
+.trow-move{transition:transform .25s ease}.trow-enter-active{transition:opacity .18s ease,transform .18s ease}.trow-enter-from{opacity:0;transform:translateY(-6px) scale(.97)}.trow-leave-active{transition:opacity .15s ease}.trow-leave-to{opacity:0}
+</style>

package/dist/runtime/components/renderers/table/ATableFlatMode.vue.d.ts

@@ -0,0 +1,21 @@
+import type { useTableView } from '../../../composables/useTableView.js';
+type __VLS_Props = {
+    tree: ReturnType<typeof import('../../../composables/useChildTree').useChildTree>;
+    tableView: ReturnType<typeof useTableView>;
+    states: any[];
+    myClientId: number;
+    setLocalState: (state: Record<string, any>) => void;
+    editable?: boolean;
+};
+declare function addRow(): void;
+declare function addMetaColumn(): void;
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {
+    addMetaColumn: typeof addMetaColumn;
+    addRow: typeof addRow;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    openNode: (id: string, label: string) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onOpenNode?: ((id: string, label: string) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/renderers/table/ATableToolbar.d.vue.ts

@@ -0,0 +1,22 @@
+import type { useTableView } from '../../../composables/useTableView.js';
+type __VLS_Props = {
+    tableView: ReturnType<typeof useTableView>;
+    rowCount: number;
+    editable?: boolean;
+    labels?: {
+        addColumn?: string;
+        addRow?: string;
+        auto?: string;
+        hierarchy?: string;
+        flat?: string;
+    };
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    addColumn: () => any;
+    addRow: () => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onAddColumn?: (() => any) | undefined;
+    onAddRow?: (() => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/renderers/table/ATableToolbar.vue

@@ -0,0 +1,106 @@
+<script setup>
+import { computed } from "vue";
+const props = defineProps({
+  tableView: { type: null, required: true },
+  rowCount: { type: Number, required: true },
+  editable: { type: Boolean, required: false },
+  labels: { type: Object, required: false }
+});
+const emit = defineEmits(["addColumn", "addRow"]);
+const modeItems = [
+  [
+    {
+      label: "Auto-detect",
+      icon: "i-lucide-wand-sparkles",
+      onSelect: () => props.tableView.setMode(void 0)
+    }
+  ],
+  [
+    {
+      label: props.labels?.hierarchy ?? "Hierarchy",
+      icon: "i-lucide-columns-3",
+      onSelect: () => props.tableView.setMode("hierarchy")
+    },
+    {
+      label: props.labels?.flat ?? "Flat",
+      icon: "i-lucide-rows-3",
+      onSelect: () => props.tableView.setMode("flat")
+    }
+  ]
+];
+const modeLabel = computed(() => {
+  const mode = props.tableView.explicitMode.value;
+  if (!mode) return props.labels?.auto ?? "Auto";
+  return mode === "hierarchy" ? props.labels?.hierarchy ?? "Hierarchy" : props.labels?.flat ?? "Flat";
+});
+const modeIcon = computed(() => {
+  const mode = props.tableView.effectiveMode.value;
+  return mode === "hierarchy" ? "i-lucide-columns-3" : "i-lucide-rows-3";
+});
+const sortLabel = computed(() => {
+  const key = props.tableView.sortKey.value;
+  if (!key) return void 0;
+  const dir = props.tableView.sortDir.value === "desc" ? "\u2193" : "\u2191";
+  return `${key} ${dir}`;
+});
+</script>
+
+<template>
+  <div class="flex items-center justify-between px-4 py-2 border-b border-(--ui-border) shrink-0 bg-(--ui-bg-elevated)/40">
+    <div class="flex items-center gap-2">
+      <span class="text-xs text-(--ui-text-muted)">
+        {{ rowCount }} row{{ rowCount !== 1 ? "s" : "" }}
+      </span>
+
+      <UDropdownMenu
+        :items="modeItems"
+        :content="{ align: 'start' }"
+      >
+        <UButton
+          :icon="modeIcon"
+          size="xs"
+          variant="ghost"
+          color="neutral"
+          :label="modeLabel"
+        />
+      </UDropdownMenu>
+
+      <UBadge
+        v-if="sortLabel"
+        size="sm"
+        variant="subtle"
+        color="neutral"
+        class="cursor-pointer"
+        @click="tableView.setSort(void 0)"
+      >
+        Sort: {{ sortLabel }}
+        <UIcon
+          name="i-lucide-x"
+          class="size-3 ml-1"
+        />
+      </UBadge>
+    </div>
+
+    <div
+      v-if="editable !== false"
+      class="flex gap-1"
+    >
+      <UButton
+        icon="i-lucide-columns-3"
+        size="xs"
+        variant="ghost"
+        color="neutral"
+        :label="labels?.addColumn ?? 'Add column'"
+        @click="emit('addColumn')"
+      />
+      <UButton
+        icon="i-lucide-plus"
+        size="xs"
+        variant="ghost"
+        color="neutral"
+        :label="labels?.addRow ?? 'Add row'"
+        @click="emit('addRow')"
+      />
+    </div>
+  </div>
+</template>

package/dist/runtime/components/renderers/table/ATableToolbar.vue.d.ts

@@ -0,0 +1,22 @@
+import type { useTableView } from '../../../composables/useTableView.js';
+type __VLS_Props = {
+    tableView: ReturnType<typeof useTableView>;
+    rowCount: number;
+    editable?: boolean;
+    labels?: {
+        addColumn?: string;
+        addRow?: string;
+        auto?: string;
+        hierarchy?: string;
+        flat?: string;
+    };
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    addColumn: () => any;
+    addRow: () => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onAddColumn?: (() => any) | undefined;
+    onAddRow?: (() => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/renderers/table/cells/ATableCell.d.vue.ts

@@ -0,0 +1,18 @@
+import type { TableColumnDef } from '../../../../composables/useChildTree.js';
+type __VLS_Props = {
+    value: unknown;
+    metaType: string;
+    editing: boolean;
+    column: TableColumnDef;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: unknown) => any;
+    startEdit: () => any;
+    stopEdit: () => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onUpdate:modelValue"?: ((value: unknown) => any) | undefined;
+    onStartEdit?: (() => any) | undefined;
+    onStopEdit?: (() => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/renderers/table/cells/ATableCell.vue

@@ -0,0 +1,54 @@
+<script setup>
+import ATableCellText from "./ATableCellText.vue";
+import ATableCellNumber from "./ATableCellNumber.vue";
+import ATableCellDate from "./ATableCellDate.vue";
+import ATableCellSelect from "./ATableCellSelect.vue";
+import ATableCellMultiSelect from "./ATableCellMultiSelect.vue";
+import ATableCellTags from "./ATableCellTags.vue";
+import ATableCellToggle from "./ATableCellToggle.vue";
+import ATableCellRating from "./ATableCellRating.vue";
+import ATableCellUrl from "./ATableCellUrl.vue";
+import ATableCellColor from "./ATableCellColor.vue";
+import ATableCellSlider from "./ATableCellSlider.vue";
+import ATableCellMembers from "./ATableCellMembers.vue";
+defineProps({
+  value: { type: null, required: true },
+  metaType: { type: String, required: true },
+  editing: { type: Boolean, required: true },
+  column: { type: Object, required: true }
+});
+const emit = defineEmits(["update:modelValue", "startEdit", "stopEdit"]);
+const CELL_MAP = {
+  text: ATableCellText,
+  number: ATableCellNumber,
+  date: ATableCellDate,
+  datetime: ATableCellDate,
+  select: ATableCellSelect,
+  multiselect: ATableCellMultiSelect,
+  tags: ATableCellTags,
+  toggle: ATableCellToggle,
+  rating: ATableCellRating,
+  url: ATableCellUrl,
+  color: ATableCellColor,
+  colorPreset: ATableCellColor,
+  colorPicker: ATableCellColor,
+  slider: ATableCellSlider,
+  progress: ATableCellSlider,
+  members: ATableCellMembers,
+  priority: ATableCellSelect,
+  status: ATableCellSelect
+};
+</script>
+
+<template>
+  <component
+    :is="CELL_MAP[metaType] ?? ATableCellText"
+    :value="value"
+    :editing="editing"
+    :column="column"
+    :meta-type="metaType"
+    @update:model-value="emit('update:modelValue', $event)"
+    @start-edit="emit('startEdit')"
+    @stop-edit="emit('stopEdit')"
+  />
+</template>

package/dist/runtime/components/renderers/table/cells/ATableCell.vue.d.ts

@@ -0,0 +1,18 @@
+import type { TableColumnDef } from '../../../../composables/useChildTree.js';
+type __VLS_Props = {
+    value: unknown;
+    metaType: string;
+    editing: boolean;
+    column: TableColumnDef;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: unknown) => any;
+    startEdit: () => any;
+    stopEdit: () => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onUpdate:modelValue"?: ((value: unknown) => any) | undefined;
+    onStartEdit?: (() => any) | undefined;
+    onStopEdit?: (() => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/renderers/table/cells/ATableCellColor.d.vue.ts

@@ -0,0 +1,14 @@
+type __VLS_Props = {
+    value: unknown;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: unknown) => any;
+    startEdit: () => any;
+    stopEdit: () => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onUpdate:modelValue"?: ((value: unknown) => any) | undefined;
+    onStartEdit?: (() => any) | undefined;
+    onStopEdit?: (() => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;