Mixins / foldkit-mixins-ui

Card

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

export * as Card from './card.js'

In the guides

Members

Card.CARD_HOVER

const · packages/mixins-ui/src/card.ts:194

const CARD_HOVER: 'card-hover'

The name of the group's highlight: its place is --fk-card-hover-x, -y, -w, -h.

Card.CardDismiss

interface · packages/mixins-ui/src/card.ts:41

interface CardDismiss<Message> {
  readonly onDismiss: Message
  readonly label?: string | undefined
  readonly always?: boolean | undefined
}

A button that removes the card, revealed on hover or focus unless always.

Card.CardGroupSlots

const · packages/mixins-ui/src/card.ts:186

const CardGroupSlots: 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 list: 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 item: 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 highlight: Slot.UnnamedSlot<
    Capability.Capability<
      'Container',
      readonly [
        Capability.Capability<
          'Interactive',
          readonly [Capability.Capability<'Base', readonly []>]
        >,
      ]
    >,
    readonly Slot.EventName[],
    readonly Slot.AttributeName[],
    readonly Slot.RequirementName[],
    boolean
  >
}>

A card group publishes its frame, the list of cards, each card's place in it, and the one highlight that moves between the cards. The list carries the column count as --fk-card-columns, for a style's grid, and each item its data-row and data-column, for dividers between them.

Card.CardGroupView

interface · packages/mixins-ui/src/card.ts:215

interface CardGroupView<Message> {
  readonly cards: ReadonlyArray<
    CardView<Message> & {
      readonly key: string
    }
  >
  readonly columns?: number | undefined
  readonly fluidHover?: boolean | undefined
  readonly label?: string | undefined
  readonly style?: NamedStyle<typeof CardGroupSlots> | undefined
  readonly cardStyle?: NamedStyle<typeof CardSlots> | undefined
  readonly mixins?: MixinList<Message> | undefined
}

Cards as one list: in one column or a grid, divided or apart, with one highlight that follows the pointer to the nearest card (FluidHover) in place of a hover on each.

Card.CardPress

type · packages/mixins-ui/src/card.ts:32

type CardPress<Message> =
  | {
      readonly onClick: Message
    }
  | {
      readonly href: string
      readonly external?: boolean | undefined
    }

What pressing the card does: send a Message, or follow a link.

Card.CardSlots

const · packages/mixins-ui/src/card.ts:17

const CardSlots: 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 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>; readonly media: 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 header: 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 title: 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 description: Slot.UnnamedSlot<Capability.Capability<"Container", readonly [Capability.Capability<"Intera …;

A card publishes its regions as slots; it owns no state. Draw the parts the card has and skip the rest: a bare card is a root with content, a full one adds an image, a media tile, a header with an action, and a footer.

A pressable card is one control: overlay is a link or a button stretched over the whole card, named by the title, so the card is one tab stop and one announcement. The action, the footer and the dismiss button sit above it and stay pressable on their own. The root carries data-selected, data-disabled, data-pressable and data-dismissible for a style to read.

Card.CardView

interface · packages/mixins-ui/src/card.ts:54

interface CardView<Message> {
  readonly title?: string | undefined
  readonly description?: string | undefined
  readonly content?: Html | undefined
  readonly image?: Html | undefined
  readonly media?: Html | undefined
  readonly action?: Html | undefined
  readonly footer?: Html | undefined
  readonly press?: CardPress<Message> | undefined
  readonly label?: string | undefined
  readonly selected?: boolean | undefined
  readonly disabled?: boolean | undefined
  readonly dismiss?: CardDismiss<Message> | undefined
  readonly style?: NamedStyle<typeof CardSlots> | undefined
  readonly mixins?: MixinList<Message> | undefined
}

A card in one call: the regions it has, what pressing it does, its state, a style for its slots, and mixins beside the style. No upstream component stands behind it; this is the whole implementation.

Card.group

function · packages/mixins-ui/src/card.ts:232

function group<Message>(
  options: CardGroupView<Message>,
  h: HtmlBuilder<Message>,
): Html

Card.view

function · packages/mixins-ui/src/card.ts:80

function view<Message>(
  options: CardView<Message>,
  h: HtmlBuilder<Message>,
): Html