Inplace: Expose close() and open() methods

[BenJackGill]

Description

The Inplace component has emits for open and close that are emitted during open and close, but it doesn't expose methods to programmatically control its state. Adding open() and close() methods would improve its flexibility and allow better integration with form controls and other components.

Use Case

Common scenarios where programmatic control would be valuable:

• Form reset functionality
• Bulk edit cancellation
• Keyboard shortcuts for editing

Example

Consider this form with multiple Inplace editors and a reset button. This is a very hacky solution:

<template>
  <form @submit.prevent="handleSubmit">
    <Inplace ref="nameEditor">
      <template #display>
        <div>{{ formData.name || 'Add name' }}</div>
      </template>
      <template #content="{ closeCallback }">
        <InputText v-model="formData.name" />
      </template>
    </Inplace>
    <Inplace ref="websiteEditor">
      <template #display>
        <div>{{ formData.website || 'Add website' }}</div>
      </template>
      <template #content="{ closeCallback }">
        <InputText v-model="formData.website" />
      </template>
    </Inplace>
    <!-- Currently no clean way to close all editors when resetting -->
    <Button label="Reset Form" @click="resetForm" />
  </form>
</template>

<script setup lang="ts">
const resetForm = () => {
  formData.value = defaultValues;
  // Would be ideal to do:
  // nameEditor.value?.close();
  // websiteEditor.value?.close();
};
</script>

Current Workaround

Currently, we must store the closeCallback from the content slot and manage it manually:

<template>
  <form @submit.prevent="handleSubmit">
    <Inplace>
      <template #display>
        <div>{{ formData.name || 'Add name' }}</div>
      </template>
      <template #content="{ closeCallback }">
        <!-- Store callback on mount -->
        <div v-once @vue:mounted="closeCallbacks.push(closeCallback)">
          <InputText v-model="formData.name" />
        </div>
      </template>
    </Inplace>
    <Inplace>
      <template #display>
        <div>{{ formData.website || 'Add website' }}</div>
      </template>
      <template #content="{ closeCallback }">
        <!-- Store callback on mount -->
        <div v-once @vue:mounted="closeCallbacks.push(closeCallback)">
          <InputText v-model="formData.website" />
        </div>
      </template>
    </Inplace>
    <Button label="Reset Form" @click="resetForm" />
  </form>
</template>

<script setup lang="ts">
const closeCallbacks = ref<(() => void)[]>([]);
const resetForm = () => {
  formData.value = defaultValues;
  // Need to call all stored callbacks
  closeCallbacks.value.forEach((cb) => cb());
};
</script>

This is cumbersome and requires additional state management.

Proposed API

interface InplaceMethods {
  close(): void;
  open(): void;
  toggle(): void;
}