Editable

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

  const title = ref('Untitled document')
</script>

<template>
  <Stack class="w-full max-w-sm">
    <Editable v-model="title" aria-label="Document name" />
    <Text size="sm" tone="muted">Saved: {{ title || '—' }}</Text>
  </Stack>
</template>

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

  const values = reactive({
    double: 'Double-click to rename this document',
    manual: 'Use the edit button to make changes',
  })
</script>

<template>
  <Stack class="w-full max-w-sm" gap="lg">
    <FormField
      label="Double click"
      description="Press Enter or Space when focused to edit with a keyboard."
    >
      <Editable v-model="values.double" activation-mode="dblclick" />
    </FormField>
    <FormField
      label="Manual activation"
      description="The draft stays open until you save or cancel."
    >
      <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('Creator workspace')
  const fail = ref(false)
  const saved = ref(false)

  async function save(value: string) {
    saved.value = false
    if (!value.trim()) throw new Error('Enter a workspace name')
    await new Promise(resolve => setTimeout(resolve, 800))
    if (fail.value) throw new Error('Could not save. Disable the simulated failure and try again.')
    saved.value = true
  }
</script>

<template>
  <Stack class="w-full max-w-sm">
    <FormField
      label="Workspace name"
      description="Stay in edit mode while saving. A failed save keeps the draft for retry."
    >
      <Editable v-model="name" :on-save="save" submit-mode="enter" />
    </FormField>
    <FormField label="Simulate a failed save" orientation="horizontal">
      <Switch v-model="fail" />
    </FormField>
    <Text v-if="saved" role="status" size="sm" tone="muted">Workspace name saved.</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="Release version">
      <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">Save version</Button>
            <Button size="sm" variant="ghost" tone="neutral" :disabled="saving" @click="cancel">
              Cancel
            </Button>
          </template>
          <Button v-else size="sm" variant="outline" tone="neutral" @click="edit">
            Edit version
          </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="Small text" aria-label="Small" />
    <Editable size="md" model-value="Default text" aria-label="Default" />
    <Editable size="lg" model-value="Large text" aria-label="Large" />
    <FormField label="Read only" description="Text can still be selected and copied.">
      <Editable model-value="Read-only project name" readonly />
    </FormField>
    <FormField label="Disabled">
      <Editable model-value="Editing unavailable" disabled />
    </FormField>
    <FormField label="Empty value">
      <Editable placeholder="Add a note…" />
    </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, 'Use at least 2 characters')),
  })

  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="Display name"
      description="Confirm the field edit before saving the profile."
      required
    >
      <Editable
        v-model="values.displayName"
        v-model:editing="editing"
        name="displayName"
        placeholder="Enter a display name"
      />
    </FormField>
    <Button type="submit" :loading="submitting" :disabled="editing" class="self-start">
      Save profile
    </Button>
    <Text v-if="saved" role="status" size="sm" tone="muted">Saved: {{ saved }}</Text>
  </Form>
</template>