@bitrix24/b24ui-nuxt 2.2.1 → 2.4.0

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

@@ -23,14 +23,19 @@ export interface FieldGroupProps {
      */
     noSplit?: boolean;
     class?: any;
-    b24ui?: FieldGroup['slots'];
+    b24ui?: {
+        base?: any;
+    };
 }
 export interface FieldGroupSlots {
     default(props?: {}): any;
 }
-declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<FieldGroupProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<FieldGroupProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, FieldGroupSlots>;
 declare const _default: typeof __VLS_export;
 export default _default;
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<FieldGroupProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<FieldGroupProps> & Readonly<{}>, {
+    orientation: FieldGroup["variants"]["orientation"];
+    noSplit: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, FieldGroupSlots>;
 type __VLS_WithSlots<T, S> = T & {
     new (): {
         $slots: S;

package/dist/runtime/components/FieldGroup.vue

@@ -6,6 +6,7 @@ import theme from "#build/b24ui/field-group";
 import { provide, computed } from "vue";
 import { Primitive } from "reka-ui";
 import { useAppConfig } from "#imports";
+import { useComponentUI } from "../composables/useComponentUI";
 import { fieldGroupInjectionKey } from "../composables/useFieldGroup";
 import { tv } from "../utils/tv";
 const props = defineProps({
@@ -14,10 +15,11 @@ const props = defineProps({
   orientation: { type: null, required: false, default: "horizontal" },
   noSplit: { type: Boolean, required: false, default: false },
   class: { type: null, required: false },
-  b24ui: { type: null, required: false }
+  b24ui: { type: Object, required: false }
 });
 defineSlots();
 const appConfig = useAppConfig();
+const uiProp = useComponentUI("fieldGroup", props);
 const b24ui = computed(() => tv({ extend: tv(theme), ...appConfig.b24ui?.fieldGroup || {} }));
 provide(fieldGroupInjectionKey, computed(() => ({
   orientation: props.orientation,
@@ -31,7 +33,7 @@ provide(fieldGroupInjectionKey, computed(() => ({
     :as="as"
     :data-orientation="orientation"
     class="group/items is-field-group"
-    :class="b24ui({ orientation, class: props.class })"
+    :class="b24ui({ orientation, class: [uiProp?.base, props.class] })"
   >
     <slot />
   </Primitive>

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

@@ -23,14 +23,19 @@ export interface FieldGroupProps {
      */
     noSplit?: boolean;
     class?: any;
-    b24ui?: FieldGroup['slots'];
+    b24ui?: {
+        base?: any;
+    };
 }
 export interface FieldGroupSlots {
     default(props?: {}): any;
 }
-declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<FieldGroupProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<FieldGroupProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, FieldGroupSlots>;
 declare const _default: typeof __VLS_export;
 export default _default;
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<FieldGroupProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<FieldGroupProps> & Readonly<{}>, {
+    orientation: FieldGroup["variants"]["orientation"];
+    noSplit: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, FieldGroupSlots>;
 type __VLS_WithSlots<T, S> = T & {
     new (): {
         $slots: S;

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

@@ -154,10 +154,15 @@ export interface FileUploadSlots<M extends boolean = false> {
         b24ui: FileUpload['b24ui'];
     }): any;
 }
-declare const __VLS_export: <M extends boolean = false>(__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<(FileUploadProps<M> & {
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: <M extends boolean = false>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
+    props: import("vue").PublicProps & __VLS_PrettifyLocal<(FileUploadProps<M> & {
         modelValue?: (M extends true ? File[] : File) | null;
-    }) & __VLS_EmitsToProps<__VLS_NormalizeEmits<((evt: "change", event: Event) => void) & ((evt: "update:modelValue", value: (M extends true ? File[] : File) | null | undefined) => void)>>> & import("vue").PublicProps & (typeof globalThis extends {
+    }) & {
+        onChange?: ((event: Event) => any) | undefined;
+        "onUpdate:modelValue"?: ((value: (M extends true ? File[] : File) | null | undefined) => any) | undefined;
+    }> & (typeof globalThis extends {
         __VLS_PROPS_FALLBACK: infer P;
     } ? P : {});
     expose: (exposed: import("vue").ShallowUnwrapRef<{
@@ -166,12 +171,12 @@ declare const __VLS_export: <M extends boolean = false>(__VLS_props: NonNullable
     }>) => void;
     attrs: any;
     slots: FileUploadSlots<M>;
-    emit: ((evt: "change", event: Event) => void) & ((evt: "update:modelValue", value: (M extends true ? File[] : File) | null | undefined) => void);
+    emit: ((evt: "change", event: Event) => void) & ((event: "update:modelValue", value: (M extends true ? File[] : File) | null | undefined) => void);
 }>) => import("vue").VNode & {
     __ctx?: Awaited<typeof __VLS_setup>;
 };
-declare const _default: typeof __VLS_export;
-export default _default;
-type __VLS_PrettifyLocal<T> = {
+type __VLS_PrettifyLocal<T> = (T extends any ? {
+    [K in keyof T]: T[K];
+} : {
     [K in keyof T as K]: T[K];
-} & {};
+}) & {};

package/dist/runtime/components/FileUpload.vue

@@ -7,6 +7,7 @@ import { computed, toRef, watch } from "vue";
 import { Primitive, VisuallyHidden } from "reka-ui";
 import { createReusableTemplate } from "@vueuse/core";
 import { useAppConfig, useLocale } from "#imports";
+import { useComponentUI } from "../composables/useComponentUI";
 import { useFormField } from "../composables/useFormField";
 import { useFileUpload } from "../composables/useFileUpload";
 import { tv } from "../utils/tv";
@@ -39,12 +40,13 @@ const props = defineProps({
   fileDeleteIcon: { type: [Function, Object], required: false },
   preview: { type: Boolean, required: false, default: true },
   class: { type: null, required: false },
-  b24ui: { type: null, required: false }
+  b24ui: { type: Object, required: false }
 });
 const emits = defineEmits(["change"]);
 const slots = defineSlots();
 const modelValue = defineModel({ type: null });
 const appConfig = useAppConfig();
+const uiProp = useComponentUI("fileUpload", props);
 const { t } = useLocale();
 const [DefineFilesTemplate, ReuseFilesTemplate] = createReusableTemplate();
 const { isDragging, open, inputRef, dropzoneRef } = useFileUpload({
@@ -101,7 +103,7 @@ function onUpdate(files, reset = false) {
       modelValue.value = [...existingFiles, ...files || []];
     }
   } else {
-    modelValue.value = files?.[0];
+    modelValue.value = files?.[0] ?? null;
   }
   const event = new Event("change", { target: { value: modelValue.value } });
   emits("change", event);
@@ -139,13 +141,13 @@ defineExpose({
     <template v-if="props.preview && modelValue && (Array.isArray(modelValue) ? modelValue.length : true)">
       <slot name="files-top" :files="modelValue" :open="open" :remove-file="removeFile" />
 
-      <div data-slot="files" :class="b24ui.files({ class: props.b24ui?.files })">
+      <div data-slot="files" :class="b24ui.files({ class: uiProp?.files })">
         <slot name="files" :files="modelValue">
           <div
             v-for="(file, index) in Array.isArray(modelValue) ? modelValue : [modelValue]"
             :key="file.name"
             data-slot="file"
-            :class="b24ui.file({ class: props.b24ui?.file })"
+            :class="b24ui.file({ class: uiProp?.file })"
           >
             <slot name="file" :file="file" :index="index">
               <slot name="file-leading" :file="file" :index="index" :b24ui="b24ui">
@@ -155,18 +157,18 @@ defineExpose({
                   :icon="fileIcon || icons.file"
                   :size="props.size"
                   data-slot="fileLeadingAvatar"
-                  :class="b24ui.fileLeadingAvatar({ class: props.b24ui?.fileLeadingAvatar })"
+                  :class="b24ui.fileLeadingAvatar({ class: uiProp?.fileLeadingAvatar })"
                 />
               </slot>
 
-              <div data-slot="fileWrapper" :class="b24ui.fileWrapper({ class: props.b24ui?.fileWrapper })">
-                <span data-slot="fileName" :class="b24ui.fileName({ class: props.b24ui?.fileName })">
+              <div data-slot="fileWrapper" :class="b24ui.fileWrapper({ class: uiProp?.fileWrapper })">
+                <span data-slot="fileName" :class="b24ui.fileName({ class: uiProp?.fileName })">
                   <slot name="file-name" :file="file" :index="index">
                     {{ file.name }}
                   </slot>
                 </span>
 
-                <span data-slot="fileSize" :class="b24ui.fileSize({ class: props.b24ui?.fileSize })">
+                <span data-slot="fileSize" :class="b24ui.fileSize({ class: uiProp?.fileSize })">
                   <slot name="file-size" :file="file" :index="index">
                     {{ formatFileSize(file.size) }}
                   </slot>
@@ -189,7 +191,7 @@ defineExpose({
                   :aria-label="t('fileUpload.removeFile', { filename: file.name })"
                   :icon="fileDeleteIcon || icons.close"
                   data-slot="fileTrailingButton"
-                  :class="b24ui.fileTrailingButton({ class: props.b24ui?.fileTrailingButton })"
+                  :class="b24ui.fileTrailingButton({ class: uiProp?.fileTrailingButton })"
                   @click.stop.prevent="removeFile(index)"
                 />
               </slot>
@@ -202,7 +204,7 @@ defineExpose({
     </template>
   </DefineFilesTemplate>
 
-  <Primitive :as="as" data-slot="root" :class="b24ui.root({ class: [props.b24ui?.root, props.class] })">
+  <Primitive :as="as" data-slot="root" :class="b24ui.root({ class: [uiProp?.root, props.class] })">
     <slot :open="open" :remove-file="removeFile" :b24ui="b24ui">
       <component
         :is="variant === 'button' ? 'button' : 'div'"
@@ -211,7 +213,7 @@ defineExpose({
         :role="variant === 'button' ? void 0 : 'button'"
         :data-dragging="isDragging"
         data-slot="base"
-        :class="b24ui.base({ class: props.b24ui?.base })"
+        :class="b24ui.base({ class: uiProp?.base })"
         :tabindex="interactive && !disabled ? 0 : -1"
         @click="interactive && !disabled && open()"
         @keydown.space.prevent
@@ -220,39 +222,39 @@ defineExpose({
         <ReuseFilesTemplate v-if="position === 'inside'" />
 
         <div
-          v-if="position === 'inside' ? multiple ? !modelValue?.length : !modelValue : true"
+          v-if="position === 'inside' ? !props.preview || (multiple ? !modelValue?.length : !modelValue) : true"
           data-slot="wrapper"
-          :class="b24ui.wrapper({ class: props.b24ui?.wrapper })"
+          :class="b24ui.wrapper({ class: uiProp?.wrapper })"
         >
           <slot name="leading" :b24ui="b24ui">
             <Component
               :is="icon || icons.upload"
               v-if="variant === 'button'"
               data-slot="icon"
-              :class="b24ui.icon({ class: props.b24ui?.icon })"
+              :class="b24ui.icon({ class: uiProp?.icon })"
             />
             <B24Avatar
               v-else
               :icon="icon || icons.upload"
               :size="props.size"
               data-slot="avatar"
-              :class="b24ui.avatar({ class: props.b24ui?.avatar })"
+              :class="b24ui.avatar({ class: uiProp?.avatar })"
             />
           </slot>
 
           <template v-if="variant !== 'button'">
-            <div v-if="label || !!slots.label" data-slot="label" :class="b24ui.label({ class: props.b24ui?.label })">
+            <div v-if="label || !!slots.label" data-slot="label" :class="b24ui.label({ class: uiProp?.label })">
               <slot name="label">
                 {{ label }}
               </slot>
             </div>
-            <div v-if="description || !!slots.description" data-slot="description" :class="b24ui.description({ class: props.b24ui?.description })">
+            <div v-if="description || !!slots.description" data-slot="description" :class="b24ui.description({ class: uiProp?.description })">
               <slot name="description">
                 {{ description }}
               </slot>
             </div>
 
-            <div v-if="!!slots.actions" data-slot="actions" :class="b24ui.actions({ class: props.b24ui?.actions })">
+            <div v-if="!!slots.actions" data-slot="actions" :class="b24ui.actions({ class: uiProp?.actions })">
               <slot name="actions" :files="modelValue" :open="open" :remove-file="removeFile" />
             </div>
           </template>

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

@@ -154,10 +154,15 @@ export interface FileUploadSlots<M extends boolean = false> {
         b24ui: FileUpload['b24ui'];
     }): any;
 }
-declare const __VLS_export: <M extends boolean = false>(__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<(FileUploadProps<M> & {
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: <M extends boolean = false>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
+    props: import("vue").PublicProps & __VLS_PrettifyLocal<(FileUploadProps<M> & {
         modelValue?: (M extends true ? File[] : File) | null;
-    }) & __VLS_EmitsToProps<__VLS_NormalizeEmits<((evt: "change", event: Event) => void) & ((evt: "update:modelValue", value: (M extends true ? File[] : File) | null | undefined) => void)>>> & import("vue").PublicProps & (typeof globalThis extends {
+    }) & {
+        onChange?: ((event: Event) => any) | undefined;
+        "onUpdate:modelValue"?: ((value: (M extends true ? File[] : File) | null | undefined) => any) | undefined;
+    }> & (typeof globalThis extends {
         __VLS_PROPS_FALLBACK: infer P;
     } ? P : {});
     expose: (exposed: import("vue").ShallowUnwrapRef<{
@@ -166,12 +171,12 @@ declare const __VLS_export: <M extends boolean = false>(__VLS_props: NonNullable
     }>) => void;
     attrs: any;
     slots: FileUploadSlots<M>;
-    emit: ((evt: "change", event: Event) => void) & ((evt: "update:modelValue", value: (M extends true ? File[] : File) | null | undefined) => void);
+    emit: ((evt: "change", event: Event) => void) & ((event: "update:modelValue", value: (M extends true ? File[] : File) | null | undefined) => void);
 }>) => import("vue").VNode & {
     __ctx?: Awaited<typeof __VLS_setup>;
 };
-declare const _default: typeof __VLS_export;
-export default _default;
-type __VLS_PrettifyLocal<T> = {
+type __VLS_PrettifyLocal<T> = (T extends any ? {
+    [K in keyof T]: T[K];
+} : {
     [K in keyof T as K]: T[K];
-} & {};
+}) & {};

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

@@ -0,0 +1,30 @@
+import type { AppConfig } from '@nuxt/schema';
+import type { ComponentConfig } from '../types/tv';
+import theme from '#build/b24ui/footer';
+type Footer = ComponentConfig<typeof theme, AppConfig, 'footer'>;
+export interface FooterProps {
+    /**
+     * The element or component this component should render as.
+     * @defaultValue 'footer'
+     */
+    as?: any;
+    class?: any;
+    b24ui?: Footer['slots'];
+}
+export interface FooterSlots {
+    left(props?: {}): any;
+    default(props?: {}): any;
+    right(props?: {}): any;
+    top(props?: {}): any;
+    bottom(props?: {}): any;
+}
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<FooterProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<FooterProps> & Readonly<{}>, {
+    as: any;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, FooterSlots>;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/Footer.vue

@@ -0,0 +1,47 @@
+<script>
+import theme from "#build/b24ui/footer";
+</script>
+
+<script setup>
+import { computed } from "vue";
+import { Primitive } from "reka-ui";
+import { useAppConfig } from "#imports";
+import { useComponentUI } from "../composables/useComponentUI";
+import { tv } from "../utils/tv";
+import B24Container from "./Container.vue";
+const props = defineProps({
+  as: { type: null, required: false, default: "footer" },
+  class: { type: null, required: false },
+  b24ui: { type: Object, required: false }
+});
+const slots = defineSlots();
+const appConfig = useAppConfig();
+const uiProp = useComponentUI("footer", props);
+const b24ui = computed(() => tv({ extend: tv(theme), ...appConfig.b24ui?.footer || {} })());
+</script>
+
+<template>
+  <Primitive :as="as" data-slot="root" :class="b24ui.root({ class: [uiProp?.root, props.class] })">
+    <div v-if="!!slots.top" data-slot="top" :class="b24ui.top({ class: uiProp?.top })">
+      <slot name="top" />
+    </div>
+
+    <B24Container data-slot="container" :class="b24ui.container({ class: uiProp?.container })">
+      <div data-slot="right" :class="b24ui.right({ class: uiProp?.right })">
+        <slot name="right" />
+      </div>
+
+      <div data-slot="center" :class="b24ui.center({ class: uiProp?.center })">
+        <slot />
+      </div>
+
+      <div data-slot="left" :class="b24ui.left({ class: uiProp?.left })">
+        <slot name="left" />
+      </div>
+    </B24Container>
+
+    <div v-if="!!slots.bottom" data-slot="bottom" :class="b24ui.bottom({ class: uiProp?.bottom })">
+      <slot name="bottom" />
+    </div>
+  </Primitive>
+</template>

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

@@ -0,0 +1,30 @@
+import type { AppConfig } from '@nuxt/schema';
+import type { ComponentConfig } from '../types/tv';
+import theme from '#build/b24ui/footer';
+type Footer = ComponentConfig<typeof theme, AppConfig, 'footer'>;
+export interface FooterProps {
+    /**
+     * The element or component this component should render as.
+     * @defaultValue 'footer'
+     */
+    as?: any;
+    class?: any;
+    b24ui?: Footer['slots'];
+}
+export interface FooterSlots {
+    left(props?: {}): any;
+    default(props?: {}): any;
+    right(props?: {}): any;
+    top(props?: {}): any;
+    bottom(props?: {}): any;
+}
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<FooterProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<FooterProps> & Readonly<{}>, {
+    as: any;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, FooterSlots>;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

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

@@ -0,0 +1,69 @@
+import type { AppConfig } from '@nuxt/schema';
+import theme from '#build/b24ui/footer-columns';
+import type { IconComponent, LinkProps } from '../types';
+import type { ComponentConfig } from '../types/tv';
+type FooterColumns = ComponentConfig<typeof theme, AppConfig, 'footerColumns'>;
+export interface FooterColumnLink extends Omit<LinkProps, 'custom'> {
+    label: string;
+    /**
+     * @IconComponent
+     */
+    icon?: IconComponent;
+    class?: any;
+    b24ui?: Pick<FooterColumns['slots'], 'item' | 'link' | 'linkLabel' | 'linkLabelExternalIcon' | 'linkLeadingIcon'>;
+}
+export interface FooterColumn<T extends FooterColumnLink = FooterColumnLink> {
+    label: string;
+    children?: T[];
+}
+export interface FooterColumnsProps<T extends FooterColumnLink = FooterColumnLink> {
+    /**
+     * The element or component this component should render as.
+     * @defaultValue 'div'
+     */
+    as?: any;
+    class?: any;
+    columns?: FooterColumn<T>[];
+    b24ui?: FooterColumns['slots'];
+}
+type SlotProps<T> = (props: {
+    link: T;
+    active: boolean;
+    b24ui: FooterColumns['b24ui'];
+}) => any;
+export interface FooterColumnsSlots<T extends FooterColumnLink = FooterColumnLink> {
+    'left'(props?: {}): any;
+    'default'(props?: {}): any;
+    'right'(props?: {}): any;
+    'column-label'?: (props: {
+        column: FooterColumn<T>;
+    }) => any;
+    'link': SlotProps<T>;
+    'link-leading': SlotProps<T>;
+    'link-label'(props: {
+        link: T;
+        active: boolean;
+    }): any;
+    'link-trailing'(props: {
+        link: T;
+        active: boolean;
+    }): any;
+}
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: <T extends FooterColumnLink>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
+    props: import("vue").PublicProps & __VLS_PrettifyLocal<FooterColumnsProps<T>> & (typeof globalThis extends {
+        __VLS_PROPS_FALLBACK: infer P;
+    } ? P : {});
+    expose: (exposed: {}) => void;
+    attrs: any;
+    slots: FooterColumnsSlots<T>;
+    emit: {};
+}>) => import("vue").VNode & {
+    __ctx?: Awaited<typeof __VLS_setup>;
+};
+type __VLS_PrettifyLocal<T> = (T extends any ? {
+    [K in keyof T]: T[K];
+} : {
+    [K in keyof T as K]: T[K];
+}) & {};

package/dist/runtime/components/FooterColumns.vue

@@ -0,0 +1,83 @@
+<script>
+import theme from "#build/b24ui/footer-columns";
+</script>
+
+<script setup>
+import { computed } from "vue";
+import { Primitive } from "reka-ui";
+import { useAppConfig } from "#imports";
+import { useComponentUI } from "../composables/useComponentUI";
+import { pickLinkProps } from "../utils/link";
+import { tv } from "../utils/tv";
+import icons from "../dictionary/icons";
+import B24Link from "./Link.vue";
+import B24LinkBase from "./LinkBase.vue";
+const props = defineProps({
+  as: { type: null, required: false, default: "nav" },
+  class: { type: null, required: false },
+  columns: { type: Array, required: false },
+  b24ui: { type: Object, required: false }
+});
+const slots = defineSlots();
+const appConfig = useAppConfig();
+const uiProp = useComponentUI("footerColumns", props);
+const b24ui = computed(() => tv({ extend: tv(theme), ...appConfig.b24ui?.footerColumns || {} })());
+</script>
+
+<template>
+  <Primitive :as="as" data-slot="root" :class="b24ui.root({ class: [uiProp?.root, props.class] })">
+    <div v-if="!!slots.left" data-slot="left" :class="b24ui.left({ class: uiProp?.left })">
+      <slot name="left" />
+    </div>
+
+    <div v-if="!!slots.default || columns?.length" data-slot="center" :class="b24ui.center({ class: uiProp?.center })">
+      <slot>
+        <div v-for="(column, index) in columns" :key="index">
+          <h3 data-slot="label" :class="b24ui.label({ class: uiProp?.label })">
+            <slot name="column-label" :column="column">
+              {{ column.label }}
+            </slot>
+          </h3>
+
+          <ul data-slot="list" :class="b24ui.list({ class: uiProp?.list })">
+            <li v-for="(link, linkIndex) in column.children" :key="linkIndex" data-slot="item" :class="b24ui.item({ class: [uiProp?.item, link.b24ui?.item] })">
+              <B24Link v-slot="{ active, ...slotProps }" v-bind="pickLinkProps(link)" custom>
+                <B24LinkBase v-bind="slotProps" data-slot="link" :class="b24ui.link({ class: [uiProp?.link, link.b24ui?.link, link.class], active })">
+                  <slot name="link" :link="link" :active="active" :b24ui="b24ui">
+                    <slot name="link-leading" :link="link" :active="active" :b24ui="b24ui">
+                      <Component
+                        :is="link.icon"
+                        v-if="link.icon"
+                        data-slot="linkLeadingIcon"
+                        :class="b24ui.linkLeadingIcon({ class: [uiProp?.linkLeadingIcon, link.b24ui?.linkLeadingIcon], active })"
+                      />
+                    </slot>
+
+                    <span v-if="link.label || !!slots['link-label']" data-slot="linkLabel" :class="b24ui.linkLabel({ class: [uiProp?.linkLabel, link.b24ui?.linkLabel], active })">
+                      <slot name="link-label" :link="link" :active="active">
+                        {{ link.label }}
+                      </slot>
+                    </span>
+
+                    <slot name="link-trailing" :link="link" :active="active">
+                      <Component
+                        :is="icons.external"
+                        v-if="link.target === '_blank'"
+                        data-slot="linkLabelExternalIcon"
+                        :class="b24ui.linkLabelExternalIcon({ class: [uiProp?.linkLabelExternalIcon, link.b24ui?.linkLabelExternalIcon], active })"
+                      />
+                    </slot>
+                  </slot>
+                </B24LinkBase>
+              </B24Link>
+            </li>
+          </ul>
+        </div>
+      </slot>
+    </div>
+
+    <div v-if="!!slots.right" data-slot="right" :class="b24ui.right({ class: uiProp?.right })">
+      <slot name="right" />
+    </div>
+  </Primitive>
+</template>

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

@@ -0,0 +1,69 @@
+import type { AppConfig } from '@nuxt/schema';
+import theme from '#build/b24ui/footer-columns';
+import type { IconComponent, LinkProps } from '../types';
+import type { ComponentConfig } from '../types/tv';
+type FooterColumns = ComponentConfig<typeof theme, AppConfig, 'footerColumns'>;
+export interface FooterColumnLink extends Omit<LinkProps, 'custom'> {
+    label: string;
+    /**
+     * @IconComponent
+     */
+    icon?: IconComponent;
+    class?: any;
+    b24ui?: Pick<FooterColumns['slots'], 'item' | 'link' | 'linkLabel' | 'linkLabelExternalIcon' | 'linkLeadingIcon'>;
+}
+export interface FooterColumn<T extends FooterColumnLink = FooterColumnLink> {
+    label: string;
+    children?: T[];
+}
+export interface FooterColumnsProps<T extends FooterColumnLink = FooterColumnLink> {
+    /**
+     * The element or component this component should render as.
+     * @defaultValue 'div'
+     */
+    as?: any;
+    class?: any;
+    columns?: FooterColumn<T>[];
+    b24ui?: FooterColumns['slots'];
+}
+type SlotProps<T> = (props: {
+    link: T;
+    active: boolean;
+    b24ui: FooterColumns['b24ui'];
+}) => any;
+export interface FooterColumnsSlots<T extends FooterColumnLink = FooterColumnLink> {
+    'left'(props?: {}): any;
+    'default'(props?: {}): any;
+    'right'(props?: {}): any;
+    'column-label'?: (props: {
+        column: FooterColumn<T>;
+    }) => any;
+    'link': SlotProps<T>;
+    'link-leading': SlotProps<T>;
+    'link-label'(props: {
+        link: T;
+        active: boolean;
+    }): any;
+    'link-trailing'(props: {
+        link: T;
+        active: boolean;
+    }): any;
+}
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: <T extends FooterColumnLink>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
+    props: import("vue").PublicProps & __VLS_PrettifyLocal<FooterColumnsProps<T>> & (typeof globalThis extends {
+        __VLS_PROPS_FALLBACK: infer P;
+    } ? P : {});
+    expose: (exposed: {}) => void;
+    attrs: any;
+    slots: FooterColumnsSlots<T>;
+    emit: {};
+}>) => import("vue").VNode & {
+    __ctx?: Awaited<typeof __VLS_setup>;
+};
+type __VLS_PrettifyLocal<T> = (T extends any ? {
+    [K in keyof T]: T[K];
+} : {
+    [K in keyof T as K]: T[K];
+}) & {};