@gluonjs/core


@gluonjs/core / src / TextModelOptions

Interface: TextModelOptions<Value>

Extends

  • BaseModelOptions<Value>

Type Parameters

Value

Value

Properties

kind?

readonly optional kind?: "text"


modifiers?

readonly optional modifiers?: ModelModifiers

Inherited from

BaseModelOptions.modifiers


transform?

readonly optional transform?: (value, event) => Value

Parameters

value

unknown

event

Event

Returns

Value

Inherited from

BaseModelOptions.transform

Example

Configure text/textarea model modifiers, transform, and input-versus-change update timing:

ts
import {
  model,
  type CheckboxModelOptions,
  type CustomModelOptions,
  type ModelBinding,
  type ModelModifiers,
  type ModelOptions,
  type RadioModelOptions,
  type SelectModelOptions,
  type TextModelOptions,
  type WritableModel,
} from '@gluonjs/core';

const quantity: WritableModel<number> = { value: 1 };
const modifiers = { trim: true, number: true } satisfies ModelModifiers;
const text = { kind: 'text', modifiers } satisfies TextModelOptions<number>;
const textBinding: ModelBinding = model(quantity, text);
const colors: WritableModel<readonly string[]> = { value: ['blue'] };
const checkbox = { kind: 'checkbox', value: 'black' } satisfies CheckboxModelOptions<readonly string[]>;
const checkboxBinding = model(colors, checkbox);
const size: WritableModel<string> = { value: 'medium' };
const radio = { kind: 'radio', value: 'large' } satisfies RadioModelOptions<string>;
const radioBinding = model(size, radio);
const select = { kind: 'select' } satisfies SelectModelOptions<string>;
const selectBinding = model(size, select);
const custom = { kind: 'custom', property: 'modelValue', event: 'update:modelValue' } satisfies CustomModelOptions<string>;
const customOptions: ModelOptions<string> = custom;
const customBinding = model(size, customOptions);
console.log(textBinding, checkboxBinding, radioBinding, selectBinding, customBinding);