@blokkli/editor 2.0.0-alpha.22 → 2.0.0-alpha.24

package/dist/runtime/components/Edit/Features/Tour/Popup/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <Teleport to="body">
+  <Teleport :to="ui.mainLayoutElement.value">
     <ViewportBlockingRect id="tour-popup" class="bk bk-tour-popup">
       <div class="bk-tour-popup-title">
         <h2>{{ $t("tourLabel", "Take a tour") }}</h2>
@@ -29,6 +29,6 @@
 <script setup>
 import { Icon, ViewportBlockingRect } from "#blokkli/components";
 import { useBlokkli } from "#imports";
-const { $t } = useBlokkli();
+const { $t, ui } = useBlokkli();
 defineEmits(["start", "close"]);
 </script>

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

@@ -1,22 +1,13 @@
 <template>
   <Overlay v-if="tour.isTouring.value" @close="close" />
-  <PluginMenuButton
-    id="tour"
-    :title="$t('tourLabel', 'Take a tour')"
-    :description="$t('tourDescription', 'Explore the features of the editor')"
-    icon="tutor"
-    secondary
-    :weight="-10"
-    @click="start"
-  />
   <Popup v-if="showTourPopup" @close="close" @start="start" />
 </template>
 
 <script setup>
 import { defineBlokkliFeature, useBlokkli } from "#imports";
 import Overlay from "./Overlay/index.vue";
-import { PluginMenuButton } from "#blokkli/plugins";
 import Popup from "./Popup/index.vue";
+import defineMenuButton from "#blokkli/helpers/composables/defineMenuButton";
 defineBlokkliFeature({
   id: "tour",
   label: "Tour",
@@ -33,6 +24,17 @@ const close = () => {
   showTourPopup.value = false;
   tour.isTouring.value = false;
 };
+defineMenuButton(() => {
+  return {
+    id: "tour",
+    title: $t("tourLabel", "Take a tour"),
+    description: $t("tourDescription", "Explore the features of the editor"),
+    icon: "tutor",
+    secondary: true,
+    weight: -10,
+    callback: start
+  };
+});
 </script>
 
 <script>

package/dist/runtime/components/Edit/Features/Transform/Dialog/index.vue

@@ -38,14 +38,14 @@
 }"
               @click.prevent="onClickPreview"
             >
-              {{ $t("transformDialogButtonPreview", "Preview") }}
+              {{ $t("transformDialogButtonPreview", "New suggestion") }}
             </button>
             <button
               class="bk-button bk-is-orange"
               :disabled
               @click.prevent="onClickSubmit"
             >
-              {{ $t("transformDialogButtonApply", "Apply") }}
+              {{ $t("transformDialogButtonApply", "Apply changes") }}
             </button>
           </footer>
         </div>
@@ -183,10 +183,10 @@ onMounted(async () => {
   ui.hasTransformOverlayOpen.value = true;
   selection.lockSelection("transform-dialog");
   if (hasSeedInput.value && supportsPreview.value) {
-    const hasOnlySeedInputs = props.plugin.configInputs?.every(
-      (v) => v.type === "seed"
+    const hasNoRequiredInput = props.plugin.configInputs?.every(
+      (v) => v.type === "seed" || !v.required
     );
-    if (hasOnlySeedInputs === true) {
+    if (hasNoRequiredInput === true) {
       await onClickPreview();
     }
   }

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

@@ -1,26 +1,5 @@
 <template>
-  <PluginItemDropdown
-    id="transform"
-    :title="$t('transformTo', 'Actions')"
-    :enabled="!!possibleTransforms.length"
-    :items="possibleTransforms"
-    icon="script"
-    weight="100"
-    @select="onSelectBlockTransformPlugin($event, selection.uuids.value)"
-  />
-
-  <PluginItemDropdown
-    v-if="hostPlugins.length"
-    id="transform-host"
-    :title="$t('transformTo', 'Actions')"
-    :enabled="selection.hasHostSelected.value"
-    :items="hostPlugins"
-    icon="script"
-    weight="100"
-    @select="onSelectHostTransformPlugin($event)"
-  />
-
-  <Teleport to="body">
+  <Teleport :to="ui.mainLayoutElement.value">
     <BlokkliTransition name="transform-overlay">
       <TransformDialog
         v-if="openPluginDefinition"
@@ -42,10 +21,10 @@ import {
   defineBlokkliFeature,
   useLazyAsyncData
 } from "#imports";
-import { PluginItemDropdown } from "#blokkli/plugins";
 import { BlokkliTransition } from "#blokkli/components";
 import { filterTransforms } from "#blokkli/helpers/transform";
 import defineCommands from "#blokkli/helpers/composables/defineCommands";
+import defineItemDropdownAction from "#blokkli/helpers/composables/defineItemDropdownAction";
 import TransformDialog from "./Dialog/index.vue";
 const { adapter } = defineBlokkliFeature({
   id: "transform",
@@ -218,6 +197,34 @@ defineCommands(
     }
   }))
 );
+defineItemDropdownAction(() => {
+  if (possibleTransforms.value.length) {
+    return possibleTransforms.value.map((transform) => ({
+      id: "transform-block-" + transform.id,
+      label: transform.label,
+      icon: "script",
+      group: "transform",
+      weight: 100,
+      callback: () => {
+        onSelectBlockTransformPlugin(transform, selection.uuids.value);
+      }
+    }));
+  }
+});
+defineItemDropdownAction(() => {
+  if (selection.hasHostSelected.value && hostPlugins.value && hostPlugins.value.length) {
+    return hostPlugins.value.map((plugin) => ({
+      id: "transform-host-" + plugin.id,
+      label: plugin.label,
+      icon: "script",
+      group: "transform",
+      weight: 100,
+      callback: () => {
+        onSelectHostTransformPlugin(plugin);
+      }
+    }));
+  }
+});
 </script>
 
 <script>

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

@@ -52,18 +52,6 @@
     <Banner v-if="isTranslating" :active-language />
   </Teleport>
 
-  <PluginMenuButton
-    id="translations"
-    :title="$t('translationsBatchTranslateMenuTitle', 'Translate...')"
-    :description="
-  $t('translationsBatchTranslateMenuDescription', 'Translate all blocks')
-"
-    :disabled="!isTranslating"
-    :weight="60"
-    icon="translate"
-    @click="eventBus.emit('batchTranslate')"
-  />
-
   <PluginItemAction
     v-if="isTranslating"
     id="translate"
@@ -84,13 +72,10 @@ import {
   onMounted
 } from "#imports";
 import { falsy } from "#blokkli/helpers";
-import {
-  PluginMenuButton,
-  PluginItemAction,
-  PluginTourItem
-} from "#blokkli/plugins";
+import { PluginItemAction, PluginTourItem } from "#blokkli/plugins";
 import Banner from "./Banner/index.vue";
 import onBlokkliEvent from "#blokkli/helpers/composables/onBlokkliEvent";
+import defineMenuButton from "#blokkli/helpers/composables/defineMenuButton";
 const { adapter } = defineBlokkliFeature({
   id: "translations",
   label: "Translations",
@@ -202,6 +187,22 @@ onMounted(() => {
     }
   }
 });
+defineMenuButton(() => {
+  return {
+    id: "translations",
+    title: $t("translationsBatchTranslateMenuTitle", "Translate..."),
+    description: $t(
+      "translationsBatchTranslateMenuDescription",
+      "Translate all blocks"
+    ),
+    icon: "translate",
+    disabled: !isTranslating.value,
+    weight: 60,
+    callback: () => {
+      eventBus.emit("batchTranslate");
+    }
+  };
+});
 </script>
 
 <script>

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

@@ -0,0 +1,43 @@
+<template>
+  <div>
+    <div class="bk-form-label">
+      {{ label }}<span v-if="required" class="bk-required-indicator">*</span>
+    </div>
+    <div>
+      <label v-for="option in options" :key="option.value" class="bk-checkbox">
+        <input
+          :checked="isChecked(option.value)"
+          type="checkbox"
+          :value="option.value"
+          :required
+          :disabled
+          @change="toggleValue(option.value)"
+        />
+        <span>{{ option.label }}</span>
+      </label>
+    </div>
+    <div v-if="description" class="bk-form-description">{{ description }}</div>
+  </div>
+</template>
+
+<script setup>
+defineProps({
+  id: { type: String, required: true },
+  label: { type: String, required: true },
+  options: { type: Array, required: true },
+  required: { type: Boolean, required: false },
+  disabled: { type: Boolean, required: false },
+  description: { type: String, required: false }
+});
+const value = defineModel({ type: Array, ...{ default: [] } });
+function isChecked(optionValue) {
+  return value.value.includes(optionValue);
+}
+function toggleValue(optionValue) {
+  if (value.value.includes(optionValue)) {
+    value.value = value.value.filter((v) => v !== optionValue);
+  } else {
+    value.value = [...value.value, optionValue];
+  }
+}
+</script>

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

@@ -0,0 +1,20 @@
+type __VLS_Props = {
+    id: string;
+    label: string;
+    options: {
+        value: string;
+        label: string;
+    }[];
+    required?: boolean;
+    disabled?: boolean;
+    description?: string;
+};
+type __VLS_PublicProps = __VLS_Props & {
+    modelValue?: string[];
+};
+declare const _default: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: string[]) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: string[]) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

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

@@ -6,7 +6,6 @@
     @keyup.stop
     @keydown.stop
   >
-    <div class="bk bk-form-overlay-background bk-overlay" />
     <Resizable :id="id" class="bk-form-overlay-resizable">
       <FormHeader
         :bundle="bundle"
@@ -27,16 +26,26 @@
 <script setup>
 import FormHeader from "./Header/index.vue";
 import { Resizable } from "#blokkli/components";
-defineProps({
+import { onBeforeUnmount, onMounted, useBlokkli } from "#imports";
+import onBlokkliEvent from "#blokkli/helpers/composables/onBlokkliEvent";
+const props = defineProps({
   id: { type: String, required: true },
   bundle: { type: String, required: false },
   icon: { type: null, required: false },
   title: { type: String, required: true }
 });
+const { ui } = useBlokkli();
 const emit = defineEmits(["close"]);
-const onClose = () => {
+function onClose() {
   emit("close");
-};
+}
+onBlokkliEvent("overlay:close", onClose);
+onMounted(() => {
+  ui.openDialog({ id: props.id, alignment: "right" });
+});
+onBeforeUnmount(() => {
+  ui.closeDialog(props.id);
+});
 </script>
 
 <script>

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

@@ -0,0 +1,41 @@
+<template>
+  <div
+    class="bk-item-icon"
+    :class="[
+  'bk-is-' + mappedColor,
+  {
+    'bk-is-small': isSmall
+  }
+]"
+  >
+    <Icon v-if="icon" :name="icon" />
+    <ItemIcon v-else-if="bundle" :bundle />
+  </div>
+</template>
+
+<script setup>
+import { ItemIcon, Icon } from "#blokkli/components";
+import {
+  BUNDLE_BLOKKLI_FRAGMENT,
+  BUNDLE_FROM_LIBRARY
+} from "#blokkli/constants";
+import { computed } from "#imports";
+const props = defineProps({
+  icon: { type: null, required: false, default: void 0 },
+  bundle: { type: String, required: false, default: void 0 },
+  color: { type: String, required: false, default: void 0 },
+  isSmall: { type: Boolean, required: false, default: false }
+});
+const mappedColor = computed(() => {
+  if (props.color) {
+    return props.color;
+  } else if (props.bundle) {
+    if (props.bundle === BUNDLE_BLOKKLI_FRAGMENT) {
+      return "accent";
+    } else if (props.bundle === BUNDLE_FROM_LIBRARY) {
+      return "lime";
+    }
+  }
+  return "default";
+});
+</script>

package/dist/runtime/components/Edit/{AddListItemIcon → ItemIconBox}/index.vue.d.ts

@@ -1,15 +1,15 @@
 import type { BlokkliIcon } from '#blokkli-build/icons';
-import type { AddListOrientation } from '#blokkli/types';
+type ItemColor = 'rose' | 'lime' | 'default' | 'yellow' | 'accent';
 type __VLS_Props = {
     icon?: BlokkliIcon;
     bundle?: string;
-    color?: 'rose' | 'lime' | 'default' | 'yellow' | 'accent';
-    orientation?: AddListOrientation;
+    color?: ItemColor;
+    isSmall?: boolean;
 };
 declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
     bundle: string;
     icon: BlokkliIcon;
-    color: "rose" | "lime" | "default" | "yellow" | "accent";
-    orientation: AddListOrientation;
+    color: ItemColor;
+    isSmall: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 export default _default;

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

@@ -5,7 +5,6 @@
   '--bk-bg': background
 }"
   >
-    <div class="bk-dialog-background" />
     <div class="bk-konami-game bk-slide-up-inner">
       <div class="bk-konami-game-canvas">
         <canvas

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

@@ -1,9 +1,7 @@
 <template>
-  <Teleport to="body">
-    <BlokkliTransition name="slide-up">
-      <Game v-if="isEnabled" @close="isEnabled = false" />
-    </BlokkliTransition>
-  </Teleport>
+  <BlokkliTransition name="slide-up">
+    <Game v-if="isEnabled" @close="isEnabled = false" />
+  </BlokkliTransition>
 </template>
 
 <script setup>

package/dist/runtime/components/Edit/Messages/Item/index.vue

@@ -26,9 +26,10 @@
     </div>
     <Teleport
       v-if="additional && additional instanceof Error && showDetails"
-      to="body"
+      :to="ui.mainLayoutElement.value"
     >
       <DialogModal
+        id="messages-error-details"
         title="Error Details"
         hide-buttons
         width="100%"
@@ -48,13 +49,21 @@
 </template>
 
 <script setup>
-import { ref, onMounted, onBeforeUnmount, computed, watch } from "#imports";
+import {
+  ref,
+  onMounted,
+  onBeforeUnmount,
+  computed,
+  watch,
+  useBlokkli
+} from "#imports";
 import { Icon, DialogModal } from "#blokkli/components";
 const props = defineProps({
   type: { type: String, required: true },
   message: { type: String, required: true },
   additional: { type: null, required: false }
 });
+const { ui } = useBlokkli();
 const emit = defineEmits(["close"]);
 const hasTimer = ref(true);
 const showDetails = ref(false);

package/dist/runtime/components/Edit/Messages/Item/index.vue.d.ts

@@ -1,5 +1,5 @@
 type __VLS_Props = {
-    type: 'success' | 'error';
+    type: 'success' | 'error' | 'warning';
     message: string;
     additional?: string | Error | unknown;
 };

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

@@ -16,7 +16,12 @@ import { ref, useBlokkli } from "#imports";
 import Item from "./Item/index.vue";
 import onBlokkliEvent from "#blokkli/helpers/composables/onBlokkliEvent";
 const { ui } = useBlokkli();
-const messages = ref([]);
+const messages = ref([
+  // {
+  //   type: 'success',
+  //   message: 'Foobar this is just a message',
+  // },
+]);
 function removeMessage(index) {
   messages.value = messages.value.filter((_v, i) => i !== index);
 }

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

@@ -0,0 +1,66 @@
+<template>
+  <BlokkliTransition name="fade">
+    <div
+      v-if="isVisible"
+      class="bk bk-overlay"
+      @click.prevent.stop.capture="onClick"
+      @dblclick.prevent="onDoubleClick"
+      @wheel.capture.stop.prevent
+      @pointerdown.capture.stop.prevent
+      @pointermove.capture.stop.prevent
+      @touchstart.capture.stop.prevent
+      @touchmove.capture.stop.prevent
+      @touchend.capture.stop.prevent
+    >
+      <div
+        v-if="showDoubleClickInfo"
+        :class="{
+  'bk-is-left': alignment === 'right' || alignment === 'center',
+  'bk-is-right': alignment === 'left'
+}"
+      >
+        <Icon name="click" />
+        <div v-html="infoText" />
+      </div>
+    </div>
+  </BlokkliTransition>
+</template>
+
+<script setup>
+import { BlokkliTransition, Icon } from "#blokkli/components";
+import { computed, useBlokkli, ref, watch } from "#imports";
+const { ui, eventBus, $t } = useBlokkli();
+let clickTimeout = null;
+const showDoubleClickInfo = ref(false);
+const alignment = computed(() => ui.currentDialog.value?.alignment);
+const infoText = computed(
+  () => $t(
+    "overlayDoubleClickInfo",
+    "<strong>Double click</strong> to close overlay"
+  )
+);
+function onClick() {
+  if (clickTimeout) {
+    return;
+  }
+  clickTimeout = window.setTimeout(() => {
+    showDoubleClickInfo.value = true;
+  }, 500);
+}
+const isVisible = computed(() => ui.hasDialogOpen.value);
+watch(isVisible, () => {
+  if (clickTimeout) {
+    window.clearTimeout(clickTimeout);
+    clickTimeout = null;
+  }
+  showDoubleClickInfo.value = false;
+});
+function onDoubleClick() {
+  if (clickTimeout) {
+    window.clearTimeout(clickTimeout);
+    clickTimeout = null;
+  }
+  eventBus.emit("overlay:close");
+  showDoubleClickInfo.value = false;
+}
+</script>

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

@@ -0,0 +1,2 @@
+declare const _default: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+export default _default;

package/dist/runtime/components/Edit/PreviewProvider.vue

@@ -124,7 +124,7 @@ const onWheel = (e) => {
 };
 const isInIframe = () => window.parent !== window;
 const onFocusItem = (uuid) => {
-  const el = document.querySelector(`[data-uuid="${uuid}"]`);
+  const el = document.querySelector(`[data-bk-uuid="${uuid}"]`);
   if (el) {
     const elRect = el.getBoundingClientRect();
     if (!intersects(elRect, {

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

@@ -10,14 +10,11 @@
 
 <script setup>
 import { useBlokkli } from "#imports";
-import {
-  buildDraggableItem,
-  getDistance,
-  getInteractionCoordinates
-} from "#blokkli/helpers";
+import { getDistance, getInteractionCoordinates } from "#blokkli/helpers";
 const { eventBus } = useBlokkli();
 const props = defineProps({
-  getDragItems: { type: Function, required: false }
+  getDragItems: { type: Function, required: false },
+  buildItem: { type: Function, required: true }
 });
 let pointerStartCoords = null;
 let activeItem = null;
@@ -31,10 +28,10 @@ function onPointerDown(e) {
   }
   pointerStartCoords = getInteractionCoordinates(e);
   const sortliItem = e.target.closest("[data-sortli-id]");
-  if (!sortliItem) {
+  if (!(sortliItem instanceof HTMLElement)) {
     return;
   }
-  const item = buildDraggableItem(sortliItem);
+  const item = props.buildItem(sortliItem);
   if (!item) {
     return;
   }

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

@@ -1,8 +1,10 @@
 import type { DraggableItem } from '#blokkli/types';
 declare const _default: __VLS_WithSlots<import("vue").DefineComponent<{
     getDragItems?: (activeItem?: DraggableItem) => DraggableItem[] | null;
+    buildItem: (el: HTMLElement) => DraggableItem | null | undefined;
 }, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{
     getDragItems?: (activeItem?: DraggableItem) => DraggableItem[] | null;
+    buildItem: (el: HTMLElement) => DraggableItem | null | undefined;
 }> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
     default?: (props: {}) => any;
 }>;