@abraca/nuxt 0.2.0 → 1.5.0

package/dist/runtime/components/ANodePanel.vue

@@ -1,5 +1,8 @@
 <script setup>
 import { ref, computed } from "vue";
+import { useAbracadabra } from "../composables/useAbracadabra";
+import { useSyncedMap } from "../composables/useYDoc";
+import { navigateTo } from "#imports";
 import { useChildTree } from "../composables/useChildTree";
 import { useAbraLocale } from "../composables/useAbraLocale";
 import { META_FIELD_DEFINITIONS } from "../utils/metaFieldDefinitions";
@@ -23,17 +26,16 @@ const tree = computed(() => {
   if (!props.nodeId) return null;
   return useChildTree(rootDoc, props.nodeId);
 });
+const treeMap = useSyncedMap(rootDoc, "doc-tree");
 const entry = computed(() => {
   if (!props.nodeId) return null;
-  const treeMap = rootDoc.value?.getMap("doc-tree");
-  return treeMap?.get(props.nodeId) ?? null;
+  return treeMap.data[props.nodeId] ?? null;
 });
 const meta = computed(() => entry.value?.meta ?? {});
 const currentType = computed(() => entry.value?.type ?? "doc");
 function patchMeta(patch) {
-  if (!props.nodeId || !rootDoc.value) return;
-  const treeMap = rootDoc.value.getMap("doc-tree");
-  const e = treeMap.get(props.nodeId);
+  if (!props.nodeId) return;
+  const e = treeMap.data[props.nodeId];
   if (e) {
     treeMap.set(props.nodeId, {
       ...e,
@@ -43,32 +45,11 @@ function patchMeta(patch) {
   }
 }
 function patchType(type) {
-  if (!props.nodeId || !rootDoc.value) return;
-  const treeMap = rootDoc.value.getMap("doc-tree");
-  const e = treeMap.get(props.nodeId);
+  if (!props.nodeId) return;
+  const e = treeMap.data[props.nodeId];
   if (e) treeMap.set(props.nodeId, { ...e, type, updatedAt: Date.now() });
 }
 const activeTab = ref("editor");
-const tabs = computed(() => {
-  const base = [
-    { key: "editor", label: locale.value.editorTab, icon: "i-lucide-file-text" },
-    { key: "properties", label: locale.value.propertiesTab, icon: "i-lucide-sliders-horizontal" }
-  ];
-  const pluginSlots2 = registry.getAllNodePanelSlots().filter((slot) => {
-    if (!props.nodeId || !tree.value) return false;
-    const e = tree.value.entries.value.find((en) => en.id === props.nodeId);
-    if (!e) return false;
-    return slot.when({
-      childId: props.nodeId,
-      childDoc: props.childProvider?.document ?? null,
-      parentDocId: props.nodeId,
-      parentType: props.docType,
-      meta: meta.value,
-      tree: tree.value
-    });
-  });
-  return [...base, ...pluginSlots2.map((s) => ({ key: s.id, label: s.label, icon: s.icon }))];
-});
 const pluginSlots = computed(() => {
   return registry.getAllNodePanelSlots().filter((slot) => {
     if (!props.nodeId || !tree.value) return false;
@@ -129,19 +110,19 @@ function setCustomFieldValue(field, value) {
   patchMeta({ [field.key]: value });
 }
 const statusOptions = [
-  { label: "None", value: "" },
+  { label: "None", value: "none" },
   { label: "Todo", value: "todo" },
   { label: "In progress", value: "in-progress" },
   { label: "Done", value: "done" },
   { label: "Archived", value: "archived" }
 ];
 const priorityOptions = [
-  { label: "None", value: 0 },
-  { label: "1 \u2014 Low", value: 1 },
-  { label: "2", value: 2 },
-  { label: "3 \u2014 Medium", value: 3 },
-  { label: "4", value: 4 },
-  { label: "5 \u2014 High", value: 5 }
+  { label: "None", value: "none" },
+  { label: "1 \u2014 Low", value: "1" },
+  { label: "2", value: "2" },
+  { label: "3 \u2014 Medium", value: "3" },
+  { label: "4", value: "4" },
+  { label: "5 \u2014 High", value: "5" }
 ];
 const addFieldMenuItems = computed(
   () => META_FIELD_DEFINITIONS.map((def) => ({
@@ -157,43 +138,85 @@ const addFieldMenuItems = computed(
     v-model:open="open"
     side="right"
     :title="nodeLabel || 'Document'"
-    :ui="{ width: 'max-w-xl' }"
+    :ui="{ content: 'sm:max-w-2xl' }"
     @update:open="(v) => !v && emit('close')"
   >
     <template #header>
-      <div class="flex items-center gap-2 min-w-0">
+      <div class="flex items-center gap-2 min-w-0 flex-1">
         <UIcon
           :name="meta.icon ?? 'i-lucide-file-text'"
           class="size-4 shrink-0"
           :style="meta.color ? `color: ${meta.color}` : ''"
           :class="meta.color ? '' : 'text-muted'"
         />
-        <span class="font-medium truncate">{{ nodeLabel || "Document" }}</span>
+        <span class="font-medium truncate flex-1">{{ nodeLabel || "Document" }}</span>
+        <UTooltip
+          text="Open as full page"
+          :content="{ side: 'bottom' }"
+        >
+          <UButton
+            icon="i-lucide-expand"
+            size="xs"
+            variant="ghost"
+            color="neutral"
+            @click="navigateTo(`/app/${nodeId}`)"
+          />
+        </UTooltip>
       </div>
     </template>
 
     <template #body>
-      <!-- Tabs -->
-      <UTabs
-        v-model="activeTab"
-        :items="tabs"
-        variant="link"
-        class="mb-4"
-      />
+      <!-- Tab bar -->
+      <div class="flex items-center gap-1 border-b border-(--ui-border) mb-4 -mt-2">
+        <UButton
+          icon="i-lucide-file-text"
+          :label="locale.editorTab"
+          size="sm"
+          :color="activeTab === 'editor' ? 'primary' : 'neutral'"
+          :variant="activeTab === 'editor' ? 'soft' : 'ghost'"
+          @click="activeTab = 'editor'"
+        />
+        <UButton
+          icon="i-lucide-sliders-horizontal"
+          :label="locale.propertiesTab"
+          size="sm"
+          :color="activeTab === 'properties' ? 'primary' : 'neutral'"
+          :variant="activeTab === 'properties' ? 'soft' : 'ghost'"
+          @click="activeTab = 'properties'"
+        />
+        <UButton
+          v-for="slot in pluginSlots"
+          :key="slot.id"
+          :icon="slot.icon"
+          :label="slot.label"
+          size="sm"
+          :color="activeTab === slot.id ? 'primary' : 'neutral'"
+          :variant="activeTab === slot.id ? 'soft' : 'ghost'"
+          @click="activeTab = slot.id"
+        />
+      </div>
 
       <!-- Editor tab -->
-      <div v-show="activeTab === 'editor'" class="h-[60vh]">
+      <div
+        v-show="activeTab === 'editor'"
+        class="min-h-[60vh]"
+      >
         <AEditor
           v-if="nodeId"
           :doc-id="nodeId"
           :child-provider="childProvider"
+          :parent-type="docType"
+          :doc-meta="meta"
           class="h-full overflow-auto"
+          @update-meta="patchMeta"
         />
       </div>
 
       <!-- Properties tab -->
-      <div v-show="activeTab === 'properties'" class="space-y-4">
-
+      <div
+        v-show="activeTab === 'properties'"
+        class="space-y-4"
+      >
         <!-- Document type -->
         <div class="space-y-1">
           <label class="text-xs font-medium text-muted">{{ locale.docType }}</label>
@@ -225,23 +248,24 @@ const addFieldMenuItems = computed(
         <div class="grid grid-cols-2 gap-3">
           <div class="space-y-1">
             <label class="text-xs font-medium text-muted">{{ locale.status }}</label>
-            <USelectMenu
-              :model-value="meta.status ?? ''"
+            <USelect
+              :model-value="meta.status || 'none'"
               :items="statusOptions"
               value-key="value"
-              placeholder="None"
+              label-key="label"
               size="sm"
-              @update:model-value="patchMeta({ status: $event || void 0 })"
+              @update:model-value="patchMeta({ status: $event === 'none' ? void 0 : $event })"
             />
           </div>
           <div class="space-y-1">
             <label class="text-xs font-medium text-muted">{{ locale.priority }}</label>
-            <USelectMenu
-              :model-value="meta.priority ?? 0"
+            <USelect
+              :model-value="meta.priority ? String(meta.priority) : 'none'"
               :items="priorityOptions"
               value-key="value"
+              label-key="label"
               size="sm"
-              @update:model-value="patchMeta({ priority: $event || void 0 })"
+              @update:model-value="patchMeta({ priority: $event === 'none' ? void 0 : Number($event) })"
             />
           </div>
         </div>
@@ -269,7 +293,10 @@ const addFieldMenuItems = computed(
               class="ml-1 text-xs text-muted hover:text-default"
               @click="patchMeta({ rating: void 0 })"
             >
-              <UIcon name="i-lucide-x" class="size-3" />
+              <UIcon
+                name="i-lucide-x"
+                class="size-3"
+              />
             </button>
           </div>
         </div>
@@ -317,7 +344,10 @@ const addFieldMenuItems = computed(
               @click="removeTag(tag)"
             >
               {{ tag }}
-              <UIcon name="i-lucide-x" class="size-3 ml-1" />
+              <UIcon
+                name="i-lucide-x"
+                class="size-3 ml-1"
+              />
             </UBadge>
           </div>
           <UInput
@@ -325,15 +355,26 @@ const addFieldMenuItems = computed(
             placeholder="Add tag…"
             size="sm"
             @keydown.enter.prevent="addTag"
-            @keydown.comma.prevent="addTag"
+            @keydown="($event2) => {
+  if ($event2.key === ',') {
+    $event2.preventDefault();
+    addTag();
+  }
+}"
           />
         </div>
 
         <!-- Cover image -->
-        <div v-if="meta.coverUploadId || meta.coverDocId" class="space-y-1">
+        <div
+          v-if="meta.coverUploadId || meta.coverDocId"
+          class="space-y-1"
+        >
           <label class="text-xs font-medium text-muted">{{ locale.cover }}</label>
           <div class="flex items-center gap-2 text-xs text-muted">
-            <UIcon name="i-lucide-image" class="size-4 shrink-0" />
+            <UIcon
+              name="i-lucide-image"
+              class="size-4 shrink-0"
+            />
             <span class="truncate">{{ meta.coverUploadId ?? meta.coverDocId }}</span>
             <UButton
               icon="i-lucide-x"
@@ -488,7 +529,10 @@ const addFieldMenuItems = computed(
                   class="cursor-pointer"
                   @click="setCustomFieldValue(field, getCustomFieldValue(field).filter((x) => x !== t))"
                 >
-                  {{ t }}<UIcon name="i-lucide-x" class="size-3 ml-1" />
+                  {{ t }}<UIcon
+                    name="i-lucide-x"
+                    class="size-3 ml-1"
+                  />
                 </UBadge>
               </div>
             </template>
@@ -522,7 +566,10 @@ const addFieldMenuItems = computed(
       </div>
 
       <!-- Plugin slots -->
-      <template v-for="slot in pluginSlots" :key="slot.id">
+      <template
+        v-for="slot in pluginSlots"
+        :key="slot.id"
+      >
         <div v-show="activeTab === slot.id">
           <component
             :is="slot.component"

package/dist/runtime/components/ANotifications.vue

@@ -1,5 +1,7 @@
 <script setup>
+import { ref, onMounted } from "vue";
 import { useAbraLocale } from "../composables/useAbraLocale";
+import { useNotifications } from "../composables/useNotifications";
 const notifProps = defineProps({
   labels: { type: Object, required: false }
 });
@@ -25,12 +27,24 @@ function openAndMarkFetched() {
         :aria-label="`Notifications${unreadCount > 0 ? ` (${unreadCount} unread)` : ''}`"
         @click="openAndMarkFetched"
       >
-        <template v-if="unreadCount > 0" #trailing>
-          <UChip :text="unreadCount > 9 ? '9+' : String(unreadCount)" color="error" size="xs" />
+        <template
+          v-if="unreadCount > 0"
+          #trailing
+        >
+          <UChip
+            :text="unreadCount > 9 ? '9+' : String(unreadCount)"
+            color="error"
+            size="xs"
+          />
         </template>
       </UButton>
 
-      <USlideover v-model:open="isOpen" :title="locale.title" side="right" :ui="{ width: 'max-w-sm' }">
+      <USlideover
+        v-model:open="isOpen"
+        :title="locale.title"
+        side="right"
+        :ui="{ content: 'max-w-sm' }"
+      >
         <template #header>
           <div class="flex items-center justify-between w-full">
             <span class="font-semibold">{{ locale.title }}</span>
@@ -56,15 +70,30 @@ function openAndMarkFetched() {
 ]"
               @click="markRead(n.id)"
             >
-              <UIcon :name="n.icon ?? 'i-lucide-bell'" class="size-4 shrink-0 mt-0.5 text-muted" />
+              <UIcon
+                :name="n.icon ?? 'i-lucide-bell'"
+                class="size-4 shrink-0 mt-0.5 text-muted"
+              />
               <div class="flex-1 min-w-0">
-                <div class="text-sm font-medium truncate">{{ n.title }}</div>
-                <div class="text-xs text-muted line-clamp-2">{{ n.body }}</div>
+                <div class="text-sm font-medium truncate">
+                  {{ n.title }}
+                </div>
+                <div class="text-xs text-muted line-clamp-2">
+                  {{ n.body }}
+                </div>
               </div>
-              <UChip v-if="!n.read" color="primary" size="xs" class="shrink-0 mt-1" />
+              <UChip
+                v-if="!n.read"
+                color="primary"
+                size="xs"
+                class="shrink-0 mt-1"
+              />
             </div>
 
-            <div v-if="!notifications.length" class="text-center py-12 text-muted text-sm">
+            <div
+              v-if="!notifications.length"
+              class="text-center py-12 text-muted text-sm"
+            >
               {{ locale.empty }}
             </div>
           </div>

package/dist/runtime/components/APermissionGuard.vue

@@ -1,4 +1,5 @@
 <script setup>
+import { computed } from "vue";
 import { useDocumentPermissions } from "../composables/useDocumentPermissions";
 import { useAbraLocale } from "../composables/useAbraLocale";
 const props = defineProps({
@@ -17,6 +18,8 @@ const allowed = computed(() => meetsRole(props.requires));
     v-else
     name="fallback"
   >
-    <p class="text-sm text-muted">{{ locale.noPermission }}</p>
+    <p class="text-sm text-muted">
+      {{ locale.noPermission }}
+    </p>
   </slot>
 </template>

package/dist/runtime/components/APresence.vue

@@ -1,5 +1,6 @@
 <script setup>
 import { computed } from "vue";
+import { useNuxtApp, useAppConfig } from "#imports";
 import { useAwarenessOf } from "../composables/useYDoc";
 import { avatarBorderStyle } from "../utils/avatarStyle";
 const props = defineProps({
@@ -27,10 +28,21 @@ function userAvatarStyle(user) {
 </script>
 
 <template>
-  <slot :users="users" :overflow="overflow" :current-user="currentUser" :avatar-style="userAvatarStyle">
+  <slot
+    :users="users"
+    :overflow="overflow"
+    :current-user="currentUser"
+    :avatar-style="userAvatarStyle"
+  >
     <!-- Default: render nothing, slot is the API -->
-    <template v-for="user in users" :key="user.clientId">
-      <slot name="user" :user="user" />
+    <template
+      v-for="user in users"
+      :key="user.clientId"
+    >
+      <slot
+        name="user"
+        :user="user"
+      />
     </template>
   </slot>
 </template>

package/dist/runtime/components/AProvider.d.vue.ts

@@ -1,4 +1,3 @@
-export declare const ABRA_DOC_KEY: unique symbol;
 type __VLS_Props = {
     docId: string;
     /** Wrapper element tag. Default: 'div'. Use 'template' for a renderless wrapper. */

package/dist/runtime/components/AProvider.vue

@@ -1,6 +1,7 @@
 <script setup>
 import { shallowRef, ref, watch, provide } from "vue";
-export const ABRA_DOC_KEY = /* @__PURE__ */ Symbol("abracadabra:doc-context");
+import { useNuxtApp } from "#imports";
+const ABRA_DOC_KEY = /* @__PURE__ */ Symbol("abracadabra:doc-context");
 const props = defineProps({
   docId: { type: String, required: true },
   tag: { type: String, required: false, default: "div" }
@@ -10,22 +11,34 @@ const childProvider = shallowRef(null);
 const childDoc = shallowRef(null);
 const synced = ref(false);
 const error = ref(null);
-watch(rootProvider, async (prov) => {
+let _currentCp = null;
+let _currentHandler = null;
+watch(rootProvider, async (prov, _, onCleanup) => {
+  if (_currentCp && _currentHandler) _currentCp.off("synced", _currentHandler);
+  _currentCp = null;
+  _currentHandler = null;
   if (!prov || !props.docId) return;
   try {
     const cp = await prov.loadChild(props.docId);
     childProvider.value = cp;
     childDoc.value = cp?.document ?? null;
     if (cp) {
-      cp.on("synced", ({ state }) => {
+      _currentHandler = ({ state }) => {
         synced.value = state;
-      });
+      };
+      cp.on("synced", _currentHandler);
+      _currentCp = cp;
       synced.value = cp.synced ?? false;
     }
   } catch (e) {
     error.value = e?.message ?? String(e);
     console.error("[AbracadabraProvider] Failed to load child provider:", e);
   }
+  onCleanup(() => {
+    if (_currentCp && _currentHandler) _currentCp.off("synced", _currentHandler);
+    _currentCp = null;
+    _currentHandler = null;
+  });
 }, { immediate: true });
 provide(ABRA_DOC_KEY, {
   childProvider,
@@ -37,6 +50,12 @@ provide(ABRA_DOC_KEY, {
 
 <template>
   <component :is="tag">
-    <slot :provider="childProvider" :doc="childDoc" :synced="synced" :doc-id="docId" :error="error" />
+    <slot
+      :provider="childProvider"
+      :doc="childDoc"
+      :synced="synced"
+      :doc-id="docId"
+      :error="error"
+    />
   </component>
 </template>

package/dist/runtime/components/AProvider.vue.d.ts

@@ -1,4 +1,3 @@
-export declare const ABRA_DOC_KEY: unique symbol;
 type __VLS_Props = {
     docId: string;
     /** Wrapper element tag. Default: 'div'. Use 'template' for a renderless wrapper. */

package/dist/runtime/components/ARoleBadge.vue

@@ -1,4 +1,5 @@
 <script setup>
+import { computed } from "vue";
 import { useAbraLocale } from "../composables/useAbraLocale";
 const props = defineProps({
   role: { type: String, required: true },

package/dist/runtime/components/ASpaceFormModal.d.vue.ts

@@ -0,0 +1,16 @@
+type __VLS_Props = {
+    open: boolean;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    created: (args_0: {
+        id: string;
+    }) => any;
+    "update:open": (v: boolean) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onCreated?: ((args_0: {
+        id: string;
+    }) => any) | undefined;
+    "onUpdate:open"?: ((v: boolean) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;