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

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" />

package/dist/runtime/components/Edit/Konami/Game/index.vue

@@ -125,7 +125,7 @@ let snakeCanvas = null;
 let logoCanvas = null;
 let lastScore = -1;
 let lastBlocksEaten = -1;
-const cellMoveDuration = 250;
+const MOVE_DURATION = 200;
 function generateFood() {
   let newFood;
   do {
@@ -227,7 +227,7 @@ function update(currentTime) {
     return;
   }
   const timeSinceLastUpdate = currentTime - lastCellUpdate;
-  if (timeSinceLastUpdate >= cellMoveDuration) {
+  if (timeSinceLastUpdate >= MOVE_DURATION) {
     if (DEBUG_GAME) {
       nextDirection.value = getAIDirection();
     }
@@ -250,14 +250,14 @@ function update(currentTime) {
     }
     if (newHead.x < 0 || newHead.x >= worldWidth || newHead.y < 0 || newHead.y >= worldHeight) {
       gameOver.value = true;
-      gameOverTime = lastCellUpdate + cellMoveDuration;
+      gameOverTime = lastCellUpdate + MOVE_DURATION;
       return;
     }
     if (snake.value.some(
       (segment) => segment.x === newHead.x && segment.y === newHead.y
     )) {
       gameOver.value = true;
-      gameOverTime = lastCellUpdate + cellMoveDuration;
+      gameOverTime = lastCellUpdate + MOVE_DURATION;
       return;
     }
     lastCellUpdate = currentTime;
@@ -421,7 +421,7 @@ function draw(currentTime) {
   if (lastCellUpdate > 0) {
     const timeToUse = gameOver.value && gameOverTime > 0 ? gameOverTime : currentTime;
     const timeSinceLastUpdate = timeToUse - lastCellUpdate;
-    movementProgress = Math.min(timeSinceLastUpdate / cellMoveDuration, 1);
+    movementProgress = Math.min(timeSinceLastUpdate / MOVE_DURATION, 1);
   }
   if (score.value !== lastScore || blocksEaten.value !== lastBlocksEaten) {
     drawScoreArea();

package/dist/runtime/components/Edit/index.d.ts

@@ -1,4 +1,7 @@
 import AddListItem from './AddListItem/index.vue.js';
+import AddListItemIcon from './AddListItemIcon/index.vue.js';
+import ArtboardTooltip from './ArtboardTooltip/index.vue.js';
+import BlokkliTransition from './Transition/index.vue.js';
 import ConfigForm from './PluginConfigForm/index.vue.js';
 import DialogModal from './Dialog/index.vue.js';
 import DiffViewerState from './DiffViewer/State.vue.js';
@@ -23,8 +26,7 @@ import Resizable from './Resizable/index.vue.js';
 import ScaleToFit from './ScaleToFit/index.vue.js';
 import ScrollBoundary from './ScrollBoundary/index.vue.js';
 import ShortcutIndicator from './ShortcutIndicator/index.vue.js';
-import BlokkliTransition from './Transition/index.vue.js';
 import Sortli from './Sortli/index.vue.js';
+import Banner from './Banner/index.vue.js';
 import ViewportBlockingRect from './ViewportBlockingRect/index.vue.js';
-import AddListItemIcon from './AddListItemIcon/index.vue.js';
-export { AddListItem, AddListItemIcon, ConfigForm, DialogModal, DiffViewerState, FormDatepicker, FormGroup, FormItem, FormOverlay, FormRadio, FormSelect, FormText, FormTextarea, FormToggle, FormRadioTabs, Highlight, Icon, InfoBox, ItemIcon, Loading, Pagination, RelativeTime, Resizable, ScaleToFit, ScrollBoundary, ShortcutIndicator, Sortli, ViewportBlockingRect, BlokkliTransition, };
+export { AddListItem, AddListItemIcon, ArtboardTooltip, BlokkliTransition, ConfigForm, DialogModal, DiffViewerState, FormDatepicker, FormGroup, FormItem, FormOverlay, FormRadio, FormRadioTabs, FormSelect, FormText, FormTextarea, FormToggle, Highlight, Icon, InfoBox, ItemIcon, Loading, Pagination, RelativeTime, Resizable, ScaleToFit, ScrollBoundary, ShortcutIndicator, Sortli, ViewportBlockingRect, Banner, };

package/dist/runtime/components/Edit/index.js

@@ -1,4 +1,7 @@
 import AddListItem from "./AddListItem/index.vue";
+import AddListItemIcon from "./AddListItemIcon/index.vue";
+import ArtboardTooltip from "./ArtboardTooltip/index.vue";
+import BlokkliTransition from "./Transition/index.vue";
 import ConfigForm from "./PluginConfigForm/index.vue";
 import DialogModal from "./Dialog/index.vue";
 import DiffViewerState from "./DiffViewer/State.vue";
@@ -23,13 +26,14 @@ import Resizable from "./Resizable/index.vue";
 import ScaleToFit from "./ScaleToFit/index.vue";
 import ScrollBoundary from "./ScrollBoundary/index.vue";
 import ShortcutIndicator from "./ShortcutIndicator/index.vue";
-import BlokkliTransition from "./Transition/index.vue";
 import Sortli from "./Sortli/index.vue";
+import Banner from "./Banner/index.vue";
 import ViewportBlockingRect from "./ViewportBlockingRect/index.vue";
-import AddListItemIcon from "./AddListItemIcon/index.vue";
 export {
   AddListItem,
   AddListItemIcon,
+  ArtboardTooltip,
+  BlokkliTransition,
   ConfigForm,
   DialogModal,
   DiffViewerState,
@@ -38,11 +42,11 @@ export {
   FormItem,
   FormOverlay,
   FormRadio,
+  FormRadioTabs,
   FormSelect,
   FormText,
   FormTextarea,
   FormToggle,
-  FormRadioTabs,
   Highlight,
   Icon,
   InfoBox,
@@ -56,5 +60,5 @@ export {
   ShortcutIndicator,
   Sortli,
   ViewportBlockingRect,
-  BlokkliTransition
+  Banner
 };

package/dist/runtime/composables/defineBlokkli.js

@@ -6,7 +6,8 @@ import {
   INJECT_REUSABLE_OPTIONS,
   INJECT_PROVIDER_BLOCKS,
   INJECT_PROVIDER_CONTEXT,
-  INJECT_FIELD_USES_PROXY
+  INJECT_FIELD_USES_PROXY,
+  INJECT_REUSABLE_UUID
 } from "../helpers/symbols.js";
 import { computed, inject } from "#imports";
 import { getRuntimeOptionValue } from "#blokkli/helpers/runtimeHelpers";
@@ -45,6 +46,7 @@ export function defineBlokkli(arg) {
     INJECT_REUSABLE_OPTIONS,
     null
   );
+  const reusableUuid = inject(INJECT_REUSABLE_UUID, null);
   const editContext = inject(INJECT_EDIT_CONTEXT, null);
   const provider = inject(
     INJECT_PROVIDER_CONTEXT,
@@ -59,7 +61,7 @@ export function defineBlokkli(arg) {
         ...editContext?.mutatedOptions[uuid] || {}
       };
     }
-    const optionKey = bundle === BUNDLE_BLOKKLI_FRAGMENT ? "fragment:" + item?.value.fragmentName + "__default" : identifier;
+    const optionKey = bundle === BUNDLE_BLOKKLI_FRAGMENT ? "fragment:" + item?.value.fragmentName : identifier;
     const runtimeOptionDefinitions = (editContext?.definitions.runtimeOptions.value || OPTIONS)[optionKey] || {};
     const result = Object.entries(runtimeOptionDefinitions).reduce((acc, [key, v]) => {
       const definition = v;
@@ -95,7 +97,7 @@ export function defineBlokkli(arg) {
   if (editContext?.useBlockRegistration && editContext.dom && bundle !== BUNDLE_FROM_LIBRARY && bundle !== BUNDLE_BLOKKLI_FRAGMENT) {
     const isProxyMode = inject(INJECT_FIELD_USES_PROXY, false);
     if (!isProxyMode) {
-      editContext.useBlockRegistration(editContext.dom, uuid);
+      editContext.useBlockRegistration(editContext.dom, reusableUuid ?? uuid);
     }
   }
   return {