Mixins / foldkit-mixins-ui

QrCode

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

export * as QrCode from './qrCode.js'

In the guides

Members

QrCode.Download

const · packages/mixins-ui/src/qrCode.ts:156

const Download: Command.CommandDefinitionWithArgs<
  'QrCode.Download',
  {
    id: Schema.String
    format: Schema.Literals<readonly ['svg', 'png']>
    filename: Schema.String
    pixels: Schema.Number
  },
  Effect.Effect<
    | { readonly _tag: 'Downloaded'; readonly format: 'svg' | 'png' }
    | { readonly _tag: 'DownloadFailed'; readonly message: string },
    never,
    never
  >
>

Saves the code drawn under id as filename.svg or filename.png, pixels a side, in the colors the page draws it in; the overlay is markup, which an image file cannot hold, so the file has the code alone. Yields Downloaded, or DownloadFailed without the DOM or the code.

QrCode.encode

function · packages/mixins-ui/src/qrCode.ts:51

function encode(text: string, level: Level): Option.Option<Matrix>

text as a QR code at level, in the smallest version that holds it; none when no version does (about 2,900 bytes at L). The last few codes are kept, so a view drawn again does not encode again.

QrCode.Format

const · packages/mixins-ui/src/qrCode.ts:89

const Format: Schema.Literals<readonly ['svg', 'png']>

QrCode.Level

type · packages/mixins-ui/src/qrCode.ts:33

type Level = 'L' | 'M' | 'Q' | 'H'

How much of the code may be lost and still read: about 7, 15, 25 or 30%.

QrCode.Matrix

interface · packages/mixins-ui/src/qrCode.ts:36

interface Matrix {
  readonly version: number
  readonly size: number
  readonly dark: ReadonlyArray<ReadonlyArray<boolean>>
}

An encoded code: size modules a side, dark[y][x] true for a dark module.

QrCode.Message

const · packages/mixins-ui/src/qrCode.ts:92

const Message: MessageUnion<{
  readonly Downloaded: {
    readonly format: Schema.Literals<readonly ['svg', 'png']>
  }
  readonly DownloadFailed: { readonly message: Schema.String }
}>

QrCode.pathOf

function · packages/mixins-ui/src/qrCode.ts:71

function pathOf(matrix: Matrix): string

Every dark module as one path, one subpath per run of dark modules in a row.

QrCode.QrCodeSlots

const · packages/mixins-ui/src/qrCode.ts:18

const QrCodeSlots: 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">, Attr.AttrToken<"aria-label">], readonly Slot.RequirementName[], boolean>; readonly frame: 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 background: 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 pattern: 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 overlay: 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 fallback: Slot.UnnamedSlot<Capability.Capability<"Container",  …;

A QR code, Zag's qr-code: text encoded to a matrix of modules and drawn as one SVG path over a background that carries the quiet zone, with an optional overlay (a logo) centred on it. The root is one image whose name says what the code holds. The encoder is uqr, the one Zag's machine uses; encode and pathOf are pure, so a server draws the same code. Download saves the drawn code as an SVG or PNG file in the colors the page shows it in.

QrCode.QrCodeView

interface · packages/mixins-ui/src/qrCode.ts:171

interface QrCodeView<Message> {
  readonly id: string
  readonly value: string
  readonly label?: string | undefined
  readonly level?: Level | undefined
  readonly quietZone?: number | undefined
  readonly overlay?: Html | undefined
  readonly tooLong?: string | undefined
  readonly style?: NamedStyle<typeof QrCodeSlots> | undefined
  readonly mixins?: MixinList<Message> | undefined
}

QrCode.view

function · packages/mixins-ui/src/qrCode.ts:192

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