Editable

#Basic usage

Label

Hello World

editable/basic.vue

<script setup lang="ts">
import { check, x } from "@bysages/icons";
import { Editable, Icon } from "@bysages/vue";
</script>

<template>
  <Editable.Root placeholder="Enter text…" default-value="Hello World">
    <Editable.Label>Label</Editable.Label>
    <Editable.Area>
      <Editable.Preview />
      <Editable.Input />
    </Editable.Area>
    <Editable.Control>
      <Editable.EditTrigger aria-label="Edit">
        <svg
          viewBox="0 0 24 24"
          fill="none"
          stroke="currentColor"
          stroke-width="2"
          aria-hidden="true"
        >
          <path
            d="M12 20h9M16.5 3.5a2.12 2.12 0 0 1 3 3L7 19l-4 1 1-4Z"
            stroke-linecap="round"
            stroke-linejoin="round"
          />
        </svg>
      </Editable.EditTrigger>
      <Editable.SubmitTrigger aria-label="Submit">
        <Icon :glyph="check" />
      </Editable.SubmitTrigger>
      <Editable.CancelTrigger aria-label="Cancel">
        <Icon :glyph="x" />
      </Editable.CancelTrigger>
    </Editable.Control>
  </Editable.Root>
</template>

#Props

#Area

A styled part — no props of its own; it takes the anatomy's shared styling.

#CancelTrigger

A styled part — no props of its own; it takes the anatomy's shared styling.

#Control

A styled part — no props of its own; it takes the anatomy's shared styling.

#EditTrigger

A styled part — no props of its own; it takes the anatomy's shared styling.

#Input

A styled part — no props of its own; it takes the anatomy's shared styling.

#Label

A styled part — no props of its own; it takes the anatomy's shared styling.

#Preview

A styled part — no props of its own; it takes the anatomy's shared styling.

#Root

Prop	Type	Default	Description
`size`	`String as PropType<"sm" \| "md" \| "lg">`	`"md"`	One rung of the control-height ladder for the editing field.
`activationMode`	`editable.ActivationMode`	`"focus"`	The activation mode for the preview element. - "focus" - Enter edit mode when the preview is focused - "dblclick" - Enter edit mode when the preview is double-clicked - "click" - Enter edit mode when the preview is clicked
`autoResize`	`boolean`		Whether the editable should auto-resize to fit the content.
`defaultEdit`	`boolean`		Whether the editable is in edit mode by default.
`defaultValue`	`string`		The initial value of the editable when rendered. Use when you don't need to control the value of the editable.
`disabled`	`boolean`		Whether the editable is disabled.
`edit`	`boolean`		Whether the editable is in edit mode.
`finalFocusEl`	`() => HTMLElement \| null`		The element to receive focus when the editable is closed.
`form`	`string`		The associate form of the underlying input.
`id`	`string`		The unique identifier of the machine.
`ids`	`Partial<{ root: string; area: string; label: string; preview: string; input: string; control: string; submitTrigger: string; cancelTrigger: string; editTrigger: string; }>`		The ids of the elements in the editable. Useful for composition.
`invalid`	`boolean`		Whether the input's value is invalid.
`maxLength`	`number`		The maximum number of characters allowed in the editable
`modelValue`	`string`		The v-model value of the editable
`name`	`string`		The name attribute of the editable component. Used for form submission.
`placeholder`	`string \| { edit: string; preview: string; }`		The placeholder text for the editable.
`readOnly`	`boolean`		Whether the editable is read-only.
`required`	`boolean`		Whether the editable is required.
`selectOnFocus`	`boolean`	`true`	Whether to select the text in the input when it is focused.
`submitMode`	`editable.SubmitMode`	`"both"`	The action that triggers submit in the edit mode: - "enter" - Trigger submit when the enter key is pressed - "blur" - Trigger submit when the editable is blurred - "none" - No action will trigger submit. You need to use the submit button - "both" - Pressing `Enter` and blurring the input will trigger submit
`translations`	`editable.IntlTranslations`		The translations for the editable.

#SubmitTrigger

A styled part — no props of its own; it takes the anatomy's shared styling.