Установка и инициализация

Установка

Для установки библиотеки Svelte Editor выполните следующую команду:

//npm
npm install @svar-ui/svelte-editor

//yarn
yarn add @svar-ui/svelte-editor

note

Пакет был перенесён с wx-svelte-editor на @svar-ui/svelte-editor. Мы продолжаем публиковать wx-svelte-editor до выхода обновления Svelte SVAR 3.0

Инициализация

Виджет Editor предоставляет гибкие варианты инициализации, позволяя разработчикам задавать поля ввода, предзаполнять значения и переключать виджет между редактируемым и режимом только для чтения. Поддерживается широкий набор конфигураций для различных сценариев использования.

Инициализация виджета Editor

Editor включает встроенные элементы управления: "text", "textarea", "checkbox", "section" и "readonly".

Чтобы использовать другие элементы управления, необходимо импортировать их из библиотеки @svar-ui/svelte-core и зарегистрировать их как элементы Editor с помощью соответствующего хелпера registerEditorItem:

<script>
   import { Editor } from "@svar-ui/svelte-editor";

   const items = [
      { comp: "text", key: "name", label: "Name" },
      {
        comp: "textarea",
        key: "descr",
        label: "Description"
      },
      { comp: "checkbox", key: "admin", label: "Is Admin" }
   ];

   const values = {
      name: "John Doe",
      descr: "Lorem ipsum dolor sit amet",
      admin: true,
      role: "admin"
   };
</script>

<Editor {items} {values} />

Этот пример демонстрирует инициализацию виджета Editor со списком полей ввода и соответствующими значениями. Массив items определяет структуру формы, где каждый объект задаёт тип поля (comp), уникальный ключ (key) и понятную пользователю метку (label). Объект values предоставляет начальные значения для этих полей, сопоставляемые по ключам. Такая конфигурация удобна для создания базовой формы с предзагруженными данными — например, при редактировании существующей записи.

Инициализация виджета Editor в режиме только для чтения

<script>
   import { Editor } from "@svar-ui/svelte-editor";

   const items = [
      { comp: "text", key: "name", label: "Name" },
      {
        comp: "textarea",
        key: "descr",
        label: "Description",
      },
      { comp: "checkbox", key: "admin", label: "Is Admin" }
   ];
   const values = {
      name: "John Doe",
      descr: "Lorem ipsum dolor sit amet",
      admin: true,
      role: "admin"
   };
</script>

<Editor {items} {values} readonly={true} />

Этот пример показывает инициализацию виджета Editor в режиме только для чтения. Свойство readonly установлено в true, что запрещает пользователям изменять поля ввода. Массив items и объект values определяются так же, как и в режиме редактирования. Такая конфигурация подходит для сценариев, где данные формы нужно отобразить без возможности редактирования — например, в интерфейсе просмотра или аудита.

Полный код инициализации

Чтобы увидеть виджет в действии, добавьте несколько элементов.

<script>
  import { Editor, Willow } from "@svar-ui/svelte-editor";

  const items = [
   { comp: "text", key: "name", label: "Name" },
   { comp: "text", key: "descr", label: "Description" },
   { comp: "text", key: "role", label: "Role" }
  ];

  const values = {
   name: "John Doe",
   descr: "Lorem ipsum dolor sit amet",
   role: "admin"
  };
</script>

<Willow>
  <Editor {items} {values} />
</Willow>

примечание

Для корректной инициализации рекомендуется применять тему на верхнем уровне приложения. Если вы используете компонент Editor отдельно, не забудьте обернуть его в тему (в примере выше применяется Willow).

Визуальные темы

Виджет поставляется в двух визуальных стилях — светлом и тёмном, управляемых тегом темы.

<script>
import { Willow, WillowDark } from "@svar-ui/svelte-core";
</script>

<!-- Light -->
<Willow>
  <Editor />
</Willow>

<!-- Dark -->
<WillowDark>
  <Editor />
</WillowDark>