Vitral 0.2
Misc

Inplace

A display that turns into its editor when activated, and back again when done.

WAI-ARIA tested

Import

main.ts
import { Inplace } from '@vitral/vue';

Editable text

Ada Lovelace
<script setup lang="ts">import { Inplace, InputText } from '@vitral/vue';import { ref } from 'vue'; const name = ref('Ada Lovelace');</script> <template>    <Inplace closable>        <template #display>{{ name || 'Click to add a name' }}</template>        <template #content>            <InputText v-model="name" aria-label="Name" />        </template>    </Inplace></template>

Lazy content

View photo
<script setup lang="ts">import { Inplace } from '@vitral/vue';</script> <template>    <Inplace closable>        <template #display>View photo</template>        <template #content="{ closeCallback }">            <img src="https://picsum.photos/id/1015/320/200" alt="A river running through a valley" style="display: block; border-radius: 6px; cursor: zoom-out" @click="closeCallback()" />        </template>    </Inplace></template>

Disabled

Read-only value
<script setup lang="ts">import { Inplace } from '@vitral/vue';</script> <template>    <Inplace disabled>        <template #display>Read-only value</template>    </Inplace></template>

API

Read from packages/vue/src/components/Inplace/types.ts, so it says what the component actually accepts.

Props

NameTypeDescription
closablebooleanAdds a button that goes back to the display.
disabledboolean—

Plus pt, dt and unstyled from BaseProps, see pass-through and unstyled mode.

Emits

EventPayloadDescription
openevent: Event—
closeevent: Event—

Slots

NameSlot propsDescription
display—What shows until it is activated.
content(props: { closeCallback: (event?: Event) => void })What it becomes: the editor.