Corex.Editable (Corex v0.1.0-beta.1)

View Source

Phoenix implementation of Zag.js Editable.

Examples

Basic

<.editable id="edit" value="Click to edit" class="editable">
  <:label>Name</:label>
  <:edit_trigger><.heroicon name="hero-pencil-square" class="icon" /></:edit_trigger>
  <:submit_trigger><.heroicon name="hero-check" class="icon" /></:submit_trigger>
  <:cancel_trigger><.heroicon name="hero-x-mark" class="icon" /></:cancel_trigger>
</.editable>

Required slots: :label, :edit_trigger, :submit_trigger, :cancel_trigger. Preview value is managed by the component and the Editable TS hook.

Styling

Use data attributes to target elements:

[data-scope="editable"][data-part="root"] {}
[data-scope="editable"][data-part="area"] {}
[data-scope="editable"][data-part="label"] {}
[data-scope="editable"][data-part="input"] {}
[data-scope="editable"][data-part="preview"] {}
[data-scope="editable"][data-part="edit-trigger"] {}
[data-scope="editable"][data-part="control"] {}
[data-scope="editable"][data-part="submit-trigger"] {}
[data-scope="editable"][data-part="cancel-trigger"] {}

If you wish to use the default Corex styling, you can use the class editable on the component. This requires to install Mix.Tasks.Corex.Design first and import the component css file.

@import "../corex/main.css";
@import "../corex/tokens/themes/neo/light.css";
@import "../corex/components/editable.css";

You can then use modifiers

<.editable class="editable editable--accent editable--lg" value="">
  <:label>Label</:label>
  <:edit_trigger>Edit</:edit_trigger>
  <:submit_trigger>Save</:submit_trigger>
  <:cancel_trigger>Cancel</:cancel_trigger>
</.editable>

Programmatic control

<.action phx-click={Corex.Editable.set_value("my-editable", "Hello")}>
  Set Hello
</.action>
def handle_event("set_text", _, socket) do
  {:noreply, Corex.Editable.set_value(socket, "my-editable", "Hello")}
end

Summary

Components

editable(assigns)

API

set_value(editable_id, value)

Sets the editable text from the client. Returns a Phoenix.LiveView.JS command.

set_value(socket, editable_id, value)

Sets the editable text from the server by pushing an event to the hook.

Components

editable(assigns)

Attributes

  • id (:string) - The id of the editable component.
  • value (:string) - Initial or current text; merged into default for the client hook (prefer default_value when both are set). Defaults to "".
  • default_value (:string) - Preferred initial text when set (otherwise value). Defaults to nil.
  • disabled (:boolean) - Whether the editable is disabled. Defaults to false.
  • read_only (:boolean) - Whether the editable is read-only. Defaults to false.
  • required (:boolean) - Whether the input is required. Defaults to false.
  • invalid (:boolean) - Whether the editable is in invalid state. Defaults to false.
  • name (:string) - The name attribute for form submission. Defaults to nil.
  • form (:string) - The id of the form this input belongs to. Defaults to nil.
  • dir (:string) - Text direction. Defaults to nil. Must be one of nil, "ltr", or "rtl".
  • orientation (:string) - Defaults to "vertical". Must be one of "horizontal", or "vertical".
  • edit (:boolean) - Controlled edit state when controlled_edit is true. Defaults to false.
  • controlled_edit (:boolean) - Whether edit state is controlled externally. Defaults to false.
  • default_edit (:boolean) - Initial edit state when uncontrolled. Defaults to false.
  • placeholder (:string) - Placeholder text when value is empty. Defaults to nil.
  • activation_mode (:string) - How to activate edit mode. Defaults to nil. Must be one of nil, "dblclick", or "focus".
  • select_on_focus (:boolean) - Whether to select all text on focus. Defaults to true.
  • on_value_change (:string) - Server event name when value changes. Defaults to nil.
  • on_value_change_client (:string) - Client event name when value changes. Defaults to nil.
  • translation (Corex.Editable.Translation) - Override translatable strings. Defaults to nil.
  • field (Phoenix.HTML.FormField) - A form field struct, e.g. f[:text] or @form[:text]. Defaults to nil.
  • Global attributes are accepted.

Slots

  • label (required) - Accepts attributes:
    • class (:string)
  • edit_trigger (required) - Accepts attributes:
    • class (:string)
  • submit_trigger (required) - Accepts attributes:
    • class (:string)
  • cancel_trigger (required) - Accepts attributes:
    • class (:string)

API

set_value(editable_id, value)

Sets the editable text from the client. Returns a Phoenix.LiveView.JS command.

Examples

<.action phx-click={Corex.Editable.set_value("my-editable", "Hello")}>
  Set Hello
</.action>

set_value(socket, editable_id, value)

Sets the editable text from the server by pushing an event to the hook.

Examples

def handle_event("set_text", _params, socket) do
  {:noreply, Corex.Editable.set_value(socket, "my-editable", "Hello")}
end