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.
Note that the property binding decorators can only be used by VComponents that have Knockout binding applied to them.
import { consumedBindings, providedBindings} from "ojs/ojvcomponent-binding";
import { customElement, ExtendGlobalProps } from "ojs/ojvcomponent";
import { h, Component } from "preact";
type Props = {
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
};
...
}