@nuxt/ui 3.3.3 → 4.0.0-alpha.1

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, {}, {}, {}, {}, 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, {}, {}, {}, {}, 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

@@ -17,7 +17,7 @@ import ULink from "./Link.vue";
 const props = defineProps({
   as: { type: null, required: false, default: "nav" },
   items: { type: Array, required: false },
-  separatorIcon: { type: String, required: false },
+  separatorIcon: { type: [String, Object], required: false },
   labelKey: { type: String, required: false, default: "label" },
   class: { type: null, required: false },
   ui: { type: null, required: false }

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

@@ -1,14 +1,15 @@
 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 { AvatarProps, IconProps, LinkProps } from '../types';
+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;
     /**
      * @IconifyIcon
      */
-    icon?: string;
+    icon?: IconProps['name'];
     avatar?: AvatarProps;
     slot?: string;
     class?: any;
@@ -27,7 +28,7 @@ export interface BreadcrumbProps<T extends BreadcrumbItem = BreadcrumbItem> {
      * @defaultValue appConfig.ui.icons.chevronRight
      * @IconifyIcon
      */
-    separatorIcon?: string;
+    separatorIcon?: IconProps['name'];
     /**
      * The key used to get the label from the item.
      * @defaultValue 'label'

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";
@@ -30,14 +30,14 @@ const props = defineProps({
   onClick: { type: [Function, Array], required: false },
   class: { type: null, required: false },
   ui: { type: null, required: false },
-  icon: { type: String, required: false },
+  icon: { type: [String, Object], required: false },
   avatar: { type: Object, required: false },
   leading: { type: Boolean, required: false },
-  leadingIcon: { type: String, required: false },
+  leadingIcon: { type: [String, Object], required: false },
   trailing: { type: Boolean, required: false },
-  trailingIcon: { type: String, required: false },
+  trailingIcon: { type: [String, Object], required: false },
   loading: { type: Boolean, required: false },
-  loadingIcon: { type: String, required: false },
+  loadingIcon: { type: [String, Object], required: false },
   as: { type: null, required: false },
   type: { type: null, required: false },
   disabled: { type: Boolean, required: false },
@@ -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

@@ -13,13 +13,13 @@ import { tv } from "../utils/tv";
 import UButton from "./Button.vue";
 const props = defineProps({
   as: { type: null, required: false },
-  nextYearIcon: { type: String, required: false },
+  nextYearIcon: { type: [String, Object], required: false },
   nextYear: { type: Object, required: false },
-  nextMonthIcon: { type: String, required: false },
+  nextMonthIcon: { type: [String, Object], required: false },
   nextMonth: { type: Object, required: false },
-  prevYearIcon: { type: String, required: false },
+  prevYearIcon: { type: [String, Object], required: false },
   prevYear: { type: Object, required: false },
-  prevMonthIcon: { type: String, required: false },
+  prevMonthIcon: { type: [String, Object], required: false },
   prevMonth: { type: Object, required: false },
   color: { type: null, required: false },
   size: { type: null, required: false },

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

@@ -2,8 +2,8 @@ import type { CalendarRootProps, CalendarRootEmits, RangeCalendarRootProps, Rang
 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 { ButtonProps, IconProps } from '../types';
+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);
@@ -20,7 +20,7 @@ export interface CalendarProps<R extends boolean = false, M extends boolean = fa
      * @defaultValue appConfig.ui.icons.chevronDoubleRight
      * @IconifyIcon
      */
-    nextYearIcon?: string;
+    nextYearIcon?: IconProps['name'];
     /**
      * Configure the next year button.
      * `{ color: 'neutral', variant: 'ghost' }`{lang="ts-type"}
@@ -31,7 +31,7 @@ export interface CalendarProps<R extends boolean = false, M extends boolean = fa
      * @defaultValue appConfig.ui.icons.chevronRight
      * @IconifyIcon
      */
-    nextMonthIcon?: string;
+    nextMonthIcon?: IconProps['name'];
     /**
      * Configure the next month button.
      * `{ color: 'neutral', variant: 'ghost' }`{lang="ts-type"}
@@ -42,7 +42,7 @@ export interface CalendarProps<R extends boolean = false, M extends boolean = fa
      * @defaultValue appConfig.ui.icons.chevronDoubleLeft
      * @IconifyIcon
      */
-    prevYearIcon?: string;
+    prevYearIcon?: IconProps['name'];
     /**
      * Configure the prev year button.
      * `{ color: 'neutral', variant: 'ghost' }`{lang="ts-type"}
@@ -53,7 +53,7 @@ export interface CalendarProps<R extends boolean = false, M extends boolean = fa
      * @defaultValue appConfig.ui.icons.chevronLeft
      * @IconifyIcon
      */
-    prevMonthIcon?: string;
+    prevMonthIcon?: IconProps['name'];
     /**
      * Configure the prev month button.
      * `{ color: 'neutral', variant: 'ghost' }`{lang="ts-type"}

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

@@ -14,9 +14,9 @@ import UButton from "./Button.vue";
 const props = defineProps({
   as: { type: null, required: false },
   prev: { type: Object, required: false },
-  prevIcon: { type: String, required: false },
+  prevIcon: { type: [String, Object], required: false },
   next: { type: Object, required: false },
-  nextIcon: { type: String, required: false },
+  nextIcon: { type: [String, Object], required: false },
   arrows: { type: Boolean, required: false, default: false },
   dots: { type: Boolean, required: false, default: false },
   orientation: { type: null, required: false, default: "horizontal" },

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

@@ -8,8 +8,8 @@ import type { ClassNamesOptionsType } from 'embla-carousel-class-names';
 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 { ButtonProps, IconProps } from '../types';
+import type { ComponentConfig } from '../types/tv';
 type Carousel = ComponentConfig<typeof theme, AppConfig, 'carousel'>;
 interface _CarouselItem {
     class?: any;
@@ -33,7 +33,7 @@ export interface CarouselProps<T extends CarouselItem = CarouselItem> extends Om
      * @defaultValue appConfig.ui.icons.arrowLeft
      * @IconifyIcon
      */
-    prevIcon?: string;
+    prevIcon?: IconProps['name'];
     /**
      * Configure the next button when arrows are enabled.
      * @defaultValue { size: 'md', color: 'neutral', variant: 'link' }
@@ -44,7 +44,7 @@ export interface CarouselProps<T extends CarouselItem = CarouselItem> extends Om
      * @defaultValue appConfig.ui.icons.arrowRight
      * @IconifyIcon
      */
-    nextIcon?: string;
+    nextIcon?: IconProps['name'];
     /**
      * Display prev and next buttons to scroll the carousel.
      * @defaultValue false

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>