@eslamdevui/ui 3.2.0-beta.2 → 3.2.1

package/dist/runtime/components/DropdownMenu.vue

@@ -41,28 +41,28 @@ const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.dropdownMenu
 </script>
 
 <template>
-  <DropdownMenuRoot v-slot="{ open }" v-bind="rootProps">
-    <DropdownMenuTrigger v-if="!!slots.default" as-child :class="props.class" :disabled="disabled">
-      <slot :open="open" />
-    </DropdownMenuTrigger>
-
-    <UDropdownMenuContent
-      :class="ui.content({ class: [!slots.default && props.class, props.ui?.content] })"
-      :ui="ui"
-      :ui-override="props.ui"
-      v-bind="contentProps"
-      :items="items"
-      :portal="portal"
-      :label-key="labelKey"
-      :checked-icon="checkedIcon"
-      :loading-icon="loadingIcon"
-      :external-icon="externalIcon"
-    >
-      <template v-for="(_, name) in proxySlots" #[name]="slotData">
-        <slot :name="name" v-bind="slotData" />
-      </template>
-
-      <DropdownMenuArrow v-if="!!arrow" v-bind="arrowProps" :class="ui.arrow({ class: props.ui?.arrow })" />
-    </UDropdownMenuContent>
-  </DropdownMenuRoot>
+  <DropdownMenuRoot v-slot="{ open }" v-bind="rootProps">
+    <DropdownMenuTrigger v-if="!!slots.default" as-child :class="props.class" :disabled="disabled">
+      <slot :open="open" />
+    </DropdownMenuTrigger>
+
+    <UDropdownMenuContent
+      :class="ui.content({ class: [!slots.default && props.class, props.ui?.content] })"
+      :ui="ui"
+      :ui-override="props.ui"
+      v-bind="contentProps"
+      :items="items"
+      :portal="portal"
+      :label-key="labelKey"
+      :checked-icon="checkedIcon"
+      :loading-icon="loadingIcon"
+      :external-icon="externalIcon"
+    >
+      <template v-for="(_, name) in proxySlots" #[name]="slotData">
+        <slot :name="name" v-bind="slotData" />
+      </template>
+
+      <DropdownMenuArrow v-if="!!arrow" v-bind="arrowProps" :class="ui.arrow({ class: props.ui?.arrow })" />
+    </UDropdownMenuContent>
+  </DropdownMenuRoot>
 </template>

package/dist/runtime/components/DropdownMenuContent.vue

@@ -61,111 +61,111 @@ const groups = computed(
 </script>
 
 <template>
-  <DefineItemTemplate v-slot="{ item, active, index }">
-    <slot :name="item.slot || 'item'" :item="item" :index="index">
-      <slot :name="item.slot ? `${item.slot}-leading` : 'item-leading'" :item="item" :active="active" :index="index">
-        <UIcon v-if="item.loading" :name="loadingIcon || appConfig.ui.icons.loading" :class="ui.itemLeadingIcon({ class: [uiOverride?.itemLeadingIcon, item.ui?.itemLeadingIcon], color: item?.color, loading: true })" />
-        <UIcon v-else-if="item.icon" :name="item.icon" :class="ui.itemLeadingIcon({ class: [uiOverride?.itemLeadingIcon, item.ui?.itemLeadingIcon], color: item?.color, active })" />
-        <UAvatar v-else-if="item.avatar" :size="item.ui?.itemLeadingAvatarSize || props.uiOverride?.itemLeadingAvatarSize || ui.itemLeadingAvatarSize()" v-bind="item.avatar" :class="ui.itemLeadingAvatar({ class: [uiOverride?.itemLeadingAvatar, item.ui?.itemLeadingAvatar], active })" />
-      </slot>
-
-      <span v-if="get(item, props.labelKey) || !!slots[item.slot ? `${item.slot}-label` : 'item-label']" :class="ui.itemLabel({ class: [uiOverride?.itemLabel, item.ui?.itemLabel], active })">
-        <slot :name="item.slot ? `${item.slot}-label` : 'item-label'" :item="item" :active="active" :index="index">
-          {{ get(item, props.labelKey) }}
-        </slot>
-
-        <UIcon v-if="item.target === '_blank' && externalIcon !== false" :name="typeof externalIcon === 'string' ? externalIcon : appConfig.ui.icons.external" :class="ui.itemLabelExternalIcon({ class: [uiOverride?.itemLabelExternalIcon, item.ui?.itemLabelExternalIcon], color: item?.color, active })" />
-      </span>
-
-      <span :class="ui.itemTrailing({ class: [uiOverride?.itemTrailing, item.ui?.itemTrailing] })">
-        <slot :name="item.slot ? `${item.slot}-trailing` : 'item-trailing'" :item="item" :active="active" :index="index">
-          <UIcon v-if="item.children?.length" :name="childrenIcon" :class="ui.itemTrailingIcon({ class: [uiOverride?.itemTrailingIcon, item.ui?.itemTrailingIcon], color: item?.color, active })" />
-          <span v-else-if="item.kbds?.length" :class="ui.itemTrailingKbds({ class: [uiOverride?.itemTrailingKbds, item.ui?.itemTrailingKbds] })">
-            <UKbd v-for="(kbd, kbdIndex) in item.kbds" :key="kbdIndex" :size="item.ui?.itemTrailingKbdsSize || props.uiOverride?.itemTrailingKbdsSize || ui.itemTrailingKbdsSize()" v-bind="typeof kbd === 'string' ? { value: kbd } : kbd" />
-          </span>
-        </slot>
-
-        <DropdownMenu.ItemIndicator as-child>
-          <UIcon :name="checkedIcon || appConfig.ui.icons.check" :class="ui.itemTrailingIcon({ class: [uiOverride?.itemTrailingIcon, item.ui?.itemTrailingIcon], color: item?.color })" />
-        </DropdownMenu.ItemIndicator>
-      </span>
-    </slot>
-  </DefineItemTemplate>
-
-  <DropdownMenu.Portal v-bind="portalProps">
-    <component :is="sub ? DropdownMenu.SubContent : DropdownMenu.Content" :class="props.class" v-bind="contentProps">
-      <slot name="content-top" />
-
-      <div role="presentation" :class="ui.viewport({ class: props.ui?.viewport })">
-        <DropdownMenu.Group v-for="(group, groupIndex) in groups" :key="`group-${groupIndex}`" :class="ui.group({ class: uiOverride?.group })">
-          <template v-for="(item, index) in group" :key="`group-${groupIndex}-${index}`">
-            <DropdownMenu.Label v-if="item.type === 'label'" :class="ui.label({ class: [uiOverride?.label, item.ui?.label, item.class] })">
-              <ReuseItemTemplate :item="item" :index="index" />
-            </DropdownMenu.Label>
-            <DropdownMenu.Separator v-else-if="item.type === 'separator'" :class="ui.separator({ class: [uiOverride?.separator, item.ui?.separator, item.class] })" />
-            <DropdownMenu.Sub v-else-if="item?.children?.length" :open="item.open" :default-open="item.defaultOpen">
-              <DropdownMenu.SubTrigger
-                as="button"
-                type="button"
-                :disabled="item.disabled"
-                :text-value="get(item, props.labelKey)"
-                :class="ui.item({ class: [uiOverride?.item, item.ui?.item, item.class], color: item?.color })"
-              >
-                <ReuseItemTemplate :item="item" :index="index" />
-              </DropdownMenu.SubTrigger>
-
-              <UDropdownMenuContent
-                sub
-                :class="props.class"
-                :ui="ui"
-                :ui-override="uiOverride"
-                :portal="portal"
-                :items="item.children"
-                align="start"
-                :align-offset="-4"
-                :side-offset="3"
-                :label-key="labelKey"
-                :checked-icon="checkedIcon"
-                :loading-icon="loadingIcon"
-                :external-icon="externalIcon"
-                v-bind="item.content"
-              >
-                <template v-for="(_, name) in proxySlots" #[name]="slotData">
-                  <slot :name="name" v-bind="slotData" />
-                </template>
-              </UDropdownMenuContent>
-            </DropdownMenu.Sub>
-            <DropdownMenu.CheckboxItem
-              v-else-if="item.type === 'checkbox'"
-              :model-value="item.checked"
-              :disabled="item.disabled"
-              :text-value="get(item, props.labelKey)"
-              :class="ui.item({ class: [uiOverride?.item, item.ui?.item, item.class], color: item?.color })"
-              @update:model-value="item.onUpdateChecked"
-              @select="item.onSelect"
-            >
-              <ReuseItemTemplate :item="item" :index="index" />
-            </DropdownMenu.CheckboxItem>
-            <DropdownMenu.Item
-              v-else
-              as-child
-              :disabled="item.disabled"
-              :text-value="get(item, props.labelKey)"
-              @select="item.onSelect"
-            >
-              <ULink v-slot="{ active, ...slotProps }" v-bind="pickLinkProps(item)" custom>
-                <ULinkBase v-bind="slotProps" :class="ui.item({ class: [uiOverride?.item, item.ui?.item, item.class], color: item?.color, active })">
-                  <ReuseItemTemplate :item="item" :active="active" :index="index" />
-                </ULinkBase>
-              </ULink>
-            </DropdownMenu.Item>
-          </template>
-        </DropdownMenu.Group>
-      </div>
-
-      <slot />
-
-      <slot name="content-bottom" />
-    </component>
-  </DropdownMenu.Portal>
+  <DefineItemTemplate v-slot="{ item, active, index }">
+    <slot :name="item.slot || 'item'" :item="item" :index="index">
+      <slot :name="item.slot ? `${item.slot}-leading` : 'item-leading'" :item="item" :active="active" :index="index">
+        <UIcon v-if="item.loading" :name="loadingIcon || appConfig.ui.icons.loading" :class="ui.itemLeadingIcon({ class: [uiOverride?.itemLeadingIcon, item.ui?.itemLeadingIcon], color: item?.color, loading: true })" />
+        <UIcon v-else-if="item.icon" :name="item.icon" :class="ui.itemLeadingIcon({ class: [uiOverride?.itemLeadingIcon, item.ui?.itemLeadingIcon], color: item?.color, active })" />
+        <UAvatar v-else-if="item.avatar" :size="item.ui?.itemLeadingAvatarSize || props.uiOverride?.itemLeadingAvatarSize || ui.itemLeadingAvatarSize()" v-bind="item.avatar" :class="ui.itemLeadingAvatar({ class: [uiOverride?.itemLeadingAvatar, item.ui?.itemLeadingAvatar], active })" />
+      </slot>
+
+      <span v-if="get(item, props.labelKey) || !!slots[item.slot ? `${item.slot}-label` : 'item-label']" :class="ui.itemLabel({ class: [uiOverride?.itemLabel, item.ui?.itemLabel], active })">
+        <slot :name="item.slot ? `${item.slot}-label` : 'item-label'" :item="item" :active="active" :index="index">
+          {{ get(item, props.labelKey) }}
+        </slot>
+
+        <UIcon v-if="item.target === '_blank' && externalIcon !== false" :name="typeof externalIcon === 'string' ? externalIcon : appConfig.ui.icons.external" :class="ui.itemLabelExternalIcon({ class: [uiOverride?.itemLabelExternalIcon, item.ui?.itemLabelExternalIcon], color: item?.color, active })" />
+      </span>
+
+      <span :class="ui.itemTrailing({ class: [uiOverride?.itemTrailing, item.ui?.itemTrailing] })">
+        <slot :name="item.slot ? `${item.slot}-trailing` : 'item-trailing'" :item="item" :active="active" :index="index">
+          <UIcon v-if="item.children?.length" :name="childrenIcon" :class="ui.itemTrailingIcon({ class: [uiOverride?.itemTrailingIcon, item.ui?.itemTrailingIcon], color: item?.color, active })" />
+          <span v-else-if="item.kbds?.length" :class="ui.itemTrailingKbds({ class: [uiOverride?.itemTrailingKbds, item.ui?.itemTrailingKbds] })">
+            <UKbd v-for="(kbd, kbdIndex) in item.kbds" :key="kbdIndex" :size="item.ui?.itemTrailingKbdsSize || props.uiOverride?.itemTrailingKbdsSize || ui.itemTrailingKbdsSize()" v-bind="typeof kbd === 'string' ? { value: kbd } : kbd" />
+          </span>
+        </slot>
+
+        <DropdownMenu.ItemIndicator as-child>
+          <UIcon :name="checkedIcon || appConfig.ui.icons.check" :class="ui.itemTrailingIcon({ class: [uiOverride?.itemTrailingIcon, item.ui?.itemTrailingIcon], color: item?.color })" />
+        </DropdownMenu.ItemIndicator>
+      </span>
+    </slot>
+  </DefineItemTemplate>
+
+  <DropdownMenu.Portal v-bind="portalProps">
+    <component :is="sub ? DropdownMenu.SubContent : DropdownMenu.Content" :class="props.class" v-bind="contentProps">
+      <slot name="content-top" />
+
+      <div role="presentation" :class="ui.viewport({ class: props.ui?.viewport })">
+        <DropdownMenu.Group v-for="(group, groupIndex) in groups" :key="`group-${groupIndex}`" :class="ui.group({ class: uiOverride?.group })">
+          <template v-for="(item, index) in group" :key="`group-${groupIndex}-${index}`">
+            <DropdownMenu.Label v-if="item.type === 'label'" :class="ui.label({ class: [uiOverride?.label, item.ui?.label, item.class] })">
+              <ReuseItemTemplate :item="item" :index="index" />
+            </DropdownMenu.Label>
+            <DropdownMenu.Separator v-else-if="item.type === 'separator'" :class="ui.separator({ class: [uiOverride?.separator, item.ui?.separator, item.class] })" />
+            <DropdownMenu.Sub v-else-if="item?.children?.length" :open="item.open" :default-open="item.defaultOpen">
+              <DropdownMenu.SubTrigger
+                as="button"
+                type="button"
+                :disabled="item.disabled"
+                :text-value="get(item, props.labelKey)"
+                :class="ui.item({ class: [uiOverride?.item, item.ui?.item, item.class], color: item?.color })"
+              >
+                <ReuseItemTemplate :item="item" :index="index" />
+              </DropdownMenu.SubTrigger>
+
+              <UDropdownMenuContent
+                sub
+                :class="props.class"
+                :ui="ui"
+                :ui-override="uiOverride"
+                :portal="portal"
+                :items="item.children"
+                align="start"
+                :align-offset="-4"
+                :side-offset="3"
+                :label-key="labelKey"
+                :checked-icon="checkedIcon"
+                :loading-icon="loadingIcon"
+                :external-icon="externalIcon"
+                v-bind="item.content"
+              >
+                <template v-for="(_, name) in proxySlots" #[name]="slotData">
+                  <slot :name="name" v-bind="slotData" />
+                </template>
+              </UDropdownMenuContent>
+            </DropdownMenu.Sub>
+            <DropdownMenu.CheckboxItem
+              v-else-if="item.type === 'checkbox'"
+              :model-value="item.checked"
+              :disabled="item.disabled"
+              :text-value="get(item, props.labelKey)"
+              :class="ui.item({ class: [uiOverride?.item, item.ui?.item, item.class], color: item?.color })"
+              @update:model-value="item.onUpdateChecked"
+              @select="item.onSelect"
+            >
+              <ReuseItemTemplate :item="item" :index="index" />
+            </DropdownMenu.CheckboxItem>
+            <DropdownMenu.Item
+              v-else
+              as-child
+              :disabled="item.disabled"
+              :text-value="get(item, props.labelKey)"
+              @select="item.onSelect"
+            >
+              <ULink v-slot="{ active, ...slotProps }" v-bind="pickLinkProps(item)" custom>
+                <ULinkBase v-bind="slotProps" :class="ui.item({ class: [uiOverride?.item, item.ui?.item, item.class], color: item?.color, active })">
+                  <ReuseItemTemplate :item="item" :active="active" :index="index" />
+                </ULinkBase>
+              </ULink>
+            </DropdownMenu.Item>
+          </template>
+        </DropdownMenu.Group>
+      </div>
+
+      <slot />
+
+      <slot name="content-bottom" />
+    </component>
+  </DropdownMenu.Portal>
 </template>

package/dist/runtime/components/Error.vue

@@ -32,26 +32,26 @@ const handleError = () => {
 </script>
 
 <template>
-  <Primitive :as="as" :class="uiPro.root({ class: [props.ui?.root, props.class] })">
-    <p :class="uiPro.statusCode({ class: props.ui?.statusCode })">
-      {{ props.error?.statusCode }}
-    </p>
-    <h1 v-if="props.error?.statusMessage" :class="uiPro.statusMessage({ class: props.ui?.statusMessage })">
-      {{ props.error.statusMessage }}
-    </h1>
-    <p v-if="props.error?.message && props.error.message !== props.error.statusMessage" :class="uiPro.message({ class: props.ui?.message })">
-      {{ props.error?.message }}
-    </p>
-    <div :class="uiPro.links({ class: props.ui?.links })">
-      <UButton
-        v-if="clear"
-        size="lg"
-        color="primary"
-        variant="solid"
-        :label="t('error.clear')"
-        v-bind="typeof clear === 'object' ? clear : {}"
-        @click="handleError"
-      />
-    </div>
-  </Primitive>
+  <Primitive :as="as" :class="uiPro.root({ class: [props.ui?.root, props.class] })">
+    <p :class="uiPro.statusCode({ class: props.ui?.statusCode })">
+      {{ props.error?.statusCode }}
+    </p>
+    <h1 v-if="props.error?.statusMessage" :class="uiPro.statusMessage({ class: props.ui?.statusMessage })">
+      {{ props.error.statusMessage }}
+    </h1>
+    <p v-if="props.error?.message && props.error.message !== props.error.statusMessage" :class="uiPro.message({ class: props.ui?.message })">
+      {{ props.error?.message }}
+    </p>
+    <div :class="uiPro.links({ class: props.ui?.links })">
+      <UButton
+        v-if="clear"
+        size="lg"
+        color="primary"
+        variant="solid"
+        :label="t('error.clear')"
+        v-bind="typeof clear === 'object' ? clear : {}"
+        @click="handleError"
+      />
+    </div>
+  </Primitive>
 </template>

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

@@ -6,7 +6,7 @@ type Error = ComponentConfig<typeof theme, AppConfig, 'error'>;
 export interface ErrorProps {
     /**
      * The element or component this component should render as.
-     * @defaultValue 'div'
+     * @defaultValue 'main'
      */
     as?: any;
     error?: Partial<NuxtError & {

package/dist/runtime/components/Footer.vue

@@ -0,0 +1,44 @@
+<script>
+import theme from "#build/ui/footer";
+</script>
+
+<script setup>
+import { computed } from "vue";
+import { Primitive } from "reka-ui";
+import { useAppConfig } from "#imports";
+import { tv } from "../utils/tv";
+const props = defineProps({
+  as: { type: null, required: false, default: "footer" },
+  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?.footer || {} })());
+</script>
+
+<template>
+  <Primitive :as="as" :class="ui.root({ class: [props.ui?.root, props.class] })">
+    <div v-if="!!slots.top" :class="ui.top({ class: props.ui?.top })">
+      <slot name="top" />
+    </div>
+
+    <UContainer :class="ui.container({ class: props.ui?.container })">
+      <div :class="ui.right({ class: props.ui?.right })">
+        <slot name="right" />
+      </div>
+
+      <div :class="ui.center({ class: props.ui?.center })">
+        <slot />
+      </div>
+
+      <div :class="ui.left({ class: props.ui?.left })">
+        <slot name="left" />
+      </div>
+    </UContainer>
+
+    <div v-if="!!slots.bottom" :class="ui.bottom({ class: props.ui?.bottom })">
+      <slot name="bottom" />
+    </div>
+  </Primitive>
+</template>

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

@@ -0,0 +1,29 @@
+import theme from '#build/ui/footer';
+import type { AppConfig } from '@nuxt/schema';
+import type { ComponentConfig } from '../types';
+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;
+    ui?: Footer['slots'];
+}
+export interface FooterSlots {
+    left(props?: {}): any;
+    default(props?: {}): any;
+    right(props?: {}): any;
+    top(props?: {}): any;
+    bottom(props?: {}): any;
+}
+declare const _default: __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>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/FooterColumns.vue

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

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

@@ -0,0 +1,52 @@
+import theme from '#build/ui/footer-columns';
+import type { AppConfig } from '@nuxt/schema';
+import type { LinkProps, ComponentConfig } from '../types';
+type FooterColumns = ComponentConfig<typeof theme, AppConfig, 'footerColumns'>;
+export interface FooterColumnLink extends Omit<LinkProps, 'custom'> {
+    label: string;
+    /**
+     * @IconifyIcon
+     */
+    icon?: string;
+    class?: any;
+    ui?: 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>[];
+    ui?: FooterColumns['slots'];
+}
+type SlotProps<T> = (props: {
+    link: T;
+    active: boolean;
+}) => 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': SlotProps<T>;
+    'link-trailing': SlotProps<T>;
+}
+declare const _default: __VLS_WithSlots<import("vue").DefineComponent<FooterColumnsProps<FooterColumnLink>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<FooterColumnsProps<FooterColumnLink>> & Readonly<{}>, {
+    as: any;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, FooterColumnsSlots<FooterColumnLink>>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/Form.vue

@@ -199,12 +199,12 @@ defineExpose({
 </script>
 
 <template>
-  <component
-    :is="parentBus ? 'div' : 'form'"
-    :id="formId"
-    :class="ui({ class: props.class })"
-    @submit.prevent="onSubmitWrapper"
-  >
-    <slot :errors="errors" :loading="loading" />
-  </component>
+  <component
+    :is="parentBus ? 'div' : 'form'"
+    :id="formId"
+    :class="ui({ class: props.class })"
+    @submit.prevent="onSubmitWrapper"
+  >
+    <slot :errors="errors" :loading="loading" />
+  </component>
 </template>

package/dist/runtime/components/FormField.vue

@@ -50,41 +50,41 @@ provide(formFieldInjectionKey, computed(() => ({
 </script>
 
 <template>
-  <Primitive :as="as" :class="ui.root({ class: [props.ui?.root, props.class] })">
-    <div :class="ui.wrapper({ class: props.ui?.wrapper })">
-      <div v-if="label || !!slots.label" :class="ui.labelWrapper({ class: props.ui?.labelWrapper })">
-        <Label :for="id" :class="ui.label({ class: props.ui?.label })">
-          <slot name="label" :label="label">
-            {{ label }}
-          </slot>
-        </Label>
-        <span v-if="hint || !!slots.hint" :id="`${ariaId}-hint`" :class="ui.hint({ class: props.ui?.hint })">
-          <slot name="hint" :hint="hint">
-            {{ hint }}
-          </slot>
-        </span>
-      </div>
-
-      <p v-if="description || !!slots.description" :id="`${ariaId}-description`" :class="ui.description({ class: props.ui?.description })">
-        <slot name="description" :description="description">
-          {{ description }}
-        </slot>
-      </p>
-    </div>
-
-    <div :class="[(label || !!slots.label || description || !!slots.description) && ui.container({ class: props.ui?.container })]">
-      <slot :error="error" />
-
-      <div v-if="typeof error === 'string' && error || !!slots.error" :id="`${ariaId}-error`" :class="ui.error({ class: props.ui?.error })">
-        <slot name="error" :error="error">
-          {{ error }}
-        </slot>
-      </div>
-      <div v-else-if="help || !!slots.help" :class="ui.help({ class: props.ui?.help })">
-        <slot name="help" :help="help">
-          {{ help }}
-        </slot>
-      </div>
-    </div>
-  </Primitive>
+  <Primitive :as="as" :class="ui.root({ class: [props.ui?.root, props.class] })">
+    <div :class="ui.wrapper({ class: props.ui?.wrapper })">
+      <div v-if="label || !!slots.label" :class="ui.labelWrapper({ class: props.ui?.labelWrapper })">
+        <Label :for="id" :class="ui.label({ class: props.ui?.label })">
+          <slot name="label" :label="label">
+            {{ label }}
+          </slot>
+        </Label>
+        <span v-if="hint || !!slots.hint" :id="`${ariaId}-hint`" :class="ui.hint({ class: props.ui?.hint })">
+          <slot name="hint" :hint="hint">
+            {{ hint }}
+          </slot>
+        </span>
+      </div>
+
+      <p v-if="description || !!slots.description" :id="`${ariaId}-description`" :class="ui.description({ class: props.ui?.description })">
+        <slot name="description" :description="description">
+          {{ description }}
+        </slot>
+      </p>
+    </div>
+
+    <div :class="[(label || !!slots.label || description || !!slots.description) && ui.container({ class: props.ui?.container })]">
+      <slot :error="error" />
+
+      <div v-if="typeof error === 'string' && error || !!slots.error" :id="`${ariaId}-error`" :class="ui.error({ class: props.ui?.error })">
+        <slot name="error" :error="error">
+          {{ error }}
+        </slot>
+      </div>
+      <div v-else-if="help || !!slots.help" :class="ui.help({ class: props.ui?.help })">
+        <slot name="help" :help="help">
+          {{ help }}
+        </slot>
+      </div>
+    </div>
+  </Primitive>
 </template>