Attachment

<script setup>
import { Attachment } from "@dicehub/kappa/components/attachment";

const images = ["pressure.png", "velocity.png", "vorticity.png"];
</script>

<template>
  <Attachment.Group class="attachment-images" role="group" aria-label="Contour image attachments">
    <Attachment.Root
      v-for="image in images"
      :key="image"
      state="done"
      orientation="vertical"
    >
      <Attachment.Media variant="image">
        <img :src="`/${image}`" :alt="`${image} contour preview`" />
      </Attachment.Media>
      <Attachment.Content>
        <Attachment.Title>{{ image }}</Attachment.Title>
        <Attachment.Description>PNG · 1.8 MB</Attachment.Description>
      </Attachment.Content>
    </Attachment.Root>
  </Attachment.Group>
</template>

<style scoped>
.attachment-images {
  inline-size: min(100%, 24rem);
}
</style>

<script setup>
import { Attachment } from "@dicehub/kappa/components/attachment";

const files = [
  { state: "idle", name: "geometry.step", detail: "Ready to upload" },
  { state: "uploading", name: "volume-mesh.msh", detail: "Uploading · 64%" },
  { state: "processing", name: "run-042.foam", detail: "Indexing result fields" },
  { state: "error", name: "boundary-map.json", detail: "Upload failed. Try again." },
  { state: "done", name: "solver-log.txt", detail: "Text · 184 KB" },
];
</script>

<template>
  <Attachment.Root class="attachment-row" v-for="file in files" :key="file.name" :state="file.state">
    <Attachment.Media variant="icon" aria-hidden="true">FILE</Attachment.Media>
    <Attachment.Content>
      <Attachment.Title>{{ file.name }}</Attachment.Title>
      <Attachment.Description>{{ file.detail }}</Attachment.Description>
    </Attachment.Content>
  </Attachment.Root>
</template>

<style scoped>
.attachment-row {
  inline-size: min(100%, 24rem);
}
</style>

<script setup>
import { Attachment } from "@dicehub/kappa/components/attachment";
</script>

<template>
  <Attachment.Root class="attachment-row" v-for="size in ['default', 'sm', 'xs']" :key="size" :size="size" state="done">
    <Attachment.Media variant="icon" aria-hidden="true">CSV</Attachment.Media>
    <Attachment.Content>
      <Attachment.Title>{{ size }} · residuals.csv</Attachment.Title>
      <Attachment.Description>CSV · 96 KB</Attachment.Description>
    </Attachment.Content>
  </Attachment.Root>
</template>

<style scoped>
.attachment-row {
  inline-size: min(100%, 24rem);
}
</style>

<script setup>
import { Attachment } from "@dicehub/kappa/components/attachment";
</script>

<template>
  <Attachment.Root state="done" orientation="horizontal">
    <Attachment.Media variant="icon" aria-hidden="true">CASE</Attachment.Media>
    <Attachment.Content>
      <Attachment.Title>horizontal.foam</Attachment.Title>
      <Attachment.Description>OpenFOAM case</Attachment.Description>
    </Attachment.Content>
  </Attachment.Root>

  <Attachment.Root class="attachment-tile" state="done" orientation="vertical">
    <Attachment.Media variant="image">
      <img src="/velocity-contour.png" alt="Velocity contour preview" />
    </Attachment.Media>
    <Attachment.Content>
      <Attachment.Title>velocity.png</Attachment.Title>
      <Attachment.Description>PNG · 2.1 MB</Attachment.Description>
    </Attachment.Content>
  </Attachment.Root>
</template>

<style scoped>
.attachment-tile {
  inline-size: 7.5rem;
}
</style>

<script setup>
import { Attachment } from "@dicehub/kappa/components/attachment";

const files = ["rotor-surface.stl", "pressure-field.vtk", "solver-log.txt", "residuals.csv"];
</script>

<template>
  <Attachment.Group role="group" aria-label="Simulation attachments" tabindex="0">
    <Attachment.Root class="attachment-row" v-for="file in files" :key="file" state="done">
      <Attachment.Media variant="icon" aria-hidden="true">FILE</Attachment.Media>
      <Attachment.Content>
        <Attachment.Title>{{ file }}</Attachment.Title>
        <Attachment.Description>Simulation file</Attachment.Description>
      </Attachment.Content>
    </Attachment.Root>
  </Attachment.Group>
</template>

<style scoped>
.attachment-row {
  inline-size: 16rem;
}
</style>

<script setup>
import { Attachment } from "@dicehub/kappa/components/attachment";

function removeFile() {
  // Remove only this attachment.
}
</script>

<template>
  <Attachment.Root state="done">
    <Attachment.Media variant="icon" aria-hidden="true">CASE</Attachment.Media>
    <Attachment.Content>
      <Attachment.Title>rotor-case.cas</Attachment.Title>
      <Attachment.Description>Fluent case · 24.6 MB</Attachment.Description>
    </Attachment.Content>
    <Attachment.Actions>
      <Attachment.Action aria-label="Remove rotor-case.cas" @click="removeFile">×</Attachment.Action>
    </Attachment.Actions>
    <Attachment.Trigger
      as="a"
      href="/cases/rotor-case"
      aria-label="Open rotor-case.cas"
    />
  </Attachment.Root>
</template>

<script setup>
import { Attachment } from "@dicehub/kappa/components/attachment";
</script>

<template>
  <div dir="rtl">
    <Attachment.Root state="done">
      <Attachment.Media variant="icon" aria-hidden="true">CSV</Attachment.Media>
      <Attachment.Content>
        <Attachment.Title>نتائج-الضغط.csv</Attachment.Title>
        <Attachment.Description>CSV · ١٢٨ كيلوبايت</Attachment.Description>
      </Attachment.Content>
      <Attachment.Actions>
        <Attachment.Action aria-label="إزالة نتائج الضغط">×</Attachment.Action>
      </Attachment.Actions>
    </Attachment.Root>
  </div>
</template>