@abraca/nuxt 1.9.1 → 2.0.1

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

@@ -0,0 +1,66 @@
+export interface SubPageListEntry {
+    id: string;
+    label: string;
+    type?: string;
+    meta?: {
+        icon?: string;
+        color?: string;
+        [k: string]: unknown;
+    };
+}
+type __VLS_Props = {
+    /** Parent document whose direct children are listed. */
+    parentDocId: string;
+    /** Layout. `list` = vertical rows, `grid` = card grid, `compact` = minimal pills. Default: 'list'. */
+    layout?: 'list' | 'grid' | 'compact';
+    /** Maximum number of items shown. Omit for all. */
+    limit?: number;
+    /** Empty-state text. */
+    emptyText?: string;
+    /** Show a "New …" button at the bottom of the list. Emits `create`. */
+    showCreate?: boolean;
+    /** Label for the create button. */
+    createLabel?: string;
+};
+declare var __VLS_1: {}, __VLS_8: {
+    entry: SubPageListEntry;
+}, __VLS_15: {
+    entry: SubPageListEntry;
+}, __VLS_17: {
+    key: string;
+    entry: SubPageListEntry;
+}, __VLS_24: {
+    key: string;
+    entry: SubPageListEntry;
+};
+type __VLS_Slots = {} & {
+    empty?: (props: typeof __VLS_1) => any;
+} & {
+    item?: (props: typeof __VLS_8) => any;
+} & {
+    'item-trailing'?: (props: typeof __VLS_15) => any;
+} & {
+    item?: (props: typeof __VLS_17) => any;
+} & {
+    item?: (props: typeof __VLS_24) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    open: (id: string, label: string) => any;
+    create: () => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onOpen?: ((id: string, label: string) => any) | undefined;
+    onCreate?: (() => any) | undefined;
+}>, {
+    layout: "list" | "grid" | "compact";
+    emptyText: string;
+    showCreate: boolean;
+    createLabel: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/ASubPageList.vue

@@ -0,0 +1,147 @@
+<script setup>
+import { computed } from "vue";
+import { useAbracadabra } from "../composables/useAbracadabra";
+import { useChildTree } from "../composables/useChildTree";
+const props = defineProps({
+  parentDocId: { type: String, required: true },
+  layout: { type: String, required: false, default: "list" },
+  limit: { type: Number, required: false },
+  emptyText: { type: String, required: false, default: "No child documents yet" },
+  showCreate: { type: Boolean, required: false, default: false },
+  createLabel: { type: String, required: false, default: "New page" }
+});
+const emit = defineEmits(["open", "create"]);
+const { doc: rootDoc } = useAbracadabra();
+const tree = useChildTree(rootDoc, props.parentDocId);
+const entries = computed(() => {
+  const all = tree.childrenOf(null);
+  return props.limit !== void 0 ? all.slice(0, props.limit) : all;
+});
+function defaultIcon(entry) {
+  return entry.meta?.icon ?? "i-lucide-file-text";
+}
+</script>
+
+<template>
+  <div class="a-subpage-list">
+    <!-- Empty state -->
+    <div
+      v-if="!entries.length"
+      class="a-subpage-list__empty"
+    >
+      <slot name="empty">
+        <UIcon
+          name="i-lucide-folder-open"
+          class="size-6 text-(--ui-text-dimmed) mb-2"
+        />
+        <p class="text-sm text-(--ui-text-muted)">
+          {{ emptyText }}
+        </p>
+      </slot>
+    </div>
+
+    <!-- list -->
+    <ul
+      v-else-if="layout === 'list'"
+      class="flex flex-col gap-0.5"
+    >
+      <li
+        v-for="entry in entries"
+        :key="entry.id"
+      >
+        <slot
+          name="item"
+          :entry="entry"
+        >
+          <button
+            class="w-full flex items-center gap-2 px-2.5 py-1.5 rounded-md text-sm text-(--ui-text) hover:bg-(--ui-bg-elevated) transition-colors text-left"
+            type="button"
+            @click="emit('open', entry.id, entry.label)"
+          >
+            <UIcon
+              :name="defaultIcon(entry)"
+              class="size-4 shrink-0"
+              :style="entry.meta?.color ? `color: ${entry.meta.color}` : ''"
+              :class="entry.meta?.color ? '' : 'text-(--ui-text-muted)'"
+            />
+            <span class="flex-1 truncate">{{ entry.label || "Untitled" }}</span>
+            <slot
+              name="item-trailing"
+              :entry="entry"
+            />
+          </button>
+        </slot>
+      </li>
+    </ul>
+
+    <!-- grid -->
+    <div
+      v-else-if="layout === 'grid'"
+      class="grid grid-cols-2 sm:grid-cols-3 gap-2"
+    >
+      <slot
+        v-for="entry in entries"
+        :key="entry.id"
+        name="item"
+        :entry="entry"
+      >
+        <button
+          class="flex flex-col gap-2 p-3 rounded-md border border-(--ui-border) bg-(--ui-bg) hover:border-(--ui-border-accented) hover:bg-(--ui-bg-elevated) transition-colors text-left"
+          type="button"
+          @click="emit('open', entry.id, entry.label)"
+        >
+          <UIcon
+            :name="defaultIcon(entry)"
+            class="size-5"
+            :style="entry.meta?.color ? `color: ${entry.meta.color}` : ''"
+            :class="entry.meta?.color ? '' : 'text-(--ui-text-muted)'"
+          />
+          <span class="text-sm font-medium text-(--ui-text-highlighted) line-clamp-2">{{ entry.label || "Untitled" }}</span>
+        </button>
+      </slot>
+    </div>
+
+    <!-- compact -->
+    <div
+      v-else-if="layout === 'compact'"
+      class="flex flex-wrap gap-1.5"
+    >
+      <slot
+        v-for="entry in entries"
+        :key="entry.id"
+        name="item"
+        :entry="entry"
+      >
+        <button
+          class="inline-flex items-center gap-1.5 px-2 py-0.5 rounded-full border border-(--ui-border) bg-(--ui-bg) text-xs hover:border-(--ui-border-accented) hover:bg-(--ui-bg-elevated) transition-colors"
+          type="button"
+          @click="emit('open', entry.id, entry.label)"
+        >
+          <UIcon
+            :name="defaultIcon(entry)"
+            class="size-3"
+            :style="entry.meta?.color ? `color: ${entry.meta.color}` : ''"
+            :class="entry.meta?.color ? '' : 'text-(--ui-text-muted)'"
+          />
+          <span class="text-(--ui-text)">{{ entry.label || "Untitled" }}</span>
+        </button>
+      </slot>
+    </div>
+
+    <!-- create -->
+    <div
+      v-if="showCreate"
+      class="mt-2"
+    >
+      <UButton
+        :icon="layout === 'grid' ? 'i-lucide-plus-square' : 'i-lucide-plus'"
+        :label="createLabel"
+        size="sm"
+        variant="ghost"
+        color="neutral"
+        :block="layout === 'grid'"
+        @click="emit('create')"
+      />
+    </div>
+  </div>
+</template>

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

@@ -0,0 +1,66 @@
+export interface SubPageListEntry {
+    id: string;
+    label: string;
+    type?: string;
+    meta?: {
+        icon?: string;
+        color?: string;
+        [k: string]: unknown;
+    };
+}
+type __VLS_Props = {
+    /** Parent document whose direct children are listed. */
+    parentDocId: string;
+    /** Layout. `list` = vertical rows, `grid` = card grid, `compact` = minimal pills. Default: 'list'. */
+    layout?: 'list' | 'grid' | 'compact';
+    /** Maximum number of items shown. Omit for all. */
+    limit?: number;
+    /** Empty-state text. */
+    emptyText?: string;
+    /** Show a "New …" button at the bottom of the list. Emits `create`. */
+    showCreate?: boolean;
+    /** Label for the create button. */
+    createLabel?: string;
+};
+declare var __VLS_1: {}, __VLS_8: {
+    entry: SubPageListEntry;
+}, __VLS_15: {
+    entry: SubPageListEntry;
+}, __VLS_17: {
+    key: string;
+    entry: SubPageListEntry;
+}, __VLS_24: {
+    key: string;
+    entry: SubPageListEntry;
+};
+type __VLS_Slots = {} & {
+    empty?: (props: typeof __VLS_1) => any;
+} & {
+    item?: (props: typeof __VLS_8) => any;
+} & {
+    'item-trailing'?: (props: typeof __VLS_15) => any;
+} & {
+    item?: (props: typeof __VLS_17) => any;
+} & {
+    item?: (props: typeof __VLS_24) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    open: (id: string, label: string) => any;
+    create: () => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onOpen?: ((id: string, label: string) => any) | undefined;
+    onCreate?: (() => any) | undefined;
+}>, {
+    layout: "list" | "grid" | "compact";
+    emptyText: string;
+    showCreate: boolean;
+    createLabel: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/aware/AAccordion.d.vue.ts

@@ -0,0 +1,25 @@
+type __VLS_Props = {
+    fieldKey: string;
+    awareness?: boolean;
+    live?: boolean;
+    total?: boolean;
+};
+declare var __VLS_9: string, __VLS_10: any, __VLS_27: string, __VLS_28: any;
+type __VLS_Slots = {} & {
+    [K in NonNullable<typeof __VLS_9>]?: (props: typeof __VLS_10) => any;
+} & {
+    [K in NonNullable<typeof __VLS_27>]?: (props: typeof __VLS_28) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    awareness: boolean;
+    live: boolean;
+    total: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/aware/AAccordion.vue

@@ -0,0 +1,107 @@
+<script setup>
+import { computed, ref, useAttrs, watch } from "vue";
+import { useAAField } from "../../composables/useAAField";
+import { useAAUIState } from "../../composables/useAAUIState";
+import AHoverItem from "./AHoverItem.vue";
+function itemId(item) {
+  if (item == null) return "";
+  if (typeof item === "string") return item;
+  return String(item.value ?? item.id ?? item.label ?? "");
+}
+function itemLabel(item) {
+  if (item == null) return "";
+  if (typeof item === "string") return item;
+  return String(item.label ?? item.value ?? item.id ?? "");
+}
+defineOptions({ inheritAttrs: false });
+const props = defineProps({
+  fieldKey: { type: String, required: true },
+  awareness: { type: Boolean, required: false, default: true },
+  live: { type: Boolean, required: false, default: false },
+  total: { type: Boolean, required: false, default: false }
+});
+const enableAwareness = computed(() => props.awareness || props.total);
+const enableLive = computed(() => props.live || props.total);
+const attrs = useAttrs();
+const { hoverers, focusers, hoverHandlers } = useAAField(() => props.fieldKey);
+const liveExpanded = useAAUIState(() => `${props.fieldKey}:expanded`, { defaultValue: "" });
+const hasExternalModel = computed(
+  () => "modelValue" in attrs || "onUpdate:modelValue" in attrs
+);
+const local = ref(enableLive.value ? liveExpanded.value ?? "" : "");
+watch(liveExpanded, (val) => {
+  if (!enableLive.value) return;
+  if (JSON.stringify(local.value) !== JSON.stringify(val)) local.value = val ?? "";
+});
+watch(local, (val) => {
+  if (!enableLive.value) return;
+  if (JSON.stringify(liveExpanded.value) !== JSON.stringify(val)) liveExpanded.value = val;
+});
+const ringStyle = computed(() => {
+  if (!enableAwareness.value) return void 0;
+  const focusColor = focusers.value[0]?.user?.color;
+  const hoverColor = hoverers.value[0]?.user?.color;
+  if (!focusColor && !hoverColor) return void 0;
+  const layers = [];
+  if (hoverColor) layers.push(`0 0 0 1px ${hoverColor}40`);
+  if (focusColor) layers.push(`0 0 0 2px ${focusColor}`);
+  return {
+    boxShadow: layers.join(", "),
+    borderRadius: "var(--ui-radius, 0.375rem)",
+    transition: "box-shadow 150ms ease"
+  };
+});
+const eventHandlers = computed(() => enableAwareness.value ? hoverHandlers : {});
+</script>
+
+<template>
+  <div
+    class="aa-host aa-host--block"
+    :style="ringStyle"
+    v-on="eventHandlers"
+  >
+    <UAccordion
+      v-if="enableLive && !hasExternalModel"
+      v-model="local"
+      v-bind="attrs"
+    >
+      <template
+        v-for="(_, name) in $slots"
+        #[name]="slotData"
+      >
+        <slot
+          :name="name"
+          v-bind="slotData ?? {}"
+        />
+      </template>
+      <template #trigger="{ item }">
+        <AHoverItem :field-key="`${fieldKey}:item:${itemId(item)}`" variant="block" :show-flag="false">
+          {{ itemLabel(item) }}
+        </AHoverItem>
+      </template>
+    </UAccordion>
+    <UAccordion
+      v-else
+      v-bind="attrs"
+    >
+      <template
+        v-for="(_, name) in $slots"
+        #[name]="slotData"
+      >
+        <slot
+          :name="name"
+          v-bind="slotData ?? {}"
+        />
+      </template>
+      <template #trigger="{ item }">
+        <AHoverItem :field-key="`${fieldKey}:item:${itemId(item)}`" variant="block" :show-flag="false">
+          {{ itemLabel(item) }}
+        </AHoverItem>
+      </template>
+    </UAccordion>
+  </div>
+</template>
+
+<style scoped>
+.aa-host{border-radius:var(--ui-radius,.375rem);position:relative}.aa-host--block{display:block}
+</style>

package/dist/runtime/components/aware/AAccordion.vue.d.ts

@@ -0,0 +1,25 @@
+type __VLS_Props = {
+    fieldKey: string;
+    awareness?: boolean;
+    live?: boolean;
+    total?: boolean;
+};
+declare var __VLS_9: string, __VLS_10: any, __VLS_27: string, __VLS_28: any;
+type __VLS_Slots = {} & {
+    [K in NonNullable<typeof __VLS_9>]?: (props: typeof __VLS_10) => any;
+} & {
+    [K in NonNullable<typeof __VLS_27>]?: (props: typeof __VLS_28) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    awareness: boolean;
+    live: boolean;
+    total: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/aware/AArea.vue

@@ -6,30 +6,43 @@ const props = defineProps({
   tag: { type: String, required: false, default: "div" },
   max: { type: Number, required: false, default: 3 }
 });
-const { hoverers, hoverHandlers } = useAAField(props.fieldKey);
-const hoverRingStyle = computed(() => {
-  if (!hoverers.value.length) return {};
-  const color = hoverers.value[0]?.user?.color;
-  if (!color) return {};
-  return { boxShadow: `0 0 0 1px ${color}`, borderRadius: "0.375rem" };
+import { awareRingStyle } from "../../utils/awareRingStyle";
+const { hoverers, pressers, isPressed, hoverPressHandlers } = useAAField(props.fieldKey);
+const hoverRingStyle = computed(() => awareRingStyle({
+  hover: hoverers.value[0]?.user?.color,
+  press: pressers.value[0]?.user?.color
+}) ?? {});
+const allPeers = computed(() => {
+  const seen = /* @__PURE__ */ new Set();
+  const out = [];
+  for (const p of pressers.value) if (!seen.has(p.clientId)) {
+    seen.add(p.clientId);
+    out.push(p);
+  }
+  for (const p of hoverers.value) if (!seen.has(p.clientId)) {
+    seen.add(p.clientId);
+    out.push(p);
+  }
+  return out;
 });
 </script>
 
 <template>
   <component
     :is="tag"
-    class="relative"
+    class="relative aa-area-host"
+    :class="{ 'aa-area-host--pressed': isPressed }"
     :style="hoverRingStyle"
-    v-on="hoverHandlers"
+    v-on="hoverPressHandlers"
   >
     <slot />
     <Transition name="aa-peer">
       <span
-        v-if="hoverers.length"
+        v-if="allPeers.length"
         class="absolute -top-2 right-1 flex -space-x-1 pointer-events-none z-10"
       >
         <AAvatar
-          v-for="p in hoverers.slice(0, max)"
+          v-for="p in allPeers.slice(0, max)"
           :key="p.clientId"
           :user="p"
           size="2xs"
@@ -42,5 +55,5 @@ const hoverRingStyle = computed(() => {
 </template>
 
 <style scoped>
-.aa-peer-enter-active,.aa-peer-leave-active{transition:opacity .15s ease}.aa-peer-enter-from,.aa-peer-leave-to{opacity:0}
+.aa-peer-enter-active,.aa-peer-leave-active{transition:opacity .15s ease}.aa-peer-enter-from,.aa-peer-leave-to{opacity:0}.aa-area-host{transition:filter .12s ease}.aa-area-host--pressed{filter:brightness(.92)}
 </style>

package/dist/runtime/components/aware/AAvatar.d.vue.ts

@@ -10,6 +10,11 @@ type __VLS_Props = {
     showPopover?: boolean;
     /** Current viewer's docId — used to show "In this document" vs "Elsewhere" */
     currentDocId?: string;
+    /** When true and the peer has a `statusIcon`, render that icon centred
+     *  inside the colored ring instead of UAvatar's initials. Per-call so
+     *  the consumer can opt into the look without affecting other call
+     *  sites (e.g. show on the local user's own avatar but not on peers). */
+    useStatusAsAvatar?: boolean;
 };
 declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     follow: (user: AwarenessUser) => any;
@@ -20,6 +25,7 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {
     showStatus: boolean;
     showTooltip: boolean;
     showPopover: boolean;
+    useStatusAsAvatar: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/components/aware/AAvatar.vue

@@ -9,19 +9,40 @@ const props = defineProps({
   showStatus: { type: Boolean, required: false, default: true },
   showTooltip: { type: Boolean, required: false, default: true },
   showPopover: { type: Boolean, required: false, default: false },
-  currentDocId: { type: String, required: false }
+  currentDocId: { type: String, required: false },
+  useStatusAsAvatar: { type: Boolean, required: false, default: false }
 });
 const emit = defineEmits(["follow"]);
 const appConfig = useAppConfig();
 const neutral = computed(() => appConfig.ui?.colors?.neutral ?? "zinc");
 const name = computed(() => props.user.user?.name || "Anonymous");
 const color = computed(() => props.user.user?.color);
+const statusIconRaw = computed(() => props.user.user?.statusIcon ?? "");
+const statusIcon = computed(
+  () => statusIconRaw.value ? statusIconRaw.value.startsWith("i-") ? statusIconRaw.value : `i-lucide-${statusIconRaw.value}` : ""
+);
+const statusText = computed(() => props.user.user?.statusText ?? "");
+const showStatusAsAvatar = computed(() => props.useStatusAsAvatar && !!statusIcon.value);
 const avatarStyle = computed(
   () => color.value ? avatarBorderStyle(color.value, neutral.value) : ""
 );
+const statusIconClass = computed(() => {
+  switch (props.size) {
+    case "2xs":
+      return "size-3";
+    case "xs":
+      return "size-3";
+    case "md":
+      return "size-4";
+    case "lg":
+      return "size-5";
+    default:
+      return "size-3.5";
+  }
+});
 const tooltipText = computed(() => {
-  if (props.idle) return `${name.value} \xB7 idle`;
-  return name.value;
+  const base = props.idle ? `${name.value} \xB7 idle` : name.value;
+  return statusText.value ? `${base} \u2014 ${statusText.value}` : base;
 });
 const chipColor = computed(() => {
   if (props.idle === void 0) return void 0;
@@ -84,6 +105,13 @@ const popoverOpen = ref(false);
             <p class="text-sm font-semibold text-default truncate">
               {{ name }}
             </p>
+            <p
+              v-if="statusText"
+              class="text-xs text-default truncate flex items-center gap-1"
+            >
+              <UIcon v-if="statusIcon" :name="statusIcon" class="size-3 shrink-0 text-muted" />
+              <span class="truncate">{{ statusText }}</span>
+            </p>
             <p
               v-if="docContext"
               class="text-xs text-muted truncate"
@@ -123,6 +151,7 @@ const popoverOpen = ref(false);
         :alt="name"
         :size="size"
         :style="avatarStyle"
+        :icon="showStatusAsAvatar ? statusIcon : void 0"
       />
     </UChip>
     <UAvatar
@@ -145,6 +174,7 @@ const popoverOpen = ref(false);
         :alt="name"
         :size="size"
         :style="avatarStyle"
+        :icon="showStatusAsAvatar ? statusIcon : void 0"
       />
     </UChip>
     <UAvatar

package/dist/runtime/components/aware/AAvatar.vue.d.ts

@@ -10,6 +10,11 @@ type __VLS_Props = {
     showPopover?: boolean;
     /** Current viewer's docId — used to show "In this document" vs "Elsewhere" */
     currentDocId?: string;
+    /** When true and the peer has a `statusIcon`, render that icon centred
+     *  inside the colored ring instead of UAvatar's initials. Per-call so
+     *  the consumer can opt into the look without affecting other call
+     *  sites (e.g. show on the local user's own avatar but not on peers). */
+    useStatusAsAvatar?: boolean;
 };
 declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     follow: (user: AwarenessUser) => any;
@@ -20,6 +25,7 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {
     showStatus: boolean;
     showTooltip: boolean;
     showPopover: boolean;
+    useStatusAsAvatar: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/components/aware/AAvatarGroup.d.vue.ts

@@ -0,0 +1,10 @@
+type __VLS_Props = {
+    max?: number;
+    size?: '2xs' | 'xs' | 'sm' | 'md' | 'lg';
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    size: "2xs" | "xs" | "sm" | "md" | "lg";
+    max: number;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/aware/AAvatarGroup.vue

@@ -0,0 +1,30 @@
+<script setup>
+import { computed } from "vue";
+import { useAwarenessPeers } from "../../composables/useAwarenessPeers";
+defineOptions({ inheritAttrs: false });
+const props = defineProps({
+  max: { type: Number, required: false, default: 5 },
+  size: { type: String, required: false, default: "sm" }
+});
+const { peers } = useAwarenessPeers();
+const visible = computed(() => peers.value.slice(0, props.max));
+const overflow = computed(() => Math.max(0, peers.value.length - visible.value.length));
+</script>
+
+<template>
+  <UAvatarGroup :size="size">
+    <AAvatar
+      v-for="p in visible"
+      :key="p.clientId"
+      :user="p"
+      :size="size"
+      :show-status="false"
+      :show-tooltip="true"
+    />
+    <UAvatar
+      v-if="overflow > 0"
+      :alt="`+${overflow}`"
+      :size="size"
+    />
+  </UAvatarGroup>
+</template>

package/dist/runtime/components/aware/AAvatarGroup.vue.d.ts

@@ -0,0 +1,10 @@
+type __VLS_Props = {
+    max?: number;
+    size?: '2xs' | 'xs' | 'sm' | 'md' | 'lg';
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    size: "2xs" | "xs" | "sm" | "md" | "lg";
+    max: number;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;