@blokkli/editor 2.0.0-alpha.51 → 2.0.0-alpha.52

package/dist/module.json

@@ -1,7 +1,7 @@
 {
   "name": "@blokkli/editor",
   "configKey": "blokkli",
-  "version": "2.0.0-alpha.51",
+  "version": "2.0.0-alpha.52",
   "compatibility": {
     "nuxt": ">=3.15.0"
   },

package/dist/module.mjs

@@ -18,7 +18,7 @@ import 'typescript';
 import 'oxc-walker';
 
 const name = "@blokkli/editor";
-const version = "2.0.0-alpha.51";
+const version = "2.0.0-alpha.52";
 
 function validateOption(optionKey, option, icons) {
   const errors = [];

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

@@ -2,7 +2,7 @@ type __VLS_Props = {
     /**
      * The (machine) name of the field that is editable.
      */
-    name: string;
+    name?: string | null;
     /**
      * The text value.
      */
@@ -20,6 +20,7 @@ type __VLS_Slots = {
     }): any;
 };
 declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    name: string | null;
     value: string;
     tag: string;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

package/dist/runtime/components/BlokkliEditable.vue

@@ -2,7 +2,7 @@
   <component
     :is="tag"
     ref="root"
-    :data-blokkli-editable-field="isEditing ? name : void 0"
+    :data-blokkli-editable-field="isEditingBuild ? name : void 0"
   >
     <slot :value="renderedValue" />
   </component>
@@ -15,7 +15,8 @@ import {
   inject,
   onMounted,
   onBeforeUnmount,
-  useTemplateRef
+  useTemplateRef,
+  watch
 } from "#imports";
 import {
   INJECT_APP,
@@ -25,62 +26,77 @@ import {
   INJECT_IS_IN_REUSABLE
 } from "#blokkli/helpers/injections";
 const props = defineProps({
-  name: { type: String, required: true },
+  name: { type: [String, null], required: false, default: null },
   value: { type: String, required: false, default: "" },
   tag: { type: String, required: false, default: "div" }
 });
 defineSlots();
+const isEditingBuild = import.meta.blokkliEditing;
 const root = useTemplateRef("root");
 const valueOverride = ref("");
-const isEditing = inject(INJECT_IS_EDITING, false);
-const entity = inject(INJECT_ENTITY_CONTEXT, null);
-const editContext = inject(INJECT_EDIT_CONTEXT, null);
-const app = inject(INJECT_APP, null);
-const isInReusable = inject(INJECT_IS_IN_REUSABLE, false);
-if (!entity) {
-  throw new Error("Missing entity context.");
-}
-function getValueCallback() {
-  return props.value;
-}
 const renderedValue = computed(() => valueOverride.value || props.value || "");
-const onEditableUpdateValue = (e) => {
-  if (e.name === props.name && e.entityUuid === entity.uuid) {
-    valueOverride.value = e.value;
-  }
-};
-function onStateReloaded() {
-  valueOverride.value = "";
-}
-onMounted(() => {
-  if (!isEditing || !editContext || !app || isInReusable) {
-    return;
-  }
-  editContext.eventBus.on("editable:update", onEditableUpdateValue);
-  editContext.eventBus.on("state:reloaded", onStateReloaded);
-  if (root.value instanceof HTMLElement && entity) {
+if (isEditingBuild) {
+  let getValueCallback = function() {
+    return props.value;
+  }, onStateReloaded = function() {
+    valueOverride.value = "";
+  }, registerDirective = function(name) {
+    if (!name || !app || !(root.value instanceof HTMLElement) || !entity) {
+      return;
+    }
     app.directive.registerDirectiveElement(
       root.value,
-      props.name,
+      name,
       entity,
       "editable",
       true,
       getValueCallback
     );
-  }
-});
-onBeforeUnmount(() => {
-  if (editContext) {
-    editContext.eventBus.off("editable:update", onEditableUpdateValue);
-    editContext.eventBus.off("state:reloaded", onStateReloaded);
-  }
-  if (app && root.value instanceof HTMLElement && entity) {
+  }, unregisterDirective = function(name) {
+    if (!name || !app || !(root.value instanceof HTMLElement) || !entity) {
+      return;
+    }
     app.directive.unregisterDirectiveElement(
       root.value,
-      props.name,
+      name,
       entity,
       "editable"
     );
-  }
-});
+  };
+  const isEditing = inject(INJECT_IS_EDITING, false);
+  const entity = inject(INJECT_ENTITY_CONTEXT, null);
+  const editContext = inject(INJECT_EDIT_CONTEXT, null);
+  const app = inject(INJECT_APP, null);
+  const isInReusable = inject(INJECT_IS_IN_REUSABLE, false);
+  const onEditableUpdateValue = (e) => {
+    if (e.name === props.name && e.entityUuid === entity?.uuid) {
+      valueOverride.value = e.value;
+    }
+  };
+  onMounted(() => {
+    if (!isEditing || !editContext || !app || isInReusable) {
+      return;
+    }
+    editContext.eventBus.on("editable:update", onEditableUpdateValue);
+    editContext.eventBus.on("state:reloaded", onStateReloaded);
+    registerDirective(props.name);
+  });
+  watch(
+    () => props.name,
+    (newName, oldName) => {
+      if (!isEditing || !app || !entity || isInReusable) {
+        return;
+      }
+      unregisterDirective(oldName);
+      registerDirective(newName);
+    }
+  );
+  onBeforeUnmount(() => {
+    if (editContext) {
+      editContext.eventBus.off("editable:update", onEditableUpdateValue);
+      editContext.eventBus.off("state:reloaded", onStateReloaded);
+    }
+    unregisterDirective(props.name);
+  });
+}
 </script>

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

@@ -2,7 +2,7 @@ type __VLS_Props = {
     /**
      * The (machine) name of the field that is editable.
      */
-    name: string;
+    name?: string | null;
     /**
      * The text value.
      */
@@ -20,6 +20,7 @@ type __VLS_Slots = {
     }): any;
 };
 declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    name: string | null;
     value: string;
     tag: string;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

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

@@ -22,10 +22,10 @@ declare const __VLS_export: import("vue").DefineComponent<{
     parentType?: string;
     isEditing?: boolean;
 }> & Readonly<{}>, {
-    isEditing: boolean;
     props: any;
     parentType: string;
     options: any;
     editContext: BlockEditContext;
     index: number;
+    isEditing: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

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

@@ -22,10 +22,10 @@ declare const __VLS_export: import("vue").DefineComponent<{
     parentType?: string;
     isEditing?: boolean;
 }> & Readonly<{}>, {
-    isEditing: boolean;
     props: any;
     parentType: string;
     options: any;
     editContext: BlockEditContext;
     index: number;
+    isEditing: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blokkli/editor",
-  "version": "2.0.0-alpha.51",
+  "version": "2.0.0-alpha.52",
   "description": "Interactive page building experience for Nuxt",
   "keywords": [
     "cms",