@chelone/vue 0.0.0-stage → 0.1.0

package/dist/components/admin/realtime/edit-live.vue.js

@@ -0,0 +1,86 @@
+import { defineComponent, ref, watchEffect, openBlock, createBlock, createSlots, withCtx, createVNode, unref, renderSlot, normalizeProps, guardReactiveProps, renderList, onScopeDispose } from "vue";
+import { subscribeLiveRecord } from "@chelone/core";
+import { useCheloneContext } from "../../../context.js";
+import { useResourceContext } from "../../../resource-context.js";
+import { useRouterAdapterOptional } from "../../../router/adapter.js";
+import _sfc_main$1 from "../view/edit.vue.js";
+import { useCheloneFormContext } from "../../../form/form-context.js";
+import { subscribeStore } from "../../../form/subscribe-ref.js";
+const FormDirtyReporter = defineComponent({
+  emits: { change: (_dirty) => true },
+  setup(_, { emit }) {
+    const { form } = useCheloneFormContext();
+    let dirty = !form.store.state.isDefaultValue;
+    emit("change", dirty);
+    onScopeDispose(
+      subscribeStore(form.store, () => {
+        const next = !form.store.state.isDefaultValue;
+        if (next === dirty) return;
+        dirty = next;
+        emit("change", dirty);
+      })
+    );
+    return () => null;
+  }
+});
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "edit-live",
+  props: {
+    resource: {},
+    id: {}
+  },
+  setup(__props) {
+    const props = __props;
+    const ctx = useCheloneContext();
+    const ambientResource = useResourceContext();
+    if (!(props.resource ?? ambientResource)) {
+      throw new Error(
+        "<Edit>: no resource. Pass a `resource` prop or render inside a <Resource>."
+      );
+    }
+    const liveResource = props.resource ?? ambientResource;
+    const liveId = props.id ?? useRouterAdapterOptional()?.useParams().value.id;
+    const formIsDirty = ref(false);
+    let subscription;
+    watchEffect((onCleanup) => {
+      if (!liveResource || liveId === void 0) return;
+      const live = subscribeLiveRecord(ctx, liveResource, liveId, {
+        paused: () => formIsDirty.value
+      });
+      subscription = live;
+      onCleanup(() => {
+        live.stop();
+        if (subscription === live) subscription = void 0;
+      });
+    });
+    function onDirtyChange(dirty) {
+      formIsDirty.value = dirty;
+      if (!dirty) subscription?.resume();
+    }
+    const otherSlots = (slots) => Object.keys(slots).filter((name) => name !== "default");
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(_sfc_main$1, {
+        resource: __props.resource,
+        id: __props.id
+      }, createSlots({
+        default: withCtx((slotProps) => [
+          createVNode(unref(FormDirtyReporter), { onChange: onDirtyChange }),
+          renderSlot(_ctx.$slots, "default", normalizeProps(guardReactiveProps(slotProps ?? {})))
+        ]),
+        _: 2
+      }, [
+        renderList(otherSlots(_ctx.$slots), (name) => {
+          return {
+            name,
+            fn: withCtx((slotProps) => [
+              renderSlot(_ctx.$slots, name, normalizeProps(guardReactiveProps(slotProps ?? {})))
+            ])
+          };
+        })
+      ]), 1032, ["resource", "id"]);
+    };
+  }
+});
+export {
+  _sfc_main as default
+};

package/dist/components/admin/realtime/edit-live2.vue.js

@@ -0,0 +1,4 @@
+import _sfc_main from "./edit-live.vue.js";
+export {
+  _sfc_main as default
+};

package/dist/components/admin/realtime/list-live.vue.d.ts

@@ -0,0 +1,16 @@
+import type { ListProps } from "../view/list.vue.js";
+/** Props for {@link ListLive}: the props of `<List>`. */
+export type ListLiveProps = ListProps;
+declare const _default: __VLS_WithSlots<import("vue").DefineComponent<{
+    resource?: string;
+}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{
+    resource?: string;
+}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
+    [x: string]: ((props: any) => any) | undefined;
+}>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/admin/realtime/list-live.vue.js

@@ -0,0 +1,40 @@
+import { defineComponent, watchEffect, openBlock, createBlock, createSlots, renderList, withCtx, renderSlot, normalizeProps, guardReactiveProps } from "vue";
+import { subscribeLiveResource } from "@chelone/core";
+import { useCheloneContext } from "../../../context.js";
+import { useResourceContext } from "../../../resource-context.js";
+import _sfc_main$1 from "../view/list.vue.js";
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "list-live",
+  props: {
+    resource: {}
+  },
+  setup(__props) {
+    const props = __props;
+    const ctx = useCheloneContext();
+    const ambientResource = useResourceContext();
+    if (!(props.resource ?? ambientResource)) {
+      throw new Error(
+        "<List>: no resource. Pass a `resource` prop or render inside a <Resource>."
+      );
+    }
+    watchEffect((onCleanup) => {
+      const resource = props.resource ?? ambientResource;
+      if (resource) onCleanup(subscribeLiveResource(ctx, resource).stop);
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(_sfc_main$1, { resource: __props.resource }, createSlots({ _: 2 }, [
+        renderList(Object.keys(_ctx.$slots), (name) => {
+          return {
+            name,
+            fn: withCtx((slotProps) => [
+              renderSlot(_ctx.$slots, name, normalizeProps(guardReactiveProps(slotProps ?? {})))
+            ])
+          };
+        })
+      ]), 1032, ["resource"]);
+    };
+  }
+});
+export {
+  _sfc_main as default
+};

package/dist/components/admin/realtime/list-live2.vue.js

@@ -0,0 +1,4 @@
+import _sfc_main from "./list-live.vue.js";
+export {
+  _sfc_main as default
+};

package/dist/components/admin/realtime/lock-on-mount.vue.d.ts

@@ -0,0 +1,24 @@
+import type { Identifier, Lock } from "@chelone/core";
+/** Props for {@link LockOnMount}. Each defaults to the ambient context. */
+export interface LockOnMountProps {
+    resource?: string;
+    id?: Identifier;
+    /** Defaults to the auth provider's identity. */
+    identity?: Identifier;
+    meta?: Record<string, unknown>;
+    /** Called with a failed lock or release, a conflict included. */
+    onLockError?: (error: Error) => void;
+}
+declare const _default: __VLS_WithSlots<import("vue").DefineComponent<LockOnMountProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<LockOnMountProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
+    default?: () => unknown;
+    loading?: () => unknown;
+    "locked-by"?: (props: {
+        lock: Lock;
+    }) => unknown;
+}>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/admin/realtime/lock-on-mount.vue.js

@@ -0,0 +1,56 @@
+import { defineComponent, computed, unref, renderSlot, createVNode, withCtx, createTextVNode, toDisplayString, createCommentVNode } from "vue";
+import { LockConflictError } from "@chelone/core";
+import { useTranslate } from "../../../i18n/use-translate.js";
+import { useLockOnMount } from "../../../realtime/locks.js";
+import { Alert, AlertDescription } from "../../ui/alert.js";
+import _sfc_main$1 from "../../ui/skeleton.vue.js";
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "lock-on-mount",
+  props: {
+    resource: {},
+    id: {},
+    identity: {},
+    meta: {},
+    onLockError: { type: Function }
+  },
+  setup(__props) {
+    const props = __props;
+    const translate = useTranslate();
+    const { lock, isLocking, lockError } = useLockOnMount({
+      resource: () => props.resource,
+      id: () => props.id,
+      identity: () => props.identity,
+      meta: props.meta,
+      onLockError: (error) => props.onLockError?.(error)
+    });
+    const conflict = computed(
+      () => lockError.value instanceof LockConflictError ? lockError.value.existingLock : null
+    );
+    return (_ctx, _cache) => {
+      return unref(isLocking) ? renderSlot(_ctx.$slots, "loading", { key: 0 }, () => [
+        createVNode(_sfc_main$1, { class: "h-8 w-full" })
+      ]) : conflict.value ? renderSlot(_ctx.$slots, "locked-by", {
+        key: 1,
+        lock: conflict.value
+      }, () => [
+        createVNode(unref(Alert), null, {
+          default: withCtx(() => [
+            createVNode(unref(AlertDescription), null, {
+              default: withCtx(() => [
+                createTextVNode(toDisplayString(unref(translate)("chelone.lock.locked_by", {
+                  _: `Locked by ${String(conflict.value.identity)}`,
+                  identity: String(conflict.value.identity)
+                })), 1)
+              ]),
+              _: 1
+            })
+          ]),
+          _: 1
+        })
+      ]) : unref(lock) ? renderSlot(_ctx.$slots, "default", { key: 2 }) : createCommentVNode("", true);
+    };
+  }
+});
+export {
+  _sfc_main as default
+};

package/dist/components/admin/realtime/lock-on-mount2.vue.js

@@ -0,0 +1,4 @@
+import _sfc_main from "./lock-on-mount.vue.js";
+export {
+  _sfc_main as default
+};

package/dist/components/admin/realtime/lock-status.vue.d.ts

@@ -0,0 +1,18 @@
+import type { Identifier, Lock } from "@chelone/core";
+/** Props for {@link LockStatus}. Each defaults to the ambient context. */
+export interface LockStatusProps {
+    resource?: string;
+    id?: Identifier;
+}
+declare const _default: __VLS_WithSlots<import("vue").DefineComponent<LockStatusProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<LockStatusProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
+    lock?: (props: {
+        lock: Lock;
+    }) => unknown;
+    free?: () => unknown;
+}>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/admin/realtime/lock-status.vue.js

@@ -0,0 +1,70 @@
+import { defineComponent, inject, openBlock, createBlock, unref, createSlots, withCtx, renderSlot, normalizeProps, guardReactiveProps, createCommentVNode, h } from "vue";
+import { RecordContextKey } from "../../../record/record-context.js";
+import { useResourceContext } from "../../../resource-context.js";
+import { useTranslate } from "../../../i18n/use-translate.js";
+import { useGetLockLive } from "../../../realtime/locks.js";
+import { Badge } from "../../ui/badge.js";
+const LockStatusQuery = defineComponent({
+  props: {
+    resource: { type: String, required: true },
+    id: { type: [String, Number], required: true }
+  },
+  setup(props, { slots }) {
+    const translate = useTranslate();
+    const { data: lock } = useGetLockLive(props.resource, () => ({
+      id: props.id
+    }));
+    return () => {
+      if (lock.value) {
+        return slots.lock?.({ lock: lock.value }) ?? h(
+          Badge,
+          { variant: "secondary" },
+          () => translate("chelone.lock.locked_by", {
+            _: `Locked by ${String(lock.value?.identity)}`,
+            identity: String(lock.value?.identity)
+          })
+        );
+      }
+      return lock.value === null ? slots.free?.() : null;
+    };
+  }
+});
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "lock-status",
+  props: {
+    resource: {},
+    id: {}
+  },
+  setup(__props) {
+    const props = __props;
+    const ambientResource = useResourceContext();
+    const ambientRecord = inject(RecordContextKey, null);
+    const resolvedResource = () => props.resource ?? ambientResource;
+    const resolvedId = () => props.id ?? ambientRecord?.value?.id;
+    return (_ctx, _cache) => {
+      return resolvedResource() !== void 0 && resolvedId() != null ? (openBlock(), createBlock(unref(LockStatusQuery), {
+        key: resolvedResource(),
+        resource: resolvedResource(),
+        id: resolvedId()
+      }, createSlots({ _: 2 }, [
+        _ctx.$slots.lock ? {
+          name: "lock",
+          fn: withCtx((slotProps) => [
+            renderSlot(_ctx.$slots, "lock", normalizeProps(guardReactiveProps(slotProps)))
+          ]),
+          key: "0"
+        } : void 0,
+        _ctx.$slots.free ? {
+          name: "free",
+          fn: withCtx(() => [
+            renderSlot(_ctx.$slots, "free")
+          ]),
+          key: "1"
+        } : void 0
+      ]), 1032, ["resource", "id"])) : createCommentVNode("", true);
+    };
+  }
+});
+export {
+  _sfc_main as default
+};

package/dist/components/admin/realtime/lock-status2.vue.js

@@ -0,0 +1,4 @@
+import _sfc_main from "./lock-status.vue.js";
+export {
+  _sfc_main as default
+};

package/dist/components/admin/realtime/menu-live.vue.d.ts

@@ -0,0 +1,86 @@
+import { type RealtimeEventType } from "@chelone/core";
+import { type Component, type PropType } from "vue";
+/** Props for {@link MenuLiveItemLink}, and the shape of one `<MenuLive>` item. */
+export interface MenuLiveItemLinkProps {
+    /** Route the link navigates to. The count clears while it, or a child route of it, is active. */
+    to: string;
+    /** The resource whose events are counted. Read once, in `setup`. */
+    resource: string;
+    /** Link text. Translated, with the string itself as the fallback. */
+    label: string;
+    /** Icon component rendered before the label. Provide the `#icon` slot instead for markup. */
+    icon?: Component;
+    /** Event types that count as new. Defaults to `["created"]`. */
+    events?: RealtimeEventType[];
+    /** Formats the badge text. Defaults to the count, capped at `99+`. */
+    badgeLabel?: (count: number) => string;
+}
+/** Props for {@link MenuLive}. */
+export interface MenuLiveProps {
+    items: MenuLiveItemLinkProps[];
+}
+/**
+ * A menu link with a badge counting the resource's new records. The count
+ * lives in the store, so it survives a remount; it clears while the link's
+ * route is active. Divergence from the React twin: the render props are slots.
+ * Declared as a render component so the file can also hold {@link MenuLive}.
+ */
+export declare const MenuLiveItemLink: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    to: {
+        type: StringConstructor;
+        required: true;
+    };
+    resource: {
+        type: StringConstructor;
+        required: true;
+    };
+    label: {
+        type: StringConstructor;
+        required: true;
+    };
+    icon: {
+        type: PropType<Component>;
+        default: undefined;
+    };
+    events: {
+        type: PropType<RealtimeEventType[]>;
+        default: () => string[];
+    };
+    badgeLabel: {
+        type: PropType<(count: number) => string>;
+        default: undefined;
+    };
+}>, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+    [key: string]: any;
+}>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    to: {
+        type: StringConstructor;
+        required: true;
+    };
+    resource: {
+        type: StringConstructor;
+        required: true;
+    };
+    label: {
+        type: StringConstructor;
+        required: true;
+    };
+    icon: {
+        type: PropType<Component>;
+        default: undefined;
+    };
+    events: {
+        type: PropType<RealtimeEventType[]>;
+        default: () => string[];
+    };
+    badgeLabel: {
+        type: PropType<(count: number) => string>;
+        default: undefined;
+    };
+}>> & Readonly<{}>, {
+    icon: Component;
+    events: RealtimeEventType[];
+    badgeLabel: (count: number) => string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: import("vue").DefineComponent<MenuLiveProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<MenuLiveProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

package/dist/components/admin/realtime/menu-live.vue.js

@@ -0,0 +1,131 @@
+import { defineComponent, openBlock, createElementBlock, Fragment, renderList, createBlock, unref, mergeProps, computed, shallowRef, watchEffect, h } from "vue";
+import { unreadKey, assertRealtimeDataProvider, clearUnread, subscribeUnreadCount } from "@chelone/core";
+import { RouterLink } from "vue-router";
+import { useCheloneContext, useCheloneStore } from "../../../context.js";
+import { useTranslate } from "../../../i18n/use-translate.js";
+import { Badge } from "../../ui/badge.js";
+import { useMatch } from "../../../router/nav-composables.js";
+const _hoisted_1 = { class: "flex flex-col gap-1" };
+const subscriptions = /* @__PURE__ */ new WeakMap();
+const toEventsKey = (events) => [...new Set(events)].sort().join(",");
+const fromEventsKey = (eventsKey) => eventsKey.split(",").filter(Boolean);
+function acquire(dataProvider, store, resource, eventsKey) {
+  let byProvider = subscriptions.get(store);
+  if (!byProvider) {
+    byProvider = /* @__PURE__ */ new WeakMap();
+    subscriptions.set(store, byProvider);
+  }
+  let shared = byProvider.get(dataProvider);
+  if (!shared) {
+    shared = /* @__PURE__ */ new Map();
+    byProvider.set(dataProvider, shared);
+  }
+  const subscriptionsForProvider = shared;
+  const key = `${resource}\0${eventsKey}`;
+  let entry = subscriptionsForProvider.get(key);
+  if (!entry) {
+    entry = {
+      holders: 0,
+      stop: subscribeUnreadCount({
+        dataProvider,
+        store,
+        resource,
+        events: fromEventsKey(eventsKey)
+      })
+    };
+    subscriptionsForProvider.set(key, entry);
+  }
+  entry.holders++;
+  const held = entry;
+  return () => {
+    if (--held.holders > 0) return;
+    held.stop();
+    subscriptionsForProvider.delete(key);
+  };
+}
+const MenuLiveItemLink = defineComponent({
+  name: "MenuLiveItemLink",
+  props: {
+    to: { type: String, required: true },
+    resource: { type: String, required: true },
+    label: { type: String, required: true },
+    icon: { type: [Object, Function], default: void 0 },
+    events: {
+      type: Array,
+      default: () => ["created"]
+    },
+    badgeLabel: {
+      type: Function,
+      default: void 0
+    }
+  },
+  setup(props, { slots }) {
+    const { dataProvider } = useCheloneContext();
+    const store = useCheloneStore();
+    const translate = useTranslate();
+    const match = useMatch({ path: props.to, end: false });
+    const eventsKey = computed(() => toEventsKey(props.events));
+    const events = computed(() => fromEventsKey(eventsKey.value));
+    const count = shallowRef(void 0);
+    watchEffect((onCleanup) => {
+      const key = unreadKey(props.resource, events.value);
+      const read = () => store.getItem(key) ?? 0;
+      count.value = read();
+      onCleanup(
+        store.subscribe(key, () => {
+          count.value = read();
+        })
+      );
+    });
+    watchEffect((onCleanup) => {
+      assertRealtimeDataProvider(dataProvider, "<MenuLiveItemLink>");
+      onCleanup(acquire(dataProvider, store, props.resource, eventsKey.value));
+    });
+    watchEffect(() => {
+      if (match.value && count.value)
+        clearUnread(store, props.resource, events.value);
+    });
+    return () => {
+      const n = count.value ?? 0;
+      const text = translate(props.label, { _: props.label });
+      return h(
+        RouterLink,
+        {
+          to: props.to,
+          class: "flex items-center gap-2 rounded-md px-2 py-1.5 text-sm hover:bg-accent"
+        },
+        () => [
+          props.icon ? h(props.icon) : null,
+          slots.icon?.(),
+          h("span", { class: "flex-1" }, text),
+          n > 0 ? h(
+            Badge,
+            { "data-testid": "menu-live-badge" },
+            () => props.badgeLabel?.(n) ?? (n > 99 ? "99+" : String(n))
+          ) : null
+        ]
+      );
+    };
+  }
+});
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "menu-live",
+  props: {
+    items: {}
+  },
+  setup(__props) {
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("nav", _hoisted_1, [
+        (openBlock(true), createElementBlock(Fragment, null, renderList(__props.items, (item) => {
+          return openBlock(), createBlock(unref(MenuLiveItemLink), mergeProps({
+            key: item.to
+          }, { ref_for: true }, item), null, 16);
+        }), 128))
+      ]);
+    };
+  }
+});
+export {
+  MenuLiveItemLink,
+  _sfc_main as default
+};

package/dist/components/admin/realtime/menu-live2.vue.js

@@ -0,0 +1,6 @@
+import _sfc_main from "./menu-live.vue.js";
+import { MenuLiveItemLink } from "./menu-live.vue.js";
+export {
+  MenuLiveItemLink,
+  _sfc_main as default
+};

package/dist/components/admin/realtime/presence-bar.vue.d.ts

@@ -0,0 +1,19 @@
+import type { PresenceUser } from "@chelone/core";
+/** Props for {@link PresenceBar}. Each defaults to the ambient context. */
+export interface PresenceBarProps {
+    /** Defaults to the topic of the ambient resource and record. */
+    topic?: string;
+    /** Defaults to the auth provider's identity. */
+    currentUser?: PresenceUser;
+    /** How many avatars show before the rest collapse into `+N`. Default 5. */
+    maxAvatars?: number;
+    /** How often the announce is republished. Default 15000. */
+    heartbeatMs?: number;
+    /** A user unheard for longer than this is dropped. Default 30000. */
+    staleMs?: number;
+    class?: string;
+}
+declare const _default: import("vue").DefineComponent<PresenceBarProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<PresenceBarProps> & Readonly<{}>, {
+    maxAvatars: number;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

package/dist/components/admin/realtime/presence-bar.vue.js

@@ -0,0 +1,77 @@
+import { defineComponent, computed, openBlock, createBlock, unref, normalizeClass, withCtx, createElementBlock, Fragment, renderList, createCommentVNode, createVNode, createTextVNode, toDisplayString } from "vue";
+import { getPresenceInitials } from "@chelone/core";
+import { useOptionalIdentity } from "../../../auth/auth-hooks.js";
+import { usePresence } from "../../../realtime/presence.js";
+import { AvatarGroup, Avatar, AvatarImage, AvatarFallback, AvatarGroupCount } from "../../ui/avatar.js";
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "presence-bar",
+  props: {
+    topic: {},
+    currentUser: {},
+    maxAvatars: { default: 5 },
+    heartbeatMs: {},
+    staleMs: {},
+    class: {}
+  },
+  setup(__props) {
+    const props = __props;
+    const { users } = usePresence({
+      topic: () => props.topic,
+      user: () => props.currentUser,
+      heartbeatMs: () => props.heartbeatMs,
+      staleMs: () => props.staleMs
+    });
+    const identity = useOptionalIdentity();
+    const selfId = computed(
+      () => props.currentUser?.id ?? (identity.identity.value ? String(identity.identity.value.id) : void 0)
+    );
+    const others = computed(
+      () => users.value.filter((user) => user.id !== selfId.value)
+    );
+    const shown = computed(() => others.value.slice(0, props.maxAvatars));
+    const hidden = computed(() => others.value.length - shown.value.length);
+    return (_ctx, _cache) => {
+      return others.value.length > 0 ? (openBlock(), createBlock(unref(AvatarGroup), {
+        key: 0,
+        "data-slot": "presence-bar",
+        class: normalizeClass(props.class)
+      }, {
+        default: withCtx(() => [
+          (openBlock(true), createElementBlock(Fragment, null, renderList(shown.value, (user) => {
+            return openBlock(), createBlock(unref(Avatar), {
+              key: user.id,
+              size: "sm",
+              "data-presence-user": "",
+              title: user.name
+            }, {
+              default: withCtx(() => [
+                user.avatar ? (openBlock(), createBlock(unref(AvatarImage), {
+                  key: 0,
+                  src: user.avatar,
+                  alt: user.name
+                }, null, 8, ["src", "alt"])) : createCommentVNode("", true),
+                createVNode(unref(AvatarFallback), null, {
+                  default: withCtx(() => [
+                    createTextVNode(toDisplayString(unref(getPresenceInitials)(user.name)), 1)
+                  ]),
+                  _: 2
+                }, 1024)
+              ]),
+              _: 2
+            }, 1032, ["title"]);
+          }), 128)),
+          hidden.value > 0 ? (openBlock(), createBlock(unref(AvatarGroupCount), { key: 0 }, {
+            default: withCtx(() => [
+              createTextVNode("+" + toDisplayString(hidden.value), 1)
+            ]),
+            _: 1
+          })) : createCommentVNode("", true)
+        ]),
+        _: 1
+      }, 8, ["class"])) : createCommentVNode("", true);
+    };
+  }
+});
+export {
+  _sfc_main as default
+};

package/dist/components/admin/realtime/presence-bar2.vue.js

@@ -0,0 +1,4 @@
+import _sfc_main from "./presence-bar.vue.js";
+export {
+  _sfc_main as default
+};