@abraca/nuxt 0.2.0 → 0.3.0

package/dist/runtime/components/renderers/ATableRenderer.vue

@@ -1,13 +1,16 @@
 <script setup>
-import { ref, computed } from "vue";
+import { ref, computed, watch, onBeforeUnmount } from "vue";
 import { useRendererBase } from "../../composables/useRendererBase";
+import { useTouchDrag } from "../../composables/useTouchDrag";
+import { useNodePanel } from "../../composables/useNodePanel";
 import { DEFAULT_LOCALE } from "../../locale";
 const props = defineProps({
   docId: { type: String, required: true },
   childProvider: { type: null, required: true },
   docLabel: { type: String, required: true },
   pageTypes: { type: Array, required: false },
-  labels: { type: Object, required: false }
+  labels: { type: Object, required: false },
+  editable: { type: Boolean, required: false, default: true }
 });
 const config = useRuntimeConfig();
 const locale = computed(() => ({
@@ -15,177 +18,466 @@ const locale = computed(() => ({
   ...config.public?.abracadabra?.locale?.renderers?.table ?? {},
   ...props.labels ?? {}
 }));
-const { tree } = useRendererBase(props);
-const rows = computed(() => tree.childrenOf(null).sort((a, b) => (a.order ?? 0) - (b.order ?? 0)));
-const detectedColumns = computed(() => {
-  const keys = /* @__PURE__ */ new Set(["label"]);
-  for (const row of rows.value) {
-    if (row.meta) {
-      for (const key of Object.keys(row.meta)) {
-        if (!["_metaFields", "_metaInitialized", "coverUploadId", "coverDocId", "coverMimeType"].includes(key)) {
-          keys.add(key);
-        }
+const { tree, childProviderRef, childDoc, states, setLocalState, connectedUsers } = useRendererBase(props);
+const {
+  openNodeId,
+  openNodeLabel,
+  openNodeProvider,
+  openNode,
+  closePanel
+} = useNodePanel(childProviderRef);
+const myClientId = computed(() => props.childProvider?.awareness?.clientID ?? 0);
+const INTERNAL_META_KEYS = /* @__PURE__ */ new Set([
+  "_metaFields",
+  "_metaInitialized",
+  "coverUploadId",
+  "coverDocId",
+  "coverMimeType",
+  "geoType",
+  "geoLat",
+  "geoLng",
+  "icon",
+  "color",
+  "geoDescription"
+]);
+const UUID_RE = /^[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}$/i;
+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 columns = computed(
+  () => tree.childrenOf(null).sort((a, b) => (a.order ?? 0) - (b.order ?? 0))
+);
+const colChildren = computed(() => {
+  const map = /* @__PURE__ */ new Map();
+  for (const col of columns.value) {
+    map.set(col.id, tree.childrenOf(col.id).sort((a, b) => (a.order ?? 0) - (b.order ?? 0)));
+  }
+  return map;
+});
+const rowCount = computed(
+  () => Math.max(0, ...columns.value.map((c) => colChildren.value.get(c.id)?.length ?? 0))
+);
+function getCellEntry(colId, rowIdx) {
+  return colChildren.value.get(colId)?.[rowIdx];
+}
+function getRowRep(rowIdx) {
+  for (const col of columns.value) {
+    const entry = getCellEntry(col.id, rowIdx);
+    if (entry) return entry;
+  }
+  return void 0;
+}
+const metaColumns = computed(() => {
+  const colIds = new Set(columns.value.map((c) => c.id));
+  const keys = /* @__PURE__ */ new Set();
+  for (const col of columns.value) {
+    const children = colChildren.value.get(col.id) ?? [];
+    for (const cell of children) {
+      if (!cell.meta) continue;
+      for (const key of Object.keys(cell.meta)) {
+        if (INTERNAL_META_KEYS.has(key)) continue;
+        if (UUID_RE.test(key)) continue;
+        if (colIds.has(key)) continue;
+        keys.add(key);
       }
     }
   }
-  return [...keys];
+  return [...keys].sort().map((key) => ({
+    id: `__meta_${key}`,
+    label: camelToTitle(key),
+    metaKey: key
+  }));
 });
+function getCellValue(colId, rowIdx) {
+  const entry = getCellEntry(colId, rowIdx);
+  return entry?.label && entry.label !== "Untitled" ? entry.label : "";
+}
+function getMetaCellValue(rowIdx, metaKey) {
+  for (const col of columns.value) {
+    const entry = getCellEntry(col.id, rowIdx);
+    if (entry?.meta?.[metaKey] !== void 0) return String(entry.meta[metaKey]);
+  }
+  return "";
+}
+function setCellValue(colId, rowIdx, value) {
+  if (!props.editable) return;
+  const entry = getCellEntry(colId, rowIdx);
+  if (entry) {
+    tree.renameEntry(entry.id, value.trim() || "Untitled");
+  } else {
+    tree.createChild(colId, value.trim() || "Untitled");
+  }
+}
+function setMetaCellValue(rowIdx, metaKey, value) {
+  if (!props.editable) return;
+  const rep = getRowRep(rowIdx);
+  if (rep) tree.updateMeta(rep.id, { [metaKey]: value });
+}
+function addColumn() {
+  if (!props.editable) return;
+  tree.createChild(null, locale.value.addColumn === "Add column" ? "New Column" : locale.value.addColumn);
+}
+function deleteColumn(col) {
+  if (!props.editable) return;
+  tree.deleteEntry(col.id);
+}
+function deleteMetaColumn(metaKey) {
+  if (!props.editable) return;
+  for (const col of columns.value) {
+    const children = colChildren.value.get(col.id) ?? [];
+    for (const cell of children) {
+      if (cell.meta?.[metaKey] !== void 0) {
+        const newMeta = { ...cell.meta };
+        delete newMeta[metaKey];
+        tree.treeMap.set(cell.id, { ...tree.treeMap.get(cell.id), meta: newMeta });
+      }
+    }
+  }
+}
+function addRow() {
+  if (!props.editable) return;
+  if (!columns.value[0]) return;
+  tree.createChild(columns.value[0].id, "");
+}
+function deleteRow(rowIdx) {
+  if (!props.editable) return;
+  for (const col of columns.value) {
+    const entry = getCellEntry(col.id, rowIdx);
+    if (entry) tree.deleteEntry(entry.id);
+  }
+}
 const editingCell = ref(null);
-const editValue = ref("");
-function getCellValue(row, col) {
-  if (col === "label") return row.label;
-  const v = row.meta?.[col];
-  if (v === void 0 || v === null) return "";
-  if (Array.isArray(v)) return v.join(", ");
-  return String(v);
-}
-function startEdit(rowId, col, value) {
-  editingCell.value = { rowId, col };
-  editValue.value = value;
+const editingValue = ref("");
+function startEditDocCol(rowIdx, col) {
+  if (!props.editable) return;
+  editingCell.value = { rowIdx, colId: col.id };
+  editingValue.value = getCellValue(col.id, rowIdx);
+  setLocalState({ "table:editing": { rowIdx, fieldId: col.id } });
+}
+function startEditMetaCol(rowIdx, mc) {
+  if (!props.editable) return;
+  editingCell.value = { rowIdx, colId: mc.id, metaKey: mc.metaKey };
+  editingValue.value = getMetaCellValue(rowIdx, mc.metaKey);
+  setLocalState({ "table:editing": { rowIdx, fieldId: mc.id } });
 }
 function commitEdit() {
   if (!editingCell.value) return;
-  const { rowId, col } = editingCell.value;
-  const entry = tree.treeMap.get(rowId);
-  if (!entry) {
-    editingCell.value = null;
-    return;
-  }
-  if (col === "label") {
-    tree.treeMap.set(rowId, { ...entry, label: editValue.value, updatedAt: Date.now() });
+  if (editingCell.value.metaKey) {
+    setMetaCellValue(editingCell.value.rowIdx, editingCell.value.metaKey, editingValue.value);
   } else {
-    tree.treeMap.set(rowId, {
-      ...entry,
-      meta: { ...entry.meta ?? {}, [col]: editValue.value },
-      updatedAt: Date.now()
-    });
+    setCellValue(editingCell.value.colId, editingCell.value.rowIdx, editingValue.value);
   }
   editingCell.value = null;
+  setLocalState({ "table:editing": null });
 }
-function addRow() {
-  tree.createChild(null, locale.value.untitled);
+const editingColId = ref(null);
+const editingColValue = ref("");
+function startRenameCol(col) {
+  if (!props.editable) return;
+  editingColId.value = col.id;
+  editingColValue.value = col.label;
+}
+function commitRenameCol() {
+  if (!props.editable) return;
+  if (editingColId.value && editingColValue.value.trim()) {
+    tree.renameEntry(editingColId.value, editingColValue.value.trim());
+  }
+  editingColId.value = null;
 }
-function deleteRow(id) {
-  tree.treeMap.remove(id);
+function rowIdxFromDragId(id) {
+  return Number.parseInt(id.replace("row-", ""), 10);
 }
-const newColName = ref("");
-const showAddCol = ref(false);
-function addColumn() {
-  const name = newColName.value.trim();
-  if (!name) return;
-  for (const row of rows.value) {
-    const entry = tree.treeMap.get(row.id);
-    if (entry && !entry.meta?.[name]) {
-      tree.treeMap.set(row.id, {
-        ...entry,
-        meta: { ...entry.meta ?? {}, [name]: "" },
-        updatedAt: Date.now()
-      });
+const {
+  dragId: rowDragId,
+  dragOverId: rowDragOverId,
+  handlePointerDown: handleRowPointerDown
+} = useTouchDrag({
+  idAttr: "data-drag-id",
+  onDrop: (srcDragId, targetDragId) => {
+    if (!props.editable) return;
+    const srcIdx = rowIdxFromDragId(srcDragId);
+    const targetIdx = rowIdxFromDragId(targetDragId);
+    if (srcIdx === targetIdx) return;
+    for (const col of columns.value) {
+      const children = colChildren.value.get(col.id) ?? [];
+      const srcEntry = children[srcIdx];
+      if (!srcEntry) continue;
+      const prev = children[targetIdx - (targetIdx > srcIdx ? 0 : 1)];
+      const next = children[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;
+      tree.moveEntry(srcEntry.id, col.id, newOrder);
     }
   }
-  newColName.value = "";
-  showAddCol.value = false;
+});
+function cellEditor(rowIdx, fieldId) {
+  return states.value.filter((s) => s.clientId !== myClientId.value).find(
+    (s) => s["table:editing"]?.rowIdx === rowIdx && s["table:editing"]?.fieldId === fieldId
+  );
+}
+function ensureTableStructure() {
+  if (!childDoc.value) return;
+  const allChildren = tree.childrenOf(null);
+  if (allChildren.length === 0) return;
+  const hasHierarchy = allChildren.some((item) => tree.childrenOf(item.id).length > 0);
+  if (hasHierarchy) return;
+  const colId = tree.createChild(null, "Name");
+  tree.moveEntry(colId, null, -1e3);
+  for (const item of allChildren) {
+    tree.moveEntry(item.id, colId, item.order);
+  }
 }
+watch(childDoc, (doc) => {
+  if (doc) ensureTableStructure();
+}, { immediate: true });
+onBeforeUnmount(() => {
+  setLocalState({ "table:editing": null });
+});
+defineExpose({ connectedUsers });
 </script>
 
 <template>
-  <div class="p-4 overflow-auto">
-    <div class="border border-muted rounded-lg overflow-hidden">
-      <table class="w-full text-sm border-collapse">
-        <!-- Header -->
-        <thead>
-          <tr class="bg-muted/50">
-            <th
-              v-for="col in detectedColumns"
-              :key="col"
-              class="px-3 py-2 text-left font-medium text-muted capitalize border-b border-muted"
-            >
-              {{ col }}
-            </th>
-            <th class="px-2 py-2 border-b border-muted w-8">
-              <UButton
-                icon="i-lucide-plus"
-                variant="ghost"
-                color="neutral"
-                size="xs"
-                @click="showAddCol = !showAddCol"
-              />
-            </th>
-          </tr>
-          <tr v-if="showAddCol">
-            <td
-              :colspan="detectedColumns.length + 1"
-              class="px-3 py-1 border-b border-muted"
-            >
-              <div class="flex gap-2">
-                <UInput
-                  v-model="newColName"
-                  placeholder="Column name"
-                  size="xs"
-                  class="flex-1"
-                  @keydown.enter="addColumn"
-                  @keydown.escape="showAddCol = false"
-                />
-                <UButton
-                  size="xs"
-                  label="Add"
-                  @click="addColumn"
-                />
-              </div>
-            </td>
-          </tr>
-        </thead>
-        <!-- Rows -->
-        <tbody>
-          <tr
-            v-for="row in rows"
-            :key="row.id"
-            class="group hover:bg-muted/30 border-b border-muted last:border-b-0"
+  <div class="flex-1 min-h-0 flex flex-col relative">
+    <!-- Toolbar -->
+    <div class="flex items-center justify-between px-4 py-2 border-b border-(--ui-border) shrink-0">
+      <span class="text-xs text-(--ui-text-muted)">
+        {{ rowCount }} row{{ rowCount !== 1 ? "s" : "" }}
+      </span>
+      <div
+        v-if="editable"
+        class="flex gap-1"
+      >
+        <UButton
+          icon="i-lucide-columns-3"
+          size="xs"
+          variant="ghost"
+          color="neutral"
+          :label="locale.addColumn"
+          @click="addColumn"
+        />
+        <UButton
+          icon="i-lucide-plus"
+          size="xs"
+          variant="ghost"
+          color="neutral"
+          :label="locale.addRow"
+          @click="addRow"
+        />
+      </div>
+    </div>
+
+    <!-- Content -->
+    <div class="flex-1 overflow-auto">
+      <!-- Empty state -->
+      <div
+        v-if="columns.length === 0"
+        class="flex flex-col items-center justify-center h-full gap-3 text-center"
+      >
+        <UIcon
+          name="i-lucide-table"
+          class="size-10 text-(--ui-text-dimmed)"
+        />
+        <p class="text-sm text-(--ui-text-muted)">
+          {{ locale.noRows }}
+        </p>
+        <UButton
+          v-if="editable"
+          icon="i-lucide-plus"
+          :label="locale.addColumn"
+          size="sm"
+          @click="addColumn"
+        />
+      </div>
+
+      <template v-else>
+        <table class="w-full text-sm border-collapse">
+          <thead class="sticky top-0 bg-(--ui-bg) z-10">
+            <tr class="border-b border-(--ui-border)">
+              <th class="w-6 px-1" />
+              <th class="text-left px-3 py-2 text-xs font-medium text-(--ui-text-muted) w-8">
+                #
+              </th>
+              <!-- Document columns -->
+              <th
+                v-for="col in columns"
+                :key="col.id"
+                class="text-left px-3 py-2 text-xs font-medium text-(--ui-text-muted) min-w-32"
+              >
+                <div class="group flex items-center gap-1">
+                  <input
+                    v-if="editingColId === col.id"
+                    v-model="editingColValue"
+                    class="bg-transparent outline-none text-xs font-medium w-full"
+                    autofocus
+                    @keydown.enter="commitRenameCol"
+                    @keydown.escape="editingColId = null"
+                    @blur="commitRenameCol"
+                  >
+                  <span
+                    v-else
+                    class="cursor-text"
+                    @dblclick="startRenameCol(col)"
+                  >
+                    {{ col.label }}
+                  </span>
+                  <UButton
+                    v-if="editable"
+                    icon="i-lucide-x"
+                    size="xs"
+                    variant="ghost"
+                    color="neutral"
+                    class="opacity-0 group-hover:opacity-100"
+                    @click="deleteColumn(col)"
+                  />
+                </div>
+              </th>
+              <!-- Meta columns -->
+              <th
+                v-for="mc in metaColumns"
+                :key="mc.id"
+                class="text-left px-3 py-2 text-xs font-medium text-(--ui-text-muted) min-w-32"
+              >
+                <div class="group flex items-center gap-1">
+                  <span class="cursor-default">{{ mc.label }}</span>
+                  <UButton
+                    v-if="editable"
+                    icon="i-lucide-x"
+                    size="xs"
+                    variant="ghost"
+                    color="neutral"
+                    class="opacity-0 group-hover:opacity-100"
+                    @click="deleteMetaColumn(mc.metaKey)"
+                  />
+                </div>
+              </th>
+            </tr>
+          </thead>
+          <TransitionGroup
+            name="trow"
+            tag="tbody"
           >
-            <td
-              v-for="col in detectedColumns"
-              :key="col"
-              class="px-3 py-1.5"
-              @dblclick="startEdit(row.id, col, getCellValue(row, col))"
+            <tr
+              v-for="idx in rowCount"
+              :key="getRowRep(idx - 1)?.id ?? `row-${idx}`"
+              :data-drag-id="`row-${idx - 1}`"
+              class="hover:bg-(--ui-bg-elevated) group"
+              :class="[
+  rowDragOverId === `row-${idx - 1}` ? 'border-t-2 border-(--ui-primary)' : 'border-b border-(--ui-border)',
+  rowDragId === `row-${idx - 1}` ? 'opacity-30' : ''
+]"
             >
-              <template v-if="editingCell?.rowId === row.id && editingCell?.col === col">
+              <td
+                class="px-1 py-1.5 text-(--ui-text-dimmed) w-6"
+                :class="editable ? 'opacity-0 group-hover:opacity-60 cursor-grab touch-none' : 'opacity-0'"
+                v-on="editable ? { pointerdown: ($event) => handleRowPointerDown($event, `row-${idx - 1}`) } : {}"
+              >
+                <UIcon
+                  v-if="editable"
+                  name="i-lucide-grip-vertical"
+                  class="size-4"
+                />
+              </td>
+              <td class="px-3 py-1.5 text-xs text-(--ui-text-dimmed) select-none">
+                <div class="flex items-center gap-0.5">
+                  <span class="w-4 text-center">{{ idx }}</span>
+                  <UButton
+                    v-if="getRowRep(idx - 1)"
+                    icon="i-lucide-external-link"
+                    size="xs"
+                    variant="ghost"
+                    color="neutral"
+                    class="opacity-0 group-hover:opacity-100"
+                    @click="openNode(getRowRep(idx - 1).id, getRowRep(idx - 1).label)"
+                  />
+                  <UButton
+                    v-if="editable"
+                    icon="i-lucide-trash-2"
+                    size="xs"
+                    variant="ghost"
+                    color="error"
+                    class="opacity-0 group-hover:opacity-100"
+                    @click="deleteRow(idx - 1)"
+                  />
+                </div>
+              </td>
+              <!-- Document column cells -->
+              <td
+                v-for="col in columns"
+                :key="col.id"
+                class="px-3 py-1.5 cursor-text"
+                :style="cellEditor(idx - 1, col.id) ? { outline: `2px solid ${cellEditor(idx - 1, col.id).user?.color}` } : {}"
+                @click="startEditDocCol(idx - 1, col)"
+              >
                 <input
-                  v-model="editValue"
-                  class="w-full bg-transparent border-none outline-none text-sm"
+                  v-if="editingCell?.rowIdx === idx - 1 && editingCell?.colId === col.id"
+                  v-model="editingValue"
+                  class="w-full bg-transparent outline-none text-sm"
+                  autofocus
                   @blur="commitEdit"
                   @keydown.enter="commitEdit"
                   @keydown.escape="editingCell = null"
+                  @click.stop
                 >
-              </template>
-              <span
-                v-else
-                class="truncate block"
-              >{{ getCellValue(row, col) }}</span>
-            </td>
-            <td class="px-2 py-1">
-              <UButton
-                icon="i-lucide-trash"
-                variant="ghost"
-                color="error"
-                size="xs"
-                class="opacity-0 group-hover:opacity-100"
-                @click="deleteRow(row.id)"
-              />
-            </td>
-          </tr>
-        </tbody>
-      </table>
-    </div>
+                <span
+                  v-else
+                  class="block text-sm text-(--ui-text) min-h-5"
+                >
+                  {{ getCellValue(col.id, idx - 1) }}
+                </span>
+              </td>
+              <!-- Meta column cells -->
+              <td
+                v-for="mc in metaColumns"
+                :key="mc.id"
+                class="px-3 py-1.5 cursor-text"
+                :style="cellEditor(idx - 1, mc.id) ? { outline: `2px solid ${cellEditor(idx - 1, mc.id).user?.color}` } : {}"
+                @click="startEditMetaCol(idx - 1, mc)"
+              >
+                <input
+                  v-if="editingCell?.rowIdx === idx - 1 && editingCell?.colId === mc.id"
+                  v-model="editingValue"
+                  class="w-full bg-transparent outline-none text-sm"
+                  autofocus
+                  @blur="commitEdit"
+                  @keydown.enter="commitEdit"
+                  @keydown.escape="editingCell = null"
+                  @click.stop
+                >
+                <span
+                  v-else
+                  class="block text-sm text-(--ui-text) min-h-5"
+                >
+                  {{ getMetaCellValue(idx - 1, mc.metaKey) }}
+                </span>
+              </td>
+            </tr>
+          </TransitionGroup>
+        </table>
 
-    <div class="mt-2">
-      <UButton
-        icon="i-lucide-plus"
-        variant="ghost"
-        color="neutral"
-        size="sm"
-        :label="locale.addRow"
-        @click="addRow"
-      />
+        <!-- Add row footer -->
+        <button
+          v-if="editable"
+          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"
+        >
+          + {{ locale.addRow }}
+        </button>
+      </template>
     </div>
+
+    <!-- Node panel -->
+    <ANodePanel
+      :node-id="openNodeId"
+      :node-label="openNodeLabel"
+      :child-provider="openNodeProvider"
+      @close="closePanel"
+    />
   </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/ATableRenderer.vue.d.ts

@@ -2,7 +2,18 @@ import { type RendererBaseProps } from '../../composables/useRendererBase.js';
 import type { AbracadabraLocale } from '../../locale.js';
 type __VLS_Props = RendererBaseProps & {
     labels?: Partial<AbracadabraLocale['renderers']['table']>;
+    editable?: boolean;
 };
-declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {
+    connectedUsers: import("vue").ComputedRef<{
+        clientId: number;
+        name: string;
+        color: string;
+        avatar: string | undefined;
+        publicKey: any;
+    }[]>;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    editable: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/components/renderers/ATimelineRenderer.d.vue.ts

@@ -0,0 +1,19 @@
+import { type RendererBaseProps } from '../../composables/useRendererBase.js';
+import type { AbracadabraLocale } from '../../locale.js';
+type __VLS_Props = RendererBaseProps & {
+    labels?: Partial<AbracadabraLocale['renderers']['timeline']>;
+    editable?: boolean;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {
+    connectedUsers: import("vue").ComputedRef<{
+        clientId: number;
+        name: string;
+        color: string;
+        avatar: string | undefined;
+        publicKey: any;
+    }[]>;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    editable: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;