This module contains VComponent property binding decorators.
These decorators are designed to be used on VComponent classes when a particular property value
has to propagate to descendant components or a particular property value should be received
from a parent component, if that property value is provided by the parent.
Additional considerations:
- Property binding decorators are only honored when the VComponent custom element
is used in a Knockout binding environment.
- Functional VComponents rely upon the 'options' argument to
registerCustomElement
for registering this runtime metadata with the custom element. See the
registerCustomElement API Doc
for additional information.
import { consumedBindings, providedBindings } from "ojs/ojvcomponent-binding";
import { customElement, ExtendGlobalProps } from "ojs/ojvcomponent";
import { Component } from "preact";
type Props = Readonly<{ labeledge?: 'inside' | 'start' 'top'; readonly?: boolean; }>;
// Indicate that the component's 'labelEdge' and 'readonly' properties will consume
// the 'containerLabelEdge' and 'containerReadonly' variable values, respectively,
// provided by the parent.
@consumedBindings( { labelEdge: { name: 'containerLabelEdge' },
readonly: { name: 'containerReadonly' }
} )
// Indicate that the component will provide the 'labelEdge' and 'readonly' property values
// under different keys and with different transforms as required for different consumers.
@providedBindings( { labelEdge: [
{ name: 'containerLabelEdge', default: 'inside' },
{ name: 'labelEdge', default: 'inside', transform: { top: 'provided', start: 'provided' } }
],
readonly: [
{ name: 'containerReadonly' },
{ name: 'readonly' }
]
} )
@customElement('my-form-subsection-component')
class FormSubsectionComponent extends Component<ExtendGlobalProps<Props>> {
static defaultProps = {
labelEdge: 'inside',
readonly: false
};
render(props: Props) {
return <div>Label position = {props.labelEdge}, sub-section is {props.readonly ? 'read only' : 'editable'}</div>;
}
}