Inplace

Click-to-edit

A value shown as text until someone clicks it to change it — a title, a name in a list. It keeps a page readable when editing is occasional. When most visitors will edit, show the field.

Basic

click the title · Enter, Esc or × to finish

<script setup lang="ts">
import { ref } from "vue";
import { BlessInplace, BlessInput } from "blessing-ui";
const title = ref("第3話 フラグの立たない");
</script>

<template>
  <div class="col">
    <BlessInplace closable>
      <template #display>{{ title || "Click to edit" }}</template>
      <template #content="{ close }"
        ><BlessInput v-model="title" size="sm" @keydown.enter="close"
      /></template>
    </BlessInplace>
    <small>click the title · Enter, Esc or × to finish</small>
  </div>
</template>

• Opening moves focus into the first control of #content; Esc, the × (closable) or the close slot prop close it and put focus back on the text.
• The #display button needs text that says it can be edited — the value itself usually does, but an empty value needs a placeholder ("Add a title").

Usage

import { BlessInplace } from "blessing-ui";

API

Props

Name	Type	Default	Description
closable	boolean	—
disabled	boolean	—
closeLabel	string	"Close"
active	boolean	false

Events

Name	Payload	Description
open	[]
close	[]
update:active	[value: boolean]

Slots

Name	Scope	Description
display	—
content	{ close: () => void; }