KongponentsInline Edit
KInlineEdit - A wrapper which adds inline edit capability. Currently only supports single text input.
Click to edit me
The
KComponentcomponent is used in this example to create state.
<KComponent :data="{ inlineText: 'Click to edit me' }" v-slot="{ data }">
<KInlineEdit>
<h3>{{ data.inlineText }}</h3>
</KInlineEdit>
</KComponent>Props
ignoreValue
If true, will not set the value of the input when enabled/clicked. This is useful to control placeholder style text
cool placeholder
The
KComponentcomponent is used in this example to create state.
<KComponent :data="{ inlineText: '' }" v-slot="{ data }">
<KInlineEdit
:ignore-value="data.inlineText.length === 0"
@changed="newVal => data.inlineText = newVal">
<p>{{ data.inlineText || 'cool placeholder' }}</p>
</KInlineEdit>
</KComponent>styleOverrides
Styles to set when the input is active. Useful when styling the default state differently.
cool placeholder
The
KComponentcomponent is used in this example to create state.
<KComponent :data="{ inlineText: '' }" v-slot="{ data }">
<KInlineEdit
:ignore-value="data.inlineText.length === 0"
:style-overrides="{ color: 'black' }"
@changed="newVal => data.inlineText = newVal">
<p :class="{ 'decorated-text': data.inlineText.length > 0 }">
{{ data.inlineText || 'cool placeholder' }}
</p>
</KInlineEdit>
</KComponent>
<style>
.decorated-text {
font-style: italic;
}
</style>Events
@changed
Emitted blurred away from the editing input or when enter is pressed.
When clicking out of the input @changed will fire and emit the value. Can be used to reset the outside data.
TIP
While the component itself does not protect against returning empty an empty value, it is advised to do a check at the implementation layer to ensure empty & validation are accounted for.
Click to edit me
The
KComponentcomponent is used in this example to create state.
<KComponent :data="{ inlineText: 'Click to edit me' }" v-slot="{ data }">
<div>
Updated: {{ data.inlineText }}
<KInlineEdit @changed="newVal => { if(newVal.length) { data.inlineText = newVal } else { alert('cannot be empty') } }">
<h3>{{ data.inlineText }}</h3>
</KInlineEdit>
</div>
</KComponent>Slots
default- Content to be edited
WARNING
An HTML element must be passed in the slot. An error will be thrown if not passed.
<!-- good -->
<KInlineEdit>
<p>Some text</p>
</KInlineEdit>
<!-- bad -->
<KInlineEdit>
Some text
</KInlineEdit>Theming
Reference KInput theming. The input takes up 100% of its parent container.