Mixins / foldkit-mixins-ui

Meter

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

export * as Meter from './meter.js'

In the guides

Members

Meter.Level

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

type Level = 'good' | 'fair' | 'poor'

Meter.levelOf

function · packages/mixins-ui/src/meter.ts:48

function levelOf(value: number, thresholds: Thresholds): Level

How good value is, as the HTML meter judges it from the thresholds.

Meter.MeterSlots

const · packages/mixins-ui/src/meter.ts:13

const MeterSlots: 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 fill: 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 Meter, a meter: a measurement within a known range, such as storage used or a battery's charge, where Progress is work going on. The root says how good the value is as data-level, the HTML meter's judgment: good in the region of optimum (below low, between, or above high), fair one region away and poor two.

Meter.MeterView

interface · packages/mixins-ui/src/meter.ts:33

interface MeterView<Message> extends Thresholds {
  readonly id: string
  readonly label: string
  readonly value: number
  readonly valueText?:
    string | ((value: number, max: number) => string) | undefined
  readonly style?: NamedStyle<typeof MeterSlots> | undefined
  readonly mixins?: MixinList<Message> | undefined
}

Meter.Thresholds

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

interface Thresholds {
  readonly min?: number | undefined
  readonly max?: number | undefined
  readonly low?: number | undefined
  readonly high?: number | undefined
  readonly optimum?: number | undefined
}

Meter.view

function · packages/mixins-ui/src/meter.ts:61

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