Commit 6c220e38 authored by Dominique Feyer's avatar Dominique Feyer

TASK: Add metadata support in neos-form-input

parent 5bfb5044
......@@ -106,8 +106,10 @@ declare global {
namespace StencilComponents {
interface NeosFormInput {
'disabled': boolean;
'label': string;
'placeholder': string;
'type': string;
'value': string;
}
}
......@@ -131,8 +133,10 @@ declare global {
}
namespace JSXElements {
export interface NeosFormInputAttributes extends HTMLAttributes {
'disabled'?: boolean;
'label'?: string;
'placeholder'?: string;
'type'?: string;
'value'?: string;
}
}
......
......@@ -10,11 +10,14 @@ export class FormInput {
@Prop() placeholder: string;
@Prop() value: string;
@Prop() label: string;
@Prop() type: string = 'text';
@Prop() disabled: boolean = false;
renderInput() {
return (<input
placeholder={this.placeholder}
type="text"
type={this.type}
disabled={this.disabled}
value={this.value}
/>)
}
......@@ -22,8 +25,15 @@ export class FormInput {
renderInputWithLabel() {
return (
<label>
<neos-label label={this.label}></neos-label>
{this.renderInput()}
<div class="label">
<neos-label label={this.label}></neos-label>
<div class="metadata">
<slot name="metadata" />
</div>
</div>
<div class="input">
{this.renderInput()}
</div>
</label>
);
}
......
......@@ -18,15 +18,29 @@
padding: 0 $content-padding;
margin: $content-margin-medium 0;
&:focus,
&:hover {
&:focus:enabled,
&:hover:enabled {
outline: 1px solid neos-color($colors-dark, 'primary');
}
&:focus {
&:focus:enabled {
background-color: neos-color($colors-dark, 'brightest');
color: neos-color($colors-dark, 'brightest', 'contrast');
outline: 2px solid neos-color($colors-dark, 'brightest');
}
&[disabled] {
cursor: not-allowed;
opacity: .85;
}
}
.label {
display: flex;
align-items: center;
}
.metadata {
margin-left: auto;
}
}
......@@ -215,8 +215,13 @@
<h2>default</h2>
</header>
<neos-inspector-group icon="file" label="Document">
<neos-form-input label="Title"></neos-form-input>
<neos-form-input label="URI Path Segement"></neos-form-input>
<neos-form-input label="Title" value="My good blog post">
<neos-badge slot="metadata">required</neos-badge>
</neos-form-input>
<neos-form-input label="URI Path Segement" disabled value="my-good-blog-post">
<neos-badge slot="metadata">readonly</neos-badge>
<neos-badge slot="metadata">computed</neos-badge>
</neos-form-input>
</neos-inspector-group>
<neos-inspector-group icon="cogs" label="SEO">
<neos-form-input label="Descritption" placeholder="A short and meanigful description of the document"></neos-form-input>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment