Editable 原地编辑

<script setup lang="ts">
  import { ref } from 'vue'
  import { Editable, Stack, Text } from '@hina-ui/vue'

  const title = ref('未命名文档')
</script>

<template>
  <Stack class="w-full max-w-sm">
    <Editable v-model="title" aria-label="文档名称" />
    <Text size="sm" tone="muted">已保存：{{ title || '—' }}</Text>
  </Stack>
</template>

<script setup lang="ts">
  import { reactive } from 'vue'
  import { Editable, FormField, Stack } from '@hina-ui/vue'

  const values = reactive({ double: '双击修改文档标题', manual: '按编辑按钮修改' })
</script>

<template>
  <Stack class="w-full max-w-sm" gap="lg">
    <FormField label="双击进入" description="键盘聚焦后仍可按 Enter 或空格进入。">
      <Editable v-model="values.double" activation-mode="dblclick" />
    </FormField>
    <FormField label="手动进入" description="草稿一直保留到按下保存或取消。">
      <Editable v-model="values.manual" activation-mode="manual" submit-mode="manual" />
    </FormField>
  </Stack>
</template>

<script setup lang="ts">
  import { ref } from 'vue'
  import { Editable, FormField, Stack, Switch, Text } from '@hina-ui/vue'

  const name = ref('创作者工作台')
  const fail = ref(false)
  const saved = ref(false)

  async function save(value: string) {
    saved.value = false
    if (!value.trim()) throw new Error('工作区名称不能为空')
    await new Promise(resolve => setTimeout(resolve, 800))
    if (fail.value) throw new Error('暂时无法保存，请关闭模拟失败后重试')
    saved.value = true
  }
</script>

<template>
  <Stack class="w-full max-w-sm">
    <FormField label="工作区名称" description="保存完成前保留编辑态，失败后可继续修改或重试。">
      <Editable v-model="name" :on-save="save" submit-mode="enter" />
    </FormField>
    <FormField label="模拟保存失败" orientation="horizontal">
      <Switch v-model="fail" />
    </FormField>
    <Text v-if="saved" role="status" size="sm" tone="muted">工作区名称已保存。</Text>
  </Stack>
</template>

<script setup lang="ts">
  import { ref } from 'vue'
  import { Button, Editable, FormField, Stack, Tag } from '@hina-ui/vue'

  const version = ref('1.8.0')
</script>

<template>
  <Stack class="w-full max-w-sm">
    <FormField label="发布版本">
      <Editable v-model="version" activation-mode="manual" submit-mode="manual">
        <template #preview="{ value }">
          <Tag tone="info">v{{ value }}</Tag>
        </template>
        <template #actions="{ editing, saving, edit, submit, cancel }">
          <template v-if="editing">
            <Button size="sm" :loading="saving" @click="submit">保存版本</Button>
            <Button size="sm" variant="ghost" tone="neutral" :disabled="saving" @click="cancel">
              取消
            </Button>
          </template>
          <Button v-else size="sm" variant="outline" tone="neutral" @click="edit">修改版本</Button>
        </template>
      </Editable>
    </FormField>
  </Stack>
</template>

<script setup lang="ts">
  import { Editable, FormField, Stack } from '@hina-ui/vue'
</script>

<template>
  <Stack class="w-full max-w-sm">
    <Editable size="sm" model-value="小号文本" aria-label="小号" />
    <Editable size="md" model-value="默认文本" aria-label="默认" />
    <Editable size="lg" model-value="大号文本" aria-label="大号" />
    <FormField label="只读" description="内容可以选择与复制。">
      <Editable model-value="只读项目名称" readonly />
    </FormField>
    <FormField label="禁用">
      <Editable model-value="暂时无法修改" disabled />
    </FormField>
    <FormField label="尚未填写">
      <Editable placeholder="添加备注…" />
    </FormField>
  </Stack>
</template>

<script setup lang="ts">
  import { reactive, ref } from 'vue'
  import * as v from 'valibot'
  import { Button, Editable, Form, FormField, Text } from '@hina-ui/vue'

  const values = reactive({ displayName: '' })
  const editing = ref(false)
  const saved = ref('')
  const schema = v.object({
    displayName: v.pipe(v.string(), v.trim(), v.minLength(2, '显示名称至少需要 2 个字')),
  })

  async function save(data: unknown) {
    await new Promise(resolve => setTimeout(resolve, 600))
    saved.value = (data as { displayName: string }).displayName
  }
</script>

<template>
  <Form
    v-slot="{ submitting }"
    :values="values"
    :rules="schema"
    class="w-full max-w-sm"
    @submit="save"
  >
    <FormField
      name="displayName"
      label="显示名称"
      description="先确认字段修改，再保存整份资料。"
      required
    >
      <Editable
        v-model="values.displayName"
        v-model:editing="editing"
        name="displayName"
        placeholder="填写显示名称"
      />
    </FormField>
    <Button type="submit" :loading="submitting" :disabled="editing" class="self-start">
      保存资料
    </Button>
    <Text v-if="saved" role="status" size="sm" tone="muted">已保存：{{ saved }}</Text>
  </Form>
</template>