Mixins / foldkit-mixins-ui

TagsInput

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

export * as TagsInput from './tagsInput.js'

In the guides

Members

TagsInput.init

function · packages/mixins-ui/src/tagsInput.ts:66

function init(options: {
  readonly id: string
  readonly tags?: ReadonlyArray<string> | undefined
  readonly delimiter?: string | undefined
}): Model

TagsInput.Message

const · packages/mixins-ui/src/tagsInput.ts:50

const Message: MessageUnion<{
  readonly Typed: { readonly text: Schema.String }
  readonly Committed: {}
  readonly Pressed: { readonly key: Schema.String }
  readonly Removed: { readonly tag: Schema.String }
  readonly CompletedFocusInput: {}
}>

TagsInput.Model

const · packages/mixins-ui/src/tagsInput.ts:39

const Model: Schema.Struct<{
  readonly id: Schema.String
  readonly tags: Schema.$Array<Schema.String>
  readonly draft: Schema.String
  readonly delimiter: Schema.String
}>

TagsInput.TagsInputSlots

const · packages/mixins-ui/src/tagsInput.ts:21

const TagsInputSlots: 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 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 control: 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 tag: 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 remove: Slot.UnnamedSlot<Capability.Capability<"Interactive", readonly [Capability.Capability<"Base", read …;

A field of tags, Zag's tags input: the tags as a list of chips, each with a remove button, and a text input for the next one. Enter or the delimiter adds the draft, split at the delimiter and trimmed, refusing empty parts and tags already there; Backspace on an empty draft removes the last tag at once. The tags and the draft are a small Model of this module's, which the application keeps and folds with update: the keys reach update as Messages, so it decides from the current draft rather than the one the last frame drew.

TagsInput.TagsInputView

interface · packages/mixins-ui/src/tagsInput.ts:132

interface TagsInputView<Message> {
  readonly model: Model
  readonly onMessage: (message: typeof Message.Type) => NoInfer<Message>
  readonly label: string
  readonly placeholder?: string | undefined
  readonly disabled?: boolean | undefined
  readonly style?: NamedStyle<typeof TagsInputSlots> | undefined
  readonly mixins?: MixinList<Message> | undefined
}

TagsInput.update

function · packages/mixins-ui/src/tagsInput.ts:107

function update(model: Model, message: Message): Return<Model, Message>

The field after message; the same Model when nothing changes.

TagsInput.view

function · packages/mixins-ui/src/tagsInput.ts:146

function view<Outer>(options: TagsInputView<Outer>, h: HtmlBuilder<Outer>): Html