{"name":"editable","title":"Editable","description":"Inline editable text: a preview that switches to an input on click or focus, submits on Enter or blur, and cancels on Escape.","installCommand":"bunx marko-ui add editable -y","usageTags":"<Editable>","importSnippet":"import Editable from \"@/components/ui/editable/editable.marko\";","usageSnippet":"<Editable defaultValue=\"Edit this text\"/>","tags":["Editable"],"parts":[{"name":"trigger","param":"Record<string, unknown>"}],"props":[{"name":"activationMode","type":"ActivationMode | undefined","required":false,"default":"focus","description":"The activation mode for the preview element.\n\n- \"focus\" - Enter edit mode when the preview is focused\n- \"dblclick\" - Enter edit mode when the preview is double-clicked\n- \"click\" - Enter edit mode when the preview is clicked\n- \"none\" - Edit can be triggered programmatically only"},{"name":"autoResize","type":"boolean | undefined","required":false,"description":"Whether the editable should auto-resize to fit the content."},{"name":"defaultEdit","type":"boolean | undefined","required":false,"description":"Whether the editable is in edit mode by default."},{"name":"defaultValue","type":"string | undefined","required":false,"description":"The initial value of the editable when rendered.\nUse when you don't need to control the value of the editable."},{"name":"dir","type":"'ltr' | 'rtl' | undefined","required":false,"default":"ltr","description":"The document's text/writing direction."},{"name":"disabled","type":"boolean | undefined","required":false,"description":"Whether the editable is disabled."},{"name":"edit","type":"boolean | undefined","required":false,"description":"Whether the editable is in edit mode."},{"name":"finalFocusEl","type":"(() => HTMLElement | null) | undefined","required":false,"description":"The element to receive focus when the editable is closed."},{"name":"form","type":"string | undefined","required":false,"description":"The associate form of the underlying input."},{"name":"getRootNode","type":"(() => ShadowRoot | Document | Node) | undefined","required":false,"description":"A root node to correctly resolve document in custom environments. E.x.: Iframes, Electron."},{"name":"ids","type":"ElementIds | undefined","required":false,"description":"The ids of the elements in the editable. Useful for composition."},{"name":"invalid","type":"boolean | undefined","required":false,"description":"Whether the input's value is invalid."},{"name":"maxLength","type":"number | undefined","required":false,"description":"The maximum number of characters allowed in the editable"},{"name":"name","type":"string | undefined","required":false,"description":"The name attribute of the editable component. Used for form submission."},{"name":"placeholder","type":"string | { edit: string; preview: string; } | undefined","required":false,"description":"The placeholder text for the editable."},{"name":"readOnly","type":"boolean | undefined","required":false,"description":"Whether the editable is read-only."},{"name":"required","type":"boolean | undefined","required":false,"description":"Whether the editable is required."},{"name":"selectOnFocus","type":"boolean | undefined","required":false,"default":"true","description":"Whether to select the text in the input when it is focused."},{"name":"submitMode","type":"SubmitMode | undefined","required":false,"default":"both","description":"The action that triggers submit in the edit mode:\n\n- \"enter\" - Trigger submit when the enter key is pressed\n- \"blur\" - Trigger submit when the editable is blurred\n- \"none\" - No action will trigger submit. You need to use the submit button\n- \"both\" - Pressing `Enter` and blurring the input will trigger submit"},{"name":"translations","type":"IntlTranslations | undefined","required":false,"description":"The translations for the editable."},{"name":"value","type":"string | undefined","required":false,"description":"The controlled value of the editable."},{"name":"valueCommit","type":"(value: string) => void","required":false},{"name":"valueRevert","type":"(value: string) => void","required":false}],"events":[{"name":"editChange","arg":"boolean"},{"name":"onEditChange","arg":"EditChangeDetails","description":"Function to call when the edit mode changes."},{"name":"onFocusOutside","arg":"FocusOutsideEvent","description":"Function called when the focus is moved outside the component"},{"name":"onInteractOutside","arg":"InteractOutsideEvent","description":"Function called when an interaction happens outside the component"},{"name":"onPointerDownOutside","arg":"PointerDownOutsideEvent","description":"Function called when the pointer is pressed down outside the component"},{"name":"onValueChange","arg":"ValueChangeDetails","description":"Function to call when the value changes."},{"name":"onValueCommit","arg":"ValueChangeDetails","description":"Function to call when the value is committed."},{"name":"onValueRevert","arg":"ValueChangeDetails","description":"Function to call when the value is reverted."},{"name":"valueChange","arg":"string"}],"keyboard":[],"accessibilityNotes":[],"examples":[{"id":"editable-demo","title":"Basic","source":"import Editable from \"@marko-ui/shadcn/ui/editable/editable.marko\";\n\n<Editable defaultValue=\"Edit this text\" class=\"w-[280px]\"/>","description":"An uncontrolled editable with an initial value."},{"id":"editable-placeholder","title":"Placeholder","source":"import Editable from \"@marko-ui/shadcn/ui/editable/editable.marko\";\n\n<Editable placeholder=\"Enter your name\" class=\"w-[280px]\"/>","description":"Shown in preview mode when the value is empty."},{"id":"editable-submit-mode","title":"Submit on Enter only","source":"import Editable from \"@marko-ui/shadcn/ui/editable/editable.marko\";\n\n<Editable defaultValue=\"Press Enter to submit\" submitMode=\"enter\" class=\"w-[280px]\"/>","description":"Set `submitMode=\"enter\"` so blurring the input cancels instead of submitting."},{"id":"editable-activation-mode","title":"Activation: double-click","source":"import Editable from \"@marko-ui/shadcn/ui/editable/editable.marko\";\n\n<Editable defaultValue=\"Double-click to edit\" activationMode=\"dblclick\" class=\"w-[280px]\"/>","description":"Set `activationMode=\"dblclick\"` to require a double-click before entering edit mode."},{"id":"editable-disabled","title":"Disabled","source":"import Editable from \"@marko-ui/shadcn/ui/editable/editable.marko\";\n\n<Editable defaultValue=\"Can't touch this\" disabled class=\"w-[280px]\"/>","description":"A disabled editable ignores pointer input and is skipped by the tab order."},{"id":"editable-custom-trigger","title":"Custom trigger","source":"import Editable from \"@marko-ui/shadcn/ui/editable/editable.marko\";\nimport Button from \"@marko-ui/shadcn/ui/button/button.marko\";\n\n<Editable defaultValue=\"Edit via custom trigger\" class=\"w-[280px]\">\n  <@trigger|props|>\n    <Button type=\"button\" ...props variant=\"outline\" size=\"sm\">Edit</Button>\n  </@trigger>\n</Editable>","description":"Replace the default edit-trigger button with the `@trigger` tag parameter."},{"id":"editable-controlled","title":"Controlled","source":"import Editable from \"@marko-ui/shadcn/ui/editable/editable.marko\";\n\n<let/value=\"Saulo Vallory\"/>\n<let/lastCommitted=\"Click submit to see this update\"/>\n\n<div class=\"flex flex-col gap-2\">\n  <Editable\n    value=value\n    valueChange(newValue) { value = newValue; }\n    valueCommit(newValue) { lastCommitted = newValue; }\n    class=\"w-[280px]\"\n  />\n  <span class=\"text-sm text-muted-foreground\">Live value: ${value}</span>\n  <span class=\"text-sm text-muted-foreground\">Last committed: ${lastCommitted}</span>\n</div>","description":"Zag machines are controlled: a `value` prop without a change handler never moves. Pair it with `valueChange`, and use `valueCommit` to react only when the value is submitted.","essential":true}],"importInstallCommand":"bun add @marko-ui/shadcn marko-zag","nativeAttributes":"input"}