@toaster-builder/site-runtime

Общий Nuxt runtime для пользовательских сайтов Toaster и их интеграции с Builder.

Пакет пока находится в версии 0.x: совместимость публичного API фиксируется SemVer, а версия протокола обмена с Builder хранится отдельно.

Разработка в Docker

Для работы нужен только Docker с Compose plugin.

make install
make dev

Playground откроется на http://localhost:3002.

Основные проверки:

make check
make build
make pack

make pack создаёт локальный tarball, которым можно проверить установку пакета в шаблон до публикации в npm.

Подключение к Nuxt

npm install @toaster-builder/site-runtime

export default defineNuxtConfig({
  modules: ['@toaster-builder/site-runtime'],
})

Граница блока в Builder

В dev-режиме Runtime автоматически добавляет корневому DOM-элементу обычного Block атрибуты data-toaster-editor-root="auto" и data-toaster-placement-id. Рамка Builder строится по фактическому getBoundingClientRect() этого элемента, поэтому работает для элементов с position: fixed, sticky и absolute.

Block с несколькими корнями или Teleport должен явно отметить визуальный элемент, который Builder будет считать его границей. Явная граница имеет приоритет над автоматически найденным корнем:

<script setup lang="ts">
import { inject, ref } from 'vue'
import { blockPlacementIdKey } from '#toaster-site-runtime/utils/block-placement'

const placementId = inject(blockPlacementIdKey, ref(''))
</script>

<template>
  <Teleport to="body">
    <div
      data-toaster-editor-root
      :data-toaster-placement-id="placementId"
    >
      <!-- Содержимое модального окна -->
    </div>
  </Teleport>
</template>

Для модального Block атрибут ставится на само окно, а не на backdrop.

Действия блока в Builder

По умолчанию Builder показывает полный набор действий. Block может ограничить его атрибутом data-toaster-editor-actions на том же элементе, который отмечен как data-toaster-editor-root:

<div
  data-toaster-editor-root
  data-toaster-editor-actions="version settings assistant add add-ai"
  :data-toaster-placement-id="placementId"
>
  <!-- Содержимое блока -->
</div>

Доступные значения: version, move, copy, settings, assistant, visibility, delete, add, add-ai. Если атрибут отсутствует, доступны все действия. Пустой атрибут скрывает все элементы управления.