Editable

<script setup lang="ts">
import { Editable } from "@dicehub/kappa/components/editable";
</script>

<template>
  <Editable.Root
    id="task-name-editor"
    default-value="Mesh review"
    activation-mode="click"
    submit-mode="none"
  >
    <Editable.Label>Task name</Editable.Label>
    <Editable.Area>
      <Editable.Input aria-label="Task name" />
      <Editable.Preview />
    </Editable.Area>
    <Editable.Control>
      <Editable.EditTrigger aria-label="Edit">Edit</Editable.EditTrigger>
      <Editable.SubmitTrigger aria-label="Save">Save</Editable.SubmitTrigger>
      <Editable.CancelTrigger aria-label="Cancel">Cancel</Editable.CancelTrigger>
    </Editable.Control>
  </Editable.Root>
</template>

<script setup lang="ts">
import { ref } from "vue";
import { Editable } from "@dicehub/kappa/components/editable";

const projectName = ref("Ocean current study");
const committedName = ref(projectName.value);
</script>

<template>
  <Editable.Root
    id="controlled-project-name-editor"
    v-model="projectName"
    activation-mode="click"
    @value-commit="committedName = $event.value"
  >
    <Editable.Label>Project name</Editable.Label>
    <Editable.Area>
      <Editable.Input aria-label="Project name" />
      <Editable.Preview />
    </Editable.Area>
  </Editable.Root>
  <output aria-live="polite">Saved value: {{ committedName }}</output>
</template>

<script setup lang="ts">
import { Editable } from "@dicehub/kappa/components/editable";
</script>

<template>
  <Editable.Root id="disabled-project-editor" default-value="Archived project" disabled>
    <Editable.Label>Disabled</Editable.Label>
    <Editable.Area><Editable.Input aria-label="Disabled" /><Editable.Preview /></Editable.Area>
  </Editable.Root>

  <Editable.Root id="readonly-run-editor" default-value="Run 4189" read-only>
    <Editable.Label>Read only</Editable.Label>
    <Editable.Area><Editable.Input aria-label="Read only" /><Editable.Preview /></Editable.Area>
  </Editable.Root>

  <Editable.Root
    id="invalid-project-editor"
    default-value="Untitled"
    invalid
    activation-mode="click"
  >
    <Editable.Label>Invalid</Editable.Label>
    <Editable.Area><Editable.Input aria-label="Invalid" /><Editable.Preview /></Editable.Area>
  </Editable.Root>
</template>

<script setup lang="ts">
import { Editable, EDITABLE_SIZES } from "@dicehub/kappa/components/editable";
</script>

<template>
  <Editable.Root
    v-for="size in EDITABLE_SIZES"
    :id="`size-${size}-editor`"
    :key="size"
    :size="size"
    default-value="Surface refinement"
    activation-mode="click"
  >
    <Editable.Label>{{ size }}</Editable.Label>
    <Editable.Area>
      <Editable.Input :aria-label="`${size} editable field`" />
      <Editable.Preview />
    </Editable.Area>
  </Editable.Root>
</template>

<script setup lang="ts">
import { Editable } from "@dicehub/kappa/components/editable";
</script>

<template>
  <Editable.Root
    id="review-note-editor"
    default-value="Review the inlet values before the next solver run."
    activation-mode="click"
    submit-mode="none"
  >
    <Editable.Label>Review note</Editable.Label>
    <Editable.Area>
      <Editable.Input as-child aria-label="Review note">
        <textarea rows="3" />
      </Editable.Input>
      <Editable.Preview />
    </Editable.Area>
    <Editable.Control>
      <Editable.EditTrigger aria-label="Edit">Edit</Editable.EditTrigger>
      <Editable.SubmitTrigger aria-label="Save">Save</Editable.SubmitTrigger>
      <Editable.CancelTrigger aria-label="Cancel">Cancel</Editable.CancelTrigger>
    </Editable.Control>
  </Editable.Root>
</template>