@toaster-builder/site-runtime 0.1.1 → 0.1.2

package/README.md

@@ -70,3 +70,23 @@ const placementId = inject(blockPlacementIdKey, ref(''))
 ```
 
 Для модального Block атрибут ставится на само окно, а не на backdrop.
+
+## Действия блока в Builder
+
+По умолчанию Builder показывает полный набор действий. Block может ограничить
+его атрибутом `data-toaster-editor-actions` на том же элементе, который отмечен
+как `data-toaster-editor-root`:
+
+```vue
+<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`. Если атрибут отсутствует, доступны все
+действия. Пустой атрибут скрывает все элементы управления.

package/dist/module.json

@@ -4,7 +4,7 @@
   "compatibility": {
     "nuxt": ">=4.0.0"
   },
-  "version": "0.1.1",
+  "version": "0.1.2",
   "builder": {
     "@nuxt/module-builder": "1.0.3",
     "unbuild": "3.6.1"

package/dist/runtime/components/BlockEditorFrame.vue

@@ -19,6 +19,10 @@ import moveBlockUpIcon from "../assets/editor/move-block-up.svg";
 import showBlockIcon from "../assets/editor/show-block.svg";
 import BlockPlacementProvider from "#toaster-site-runtime/components/BlockPlacementProvider.vue";
 import { useBuilderEventService } from "#toaster-site-runtime/composables/useBuilderEventService";
+import {
+  blockEditorActions,
+  parseBlockEditorActions
+} from "#toaster-site-runtime/utils/block-editor-actions";
 const props = defineProps({
   blockComponent: { type: null, required: true },
   blockId: { type: String, required: true },
@@ -38,6 +42,9 @@ const overlayHovered = ref(false);
 const overlayFocused = ref(false);
 const overlayStyle = ref({});
 const overlayVisible = ref(false);
+const enabledEditorActions = shallowRef(
+  new Set(blockEditorActions)
+);
 const targetHovered = ref(false);
 const targetFocused = ref(false);
 const overlayActive = computed(() => overlayHovered.value || overlayFocused.value || targetHovered.value || targetFocused.value);
@@ -104,6 +111,9 @@ function unbindEditorTarget() {
   targetFocused.value = false;
 }
 function bindEditorTarget(target) {
+  enabledEditorActions.value = parseBlockEditorActions(
+    target?.dataset.toasterEditorActions
+  );
   if (editorTarget.value === target) {
     scheduleOverlayBoundsUpdate();
     return;
@@ -122,6 +132,9 @@ function bindEditorTarget(target) {
   resizeObserver.observe(target);
   scheduleOverlayBoundsUpdate();
 }
+function hasEditorAction(action) {
+  return enabledEditorActions.value.has(action);
+}
 function findPlacementTargets(root) {
   return Array.from(root.querySelectorAll("[data-toaster-editor-root]")).filter((element) => element.dataset.toasterPlacementId === props.placementId);
 }
@@ -144,7 +157,16 @@ onMounted(() => {
   document.addEventListener("scroll", scheduleOverlayBoundsUpdate, true);
   window.addEventListener("resize", scheduleOverlayBoundsUpdate);
   mutationObserver = new MutationObserver(resolveEditorTarget);
-  mutationObserver.observe(document.body, { childList: true, subtree: true });
+  mutationObserver.observe(document.body, {
+    attributes: true,
+    attributeFilter: [
+      "data-toaster-editor-actions",
+      "data-toaster-editor-root",
+      "data-toaster-placement-id"
+    ],
+    childList: true,
+    subtree: true
+  });
   void nextTick(resolveEditorTarget);
 });
 onBeforeUnmount(() => {
@@ -192,6 +214,7 @@ onBeforeUnmount(() => {
       class="block-editor-frame__overlay"
       :class="{ 'block-editor-frame__overlay--active': overlayActive }"
       data-toaster-editor-overlay
+      :data-toaster-editor-actions="[...enabledEditorActions].join(' ')"
       :data-toaster-placement-id="placementId"
       :style="overlayStyle"
       @pointerenter="overlayHovered = true"
@@ -201,6 +224,7 @@ onBeforeUnmount(() => {
     >
       <div class="block-editor-frame__toolbar">
         <button
+          v-if="hasEditorAction('version')"
           class="block-editor-frame__control block-editor-frame__version"
           type="button"
           :aria-label="`\u0421\u043C\u0435\u043D\u0438\u0442\u044C \u0432\u0435\u0440\u0441\u0438\u044E \u0431\u043B\u043E\u043A\u0430 ${blockVersionLabel}`"
@@ -211,6 +235,7 @@ onBeforeUnmount(() => {
         </button>
 
         <button
+          v-if="hasEditorAction('move')"
           class="block-editor-frame__control block-editor-frame__icon-button"
           type="button"
           :aria-label="`\u041F\u0435\u0440\u0435\u043D\u0435\u0441\u0442\u0438 \u0432\u0432\u0435\u0440\u0445 \u0431\u043B\u043E\u043A ${blockVersionLabel}`"
@@ -226,6 +251,7 @@ onBeforeUnmount(() => {
         </button>
 
         <button
+          v-if="hasEditorAction('move')"
           class="block-editor-frame__control block-editor-frame__icon-button"
           type="button"
           :aria-label="`\u041F\u0435\u0440\u0435\u043D\u0435\u0441\u0442\u0438 \u0432\u043D\u0438\u0437 \u0431\u043B\u043E\u043A ${blockVersionLabel}`"
@@ -241,6 +267,7 @@ onBeforeUnmount(() => {
         </button>
 
         <button
+          v-if="hasEditorAction('copy')"
           class="block-editor-frame__control block-editor-frame__icon-button"
           type="button"
           :aria-label="`\u041A\u043E\u043F\u0438\u0440\u043E\u0432\u0430\u0442\u044C \u0431\u043B\u043E\u043A ${blockVersionLabel}`"
@@ -255,6 +282,7 @@ onBeforeUnmount(() => {
         </button>
 
         <button
+          v-if="hasEditorAction('settings')"
           class="block-editor-frame__control block-editor-frame__icon-button"
           type="button"
           :aria-label="`\u041D\u0430\u0441\u0442\u0440\u043E\u0439\u043A\u0438 \u0431\u043B\u043E\u043A\u0430 ${blockVersionLabel}`"
@@ -279,6 +307,7 @@ onBeforeUnmount(() => {
         </button>
 
         <button
+          v-if="hasEditorAction('assistant')"
           class="block-editor-frame__control block-editor-frame__icon-button"
           type="button"
           :aria-label="`\u041E\u0442\u043A\u0440\u044B\u0442\u044C AI-\u0430\u0441\u0441\u0438\u0441\u0442\u0435\u043D\u0442\u0430 \u0434\u043B\u044F \u0431\u043B\u043E\u043A\u0430 ${blockVersionLabel}`"
@@ -293,6 +322,7 @@ onBeforeUnmount(() => {
         </button>
 
         <button
+          v-if="hasEditorAction('visibility')"
           class="block-editor-frame__control block-editor-frame__icon-button"
           type="button"
           :aria-label="enabled ? `\u0412\u0440\u0435\u043C\u0435\u043D\u043D\u043E \u0441\u043A\u0440\u044B\u0442\u044C \u0431\u043B\u043E\u043A ${blockVersionLabel}` : `\u041F\u043E\u043A\u0430\u0437\u0430\u0442\u044C \u0431\u043B\u043E\u043A ${blockVersionLabel}`"
@@ -307,6 +337,7 @@ onBeforeUnmount(() => {
         </button>
 
         <button
+          v-if="hasEditorAction('delete')"
           class="block-editor-frame__control block-editor-frame__icon-button"
           type="button"
           :aria-label="`\u0423\u0434\u0430\u043B\u0438\u0442\u044C \u0431\u043B\u043E\u043A ${blockVersionLabel}`"
@@ -322,6 +353,7 @@ onBeforeUnmount(() => {
       </div>
 
       <button
+        v-if="hasEditorAction('add')"
         class="block-editor-frame__control block-editor-frame__add block-editor-frame__add--after"
         type="button"
         aria-label="Добавить блок снизу"
@@ -336,6 +368,7 @@ onBeforeUnmount(() => {
       </button>
 
       <button
+        v-if="hasEditorAction('add-ai')"
         class="block-editor-frame__control block-editor-frame__add-ai"
         type="button"
         :aria-label="`\u0421\u043E\u0437\u0434\u0430\u0442\u044C \u0431\u043B\u043E\u043A \u0447\u0435\u0440\u0435\u0437 AI \u043F\u043E\u0441\u043B\u0435 \u0431\u043B\u043E\u043A\u0430 ${blockVersionLabel}`"

package/dist/runtime/utils/block-editor-actions.d.ts

@@ -0,0 +1,3 @@
+export declare const blockEditorActions: readonly ["version", "move", "copy", "settings", "assistant", "visibility", "delete", "add", "add-ai"];
+export type BlockEditorAction = (typeof blockEditorActions)[number];
+export declare function parseBlockEditorActions(value: string | undefined): ReadonlySet<BlockEditorAction>;

package/dist/runtime/utils/block-editor-actions.js

@@ -0,0 +1,18 @@
+export const blockEditorActions = [
+  "version",
+  "move",
+  "copy",
+  "settings",
+  "assistant",
+  "visibility",
+  "delete",
+  "add",
+  "add-ai"
+];
+const knownActions = new Set(blockEditorActions);
+export function parseBlockEditorActions(value) {
+  if (value === void 0) return new Set(blockEditorActions);
+  return new Set(
+    value.split(/\s+/).filter((action) => knownActions.has(action))
+  );
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@toaster-builder/site-runtime",
-  "version": "0.1.1",
+  "version": "0.1.2",
   "description": "Shared Nuxt runtime for Toaster sites and Builder integration",
   "license": "MIT",
   "type": "module",