Mixins / foldkit-mixins-ui

Progress

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

export * as Progress from './progress.js'

In the guides

Members

Progress.ProgressSlots

const · packages/mixins-ui/src/progress.ts:15

const ProgressSlots: 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 track: 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 indicator: Slot.UnnamedSlot<
    Capability.Capability<
      'Container',
      readonly [
        Capability.Capability<
          'Interactive',
          readonly [Capability.Capability<'Base', readonly []>]
        >,
      ]
    >,
    readonly Slot.EventName[],
    readonly Slot.AttributeName[],
    readonly Slot.RequirementName[],
    boolean
  >
}>

@foldkit/ui's Progress, a progressbar with its value, drawn as a bar or, with the recipe's shape: 'ring', as Circular Progress. A value of none is indeterminate (data-state="indeterminate"): work whose end is not known, which a bar shows sliding and a ring turning. The root carries the share done as --fk-progress, 0 to 1, which a ring draws and a bar needs not, since upstream sizes its indicator.

Progress.ProgressView

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

interface ProgressView<Message> {
  readonly id: string
  readonly label: string
  readonly value: Option.Option<number>
  readonly min?: number | undefined
  readonly max?: number | undefined
  readonly valueText?:
    string | ((value: number, max: number) => string) | undefined
  readonly style?: NamedStyle<typeof ProgressSlots> | undefined
  readonly mixins?: MixinList<Message> | undefined
}

Progress.view

function · packages/mixins-ui/src/progress.ts:43

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