Mixins / foldkit-mixins-ui

Input

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

export * as Input from './input.js'

In the guides

Members

Input.field

function · packages/mixins-ui/src/input.ts:105

function field<Message>(
  options: InputField<Message>,
  h: HtmlBuilder<Message>,
): Html

Input.InputField

interface · packages/mixins-ui/src/input.ts:91

interface InputField<Message> {
  readonly id: string
  readonly label: string
  readonly field: FieldValidation.Field<unknown>
  readonly changed: (value: string) => Message
  readonly type?: string | undefined
  readonly placeholder?: string | undefined
  readonly style?: NamedStyle<typeof InputSlots> | undefined
  readonly mixins?: MixinList<Message> | undefined
  readonly draw?:
    ((parts: FieldParts, h: HtmlBuilder<Message>) => Html) | undefined
}

A text field in one call: a field's state drawn through view with its label, control, and description placed. The value is drawn with String(), as the base field view draws any draft. draw places the parts; the default stacks them. type and placeholder ride through only where given. Custom drawers stay for controls with no shipped renderer.

Input.InputSlots

const · packages/mixins-ui/src/input.ts:9

const InputSlots: Slots.Contract<{
  readonly input: Slot.UnnamedSlot<
    Capability.Capability<
      'TextInput',
      readonly [
        Capability.Capability<
          'Focusable',
          readonly [
            Capability.Capability<
              'Interactive',
              readonly [Capability.Capability<'Base', readonly []>]
            >,
          ]
        >,
      ]
    >,
    readonly [
      Event.EventToken<'input'>,
      Event.EventToken<'focus'>,
      Event.EventToken<'blur'>,
    ],
    readonly [
      Attr.AttrToken<'aria-label'>,
      Attr.AttrToken<'aria-invalid'>,
      Attr.AttrToken<'disabled'>,
      Attr.AttrToken<'value'>,
    ],
    readonly Slot.RequirementName[],
    boolean
  >
  readonly label: 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<
          'Interactive',
          readonly [Capability.Capability<'Base', readonly []>]
        >,
      ]
    >,
    readonly Slot.EventName[],
    readonly Slot.AttributeName[],
    readonly Slot.RequirementName[],
    boolean
  >
}>

Input.InputView

interface · packages/mixins-ui/src/input.ts:45

interface InputView<Message> {
  readonly id: string
  readonly value?: string | undefined
  readonly onInput?: ((value: string) => Message) | undefined
  readonly disabled?: boolean | undefined
  readonly invalid?: boolean | undefined
  readonly described?: boolean | undefined
  readonly type?: string | undefined
  readonly placeholder?: string | undefined
  readonly style?: NamedStyle<typeof InputSlots> | undefined
  readonly mixins?: MixinList<Message> | undefined
  readonly input?: unknown
  readonly draw: (
    resolved: ResolvedInput<Message>,
    h: HtmlBuilder<Message>,
  ) => Html
}

An input in one call: its value and Messages, a style for its slots, and the rest of @foldkit/ui's own config. draw places the resolved input, label, and description bundles; this covers the common case, while toView stays for one drawn as something else.

Input.resolve

function · packages/mixins-ui/src/input.ts:23

function resolve<Input, Message>(
  attributes: InputAttributes<Message>,
  mixins: MixinList<Message>,
  context: ResolveContext<Input, Message>,
): ResolvedInput<Message>

Applies mixins to the input's bundles.

Input.ResolvedInput

type · packages/mixins-ui/src/input.ts:20

type ResolvedInput<Message> = Resolved<
  InputAttributes<Message>,
  typeof InputSlots,
  Message
>

The input's bundles with the attached Mixins applied.

Input.toView

function · packages/mixins-ui/src/input.ts:30

function toView<Message>(
  mixins: MixinList<Message>,
  context: ResolveContext<unknown, Message>,
  draw: (resolved: ResolvedInput<Message>) => Html,
): (attributes: InputAttributes<Message>) => Html

The input's toView: draw receives its bundles with mixins applied.

Input.view

function · packages/mixins-ui/src/input.ts:63

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