@blokkli/editor 2.0.0-alpha.16 → 2.0.0-alpha.17

package/dist/runtime/components/Edit/Features/Selection/AddButtons/index.vue

@@ -1,58 +1,12 @@
 <template>
-  <Teleport to="#bk-indicators">
-    <div
-      v-if="shouldRender"
-      v-show="showOverlay"
-      class="bk-selection-add"
-      :class="orientationClass"
-      :style="containerStyle"
-    >
-      <button
-        ref="before"
-        :key="'before' + orientationClass"
-        class="bk-selection-add-button bk-before"
-        :style="beforeAfterStyle"
-        :data-title="beforeTooltip"
-        tabindex="-1"
-        @click="onClickBefore"
-      >
-        <div>
-          <Icon name="plus" />
-        </div>
-      </button>
-
-      <button
-        ref="after"
-        :key="'after' + orientationClass"
-        class="bk-selection-add-button bk-after"
-        :style="beforeAfterStyle"
-        :data-title="afterTooltip"
-        tabindex="-1"
-        @click="onClickAfter"
-      >
-        <div>
-          <Icon name="plus" />
-        </div>
-      </button>
-    </div>
-    <AddButtonsField
-      v-for="(slot, index) in fieldButtonSlots"
-      v-show="showOverlay"
-      :key="index"
-      :field-key="slot.fieldKey"
-      :container-rect="containerRect"
-      :title="fieldTooltips[index] || ''"
-      @click="(el) => onClickEmptyField(index, el)"
-    />
-  </Teleport>
-
-  <Teleport to="body">
+  <Teleport to="#bk-canvas-overlay">
     <BlokkliTransition name="caret-tooltip">
       <Overlay
         v-if="addData"
         :key="addData.key"
         :bundles="addData.allowedBundles"
         :anchor-el="addData.anchorEl"
+        :anchor-coordinates="addData.anchorCoordinates"
         :label="addData.label"
         @select="onSelectBundle"
         @close="closeOverlay"
@@ -60,12 +14,14 @@
       />
     </BlokkliTransition>
   </Teleport>
+
+  <Renderer @toggle="onRendererToggle" @toggle-field="onRendererToggleField" />
 </template>
 
 <script setup>
 import onBlokkliEvent from "#blokkli/helpers/composables/onBlokkliEvent";
-import { computed, useBlokkli, ref, watch, useTemplateRef } from "#imports";
-import { Icon, BlokkliTransition } from "#blokkli/components";
+import { computed, useBlokkli, ref, watch } from "#imports";
+import { BlokkliTransition } from "#blokkli/components";
 import {
   getChildrenOrientation,
   getGapSize,
@@ -73,19 +29,14 @@ import {
   determineCanAddChildren
 } from "#blokkli/helpers/dropTargets";
 import Overlay from "./Overlay/index.vue";
-import AddButtonsField from "./AddButtonsField.vue";
 import { renderCycle } from "#blokkli/helpers/renderCycle";
 import { getFieldKey } from "#blokkli/helpers";
 import { isInternalBundle } from "#blokkli/helpers/bundles";
+import Renderer from "./Renderer/index.vue";
 const props = defineProps({
   blocks: { type: Array, required: true }
 });
-const { dom, state, eventBus, types, ui, selection, $t } = useBlokkli();
-const showOverlay = computed(
-  () => !ui.isTransforming.value && !ui.isAnalyzing.value && !selection.isMultiSelecting.value && !selection.isDragging.value && !ui.hasTransformOverlayOpen.value && !selection.isChangingOptions.value
-);
-const afterEl = useTemplateRef("after");
-const beforeEL = useTemplateRef("before");
+const { dom, state, eventBus, types, $t } = useBlokkli();
 const shouldRender = computed(() => {
   return props.blocks.length === 1;
 });
@@ -241,13 +192,8 @@ function onSelectAction(id) {
   closeOverlay();
 }
 const cache = /* @__PURE__ */ new Map();
-const canShowBeforeAfter = ref(false);
-const beforeAfterStyle = computed(() => ({
-  visibility: canShowBeforeAfter.value ? "visible" : "hidden"
-}));
 function clearAllCache() {
   cache.clear();
-  canShowBeforeAfter.value = false;
   containerStyle.value = { visibility: "hidden" };
   orientationClass.value = "";
 }
@@ -284,7 +230,6 @@ function updateCache(uuid2) {
     };
     cache.set(uuid2, cachedState);
   }
-  canShowBeforeAfter.value = cachedState.canShowBeforeAfter;
   orientationClass.value = cachedState.orientation === "vertical" ? "bk-is-vertical" : "bk-is-horizontal";
 }
 watch(
@@ -292,7 +237,6 @@ watch(
   async (newUuid) => {
     closeOverlay();
     if (!shouldRender.value) {
-      canShowBeforeAfter.value = false;
       containerStyle.value = { visibility: "hidden" };
       return;
     }
@@ -303,7 +247,7 @@ watch(
   },
   { immediate: true }
 );
-onBlokkliEvent("canvas:draw", () => {
+onBlokkliEvent("animationFrame:after", () => {
   if (!shouldRender.value || !uuid.value) {
     containerStyle.value = { visibility: "hidden" };
     containerRect.value = null;
@@ -337,8 +281,10 @@ onBlokkliEvent("state:reloaded", () => {
     updateCache(uuid.value);
   }
 });
-function setAddData(key, field, anchorEl, label, preceedingUuid) {
-  const allowedBundles = field.allowedBundles;
+function setAddData(key, field, label, preceedingUuid, anchorEl, anchorCoordinates) {
+  const allowedBundles = field.allowedBundles.filter(
+    (bundle) => !isInternalBundle(bundle)
+  );
   if (allowedBundles.length === 0) {
     return;
   }
@@ -362,6 +308,7 @@ function setAddData(key, field, anchorEl, label, preceedingUuid) {
     preceedingUuid,
     host,
     anchorEl,
+    anchorCoordinates,
     label,
     field
   };
@@ -382,34 +329,9 @@ function getPreceedingUuidBefore(uuid2, field) {
   }
   return void 0;
 }
-function onClickBefore() {
-  if (addData.value?.key === "before") {
-    return closeOverlay();
-  }
-  if (!uuid.value) {
-    return;
-  }
-  const cachedState = cache.get(uuid.value);
-  if (!cachedState) {
-    return;
-  }
-  const block2 = dom.findBlock(uuid.value);
-  if (!block2) {
-    return;
-  }
-  const field = dom.findField(block2.hostUuid, block2.hostFieldName);
-  if (!field) {
-    return;
-  }
-  const preceedingUuid = getPreceedingUuidBefore(uuid.value, field);
-  if (!beforeEL.value) {
-    return;
-  }
-  const label = beforeTooltip.value.replace("...", "");
-  setAddData("before", field, beforeEL.value, label, preceedingUuid);
-}
-function onClickAfter() {
-  if (addData.value?.key === "after") {
+function onRendererToggle(data) {
+  const key = data.position;
+  if (addData.value?.key === key) {
     return closeOverlay();
   }
   if (!uuid.value) {
@@ -427,24 +349,29 @@ function onClickAfter() {
   if (!field) {
     return;
   }
-  if (!afterEl.value) {
-    return;
-  }
   if (!field.allowedBundles.length) {
     return;
   }
-  const label = afterTooltip.value.replace("...", "");
-  setAddData("after", field, afterEl.value, label, uuid.value);
+  let preceedingUuid;
+  let label;
+  if (data.position === "before") {
+    preceedingUuid = getPreceedingUuidBefore(uuid.value, field);
+    label = beforeTooltip.value.replace("...", "");
+  } else {
+    preceedingUuid = uuid.value;
+    label = afterTooltip.value.replace("...", "");
+  }
+  setAddData(key, field, label, preceedingUuid, void 0, data.coordinates);
 }
-function onClickEmptyField(index, element) {
-  const key = "field:" + index;
+function onRendererToggleField(data) {
+  const key = "field:" + data.index;
   if (addData.value?.key === key) {
     return closeOverlay();
   }
   if (!uuid.value) {
     return;
   }
-  const emptyField = emptyBlockFields.value[index];
+  const emptyField = emptyBlockFields.value[data.index];
   if (!emptyField) {
     return;
   }
@@ -452,8 +379,8 @@ function onClickEmptyField(index, element) {
   if (!field) {
     return;
   }
-  const label = (fieldTooltips.value[index] || "").replace("...", "");
-  setAddData(key, field, element, label);
+  const label = (fieldTooltips.value[data.index] || "").replace("...", "");
+  setAddData(key, field, label, void 0, void 0, data.coordinates);
 }
-onBlokkliEvent("mouse:up", closeOverlay);
+onBlokkliEvent("dragging:start", closeOverlay);
 </script>

package/dist/runtime/components/Edit/Features/Selection/Overlay/index.vue

@@ -4,7 +4,8 @@
 
 <script setup>
 import onBlokkliEvent from "#blokkli/helpers/composables/onBlokkliEvent";
-import { useBlokkli, onBeforeUnmount, computed } from "#imports";
+import defineRenderer from "#blokkli/helpers/composables/defineRenderer";
+import { useBlokkli, computed } from "#imports";
 import {
   setBuffersAndAttributes,
   drawBufferInfo,
@@ -17,9 +18,10 @@ import { useTransitionedValue } from "#blokkli/helpers/useTransitionedValue";
 import { toShaderColor } from "#blokkli/helpers";
 const props = defineProps({
   blocks: { type: Array, required: true },
-  gl: { type: null, required: true }
+  gl: { type: null, required: true },
+  hasHostSelected: { type: Boolean, required: true }
 });
-const { animation, theme, dom, ui } = useBlokkli();
+const { animation, theme, dom, ui, state } = useBlokkli();
 const programInfo = animation.registerProgram("selection", props.gl, [vs, fs]);
 class SelectionRectangleBufferCollector extends RectangleBufferCollector {
   uuids = [];
@@ -33,11 +35,28 @@ class SelectionRectangleBufferCollector extends RectangleBufferCollector {
         return uuid + "no_rect";
       }
       return uuid + rect.time;
-    }).join("_");
+    }).join("_") + "_host_" + props.hasHostSelected;
     const hasChanged = force || this.prevKey !== key;
     if (hasChanged) {
       this.reset();
       this.lastCount = 0;
+      if (props.hasHostSelected) {
+        this.addRectangle(
+          {
+            id: "host",
+            height: ui.artboardSize.value.height,
+            width: ui.artboardSize.value.width,
+            x: 0,
+            y: 0,
+            radius: [0, 0, 0, 0],
+            isInverted: false,
+            isFromLibrary: false
+          },
+          3
+          // Type 3 = host selection
+        );
+        this.lastCount++;
+      }
       for (let i = 0; i < props.blocks.length; i++) {
         const block = props.blocks[i];
         if (this.added.has(block.uuid)) {
@@ -49,7 +68,14 @@ class SelectionRectangleBufferCollector extends RectangleBufferCollector {
         if (!rect || !el) {
           continue;
         }
-        const style = theme.getDraggableStyle(el);
+        const style = ui.lowPerformanceMode.value ? null : theme.getDraggableStyle(el);
+        const isFromLibrary = state.fromLibraryUuids.value.includes(block.uuid);
+        let type = 0;
+        if (isFromLibrary) {
+          type = 2;
+        } else if (style?.isInverted) {
+          type = 1;
+        }
         this.addRectangle(
           {
             id: block.uuid,
@@ -57,10 +83,11 @@ class SelectionRectangleBufferCollector extends RectangleBufferCollector {
             width: rect.width,
             x: rect.x,
             y: rect.y,
-            radius: style.radius,
-            isInverted: style.isInverted
+            radius: style?.radius ?? [0, 0, 0, 0],
+            isInverted: !!style?.isInverted,
+            isFromLibrary
           },
-          style.isInverted ? 1 : 0
+          type
         );
         this.lastCount++;
       }
@@ -76,40 +103,75 @@ const collector = new SelectionRectangleBufferCollector(props.gl);
 const hasTransformingStyle = computed(
   () => ui.hasTransformOverlayOpen.value || ui.isTransforming.value
 );
+const selectionColorOverride = computed(() => {
+  const color = ui.selectionColor.value;
+  if (!color) {
+    return null;
+  }
+  if (color === "mono") {
+    return toShaderColor(theme.getColor(color, "500"));
+  } else if (color === "accent") {
+    return toShaderColor(theme.getColor(color, "700"));
+  }
+  return toShaderColor(theme.getColor(color, "normal"));
+});
 const getColorDefault = useTransitionedValue(() => {
+  if (selectionColorOverride.value) {
+    return selectionColorOverride.value;
+  }
   if (hasTransformingStyle.value) {
     return toShaderColor(theme.orange.value.normal);
   }
   return toShaderColor(theme.accent.value[600]);
 });
 const getColorInverted = useTransitionedValue(() => {
+  if (selectionColorOverride.value) {
+    return selectionColorOverride.value;
+  }
   if (hasTransformingStyle.value) {
     return toShaderColor(theme.orange.value.normal);
   }
   return toShaderColor([255, 255, 255]);
 });
+const getColorLibrary = useTransitionedValue(() => {
+  if (selectionColorOverride.value) {
+    return selectionColorOverride.value;
+  }
+  if (hasTransformingStyle.value) {
+    return toShaderColor(theme.orange.value.normal);
+  }
+  return toShaderColor(theme.lime.value.normal);
+});
+const getColorHost = useTransitionedValue(() => {
+  return toShaderColor(theme.mono.value[700]);
+});
 const getTransforming = useTransitionedValue(() => {
   return ui.isTransforming.value ? 1 : 0;
 });
-onBlokkliEvent("canvas:draw", (e) => {
-  props.gl.useProgram(programInfo.program);
-  const { info, hasChanged } = collector.getBufferInfo();
-  if (!info) {
-    return;
+defineRenderer("selection-overlay", {
+  zIndex: 100,
+  render: (ctx) => {
+    props.gl.useProgram(programInfo.program);
+    const { info } = collector.getBufferInfo();
+    if (!info) {
+      return;
+    }
+    setUniforms(programInfo, {
+      u_color_default: getColorDefault(),
+      u_color_inverted: getColorInverted(),
+      u_color_library: getColorLibrary(),
+      u_color_host: getColorHost(),
+      u_artboard_size: [
+        ui.artboardSize.value.width,
+        ui.artboardSize.value.height
+      ],
+      u_is_transforming: getTransforming(),
+      u_time: ctx.time
+    });
+    animation.setSharedUniforms(props.gl, programInfo);
+    setBuffersAndAttributes(props.gl, programInfo, info);
+    drawBufferInfo(props.gl, info, props.gl.TRIANGLES);
   }
-  setUniforms(programInfo, {
-    u_color_default: getColorDefault(),
-    u_color_inverted: getColorInverted(),
-    u_artboard_size: [
-      ui.artboardSize.value.width,
-      ui.artboardSize.value.height
-    ],
-    u_is_transforming: getTransforming(),
-    u_time: e.time
-  });
-  animation.setSharedUniforms(props.gl, programInfo);
-  setBuffersAndAttributes(props.gl, programInfo, info);
-  drawBufferInfo(props.gl, info, props.gl.TRIANGLES);
 });
 onBlokkliEvent("ui:resized", function() {
   collector.reset();
@@ -117,9 +179,6 @@ onBlokkliEvent("ui:resized", function() {
 onBlokkliEvent("state:reloaded", function() {
   collector.reset();
 });
-onBeforeUnmount(() => {
-  props.gl.clear(props.gl.COLOR_BUFFER_BIT);
-});
 </script>
 
 <script>

package/dist/runtime/components/Edit/Features/Selection/Overlay/index.vue.d.ts

@@ -2,8 +2,10 @@ import type { DraggableExistingBlock } from '#blokkli/types';
 declare const _default: import("vue").DefineComponent<{
     blocks: DraggableExistingBlock[];
     gl: WebGLRenderingContext;
+    hasHostSelected: boolean;
 }, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{
     blocks: DraggableExistingBlock[];
     gl: WebGLRenderingContext;
+    hasHostSelected: boolean;
 }> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 export default _default;

package/dist/runtime/components/Edit/Features/Selection/Overlay/vertex.glsl

@@ -18,6 +18,8 @@ uniform float u_offset_y;
 uniform vec2 u_resolution;
 uniform vec3 u_color_default;
 uniform vec3 u_color_inverted;
+uniform vec3 u_color_library;
+uniform vec3 u_color_host;
 
 // The transformed quad for the fragment shader.
 varying vec4 v_quad;
@@ -79,8 +81,15 @@ void main() {
 
   v_rect_width = adjusted_quad.x;
 
-  // Set color and other varying variables
-  v_color = a_rect_type > 0.5 ? u_color_inverted : u_color_default;
+  // Set color based on type: 0=default, 1=inverted, 2=library, 3=host
+  v_color = u_color_default;
+  if (a_rect_type > 2.5) {
+    v_color = u_color_host;
+  } else if (a_rect_type > 1.5) {
+    v_color = u_color_library;
+  } else if (a_rect_type > 0.5) {
+    v_color = u_color_inverted;
+  }
   v_rect_radius = a_rect_radius * u_dpi;
   v_thickness = thickness;
   v_rect_id = a_rect_id;

package/dist/runtime/components/Edit/Features/Selection/index.vue

@@ -4,17 +4,9 @@
     :blocks="selection.blocks.value"
     :uuids="selection.uuids.value"
     :gl="gl"
+    :has-host-selected="selection.hasHostSelected.value"
   />
   <OverlayFallback v-if="isVisible && !gl" :uuids="selection.uuids.value" />
-  <Teleport :to="artboardElement">
-    <div
-      class="bk bk-host-selection-overlay"
-      :style="{
-  visibility: selection.hasHostSelected.value ? 'visible' : 'hidden'
-}"
-    />
-  </Teleport>
-
   <PluginItemDropdown
     v-if="itemDropdownItems.length"
     id="selection"
@@ -105,7 +97,6 @@ function onSelectDropdownItem(item) {
     selectAllBlocks();
   }
 }
-const artboardElement = ui.artboardElement();
 const gl = animation.gl();
 const hasSelectedOnce = ref(false);
 const stop = watch(
@@ -254,8 +245,10 @@ onBlokkliEvent("keyPressed", (e) => {
     return;
   }
   if (e.code === "Escape") {
-    eventBus.emit("select:end", []);
-    eventBus.emit("select:host:unselect");
+    if (!ui.openTooltip.value) {
+      eventBus.emit("select:end", []);
+      eventBus.emit("select:host:unselect");
+    }
   } else if (e.code === "Tab") {
     if (tour.isTouring.value || ui.hasDialogOpen.value) {
       return;

package/dist/runtime/components/Edit/Features/Translations/Banner/index.vue

@@ -1,21 +1,21 @@
 <template>
-  <div class="bk bk-translations-banner">
-    <Icon name="translate" />
-    <p v-html="text" />
-    <button class="bk-translations-banner-close" @click="onClick">
-      {{ $t("translationsBannerButton", "Edit source language instead") }}
-      <Icon name="close" />
-    </button>
-  </div>
+  <Banner
+    id="translate"
+    icon="translate"
+    :text
+    :button="$t('translationsBannerButton', 'Edit source language instead')"
+    scheme="yellow"
+    @click="onClick"
+  />
 </template>
 
 <script setup>
-import { computed, useBlokkli } from "#imports";
-import { Icon } from "#blokkli/components";
+import { computed, useBlokkli, onMounted, onBeforeUnmount } from "#imports";
+import { Banner } from "#blokkli/components";
 const props = defineProps({
   activeLanguage: { type: Object, required: true }
 });
-const { $t, adapter, state } = useBlokkli();
+const { $t, adapter, state, ui } = useBlokkli();
 const onClick = () => {
   const sourceLanguage = state.translation.value.sourceLanguage;
   if (!sourceLanguage) {
@@ -39,4 +39,10 @@ const text = computed(() => {
     "You are currently editing the <strong>@language</strong> translation. Some features like adding, moving or deleting blocks are not available."
   ).replace("@language", props.activeLanguage.name);
 });
+onMounted(() => {
+  ui.setSelectionColor("translating", "mono");
+});
+onBeforeUnmount(() => {
+  ui.removeSelectionColor("translating");
+});
 </script>

package/dist/runtime/components/Edit/Features/Translations/index.vue

@@ -48,11 +48,8 @@
     </PluginTourItem>
   </Teleport>
 
-  <Teleport to="#bk-banner-container">
-    <Banner
-      v-if="state.editMode.value === 'translating'"
-      :active-language="activeLanguage"
-    />
+  <Teleport to="#bk-banner-list">
+    <Banner v-if="isTranslating" :active-language />
   </Teleport>
 
   <PluginMenuButton
@@ -61,14 +58,14 @@
     :description="
   $t('translationsBatchTranslateMenuDescription', 'Translate all blocks')
 "
-    :disabled="editMode !== 'translating'"
+    :disabled="!isTranslating"
     :weight="60"
     icon="translate"
     @click="eventBus.emit('batchTranslate')"
   />
 
   <PluginItemAction
-    v-if="editMode === 'translating'"
+    v-if="isTranslating"
     id="translate"
     :disabled="!canTranslateBlock"
     :title="$t('translationsItemAction', 'Translate')"
@@ -102,7 +99,7 @@ const { adapter } = defineBlokkliFeature({
   description: "Adds support for block translations."
 });
 const { eventBus, state, context, $t, ui, selection, types, definitions } = useBlokkli();
-const { translation, editMode } = state;
+const isTranslating = computed(() => state.editMode.value === "translating");
 const isOpen = ref(false);
 const isDropdown = computed(() => {
   if (ui.isMobile.value) {
@@ -113,7 +110,7 @@ const isDropdown = computed(() => {
 });
 const activeLangcode = computed(() => context.value.language);
 const activeLanguage = computed(() => {
-  return translation.value.availableLanguages?.find(
+  return state.translation.value.availableLanguages?.find(
     (v) => v.id === activeLangcode.value
   ) || {
     id: activeLangcode.value,
@@ -121,14 +118,14 @@ const activeLanguage = computed(() => {
   };
 });
 const items = computed(() => {
-  return (translation.value.availableLanguages || []).map((language) => {
+  return (state.translation.value.availableLanguages || []).map((language) => {
     if (language && language.id) {
       return {
         id: language.id,
         code: language.id.toUpperCase(),
         label: language.name,
         checked: context.value.language === language.id,
-        translation: (translation.value.translations || []).find(
+        translation: (state.translation.value.translations || []).find(
           (v) => v.id === language.id
         )
       };
@@ -180,12 +177,12 @@ function onTranslate(items2) {
   }
 }
 onBlokkliEvent("item:doubleClick", function(block) {
-  if (editMode.value === "translating" && canTranslateBlock.value) {
+  if (isTranslating.value && canTranslateBlock.value) {
     onTranslate([block]);
   }
 });
 onBlokkliEvent("entity:translated", (langcode) => {
-  const targetTranslation = translation.value.translations?.find(
+  const targetTranslation = state.translation.value.translations?.find(
     (v) => v.id === langcode
   );
   if (targetTranslation) {
@@ -193,12 +190,12 @@ onBlokkliEvent("entity:translated", (langcode) => {
   }
 });
 onMounted(() => {
-  const translationExists = !!translation.value.translations?.find(
+  const translationExists = !!state.translation.value.translations?.find(
     (v) => v.id === context.value.language
   );
   if (!translationExists) {
-    const sourceTranslation = translation.value.translations?.find(
-      (v) => v.id === translation.value.sourceLanguage
+    const sourceTranslation = state.translation.value.translations?.find(
+      (v) => v.id === state.translation.value.sourceLanguage
     );
     if (sourceTranslation) {
       return adapter.changeLanguage(sourceTranslation);

package/dist/runtime/components/Edit/Form/Text/index.vue

@@ -27,7 +27,8 @@ defineProps({
   required: { type: Boolean, required: false },
   disabled: { type: Boolean, required: false },
   minlength: { type: [String, Number], required: false },
-  maxlength: { type: [String, Number], required: false }
+  maxlength: { type: [String, Number], required: false },
+  type: { type: String, required: false }
 });
 const value = defineModel({ type: String });
 </script>

package/dist/runtime/components/Edit/Form/Text/index.vue.d.ts

@@ -7,6 +7,7 @@ type __VLS_Props = {
     disabled?: boolean;
     minlength?: string | number;
     maxlength?: string | number;
+    type?: string;
 };
 type __VLS_PublicProps = __VLS_Props & {
     modelValue?: string;

package/dist/runtime/components/Edit/Indicators/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <Teleport to="body">
+  <Teleport to="#bk-canvas-overlay">
     <div id="bk-indicators" class="bk bk-indicators" :style>
       <div id="bk-indicators-left" />
       <div id="bk-indicators-right" />