Mixins / foldkit-mixins-ui

Resizable

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

export * as Resizable from './resizable.js'

In the guides

Members

Resizable.Bounds

interface · packages/mixins-ui/src/resizable.ts:53

interface Bounds {
  readonly min?: number | undefined
  readonly max?: number | undefined
  readonly step?: number | undefined
}

The bounds a share stays within, and what a key moves it by.

Resizable.init

function · packages/mixins-ui/src/resizable.ts:59

function init(share?: number): Model

Resizable.Message

const · packages/mixins-ui/src/resizable.ts:41

const Message: MessageUnion<{
  readonly Measured: { readonly size: Schema.Number }
  readonly DragStarted: {}
  readonly Dragged: { readonly delta: Schema.Number }
  readonly DragEnded: {}
  readonly Set: { readonly share: Schema.Number }
}>

Resizable.Model

const · packages/mixins-ui/src/resizable.ts:31

const Model: Schema.Struct<{
  readonly share: Schema.Number
  readonly from: Schema.Option<Schema.Number>
  readonly size: Schema.Number
}>

Resizable.ResizableSlots

const · packages/mixins-ui/src/resizable.ts:20

const ResizableSlots: 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 first: 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 handle: Slot.UnnamedSlot<
    Capability.Capability<
      'Interactive',
      readonly [Capability.Capability<'Base', readonly []>]
    >,
    readonly [Event.EventToken<'keydown'>],
    readonly [Attr.AttrToken<'role'>, Attr.AttrToken<'aria-label'>],
    readonly Slot.RequirementName[],
    boolean
  >
  readonly second: Slot.UnnamedSlot<
    Capability.Capability<
      'Container',
      readonly [
        Capability.Capability<
          'Interactive',
          readonly [Capability.Capability<'Base', readonly []>]
        >,
      ]
    >,
    readonly Slot.EventName[],
    readonly Slot.AttributeName[],
    readonly Slot.RequirementName[],
    boolean
  >
}>

Two panels with a handle between them, shadcn's Resizable and the APG's window splitter: the handle is a separator with its value, a tab stop the arrows step and Home and End send to the bounds, and a drag moves it. The split is a small Model of this module's (the first panel's share, and where a drag began), which the application keeps and folds with update; a drag measures the group with the Resize Mount and follows the Move Mount's deltas from where it began.

Resizable.ResizableView

interface · packages/mixins-ui/src/resizable.ts:87

interface ResizableView<Message> extends Bounds {
  readonly model: Model
  readonly onMessage: (message: typeof Message.Type) => NoInfer<Message>
  readonly orientation?: 'horizontal' | 'vertical' | undefined
  readonly label: string
  readonly first: Html
  readonly second: Html
  readonly style?: NamedStyle<typeof ResizableSlots> | undefined
  readonly mixins?: MixinList<Message> | undefined
}

Resizable.update

function · packages/mixins-ui/src/resizable.ts:65

function update(model: Model, message: Message, bounds?: Bounds): Model

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

Resizable.view

function · packages/mixins-ui/src/resizable.ts:103

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