EditCell ​

<template>
  <edit-cell v-model:value="value" element="el-input" />
  <p>Value: {{ value }}</p>
</template>

<script lang="ts" setup>
import { ref } from 'vue'

const value = ref('Click to edit')
</script>

<template>
  <div style="width: 240px">
    <edit-cell v-model:value="value" showtips />
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'

const value = ref(
  'This is a long text value. Hover to preview the full content, then click to edit it.'
)
</script>

<template>
  <div style="display: flex; gap: 16px; align-items: center">
    <edit-cell v-model:value="text" element="el-input" placeholder="Input" />
    <edit-cell v-model:value="num" element="el-input-number" />
    <edit-cell
      v-model:value="selected"
      element="el-select"
      :item-props="{ options: options }"
    />
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'

const text = ref('Hello')
const num = ref(10)
const selected = ref('a')
const options = [
  { label: 'Option A', value: 'a' },
  { label: 'Option B', value: 'b' },
  { label: 'Option C', value: 'c' },
]
</script>

<template>
  <edit-cell
    v-model:value="value"
    element="el-input"
    :popover-edit="true"
    placeholder="Click to edit in popover"
  />
</template>

<script lang="ts" setup>
import { ref } from 'vue'

const value = ref('Edit me')
</script>