@eslamdevui/ui 3.2.0 → 3.2.1

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

@@ -0,0 +1,98 @@
+import theme from '#build/ui/pricing-table';
+import type { AppConfig } from '@nuxt/schema';
+import type { ComponentConfig, PricingPlanProps } from '../types';
+type PricingTable = ComponentConfig<typeof theme, AppConfig, 'pricingTable'>;
+type DynamicSlots<T extends {
+    id: string;
+}, S extends string | undefined = undefined> = {
+    [K in T['id'] as K extends string ? S extends string ? (K | `${K}-${S}`) : K : never]?: (props: {
+        tier: Extract<T, {
+            id: K extends `${infer Base}-${S}` ? Base : K;
+        }>;
+    }) => any;
+};
+type FeatureDynamicSlots<T extends PricingTableSectionFeature, S extends string | undefined = undefined> = {
+    [K in (T['id'] extends string ? T['id'] : string) as K extends string ? S extends string ? (`feature-${K}` | `feature-${K}-${S}`) : `feature-${K}` : never]?: (props: {
+        feature: T;
+        tier: PricingTableTier;
+        section: PricingTableSection;
+    }) => any;
+};
+type SectionDynamicSlots<T extends PricingTableSection, S extends string | undefined = undefined> = {
+    [K in (T['id'] extends string ? T['id'] : string) as K extends string ? S extends string ? (`section-${K}` | `section-${K}-${S}`) : `section-${K}` : never]?: (props: {
+        section: T;
+    }) => any;
+};
+export type PricingTableTier = Pick<PricingPlanProps, 'title' | 'description' | 'badge' | 'billingCycle' | 'billingPeriod' | 'price' | 'discount' | 'button' | 'highlight'> & {
+    id: string;
+    [key: string]: any;
+};
+export type PricingTableSectionFeature<T extends PricingTableTier = PricingTableTier> = {
+    id?: string;
+    title: string;
+    tiers?: {
+        [K in Extract<T['id'], string>]: boolean | number | string;
+    } & Record<string, boolean | number | string>;
+};
+export interface PricingTableSection<T extends PricingTableTier = PricingTableTier> {
+    id?: string;
+    title: string;
+    features: PricingTableSectionFeature<T>[];
+}
+export interface PricingTableProps<T extends PricingTableTier = PricingTableTier> {
+    /**
+     * The element or component this component should render as.
+     * @defaultValue 'div'
+     */
+    as?: any;
+    /**
+     * The caption to display above the table.
+     * @defeaultValue t('pricingTable.caption')
+     */
+    caption?: string;
+    /**
+     * The pricing tiers to display in the table.
+     * Each tier represents a pricing plan with its own title, description, price, and features.
+     */
+    tiers: T[];
+    /**
+     * The sections of features to display in the table.
+     * Each section contains a title and a list of features with their availability in each tier.
+     */
+    sections: PricingTableSection<T>[];
+    class?: any;
+    ui?: PricingTable['slots'];
+}
+type SlotProps<T extends PricingTableTier> = (props: {
+    tier: T;
+}) => any;
+export type PricingTableSlots<T extends PricingTableTier = PricingTableTier> = {
+    'caption': (props?: {}) => any;
+    'tier': SlotProps<T>;
+    'tier-title': SlotProps<T>;
+    'tier-description': SlotProps<T>;
+    'tier-badge': SlotProps<T>;
+    'tier-button': SlotProps<T>;
+    'tier-billing': SlotProps<T>;
+    'tier-discount': SlotProps<T>;
+    'tier-price': SlotProps<T>;
+    'section-title': (props: {
+        section: PricingTableSection<T>;
+    }) => any;
+    'feature-title': (props: {
+        feature: PricingTableSectionFeature<T>;
+        section: PricingTableSection<T>;
+    }) => any;
+    'feature-value': (props: {
+        feature: PricingTableSectionFeature<T>;
+        tier: T;
+        section: PricingTableSection<T>;
+    }) => any;
+} & DynamicSlots<T, 'title' | 'description' | 'badge' | 'button' | 'billing' | 'discount' | 'price'> & FeatureDynamicSlots<PricingTableSectionFeature<T>, 'title' | 'value'> & SectionDynamicSlots<PricingTableSection<T>, 'title'>;
+declare const _default: __VLS_WithSlots<import("vue").DefineComponent<PricingTableProps<PricingTableTier>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<PricingTableProps<PricingTableTier>> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, PricingTableSlots<PricingTableTier>>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

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

@@ -175,11 +175,11 @@ declare const _default: <T extends ArrayOrNested<SelectMenuItem>, VK extends Get
         readonly onFocus?: ((payload: FocusEvent) => any) | undefined;
         readonly onCreate?: ((item: string) => any) | undefined;
         readonly "onUpdate:open"?: ((value: boolean) => any) | undefined;
-        readonly "onUpdate:modelValue"?: ((payload: GetModelValue<T, VK, M>) => any) | undefined;
         readonly onHighlight?: ((payload: {
             ref: HTMLElement;
             value: GetModelValue<T, VK, M>;
         } | undefined) => any) | undefined;
+        readonly "onUpdate:modelValue"?: ((payload: GetModelValue<T, VK, M>) => any) | undefined;
         readonly "onUpdate:searchTerm"?: ((value: string) => any) | undefined;
     } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, never>, "onFocus" | "onBlur" | "onChange" | "onUpdate:open" | "onUpdate:modelValue" | "onHighlight" | "onUpdate:searchTerm" | "onCreate"> & (SelectMenuProps<T, VK, M> & {
         searchTerm?: string;
@@ -289,10 +289,10 @@ declare const _default: <T extends ArrayOrNested<SelectMenuItem>, VK extends Get
     }>): void;
     attrs: any;
     slots: SelectMenuSlots<T, VK, M, NestedItem<T>>;
-    emit: (((evt: "blur", payload: FocusEvent) => void) & ((evt: "change", payload: Event) => void) & ((evt: "focus", payload: FocusEvent) => void) & ((evt: "create", item: string) => void) & ((evt: "update:open", value: boolean) => void) & ((evt: "update:modelValue", payload: GetModelValue<T, VK, M>) => void) & ((evt: "highlight", payload: {
+    emit: (((evt: "blur", payload: FocusEvent) => void) & ((evt: "change", payload: Event) => void) & ((evt: "focus", payload: FocusEvent) => void) & ((evt: "create", item: string) => void) & ((evt: "update:open", value: boolean) => void) & ((evt: "highlight", payload: {
         ref: HTMLElement;
         value: GetModelValue<T, VK, M>;
-    } | undefined) => void)) & ((evt: "update:searchTerm", value: string) => void);
+    } | undefined) => void) & ((evt: "update:modelValue", payload: GetModelValue<T, VK, M>) => void)) & ((evt: "update:searchTerm", value: string) => void);
 }>) => import("vue").VNode & {
     __ctx?: Awaited<typeof __VLS_setup>;
 };

package/dist/runtime/components/Tabs.vue

@@ -54,6 +54,7 @@ defineExpose({
         v-for="(item, index) of items"
         :key="index"
         :ref="(el) => triggersRef[index] = el"
+        `
         :value="item.value || String(index)"
         :disabled="item.disabled"
         :class="ui.trigger({ class: [props.ui?.trigger, item.ui?.trigger] })"

package/dist/runtime/components/User.vue

@@ -0,0 +1,69 @@
+<script>
+import theme from "#build/ui/user";
+</script>
+
+<script setup>
+import { computed } from "vue";
+import { Primitive } from "reka-ui";
+import { useAppConfig } from "#imports";
+import { tv } from "../utils/tv";
+defineOptions({ inheritAttrs: false });
+const props = defineProps({
+  as: { type: null, required: false },
+  name: { type: String, required: false },
+  description: { type: String, required: false },
+  avatar: { type: Object, required: false },
+  chip: { type: [Boolean, Object], required: false },
+  size: { type: null, required: false },
+  orientation: { type: null, required: false, default: "horizontal" },
+  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 appConfig = useAppConfig();
+const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.user || {} })({
+  size: props.size,
+  orientation: props.orientation,
+  to: !!props.to || !!props.onClick
+}));
+</script>
+
+<template>
+  <Primitive :as="as" :data-orientation="orientation" :class="ui.root({ class: [props.ui?.root, props.class] })" @click="onClick">
+    <slot name="avatar">
+      <UChip v-if="chip && avatar" inset v-bind="typeof chip === 'object' ? chip : {}" :size="size">
+        <UAvatar :alt="name" v-bind="avatar" :size="size" :class="ui.avatar({ class: props.ui?.avatar })" />
+      </UChip>
+      <UAvatar v-else-if="avatar" :alt="name" v-bind="avatar" :size="size" :class="ui.avatar({ class: props.ui?.avatar })" />
+    </slot>
+
+    <div :class="ui.wrapper({ class: props.ui?.wrapper })">
+      <ULink
+        v-if="to"
+        :aria-label="name"
+        v-bind="{ to, target, ...$attrs }"
+        class="focus:outline-none peer"
+        tabindex="-1"
+        raw
+      >
+        <span class="absolute inset-0" aria-hidden="true" />
+      </ULink>
+
+      <slot>
+        <p v-if="name || !!slots.name" :class="ui.name({ class: props.ui?.name })">
+          <slot name="name">
+            {{ name }}
+          </slot>
+        </p>
+        <p v-if="description || !!slots.description" :class="ui.description({ class: props.ui?.description })">
+          <slot name="description">
+            {{ description }}
+          </slot>
+        </p>
+      </slot>
+    </div>
+  </Primitive>
+</template>

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

@@ -0,0 +1,46 @@
+import theme from '#build/ui/user';
+import type { AppConfig } from '@nuxt/schema';
+import type { AvatarProps, ChipProps, LinkProps, ComponentConfig } from '../types';
+type User = ComponentConfig<typeof theme, AppConfig, 'user'>;
+export interface UserProps {
+    /**
+     * The element or component this component should render as.
+     * @defaultValue 'div'
+     */
+    as?: any;
+    name?: string;
+    description?: string;
+    avatar?: Omit<AvatarProps, 'size'> & {
+        [key: string]: any;
+    };
+    chip?: boolean | Omit<ChipProps, 'size' | 'inset'>;
+    /**
+     * @defaultValue 'md'
+     */
+    size?: User['variants']['size'];
+    /**
+     * The orientation of the user.
+     * @defaultValue 'horizontal'
+     */
+    orientation?: User['variants']['orientation'];
+    to?: LinkProps['to'];
+    target?: LinkProps['target'];
+    onClick?: (event: MouseEvent) => void | Promise<void>;
+    class?: any;
+    ui?: User['slots'];
+}
+export interface UserSlots {
+    avatar(props?: {}): any;
+    name(props?: {}): any;
+    description(props?: {}): any;
+    default(props?: {}): any;
+}
+declare const _default: __VLS_WithSlots<import("vue").DefineComponent<UserProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<UserProps> & Readonly<{}>, {
+    orientation: User["variants"]["orientation"];
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, UserSlots>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/content/ContentSearchButton.vue.d.ts

@@ -1,12 +1,58 @@
-declare const _default: __VLS_WithSlots<import('vue').DefineComponent<ContentSearchButtonProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<ContentSearchButtonProps> & Readonly<{}>, {
-  color: 'error' | 'info' | 'primary' | 'secondary' | 'success' | 'warning' | 'neutral'
-  collapsed: boolean
-  tooltip: boolean | TooltipProps
-  kbds: KbdProps['value'][] | KbdProps[]
-}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>, ButtonSlots>
-export default _default
-type __VLS_WithSlots<T, S> = T & {
-  new (): {
-    $slots: S
-  }
+import theme from '#build/ui/content/content-search-button';
+import type { AppConfig } from '@nuxt/schema';
+import type { ButtonProps, ButtonSlots, KbdProps, ComponentConfig, TooltipProps } from '../../types';
+type ContentSearchButton = ComponentConfig<typeof theme, AppConfig, 'contentSearchButton'>;
+export interface ContentSearchButtonProps {
+    /**
+     * The icon displayed in the button.
+     * @defaultValue appConfig.ui.icons.search
+     * @IconifyIcon
+     */
+    icon?: string;
+    /**
+     * The label displayed in the button.
+     * @defaultValue t('contentSearchButton.label')
+     */
+    label?: string;
+    /**
+     * The color of the button.
+     * @defaultValue 'neutral'
+     */
+    color?: ButtonProps['color'];
+    /**
+     * The variant of the button.
+     * Defaults to 'outline' when not collapsed, 'ghost' when collapsed.
+     */
+    variant?: ButtonProps['variant'];
+    size?: ButtonProps['size'];
+    /**
+     * Whether the button is collapsed.
+     * @defaultValue true
+     */
+    collapsed?: boolean;
+    /**
+     * Display a tooltip on the button when is collapsed with the button label.
+     * This has priority over the global `tooltip` prop.
+     */
+    tooltip?: boolean | TooltipProps;
+    /**
+     * The keyboard keys to display in the button.
+     * `{ variant: 'subtle' }`{lang="ts-type"}
+     * @defaultValue ['meta', 'k']
+     */
+    kbds?: KbdProps['value'][] | KbdProps[];
+    ui?: ContentSearchButton['slots'] & ButtonProps['ui'];
+    class?: any;
 }
+declare const _default: __VLS_WithSlots<import("vue").DefineComponent<ContentSearchButtonProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ContentSearchButtonProps> & Readonly<{}>, {
+    color: "error" | "info" | "primary" | "secondary" | "success" | "warning" | "neutral";
+    tooltip: boolean | TooltipProps;
+    kbds: KbdProps["value"][] | KbdProps[];
+    collapsed: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, ButtonSlots>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/content/ContentSurround.vue

@@ -1,5 +1,5 @@
 <script>
-import theme from "#build/ui-pro/content/content-surround";
+import theme from "#build/ui/content/content-surround";
 </script>
 
 <script setup>
@@ -25,7 +25,7 @@ const [DefineLinkTemplate, ReuseLinkTemplate] = createReusableTemplate({
     direction: String
   }
 });
-const ui = computed(() => tv({ extend: tv(theme), ...appConfig.uiPro?.contentSurround || {} })());
+const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.contentSurround || {} })());
 </script>
 
 <template>

package/dist/runtime/components/content/ContentSurround.vue.d.ts

@@ -1,59 +1,52 @@
-import type { ContentNavigationItem } from '@nuxt/content'
-import type { AppConfig } from '@nuxt/schema'
-import type { ComponentConfig } from '@nuxt/ui'
-import type theme from '#build/ui-pro/content/content-surround'
-
-type ContentSurround = ComponentConfig<typeof theme, AppConfig, 'contentSurround', 'uiPro'>
+import theme from '#build/ui/content/content-surround';
+import type { ContentNavigationItem } from '@nuxt/content';
+import type { AppConfig } from '@nuxt/schema';
+import type { ComponentConfig } from '../../types';
+type ContentSurround = ComponentConfig<typeof theme, AppConfig, 'contentSurround'>;
 export interface ContentSurroundLink extends ContentNavigationItem {
-  description?: string
-  /**
-   * @IconifyIcon
-   */
-  icon?: string
-  class?: any
-  ui?: Pick<ContentSurround['slots'], 'link' | 'linkLeading' | 'linkLeadingIcon' | 'linkTitle' | 'linkDescription'>
+    description?: string;
+    /**
+     * @IconifyIcon
+     */
+    icon?: string;
+    class?: any;
+    ui?: Pick<ContentSurround['slots'], 'link' | 'linkLeading' | 'linkLeadingIcon' | 'linkTitle' | 'linkDescription'>;
 }
 export interface ContentSurroundProps<T extends ContentSurroundLink = ContentSurroundLink> {
-  /**
-   * The element or component this component should render as.
-   * @defaultValue 'div'
-   */
-  as?: any
-  /**
-   * The icon displayed in the prev link.
-   * @defaultValue appConfig.ui.icons.arrowLeft
-   * @IconifyIcon
-   */
-  prevIcon?: string
-  /**
-   * The icon displayed in the next link.
-   * @defaultValue appConfig.ui.icons.arrowRight
-   * @IconifyIcon
-   */
-  nextIcon?: string
-  surround?: T[]
-  class?: any
-  ui?: ContentSurround['slots']
+    /**
+     * The element or component this component should render as.
+     * @defaultValue 'div'
+     */
+    as?: any;
+    /**
+     * The icon displayed in the prev link.
+     * @defaultValue appConfig.ui.icons.arrowLeft
+     * @IconifyIcon
+     */
+    prevIcon?: string;
+    /**
+     * The icon displayed in the next link.
+     * @defaultValue appConfig.ui.icons.arrowRight
+     * @IconifyIcon
+     */
+    nextIcon?: string;
+    surround?: T[];
+    class?: any;
+    ui?: ContentSurround['slots'];
 }
 type SlotProps<T> = (props: {
-  link: T
-}) => any
+    link: T;
+}) => any;
 export interface ContentSurroundSlots<T extends ContentSurroundLink = ContentSurroundLink> {
-  'link': SlotProps<T>
-  'link-leading': SlotProps<T>
-  'link-title': SlotProps<T>
-  'link-description': SlotProps<T>
+    'link': SlotProps<T>;
+    'link-leading': SlotProps<T>;
+    'link-title': SlotProps<T>;
+    'link-description': SlotProps<T>;
 }
-declare const _default: <T extends ContentSurroundLink>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>['props'], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, 'attrs' | 'emit' | 'slots'>>, __VLS_expose?: NonNullable<Awaited<typeof __VLS_setup>>['expose'], __VLS_setup?: Promise<{
-  props: __VLS_PrettifyLocal<Pick<Partial<{}> & Omit<{} & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps, never>, never> & ContentSurroundProps<T> & Partial<{}>> & import('vue').PublicProps
-  expose(exposed: import('vue').ShallowUnwrapRef<{}>): void
-  attrs: any
-  slots: ContentSurroundSlots<T>
-  emit: {}
-}>) => import('vue').VNode & {
-  __ctx?: Awaited<typeof __VLS_setup>
-}
-export default _default
-type __VLS_PrettifyLocal<T> = {
-  [K in keyof T]: T[K];
-} & {}
+declare const _default: __VLS_WithSlots<import("vue").DefineComponent<ContentSurroundProps<ContentSurroundLink>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ContentSurroundProps<ContentSurroundLink>> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, ContentSurroundSlots<ContentSurroundLink>>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/content/ContentToc.vue

@@ -1,5 +1,5 @@
 <script>
-import theme from "#build/ui-pro/content/content-toc";
+import theme from "#build/ui/content/content-toc";
 </script>
 
 <script setup>
@@ -30,14 +30,9 @@ const { t } = useLocalePro();
 const router = useRouter();
 const appConfig = useAppConfig();
 const { activeHeadings, updateHeadings } = useScrollspy();
-const [DefineListTemplate, ReuseListTemplate] = createReusableTemplate({
-  props: {
-    links: Array,
-    level: Number
-  }
-});
+const [DefineListTemplate, ReuseListTemplate] = createReusableTemplate();
 const [DefineTriggerTemplate, ReuseTriggerTemplate] = createReusableTemplate();
-const ui = computed(() => tv({ extend: tv(theme), ...appConfig.uiPro?.contentToc || {} })({
+const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.contentToc || {} })({
   color: props.color,
   highlight: props.highlight,
   highlightColor: props.highlightColor || props.color
@@ -75,11 +70,20 @@ nuxtApp.hooks.hook("page:transition:finish", () => {
 </script>
 
 <template>
-  <!-- eslint-disable-next-line vue/no-template-shadow -->
   <DefineListTemplate v-slot="{ links, level }">
-    <ul :class="level > 0 ? ui.listWithChildren({ class: props.ui?.listWithChildren }) : ui.list({ class: props.ui?.list })">
-      <li v-for="(link, index) in links" :key="index" :class="link.children && link.children.length > 0 ? ui.itemWithChildren({ class: [props.ui?.itemWithChildren, link.ui?.itemWithChildren] }) : ui.item({ class: [props.ui?.item, link.ui?.item] })">
-        <a :href="`#${link.id}`" :class="ui.link({ class: [props.ui?.link, link.ui?.link, link.class], active: activeHeadings.includes(link.id) })" @click.prevent="scrollToHeading(link.id)">
+    <ul
+      :class="level > 0 ? ui.listWithChildren({ class: props.ui?.listWithChildren }) : ui.list({ class: props.ui?.list })"
+    >
+      <li
+        v-for="(link, index) in links"
+        :key="index"
+        :class="link.children && link.children.length > 0 ? ui.itemWithChildren({ class: [props.ui?.itemWithChildren, link.ui?.itemWithChildren] }) : ui.item({ class: [props.ui?.item, link.ui?.item] })"
+      >
+        <a
+          :href="`#${link.id}`"
+          :class="ui.link({ class: [props.ui?.link, link.ui?.link, link.class], active: activeHeadings.includes(link.id) })"
+          @click.prevent="scrollToHeading(link.id)"
+        >
           <slot name="link" :link="link">
             <span :class="ui.linkText({ class: [props.ui?.linkText, link.ui?.linkText] })">
               {{ link.text }}
@@ -101,12 +105,20 @@ nuxtApp.hooks.hook("page:transition:finish", () => {
 
     <span :class="ui.trailing({ class: props.ui?.trailing })">
       <slot name="trailing" :open="open">
-        <UIcon :name="trailingIcon || appConfig.ui.icons.chevronDown" :class="ui.trailingIcon({ class: props.ui?.trailingIcon })" />
+        <UIcon
+          :name="trailingIcon || appConfig.ui.icons.chevronDown"
+          :class="ui.trailingIcon({ class: props.ui?.trailingIcon })"
+        />
       </slot>
     </span>
   </DefineTriggerTemplate>
 
-  <CollapsibleRoot v-slot="{ open }" v-bind="rootProps" :default-open="defaultOpen" :class="ui.root({ class: [props.ui?.root, props.class] })">
+  <CollapsibleRoot
+    v-slot="{ open }"
+    v-bind="rootProps"
+    :default-open="defaultOpen"
+    :class="ui.root({ class: [props.ui?.root, props.class] })"
+  >
     <div :class="ui.container({ class: props.ui?.container })">
       <div v-if="!!slots.top" :class="ui.top({ class: props.ui?.top })">
         <slot name="top" :links="links" />
@@ -138,7 +150,7 @@ nuxtApp.hooks.hook("page:transition:finish", () => {
         </div>
       </template>
 
-      <div v-if="!!slots.bottom" :class="ui.bottom({ class: props.ui?.bottom, body: !!slots.top || !!links?.length })">
+      <div v-if="!!slots.bottom" :class="ui.bottom({ class: props.ui?.bottom })">
         <slot name="bottom" :links="links" />
       </div>
     </div>