Mixins / foldkit-mixins-ui

Rating

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

export * as Rating from './rating.js'

In the guides

Members

Rating.RatingSlots

const · packages/mixins-ui/src/rating.ts:16

const RatingSlots: Slots.Contract<{
  readonly root: Slot.UnnamedSlot<
    Capability.Capability<
      'Container',
      readonly [
        Capability.Capability<
          'Interactive',
          readonly [Capability.Capability<'Base', readonly []>]
        >,
      ]
    >,
    readonly Slot.EventName[],
    readonly [Attr.AttrToken<'role'>],
    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 star: Slot.UnnamedSlot<
    Capability.Capability<
      'Interactive',
      readonly [Capability.Capability<'Base', readonly []>]
    >,
    readonly [Event.EventToken<'change'>],
    readonly [
      Attr.AttrToken<'aria-label'>,
      Attr.AttrToken<'disabled'>,
      Attr.AttrToken<'value'>,
    ],
    readonly Slot.RequirementName[],
    boolean
  >
}>

A star rating, the APG's radio group of native radios: a root with role="radiogroup" named by its label, and a star per value, an input type="radio" sharing one name, so the browser moves the focus and the choice with the arrows and a form submits the value. The rating is the application's: the view draws value (none before anyone rates) and sends onChange with the star chosen. Each star carries data-filled; the recipe draws the shape in CSS. Read-only, the root is one image whose name says the rating, and the stars are plain marks.

Rating.RatingView

interface · packages/mixins-ui/src/rating.ts:26

interface RatingView<Message> {
  readonly id: string
  readonly label: string
  readonly value: Option.Option<number>
  readonly onChange: (value: number) => NoInfer<Message>
  readonly max?: number | undefined
  readonly starLabel?: ((value: number) => string) | undefined
  readonly readOnly?: boolean | undefined
  readonly disabled?: boolean | undefined
  readonly style?: NamedStyle<typeof RatingSlots> | undefined
  readonly mixins?: MixinList<Message> | undefined
}

Rating.view

function · packages/mixins-ui/src/rating.ts:50

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