Mixins / foldkit-mixins-ui

Avatar

namespace · packages/mixins-ui/src/avatar.ts:1

export * as Avatar from './avatar.js'

In the guides

Members

Avatar.AvatarSlots

const · packages/mixins-ui/src/avatar.ts:11

const AvatarSlots: Slots.Contract<{
  readonly root: Slot.UnnamedSlot<
    Capability.Capability<
      'Container',
      readonly [
        Capability.Capability<
          'Interactive',
          readonly [Capability.Capability<'Base', readonly []>]
        >,
      ]
    >,
    readonly Slot.EventName[],
    readonly Slot.AttributeName[],
    readonly Slot.RequirementName[],
    boolean
  >
  readonly fallback: Slot.UnnamedSlot<
    Capability.Capability<
      'Container',
      readonly [
        Capability.Capability<
          'Interactive',
          readonly [Capability.Capability<'Base', readonly []>]
        >,
      ]
    >,
    readonly Slot.EventName[],
    readonly Slot.AttributeName[],
    readonly Slot.RequirementName[],
    boolean
  >
  readonly image: Slot.UnnamedSlot<
    Capability.Capability<
      'Container',
      readonly [
        Capability.Capability<
          'Interactive',
          readonly [Capability.Capability<'Base', readonly []>]
        >,
      ]
    >,
    readonly Slot.EventName[],
    readonly Slot.AttributeName[],
    readonly Slot.RequirementName[],
    boolean
  >
}>

An avatar publishes its regions as slots; it owns no state, messages, or bundles. The picture stacks over the fallback initials: a loaded image covers them, a missing one leaves its alt text, and the initials show through while loading. The browser owns loading; this owns layout.

Avatar.AvatarView

interface · packages/mixins-ui/src/avatar.ts:22

interface AvatarView<Message = never> {
  readonly name: string
  readonly src: string
  readonly style?: NamedStyle<typeof AvatarSlots> | undefined
  readonly mixins?: MixinList<Message> | undefined
}

An avatar in one call: who it pictures, where the picture lives, a style for its slots, and mixins beside the style. No upstream component stands behind it.

Avatar.view

function · packages/mixins-ui/src/avatar.ts:41

function view<Message = never>(
  options: AvatarView<Message>,
  h: HtmlBuilder<Message>,
): Html