@abraca/nuxt 0.2.0 → 1.5.0

package/dist/runtime/components/shell/ADocPanelSettings.vue

@@ -0,0 +1,621 @@
+<script setup>
+import { ref, computed } from "vue";
+import { usePluginRegistry } from "#imports";
+import { resolveDocType } from "../../utils/docTypes";
+const props = defineProps({
+  docId: { type: String, required: true },
+  effectiveRole: { type: [String, null], required: false, default: null },
+  userName: { type: String, required: false, default: "User" },
+  userAvatarStyle: { type: String, required: false, default: "" },
+  isOwner: { type: Boolean, required: false, default: false },
+  permissions: { type: Array, required: false, default: () => [] },
+  loadingPermissions: { type: Boolean, required: false, default: false },
+  defaultRole: { type: String, required: false, default: "viewer" },
+  inheritedFromLabel: { type: [String, null], required: false, default: null },
+  onlineNotGranted: { type: Array, required: false, default: () => [] },
+  syncStatusIcon: { type: String, required: false, default: "i-lucide-cloud-off" },
+  syncStatusColor: { type: String, required: false, default: "text-(--ui-text-dimmed)" },
+  syncStatusLabel: { type: String, required: false, default: "Not available offline" },
+  isSyncing: { type: Boolean, required: false, default: false },
+  lastSyncedLabel: { type: [String, null], required: false, default: null },
+  syncError: { type: [String, null], required: false, default: null },
+  docTypeKey: { type: String, required: false, default: void 0 },
+  docMeta: { type: [Object, null], required: false, default: null }
+});
+const emit = defineEmits(["grant-permission", "change-role", "revoke-permission", "create-invite", "sync-doc", "open-encryption", "user-context-menu", "update-meta"]);
+const grantUserId = ref("");
+const grantRole = ref("editor");
+const showManualKeyInput = ref(false);
+const directPermissions = computed(
+  () => props.permissions.filter((p) => p.source === "direct" && p.username !== props.userName)
+);
+const inheritedPermissions = computed(
+  () => props.permissions.filter((p) => p.source === "inherited" && p.username !== props.userName)
+);
+const hasInheritedPermissions = computed(() => inheritedPermissions.value.length > 0);
+const roleItems = [
+  { label: "Owner", value: "owner" },
+  { label: "Editor", value: "editor" },
+  { label: "Viewer", value: "viewer" },
+  { label: "Observer", value: "observer" }
+];
+function roleBadgeColor(role) {
+  switch (role) {
+    case "owner":
+      return "primary";
+    case "editor":
+      return "success";
+    default:
+      return "neutral";
+  }
+}
+function roleIcon(role) {
+  switch (role) {
+    case "owner":
+      return "i-lucide-crown";
+    case "editor":
+      return "i-lucide-pencil";
+    case "viewer":
+      return "i-lucide-eye";
+    default:
+      return "i-lucide-eye-off";
+  }
+}
+function permissionMenuItems(perm) {
+  const roleGroup = ["owner", "editor", "viewer", "observer"].filter((r) => r !== perm.role).map((r) => ({
+    label: r.charAt(0).toUpperCase() + r.slice(1),
+    icon: roleIcon(r),
+    onSelect: () => emit("change-role", perm.userId, r)
+  }));
+  const revokeGroup = [{
+    label: "Revoke access",
+    icon: "i-lucide-user-x",
+    color: "error",
+    onSelect: () => emit("revoke-permission", perm.userId)
+  }];
+  return [roleGroup, revokeGroup];
+}
+function handleGrant(userId, role) {
+  const id = userId ?? grantUserId.value.trim();
+  const r = role ?? grantRole.value;
+  if (!id) return;
+  emit("grant-permission", id, r);
+  grantUserId.value = "";
+}
+const registry = usePluginRegistry();
+const metaSchema = computed(() => {
+  if (!props.docTypeKey) return [];
+  const dt = resolveDocType(props.docTypeKey, registry);
+  return dt.metaSchema ?? [];
+});
+function getMetaValue(key) {
+  return props.docMeta?.[key] ?? void 0;
+}
+function patchMeta(key, value) {
+  emit("update-meta", { [key]: value });
+}
+</script>
+
+<template>
+  <div class="flex-1 overflow-y-auto px-4 py-4 space-y-5">
+    <!-- Access section -->
+    <div class="space-y-3">
+      <p class="text-xs font-semibold uppercase tracking-wider text-(--ui-text-muted) flex items-center gap-1.5">
+        <UIcon
+          name="i-lucide-users"
+          class="size-3.5"
+        />
+        Access
+      </p>
+
+      <!-- Your role -->
+      <div class="flex items-center gap-3 p-3 rounded-lg bg-(--ui-bg-elevated)">
+        <UAvatar
+          :alt="userName"
+          size="md"
+          :style="userAvatarStyle"
+        />
+        <div class="flex-1 min-w-0">
+          <p class="text-sm font-medium text-(--ui-text-highlighted) truncate">
+            {{ userName }}
+          </p>
+          <p class="text-xs text-(--ui-text-muted)">
+            Your access
+          </p>
+        </div>
+        <UBadge
+          :label="effectiveRole ?? 'Connecting'"
+          :color="roleBadgeColor(effectiveRole ?? '')"
+          :icon="effectiveRole ? roleIcon(effectiveRole) : void 0"
+          variant="subtle"
+          class="capitalize"
+        />
+      </div>
+
+      <!-- Inheritance banner -->
+      <div
+        v-if="hasInheritedPermissions && !loadingPermissions"
+        class="flex items-start gap-2 px-3 py-2.5 rounded-lg bg-(--ui-bg-elevated)/60 text-xs text-(--ui-text-muted)"
+      >
+        <UIcon
+          name="i-lucide-git-branch"
+          class="size-3.5 shrink-0 mt-0.5"
+        />
+        <div>
+          <p>Permissions inherited from {{ inheritedFromLabel || "parent document" }}</p>
+          <p class="mt-0.5">
+            {{ permissions.length }} people with access
+          </p>
+        </div>
+      </div>
+
+      <!-- Permission list -->
+      <Transition
+        name="sf"
+        mode="out-in"
+      >
+        <div
+          v-if="loadingPermissions"
+          key="sk"
+          class="space-y-0.5"
+        >
+          <div
+            v-for="i in 3"
+            :key="i"
+            class="flex items-center gap-3 py-2 px-3"
+          >
+            <USkeleton class="size-8 rounded-full shrink-0" />
+            <div class="flex-1 space-y-1.5">
+              <USkeleton class="h-3.5 w-28 rounded" />
+              <USkeleton class="h-3 w-20 rounded" />
+            </div>
+            <USkeleton class="h-5 w-14 rounded-full shrink-0" />
+          </div>
+        </div>
+        <div
+          v-else-if="permissions.length === 0"
+          key="empty"
+          class="text-sm text-(--ui-text-muted) py-4 text-center"
+        >
+          <UIcon
+            name="i-lucide-users"
+            class="size-6 mb-1 text-(--ui-text-dimmed) mx-auto block"
+          />
+          No permissions found
+        </div>
+        <div
+          v-else
+          key="list"
+          class="space-y-0.5"
+        >
+          <!-- Direct permissions -->
+          <template v-if="directPermissions.length">
+            <p
+              v-if="hasInheritedPermissions"
+              class="text-[10px] font-semibold uppercase tracking-wider text-(--ui-text-dimmed) px-3 pt-1"
+            >
+              Direct access
+            </p>
+            <ul class="space-y-0.5">
+              <li
+                v-for="perm in directPermissions"
+                :key="perm.userId"
+              >
+                <div class="flex items-center gap-3 py-2 px-3 rounded-lg hover:bg-(--ui-bg-elevated)/50 transition-colors">
+                  <UAvatar
+                    :alt="perm.displayName || perm.username"
+                    size="sm"
+                  />
+                  <div class="flex-1 min-w-0">
+                    <p class="text-sm font-medium text-(--ui-text-highlighted) truncate">
+                      {{ perm.displayName || perm.username }}
+                    </p>
+                  </div>
+                  <UDropdownMenu
+                    v-if="isOwner"
+                    :items="permissionMenuItems(perm)"
+                    :content="{ align: 'end' }"
+                  >
+                    <UButton
+                      :label="perm.role"
+                      :color="roleBadgeColor(perm.role)"
+                      variant="subtle"
+                      size="xs"
+                      trailing-icon="i-lucide-chevron-down"
+                      class="capitalize"
+                    />
+                  </UDropdownMenu>
+                  <UBadge
+                    v-else
+                    :label="perm.role"
+                    :color="roleBadgeColor(perm.role)"
+                    variant="subtle"
+                    size="xs"
+                    class="capitalize shrink-0"
+                  />
+                </div>
+              </li>
+            </ul>
+          </template>
+
+          <!-- Inherited permissions -->
+          <template v-if="inheritedPermissions.length">
+            <USeparator
+              v-if="directPermissions.length"
+              class="my-2"
+            />
+            <p class="text-[10px] font-semibold uppercase tracking-wider text-(--ui-text-dimmed) px-3 pt-1 flex items-center gap-1">
+              <UIcon
+                name="i-lucide-arrow-up-right"
+                class="size-3"
+              />
+              Inherited access
+            </p>
+            <ul class="space-y-0.5">
+              <li
+                v-for="perm in inheritedPermissions"
+                :key="perm.userId"
+              >
+                <div class="flex items-center gap-3 py-2 px-3 rounded-lg hover:bg-(--ui-bg-elevated)/50 transition-colors opacity-75">
+                  <UAvatar
+                    :alt="perm.displayName || perm.username"
+                    size="sm"
+                  />
+                  <div class="flex-1 min-w-0">
+                    <p class="text-sm font-medium text-(--ui-text-highlighted) truncate">
+                      {{ perm.displayName || perm.username }}
+                    </p>
+                    <p
+                      v-if="perm.inheritedFromDocId"
+                      class="text-[11px] text-(--ui-text-dimmed) truncate"
+                    >
+                      Inherited from {{ inheritedFromLabel || perm.inheritedFromDocId.slice(0, 8) + "\u2026" }}
+                    </p>
+                  </div>
+                  <UBadge
+                    :label="perm.role"
+                    :color="roleBadgeColor(perm.role)"
+                    variant="subtle"
+                    size="xs"
+                    class="capitalize shrink-0"
+                    icon="i-lucide-arrow-up-right"
+                  />
+                </div>
+              </li>
+            </ul>
+          </template>
+        </div>
+      </Transition>
+
+      <!-- Default access indicator -->
+      <div
+        v-if="!loadingPermissions"
+        class="flex items-center gap-2 px-3 py-2 text-xs text-(--ui-text-dimmed)"
+      >
+        <UIcon
+          name="i-lucide-globe"
+          class="size-3.5 shrink-0"
+        />
+        <span>Default access</span>
+        <UBadge
+          :label="defaultRole"
+          variant="subtle"
+          size="xs"
+          class="capitalize"
+        />
+      </div>
+
+      <!-- Grant access (owner only) -->
+      <template v-if="isOwner && !loadingPermissions">
+        <USeparator label="Add people" />
+        <div class="space-y-2">
+          <!-- Online users not yet granted -->
+          <div
+            v-if="onlineNotGranted.length"
+            class="space-y-1"
+          >
+            <p class="text-xs text-(--ui-text-dimmed) mb-1">
+              Online now
+            </p>
+            <div
+              v-for="u in onlineNotGranted"
+              :key="u.publicKey"
+              class="flex items-center gap-2.5 px-2 py-1.5 rounded-lg hover:bg-(--ui-bg-elevated)/60 transition-colors"
+            >
+              <UChip
+                color="success"
+                size="xs"
+                inset
+              >
+                <UAvatar
+                  :alt="u.name"
+                  size="xs"
+                />
+              </UChip>
+              <span class="text-sm flex-1 truncate text-(--ui-text-highlighted)">{{ u.name }}</span>
+              <div class="flex items-center gap-1.5 shrink-0">
+                <USelect
+                  v-model="grantRole"
+                  :items="roleItems"
+                  size="xs"
+                  class="w-24"
+                />
+                <UTooltip
+                  text="Grant access"
+                  :content="{ side: 'bottom' }"
+                >
+                  <UButton
+                    icon="i-lucide-user-plus"
+                    size="xs"
+                    color="primary"
+                    variant="soft"
+                    @click="handleGrant(u.publicKey, grantRole)"
+                  />
+                </UTooltip>
+              </div>
+            </div>
+          </div>
+
+          <!-- Manual key input -->
+          <button
+            class="flex items-center gap-1.5 text-xs text-(--ui-text-muted) hover:text-(--ui-text) transition-colors"
+            @click="showManualKeyInput = !showManualKeyInput"
+          >
+            <UIcon
+              :name="showManualKeyInput ? 'i-lucide-chevron-down' : 'i-lucide-chevron-right'"
+              class="size-3"
+            />
+            Add by public key
+          </button>
+          <div
+            v-if="showManualKeyInput"
+            class="space-y-2"
+          >
+            <UInput
+              v-model="grantUserId"
+              placeholder="Paste public key…"
+              icon="i-lucide-key-round"
+              :ui="{ base: 'font-mono text-xs' }"
+              @keydown.enter="handleGrant()"
+            />
+            <div class="flex gap-2">
+              <USelect
+                v-model="grantRole"
+                :items="roleItems"
+                class="flex-1"
+              />
+              <UButton
+                label="Grant"
+                color="primary"
+                :disabled="!grantUserId.trim()"
+                icon="i-lucide-user-plus"
+                class="shrink-0"
+                @click="handleGrant()"
+              />
+            </div>
+          </div>
+        </div>
+      </template>
+    </div>
+
+    <!-- Document Properties (meta schema from doc type) -->
+    <template v-if="metaSchema.length">
+      <USeparator />
+      <div class="space-y-3">
+        <p class="text-xs font-semibold uppercase tracking-wider text-(--ui-text-muted) flex items-center gap-1.5">
+          <UIcon
+            name="i-lucide-settings-2"
+            class="size-3.5"
+          />
+          Properties
+        </p>
+        <div class="space-y-2">
+          <div
+            v-for="(field, idx) in metaSchema"
+            :key="idx"
+            class="space-y-1"
+          >
+            <label class="text-xs text-(--ui-text-dimmed)">{{ field.label || field.type }}</label>
+
+            <!-- Toggle -->
+            <div
+              v-if="field.type === 'toggle'"
+              class="flex items-center justify-between"
+            >
+              <span class="text-sm">{{ getMetaValue(field.key) ? "Yes" : "No" }}</span>
+              <USwitch
+                :model-value="!!getMetaValue(field.key)"
+                @update:model-value="(v) => patchMeta(field.key, v)"
+              />
+            </div>
+
+            <!-- Select -->
+            <USelect
+              v-else-if="field.type === 'select'"
+              :model-value="getMetaValue(field.key) || ''"
+              :items="(field.options ?? []).map((o) => ({ label: o, value: o }))"
+              size="sm"
+              @update:model-value="(v) => patchMeta(field.key, v)"
+            />
+
+            <!-- Date -->
+            <input
+              v-else-if="field.type === 'date'"
+              type="date"
+              :value="getMetaValue(field.key) || ''"
+              class="w-full text-sm rounded-md border border-(--ui-border) bg-transparent px-2.5 py-1.5 outline-none"
+              @change="(e) => patchMeta(field.key, e.target.value)"
+            >
+
+            <!-- Datetime -->
+            <input
+              v-else-if="field.type === 'datetime'"
+              type="datetime-local"
+              :value="getMetaValue(field.key) || ''"
+              class="w-full text-sm rounded-md border border-(--ui-border) bg-transparent px-2.5 py-1.5 outline-none"
+              @change="(e) => patchMeta(field.key, e.target.value)"
+            >
+
+            <!-- Date range -->
+            <div
+              v-else-if="field.type === 'daterange'"
+              class="flex gap-2"
+            >
+              <input
+                type="date"
+                :value="getMetaValue(field.startKey) || ''"
+                class="flex-1 text-sm rounded-md border border-(--ui-border) bg-transparent px-2.5 py-1.5 outline-none"
+                @change="(e) => patchMeta(field.startKey, e.target.value)"
+              >
+              <input
+                type="date"
+                :value="getMetaValue(field.endKey) || ''"
+                class="flex-1 text-sm rounded-md border border-(--ui-border) bg-transparent px-2.5 py-1.5 outline-none"
+                @change="(e) => patchMeta(field.endKey, e.target.value)"
+              >
+            </div>
+
+            <!-- Slider -->
+            <div
+              v-else-if="field.type === 'slider'"
+              class="flex items-center gap-2"
+            >
+              <USlider
+                :model-value="getMetaValue(field.key) ?? field.min ?? 0"
+                :min="field.min ?? 0"
+                :max="field.max ?? 100"
+                class="flex-1"
+                @update:model-value="(v) => patchMeta(field.key, v)"
+              />
+              <span class="text-xs w-8 text-right tabular-nums">{{ getMetaValue(field.key) ?? 0 }}</span>
+            </div>
+
+            <!-- Color preset -->
+            <div
+              v-else-if="field.type === 'colorPreset'"
+              class="flex flex-wrap gap-1.5"
+            >
+              <button
+                v-for="c in field.presets ?? []"
+                :key="c"
+                class="size-5 rounded-full border-2 cursor-pointer"
+                :style="`background: ${c}; border-color: ${getMetaValue(field.key) === c ? c : 'transparent'}`"
+                :class="getMetaValue(field.key) === c ? 'ring-2 ring-offset-1 ring-current' : ''"
+                @click="patchMeta(field.key, getMetaValue(field.key) === c ? '' : c)"
+              />
+            </div>
+
+            <!-- Number -->
+            <UInputNumber
+              v-else-if="field.type === 'number'"
+              :model-value="getMetaValue(field.key) ?? 0"
+              :min="field.min"
+              :max="field.max"
+              :step="field.step ?? 1"
+              size="sm"
+              @update:model-value="(v) => patchMeta(field.key, v)"
+            />
+
+            <!-- URL -->
+            <UInput
+              v-else-if="field.type === 'url'"
+              :model-value="getMetaValue(field.key) || ''"
+              size="sm"
+              placeholder="https://…"
+              leading-icon="i-lucide-link"
+              @update:model-value="(v) => patchMeta(field.key, v)"
+            />
+
+            <!-- Textarea -->
+            <UTextarea
+              v-else-if="field.type === 'textarea'"
+              :model-value="getMetaValue(field.key) || ''"
+              size="sm"
+              :rows="2"
+              @update:model-value="(v) => patchMeta(field.key, v)"
+            />
+
+            <!-- Fallback: show type name -->
+            <span
+              v-else
+              class="text-xs text-(--ui-text-dimmed)"
+            >{{ field.type }}</span>
+          </div>
+        </div>
+      </div>
+    </template>
+
+    <!-- Encryption slot -->
+    <template v-if="$slots.encryption">
+      <USeparator />
+      <div class="space-y-3">
+        <p class="text-xs font-semibold uppercase tracking-wider text-(--ui-text-muted) flex items-center gap-1.5">
+          <UIcon
+            name="i-lucide-lock-keyhole"
+            class="size-3.5"
+          />
+          Encryption
+        </p>
+        <slot name="encryption" />
+      </div>
+    </template>
+
+    <!-- Offline sync section -->
+    <USeparator />
+    <div class="space-y-3">
+      <div class="flex items-center justify-between">
+        <p class="text-xs font-semibold uppercase tracking-wider text-(--ui-text-muted) flex items-center gap-1.5">
+          <UIcon
+            name="i-lucide-cloud-download"
+            class="size-3.5"
+          />
+          Offline sync
+        </p>
+        <UTooltip
+          text="Sync now"
+          :content="{ side: 'bottom' }"
+        >
+          <UButton
+            icon="i-lucide-refresh-cw"
+            variant="ghost"
+            color="neutral"
+            size="xs"
+            :loading="isSyncing"
+            @click="emit('sync-doc')"
+          />
+        </UTooltip>
+      </div>
+      <div class="flex items-center gap-3 p-3 rounded-lg bg-(--ui-bg-elevated)">
+        <UIcon
+          :name="syncStatusIcon"
+          :class="syncStatusColor"
+          class="size-4 shrink-0"
+        />
+        <div class="flex-1 min-w-0">
+          <p class="text-sm text-(--ui-text)">
+            {{ syncStatusLabel }}
+          </p>
+          <p class="text-xs text-(--ui-text-dimmed)">
+            {{ lastSyncedLabel ?? "Not yet synced" }}
+          </p>
+        </div>
+      </div>
+      <p
+        v-if="syncError"
+        class="mt-1 text-xs text-(--ui-color-error-500)"
+      >
+        {{ syncError }}
+      </p>
+    </div>
+
+    <!-- Extra slots for app-specific sections -->
+    <template v-if="$slots.extra">
+      <USeparator />
+      <slot name="extra" />
+    </template>
+  </div>
+</template>
+
+<style scoped>
+.sf-enter-active,.sf-leave-active{transition:opacity .15s ease}.sf-enter-from,.sf-leave-to{opacity:0}
+</style>