Copy Field

Copy Field показывает значение только для чтения — ссылку трекера, postback-URL, код вставки — на подложке «готово к копированию» и держит справа одну кнопку копирования. Задача человека — забрать значение в буфер, не выделяя текст. Поле повторяет хром Input, кнопка — Button варианта default с текстовой подписью в верхнем регистре; в ADMY это snippet (тип clipper).

Статус: experimental · в системе с 2026-08 · интерактивность: always (всегда)

Когда использовать

Значение сгенерировано системой и нужно человеку снаружи продукта: ссылка трекера, postback-URL, код вставки, ключ интеграции.
Значение важно видеть рядом с полями формы, но править его нельзя.

Не использовать:

Значение можно редактировать позже — это Input с readonly, а не поле копирования.
Нужно только действие без показанного значения — это Button.
Длинный текст читают, а не переносят наружу — это Textarea.

Альтернативы:

input — значение только для чтения, которое позже можно редактировать
button — действие без показанного значения
textarea — длинный текст для чтения

Базовый

Ссылка трекера с описанием: клик по кнопке кладёт её в буфер, галочка подтверждает.

Tracker link https://trk.example.com/click?cid=42&sub={sub_id}

Use this link for conversion notification.

<!--
  🟢

  Базовый пример Copy Field показывает ссылку трекера из редактора кампании:
  значение только для чтения на подложке «готово к копированию», кнопка кладёт
  его в буфер, описание объясняет, для чего ссылка.
-->

<script>
import CopyField from "$lib/ui/CopyField.svelte";

const trackerLink = "https://trk.example.com/click?cid=42&sub={sub_id}";
</script>

<div style="width: 100%;">
	<CopyField
		label="Tracker link"
		value={trackerLink}
		description="Use this link for conversion notification."
		copyLabel="Copy"
		copiedLabel="Copied"
	/>
</div>

Размеры

Канонические s / m; кнопка берёт размер поля.

Postback URL https://trk.example.com/postback?cid=42

<!--
  🟢

  Пример размеров Copy Field ставит рядом s и m: поле делит метрики с Input
  того же размера, а кнопка копирования берёт одноимённый размер Button.
-->

<script>
import CopyField from "$lib/ui/CopyField.svelte";
</script>

<div style="display: grid; gap: var(--sp-3); width: 100%;">
	<CopyField
		size="s"
		label="Postback URL"
		value="https://trk.example.com/postback?cid=42"
		copyLabel="Copy"
		copiedLabel="Copied"
	/>
	<CopyField
		size="m"
		label="Postback URL"
		value="https://trk.example.com/postback?cid=42"
		copyLabel="Copy"
		copiedLabel="Copied"
	/>
</div>

Длинное значение

Длинный postback-URL обрезается многоточием, полный текст — в title и в буфере.

Postback URL https://trk.example.com/postback?cid=42&click_id={click_id}&payout={payout}&currency={currency}&status={status}&sub1={sub1}&sub2={sub2}

Полный адрес — в подсказке при наведении и в буфере после копирования.

<!--
  🟢

  Пример длинного значения показывает postback-URL с макросами, который не
  помещается в строку: текст обрезается многоточием, полный остаётся в title
  и уходит в буфер целиком.
-->

<script>
import { t } from "$lib/spec/demo-lang.svelte.js";
import CopyField from "$lib/ui/CopyField.svelte";

const postback =
	"https://trk.example.com/postback?cid=42&click_id={click_id}&payout={payout}&currency={currency}&status={status}&sub1={sub1}&sub2={sub2}";
</script>

<div style="width: 100%;">
	<CopyField
		label="Postback URL"
		value={postback}
		description={t("Полный адрес — в подсказке при наведении и в буфере после копирования.")}
		copyLabel="Copy"
		copiedLabel="Copied"
	/>
</div>

Длинный сниппет

scroll: блок не выше --copy-field-max-h, значение прокручивается — как snippet.overflow легаси.

Пиксель отслеживания <img src="https://trk.example/p/1000.gif" width="1" height="1" alt="" /> <img src="https://trk.example/p/1001.gif" width="1" height="1" alt="" /> <img src="https://trk.example/p/1002.gif" width="1" height="1" alt="" /> <img src="https://trk.example/p/1003.gif" width="1" height="1" alt="" /> <img src="https://trk.example/p/1004.gif" width="1" height="1" alt="" /> <img src="https://trk.example/p/1005.gif" width="1" height="1" alt="" /> <img src="https://trk.example/p/1006.gif" width="1" height="1" alt="" /> <img src="https://trk.example/p/1007.gif" width="1" height="1" alt="" /> <img src="https://trk.example/p/1008.gif" width="1" height="1" alt="" /> <img src="https://trk.example/p/1009.gif" width="1" height="1" alt="" /> <img src="https://trk.example/p/1010.gif" width="1" height="1" alt="" /> <img src="https://trk.example/p/1011.gif" width="1" height="1" alt="" /> <img src="https://trk.example/p/1012.gif" width="1" height="1" alt="" /> <img src="https://trk.example/p/1013.gif" width="1" height="1" alt="" /> <img src="https://trk.example/p/1014.gif" width="1" height="1" alt="" /> <img src="https://trk.example/p/1015.gif" width="1" height="1" alt="" /> <img src="https://trk.example/p/1016.gif" width="1" height="1" alt="" /> <img src="https://trk.example/p/1017.gif" width="1" height="1" alt="" /> <img src="https://trk.example/p/1018.gif" width="1" height="1" alt="" /> <img src="https://trk.example/p/1019.gif" width="1" height="1" alt="" /> <img src="https://trk.example/p/1020.gif" width="1" height="1" alt="" /> <img src="https://trk.example/p/1021.gif" width="1" height="1" alt="" /> <img src="https://trk.example/p/1022.gif" width="1" height="1" alt="" /> <img src="https://trk.example/p/1023.gif" width="1" height="1" alt="" />

<!--
  🟢

  Длинный сниппет кода с ограничением высоты (эталон: Vue-легаси
  blocks/snippet с overflow): значение переносится и прокручивается.
-->

<script>
import { t } from "$lib/spec/demo-lang.svelte.js";
import CopyField from "$lib/ui/CopyField.svelte";

const pixel = Array.from({ length: 24 }, (_, i) => `<img src="https://trk.example/p/${1000 + i}.gif" width="1" height="1" alt="" />`).join("\n");
</script>

<div style="width: 480px; height: 240px;">
	<CopyField label={t("Пиксель отслеживания")} value={pixel} scroll copyLabel="Copy" />
</div>