@gluonjs/core / src / CustomModelOptions
Interface: CustomModelOptions<Value>
Extends
BaseModelOptions<Value>
Type Parameters
Value
Value
Properties
event?
readonlyoptionalevent?:string
kind
readonlykind:"custom"
modifiers?
readonlyoptionalmodifiers?:ModelModifiers
Inherited from
BaseModelOptions.modifiers
modifiersProperty?
readonlyoptionalmodifiersProperty?:string
property?
readonlyoptionalproperty?:string
transform?
readonlyoptionaltransform?: (value,event) =>Value
Parameters
value
unknown
event
Event
Returns
Value
Inherited from
BaseModelOptions.transform
Example
Choose the bound property, update event, modifiers property, modifiers, and optional transform for a custom component model:
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);