@blokkli/editor 2.0.0-alpha.23 → 2.0.0-alpha.25

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

@@ -1,43 +1,29 @@
 <template>
-  <PluginSidebar
-    v-if="isSidebar && shouldRender"
-    id="add_list"
-    :title="sidebarTitle"
-    :tour-text="tourText"
-    render-always
-    icon="plus"
-    weight="-10"
-    @updated="eventBus.emit('add-list:change')"
-  >
-    <div>
-      <div id="blokkli-add-list-sidebar-before" />
-      <div class="bk bk-list-sidebar">
-        <AddListBlocks />
-        <Sortli id="blokkli-add-list-actions" :build-item="buildItemAction" />
-      </div>
-    </div>
-  </PluginSidebar>
-  <Teleport v-else-if="shouldRender" to="body">
+  <Teleport v-if="shouldRender" :to="ui.mainLayoutElement.value">
     <div
       ref="wrapper"
       class="bk bk-add-list bk-control"
-      :class="[
-  { 'bk-is-active': isActive || hasContextMenuOpen },
-  'bk-is-' + ui.addListOrientation.value
-]"
-      :style="style"
       @wheel.capture.passive="onWheel"
       @mouseenter="onMouseEnter"
       @mouseleave="onMouseLeave"
     >
-      <div class="bk-list">
-        <AddListBlocks />
-        <Sortli id="blokkli-add-list-actions" :build-item="buildItemAction" />
+      <div
+        class="bk-add-list-inner"
+        :class="{
+  'bk-is-active': isActive
+}"
+      >
+        <AddListBlocks
+          :selectable-bundles
+          :generally-available-bundles
+          :hide-disabled-blocks="settings.hideDisabledBlocks"
+        />
+        <AddListActions :selectable-bundles />
       </div>
     </div>
     <PluginTourItem
       id="add-blocks"
-      selector=".bk-list"
+      :element="wrapper"
       :title="sidebarTitle"
       :text="tourText"
     />
@@ -46,44 +32,23 @@
 
 <script setup>
 import {
-  watch,
   ref,
   computed,
   useBlokkli,
-  nextTick,
-  defineBlokkliFeature
+  defineBlokkliFeature,
+  useTemplateRef
 } from "#imports";
-import { Sortli } from "#blokkli/components";
-import { PluginSidebar, PluginTourItem } from "#blokkli/plugins";
-import { addElementClasses } from "#blokkli/helpers/addElementClasses";
+import { PluginTourItem } from "#blokkli/plugins";
 import AddListBlocks from "./Blocks/index.vue";
+import AddListActions from "./Actions/index.vue";
+import { itemEntityType } from "#blokkli-build/config";
+import { onlyUnique } from "#blokkli/helpers";
 const { settings } = defineBlokkliFeature({
   id: "add-list",
   icon: "plus",
   label: "Add List",
   description: "Provides the container to render a list of blocks to add or add actions.",
   settings: {
-    orientation: {
-      type: "radios",
-      label: "Add List",
-      default: "vertical",
-      group: "appearance",
-      viewports: ["desktop"],
-      options: {
-        vertical: {
-          label: "Vertical",
-          icon: "ui-list-vertical"
-        },
-        horizontal: {
-          label: "Horizontal",
-          icon: "ui-list-horizontal"
-        },
-        sidebar: {
-          label: "Sidebar",
-          icon: "ui-list-sidebar"
-        }
-      }
-    },
     hideDisabledBlocks: {
       type: "checkbox",
       label: "Hide blocks that can't be added",
@@ -94,71 +59,77 @@ const { settings } = defineBlokkliFeature({
   },
   screenshot: "feature-add-list.jpg"
 });
-function buildItemAction(element2) {
-  const actionType = element2.dataset.sortliId;
-  if (!actionType) {
-    return;
+const { $t, ui, selection, state, tour, types, context, dom } = useBlokkli();
+const getAllowedTypesForSelected = (p) => {
+  if (types.itemBundlesWithNested.includes(p.bundle)) {
+    return types.fieldConfig.forEntityTypeAndBundle(itemEntityType, p.bundle).flatMap((v) => v.allowedBundles).filter(Boolean);
   }
-  const itemBundle = element2.dataset.itemBundle;
-  return {
-    itemType: "action",
-    actionType,
-    itemBundle,
-    element: () => element2
-  };
-}
-const { state, $t, eventBus, ui, element } = useBlokkli();
-const hasContextMenuOpen = computed(
-  () => ui.openContextMenu.value.startsWith("add_list_item_")
+  if (p.host.type === itemEntityType) {
+    return types.fieldConfig.forEntityTypeAndBundle(itemEntityType, p.host.bundle).flatMap((v) => v.allowedBundles).filter(Boolean);
+  } else {
+    return types.getFieldConfig(
+      context.value.entityType,
+      context.value.entityBundle,
+      p.host.fieldName
+    )?.allowedBundles || [];
+  }
+};
+const bundlesForRenderedFields = computed(() => {
+  return dom.registeredFieldTypes.value.flatMap((field) => {
+    return types.getFieldConfig(
+      field.entityType,
+      field.entityBundle,
+      field.fieldName
+    )?.allowedBundles || [];
+  }).filter(onlyUnique);
+});
+const generallyAvailableBundles = computed(
+  () => types.generallyAvailableBundles.filter(
+    (v) => (
+      // Exclude bundles for which no field is currently being rendered.
+      bundlesForRenderedFields.value.includes(v.id)
+    )
+  )
 );
-const isSidebar = computed(() => ui.addListOrientation.value === "sidebar");
-const shouldRender = computed(() => state.editMode.value === "editing");
-watch(ui.addListOrientation, () => {
-  nextTick(() => {
-    eventBus.emit("add-list:change");
-  });
+const selectableBundles = computed(() => {
+  if (selection.items.value.length) {
+    return selection.items.value.flatMap((v) => getAllowedTypesForSelected(v));
+  }
+  return generallyAvailableBundles.value.map((v) => v.id || "");
 });
-const CLASS_LEFT = "bk-has-add-list-left";
-const CLASS_BOTTOM = "bk-has-add-list-bottom";
-const wrapper = ref(null);
-const isActive = ref(false);
+const shouldRender = computed(
+  () => state.canEdit.value && state.editMode.value === "editing"
+);
+const hasContextMenuOpen = computed(
+  () => ui.openContextMenu.value.startsWith("add_list_item_add-list-blocks")
+);
+const wrapper = useTemplateRef("wrapper");
+const isHovered = ref(false);
 let mouseTimeout = null;
-const style = computed(() => {
-  if (settings.value.orientation === "vertical" && (isActive.value || hasContextMenuOpen.value) && wrapper.value) {
-    const widths = element.queryAll(
-      wrapper.value,
-      ".bk-list-item-label span",
-      "AddList vertical sidebar style",
-      (el) => el.offsetWidth
-    );
-    const largestWidth = Math.max(...widths);
-    return {
-      "--bk-add-list-width": largestWidth + 90
-    };
-  }
-  return void 0;
+const isActive = computed(() => {
+  return (isHovered.value || hasContextMenuOpen.value || tour.isTouring.value) && !selection.isDragging.value;
 });
 function onMouseEnter() {
-  clearTimeout(mouseTimeout);
+  if (mouseTimeout) {
+    clearTimeout(mouseTimeout);
+    isHovered.value = true;
+    mouseTimeout = null;
+    return;
+  }
   mouseTimeout = setTimeout(() => {
-    isActive.value = true;
-  }, 200);
+    isHovered.value = true;
+    mouseTimeout = null;
+  }, 300);
 }
 function onMouseLeave() {
   clearTimeout(mouseTimeout);
-  isActive.value = false;
+  isHovered.value = false;
 }
 const onWheel = (e) => {
   if (e.ctrlKey || e.metaKey) {
     return;
   }
-  if (ui.addListOrientation.value === "horizontal" && e.deltaX) {
-    e.stopPropagation();
-    return;
-  }
-  if (ui.addListOrientation.value === "vertical" && e.deltaY) {
-    e.stopPropagation();
-  }
+  e.stopPropagation();
 };
 const sidebarTitle = computed(() => $t("addListSidebarTitle", "Add blocks"));
 const tourText = computed(
@@ -167,20 +138,6 @@ const tourText = computed(
     "<p>This shows the list of available blocks that can be placed. Add a block by dragging the icon into the page.</p><p>When an existing block is selected, some blocks may be greyed out. This indicates which blocks can be placed inside or after the selected block.</p>"
   )
 );
-addElementClasses(
-  document.documentElement,
-  CLASS_BOTTOM,
-  computed(
-    () => ui.addListOrientation.value === "horizontal" && shouldRender.value
-  )
-);
-addElementClasses(
-  document.documentElement,
-  CLASS_LEFT,
-  computed(
-    () => ui.addListOrientation.value === "vertical" && shouldRender.value
-  )
-);
 </script>
 
 <script>

package/dist/runtime/components/Edit/Features/Analyze/Icon.vue

@@ -0,0 +1,85 @@
+<template>
+  <svg
+    ref="svgElement"
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <defs>
+      <mask id="needleMask">
+        <rect width="24" height="24" fill="white" />
+        <path
+          d="M12 1C12 1 15 11 15 13C15 14.6569 13.6569 16 12 16C10.3432 16 9 14.6568 9 13C9 11.0005 11.9984 1.00521 12 1Z"
+          fill="black"
+          stroke="black"
+          stroke-width="3"
+          transform="rotate(-100 12 13)"
+        >
+          <animateTransform
+            attributeName="transform"
+            type="rotate"
+            keyTimes="0; 0.5; 1"
+            values="-100 12 13; 100 12 13; -100 12 13"
+            dur="2s"
+            repeatCount="indefinite"
+            calcMode="spline"
+            keySplines="0.42 0 0.58 1; 0.42 0 0.58 1"
+          />
+        </path>
+      </mask>
+    </defs>
+
+    <path
+      d="M18.293 19.4316C19.9626 17.7978 21 15.5206 21 13C21 8.02944 16.9706 4 12 4C7.02944 4 3 8.02944 3 13C3 15.522 4.03862 17.8005 5.70996 19.4346"
+      stroke="currentColor"
+      stroke-width="2"
+      stroke-linecap="round"
+      mask="url(#needleMask)"
+    />
+    <path
+      d="M12 1C12 1 15 11 15 13C15 14.6569 13.6569 16 12 16C10.3432 16 9 14.6568 9 13C9 11.0005 11.9984 1.00521 12 1Z"
+      fill="currentColor"
+      transform="rotate(-100 12 13)"
+    >
+      <animateTransform
+        attributeName="transform"
+        type="rotate"
+        keyTimes="0; 0.5; 1"
+        values="-100 12 13; 100 12 13; -100 12 13"
+        dur="2s"
+        repeatCount="indefinite"
+        calcMode="spline"
+        keySplines="0.42 0 0.58 1; 0.42 0 0.58 1"
+      />
+    </path>
+  </svg>
+</template>
+
+<script setup>
+import { useTemplateRef, watch, onMounted } from "#imports";
+const props = defineProps({
+  isRunning: { type: Boolean, required: true }
+});
+const svgElement = useTemplateRef("svgElement");
+onMounted(() => {
+  if (!svgElement.value) {
+    return;
+  }
+  if (!props.isRunning) {
+    svgElement.value.pauseAnimations();
+  }
+});
+watch(
+  () => props.isRunning,
+  (isRunning) => {
+    if (!svgElement.value) {
+      return;
+    }
+    if (isRunning) {
+      svgElement.value.unpauseAnimations();
+    } else {
+      svgElement.value.pauseAnimations();
+    }
+  }
+);
+</script>

package/dist/runtime/components/Edit/Features/Analyze/Icon.vue.d.ts

@@ -0,0 +1,5 @@
+type __VLS_Props = {
+    isRunning: boolean;
+};
+declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;