Vitral 0.2
Diversos

Inplace

Uma exibição que vira o seu editor quando ativada, e volta a ser exibição ao terminar.

Testado com WAI-ARIA

Importação

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

Texto editável

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>

Conteúdo sob demanda

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>

Desabilitado

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

Lido de packages/vue/src/components/Inplace/types.ts, então diz o que o componente aceita de fato.

Props

NomeTipoDescrição
closablebooleanAdiciona um botão que volta à exibição.
disabledboolean—

Mais pt, dt e unstyled de BaseProps; veja pass-through e modo sem estilo.

Emits

EventoPayloadDescrição
openevent: Event—
closeevent: Event—

Slots

NomeProps do slotDescrição
display—O que aparece até ser ativado.
content(props: { closeCallback: (event?: Event) => void })No que ele se transforma: o editor.