@bitrix24/b24ui-nuxt 0.1.7 → 0.2.2

package/dist/runtime/components/InputMenu.vue

@@ -0,0 +1,507 @@
+<script lang="ts">
+import type { InputHTMLAttributes } from 'vue'
+import type { VariantProps } from 'tailwind-variants'
+import type { ComboboxRootProps, ComboboxRootEmits, ComboboxContentProps, ComboboxArrowProps, AcceptableValue } from 'reka-ui'
+import type { AppConfig } from '@nuxt/schema'
+import _appConfig from '#build/app.config'
+import theme from '#build/b24ui/input-menu'
+import type { UseComponentIconsProps } from '../composables/useComponentIcons'
+import { tv } from '../utils/tv'
+import type { AvatarProps, ChipProps, InputProps, IconComponent } from '../types'
+import type { PartialString, MaybeArrayOfArray, MaybeArrayOfArrayItem, SelectModelValue, SelectModelValueEmits, SelectItemKey } from '../types/utils'
+
+const appConfigInputMenu = _appConfig as AppConfig & { b24ui: { inputMenu: Partial<typeof theme> } }
+
+const inputMenu = tv({ extend: tv(theme), ...(appConfigInputMenu.b24ui?.inputMenu || {}) })
+
+export interface InputMenuItem {
+  label?: string
+  icon?: IconComponent
+  avatar?: AvatarProps
+  chip?: ChipProps
+  /**
+   * The item type.
+   * @defaultValue 'item'
+   */
+  type?: 'label' | 'separator' | 'item'
+  disabled?: boolean
+  onSelect?(e?: Event): void
+}
+
+type InputMenuVariants = VariantProps<typeof inputMenu>
+
+export interface InputMenuProps<T extends MaybeArrayOfArrayItem<I>, I extends MaybeArrayOfArray<InputMenuItem | AcceptableValue | boolean> = MaybeArrayOfArray<InputMenuItem | AcceptableValue | boolean>, V extends SelectItemKey<T> | undefined = undefined, M extends boolean = false> extends Pick<ComboboxRootProps<T>, 'open' | 'defaultOpen' | 'disabled' | 'name' | 'resetSearchTermOnBlur' | 'highlightOnHover'>, UseComponentIconsProps {
+  /**
+   * The element or component this component should render as.
+   * @defaultValue 'div'
+   */
+  as?: any
+  id?: string
+  type?: InputHTMLAttributes['type']
+  /** The placeholder text when the input is empty. */
+  placeholder?: string
+  color?: InputMenuVariants['color']
+  size?: InputMenuVariants['size']
+  /** Removes padding from input. */
+  noPadding?: boolean
+  /** removes all borders (rings). */
+  noBorder?: boolean
+  /** removes all borders (rings) except the bottom one. */
+  underline?: boolean
+  /** Rounds the corners of the button. */
+  rounded?: boolean
+  required?: boolean
+  autofocus?: boolean
+  autofocusDelay?: number
+  /**
+   * The icon displayed to open the menu.
+   * @defaultValue icons.chevronDown = `ChevronDownIcon`
+   */
+  trailingIcon?: IconComponent
+  /**
+   * The icon displayed when an item is selected.
+   * @defaultValue icons.check = `CheckIcon`
+   */
+  selectedIcon?: IconComponent
+  /**
+   * The icon displayed to delete a tag.
+   * Works only when `multiple` is `true`.
+   * @defaultValue icons.close = `Cross30Icon`
+   */
+  deleteIcon?: IconComponent
+  /**
+   * The content of the menu.
+   * @defaultValue { side: 'bottom', sideOffset: 8, collisionPadding: 8, position: 'popper' }
+   */
+  content?: Omit<ComboboxContentProps, 'as' | 'asChild' | 'forceMount'>
+  /**
+   * Display an arrow alongside the menu.
+   * @defaultValue false
+   */
+  arrow?: boolean | Omit<ComboboxArrowProps, 'as' | 'asChild'>
+  /**
+   * Render the menu in a portal.
+   * @defaultValue true
+   */
+  portal?: boolean
+  /**
+   * When `items` is an array of objects, select the field to use as the value instead of the object itself.
+   * @defaultValue undefined
+   */
+  valueKey?: V
+  /**
+   * When `items` is an array of objects, select the field to use as the label.
+   * @defaultValue 'label'
+   */
+  labelKey?: V
+  items?: I
+  /** The value of the InputMenu when initially rendered. Use when you do not need to control the state of the InputMenu. */
+  defaultValue?: SelectModelValue<T, V, M>
+  /** The controlled value of the InputMenu. Can be binded-with with `v-model`. */
+  modelValue?: SelectModelValue<T, V, M>
+  /** Whether multiple options can be selected or not. */
+  multiple?: M & boolean
+  tag?: string
+  tagColor?: InputMenuVariants['tagColor']
+  /** Highlight the ring color like a focus state. */
+  highlight?: boolean
+  /**
+   * Determines if custom user input that does not exist in options can be added.
+   * @defaultValue false
+   */
+  createItem?: boolean | 'always' | { position?: 'top' | 'bottom', when?: 'empty' | 'always' }
+  /**
+   * Fields to filter items by.
+   * @defaultValue [labelKey]
+   */
+  filterFields?: string[]
+  /**
+   * When `true`, disable the default filters, useful for custom filtering (useAsyncData, useFetch, etc.).
+   * @defaultValue false
+   */
+  ignoreFilter?: boolean
+  class?: any
+  b24ui?: PartialString<typeof inputMenu.slots>
+}
+
+export type InputMenuEmits<T, V, M extends boolean> = Omit<ComboboxRootEmits<T>, 'update:modelValue'> & {
+  change: [payload: Event]
+  blur: [payload: FocusEvent]
+  focus: [payload: FocusEvent]
+  create: [item: string]
+} & SelectModelValueEmits<T, V, M>
+
+type SlotProps<T> = (props: { item: T, index: number }) => any
+
+export interface InputMenuSlots<T, M extends boolean> {
+  'leading'(props: { modelValue?: M extends true ? T[] : T, open: boolean, b24ui: any }): any
+  'trailing'(props: { modelValue?: M extends true ? T[] : T, open: boolean, b24ui: any }): any
+  'empty'(props: { searchTerm?: string }): any
+  'item': SlotProps<T>
+  'item-leading': SlotProps<T>
+  'item-label': SlotProps<T>
+  'item-trailing': SlotProps<T>
+  'tags-item-text': SlotProps<T>
+  'tags-item-delete': SlotProps<T>
+  'create-item-label'(props: { item: string }): any
+}
+</script>
+
+<script setup lang="ts" generic="T extends MaybeArrayOfArrayItem<I>, I extends MaybeArrayOfArray<InputMenuItem | AcceptableValue | boolean> = MaybeArrayOfArray<InputMenuItem | AcceptableValue | boolean>, V extends SelectItemKey<T> | undefined = undefined, M extends boolean = false">
+import { computed, ref, toRef, onMounted, toRaw } from 'vue'
+import { ComboboxRoot, ComboboxArrow, ComboboxAnchor, ComboboxInput, ComboboxTrigger, ComboboxPortal, ComboboxContent, ComboboxViewport, ComboboxEmpty, ComboboxGroup, ComboboxLabel, ComboboxSeparator, ComboboxItem, ComboboxItemIndicator, TagsInputRoot, TagsInputItem, TagsInputItemText, TagsInputItemDelete, TagsInputInput, useForwardPropsEmits, useFilter } from 'reka-ui'
+import { defu } from 'defu'
+import { isEqual } from 'ohash'
+import { reactivePick, createReusableTemplate } from '@vueuse/core'
+import { useButtonGroup } from '../composables/useButtonGroup'
+import { useComponentIcons } from '../composables/useComponentIcons'
+import { useFormField } from '../composables/useFormField'
+import { useLocale } from '../composables/useLocale'
+import { get, compare } from '../utils'
+import icons from '../dictionary/icons'
+import B24Avatar from './Avatar.vue'
+import B24Chip from './Chip.vue'
+
+defineOptions({ inheritAttrs: false })
+
+const props = withDefaults(defineProps<InputMenuProps<T, I, V, M>>(), {
+  type: 'text',
+  autofocusDelay: 0,
+  portal: true,
+  labelKey: 'label' as never
+})
+const emits = defineEmits<InputMenuEmits<T, V, M>>()
+const slots = defineSlots<InputMenuSlots<T, M>>()
+
+const searchTerm = defineModel<string>('searchTerm', { default: '' })
+
+const { t } = useLocale()
+const { contains } = useFilter({ sensitivity: 'base' })
+
+const rootProps = useForwardPropsEmits(reactivePick(props, 'as', 'modelValue', 'defaultValue', 'open', 'defaultOpen', 'multiple', 'resetSearchTermOnBlur', 'highlightOnHover', 'ignoreFilter'), emits)
+const contentProps = toRef(() => defu(props.content, { side: 'bottom', sideOffset: 8, collisionPadding: 8, position: 'popper' }) as ComboboxContentProps)
+const arrowProps = toRef(() => props.arrow as ComboboxArrowProps)
+
+const { emitFormBlur, emitFormFocus, emitFormChange, emitFormInput, size: formGroupSize, color, id, name, highlight, disabled, ariaAttrs } = useFormField<InputProps>(props)
+const { orientation, size: buttonGroupSize } = useButtonGroup<InputProps>(props)
+const { isLeading, isTrailing, leadingIconName, trailingIconName } = useComponentIcons(toRef(() => defu(props, { trailingIcon: icons.chevronDown })))
+
+const inputSize = computed(() => buttonGroupSize.value || formGroupSize.value)
+
+const isTag = computed(() => {
+  return props.tag
+})
+
+const [DefineCreateItemTemplate, ReuseCreateItemTemplate] = createReusableTemplate()
+
+const b24ui = computed(() => inputMenu({
+  color: color.value,
+  size: inputSize?.value,
+  loading: props.loading,
+  tagColor: props.tagColor,
+  highlight: highlight.value,
+  rounded: Boolean(props.rounded),
+  noPadding: Boolean(props.noPadding),
+  noBorder: Boolean(props.noBorder),
+  underline: Boolean(props.underline),
+  leading: Boolean(isLeading.value || !!props.avatar || !!slots.leading),
+  trailing: Boolean(isTrailing.value || !!slots.trailing),
+  multiple: props.multiple,
+  buttonGroup: orientation.value
+}))
+
+function displayValue(value: T): string {
+  if (!props.valueKey) {
+    return value && (typeof value === 'object' ? get(value, props.labelKey as string) : value)
+  }
+
+  const item = items.value.find(item => compare(typeof item === 'object' ? get(item as Record<string, any>, props.valueKey as string) : item, value))
+  return item && (typeof item === 'object' ? get(item, props.labelKey as string) : item)
+}
+
+const groups = computed(() => props.items?.length ? (Array.isArray(props.items[0]) ? props.items : [props.items]) as InputMenuItem[][] : [])
+// eslint-disable-next-line vue/no-dupe-keys
+const items = computed(() => groups.value.flatMap(group => group) as T[])
+
+const filteredGroups = computed(() => {
+  if (props.ignoreFilter || !searchTerm.value) {
+    return groups.value
+  }
+
+  const fields = Array.isArray(props.filterFields) ? props.filterFields : [props.labelKey] as string[]
+
+  return groups.value.map(items => items.filter((item) => {
+    if (typeof item !== 'object') {
+      return contains(item, searchTerm.value)
+    }
+
+    if (item.type && ['label', 'separator'].includes(item.type)) {
+      return true
+    }
+
+    return fields.some(field => contains(get(item, field), searchTerm.value))
+  })).filter(group => group.filter(item => !item.type || !['label', 'separator'].includes(item.type)).length > 0)
+})
+const filteredItems = computed(() => filteredGroups.value.flatMap(group => group) as T[])
+
+const createItem = computed(() => {
+  if (!props.createItem || !searchTerm.value) {
+    return false
+  }
+
+  const newItem = props.valueKey ? { [props.valueKey]: searchTerm.value } as T : searchTerm.value
+
+  if ((typeof props.createItem === 'object' && props.createItem.when === 'always') || props.createItem === 'always') {
+    return !filteredItems.value.find(item => compare(item, newItem, props.valueKey))
+  }
+
+  return !filteredItems.value.length
+})
+const createItemPosition = computed(() => typeof props.createItem === 'object' ? props.createItem.position : 'bottom')
+
+const inputRef = ref<InstanceType<typeof ComboboxInput> | null>(null)
+
+function autoFocus() {
+  if (props.autofocus) {
+    inputRef.value?.$el?.focus()
+  }
+}
+
+onMounted(() => {
+  setTimeout(() => {
+    autoFocus()
+  }, props.autofocusDelay)
+})
+
+function onUpdate(value: any) {
+  if (toRaw(props.modelValue) === value) {
+    return
+  }
+  // @ts-expect-error - 'target' does not exist in type 'EventInit'
+  const event = new Event('change', { target: { value } })
+  emits('change', event)
+  emitFormChange()
+  emitFormInput()
+}
+
+function onBlur(event: FocusEvent) {
+  emits('blur', event)
+  emitFormBlur()
+}
+
+function onFocus(event: FocusEvent) {
+  emits('focus', event)
+  emitFormFocus()
+}
+
+function onUpdateOpen(value: boolean) {
+  if (!value) {
+    const event = new FocusEvent('blur')
+    emits('blur', event)
+    emitFormBlur()
+  } else {
+    const event = new FocusEvent('focus')
+    emits('focus', event)
+  }
+}
+
+function onRemoveTag(event: any) {
+  if (props.multiple) {
+    const modelValue = props.modelValue as SelectModelValue<T, V, true>
+    const filteredValue = modelValue.filter(value => !isEqual(value, event))
+    emits('update:modelValue', filteredValue as SelectModelValue<T, V, M>)
+  }
+}
+
+defineExpose({
+  inputRef
+})
+</script>
+
+<!-- eslint-disable vue/no-template-shadow -->
+<template>
+  <DefineCreateItemTemplate>
+    <ComboboxGroup :class="b24ui.group({ addNew: true, class: props.b24ui?.group })">
+      <ComboboxItem
+        :class="b24ui.item({ addNew: true, class: props.b24ui?.item })"
+        :value="searchTerm"
+        @select.prevent="emits('create', searchTerm)"
+      >
+        <span :class="b24ui.itemLabel({ addNew: true, class: props.b24ui?.itemLabel })">
+          <slot name="create-item-label" :item="searchTerm">
+            <Component
+              :is="icons.plus"
+              :class="b24ui.itemLeadingIcon({ addNew: true, class: props.b24ui?.itemLeadingIcon })"
+            />
+            {{ t('inputMenu.create', { label: searchTerm }) }}
+          </slot>
+        </span>
+      </ComboboxItem>
+    </ComboboxGroup>
+  </DefineCreateItemTemplate>
+
+  <ComboboxRoot
+    :id="id"
+    v-slot="{ modelValue, open }"
+    v-bind="rootProps"
+    :name="name"
+    :disabled="disabled"
+    :class="b24ui.root({ class: [props.class, props.b24ui?.root] })"
+    :as-child="!!multiple"
+    ignore-filter
+    @update:model-value="onUpdate"
+    @update:open="onUpdateOpen"
+    @keydown.enter="$event.preventDefault()"
+  >
+    <div v-if="isTag" :class="b24ui.tag({ class: props.b24ui?.tag })">
+      {{ props.tag }}
+    </div>
+    <ComboboxAnchor :as-child="!multiple" :class="b24ui.base({ class: props.b24ui?.base })">
+      <TagsInputRoot
+        v-if="multiple"
+        v-slot="{ modelValue: tags }"
+        :model-value="(modelValue as string[])"
+        :disabled="disabled"
+        delimiter=""
+        as-child
+        @blur="onBlur"
+        @focus="onFocus"
+        @remove-tag="onRemoveTag"
+      >
+        <TagsInputItem v-for="(item, index) in tags" :key="index" :value="(item as string)" :class="b24ui.tagsItem({ class: props.b24ui?.tagsItem })">
+          <TagsInputItemText :class="b24ui.tagsItemText({ class: props.b24ui?.tagsItemText })">
+            <slot name="tags-item-text" :item="(item as T)" :index="index">
+              {{ displayValue(item as T) }}
+            </slot>
+          </TagsInputItemText>
+
+          <TagsInputItemDelete :class="b24ui.tagsItemDelete({ class: props.b24ui?.tagsItemDelete })" :disabled="disabled">
+            <slot name="tags-item-delete" :item="(item as T)" :index="index">
+              <Component
+                :is="deleteIcon || icons.close"
+                :class="b24ui.tagsItemDeleteIcon({ class: props.b24ui?.tagsItemDeleteIcon })"
+              />
+            </slot>
+          </TagsInputItemDelete>
+        </TagsInputItem>
+
+        <ComboboxInput v-model="searchTerm" :display-value="displayValue" as-child>
+          <TagsInputInput
+            ref="inputRef"
+            v-bind="{ ...$attrs, ...ariaAttrs }"
+            :placeholder="placeholder"
+            :required="required"
+            :class="b24ui.tagsInput({ class: props.b24ui?.tagsInput })"
+            @keydown.enter.prevent
+          />
+        </ComboboxInput>
+      </TagsInputRoot>
+
+      <ComboboxInput
+        v-else
+        ref="inputRef"
+        v-model="searchTerm"
+        :display-value="displayValue"
+        v-bind="{ ...$attrs, ...ariaAttrs }"
+        :type="type"
+        :placeholder="placeholder"
+        :required="required"
+        @blur="onBlur"
+        @focus="onFocus"
+      />
+
+      <span v-if="isLeading || !!avatar || !!slots.leading" :class="b24ui.leading({ class: props.b24ui?.leading })">
+        <slot name="leading" :model-value="(modelValue as M extends true ? T[] : T)" :open="open" :b24ui="b24ui">
+          <Component
+            :is="leadingIconName"
+            v-if="isLeading && leadingIconName"
+            :class="b24ui.leadingIcon({ class: props.b24ui?.leadingIcon })"
+          />
+          <B24Avatar v-else-if="!!avatar" :size="((props.b24ui?.itemLeadingAvatarSize || b24ui.itemLeadingAvatarSize()) as AvatarProps['size'])" v-bind="avatar" :class="b24ui.itemLeadingAvatar({ class: props.b24ui?.itemLeadingAvatar })" />
+        </slot>
+      </span>
+
+      <ComboboxTrigger v-if="isTrailing || !!slots.trailing" :class="b24ui.trailing({ class: props.b24ui?.trailing })">
+        <slot name="trailing" :model-value="(modelValue as M extends true ? T[] : T)" :open="open" :b24ui="b24ui">
+          <Component
+            :is="trailingIconName"
+            v-if="trailingIconName"
+            :class="b24ui.trailingIcon({ class: props.b24ui?.trailingIcon })"
+          />
+        </slot>
+      </ComboboxTrigger>
+    </ComboboxAnchor>
+
+    <ComboboxPortal :disabled="!portal">
+      <ComboboxContent :class="b24ui.content({ class: props.b24ui?.content })" v-bind="contentProps">
+        <ComboboxEmpty :class="b24ui.empty({ class: props.b24ui?.empty })">
+          <slot name="empty" :search-term="searchTerm">
+            {{ searchTerm ? t('inputMenu.noMatch', { searchTerm }) : t('inputMenu.noData') }}
+          </slot>
+        </ComboboxEmpty>
+
+        <ComboboxViewport :class="b24ui.viewport({ class: props.b24ui?.viewport })">
+          <ReuseCreateItemTemplate v-if="createItem && createItemPosition === 'top'" />
+
+          <ComboboxGroup v-for="(group, groupIndex) in filteredGroups" :key="`group-${groupIndex}`" :class="b24ui.group({ class: props.b24ui?.group })">
+            <template v-for="(item, index) in group" :key="`group-${groupIndex}-${index}`">
+              <ComboboxLabel v-if="item?.type === 'label'" :class="b24ui.label({ class: props.b24ui?.label })">
+                {{ get(item, props.labelKey as string) }}
+              </ComboboxLabel>
+
+              <ComboboxSeparator v-else-if="item?.type === 'separator'" :class="b24ui.separator({ class: props.b24ui?.separator })" />
+
+              <ComboboxItem
+                v-else
+                :class="b24ui.item({ class: props.b24ui?.item })"
+                :disabled="item.disabled"
+                :value="valueKey && typeof item === 'object' ? get(item, props.valueKey as string) : item"
+                @select="item.onSelect"
+              >
+                <slot name="item" :item="(item as T)" :index="index">
+                  <slot name="item-leading" :item="(item as T)" :index="index">
+                    <Component
+                      :is="item.icon"
+                      v-if="item.icon"
+                      :class="b24ui.itemLeadingIcon({ class: props.b24ui?.itemLeadingIcon })"
+                    />
+                    <B24Avatar v-else-if="item.avatar" :size="((props.b24ui?.itemLeadingAvatarSize || b24ui.itemLeadingAvatarSize()) as AvatarProps['size'])" v-bind="item.avatar" :class="b24ui.itemLeadingAvatar({ class: props.b24ui?.itemLeadingAvatar })" />
+                    <B24Chip
+                      v-else-if="item.chip"
+                      :size="((props.b24ui?.itemLeadingChipSize || b24ui.itemLeadingChipSize()) as ChipProps['size'])"
+                      inset
+                      standalone
+                      v-bind="item.chip"
+                      :class="b24ui.itemLeadingChip({ class: props.b24ui?.itemLeadingChip })"
+                    />
+                  </slot>
+
+                  <span :class="b24ui.itemLabel({ class: props.b24ui?.itemLabel })">
+                    <slot name="item-label" :item="(item as T)" :index="index">
+                      {{ typeof item === 'object' ? get(item, props.labelKey as string) : item }}
+                    </slot>
+                  </span>
+
+                  <span :class="b24ui.itemTrailing({ class: props.b24ui?.itemTrailing })">
+                    <slot name="item-trailing" :item="(item as T)" :index="index" />
+
+                    <ComboboxItemIndicator as-child>
+                      <Component
+                        :is="selectedIcon || icons.check"
+                        :class="b24ui.itemTrailingIcon({ class: props.b24ui?.itemTrailingIcon })"
+                      />
+                    </ComboboxItemIndicator>
+                  </span>
+                </slot>
+              </ComboboxItem>
+            </template>
+          </ComboboxGroup>
+
+          <ReuseCreateItemTemplate v-if="createItem && createItemPosition === 'bottom'" />
+        </ComboboxViewport>
+
+        <ComboboxArrow v-if="!!arrow" v-bind="arrowProps" :class="b24ui.arrow({ class: props.b24ui?.arrow })" />
+      </ComboboxContent>
+    </ComboboxPortal>
+  </ComboboxRoot>
+</template>

package/dist/runtime/components/Toast.vue

@@ -6,6 +6,7 @@ import _appConfig from '#build/app.config'
 import theme from '#build/b24ui/toast'
 import { tv } from '../utils/tv'
 import type { AvatarProps, ButtonProps, IconComponent } from '../types'
+import type { StringOrVNode } from '../types/utils'
 
 const appConfigToast = _appConfig as AppConfig & { b24ui: { toast: Partial<typeof theme> } }
 
@@ -19,15 +20,16 @@ export interface ToastProps extends Pick<ToastRootProps, 'defaultOpen' | 'open'
    * @defaultValue 'li'
    */
   as?: any
-  title?: string
-  description?: string
+  title?: StringOrVNode
+  description?: StringOrVNode
   icon?: IconComponent
   avatar?: AvatarProps
   color?: ToastVariants['color']
+  orientation?: ToastVariants['orientation']
   /**
    * Display a list of actions:
-   * - under the title and description if multiline
-   * - next to the close button if not multiline
+   * - under the title and description when orientation is `vertical`
+   * - next to the close button when orientation is `horizontal`
    * `{ size: 'xs' }`{lang="ts-type"}
    */
   actions?: ButtonProps[]
@@ -67,7 +69,8 @@ import B24Avatar from './Avatar.vue'
 import B24Button from './Button.vue'
 
 const props = withDefaults(defineProps<ToastProps>(), {
-  close: true
+  close: true,
+  orientation: 'vertical'
 })
 const emits = defineEmits<ToastEmits>()
 const slots = defineSlots<ToastSlots>()
@@ -76,10 +79,10 @@ const { t } = useLocale()
 
 const rootProps = useForwardPropsEmits(reactivePick(props, 'as', 'defaultOpen', 'open', 'duration', 'type'), emits)
 
-const multiline = computed(() => !!props.title && !!props.description)
-
 const b24ui = computed(() => toast({
-  color: props.color
+  color: props.color,
+  orientation: props.orientation,
+  title: !!props.title || !!slots.title
 }))
 
 const el = ref()
@@ -105,7 +108,8 @@ defineExpose({
     ref="el"
     v-slot="{ remaining, duration }"
     v-bind="rootProps"
-    :class="b24ui.root({ class: [props.class, props.b24ui?.root], multiline })"
+    :data-orientation="orientation"
+    :class="b24ui.root({ class: [props.class, props.b24ui?.root] })"
     :style="{ '--height': height }"
   >
     <slot name="leading">
@@ -120,16 +124,24 @@ defineExpose({
     <div :class="b24ui.wrapper({ class: props.b24ui?.wrapper })">
       <ToastTitle v-if="title || !!slots.title" :class="b24ui.title({ class: props.b24ui?.title })">
         <slot name="title">
-          {{ title }}
+          <component :is="title()" v-if="typeof title === 'function'" />
+          <component :is="title" v-else-if="typeof title === 'object'" />
+          <template v-else>
+            {{ title }}
+          </template>
         </slot>
       </ToastTitle>
       <ToastDescription v-if="description || !!slots.description" :class="b24ui.description({ class: props.b24ui?.description })">
         <slot name="description">
-          {{ description }}
+          <component :is="description()" v-if="typeof description === 'function'" />
+          <component :is="description" v-else-if="typeof description === 'object'" />
+          <template v-else>
+            {{ description }}
+          </template>
         </slot>
       </ToastDescription>
 
-      <div v-if="multiline && actions?.length" :class="b24ui.actions({ class: props.b24ui?.actions, multiline: true })">
+      <div v-if="orientation === 'vertical' && actions?.length" :class="b24ui.actions({ class: props.b24ui?.actions })">
         <slot name="actions">
           <ToastAction v-for="(action, index) in actions" :key="index" :alt-text="action.label || 'Action'" as-child @click.stop>
             <B24Button size="xs" :color="color" v-bind="action" />
@@ -138,8 +150,8 @@ defineExpose({
       </div>
     </div>
 
-    <div v-if="(!multiline && actions?.length) || close !== null" :class="b24ui.actions({ class: props.b24ui?.actions, multiline: false })">
-      <template v-if="!multiline">
+    <div v-if="(orientation === 'horizontal' && actions?.length) || close !== null" :class="b24ui.actions({ class: props.b24ui?.actions, orientation: 'horizontal' })">
+      <template v-if="orientation === 'horizontal' && actions?.length">
         <slot name="actions">
           <ToastAction v-for="(action, index) in actions" :key="index" :alt-text="action.label || 'Action'" as-child @click.stop>
             <B24Button size="xs" :color="color" v-bind="action" />

package/dist/runtime/components/Toaster.vue

@@ -118,10 +118,10 @@ function getOffset(index: number) {
         '--transform': 'translateY(var(--translate)) scale(var(--scale))'
       }"
       :class="[b24ui.base(), {
-        'cursor-pointer': !!toast.click
+        'cursor-pointer': !!toast.onClick
       }]"
       @update:open="onUpdateOpen($event, toast.id)"
-      @click="toast.click && toast.click(toast)"
+      @click="toast.onClick && toast.onClick(toast)"
     />
 
     <ToastPortal :disabled="!portal">

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

@@ -19,10 +19,11 @@ export interface DescriptionListItem {
   avatar?: AvatarProps
   slot?: string
   description?: string
+  orientation?: DescriptionListVariants['orientation']
   /**
    * Display a list of actions:
-   * - under the description if multiline
-   * - next to the description if not multiline
+   * - under the description when orientation is `vertical`
+   * - next to the description when orientation is `horizontal`
    * `{ size: 'xs' }`{lang="ts-type"}
    */
   actions?: ButtonProps[]
@@ -81,13 +82,13 @@ const b24ui = computed(() => descriptionList({
 function normalizeItem(item: any) {
   const label = get(item, props.labelKey as string)
   const description = get(item, props.descriptionKey as string)
-  const multiline = (item.actions || []).length > 1
+  const orientation = item?.orientation || 'vertical'
 
   return {
     ...item,
     label,
     description,
-    multiline
+    orientation
   }
 }
 
@@ -166,12 +167,13 @@ const normalizedItems = computed(() => {
           </span>
         </dt>
         <dd
+          :data-orientation="item.orientation"
           :class="b24ui.descriptionWrapper({
             class: [
               props.b24ui?.descriptionWrapper,
               item?.b24ui?.descriptionWrapper
             ],
-            multiline: item.multiline
+            orientation: item.orientation
           })"
         >
           <span
@@ -181,7 +183,7 @@ const normalizedItems = computed(() => {
                 props.b24ui?.description,
                 item?.b24ui?.description
               ],
-              multiline: item.multiline
+              orientation: item.orientation
             })"
           >
             <slot name="description" :item="item" :index="index">
@@ -195,7 +197,7 @@ const normalizedItems = computed(() => {
                 props.b24ui?.actions,
                 item?.b24ui?.actions
               ],
-              multiline: item.multiline
+              orientation: item.orientation
             })"
           >
             <slot name="actions" :item="item" :index="index">