@blokkli/editor 1.4.0-alpha.0 → 2.0.0-alpha.1

package/dist/runtime/components/Edit/Features/Options/Form/index.vue

@@ -15,8 +15,8 @@
       :uuids="uuids"
       class="bk-blokkli-item-options-item"
       :class="{
-        'bk-is-disabled': isDisabled(plugin),
-      }"
+  'bk-is-disabled': isDisabled(plugin)
+}"
       @keydown.stop
       @update="setOptionValue(plugin.property, $event)"
     />
@@ -37,8 +37,8 @@
         :uuids="uuids"
         class="bk-blokkli-item-options-item"
         :class="{
-          'bk-is-disabled': isDisabled(plugin),
-        }"
+  'bk-is-disabled': isDisabled(plugin)
+}"
         is-grouped
         @keydown.stop
         @update="setOptionValue(plugin.property, $event)"
@@ -47,45 +47,49 @@
   </div>
 </template>
 
-<script lang="ts" setup>
-import { ref, computed, useBlokkli, onBeforeUnmount, onMounted } from '#imports'
-import { globalOptions } from '#blokkli/definitions'
-import { falsy, onlyUnique } from '#blokkli/helpers'
-import OptionsFormItem from './Item.vue'
-import OptionsFormGroup from './Group.vue'
-import type {
-  BlockDefinitionInput,
-  BlockDefinitionOptionsInput,
-  FragmentDefinitionInput,
-} from '#blokkli/types'
-import type { BlockOptionDefinition } from '#blokkli/types/blokkOptions'
-import { optionValueToStorable } from '#blokkli/helpers/options'
-import { getRuntimeOptionValue } from '#blokkli/helpers/runtimeHelpers'
+<script setup>
+import { ref, computed, useBlokkli, onBeforeUnmount, onMounted } from "#imports";
+import { falsy, onlyUnique } from "#blokkli/helpers";
+import OptionsFormItem from "./Item.vue";
+import OptionsFormGroup from "./Group.vue";
+import { getRuntimeOptionValue } from "#blokkli/runtime-helpers";
 import {
   BK_HIDDEN_GLOBALLY,
-  BK_VISIBLE_LANGUAGES,
-} from '#blokkli/helpers/symbols'
-
-type OptionItem = {
-  property: string
-  option: BlockOptionDefinition
+  BK_VISIBLE_LANGUAGES
+} from "#blokkli/helpers/symbols";
+if (import.meta.hot) {
+  import.meta.hot.accept("#blokkli/runtime-helpers", () => {
+  });
 }
-
-type OptionGroup = {
-  label: string
-  options: OptionItem[]
+const activeGroup = ref("");
+function optionValueToStorable(definition, value) {
+  if (definition.type === "checkbox") {
+    if (typeof value === "string" && (value === "1" || value === "0")) {
+      return value;
+    } else if (typeof value === "boolean") {
+      return value === true ? "1" : "0";
+    }
+    return "0";
+  } else if (definition.type === "text" || definition.type === "radios" || definition.type === "datetime-local") {
+    if (typeof value === "string") {
+      return value;
+    }
+  } else if (definition.type === "checkboxes") {
+    if (Array.isArray(value)) {
+      return value.join(",");
+    } else if (typeof value === "string") {
+      return value;
+    }
+  }
+  return "";
 }
-
-const activeGroup = ref('')
-
-function onToggleGroup(label: string) {
+function onToggleGroup(label) {
   if (activeGroup.value === label) {
-    activeGroup.value = ''
+    activeGroup.value = "";
   } else {
-    activeGroup.value = label
+    activeGroup.value = label;
   }
 }
-
 const {
   adapter,
   eventBus,
@@ -95,312 +99,239 @@ const {
   dom,
   theme,
   context,
-} = useBlokkli()
-
-const props = defineProps<{
-  uuids: string[]
-  definition: BlockDefinitionInput | FragmentDefinitionInput
-}>()
-
-let pointerTimeout: null | number = null
-let mouseLeaveTimeout: null | number = null
-
+  definitions
+} = useBlokkli();
+const props = defineProps({
+  uuids: { type: Array, required: true },
+  definition: { type: null, required: true }
+});
+let pointerTimeout = null;
+let mouseLeaveTimeout = null;
 function onMouseLeave() {
-  onMouseEnter()
-  mouseLeaveTimeout = window.setTimeout(stopChangingOptions, 500)
+  onMouseEnter();
+  mouseLeaveTimeout = window.setTimeout(stopChangingOptions, 500);
 }
-
 function onMouseEnter() {
   if (mouseLeaveTimeout) {
-    window.clearTimeout(mouseLeaveTimeout)
+    window.clearTimeout(mouseLeaveTimeout);
   }
 }
-
-function onPointerUp(e: PointerEvent) {
+function onPointerUp(e) {
   if (pointerTimeout) {
-    clearTimeout(pointerTimeout)
+    clearTimeout(pointerTimeout);
   }
-  selection.isChangingOptions.value = true
-
-  if (e.pointerType === 'touch') {
+  selection.isChangingOptions.value = true;
+  if (e.pointerType === "touch") {
     pointerTimeout = window.setTimeout(() => {
-      stopChangingOptions()
-    }, 2000)
+      stopChangingOptions();
+    }, 2e3);
   }
 }
-
 function stopChangingOptions() {
   if (pointerTimeout) {
-    clearTimeout(pointerTimeout)
+    clearTimeout(pointerTimeout);
   }
   if (!selection.isChangingOptions.value) {
-    return
+    return;
   }
-
-  // Refresh the rects of the blocks because they might have changed.
   props.uuids.forEach((uuid) => {
-    dom.refreshBlockRect(uuid)
-    const block = dom.findBlock(uuid)
+    dom.refreshBlockRect(uuid);
+    const block = dom.findBlock(uuid);
     if (block) {
-      const el = dom.getDragElement(block)
+      const el = dom.getDragElement(block);
       if (el) {
-        theme.invalidateCachedStyle(el)
+        theme.invalidateCachedStyle(el);
       }
     }
-  })
-  selection.isChangingOptions.value = false
+  });
+  selection.isChangingOptions.value = false;
 }
-
 class OptionCollector {
-  options: Record<string, Record<string, string>>
-
+  options;
   constructor() {
-    this.options = {}
+    this.options = {};
   }
-
-  set(uuid: string, key: string, value: string): void {
+  set(uuid, key, value) {
     if (!this.options[uuid]) {
-      this.options[uuid] = {}
+      this.options[uuid] = {};
     }
-
-    this.options[uuid][key] = value
+    this.options[uuid][key] = value;
   }
-
-  get(uuid: string, key: string): string | undefined {
-    return this.options[uuid]?.[key]
+  get(uuid, key) {
+    return this.options[uuid]?.[key];
   }
-
   getEntries() {
-    return Object.entries(this.options)
-      .map(([uuid, options]) => {
-        return Object.entries(options).map(([key, value]) => {
-          return {
-            uuid,
-            key,
-            value,
-          }
-        })
-      })
-      .flat()
+    return Object.entries(this.options).map(([uuid, options]) => {
+      return Object.entries(options).map(([key, value]) => {
+        return {
+          uuid,
+          key,
+          value
+        };
+      });
+    }).flat();
   }
 }
-
-const original = new OptionCollector()
-const updated = new OptionCollector()
-
-const availableOptions = computed<OptionItem[]>(() => {
+const original = new OptionCollector();
+const updated = new OptionCollector();
+const availableOptions = computed(() => {
   if (!props.definition) {
-    return []
+    return [];
   }
-  const options = (props.definition.options ||
-    {}) as BlockDefinitionOptionsInput
-  const global = (
-    (props.definition.globalOptions || []) as string[]
-  ).reduce<BlockDefinitionOptionsInput>((acc, v) => {
-    const globalDefinition: BlockOptionDefinition | null =
-      (globalOptions as any)[v] || null
+  const options = props.definition.options || {};
+  const global = (props.definition.globalOptions || []).reduce((acc, v) => {
+    const globalDefinition = definitions.globalOptions.value[v] || null;
     if (globalDefinition) {
-      acc[v] = globalDefinition
+      acc[v] = globalDefinition;
     }
-    return acc
-  }, {})
-
+    return acc;
+  }, {});
   return Object.entries({ ...options, ...global }).map(([property, option]) => {
     return {
       property,
-      option,
-    }
-  })
-})
-
-function getOptionValue(
-  uuid: string,
-  key: string,
-  defaultValue: string | boolean | string[] | number,
-) {
+      option
+    };
+  });
+});
+function getOptionValue(uuid, key, defaultValue) {
   if (!uuid) {
-    return ''
+    return "";
   }
-  const blockMutatedOptions = state.mutatedOptions[uuid]
-  if (
-    blockMutatedOptions !== undefined &&
-    blockMutatedOptions[key] !== undefined
-  ) {
-    return state.mutatedOptions[uuid][key]
+  const blockMutatedOptions = state.mutatedOptions[uuid];
+  if (blockMutatedOptions !== void 0 && blockMutatedOptions[key] !== void 0) {
+    return blockMutatedOptions[key];
   }
-  return defaultValue
+  return defaultValue;
 }
-
-/**
- * The current mapped values, same as provided by defineBlokkli.
- */
 const currentValues = computed(() => {
-  return availableOptions.value.reduce<
-    Record<string, string | string[] | boolean | number>
-  >((acc, v) => {
-    // Get all current values.
-    const values = props.uuids
-      .map((uuid) => {
-        return JSON.stringify(
-          getRuntimeOptionValue(
-            v.option,
-            getOptionValue(uuid, v.property, v.option.default),
-          ),
+  return availableOptions.value.reduce((acc, v) => {
+    const values = props.uuids.map((uuid) => {
+      return JSON.stringify(
+        getRuntimeOptionValue(
+          v.option,
+          getOptionValue(uuid, v.property, v.option.default)
         )
-      })
-      .filter(onlyUnique)
+      );
+    }).filter(onlyUnique);
     if (values.length === 1) {
       acc[v.property] = getRuntimeOptionValue(
         v.option,
-        getOptionValue(props.uuids[0], v.property, v.option.default),
-      )
+        getOptionValue(props.uuids[0], v.property, v.option.default)
+      );
     } else {
-      acc[v.property] = ''
+      acc[v.property] = "";
     }
-
-    return acc
-  }, {})
-})
-
-function filterInternal(item: OptionItem) {
+    return acc;
+  }, {});
+});
+function filterInternal(item) {
   if (currentValues.value[BK_HIDDEN_GLOBALLY]) {
-    return item.property !== BK_VISIBLE_LANGUAGES
+    return item.property !== BK_VISIBLE_LANGUAGES;
   }
-
-  return true
+  return true;
 }
-
-function isInternalOption(property: string) {
-  return property === BK_VISIBLE_LANGUAGES || property === BK_HIDDEN_GLOBALLY
+function isInternalOption(property) {
+  return property === BK_VISIBLE_LANGUAGES || property === BK_HIDDEN_GLOBALLY;
 }
-
-const visibleOptions = computed<OptionItem[]>(() => {
+const visibleOptions = computed(() => {
   if (!props.definition.editor?.determineVisibleOptions) {
-    return availableOptions.value.filter(filterInternal)
+    return availableOptions.value.filter(filterInternal);
   }
-
-  const uuid = props.uuids[0]
-  const item = state.getFieldListItem(props.uuids[0])
-  const block = selection.blocks.value.find((v) => v.uuid === uuid)
+  const uuid = props.uuids[0];
+  const item = state.getFieldListItem(uuid);
+  const block = selection.blocks.value.find((v) => v.uuid === uuid);
   if (!item) {
-    return []
+    return [];
   }
-
-  const parentType =
-    block?.hostType === runtimeConfig.itemEntityType
-      ? block.parentBlockBundle
-      : undefined
-
-  const ctxProps =
-    item?.bundle === 'from_library'
-      ? (item?.props as any)?.libraryItem?.block?.props
-      : item?.props
-
-  const visibleKeys =
+  const parentType = block?.hostType === runtimeConfig.itemEntityType ? block.parentBlockBundle : void 0;
+  const ctxProps = item?.bundle === "from_library" ? item?.props?.libraryItem?.block?.props : item?.props;
+  const visibleKeys = (
     // We have to cast to any here because the types are guaranteed to be correct.
-    props.definition.editor!.determineVisibleOptions({
-      options: currentValues.value as any,
-      parentType: parentType as any,
-      props: ctxProps as any,
+    props.definition.editor.determineVisibleOptions({
+      options: currentValues.value,
+      parentType,
+      props: ctxProps,
       entity: context.value,
-      fieldListType: block?.hostFieldListType || 'default',
+      fieldListType: block?.hostFieldListType || "default"
     })
-
-  return availableOptions.value
-    .filter(
-      (v) => isInternalOption(v.property) || visibleKeys.includes(v.property),
-    )
-    .filter(filterInternal)
-})
-
-function isDisabled(plugin: OptionItem) {
-  if (!state.canEdit.value || state.editMode.value === 'readonly') {
-    return true
+  );
+  return availableOptions.value.filter(
+    (v) => isInternalOption(v.property) || visibleKeys.includes(v.property)
+  ).filter(filterInternal);
+});
+function isDisabled(plugin) {
+  if (!state.canEdit.value || state.editMode.value === "readonly") {
+    return true;
   }
-
   if (isInternalOption(plugin.property)) {
-    return false
+    return false;
   }
-
-  return state.editMode.value !== 'editing'
+  return state.editMode.value !== "editing";
 }
-
-const singleVisibleOptions = computed(() =>
-  visibleOptions.value.filter((v) => !v.option.group),
-)
-
-const optionGroups = computed<OptionGroup[]>(() => {
+const singleVisibleOptions = computed(
+  () => visibleOptions.value.filter((v) => !v.option.group)
+);
+const optionGroups = computed(() => {
   return Object.values(
-    visibleOptions.value.reduce<Record<string, OptionGroup>>((acc, option) => {
+    visibleOptions.value.reduce((acc, option) => {
       if (option.option.group) {
         if (!acc[option.option.group]) {
           acc[option.option.group] = {
             label: option.option.group,
-            options: [],
-          }
+            options: [option]
+          };
+        } else {
+          acc[option.option.group].options.push(option);
         }
-
-        acc[option.option.group].options.push(option)
       }
-      return acc
-    }, {}),
-  )
-})
-
-function setOptionValue(key: string, value: string) {
+      return acc;
+    }, {})
+  );
+});
+function setOptionValue(key, value) {
   props.uuids.forEach((uuid) => {
-    updated.set(uuid, key, value)
-
+    updated.set(uuid, key, value);
     if (!state.mutatedOptions[uuid]) {
-      state.mutatedOptions[uuid] = {}
+      state.mutatedOptions[uuid] = {};
     }
-    state.mutatedOptions[uuid][key] = value
-    eventBus.emit('option:update', { uuid, key, value })
-  })
+    state.mutatedOptions[uuid][key] = value;
+    eventBus.emit("option:update", { uuid, key, value });
+  });
 }
-
 onMounted(() => {
   props.uuids.forEach((uuid) => {
     availableOptions.value.forEach((option) => {
       const currentValue = getOptionValue(
         uuid,
         option.property,
-        option.option.default,
-      )
+        option.option.default
+      );
       original.set(
         uuid,
         option.property,
-        optionValueToStorable(option.option, currentValue),
-      )
-    })
-  })
-})
-
+        optionValueToStorable(option.option, currentValue)
+      );
+    });
+  });
+});
 onBeforeUnmount(() => {
-  selection.isChangingOptions.value = false
-  const values = updated
-    .getEntries()
-    .map((entry) => {
-      // Check if the original value is the same as the updated value.
-      // If yes, we can skip updating it, since it's the same.
-      const originalValue = original.get(entry.uuid, entry.key)
-      if (originalValue === entry.value) {
-        return
-      }
-      return entry
-    })
-    .filter(falsy)
-
+  selection.isChangingOptions.value = false;
+  const values = updated.getEntries().map((entry) => {
+    const originalValue = original.get(entry.uuid, entry.key);
+    if (originalValue === entry.value) {
+      return;
+    }
+    return entry;
+  }).filter(falsy);
   if (!values.length) {
-    return
+    return;
   }
-
-  state.mutateWithLoadingState(() => adapter.updateOptions!(values))
-})
+  state.mutateWithLoadingState(() => adapter.updateOptions(values));
+});
 </script>
 
-<script lang="ts">
+<script>
 export default {
-  name: 'OptionsForm',
-}
+  name: "OptionsForm"
+};
 </script>

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

@@ -0,0 +1,9 @@
+import type { BlockDefinitionInput, FragmentDefinitionInput } from '#blokkli/types';
+declare const _default: import("vue").DefineComponent<{
+    uuids: string[];
+    definition: BlockDefinitionInput | FragmentDefinitionInput;
+}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{
+    uuids: string[];
+    definition: BlockDefinitionInput | FragmentDefinitionInput;
+}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;