@abraca/nuxt 0.2.0 → 1.5.0

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

@@ -0,0 +1,582 @@
+<script setup>
+import { ref, computed, nextTick, onBeforeUnmount } from "vue";
+import { useRuntimeConfig } from "#imports";
+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 },
+  editable: { type: Boolean, required: false, default: true }
+});
+const config = useRuntimeConfig();
+const locale = computed(() => ({
+  ...DEFAULT_LOCALE.renderers.checklist,
+  ...config.public?.abracadabra?.locale?.renderers?.checklist ?? {},
+  ...props.labels ?? {}
+}));
+const { tree, childProviderRef, states, setLocalState, connectedUsers } = useRendererBase(props);
+const {
+  openNodeId,
+  openNodeLabel,
+  openNodeProvider,
+  isLoading: nodePanelLoading,
+  openNode,
+  closePanel
+} = useNodePanel(childProviderRef);
+const flatItems = computed(() => {
+  const result = [];
+  function walk(parentId, depth) {
+    for (const child of tree.childrenOf(parentId)) {
+      result.push({
+        id: child.id,
+        label: child.label,
+        parentId: child.parentId,
+        depth,
+        hasChildren: tree.childrenOf(child.id).length > 0,
+        checked: !!child.meta?.checked,
+        priority: child.meta?.priority ?? 0,
+        dateEnd: child.meta?.dateEnd ?? null,
+        order: child.order
+      });
+      walk(child.id, depth + 1);
+    }
+  }
+  walk(null, 0);
+  return result;
+});
+const filterMode = ref("all");
+const sortMode = ref("manual");
+function isDescendantOf(item, ancestorId) {
+  let current = item;
+  while (current) {
+    if (current.parentId === ancestorId) return true;
+    current = flatItems.value.find((i) => i.id === current.parentId);
+  }
+  return false;
+}
+const visibleItems = computed(() => {
+  let items = flatItems.value;
+  if (filterMode.value === "active")
+    items = items.filter((i) => !i.checked);
+  else if (filterMode.value === "completed")
+    items = items.filter((i) => i.checked);
+  if (sortMode.value !== "manual") {
+    const topLevel = items.filter((i) => i.depth === 0);
+    if (sortMode.value === "priority")
+      topLevel.sort((a, b) => b.priority - a.priority);
+    else if (sortMode.value === "due")
+      topLevel.sort((a, b) => {
+        if (!a.dateEnd && !b.dateEnd) return 0;
+        if (!a.dateEnd) return 1;
+        if (!b.dateEnd) return -1;
+        return new Date(a.dateEnd).getTime() - new Date(b.dateEnd).getTime();
+      });
+    const result = [];
+    for (const top of topLevel) {
+      result.push(top);
+      const subtree = items.filter((i) => i.depth > 0 && isDescendantOf(i, top.id));
+      result.push(...subtree);
+    }
+    return result;
+  }
+  return items;
+});
+const totalCount = computed(() => flatItems.value.length);
+const checkedCount = computed(() => flatItems.value.filter((i) => i.checked).length);
+const percent = computed(
+  () => totalCount.value === 0 ? 0 : Math.round(checkedCount.value / totalCount.value * 100)
+);
+const editingId = ref(null);
+const editingValue = ref("");
+const inputRefs = ref({});
+function startEdit(id, label) {
+  if (!props.editable) return;
+  editingId.value = id;
+  editingValue.value = label;
+  setLocalState({ "checklist:editing": id });
+}
+function commitEdit() {
+  if (!props.editable) return;
+  if (editingId.value && editingValue.value.trim()) {
+    tree.renameEntry(editingId.value, editingValue.value.trim());
+  } else if (editingId.value && !editingValue.value.trim()) {
+    tree.deleteEntry(editingId.value);
+  }
+  editingId.value = null;
+  setLocalState({ "checklist:editing": null });
+}
+function addRoot() {
+  if (!props.editable) return;
+  const id = tree.createChild(null, "");
+  tree.updateMeta(id, { checked: false, priority: 0 });
+  nextTick(() => {
+    editingId.value = id;
+    editingValue.value = "";
+    nextTick(() => inputRefs.value[id]?.focus());
+  });
+}
+function addChild(parentId) {
+  if (!props.editable) return;
+  const id = tree.createChild(parentId, "");
+  tree.updateMeta(id, { checked: false, priority: 0 });
+  nextTick(() => {
+    editingId.value = id;
+    editingValue.value = "";
+    nextTick(() => inputRefs.value[id]?.focus());
+  });
+}
+function createSiblingAfter(item) {
+  if (!props.editable) return;
+  const id = tree.createChild(item.parentId, "");
+  tree.updateMeta(id, { checked: false, priority: 0 });
+  nextTick(() => {
+    editingId.value = id;
+    editingValue.value = "";
+    nextTick(() => inputRefs.value[id]?.focus());
+  });
+}
+function onKeydown(item, e) {
+  if (e.key === "Enter") {
+    e.preventDefault();
+    if (editingValue.value.trim()) {
+      tree.renameEntry(item.id, editingValue.value.trim());
+    }
+    editingId.value = null;
+    createSiblingAfter(item);
+  } else if (e.key === "Tab") {
+    e.preventDefault();
+    if (e.shiftKey) {
+      if (!item.parentId) return;
+      const parent = tree.entries.value.find((e2) => e2.id === item.parentId);
+      if (!parent) return;
+      const grandparentId = parent.parentId;
+      const uncles = tree.childrenOf(grandparentId);
+      const parentIdx = uncles.findIndex((u) => u.id === item.parentId);
+      const newOrder = parentIdx >= 0 ? (uncles[parentIdx]?.order ?? Date.now()) + 0.5 : Date.now();
+      tree.moveEntry(item.id, grandparentId, newOrder);
+    } else {
+      const siblings = tree.childrenOf(item.parentId);
+      const idx = siblings.findIndex((s) => s.id === item.id);
+      if (idx <= 0) return;
+      const prevSibling = siblings[idx - 1];
+      tree.moveEntry(item.id, prevSibling.id, Date.now());
+    }
+  } else if (e.key === "Escape") {
+    editingId.value = null;
+    setLocalState({ "checklist:editing": null });
+  } else if (e.key === "Backspace" && editingValue.value === "") {
+    e.preventDefault();
+    tree.deleteEntry(item.id);
+    editingId.value = null;
+  }
+}
+function orderBetween(list, targetIdx) {
+  const prev = list[targetIdx - 1];
+  const next = list[targetIdx];
+  if (!prev && !next) return Date.now();
+  if (!prev) return next.order - 1e3;
+  if (!next) return prev.order + 1e3;
+  return (prev.order + next.order) / 2;
+}
+const { dragId, dragOverId, handlePointerDown } = useTouchDrag({
+  onDrop: (srcId, targetId) => {
+    if (!props.editable) return;
+    const targetItem = flatItems.value.find((i) => i.id === targetId);
+    if (!targetItem) return;
+    const siblings = tree.childrenOf(targetItem.parentId);
+    const targetIdx = siblings.findIndex((s) => s.id === targetId);
+    const newOrder = orderBetween(siblings, targetIdx);
+    tree.moveEntry(srcId, targetItem.parentId, newOrder);
+  },
+  onDragStart: (id) => {
+    setLocalState({ "checklist:dragging": id });
+  },
+  onDragEnd: () => {
+    setLocalState({ "checklist:dragging": null });
+  }
+});
+const myClientId = computed(() => props.childProvider?.awareness?.clientID ?? 0);
+function nodeEditors(nodeId) {
+  return states.value.filter(
+    (s) => s.clientId !== myClientId.value && s["checklist:editing"] === nodeId
+  );
+}
+function nodeHoverers(nodeId) {
+  return states.value.filter(
+    (s) => s.clientId !== myClientId.value && s["checklist:focused"] === nodeId
+  );
+}
+function onItemPointerEnter(itemId) {
+  if (editingId.value !== itemId && !dragId.value) {
+    setLocalState({ "checklist:focused": itemId });
+  }
+}
+function onItemPointerLeave() {
+  if (!dragId.value) {
+    setLocalState({ "checklist:focused": null });
+  }
+}
+onBeforeUnmount(() => {
+  setLocalState({
+    "checklist:focused": null,
+    "checklist:editing": null,
+    "checklist:dragging": null
+  });
+});
+function isOverdue(dateStr) {
+  return new Date(dateStr) < new Date((/* @__PURE__ */ new Date()).toDateString());
+}
+function isDueSoon(dateStr) {
+  const due = new Date(dateStr);
+  const now = /* @__PURE__ */ new Date();
+  const twoDays = 2 * 24 * 60 * 60 * 1e3;
+  return due.getTime() - now.getTime() < twoDays && !isOverdue(dateStr);
+}
+function formatRelativeDate(dateStr) {
+  const date = new Date(dateStr);
+  const now = /* @__PURE__ */ new Date();
+  const diffDays = Math.round((date.getTime() - now.getTime()) / (1e3 * 60 * 60 * 24));
+  if (diffDays === 0) return "Today";
+  if (diffDays === 1) return "Tomorrow";
+  if (diffDays === -1) return "Yesterday";
+  if (diffDays < -1) return `${Math.abs(diffDays)}d ago`;
+  if (diffDays <= 7) return `In ${diffDays}d`;
+  return date.toLocaleDateString(void 0, { month: "short", day: "numeric" });
+}
+const PRIORITY_ITEMS = [
+  { label: "None", value: 0 },
+  { label: "Low", value: 1 },
+  { label: "Medium", value: 2 },
+  { label: "High", value: 3 }
+];
+function itemMenuItems(item) {
+  if (!props.editable) return [];
+  return [
+    [
+      {
+        label: item.checked ? locale.value.markIncomplete : locale.value.markComplete,
+        icon: item.checked ? "i-lucide-circle" : "i-lucide-check-circle",
+        onSelect: () => tree.updateMeta(item.id, { checked: !item.checked })
+      },
+      {
+        label: "Rename",
+        icon: "i-lucide-pencil",
+        onSelect: () => startEdit(item.id, item.label)
+      },
+      {
+        label: locale.value.addSubTask,
+        icon: "i-lucide-list-plus",
+        onSelect: () => addChild(item.id)
+      }
+    ],
+    [
+      {
+        label: "Priority",
+        icon: "i-lucide-flag",
+        children: PRIORITY_ITEMS.map((p) => ({
+          label: p.label,
+          icon: item.priority === p.value ? "i-lucide-check" : void 0,
+          onSelect: () => tree.updateMeta(item.id, { priority: p.value })
+        }))
+      },
+      {
+        label: "Open as doc",
+        icon: "i-lucide-external-link",
+        onSelect: () => openNode(item.id, item.label)
+      },
+      {
+        label: "Duplicate",
+        icon: "i-lucide-copy",
+        onSelect: () => tree.duplicateEntry(item.id)
+      }
+    ],
+    [
+      {
+        label: "Delete",
+        icon: "i-lucide-trash-2",
+        color: "error",
+        onSelect: () => tree.deleteEntry(item.id)
+      }
+    ]
+  ];
+}
+const sortMenuItems = computed(() => [
+  [
+    { label: locale.value.sortManual, icon: sortMode.value === "manual" ? "i-lucide-check" : void 0, onSelect: () => {
+      sortMode.value = "manual";
+    } },
+    { label: locale.value.sortPriority, icon: sortMode.value === "priority" ? "i-lucide-check" : void 0, onSelect: () => {
+      sortMode.value = "priority";
+    } },
+    { label: locale.value.sortDue, icon: sortMode.value === "due" ? "i-lucide-check" : void 0, onSelect: () => {
+      sortMode.value = "due";
+    } }
+  ]
+]);
+defineExpose({ connectedUsers });
+</script>
+
+<template>
+  <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 gap-2">
+      <!-- Left: progress -->
+      <div class="flex items-center gap-2 shrink-0">
+        <span class="text-xs text-(--ui-text-muted) whitespace-nowrap">
+          {{ checkedCount }} / {{ totalCount }} {{ locale.done }}
+        </span>
+        <div
+          v-if="totalCount > 0"
+          class="w-20 h-1.5 rounded-full bg-(--ui-bg-elevated) overflow-hidden"
+        >
+          <div
+            class="h-full rounded-full bg-(--ui-primary) transition-all"
+            :style="{ width: `${percent}%` }"
+          />
+        </div>
+      </div>
+
+      <!-- Right: filter + sort + add -->
+      <div class="flex items-center gap-1">
+        <div class="inline-flex rounded-(--ui-radius) border border-(--ui-border)">
+          <UButton
+            :label="locale.all"
+            size="xs"
+            :variant="filterMode === 'all' ? 'solid' : 'ghost'"
+            :color="filterMode === 'all' ? 'primary' : 'neutral'"
+            @click="filterMode = 'all'"
+          />
+          <UButton
+            :label="locale.active"
+            size="xs"
+            :variant="filterMode === 'active' ? 'solid' : 'ghost'"
+            :color="filterMode === 'active' ? 'primary' : 'neutral'"
+            @click="filterMode = 'active'"
+          />
+          <UButton
+            :label="locale.done"
+            size="xs"
+            :variant="filterMode === 'completed' ? 'solid' : 'ghost'"
+            :color="filterMode === 'completed' ? 'primary' : 'neutral'"
+            @click="filterMode = 'completed'"
+          />
+        </div>
+
+        <UDropdownMenu
+          v-if="editable"
+          :items="sortMenuItems"
+        >
+          <UButton
+            icon="i-lucide-arrow-up-down"
+            size="xs"
+            variant="ghost"
+            color="neutral"
+          />
+        </UDropdownMenu>
+
+        <UButton
+          v-if="editable"
+          icon="i-lucide-plus"
+          size="xs"
+          variant="ghost"
+          color="neutral"
+          :label="locale.addTask"
+          @click="addRoot"
+        />
+      </div>
+    </div>
+
+    <!-- Task list -->
+    <div class="flex-1 min-h-0 overflow-y-auto">
+      <div class="p-4 max-w-3xl mx-auto w-full">
+        <!-- Empty state -->
+        <div
+          v-if="flatItems.length === 0"
+          class="flex flex-col items-center justify-center h-full gap-3 text-center py-12"
+        >
+          <UIcon
+            name="i-lucide-check-square"
+            class="size-10 text-(--ui-text-dimmed)"
+          />
+          <p class="text-sm text-(--ui-text-muted)">
+            {{ locale.empty }}
+          </p>
+          <UButton
+            v-if="editable"
+            icon="i-lucide-plus"
+            :label="locale.addTask"
+            size="sm"
+            @click="addRoot"
+          />
+        </div>
+
+        <TransitionGroup
+          v-else
+          name="checklist"
+          tag="div"
+          class="space-y-0.5"
+        >
+          <UContextMenu
+            v-for="item in visibleItems"
+            :key="item.id"
+            :items="itemMenuItems(item)"
+          >
+            <div
+              class="group flex items-center gap-1.5 py-1 pr-1 rounded-(--ui-radius) hover:bg-(--ui-bg-elevated) relative"
+              :class="{
+  'border-t-2 border-(--ui-primary)': dragOverId === item.id,
+  'opacity-30': dragId === item.id
+}"
+              :style="[
+  { paddingLeft: `${item.depth * 20 + 4}px` },
+  nodeHoverers(item.id).length ? { backgroundColor: nodeHoverers(item.id)[0].user?.color + '18' } : {}
+]"
+              :data-drag-id="item.id"
+              @pointerdown="editable && sortMode === 'manual' ? handlePointerDown($event, item.id) : void 0"
+              @pointerenter="onItemPointerEnter(item.id)"
+              @pointerleave="onItemPointerLeave"
+            >
+              <!-- Remote editing indicator (left bar) -->
+              <div
+                v-if="nodeEditors(item.id).length"
+                class="absolute left-0 top-0 bottom-0 w-0.5 rounded-full"
+                :style="{ background: nodeEditors(item.id)[0].user?.color }"
+              />
+
+              <!-- Remote hover name badge -->
+              <span
+                v-if="nodeHoverers(item.id).length"
+                class="absolute -top-2.5 left-2 text-[10px] px-1 rounded text-white leading-tight z-10"
+                :style="{ backgroundColor: nodeHoverers(item.id)[0].user?.color }"
+              >
+                {{ nodeHoverers(item.id)[0].user?.name }}
+              </span>
+
+              <!-- Hierarchy indicator -->
+              <span class="size-4 flex items-center justify-center text-(--ui-text-dimmed) shrink-0">
+                <UIcon
+                  :name="item.hasChildren ? 'i-lucide-chevron-right' : 'i-lucide-grip-vertical'"
+                  class="size-3"
+                />
+              </span>
+
+              <!-- Checkbox -->
+              <button
+                class="shrink-0 size-4 rounded border flex items-center justify-center transition-colors"
+                :class="item.checked ? 'bg-(--ui-primary) border-(--ui-primary)' : 'border-(--ui-border) hover:border-(--ui-primary)'"
+                :disabled="!editable"
+                @click.stop="editable && tree.updateMeta(item.id, { checked: !item.checked })"
+              >
+                <UIcon
+                  v-if="item.checked"
+                  name="i-lucide-check"
+                  class="size-2.5 text-white"
+                />
+              </button>
+
+              <!-- Label / inline edit -->
+              <input
+                v-if="editingId === item.id"
+                :ref="(el) => inputRefs[item.id] = el"
+                v-model="editingValue"
+                class="flex-1 bg-transparent outline-none text-sm text-(--ui-text-highlighted) py-0.5"
+                autofocus
+                @keydown="onKeydown(item, $event)"
+                @blur="commitEdit"
+              >
+              <span
+                v-else
+                class="flex-1 text-sm py-0.5 cursor-text truncate"
+                :class="item.checked ? 'line-through text-(--ui-text-muted)' : item.label ? 'text-(--ui-text-highlighted)' : 'text-(--ui-text-dimmed) italic'"
+                @click="editable && startEdit(item.id, item.label)"
+              >
+                {{ item.label || "Empty" }}
+              </span>
+
+              <!-- Due date badge -->
+              <span
+                v-if="item.dateEnd"
+                class="text-[11px] shrink-0 px-1.5 py-0.5 rounded whitespace-nowrap"
+                :class="isOverdue(item.dateEnd) ? 'text-red-400 bg-red-400/10' : isDueSoon(item.dateEnd) ? 'text-amber-400 bg-amber-400/10' : 'text-(--ui-text-dimmed) bg-(--ui-bg-elevated)'"
+              >
+                {{ formatRelativeDate(item.dateEnd) }}
+              </span>
+
+              <!-- Priority flag -->
+              <UIcon
+                v-if="item.priority >= 2"
+                name="i-lucide-flag"
+                class="size-3.5 shrink-0"
+                :class="{
+  'text-amber-400': item.priority === 2,
+  'text-red-400': item.priority === 3
+}"
+              />
+
+              <!-- Hover actions -->
+              <div
+                v-if="editable"
+                class="hidden group-hover:flex items-center gap-0.5 shrink-0"
+              >
+                <UTooltip
+                  text="Open as doc"
+                  :content="{ side: 'bottom' }"
+                >
+                  <UButton
+                    icon="i-lucide-external-link"
+                    size="xs"
+                    variant="ghost"
+                    color="neutral"
+                    @click.stop="openNode(item.id, item.label)"
+                  />
+                </UTooltip>
+                <UTooltip
+                  :text="locale.addSubTask"
+                  :content="{ side: 'bottom' }"
+                >
+                  <UButton
+                    icon="i-lucide-plus"
+                    size="xs"
+                    variant="ghost"
+                    color="neutral"
+                    @click.stop="addChild(item.id)"
+                  />
+                </UTooltip>
+                <UTooltip
+                  text="Delete"
+                  :content="{ side: 'bottom' }"
+                >
+                  <UButton
+                    icon="i-lucide-trash-2"
+                    size="xs"
+                    variant="ghost"
+                    color="error"
+                    @click.stop="tree.deleteEntry(item.id)"
+                  />
+                </UTooltip>
+              </div>
+            </div>
+          </UContextMenu>
+        </TransitionGroup>
+      </div>
+    </div>
+
+    <!-- Node panel (side panel for child docs) -->
+    <ANodePanel
+      :node-id="openNodeId"
+      :node-label="openNodeLabel"
+      :child-provider="openNodeProvider"
+      :is-loading="nodePanelLoading"
+      @close="closePanel"
+    />
+  </div>
+</template>
+
+<style scoped>
+.checklist-move{transition:transform .25s ease}.checklist-enter-active{transition:opacity .18s ease,transform .18s ease}.checklist-enter-from{opacity:0;transform:translateY(-6px) scale(.97)}.checklist-leave-active{transition:opacity .15s ease}.checklist-leave-to{opacity:0}
+</style>

package/dist/runtime/components/renderers/AChecklistRenderer.vue.d.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']['checklist']>;
+    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;

package/dist/runtime/components/renderers/ADashboardRenderer.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']['dashboard']>;
+    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;