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

package/dist/runtime/blokkliPlugins/AddAction/index.vue

@@ -17,7 +17,14 @@
 </template>
 
 <script setup>
-import { computed, useBlokkli, nextTick, ref } from "#imports";
+import {
+  computed,
+  useBlokkli,
+  nextTick,
+  ref,
+  onMounted,
+  onBeforeUnmount
+} from "#imports";
 import { AddListItem } from "#blokkli/components";
 import onBlokkliEvent from "#blokkli/helpers/composables/onBlokkliEvent";
 import defineTourItem from "#blokkli/helpers/composables/defineTourItem";
@@ -33,7 +40,7 @@ const props = defineProps({
 });
 const item = ref(null);
 const emit = defineEmits(["placed"]);
-const { ui, state, features } = useBlokkli();
+const { ui, state, features, plugins } = useBlokkli();
 const addListAvailable = computed(
   () => !!features.mountedFeatures.value.find((v) => v.id === "add-list")
 );
@@ -47,7 +54,7 @@ onBlokkliEvent("add-list:change", () => {
   });
 });
 onBlokkliEvent("action:placed", (e) => {
-  if (e.action.actionType !== props.type) {
+  if (e.id !== props.type) {
     return;
   }
   emit("placed", e);
@@ -63,6 +70,23 @@ defineTourItem(() => {
     element: () => item.value?.getElement()
   };
 });
+function addActionFunction() {
+  return {
+    id: props.type,
+    icon: props.icon,
+    color: props.color,
+    itemBundle: props.itemBundle,
+    title: props.title,
+    description: props.description,
+    enabled: !props.disabled
+  };
+}
+onMounted(() => {
+  plugins.addAddAction(addActionFunction);
+});
+onBeforeUnmount(() => {
+  plugins.removeAddAction(addActionFunction);
+});
 </script>
 
 <script>

package/dist/runtime/blokkliPlugins/BlockIndicator/index.vue

@@ -0,0 +1,65 @@
+<template>
+  <Teleport to="#bk-indicators-left">
+    <div
+      ref="el"
+      class="bk-indicator-item"
+      @click.prevent="$emit('click')"
+      @mouseenter="onMouseEnter"
+      @mouseleave="onMouseLeave"
+    >
+      <slot>
+        <div class="bk-indicator-item-inner">
+          <div v-if="label">{{ label }}</div>
+          <div v-if="icon">
+            <Icon :name="icon" />
+          </div>
+        </div>
+      </slot>
+    </div>
+  </Teleport>
+</template>
+
+<script setup>
+import {
+  useBlokkli,
+  onMounted,
+  useTemplateRef,
+  onBeforeUnmount
+} from "#imports";
+import { Icon } from "#blokkli/components";
+const props = defineProps({
+  id: { type: String, required: true },
+  uuid: { type: String, required: true },
+  label: { type: String, required: false },
+  position: { type: String, required: false },
+  icon: { type: null, required: false }
+});
+defineEmits(["click"]);
+const { indicators } = useBlokkli();
+const el = useTemplateRef("el");
+function onMouseEnter() {
+  indicators.setHovered(props.uuid);
+}
+function onMouseLeave() {
+  indicators.setHovered();
+}
+onMounted(() => {
+  if (el.value) {
+    indicators.addIndicator({
+      id: props.id,
+      uuid: props.uuid,
+      position: props.position ?? "left",
+      element: el.value
+    });
+  }
+});
+onBeforeUnmount(() => {
+  indicators.removeIndicator(props.id, props.uuid);
+});
+</script>
+
+<script>
+export default {
+  name: "PluginBlockIndicator"
+};
+</script>

package/dist/runtime/blokkliPlugins/BlockIndicator/index.vue.d.ts

@@ -0,0 +1,26 @@
+import type { BlokkliIcon } from '#blokkli-build/icons';
+declare const _default: __VLS_WithSlots<import("vue").DefineComponent<{
+    id: string;
+    uuid: string;
+    label?: string;
+    position?: "left" | "right";
+    icon?: BlokkliIcon;
+}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    click: () => any;
+}, string, import("vue").PublicProps, Readonly<{
+    id: string;
+    uuid: string;
+    label?: string;
+    position?: "left" | "right";
+    icon?: BlokkliIcon;
+}> & Readonly<{
+    onClick?: (() => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
+    default?: (props: {}) => any;
+}>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/blokkliPlugins/ContextMenu/Menu/index.vue

@@ -44,6 +44,9 @@ onBlokkliEvent("keyPressed", (e) => {
     emit("close");
   }
 });
+onBlokkliEvent("window:clickAway", () => {
+  emit("close");
+});
 watch(selection.uuids, () => emit("close"));
 const onClick = (index) => {
   const item = props.menu[index];

package/dist/runtime/blokkliPlugins/ContextMenu/index.vue

@@ -2,7 +2,7 @@
   <Component :is="tag" @contextmenu.stop.prevent="onContextMenu">
     <slot />
     <Teleport to="body">
-      <Transition name="bk-context-menu">
+      <BlokkliTransition name="context-menu">
         <ContextMenuMenu
           v-if="isVisible"
           :menu="menu"
@@ -10,7 +10,7 @@
           :y="y"
           @close="ui.openContextMenu.value = ''"
         />
-      </Transition>
+      </BlokkliTransition>
     </Teleport>
   </Component>
 </template>
@@ -18,6 +18,7 @@
 <script setup>
 import { ref, computed, useBlokkli } from "#imports";
 import ContextMenuMenu from "./Menu/index.vue";
+import { BlokkliTransition } from "#blokkli/components";
 const props = defineProps({
   id: { type: String, required: true },
   menu: { type: Array, required: true },

package/dist/runtime/blokkliPlugins/DroppableEdit/index.vue

@@ -1,6 +1,6 @@
 <template>
   <Teleport to="body">
-    <transition name="bk-slide-in" :duration="200">
+    <BlokkliTransition name="slide-in">
       <FormOverlay
         v-if="isVisible"
         :id="id"
@@ -15,12 +15,12 @@
           </button>
         </template>
       </FormOverlay>
-    </transition>
+    </BlokkliTransition>
   </Teleport>
 </template>
 
 <script setup>
-import { FormOverlay } from "#blokkli/components";
+import { FormOverlay, BlokkliTransition } from "#blokkli/components";
 import onBlokkliEvent from "#blokkli/helpers/composables/onBlokkliEvent";
 import { ref, useBlokkli } from "#imports";
 const props = defineProps({

package/dist/runtime/blokkliPlugins/ItemDropdown/index.vue

@@ -1,21 +1,65 @@
 <template>
   <Teleport v-if="enabled" to="#bk-blokkli-item-actions-dropdown">
-    <div>
-      <h3>{{ title }}</h3>
-      <slot />
+    <div
+      v-show="items.length"
+      :style="{
+  order: weight
+}"
+    >
+      <ol>
+        <li v-for="item in itemsMapped" :key="item.id">
+          <button
+            class="bk-blokkli-item-actions-type-dropdown-button"
+            :disabled="!item.enabled"
+            @click.prevent="onClick(item)"
+          >
+            <div class="bk-blokkli-item-actions-type-dropdown-icon">
+              <Icon v-if="item.icon" :name="item.icon" />
+              <ItemIcon v-else-if="item.bundle" :bundle="item.bundle" />
+            </div>
+            <div>
+              <div>{{ item.label }}</div>
+            </div>
+            <div v-if="item.description" class="bk-tooltip">
+              {{ item.description }}
+            </div>
+          </button>
+        </li>
+      </ol>
     </div>
   </Teleport>
 </template>
 
-<script setup>
+<script>
+import { Icon, ItemIcon } from "#blokkli/components";
 import { computed, useBlokkli, onMounted, onBeforeUnmount } from "#imports";
+</script>
+
+<script setup>
 const props = defineProps({
   id: { type: String, required: true },
   title: { type: String, required: true },
-  enabled: { type: Boolean, required: true }
+  enabled: { type: Boolean, required: true },
+  items: { type: Array, required: true },
+  icon: { type: null, required: false },
+  weight: { type: [String, Number], required: false }
+});
+const emit = defineEmits(["select"]);
+const itemsMapped = computed(() => {
+  return props.items.map((item) => {
+    return {
+      ...item,
+      icon: item.icon ?? props.icon,
+      enabled: item.enabled !== false
+    };
+  });
 });
 const { eventBus } = useBlokkli();
 const isRendering = computed(() => props.enabled);
+function onClick(item) {
+  emit("select", item);
+  eventBus.emit("action:selected");
+}
 onMounted(() => {
   eventBus.emit("plugin:mount", {
     type: "ItemDropdown",
@@ -30,9 +74,3 @@ onBeforeUnmount(() => {
   });
 });
 </script>
-
-<script>
-export default {
-  name: "PluginItemDropdown"
-};
-</script>

package/dist/runtime/blokkliPlugins/ItemDropdown/index.vue.d.ts

@@ -1,17 +1,31 @@
-declare const _default: __VLS_WithSlots<import("vue").DefineComponent<{
+import type { BlokkliIcon } from '#blokkli-build/icons';
+type Item = {
     id: string;
-    title: string;
-    enabled: boolean;
-}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{
-    id: string;
-    title: string;
-    enabled: boolean;
-}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
-    default?: (props: {}) => any;
-}>;
-export default _default;
-type __VLS_WithSlots<T, S> = T & {
-    new (): {
-        $slots: S;
-    };
+    label: string;
+    description?: string;
+    enabled?: boolean;
+    icon?: BlokkliIcon;
+    bundle?: string;
 };
+declare const _default: <T extends Item>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_expose?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
+    props: __VLS_PrettifyLocal<Pick<Partial<{}> & Omit<{
+        readonly onSelect?: ((item: T) => any) | undefined;
+    } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, never>, "onSelect"> & {
+        id: string;
+        title: string;
+        enabled: boolean;
+        items: T[];
+        icon?: BlokkliIcon;
+        weight?: string | number;
+    } & Partial<{}>> & import("vue").PublicProps;
+    expose(exposed: import("vue").ShallowUnwrapRef<{}>): void;
+    attrs: any;
+    slots: {};
+    emit: (e: "select", item: T) => void;
+}>) => import("vue").VNode & {
+    __ctx?: Awaited<typeof __VLS_setup>;
+};
+export default _default;
+type __VLS_PrettifyLocal<T> = {
+    [K in keyof T]: T[K];
+} & {};

package/dist/runtime/blokkliPlugins/MenuButton/index.vue.d.ts

@@ -5,7 +5,7 @@ declare const _default: __VLS_WithSlots<import("vue").DefineComponent<{
     description: string;
     disabled?: boolean;
     icon?: BlokkliIcon;
-    type?: "success" | "danger";
+    type?: "success" | "danger" | "yellow";
     weight?: number;
     secondary?: boolean;
 }, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
@@ -16,7 +16,7 @@ declare const _default: __VLS_WithSlots<import("vue").DefineComponent<{
     description: string;
     disabled?: boolean;
     icon?: BlokkliIcon;
-    type?: "success" | "danger";
+    type?: "success" | "danger" | "yellow";
     weight?: number;
     secondary?: boolean;
 }> & Readonly<{

package/dist/runtime/blokkliPlugins/Sidebar/Detached/index.vue

@@ -69,6 +69,7 @@ import {
 } from "#imports";
 import { Icon, ViewportBlockingRect, ScrollBoundary } from "#blokkli/components";
 import onBlokkliEvent from "#blokkli/helpers/composables/onBlokkliEvent";
+import { addElementClasses } from "#blokkli/helpers/addElementClasses";
 const props = defineProps({
   id: { type: String, required: true },
   title: { type: String, required: true },
@@ -147,13 +148,11 @@ const rootCursor = computed(() => {
 watch(rootCursor, (cursor) => {
   document.documentElement.style.cursor = cursor;
 });
-watch(mouseMode, (mode) => {
-  if (mode) {
-    document.documentElement.classList.add("bk-is-sidebar-interacting");
-  } else {
-    document.documentElement.classList.remove("bk-is-sidebar-interacting");
-  }
-});
+addElementClasses(
+  document.documentElement,
+  "bk-is-sidebar-interacting",
+  mouseMode
+);
 const updateStored = () => {
   storedData.value = {
     x: x.value,

package/dist/runtime/blokkliPlugins/Sidebar/index.vue

@@ -130,11 +130,11 @@ const { storage, state, ui, $t } = useBlokkli();
 const tourElement = ref(null);
 const detachedKey = computed(() => "sidebar:detached:" + props.id);
 const storageKey = computed(() => "sidebar:active:" + props.region);
-const isDetached = storage.use(detachedKey, false);
+const isDetached = storage.use(detachedKey, false, true);
 const isDisabled = computed(
   () => props.editOnly && state.editMode.value !== "editing" && !props.disabled
 );
-const activeSidebar = storage.use(storageKey, "");
+const activeSidebar = storage.use(storageKey, "", true);
 const isRenderedDetached = computed(
   () => isDetached.value && !ui.isMobile.value
 );
@@ -166,13 +166,6 @@ const showSidebar = () => {
   }
   activeSidebar.value = props.id;
 };
-watch(activeSidebar, (active) => {
-  if (active) {
-    document.documentElement.classList.add("bk-has-sidebar-" + props.region);
-  } else {
-    document.documentElement.classList.remove("bk-has-sidebar-" + props.region);
-  }
-});
 const sidebarContent = ref(null);
 const scrolledToEnd = ref(false);
 const isOverflowing = ref(false);

package/dist/runtime/blokkliPlugins/Sidebar/index.vue.d.ts

@@ -50,8 +50,8 @@ declare const _default: __VLS_WithSlots<import("vue").DefineComponent<{
         width: number;
         height: number;
     };
-    keyCode: string;
     weight: string | number;
+    keyCode: string;
     tourText: string;
     minWidth: number;
     minHeight: number;

package/dist/runtime/blokkliPlugins/ViewOption/index.vue

@@ -30,11 +30,11 @@
 </template>
 
 <script setup>
-import { useBlokkli, computed, ref } from "#imports";
+import { useBlokkli, computed, ref, watch } from "#imports";
 import { ShortcutIndicator, Icon } from "#blokkli/components";
 import defineCommands from "#blokkli/helpers/composables/defineCommands";
 import defineTourItem from "#blokkli/helpers/composables/defineTourItem";
-const { storage, ui } = useBlokkli();
+const { storage, ui, eventBus } = useBlokkli();
 const props = defineProps({
   id: { type: String, required: true },
   label: { type: String, required: true },
@@ -50,7 +50,7 @@ const props = defineProps({
 const emit = defineEmits(["update:modelValue"]);
 const storageKey = "view_option_" + props.id;
 const button = ref(null);
-const isActiveStorage = storage.use(storageKey, false);
+const isActiveStorage = storage.use(storageKey, false, true);
 const isActive = computed({
   get() {
     return isActiveStorage.value;
@@ -60,6 +60,9 @@ const isActive = computed({
     emit("update:modelValue", v);
   }
 });
+watch(isActive, () => {
+  eventBus.emit("view-option:toggle", { id: props.id });
+});
 emit("update:modelValue", isActiveStorage.value);
 const title = computed(() => isActive.value ? props.titleOff : props.titleOn);
 const onClick = () => {

package/dist/runtime/blokkliPlugins/index.d.ts

@@ -1,12 +1,13 @@
-import PluginMenuButton from './MenuButton/index.vue.js';
+import PluginAddAction from './AddAction/index.vue.js';
+import PluginBlockIndicator from './BlockIndicator/index.vue.js';
+import PluginContextMenu from './ContextMenu/index.vue.js';
+import PluginDebugOverlay from './DebugOverlay/index.vue.js';
+import PluginDroppableEdit from './DroppableEdit/index.vue.js';
 import PluginItemAction from './ItemAction/index.vue.js';
 import PluginItemDropdown from './ItemDropdown/index.vue.js';
+import PluginMenuButton from './MenuButton/index.vue.js';
 import PluginSidebar from './Sidebar/index.vue.js';
 import PluginToolbarButton from './ToolbarButton/index.vue.js';
-import PluginViewOption from './ViewOption/index.vue.js';
-import PluginAddAction from './AddAction/index.vue.js';
-import PluginContextMenu from './ContextMenu/index.vue.js';
 import PluginTourItem from './TourItem/index.vue.js';
-import PluginDroppableEdit from './DroppableEdit/index.vue.js';
-import PluginDebugOverlay from './DebugOverlay/index.vue.js';
-export { PluginMenuButton, PluginItemAction, PluginSidebar, PluginToolbarButton, PluginViewOption, PluginItemDropdown, PluginAddAction, PluginContextMenu, PluginTourItem, PluginDroppableEdit, PluginDebugOverlay, };
+import PluginViewOption from './ViewOption/index.vue.js';
+export { PluginAddAction, PluginBlockIndicator, PluginContextMenu, PluginDebugOverlay, PluginDroppableEdit, PluginItemAction, PluginItemDropdown, PluginMenuButton, PluginSidebar, PluginToolbarButton, PluginTourItem, PluginViewOption, };

package/dist/runtime/blokkliPlugins/index.js

@@ -1,24 +1,26 @@
-import PluginMenuButton from "./MenuButton/index.vue";
+import PluginAddAction from "./AddAction/index.vue";
+import PluginBlockIndicator from "./BlockIndicator/index.vue";
+import PluginContextMenu from "./ContextMenu/index.vue";
+import PluginDebugOverlay from "./DebugOverlay/index.vue";
+import PluginDroppableEdit from "./DroppableEdit/index.vue";
 import PluginItemAction from "./ItemAction/index.vue";
 import PluginItemDropdown from "./ItemDropdown/index.vue";
+import PluginMenuButton from "./MenuButton/index.vue";
 import PluginSidebar from "./Sidebar/index.vue";
 import PluginToolbarButton from "./ToolbarButton/index.vue";
-import PluginViewOption from "./ViewOption/index.vue";
-import PluginAddAction from "./AddAction/index.vue";
-import PluginContextMenu from "./ContextMenu/index.vue";
 import PluginTourItem from "./TourItem/index.vue";
-import PluginDroppableEdit from "./DroppableEdit/index.vue";
-import PluginDebugOverlay from "./DebugOverlay/index.vue";
+import PluginViewOption from "./ViewOption/index.vue";
 export {
-  PluginMenuButton,
+  PluginAddAction,
+  PluginBlockIndicator,
+  PluginContextMenu,
+  PluginDebugOverlay,
+  PluginDroppableEdit,
   PluginItemAction,
+  PluginItemDropdown,
+  PluginMenuButton,
   PluginSidebar,
   PluginToolbarButton,
-  PluginViewOption,
-  PluginItemDropdown,
-  PluginAddAction,
-  PluginContextMenu,
   PluginTourItem,
-  PluginDroppableEdit,
-  PluginDebugOverlay
+  PluginViewOption
 };

package/dist/runtime/components/Blocks/Fragment/icon.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><title>newspaper</title><path d="M20,11H4V8H20M20,15H13V13H20M20,19H13V17H20M11,19H4V13H11M20.33,4.67L18.67,3L17,4.67L15.33,3L13.67,4.67L12,3L10.33,4.67L8.67,3L7,4.67L5.33,3L3.67,4.67L2,3V19A2,2 0 0,0 4,21H20A2,2 0 0,0 22,19V3L20.33,4.67Z" /></svg>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M20,11H4V8H20M20,15H13V13H20M20,19H13V17H20M11,19H4V13H11M20.33,4.67L18.67,3L17,4.67L15.33,3L13.67,4.67L12,3L10.33,4.67L8.67,3L7,4.67L5.33,3L3.67,4.67L2,3V19A2,2 0 0,0 4,21H20A2,2 0 0,0 22,19V3L20.33,4.67Z" /></svg>

package/dist/runtime/components/BlokkliProvider.vue

@@ -97,6 +97,7 @@ const props = defineProps({
   language: { type: String, required: false, default: "" },
   editLabel: { type: String, required: false, default: "" },
   editPath: { type: String, required: false, default: void 0 },
+  hostOptions: { type: null, required: false, default: void 0 },
   isolate: { type: Boolean, required: false }
 });
 const shouldRender = ref(false);

package/dist/runtime/components/BlokkliProvider.vue.d.ts

@@ -9,6 +9,7 @@ declare const _default: <T extends object>(__VLS_props: NonNullable<Awaited<type
         language?: string;
         editLabel?: string;
         editPath?: string;
+        hostOptions?: any;
         /**
          * When set to true, during editing, everything except the provider element will be hidden.
          */