@nuxt/ui 2.18.4 → 3.0.0-alpha.1

package/dist/runtime/components/Accordion.vue

@@ -0,0 +1,110 @@
+<script lang="ts">
+import { tv } from 'tailwind-variants'
+import type { AccordionRootProps, AccordionRootEmits, AccordionItemProps } from 'radix-vue'
+import type { AppConfig } from '@nuxt/schema'
+import _appConfig from '#build/app.config'
+import theme from '#build/ui/accordion'
+import type { DynamicSlots } from '../types/utils'
+
+const appConfig = _appConfig as AppConfig & { ui: { accordion: Partial<typeof theme> } }
+
+const accordion = tv({ extend: tv(theme), ...(appConfig.ui?.accordion || {}) })
+
+export interface AccordionItem extends Pick<AccordionItemProps, 'disabled'> {
+  label?: string
+  icon?: string
+  trailingIcon?: string
+  slot?: string
+  content?: string
+  /** A unique value for the accordion item. Defaults to the index. */
+  value?: string
+}
+
+export interface AccordionProps<T> extends Pick<AccordionRootProps, 'collapsible' | 'defaultValue' | 'modelValue' | 'type' | 'disabled'> {
+  /**
+   * The element or component this component should render as.
+   * @defaultValue 'div'
+   */
+  as?: any
+  items?: T[]
+  /**
+   * The icon displayed on the right side of the trigger.
+   * @defaultValue appConfig.ui.icons.chevronDown
+   */
+  trailingIcon?: string
+  class?: any
+  ui?: Partial<typeof accordion.slots>
+}
+
+export interface AccordionEmits extends AccordionRootEmits {}
+
+type SlotProps<T> = (props: { item: T, index: number, open: boolean }) => any
+
+export type AccordionSlots<T extends { slot?: string }> = {
+  leading: SlotProps<T>
+  default: SlotProps<T>
+  trailing: SlotProps<T>
+  content: SlotProps<T>
+  body: SlotProps<T>
+} & DynamicSlots<T, SlotProps<T>>
+</script>
+
+<script setup lang="ts" generic="T extends AccordionItem">
+import { computed } from 'vue'
+import { AccordionRoot, AccordionItem, AccordionHeader, AccordionTrigger, AccordionContent, useForwardPropsEmits } from 'radix-vue'
+import { reactivePick } from '@vueuse/core'
+import { useAppConfig } from '#imports'
+
+const props = withDefaults(defineProps<AccordionProps<T>>(), {
+  type: 'single',
+  collapsible: true
+})
+const emits = defineEmits<AccordionEmits>()
+const slots = defineSlots<AccordionSlots<T>>()
+
+const appConfig = useAppConfig()
+const rootProps = useForwardPropsEmits(reactivePick(props, 'as', 'collapsible', 'defaultValue', 'disabled', 'modelValue', 'type'), emits)
+
+const ui = computed(() => accordion({
+  disabled: props.disabled
+}))
+</script>
+
+<template>
+  <AccordionRoot v-bind="rootProps" :class="ui.root({ class: [props.class, props.ui?.root] })">
+    <AccordionItem
+      v-for="(item, index) in items"
+      v-slot="{ open }"
+      :key="index"
+      :value="item.value || String(index)"
+      :disabled="item.disabled"
+      :class="ui.item({ class: props.ui?.item })"
+    >
+      <AccordionHeader :class="ui.header({ class: props.ui?.header })">
+        <AccordionTrigger :class="ui.trigger({ class: props.ui?.trigger, disabled: item.disabled })">
+          <slot name="leading" :item="item" :index="index" :open="open">
+            <UIcon v-if="item.icon" :name="item.icon" :class="ui.leadingIcon({ class: props.ui?.leadingIcon })" />
+          </slot>
+
+          <span v-if="item.label || !!slots.default" :class="ui.label({ class: props.ui?.label })">
+            <slot :item="item" :index="index" :open="open">{{ item.label }}</slot>
+          </span>
+
+          <slot name="trailing" :item="item" :index="index" :open="open">
+            <UIcon :name="item.trailingIcon || trailingIcon || appConfig.ui.icons.chevronDown" :class="ui.trailingIcon({ class: props.ui?.trailingIcon })" />
+          </slot>
+        </AccordionTrigger>
+      </AccordionHeader>
+
+      <AccordionContent v-if="item.content || !!slots.content || (item.slot && !!slots[item.slot]) || !!slots.body || (item.slot && !!slots[`${item.slot}-body`])" :class="ui.content({ class: props.ui?.content })">
+        <slot :name="item.slot || 'content'" :item="item" :index="index" :open="open">
+          <div :class="ui.body({ class: props.ui?.body })">
+            <slot :name="item.slot ? `${item.slot}-body`: 'body'" :item="item" :index="index" :open="open">
+              {{ item.content }}
+            </slot>
+          </div>
+        </slot>
+      </AccordionContent>
+    </AccordionItem>
+  </AccordionRoot>
+</template>

package/dist/runtime/components/Alert.vue

@@ -0,0 +1,130 @@
+<script lang="ts">
+import { tv, type VariantProps } from 'tailwind-variants'
+import type { AppConfig } from '@nuxt/schema'
+import _appConfig from '#build/app.config'
+import theme from '#build/ui/alert'
+import type { AvatarProps, ButtonProps } from '../types'
+
+const appConfig = _appConfig as AppConfig & { ui: { alert: Partial<typeof theme> } }
+
+const alert = tv({ extend: tv(theme), ...(appConfig.ui?.alert || {}) })
+
+type AlertVariants = VariantProps<typeof alert>
+
+export interface AlertProps {
+  /**
+   * The element or component this component should render as.
+   * @defaultValue 'div'
+   */
+  as?: any
+  title?: string
+  description?: string
+  icon?: string
+  avatar?: AvatarProps
+  color?: AlertVariants['color']
+  variant?: AlertVariants['variant']
+  /**
+   * Display a list of actions:
+   * - under the title and description if multiline
+   * - next to the close button if not multiline
+   */
+  actions?: ButtonProps[]
+  /**
+   * Display a close button to dismiss the alert.
+   * `{ size: 'md', color: 'gray', variant: 'link' }`{lang="ts-type"}
+   * @emits `close`
+   * @defaultValue false
+   */
+  close?: ButtonProps | boolean
+  /**
+   * The icon displayed in the close button.
+   * @defaultValue appConfig.ui.icons.close
+   */
+  closeIcon?: string
+  class?: any
+  ui?: Partial<typeof alert.slots>
+}
+
+export interface AlertEmits {
+  (e: 'close'): void
+}
+
+export interface AlertSlots {
+  leading(props?: {}): any
+  title(props?: {}): any
+  description(props?: {}): any
+  actions(props?: {}): any
+  close(props: { ui: any }): any
+}
+</script>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import { Primitive } from 'radix-vue'
+import { useAppConfig } from '#imports'
+import UIcon from './Icon.vue'
+import UAvatar from './Avatar.vue'
+
+const props = defineProps<AlertProps>()
+const emits = defineEmits<AlertEmits>()
+const slots = defineSlots<AlertSlots>()
+
+const appConfig = useAppConfig()
+
+const multiline = computed(() => !!props.title && !!props.description)
+
+const ui = computed(() => alert({
+  color: props.color,
+  variant: props.variant
+}))
+</script>
+
+<template>
+  <Primitive :as="as" :class="ui.root({ class: [props.class, props.ui?.root], multiline })">
+    <slot name="leading">
+      <UAvatar v-if="avatar" :size="((props.ui?.avatarSize || ui.avatarSize()) as AvatarProps['size'])" v-bind="avatar" :class="ui.avatar({ class: props.ui?.avatar })" />
+      <UIcon v-else-if="icon" :name="icon" :class="ui.icon({ class: props.ui?.icon })" />
+    </slot>
+
+    <div :class="ui.wrapper({ class: props.ui?.wrapper })">
+      <div v-if="title || !!slots.title" :class="ui.title({ class: props.ui?.title })">
+        <slot name="title">
+          {{ title }}
+        </slot>
+      </div>
+      <div v-if="description || !!slots.description" :class="ui.description({ class: props.ui?.description })">
+        <slot name="description">
+          {{ description }}
+        </slot>
+      </div>
+
+      <div v-if="multiline && actions?.length" :class="ui.actions({ class: props.ui?.actions, multiline: true })">
+        <slot name="actions">
+          <UButton v-for="(action, index) in actions" :key="index" size="xs" v-bind="action" />
+        </slot>
+      </div>
+    </div>
+
+    <div v-if="(!multiline && actions?.length) || close" :class="ui.actions({ class: props.ui?.actions, multiline: false })">
+      <template v-if="!multiline">
+        <slot name="actions">
+          <UButton v-for="(action, index) in actions" :key="index" size="xs" v-bind="action" />
+        </slot>
+      </template>
+
+      <slot name="close" :ui="ui">
+        <UButton
+          v-if="close"
+          :icon="closeIcon || appConfig.ui.icons.close"
+          size="md"
+          color="gray"
+          variant="link"
+          aria-label="Close"
+          v-bind="typeof close === 'object' ? close : undefined"
+          :class="ui.close({ class: props.ui?.close })"
+          @click="emits('close')"
+        />
+      </slot>
+    </div>
+  </Primitive>
+</template>

package/dist/runtime/components/App.vue

@@ -0,0 +1,42 @@
+<script lang="ts">
+import type { ConfigProviderProps, TooltipProviderProps } from 'radix-vue'
+import type { ToasterProps } from '../types'
+
+export interface AppProps extends Omit<ConfigProviderProps, 'useId'> {
+  tooltip?: TooltipProviderProps
+  toaster?: ToasterProps | null
+}
+
+export interface AppSlots {
+  default(props?: {}): any
+}
+</script>
+
+<script setup lang="ts">
+import { toRef, useId } from 'vue'
+import { ConfigProvider, TooltipProvider, useForwardProps } from 'radix-vue'
+import { reactivePick } from '@vueuse/core'
+import UToaster from './Toaster.vue'
+import UModalProvider from './ModalProvider.vue'
+import USlideoverProvider from './SlideoverProvider.vue'
+
+const props = defineProps<AppProps>()
+defineSlots<AppSlots>()
+
+const configProviderProps = useForwardProps(reactivePick(props, 'dir', 'scrollBody'))
+const tooltipProps = toRef(() => props.tooltip)
+const toasterProps = toRef(() => props.toaster)
+</script>
+
+<template>
+  <ConfigProvider :use-id="() => (useId() as string)" v-bind="configProviderProps">
+    <TooltipProvider v-bind="tooltipProps">
+      <UToaster v-if="toaster !== null" v-bind="toasterProps">
+        <slot />
+      </UToaster>
+    </TooltipProvider>
+
+    <UModalProvider />
+    <USlideoverProvider />
+  </ConfigProvider>
+</template>

package/dist/runtime/components/Avatar.vue

@@ -0,0 +1,69 @@
+<script lang="ts">
+import { tv, type VariantProps } from 'tailwind-variants'
+import type { AvatarFallbackProps } from 'radix-vue'
+import type { AppConfig } from '@nuxt/schema'
+import _appConfig from '#build/app.config'
+import theme from '#build/ui/avatar'
+
+const appConfig = _appConfig as AppConfig & { ui: { avatar: Partial<typeof theme> } }
+
+const avatar = tv({ extend: tv(theme), ...(appConfig.ui?.avatar || {}) })
+
+type AvatarVariants = VariantProps<typeof avatar>
+
+export interface AvatarProps extends Pick<AvatarFallbackProps, 'delayMs'> {
+  /**
+   * The element or component this component should render as.
+   * @defaultValue 'img'
+   */
+  as?: string | object
+  src?: string
+  alt?: string
+  icon?: string
+  text?: string
+  size?: AvatarVariants['size']
+  class?: any
+  ui?: Partial<typeof avatar.slots>
+}
+</script>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import { AvatarRoot, AvatarImage, AvatarFallback, useForwardProps } from 'radix-vue'
+import { reactivePick } from '@vueuse/core'
+import { useAvatarGroup } from '../composables/useAvatarGroup'
+import UIcon from './Icon.vue'
+
+defineOptions({ inheritAttrs: false })
+
+const props = defineProps<AvatarProps>()
+
+const fallbackProps = useForwardProps(reactivePick(props, 'delayMs'))
+
+const fallback = computed(() => props.text || (props.alt || '').split(' ').map(word => word.charAt(0)).join('').substring(0, 2))
+
+const { size } = useAvatarGroup(props)
+
+// eslint-disable-next-line vue/no-dupe-keys
+const ui = computed(() => avatar({
+  size: size.value
+}))
+</script>
+
+<template>
+  <AvatarRoot :class="ui.root({ class: [props.class, props.ui?.root] })">
+    <AvatarImage
+      v-if="src"
+      :as="as"
+      :src="src"
+      :alt="alt"
+      v-bind="$attrs"
+      :class="ui.image({ class: props.ui?.image })"
+    />
+
+    <AvatarFallback as-child v-bind="fallbackProps">
+      <UIcon v-if="icon" :name="icon" :class="ui.icon({ class: props.ui?.icon })" />
+      <span v-else :class="ui.fallback({ class: props.ui?.fallback })">{{ fallback }}</span>
+    </AvatarFallback>
+  </AvatarRoot>
+</template>

package/dist/runtime/components/AvatarGroup.vue

@@ -0,0 +1,98 @@
+<script lang="ts">
+import { tv, type VariantProps } from 'tailwind-variants'
+import type { AppConfig } from '@nuxt/schema'
+import _appConfig from '#build/app.config'
+import theme from '#build/ui/avatar-group'
+
+const appConfig = _appConfig as AppConfig & { ui: { avatarGroup: Partial<typeof theme> } }
+
+const avatarGroup = tv({ extend: tv(theme), ...(appConfig.ui?.avatarGroup || {}) })
+
+type AvatarGroupVariants = VariantProps<typeof avatarGroup>
+
+export interface AvatarGroupProps {
+  /**
+   * The element or component this component should render as.
+   * @defaultValue 'div'
+   */
+  as?: any
+  size?: AvatarGroupVariants['size']
+  /**
+   * The maximum number of avatars to display.
+   */
+  max?: number | string
+  class?: any
+  ui?: Partial<typeof avatarGroup.slots>
+}
+
+export interface AvatarGroupSlots {
+  default(props?: {}): any
+}
+</script>
+
+<script setup lang="ts">
+import { computed, provide } from 'vue'
+import { Primitive } from 'radix-vue'
+import { avatarGroupInjectionKey } from '../composables/useAvatarGroup'
+import UAvatar from './Avatar.vue'
+
+const props = defineProps<AvatarGroupProps>()
+const slots = defineSlots<AvatarGroupSlots>()
+
+const ui = computed(() => avatarGroup({
+  size: props.size
+}))
+
+const max = computed(() => typeof props.max === 'string' ? Number.parseInt(props.max, 10) : props.max)
+
+const children = computed(() => {
+  let children = slots.default?.()
+  if (children?.length) {
+    children = children.flatMap((child: any) => {
+      if (typeof child.type === 'symbol') {
+        // `v-if="false"` or commented node
+        if (typeof child.children === 'string') {
+          return
+        }
+
+        return child.children
+      }
+
+      return child
+    }).filter(Boolean)
+  }
+
+  return children || []
+})
+
+const visibleAvatars = computed(() => {
+  if (!children.value.length) {
+    return []
+  }
+
+  if (!max.value || max.value <= 0) {
+    return [...children.value].reverse()
+  }
+
+  return [...children.value].slice(0, max.value).reverse()
+})
+
+const hiddenCount = computed(() => {
+  if (!children.value.length) {
+    return 0
+  }
+
+  return children.value.length - visibleAvatars.value.length
+})
+
+provide(avatarGroupInjectionKey, computed(() => ({
+  size: props.size
+})))
+</script>
+
+<template>
+  <Primitive :as="as" :class="ui.root({ class: [props.class, props.ui?.root] })">
+    <UAvatar v-if="hiddenCount > 0" :text="`+${hiddenCount}`" :class="ui.base({ class: props.ui?.base })" />
+    <component :is="avatar" v-for="(avatar, count) in visibleAvatars" :key="count" :class="ui.base({ class: props.ui?.base })" />
+  </Primitive>
+</template>

package/dist/runtime/components/Badge.vue

@@ -0,0 +1,46 @@
+<script lang="ts">
+import { tv, type VariantProps } from 'tailwind-variants'
+import type { AppConfig } from '@nuxt/schema'
+import _appConfig from '#build/app.config'
+import theme from '#build/ui/badge'
+
+const appConfig = _appConfig as AppConfig & { ui: { badge: Partial<typeof theme> } }
+
+const badge = tv({ extend: tv(theme), ...(appConfig.ui?.badge || {}) })
+
+type BadgeVariants = VariantProps<typeof badge>
+
+export interface BadgeProps {
+  /**
+   * The element or component this component should render as.
+   * @defaultValue 'span'
+   */
+  as?: any
+  label?: string | number
+  color?: BadgeVariants['color']
+  variant?: BadgeVariants['variant']
+  size?: BadgeVariants['size']
+  class?: any
+}
+
+export interface BadgeSlots {
+  default(props?: {}): any
+}
+</script>
+
+<script setup lang="ts">
+import { Primitive } from 'radix-vue'
+
+const props = withDefaults(defineProps<BadgeProps>(), {
+  as: 'span'
+})
+defineSlots<BadgeSlots>()
+</script>
+
+<template>
+  <Primitive :as="as" :class="badge({ color, variant, size, class: props.class })">
+    <slot>
+      {{ label }}
+    </slot>
+  </Primitive>
+</template>

package/dist/runtime/components/Breadcrumb.vue

@@ -0,0 +1,98 @@
+<script lang="ts">
+import { tv } from 'tailwind-variants'
+import type { AppConfig } from '@nuxt/schema'
+import _appConfig from '#build/app.config'
+import theme from '#build/ui/breadcrumb'
+import type { AvatarProps, LinkProps } from '../types'
+import type { DynamicSlots } from '../types/utils'
+
+const appConfig = _appConfig as AppConfig & { ui: { breadcrumb: Partial<typeof theme> } }
+
+const breadcrumb = tv({ extend: tv(theme), ...(appConfig.ui?.breadcrumb || {}) })
+
+export interface BreadcrumbItem extends Omit<LinkProps, 'raw' | 'custom'> {
+  label?: string
+  icon?: string
+  avatar?: AvatarProps
+  slot?: string
+}
+
+export interface BreadcrumbProps<T> {
+  /**
+   * The element or component this component should render as.
+   * @defaultValue 'div'
+   */
+  as?: any
+  items?: T[]
+  /**
+   * The icon to use as a separator.
+   * @defaultValue appConfig.ui.icons.chevronRight
+   */
+  separatorIcon?: string
+  class?: any
+  ui?: Partial<typeof breadcrumb.slots>
+}
+
+type SlotProps<T> = (props: { item: T, index: number, active?: boolean }) => any
+
+export type BreadcrumbSlots<T extends { slot?: string }> = {
+  'item': SlotProps<T>
+  'item-leading': SlotProps<T>
+  'item-label': SlotProps<T>
+  'item-trailing': SlotProps<T>
+  'separator'(props?: {}): any
+} & DynamicSlots<T, SlotProps<T>>
+</script>
+
+<script setup lang="ts" generic="T extends BreadcrumbItem">
+import { Primitive } from 'radix-vue'
+import { useAppConfig } from '#imports'
+import UIcon from './Icon.vue'
+import UAvatar from './Avatar.vue'
+import ULinkBase from './LinkBase.vue'
+import ULink from './Link.vue'
+import { pickLinkProps } from '../utils/link'
+
+const props = defineProps<BreadcrumbProps<T>>()
+const slots = defineSlots<BreadcrumbSlots<T>>()
+
+const appConfig = useAppConfig()
+
+// eslint-disable-next-line vue/no-dupe-keys
+const ui = breadcrumb()
+</script>
+
+<template>
+  <Primitive :as="as" aria-label="breadcrumb" :class="ui.root({ class: [props.class, props.ui?.root] })">
+    <ol :class="ui.list({ class: props.ui?.list })">
+      <template v-for="(item, index) in items" :key="index">
+        <li :class="ui.item({ class: props.ui?.item })">
+          <ULink v-slot="{ active, ...slotProps }" v-bind="pickLinkProps(item)" custom>
+            <ULinkBase v-bind="slotProps" as="span" :aria-current="active && (index === items!.length - 1) ? 'page' : undefined" :class="ui.link({ class: [props.ui?.link, item.class], active: index === items!.length - 1, disabled: !!item.disabled, to: !!item.to })">
+              <slot :name="item.slot || 'item'" :item="item" :index="index">
+                <slot :name="item.slot ? `${item.slot}-leading`: 'item-leading'" :item="item" :active="index === items!.length - 1" :index="index">
+                  <UAvatar v-if="item.avatar" :size="((props.ui?.linkLeadingAvatarSize || ui.linkLeadingAvatarSize()) as AvatarProps['size'])" v-bind="item.avatar" :class="ui.linkLeadingAvatar({ class: props.ui?.linkLeadingAvatar, active: index === items!.length - 1 })" />
+                  <UIcon v-else-if="item.icon" :name="item.icon" :class="ui.linkLeadingIcon({ class: props.ui?.linkLeadingIcon, active: index === items!.length - 1 })" />
+                </slot>
+
+                <span v-if="item.label || !!slots[item.slot ? `${item.slot}-label`: 'item-label']" :class="ui.linkLabel({ class: props.ui?.linkLabel })">
+                  <slot :name="item.slot ? `${item.slot}-label`: 'item-label'" :item="item" :active="index === items!.length - 1" :index="index">
+                    {{ item.label }}
+                  </slot>
+                </span>
+
+                <slot :name="item.slot ? `${item.slot}-trailing`: 'item-trailing'" :item="item" :active="index === items!.length - 1" :index="index" />
+              </slot>
+            </ULinkBase>
+          </ULink>
+        </li>
+
+        <li v-if="index < items!.length - 1" role="presentation" :class="ui.separator({ class: props.ui?.separator })">
+          <slot name="separator">
+            <UIcon :name="separatorIcon || appConfig.ui.icons.chevronRight" :class="ui.separatorIcon({ class: props.ui?.separatorIcon })" />
+          </slot>
+        </li>
+      </template>
+    </ol>
+  </Primitive>
+</template>

package/dist/runtime/components/Button.vue

@@ -0,0 +1,82 @@
+<script lang="ts">
+import { tv, type VariantProps } from 'tailwind-variants'
+import type { AppConfig } from '@nuxt/schema'
+import _appConfig from '#build/app.config'
+import theme from '#build/ui/button'
+import type { LinkProps } from './Link.vue'
+import type { UseComponentIconsProps } from '../composables/useComponentIcons'
+import type { PartialString } from '../types/utils'
+
+const appConfig = _appConfig as AppConfig & { ui: { button: Partial<typeof theme> } }
+
+const button = tv({ extend: tv(theme), ...(appConfig.ui?.button || {}) })
+
+type ButtonVariants = VariantProps<typeof button>
+
+export interface ButtonProps extends UseComponentIconsProps, Omit<LinkProps, 'raw' | 'custom'> {
+  label?: string
+  color?: ButtonVariants['color']
+  variant?: ButtonVariants['variant']
+  size?: ButtonVariants['size']
+  /** Render the button with equal padding on all sides. */
+  square?: boolean
+  /** Render the button full width. */
+  block?: boolean
+  class?: any
+  ui?: PartialString<typeof button.slots>
+}
+
+export interface ButtonSlots {
+  leading(props?: {}): any
+  default(props?: {}): any
+  trailing(props?: {}): any
+}
+</script>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import { useForwardProps } from 'radix-vue'
+import { useComponentIcons } from '../composables/useComponentIcons'
+import { useButtonGroup } from '../composables/useButtonGroup'
+import UIcon from './Icon.vue'
+import ULink from './Link.vue'
+import { pickLinkProps } from '../utils/link'
+
+const props = defineProps<ButtonProps>()
+const slots = defineSlots<ButtonSlots>()
+
+const linkProps = useForwardProps(pickLinkProps(props))
+
+const { orientation, size: buttonSize } = useButtonGroup<ButtonProps>(props)
+const { isLeading, isTrailing, leadingIconName, trailingIconName } = useComponentIcons(props)
+
+const ui = computed(() => button({
+  color: props.color,
+  variant: props.variant,
+  size: buttonSize.value,
+  loading: props.loading,
+  block: props.block,
+  square: props.square || (!slots.default && !props.label),
+  leading: isLeading.value,
+  trailing: isTrailing.value,
+  buttonGroup: orientation.value
+}))
+</script>
+
+<template>
+  <ULink :type="type" :disabled="disabled || loading" :class="ui.base({ class: props.class })" v-bind="linkProps" raw>
+    <slot name="leading">
+      <UIcon v-if="isLeading && leadingIconName" :name="leadingIconName" :class="ui.leadingIcon({ class: props.ui?.leadingIcon })" />
+    </slot>
+
+    <slot>
+      <span v-if="label" :class="ui.label({ class: props.ui?.label })">
+        {{ label }}
+      </span>
+    </slot>
+
+    <slot name="trailing">
+      <UIcon v-if="isTrailing && trailingIconName" :name="trailingIconName" :class="ui.trailingIcon({ class: props.ui?.trailingIcon })" />
+    </slot>
+  </ULink>
+</template>