@abraca/nuxt 0.2.0 → 1.5.0

package/dist/runtime/extensions/views/MetaFieldView.vue

@@ -48,6 +48,10 @@ function getStrArr(key) {
   const v = storage()?.pageMeta?.[key];
   return Array.isArray(v) ? v : [];
 }
+function getObjArr(key) {
+  const v = storage()?.pageMeta?.[key];
+  return Array.isArray(v) ? v : [];
+}
 function getNum(key, fallback = 0) {
   return storage()?.pageMeta?.[key] ?? fallback;
 }
@@ -55,7 +59,10 @@ function getBool(key) {
   return Boolean(storage()?.pageMeta?.[key]);
 }
 function patch(update) {
-  storage()?.updateMeta?.(update);
+  const s = storage();
+  if (!s) return;
+  if (s.pageMeta) Object.assign(s.pageMeta, update);
+  s.updateMeta?.(update);
 }
 const labelDraft = ref("");
 function commitLabel() {
@@ -148,6 +155,10 @@ const displayValue = computed(() => {
     const lat = getNum(metaKey.value);
     return lat ? `${getNum(props.node.attrs.latKey)?.toFixed(2)}, ${getNum(props.node.attrs.lngKey)?.toFixed(2)}` : "Set";
   }
+  if (t === "members") {
+    const arr = getObjArr(metaKey.value);
+    return arr.length ? arr.map((m) => m.label).join(", ") : "Add members";
+  }
   return getStr(metaKey.value) || "\u2014";
 });
 const chipColor = computed(() => {
@@ -159,25 +170,44 @@ const popoverOpen = ref(false);
 const editingText = ref(false);
 const textDraft = ref("");
 const newOption = ref("");
+const memberSearch = ref("");
+const mentionItems = computed(
+  () => props.editor.storage?.metaField?.mentionItems ?? []
+);
+const filteredMentionItems = computed(() => {
+  const q = memberSearch.value.toLowerCase();
+  return q ? mentionItems.value.filter((u) => u.label.toLowerCase().includes(q)) : mentionItems.value;
+});
+function onToggleMember(user) {
+  const current = getObjArr(metaKey.value);
+  const exists = current.some((m) => m.id === user.id);
+  patch({ [metaKey.value]: exists ? current.filter((m) => m.id !== user.id) : [...current, { id: user.id, label: user.label }] });
+}
 function openEditor() {
   labelDraft.value = fieldLabel.value;
   popoverOpen.value = true;
 }
-function startTextEdit() {
+function _startTextEdit() {
   textDraft.value = getStr(metaKey.value);
   editingText.value = true;
   nextTick(() => document.querySelector(".meta-text-input")?.focus());
 }
-function commitText() {
+function _commitText() {
   patch({ [metaKey.value]: textDraft.value });
   editingText.value = false;
 }
 </script>
 
 <template>
-  <NodeViewWrapper as="span" class="inline-flex items-center">
+  <NodeViewWrapper
+    as="span"
+    class="inline-flex items-center"
+  >
     <!-- ── Chip wrapper ─────────────────────────────────────────────────────── -->
-    <UPopover v-model:open="popoverOpen" :content="{ side: 'bottom', align: 'start' }">
+    <UPopover
+      v-model:open="popoverOpen"
+      :content="{ side: 'bottom', align: 'start' }"
+    >
       <button
         type="button"
         class="inline-flex items-center gap-1 rounded-md border border-default bg-muted px-2 py-0.5 text-xs font-medium text-default hover:bg-elevated cursor-pointer select-none mx-0.5"
@@ -197,10 +227,16 @@ function commitText() {
         <span class="text-default">
           <!-- Toggle shows a switch icon -->
           <span v-if="fieldType === 'toggle'">
-            <UIcon :name="getBool(metaKey) ? 'i-lucide-toggle-right' : 'i-lucide-toggle-left'" class="size-3.5 align-middle" />
+            <UIcon
+              :name="getBool(metaKey) ? 'i-lucide-toggle-right' : 'i-lucide-toggle-left'"
+              class="size-3.5 align-middle"
+            />
           </span>
           <!-- Rating shows stars -->
-          <span v-else-if="fieldType === 'rating'" class="flex gap-0.5">
+          <span
+            v-else-if="fieldType === 'rating'"
+            class="flex gap-0.5"
+          >
             <UIcon
               v-for="i in sliderMax"
               :key="i"
@@ -235,11 +271,14 @@ function commitText() {
               class="flex-1 text-xs font-medium bg-transparent border-none outline-none"
               @blur="commitLabel"
               @keydown.enter.prevent="commitLabel"
-            />
+            >
           </div>
 
           <!-- ── Toggle ──────────────────────────────────────────────────── -->
-          <div v-if="fieldType === 'toggle'" class="flex items-center justify-between">
+          <div
+            v-if="fieldType === 'toggle'"
+            class="flex items-center justify-between"
+          >
             <span class="text-xs text-muted">{{ getBool(metaKey) ? "On" : "Off" }}</span>
             <USwitch
               :model-value="getBool(metaKey)"
@@ -248,7 +287,10 @@ function commitText() {
           </div>
 
           <!-- ── Color presets ───────────────────────────────────────────── -->
-          <div v-else-if="fieldType === 'colorPreset'" class="flex flex-wrap gap-1.5">
+          <div
+            v-else-if="fieldType === 'colorPreset'"
+            class="flex flex-wrap gap-1.5"
+          >
             <button
               v-for="c in allPresets"
               :key="c"
@@ -263,18 +305,24 @@ function commitText() {
               class="size-5 rounded-full border border-default flex items-center justify-center text-muted hover:bg-muted"
               @click="patch({ [metaKey]: '' })"
             >
-              <UIcon name="i-lucide-x" class="size-3" />
+              <UIcon
+                name="i-lucide-x"
+                class="size-3"
+              />
             </button>
           </div>
 
           <!-- ── Color picker ────────────────────────────────────────────── -->
-          <div v-else-if="fieldType === 'colorPicker'" class="space-y-1">
+          <div
+            v-else-if="fieldType === 'colorPicker'"
+            class="space-y-1"
+          >
             <input
               type="color"
               :value="getStr(metaKey) || '#6366f1'"
               class="w-full h-8 rounded cursor-pointer"
               @input="(e) => patch({ [metaKey]: e.target.value })"
-            />
+            >
             <UButton
               v-if="getStr(metaKey)"
               icon="i-lucide-x"
@@ -294,7 +342,7 @@ function commitText() {
               :value="getStr(metaKey)"
               class="w-full text-xs rounded border border-default bg-transparent px-2 py-1 outline-none"
               @change="(e) => patch({ [metaKey]: e.target.value })"
-            />
+            >
           </div>
 
           <!-- ── Datetime ───────────────────────────────────────────────── -->
@@ -304,32 +352,85 @@ function commitText() {
               :value="getStr(metaKey)"
               class="w-full text-xs rounded border border-default bg-transparent px-2 py-1 outline-none"
               @change="(e) => patch({ [metaKey]: e.target.value })"
-            />
+            >
           </div>
 
           <!-- ── Date range ─────────────────────────────────────────────── -->
-          <div v-else-if="fieldType === 'daterange'" class="space-y-1">
-            <div class="flex items-center gap-1 text-xs text-muted"><span class="w-8">Start</span><input type="date" :value="getStr(startKey)" class="flex-1 text-xs rounded border border-default bg-transparent px-2 py-1 outline-none" @change="(e) => patch({ [startKey]: e.target.value })" /></div>
-            <div class="flex items-center gap-1 text-xs text-muted"><span class="w-8">End</span><input type="date" :value="getStr(endKey)" class="flex-1 text-xs rounded border border-default bg-transparent px-2 py-1 outline-none" @change="(e) => patch({ [endKey]: e.target.value })" /></div>
+          <div
+            v-else-if="fieldType === 'daterange'"
+            class="space-y-1"
+          >
+            <div class="flex items-center gap-1 text-xs text-muted">
+              <span class="w-8">Start</span><input
+                type="date"
+                :value="getStr(startKey)"
+                class="flex-1 text-xs rounded border border-default bg-transparent px-2 py-1 outline-none"
+                @change="(e) => patch({ [startKey]: e.target.value })"
+              >
+            </div>
+            <div class="flex items-center gap-1 text-xs text-muted">
+              <span class="w-8">End</span><input
+                type="date"
+                :value="getStr(endKey)"
+                class="flex-1 text-xs rounded border border-default bg-transparent px-2 py-1 outline-none"
+                @change="(e) => patch({ [endKey]: e.target.value })"
+              >
+            </div>
           </div>
 
           <!-- ── Datetime range ─────────────────────────────────────────── -->
-          <div v-else-if="fieldType === 'datetimerange'" class="space-y-1">
-            <div class="flex items-center gap-1 text-xs text-muted"><span class="w-8">Start</span><input type="datetime-local" :value="getStr(startKey)" class="flex-1 text-xs rounded border border-default bg-transparent px-2 py-1 outline-none" @change="(e) => patch({ [startKey]: e.target.value })" /></div>
-            <div class="flex items-center gap-1 text-xs text-muted"><span class="w-8">End</span><input type="datetime-local" :value="getStr(endKey)" class="flex-1 text-xs rounded border border-default bg-transparent px-2 py-1 outline-none" @change="(e) => patch({ [endKey]: e.target.value })" /></div>
-            <div class="flex items-center gap-2 text-xs"><USwitch :model-value="getBool(allDayKey)" @update:model-value="(v) => patch({ [allDayKey]: v })" /><span class="text-muted">All day</span></div>
+          <div
+            v-else-if="fieldType === 'datetimerange'"
+            class="space-y-1"
+          >
+            <div class="flex items-center gap-1 text-xs text-muted">
+              <span class="w-8">Start</span><input
+                type="datetime-local"
+                :value="getStr(startKey)"
+                class="flex-1 text-xs rounded border border-default bg-transparent px-2 py-1 outline-none"
+                @change="(e) => patch({ [startKey]: e.target.value })"
+              >
+            </div>
+            <div class="flex items-center gap-1 text-xs text-muted">
+              <span class="w-8">End</span><input
+                type="datetime-local"
+                :value="getStr(endKey)"
+                class="flex-1 text-xs rounded border border-default bg-transparent px-2 py-1 outline-none"
+                @change="(e) => patch({ [endKey]: e.target.value })"
+              >
+            </div>
+            <div class="flex items-center gap-2 text-xs">
+              <USwitch
+                :model-value="getBool(allDayKey)"
+                @update:model-value="(v) => patch({ [allDayKey]: v })"
+              /><span class="text-muted">All day</span>
+            </div>
           </div>
 
           <!-- ── Time ───────────────────────────────────────────────────── -->
           <div v-else-if="fieldType === 'time' || fieldType === 'timerange'">
             <div class="space-y-1">
-              <input type="time" :value="fieldType === 'time' ? getStr(metaKey) : getStr(startKey)" class="w-full text-xs rounded border border-default bg-transparent px-2 py-1 outline-none" @change="(e) => patch({ [fieldType === 'time' ? metaKey : startKey]: e.target.value })" />
-              <input v-if="fieldType === 'timerange'" type="time" :value="getStr(endKey)" class="w-full text-xs rounded border border-default bg-transparent px-2 py-1 outline-none" @change="(e) => patch({ [endKey]: e.target.value })" />
+              <input
+                type="time"
+                :value="fieldType === 'time' ? getStr(metaKey) : getStr(startKey)"
+                class="w-full text-xs rounded border border-default bg-transparent px-2 py-1 outline-none"
+                @change="(e) => patch({ [fieldType === 'time' ? metaKey : startKey]: e.target.value })"
+              >
+              <input
+                v-if="fieldType === 'timerange'"
+                type="time"
+                :value="getStr(endKey)"
+                class="w-full text-xs rounded border border-default bg-transparent px-2 py-1 outline-none"
+                @change="(e) => patch({ [endKey]: e.target.value })"
+              >
             </div>
           </div>
 
           <!-- ── Slider ─────────────────────────────────────────────────── -->
-          <div v-else-if="fieldType === 'slider'" class="space-y-1">
+          <div
+            v-else-if="fieldType === 'slider'"
+            class="space-y-1"
+          >
             <div class="flex items-center gap-2">
               <USlider
                 :model-value="getNum(metaKey, sliderMin)"
@@ -347,7 +448,10 @@ function commitText() {
           </div>
 
           <!-- ── Number ─────────────────────────────────────────────────── -->
-          <div v-else-if="fieldType === 'number'" class="flex items-center gap-2">
+          <div
+            v-else-if="fieldType === 'number'"
+            class="flex items-center gap-2"
+          >
             <UInputNumber
               :model-value="getNum(metaKey)"
               :min="sliderMin"
@@ -357,11 +461,17 @@ function commitText() {
               size="xs"
               @update:model-value="(v) => patch({ [metaKey]: v })"
             />
-            <span v-if="unit" class="text-xs text-muted">{{ unit }}</span>
+            <span
+              v-if="unit"
+              class="text-xs text-muted"
+            >{{ unit }}</span>
           </div>
 
           <!-- ── Rating ─────────────────────────────────────────────────── -->
-          <div v-else-if="fieldType === 'rating'" class="flex gap-1">
+          <div
+            v-else-if="fieldType === 'rating'"
+            class="flex gap-1"
+          >
             <button
               v-for="i in sliderMax"
               :key="i"
@@ -377,7 +487,10 @@ function commitText() {
           </div>
 
           <!-- ── Select ─────────────────────────────────────────────────── -->
-          <div v-else-if="fieldType === 'select'" class="space-y-1">
+          <div
+            v-else-if="fieldType === 'select'"
+            class="space-y-1"
+          >
             <button
               v-for="opt in options"
               :key="opt"
@@ -385,14 +498,26 @@ function commitText() {
               :class="getStr(metaKey) === opt ? 'bg-primary/10 text-primary' : ''"
               @click="toggleSelect(opt)"
             >
-              <UIcon v-if="getStr(metaKey) === opt" name="i-lucide-check" class="size-3" />
+              <UIcon
+                v-if="getStr(metaKey) === opt"
+                name="i-lucide-check"
+                class="size-3"
+              />
               <span :class="getStr(metaKey) === opt ? '' : 'ml-5'">{{ opt }}</span>
             </button>
-            <div v-if="!options.length" class="text-xs text-muted px-2">No options yet</div>
+            <div
+              v-if="!options.length"
+              class="text-xs text-muted px-2"
+            >
+              No options yet
+            </div>
           </div>
 
           <!-- ── Multi select ───────────────────────────────────────────── -->
-          <div v-else-if="fieldType === 'multiselect'" class="space-y-1">
+          <div
+            v-else-if="fieldType === 'multiselect'"
+            class="space-y-1"
+          >
             <button
               v-for="opt in options"
               :key="opt"
@@ -400,14 +525,25 @@ function commitText() {
               :class="getStrArr(metaKey).includes(opt) ? 'bg-primary/10 text-primary' : ''"
               @click="toggleMultiSelect(opt)"
             >
-              <UIcon :name="getStrArr(metaKey).includes(opt) ? 'i-lucide-check-square' : 'i-lucide-square'" class="size-3" />
+              <UIcon
+                :name="getStrArr(metaKey).includes(opt) ? 'i-lucide-check-square' : 'i-lucide-square'"
+                class="size-3"
+              />
               {{ opt }}
             </button>
-            <div v-if="!options.length" class="text-xs text-muted px-2">No options yet</div>
+            <div
+              v-if="!options.length"
+              class="text-xs text-muted px-2"
+            >
+              No options yet
+            </div>
           </div>
 
           <!-- ── Tags ───────────────────────────────────────────────────── -->
-          <div v-else-if="fieldType === 'tags'" class="space-y-2">
+          <div
+            v-else-if="fieldType === 'tags'"
+            class="space-y-2"
+          >
             <div class="flex flex-wrap gap-1">
               <span
                 v-for="tag in getStrArr(metaKey)"
@@ -415,27 +551,43 @@ function commitText() {
                 class="inline-flex items-center gap-0.5 rounded-full bg-primary/10 text-primary px-2 py-0.5 text-xs"
               >
                 {{ tag }}
-                <button @click="toggleTag(tag)"><UIcon name="i-lucide-x" class="size-3" /></button>
+                <button @click="toggleTag(tag)"><UIcon
+                  name="i-lucide-x"
+                  class="size-3"
+                /></button>
               </span>
             </div>
             <div class="flex gap-1">
-              <UInput v-model="newOption" size="xs" placeholder="Add tag…" class="flex-1" @keydown.enter.prevent="() => {
+              <UInput
+                v-model="newOption"
+                size="xs"
+                placeholder="Add tag…"
+                class="flex-1"
+                @keydown.enter.prevent="() => {
   if (newOption.trim()) {
     toggleTag(newOption.trim());
     newOption = '';
   }
-}" />
-              <UButton size="xs" icon="i-lucide-plus" @click="() => {
+}"
+              />
+              <UButton
+                size="xs"
+                icon="i-lucide-plus"
+                @click="() => {
   if (newOption.trim()) {
     toggleTag(newOption.trim());
     newOption = '';
   }
-}" />
+}"
+              />
             </div>
           </div>
 
           <!-- ── URL ────────────────────────────────────────────────────── -->
-          <div v-else-if="fieldType === 'url'" class="space-y-1">
+          <div
+            v-else-if="fieldType === 'url'"
+            class="space-y-1"
+          >
             <UInput
               :model-value="getStr(metaKey)"
               size="xs"
@@ -443,8 +595,16 @@ function commitText() {
               leading-icon="i-lucide-link"
               @update:model-value="(v) => patch({ [metaKey]: v })"
             />
-            <a v-if="getStr(metaKey)" :href="getStr(metaKey)" target="_blank" class="text-xs text-primary hover:underline flex items-center gap-1">
-              <UIcon name="i-lucide-external-link" class="size-3" />
+            <a
+              v-if="getStr(metaKey)"
+              :href="getStr(metaKey)"
+              target="_blank"
+              class="text-xs text-primary hover:underline flex items-center gap-1"
+            >
+              <UIcon
+                name="i-lucide-external-link"
+                class="size-3"
+              />
               Open
             </a>
           </div>
@@ -461,27 +621,95 @@ function commitText() {
           </div>
 
           <!-- ── Location ───────────────────────────────────────────────── -->
-          <div v-else-if="fieldType === 'location'" class="space-y-1">
+          <div
+            v-else-if="fieldType === 'location'"
+            class="space-y-1"
+          >
             <div class="flex items-center gap-1">
               <span class="text-xs text-muted w-7">Lat</span>
-              <UInputNumber :model-value="getNum(props.node.attrs.latKey)" size="xs" class="flex-1" :step="1e-4" @update:model-value="(v) => patch({ [props.node.attrs.latKey]: v })" />
+              <UInputNumber
+                :model-value="getNum(props.node.attrs.latKey)"
+                size="xs"
+                class="flex-1"
+                :step="1e-4"
+                @update:model-value="(v) => patch({ [props.node.attrs.latKey]: v })"
+              />
             </div>
             <div class="flex items-center gap-1">
               <span class="text-xs text-muted w-7">Lng</span>
-              <UInputNumber :model-value="getNum(props.node.attrs.lngKey)" size="xs" class="flex-1" :step="1e-4" @update:model-value="(v) => patch({ [props.node.attrs.lngKey]: v })" />
+              <UInputNumber
+                :model-value="getNum(props.node.attrs.lngKey)"
+                size="xs"
+                class="flex-1"
+                :step="1e-4"
+                @update:model-value="(v) => patch({ [props.node.attrs.lngKey]: v })"
+              />
             </div>
           </div>
 
           <!-- ── Icon ───────────────────────────────────────────────────── -->
-          <div v-else-if="fieldType === 'icon'" class="space-y-1">
+          <div
+            v-else-if="fieldType === 'icon'"
+            class="space-y-1"
+          >
             <AIconPicker
               :model-value="getStr(metaKey)"
               @update:model-value="(v) => patch({ [metaKey]: v })"
             />
           </div>
 
+          <!-- ── Members ──────────────────────────────────────────────── -->
+          <div
+            v-else-if="fieldType === 'members'"
+            class="space-y-1"
+          >
+            <UInput
+              v-model="memberSearch"
+              size="xs"
+              variant="none"
+              placeholder="Search members…"
+              leading-icon="i-lucide-search"
+            />
+            <USeparator />
+            <div class="max-h-48 overflow-y-auto">
+              <button
+                v-for="user in filteredMentionItems"
+                :key="user.id"
+                class="flex items-center gap-2 w-full px-2 py-1.5 rounded text-xs hover:bg-muted text-left"
+                @click="onToggleMember(user)"
+              >
+                <UIcon
+                  v-if="getObjArr(metaKey).some((m) => m.id === user.id)"
+                  name="i-lucide-check"
+                  class="size-3.5 text-primary shrink-0"
+                />
+                <span
+                  v-else
+                  class="size-3.5 shrink-0"
+                />
+                <UAvatar
+                  :alt="user.label"
+                  :style="user.avatar?.style"
+                  size="2xs"
+                />
+                <span class="truncate">{{ user.label }}</span>
+              </button>
+              <div
+                v-if="!filteredMentionItems.length"
+                class="px-2 py-2 text-xs text-muted"
+              >
+                No members found
+              </div>
+            </div>
+          </div>
+
           <!-- Fallback -->
-          <div v-else class="text-xs text-muted">{{ fieldType }}</div>
+          <div
+            v-else
+            class="text-xs text-muted"
+          >
+            {{ fieldType }}
+          </div>
         </div>
       </template>
     </UPopover>

package/dist/runtime/extensions/views/ProseIconView.vue

@@ -1,5 +1,6 @@
 <script setup>
 import { NodeViewWrapper } from "@tiptap/vue-3";
+import { computed } from "vue";
 const props = defineProps({
   decorations: { type: Array, required: true },
   selected: { type: Boolean, required: true },
@@ -17,7 +18,13 @@ const iconName = computed(() => props.node.attrs.name || "i-lucide-star");
 </script>
 
 <template>
-  <NodeViewWrapper as="span" class="inline">
-    <UIcon :name="iconName" class="size-4 shrink-0 align-sub" />
+  <NodeViewWrapper
+    as="span"
+    class="inline"
+  >
+    <UIcon
+      :name="iconName"
+      class="size-4 shrink-0 align-sub"
+    />
   </NodeViewWrapper>
 </template>

package/dist/runtime/extensions/views/StepsView.vue

@@ -1,5 +1,6 @@
 <script setup>
 import { NodeViewWrapper, NodeViewContent } from "@tiptap/vue-3";
+import { computed } from "vue";
 const props = defineProps({
   decorations: { type: Array, required: true },
   selected: { type: Boolean, required: true },

package/dist/runtime/extensions/views/TabsView.vue

@@ -1,5 +1,6 @@
 <script setup>
 import { NodeViewWrapper, NodeViewContent } from "@tiptap/vue-3";
+import { ref, computed, watch } from "vue";
 const props = defineProps({
   decorations: { type: Array, required: true },
   selected: { type: Boolean, required: true },
@@ -32,8 +33,14 @@ watch(() => props.node.childCount, () => {
 </script>
 
 <template>
-  <NodeViewWrapper as="div" class="my-5">
-    <div class="relative flex items-center border-b border-(--ui-border)" contenteditable="false">
+  <NodeViewWrapper
+    as="div"
+    class="my-5"
+  >
+    <div
+      class="relative flex items-center border-b border-(--ui-border)"
+      contenteditable="false"
+    >
       <button
         v-for="(tab, i) in tabs"
         :key="i"
@@ -41,9 +48,16 @@ watch(() => props.node.childCount, () => {
         :class="activeIndex === i ? 'text-(--ui-primary)' : 'text-(--ui-text-muted) hover:text-(--ui-text)'"
         @click="activeIndex = i"
       >
-        <UIcon v-if="tab.icon" :name="tab.icon" class="size-4 shrink-0 me-1.5 inline-block align-text-bottom" />
+        <UIcon
+          v-if="tab.icon"
+          :name="tab.icon"
+          class="size-4 shrink-0 me-1.5 inline-block align-text-bottom"
+        />
         <span>{{ tab.label }}</span>
-        <span v-if="activeIndex === i" class="absolute bottom-0 inset-x-0 h-0.5 bg-(--ui-primary) rounded-full" />
+        <span
+          v-if="activeIndex === i"
+          class="absolute bottom-0 inset-x-0 h-0.5 bg-(--ui-primary) rounded-full"
+        />
       </button>
     </div>
     <div class="mt-4">