@kelvininc/ui-components
Version:
Kelvin UI Components
69 lines (42 loc) • 4.51 kB
Markdown
<!-- Auto Generated Below -->
## Properties
| Property | Attribute | Description | Type | Default |
| ------------- | ------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | --------- | -------------------- |
| `disabled` | `disabled` | Indicates whether the editable field is disabled. | `boolean` | `undefined` |
| `maxLength` | `max-length` | The maximum length of the editable field. | `number` | `DEFAULT_MAX_LENGTH` |
| `placeholder` | `placeholder` | Text displayed when the field has no value. Visible only when the slot is empty and the field is not in edit mode. Empty saves are not allowed: clearing all content and confirming reverts to the previous value. | `string` | `undefined` |
| `value` | `value` | The value of the field. | `string` | `undefined` |
## Events
| Event | Description | Type |
| ---------------- | ------------------------------------ | --------------------- |
| `contentBlured` | Emitted when the content is blurred. | `CustomEvent<void>` |
| `contentEdited` | Emitted when the content is edited. | `CustomEvent<string>` |
| `contentFocused` | Emitted when the content is focused. | `CustomEvent<void>` |
## Methods
### `resetContent() => Promise<void>`
Resets the content of the editable field.
#### Returns
Type: `Promise<void>`
## CSS Custom Properties
| Name | Description |
| ------------------------------------------------ | ---------------------------------------------------------------------------------------------------------------------------- |
| `--inline-editable-field-background-color-hover` | Background color of the editable field on hover. |
| `--inline-editable-field-editing-min-width` | Minimum width applied while editing. Takes priority over `--inline-editable-field-min-width` in edit mode. Unset by default. |
| `--inline-editable-field-min-width` | Minimum width applied to the field in visualization mode. Unset by default — consumers opt in for layout stability. |
| `--inline-editable-field-outline-color-focus` | Outline color of the editable field on focus. |
| `--inline-editable-field-outline-color-hover` | Outline color of the editable field on hover. |
| `--inline-editable-field-placeholder-color` | Text color used to render the placeholder when the field is empty. |
| `--margin-left-right` | Margin left and right of the editable container. |
| `--margin-top-bottom` | Margin top and bottom of the editable container. |
## Dependencies
### Depends on
- [kv-action-button-icon](../action-button-icon)
### Graph
```mermaid
graph TD;
kv-inline-editable-field --> kv-action-button-icon
kv-action-button-icon --> kv-action-button
kv-action-button-icon --> kv-icon
style kv-inline-editable-field fill:#f9f,stroke:#333,stroke-width:4px
```
----------------------------------------------