@nuxt/ui 3.3.1 → 4.0.0-alpha.0

package/dist/runtime/components/BlogPost.vue

@@ -0,0 +1,145 @@
+<script>
+import theme from "#build/ui/blog-post";
+</script>
+
+<script setup>
+import { computed } from "vue";
+import { Primitive, useDateFormatter } from "reka-ui";
+import ImageComponent from "#build/ui-image-component";
+import { useLocale, useAppConfig } from "#imports";
+import { getSlotChildrenText } from "../utils";
+import { tv } from "../utils/tv";
+import ULink from "./Link.vue";
+import UBadge from "./Badge.vue";
+import UAvatar from "./Avatar.vue";
+import UAvatarGroup from "./AvatarGroup.vue";
+import UUser from "./User.vue";
+defineOptions({ inheritAttrs: false });
+const props = defineProps({
+  as: { type: null, required: false, default: "article" },
+  title: { type: String, required: false },
+  description: { type: String, required: false },
+  date: { type: [String, Date], required: false },
+  badge: { type: [String, Object], required: false },
+  authors: { type: Array, required: false },
+  image: { type: [String, Object], required: false },
+  orientation: { type: null, required: false, default: "vertical" },
+  variant: { type: null, required: false },
+  to: { type: null, required: false },
+  target: { type: [String, Object, null], required: false },
+  onClick: { type: Function, required: false },
+  class: { type: null, required: false },
+  ui: { type: null, required: false }
+});
+const slots = defineSlots();
+const { locale } = useLocale();
+const appConfig = useAppConfig();
+const formatter = useDateFormatter(locale.value.code);
+const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.blogPost || {} })({
+  orientation: props.orientation,
+  variant: props.variant,
+  image: !!props.image,
+  to: !!props.to || !!props.onClick
+}));
+const date = computed(() => {
+  if (!props.date) {
+    return;
+  }
+  try {
+    return formatter.custom(new Date(props.date), { dateStyle: "medium" });
+  } catch {
+    return props.date;
+  }
+});
+const datetime = computed(() => {
+  if (!props.date) {
+    return;
+  }
+  try {
+    return new Date(props.date)?.toISOString();
+  } catch {
+    return void 0;
+  }
+});
+const ariaLabel = computed(() => {
+  const slotText = slots.title && getSlotChildrenText(slots.title());
+  return (slotText || props.title || "Post link").trim();
+});
+</script>
+
+<template>
+  <Primitive :as="as" :data-orientation="orientation" :class="ui.root({ class: [props.ui?.root, props.class] })" @click="onClick">
+    <div v-if="image || !!slots.header" :class="ui.header({ class: props.ui?.header })">
+      <slot name="header">
+        <component
+          :is="ImageComponent"
+          v-bind="typeof image === 'string' ? { src: image, alt: title } : { alt: title, ...image }"
+          :class="ui.image({ class: props.ui?.image, to: !!to })"
+        />
+      </slot>
+    </div>
+
+    <div :class="ui.body({ class: props.ui?.body })">
+      <ULink
+        v-if="to"
+        :aria-label="ariaLabel"
+        v-bind="{ to, target, ...$attrs }"
+        class="focus:outline-none peer"
+        tabindex="-1"
+        raw
+      >
+        <span class="absolute inset-0" aria-hidden="true" />
+      </ULink>
+
+      <slot name="body">
+        <div v-if="date || !!slots.date || (badge || !!slots.badge)" :class="ui.meta({ class: props.ui?.meta })">
+          <slot name="badge">
+            <UBadge v-if="badge" color="neutral" variant="subtle" v-bind="typeof badge === 'string' ? { label: badge } : badge" :class="ui.badge({ class: props.ui?.badge })" />
+          </slot>
+
+          <time v-if="date || !!slots.date" :datetime="datetime" :class="ui.date({ class: props.ui?.date })">
+            <slot name="date">
+              {{ date }}
+            </slot>
+          </time>
+        </div>
+
+        <h2 v-if="title || !!slots.title" :class="ui.title({ class: props.ui?.title })">
+          <slot name="title">
+            {{ title }}
+          </slot>
+        </h2>
+
+        <div v-if="description || !!slots.description" :class="ui.description({ class: props.ui?.description })">
+          <slot name="description">
+            {{ description }}
+          </slot>
+        </div>
+
+        <div v-if="authors?.length || !!slots.authors" :class="ui.authors({ class: props.ui?.authors })">
+          <slot name="authors">
+            <template v-if="authors?.length">
+              <UAvatarGroup v-if="authors.length > 1">
+                <ULink
+                  v-for="(author, index) in authors"
+                  :key="index"
+                  :to="author.to"
+                  :target="author.target"
+                  :class="ui.avatar({ class: props.ui?.avatar, to: !!author.to })"
+                  raw
+                >
+                  <UAvatar v-bind="author.avatar" />
+                </ULink>
+              </UAvatarGroup>
+              <UUser v-else v-bind="authors[0]" />
+            </template>
+          </slot>
+        </div>
+      </slot>
+    </div>
+
+    <div v-if="!!slots.footer" :class="ui.footer({ class: props.ui?.footer })">
+      <slot name="footer" />
+    </div>
+  </Primitive>
+</template>

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

@@ -0,0 +1,60 @@
+import type { AppConfig } from '@nuxt/schema';
+import theme from '#build/ui/blog-post';
+import type { BadgeProps, LinkProps, UserProps } from '../types';
+import type { ComponentConfig } from '../types/tv';
+type BlogPost = ComponentConfig<typeof theme, AppConfig, 'blogPost'>;
+export interface BlogPostProps {
+    /**
+     * The element or component this component should render as.
+     * @defaultValue 'article'
+     */
+    as?: any;
+    title?: string;
+    description?: string;
+    /** The date of the blog post. Can be a string or a Date object. */
+    date?: string | Date;
+    /**
+     * Display a badge on the blog post.
+     * Can be a string or an object.
+     * `{ color: 'neutral', variant: 'subtle' }`{lang="ts-type"}
+     */
+    badge?: string | BadgeProps;
+    /** The authors of the blog post. */
+    authors?: UserProps[];
+    /** The image of the blog post. Can be a string or an object. */
+    image?: string | Partial<HTMLImageElement>;
+    /**
+     * The orientation of the blog post.
+     * @defaultValue 'vertical'
+     */
+    orientation?: BlogPost['variants']['orientation'];
+    /**
+     * @defaultValue 'outline'
+     */
+    variant?: BlogPost['variants']['variant'];
+    to?: LinkProps['to'];
+    target?: LinkProps['target'];
+    onClick?: (event: MouseEvent) => void | Promise<void>;
+    class?: any;
+    ui?: BlogPost['slots'];
+}
+export interface BlogPostSlots {
+    date(props?: {}): any;
+    badge(props?: {}): any;
+    title(props?: {}): any;
+    description(props?: {}): any;
+    authors(props?: {}): any;
+    header(props?: {}): any;
+    body(props?: {}): any;
+    footer(props?: {}): any;
+}
+declare const _default: __VLS_WithSlots<import("vue").DefineComponent<BlogPostProps, void, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<BlogPostProps> & Readonly<{}>, {
+    as: any;
+    orientation: BlogPost["variants"]["orientation"];
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, BlogPostSlots>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/BlogPosts.vue

@@ -0,0 +1,33 @@
+<script>
+import theme from "#build/ui/blog-posts";
+</script>
+
+<script setup>
+import { computed } from "vue";
+import { Primitive } from "reka-ui";
+import { useAppConfig } from "#imports";
+import { tv } from "../utils/tv";
+import UBlogPost from "./BlogPost.vue";
+const props = defineProps({
+  as: { type: null, required: false },
+  posts: { type: Array, required: false },
+  orientation: { type: null, required: false, default: "horizontal" },
+  class: { type: null, required: false }
+});
+defineSlots();
+const appConfig = useAppConfig();
+const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.blogPosts || {} }));
+</script>
+
+<template>
+  <Primitive :as="as" :data-orientation="orientation" :class="ui({ orientation, class: props.class })">
+    <slot>
+      <UBlogPost
+        v-for="(post, index) in posts"
+        :key="index"
+        :orientation="orientation === 'vertical' ? 'horizontal' : 'vertical'"
+        v-bind="post"
+      />
+    </slot>
+  </Primitive>
+</template>

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

@@ -0,0 +1,31 @@
+import type { AppConfig } from '@nuxt/schema';
+import theme from '#build/ui/blog-posts';
+import type { BlogPostProps } from '../types';
+import type { ComponentConfig } from '../types/tv';
+type BlogPosts = ComponentConfig<typeof theme, AppConfig, 'blogPosts'>;
+export interface BlogPostsProps {
+    /**
+     * The element or component this component should render as.
+     * @defaultValue 'div'
+     */
+    as?: any;
+    posts?: BlogPostProps[];
+    /**
+     * The orientation of the blog posts.
+     * @defaultValue 'horizontal'
+     */
+    orientation?: BlogPosts['variants']['orientation'];
+    class?: any;
+}
+export interface BlogPostsSlots {
+    default(props?: {}): any;
+}
+declare const _default: __VLS_WithSlots<import("vue").DefineComponent<BlogPostsProps, void, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<BlogPostsProps> & Readonly<{}>, {
+    orientation: BlogPosts["variants"]["orientation"];
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, BlogPostsSlots>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

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

@@ -1,7 +1,8 @@
 import type { AppConfig } from '@nuxt/schema';
 import theme from '#build/ui/breadcrumb';
 import type { AvatarProps, LinkProps } from '../types';
-import type { DynamicSlots, ComponentConfig } from '../types/utils';
+import type { DynamicSlots } from '../types/utils';
+import type { ComponentConfig } from '../types/tv';
 type Breadcrumb = ComponentConfig<typeof theme, AppConfig, 'breadcrumb'>;
 export interface BreadcrumbItem extends Omit<LinkProps, 'raw' | 'custom'> {
     label?: string;

package/dist/runtime/components/Button.vue

@@ -8,7 +8,7 @@ import { defu } from "defu";
 import { useForwardProps } from "reka-ui";
 import { useAppConfig } from "#imports";
 import { useComponentIcons } from "../composables/useComponentIcons";
-import { useButtonGroup } from "../composables/useButtonGroup";
+import { useFieldGroup } from "../composables/useFieldGroup";
 import { formLoadingInjectionKey } from "../composables/useFormField";
 import { omit, mergeClasses } from "../utils";
 import { tv } from "../utils/tv";
@@ -64,7 +64,7 @@ const props = defineProps({
 });
 const slots = defineSlots();
 const appConfig = useAppConfig();
-const { orientation, size: buttonSize } = useButtonGroup(props);
+const { orientation, size: buttonSize } = useFieldGroup(props);
 const linkProps = useForwardProps(pickLinkProps(props));
 const loadingAutoState = ref(false);
 const formLoading = inject(formLoadingInjectionKey, void 0);
@@ -106,7 +106,7 @@ const ui = computed(() => tv({
   square: props.square || !slots.default && !props.label,
   leading: isLeading.value,
   trailing: isTrailing.value,
-  buttonGroup: orientation.value
+  fieldGroup: orientation.value
 }));
 </script>
 

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

@@ -2,7 +2,7 @@ import type { AppConfig } from '@nuxt/schema';
 import theme from '#build/ui/button';
 import type { UseComponentIconsProps } from '../composables/useComponentIcons';
 import type { LinkProps } from '../types';
-import type { ComponentConfig } from '../types/utils';
+import type { ComponentConfig } from '../types/tv';
 type Button = ComponentConfig<typeof theme, AppConfig, 'button'>;
 export interface ButtonProps extends UseComponentIconsProps, Omit<LinkProps, 'raw' | 'custom'> {
     label?: string;

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

@@ -3,7 +3,7 @@ import type { DateValue } from '@internationalized/date';
 import type { AppConfig } from '@nuxt/schema';
 import theme from '#build/ui/calendar';
 import type { ButtonProps } from '../types';
-import type { ComponentConfig } from '../types/utils';
+import type { ComponentConfig } from '../types/tv';
 type Calendar = ComponentConfig<typeof theme, AppConfig, 'calendar'>;
 type CalendarDefaultValue<R extends boolean = false, M extends boolean = false> = R extends true ? DateRange : M extends true ? DateValue[] : DateValue;
 type CalendarModelValue<R extends boolean = false, M extends boolean = false> = R extends true ? (DateRange | null) : M extends true ? (DateValue[] | undefined) : (DateValue | undefined);

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

@@ -1,6 +1,6 @@
 import type { AppConfig } from '@nuxt/schema';
 import theme from '#build/ui/card';
-import type { ComponentConfig } from '../types/utils';
+import type { ComponentConfig } from '../types/tv';
 type Card = ComponentConfig<typeof theme, AppConfig, 'card'>;
 export interface CardProps {
     /**

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

@@ -9,7 +9,7 @@ import type { FadeOptionsType } from 'embla-carousel-fade';
 import type { WheelGesturesPluginOptions } from 'embla-carousel-wheel-gestures';
 import theme from '#build/ui/carousel';
 import type { ButtonProps } from '../types';
-import type { ComponentConfig } from '../types/utils';
+import type { ComponentConfig } from '../types/tv';
 type Carousel = ComponentConfig<typeof theme, AppConfig, 'carousel'>;
 interface _CarouselItem {
     class?: any;

package/dist/runtime/components/ChangelogVersion.vue

@@ -0,0 +1,166 @@
+<script>
+import theme from "#build/ui/changelog-version";
+</script>
+
+<script setup>
+import { computed } from "vue";
+import { Primitive, useDateFormatter } from "reka-ui";
+import { createReusableTemplate } from "@vueuse/core";
+import ImageComponent from "#build/ui-image-component";
+import { useLocale, useAppConfig } from "#imports";
+import { getSlotChildrenText } from "../utils";
+import { tv } from "../utils/tv";
+import ULink from "./Link.vue";
+import UBadge from "./Badge.vue";
+import UUser from "./User.vue";
+defineOptions({ inheritAttrs: false });
+const props = defineProps({
+  as: { type: null, required: false, default: "article" },
+  title: { type: String, required: false },
+  description: { type: String, required: false },
+  date: { type: [String, Date], required: false },
+  badge: { type: [String, Object], required: false },
+  authors: { type: Array, required: false },
+  image: { type: [String, Object], required: false },
+  indicator: { type: Boolean, required: false, default: true },
+  to: { type: null, required: false },
+  target: { type: [String, Object, null], required: false },
+  onClick: { type: Function, required: false },
+  class: { type: null, required: false },
+  ui: { type: null, required: false }
+});
+const slots = defineSlots();
+const { locale } = useLocale();
+const appConfig = useAppConfig();
+const formatter = useDateFormatter(locale.value.code);
+const [DefineLinkTemplate, ReuseLinkTemplate] = createReusableTemplate();
+const [DefineDateTemplate, ReuseDateTemplate] = createReusableTemplate({
+  props: {
+    hidden: {
+      type: Boolean,
+      default: false
+    }
+  }
+});
+const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.changelogVersion || {} })({
+  to: !!props.to || !!props.onClick
+}));
+const date = computed(() => {
+  if (!props.date) {
+    return;
+  }
+  try {
+    return formatter.custom(new Date(props.date), { dateStyle: "medium" });
+  } catch {
+    return props.date;
+  }
+});
+const datetime = computed(() => {
+  if (!props.date) {
+    return;
+  }
+  try {
+    return new Date(props.date)?.toISOString();
+  } catch {
+    return void 0;
+  }
+});
+const ariaLabel = computed(() => {
+  const slotText = slots.title && getSlotChildrenText(slots.title());
+  return (slotText || props.title || "Version link").trim();
+});
+</script>
+
+<template>
+  <DefineLinkTemplate>
+    <ULink
+      v-if="to"
+      :aria-label="ariaLabel"
+      v-bind="{ to, target, ...$attrs }"
+      class="focus:outline-none peer"
+      tabindex="-1"
+      raw
+    >
+      <span class="absolute inset-0" aria-hidden="true" />
+    </ULink>
+  </DefineLinkTemplate>
+
+  <DefineDateTemplate v-slot="{ hidden }">
+    <time v-if="date" :datetime="datetime" :class="ui.date({ class: props.ui?.date, hidden })">
+      <slot name="date">
+        {{ date }}
+      </slot>
+    </time>
+  </DefineDateTemplate>
+
+  <Primitive :as="as" :class="ui.root({ class: [props.ui?.root, props.class] })" @click="onClick">
+    <div v-if="!!props.indicator || !!slots.indicator" :class="ui.indicator({ class: props.ui?.indicator })">
+      <slot name="indicator">
+        <ReuseDateTemplate />
+
+        <div :class="ui.dot({ class: props.ui?.dot })">
+          <div :class="ui.dotInner({ class: props.ui?.dotInner })" />
+        </div>
+      </slot>
+    </div>
+
+    <div :class="ui.container({ class: props.ui?.container })">
+      <div v-if="!!slots.header || (date || !!slots.date) || (badge || !!slots.badge) || (title || !!slots.title) || (description || !!slots.description) || (image || !!slots.image)" :class="ui.header({ class: props.ui?.header })">
+        <slot name="header">
+          <div v-if="date || !!slots.date || (badge || !!slots.badge)" :class="ui.meta({ class: props.ui?.meta, badge: !!badge || !!slots.badge || !props.indicator })">
+            <slot name="badge">
+              <UBadge v-if="badge" color="neutral" variant="solid" v-bind="typeof badge === 'string' ? { label: badge } : badge" :class="ui.badge({ class: props.ui?.badge })" />
+            </slot>
+
+            <ReuseDateTemplate :hidden="!!props.indicator" />
+          </div>
+
+          <h2 v-if="title || !!slots.title" :class="ui.title({ class: props.ui?.title })">
+            <ReuseLinkTemplate />
+
+            <slot name="title">
+              {{ title }}
+            </slot>
+          </h2>
+
+          <div v-if="description || !!slots.description" :class="ui.description({ class: props.ui?.description })">
+            <slot name="description">
+              {{ description }}
+            </slot>
+          </div>
+
+          <div v-if="image || !!slots.image" :class="ui.imageWrapper({ class: props.ui?.imageWrapper })">
+            <slot name="image">
+              <component
+                :is="ImageComponent"
+                v-if="image"
+                v-bind="typeof image === 'string' ? { src: image, alt: title } : { alt: title, ...image }"
+                :class="ui.image({ class: props.ui?.image, to: !!to })"
+              />
+            </slot>
+
+            <ReuseLinkTemplate />
+          </div>
+        </slot>
+      </div>
+
+      <slot name="body" />
+
+      <div v-if="!!slots.footer || (authors?.length || !!slots.authors) || !!slots.actions" :class="ui.footer({ class: props.ui?.footer, body: !!slots.body })">
+        <slot name="footer">
+          <div v-if="authors?.length || !!slots.authors" :class="ui.authors({ class: props.ui?.authors })">
+            <slot name="authors">
+              <UUser
+                v-for="(author, index) in authors"
+                :key="index"
+                v-bind="author"
+              />
+            </slot>
+          </div>
+
+          <slot name="actions" />
+        </slot>
+      </div>
+    </div>
+  </Primitive>
+</template>

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

@@ -0,0 +1,59 @@
+import type { AppConfig } from '@nuxt/schema';
+import theme from '#build/ui/changelog-version';
+import type { BadgeProps, LinkProps, UserProps } from '../types';
+import type { ComponentConfig } from '../types/tv';
+type ChangelogVersion = ComponentConfig<typeof theme, AppConfig, 'changelogVersion'>;
+export interface ChangelogVersionProps {
+    /**
+     * The element or component this component should render as.
+     * @defaultValue 'article'
+     */
+    as?: any;
+    title?: string;
+    description?: string;
+    /** The date of the changelog version. Can be a string or a Date object. */
+    date?: string | Date;
+    /**
+     * Display a badge on the changelog version.
+     * Can be a string or an object.
+     * `{ color: 'neutral', variant: 'solid' }`{lang="ts-type"}
+     */
+    badge?: string | BadgeProps;
+    /** The authors of the changelog version. */
+    authors?: UserProps[];
+    /** The image of the changelog version. Can be a string or an object. */
+    image?: string | Partial<HTMLImageElement>;
+    /**
+     * Display an indicator dot on the left.
+     * @defaultValue true
+     */
+    indicator?: boolean;
+    to?: LinkProps['to'];
+    target?: LinkProps['target'];
+    onClick?: (event: MouseEvent) => void | Promise<void>;
+    class?: any;
+    ui?: ChangelogVersion['slots'];
+}
+export interface ChangelogVersionSlots {
+    header(props?: {}): any;
+    badge(props?: {}): any;
+    date(props?: {}): any;
+    title(props?: {}): any;
+    description(props?: {}): any;
+    image(props?: {}): any;
+    body(props?: {}): any;
+    footer(props?: {}): any;
+    authors(props?: {}): any;
+    actions(props?: {}): any;
+    indicator(props?: {}): any;
+}
+declare const _default: __VLS_WithSlots<import("vue").DefineComponent<ChangelogVersionProps, void, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ChangelogVersionProps> & Readonly<{}>, {
+    as: any;
+    indicator: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, ChangelogVersionSlots>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/ChangelogVersions.vue

@@ -0,0 +1,55 @@
+<script>
+import theme from "#build/ui/changelog-versions";
+</script>
+
+<script setup>
+import { computed } from "vue";
+import { Primitive } from "reka-ui";
+import { Motion, useScroll, useSpring, useTransform } from "motion-v";
+import { defu } from "defu";
+import { useAppConfig } from "#imports";
+import { omit } from "../utils";
+import { tv } from "../utils/tv";
+import UChangelogVersion from "./ChangelogVersion.vue";
+const props = defineProps({
+  as: { type: null, required: false },
+  versions: { type: Array, required: false },
+  indicator: { type: Boolean, required: false, default: true },
+  indicatorMotion: { type: [Boolean, Object], required: false, default: true },
+  class: { type: null, required: false },
+  ui: { type: null, required: false }
+});
+const slots = defineSlots();
+const proxySlots = omit(slots, ["default", "indicator"]);
+const appConfig = useAppConfig();
+const springOptions = computed(() => defu(typeof props.indicatorMotion === "object" ? props.indicatorMotion : {}, { damping: 30, restDelta: 1e-3 }));
+const { scrollYProgress } = useScroll();
+const y = useSpring(scrollYProgress, springOptions);
+const height = useTransform(() => `${y.get() * 100}%`);
+const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.changelogVersions || {} })());
+</script>
+
+<template>
+  <Primitive :as="as" :class="ui.root({ class: [props.ui?.root, props.class] })">
+    <div v-if="!!props.indicator || !!slots.indicator" :class="ui.indicator({ class: props.ui?.indicator })">
+      <slot name="indicator">
+        <Motion v-if="!!props.indicatorMotion" :class="ui.beam({ class: props.ui?.beam })" :style="{ height }" />
+      </slot>
+    </div>
+
+    <div v-if="versions?.length || !!slots.default" :class="ui.container({ class: props.ui?.container })">
+      <slot>
+        <UChangelogVersion
+          v-for="(version, index) in versions"
+          :key="index"
+          :indicator="!!props.indicator"
+          v-bind="version"
+        >
+          <template v-for="(_, name) in proxySlots" #[name]>
+            <slot :name="name" v-bind="{ version }" />
+          </template>
+        </UChangelogVersion>
+      </slot>
+    </div>
+  </Primitive>
+</template>