@blokkli/editor 2.0.0-alpha.28 → 2.0.0-alpha.29

package/dist/runtime/editor/features/options/Form/Radios/index.vue

@@ -0,0 +1,129 @@
+<template>
+  <div
+    class="bk-blokkli-item-options-radios"
+    :class="{
+  'bk-is-color': displayAs === 'colors',
+  'bk-is-grid': displayAs === 'grid',
+  'bk-is-icons': displayAs === 'icons'
+}"
+    @mouseleave="onMouseLeave"
+  >
+    <label
+      v-for="option in mappedOptions"
+      :key="option.key"
+      @mouseenter="active = option.label"
+    >
+      <div v-bind="getInputWrapperAttributes(option.value)">
+        <input
+          :id="option.key"
+          type="radio"
+          :name="property"
+          :value="option.key"
+          :checked="modelValue === option.key"
+          @change="value = option.key"
+        />
+        <div
+          v-if="
+  displayAs === 'icons' && typeof option.value === 'object' && option.value.icon
+"
+          class="bk-blokkli-item-options-radios-icon"
+        >
+          <Icon :name="option.value.icon" />
+        </div>
+
+        <div
+          v-else-if="typeof option.value === 'object' && option.value.columns"
+          class="bk-blokkli-item-options-radios-flex"
+        >
+          <div
+            v-for="(v, i) in option.value.columns"
+            :key="i"
+            :style="{ flex: v }"
+          />
+        </div>
+        <span
+          v-else-if="
+  typeof option.value === 'string' || typeof option.value === 'object' && displayAs === 'colors'
+"
+        >
+          {{
+            typeof option.value === "string" ? option.value : option.value.label
+          }}
+        </span>
+      </div>
+    </label>
+  </div>
+</template>
+
+<script setup>
+import { computed, useBlokkli, onMounted } from "#imports";
+import { Icon } from "#blokkli/editor/components";
+import { defineCommands } from "#blokkli/editor/composables";
+const { $t, state } = useBlokkli();
+const props = defineProps({
+  label: { type: String, required: true },
+  property: { type: String, required: true },
+  displayAs: { type: String, required: false },
+  options: { type: Object, required: true }
+});
+const value = defineModel({ type: String, ...{
+  default: ""
+} });
+const active = defineModel("hovered", { type: String, ...{
+  default: ""
+} });
+function getInputWrapperAttributes(value2) {
+  if (props.displayAs === "colors" && typeof value2 !== "string") {
+    if (value2.hex && value2.hex.indexOf("#") === 0) {
+      return {
+        style: "background-color: " + value2.hex
+      };
+    } else if (value2.class) {
+      return {
+        class: value2.class
+      };
+    }
+  }
+  return {};
+}
+const mappedOptions = computed(() => {
+  return Object.entries(props.options).map(([key, value2]) => {
+    const label = typeof value2 === "string" ? value2 : value2.label;
+    return { key, value: value2, label };
+  });
+});
+const selectedLabel = computed(() => {
+  return mappedOptions.value.find((v) => v.key === value.value)?.label;
+});
+function onMouseLeave() {
+  active.value = selectedLabel.value ?? "";
+}
+defineCommands(() => {
+  if (state.editMode.value !== "editing") {
+    return;
+  }
+  return mappedOptions.value.filter((v) => v.key !== value.value).map((option) => {
+    return {
+      id: "options:" + props.property + option.key,
+      label: $t(
+        "optionsCommand.setOption",
+        'Set option "@option" to "@value"'
+      ).replace("@option", props.label).replace("@value", option.key),
+      group: "selection",
+      icon: "bk_mdi_radio_button_checked",
+      callback: () => {
+        value.value = option.key;
+      }
+    };
+  });
+});
+onMounted(() => {
+  active.value = selectedLabel.value ?? "";
+});
+</script>
+
+<script>
+export default {
+  name: "OptionsFormRadios"
+};
+</script>

package/dist/runtime/editor/features/options/Form/Radios/index.vue.d.ts

@@ -0,0 +1,37 @@
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: import("vue").DefineComponent<{
+    label: string;
+    property: string;
+    displayAs?: "radios" | "colors" | "grid" | "icons";
+    options: Record<string, string | {
+        hex?: string;
+        class?: string;
+        columns?: number[];
+        icon?: string;
+        label: string;
+    }>;
+} & {
+    modelValue?: string;
+    hovered?: string;
+}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: string) => any;
+    "update:hovered": (value: string) => any;
+}, string, import("vue").PublicProps, Readonly<{
+    label: string;
+    property: string;
+    displayAs?: "radios" | "colors" | "grid" | "icons";
+    options: Record<string, string | {
+        hex?: string;
+        class?: string;
+        columns?: number[];
+        icon?: string;
+        label: string;
+    }>;
+} & {
+    modelValue?: string;
+    hovered?: string;
+}> & Readonly<{
+    "onUpdate:modelValue"?: ((value: string) => any) | undefined;
+    "onUpdate:hovered"?: ((value: string) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

package/dist/runtime/editor/features/options/Form/Range/index.d.vue.ts

@@ -0,0 +1,19 @@
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: import("vue").DefineComponent<{
+    label: string;
+    modelValue?: string;
+    min: number;
+    max: number;
+    step: number;
+}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (...args: any[]) => void;
+}, string, import("vue").PublicProps, Readonly<{
+    label: string;
+    modelValue?: string;
+    min: number;
+    max: number;
+    step: number;
+}> & Readonly<{
+    "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

package/dist/runtime/editor/features/options/Form/Range/index.vue.d.ts

@@ -0,0 +1,19 @@
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: import("vue").DefineComponent<{
+    label: string;
+    modelValue?: string;
+    min: number;
+    max: number;
+    step: number;
+}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (...args: any[]) => void;
+}, string, import("vue").PublicProps, Readonly<{
+    label: string;
+    modelValue?: string;
+    min: number;
+    max: number;
+    step: number;
+}> & Readonly<{
+    "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

package/dist/runtime/editor/features/options/Form/Text/index.d.vue.ts

@@ -0,0 +1,18 @@
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: import("vue").DefineComponent<{
+    label: string;
+    modelValue?: string;
+    type?: string;
+}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (...args: any[]) => void;
+}, string, import("vue").PublicProps, Readonly<{
+    label: string;
+    modelValue?: string;
+    type?: string;
+}> & Readonly<{
+    "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
+}>, {
+    type: string;
+    modelValue: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

package/dist/runtime/editor/features/options/Form/Text/index.vue.d.ts

@@ -0,0 +1,18 @@
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: import("vue").DefineComponent<{
+    label: string;
+    modelValue?: string;
+    type?: string;
+}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (...args: any[]) => void;
+}, string, import("vue").PublicProps, Readonly<{
+    label: string;
+    modelValue?: string;
+    type?: string;
+}> & Readonly<{
+    "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
+}>, {
+    type: string;
+    modelValue: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

package/dist/runtime/editor/features/options/Form/index.d.vue.ts

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

package/dist/runtime/editor/features/options/Form/index.vue

@@ -0,0 +1,382 @@
+<template>
+  <div
+    v-if="availableOptions.length"
+    class="bk-blokkli-item-options"
+    @pointerup="onPointerUp"
+    @mouseleave="onMouseLeave"
+    @mouseenter="onMouseEnter"
+  >
+    <OptionsFormItem
+      v-for="plugin in singleVisibleOptions"
+      :key="plugin.property"
+      :option="plugin.option"
+      :property="plugin.property"
+      :mutated-value="currentValues[plugin.property]"
+      class="bk-blokkli-item-options-item"
+      :class="{
+  'bk-is-disabled': isDisabled(plugin)
+}"
+      @keydown.stop
+      @update="setOptionValue(plugin.property, $event)"
+    />
+
+    <OptionsFormGroup
+      v-for="group in optionGroups"
+      :key="'group_' + group.label"
+      :label="group.label"
+      :is-active="group.label === activeGroup"
+      @toggle="onToggleGroup(group.label)"
+    >
+      <OptionsFormItem
+        v-for="plugin in group.options"
+        :key="plugin.property"
+        :option="plugin.option"
+        :property="plugin.property"
+        :mutated-value="currentValues[plugin.property]"
+        class="bk-blokkli-item-options-item"
+        :class="{
+  'bk-is-disabled': isDisabled(plugin)
+}"
+        is-grouped
+        @keydown.stop
+        @update="setOptionValue(plugin.property, $event)"
+      />
+    </OptionsFormGroup>
+  </div>
+</template>
+
+<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 "./../../../../../global/constants";
+import { fromLibraryBlockBundle, itemEntityType } from "#blokkli-build/config";
+if (import.meta.hot) {
+  import.meta.hot.accept("#blokkli/runtime-helpers", () => {
+  });
+}
+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 "";
+}
+function onToggleGroup(label) {
+  if (activeGroup.value === label) {
+    activeGroup.value = "";
+  } else {
+    activeGroup.value = label;
+  }
+}
+const {
+  adapter,
+  eventBus,
+  state,
+  selection,
+  dom,
+  theme,
+  context,
+  definitions,
+  blocks
+} = useBlokkli();
+const props = defineProps({
+  uuids: { type: [Array, String], required: true },
+  definition: { type: null, required: true }
+});
+let pointerTimeout = null;
+let mouseLeaveTimeout = null;
+function onMouseLeave() {
+  onMouseEnter();
+  mouseLeaveTimeout = window.setTimeout(stopChangingOptions, 500);
+}
+function onMouseEnter() {
+  if (mouseLeaveTimeout) {
+    window.clearTimeout(mouseLeaveTimeout);
+  }
+}
+function onPointerUp(e) {
+  if (pointerTimeout) {
+    clearTimeout(pointerTimeout);
+  }
+  selection.isChangingOptions.value = true;
+  if (e.pointerType === "touch") {
+    pointerTimeout = window.setTimeout(() => {
+      stopChangingOptions();
+    }, 2e3);
+  }
+}
+function stopChangingOptions() {
+  if (pointerTimeout) {
+    clearTimeout(pointerTimeout);
+  }
+  if (!selection.isChangingOptions.value) {
+    return;
+  }
+  if (Array.isArray(props.uuids)) {
+    props.uuids.forEach((uuid) => {
+      dom.refreshBlockRect(uuid);
+      const block = blocks.getBlock(uuid);
+      if (block) {
+        const el = dom.getDragElement(block);
+        if (el) {
+          theme.invalidateCachedStyle(el);
+        }
+      }
+    });
+  }
+  selection.isChangingOptions.value = false;
+  eventBus.emit("option:finish-change");
+}
+class OptionCollector {
+  options;
+  constructor() {
+    this.options = {};
+  }
+  set(uuid, key, value) {
+    if (!this.options[uuid]) {
+      this.options[uuid] = {};
+    }
+    this.options[uuid][key] = value;
+  }
+  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();
+  }
+}
+const original = new OptionCollector();
+const updated = new OptionCollector();
+const availableOptions = computed(() => {
+  if (!props.definition) {
+    return [];
+  }
+  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;
+    }
+    return acc;
+  }, {});
+  return Object.entries({ ...options, ...global }).map(([property, option]) => {
+    return {
+      property,
+      option
+    };
+  });
+});
+function getOptionValue(uuid, key, defaultValue) {
+  if (!uuid) {
+    return "";
+  }
+  const blockMutatedOptions = state.mutatedOptions[uuid];
+  if (blockMutatedOptions !== void 0 && blockMutatedOptions[key] !== void 0) {
+    return blockMutatedOptions[key];
+  }
+  return defaultValue;
+}
+const currentValues = computed(() => {
+  return availableOptions.value.reduce((acc, v) => {
+    if (Array.isArray(props.uuids)) {
+      const values = props.uuids.map((uuid) => {
+        return JSON.stringify(
+          getRuntimeOptionValue(
+            v.option,
+            getOptionValue(uuid, v.property, v.option.default)
+          )
+        );
+      }).filter(onlyUnique);
+      if (values.length === 1) {
+        acc[v.property] = getRuntimeOptionValue(
+          v.option,
+          getOptionValue(props.uuids[0], v.property, v.option.default)
+        );
+      } else {
+        acc[v.property] = "";
+      }
+    } else {
+      acc[v.property] = getRuntimeOptionValue(
+        v.option,
+        getOptionValue("HOST", v.property, v.option.default)
+      );
+    }
+    return acc;
+  }, {});
+});
+function filterInternal(item) {
+  if (currentValues.value[BK_HIDDEN_GLOBALLY]) {
+    return item.property !== BK_VISIBLE_LANGUAGES;
+  }
+  return true;
+}
+function isInternalOption(property) {
+  return property === BK_VISIBLE_LANGUAGES || property === BK_HIDDEN_GLOBALLY;
+}
+const visibleOptions = computed(() => {
+  if (!("editor" in props.definition) || !props.definition.editor?.determineVisibleOptions) {
+    return availableOptions.value.filter(filterInternal);
+  }
+  const uuid = props.uuids[0];
+  const item = state.getFieldListItem(uuid);
+  const block = selection.items.value.find((v) => v.uuid === uuid);
+  if (!item) {
+    return [];
+  }
+  const parentType = block?.host.type === itemEntityType ? block.parentBlockBundle : void 0;
+  const ctxProps = item?.bundle === fromLibraryBlockBundle ? 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,
+      parentType,
+      props: ctxProps,
+      entity: context.value,
+      fieldListType: block?.fieldListType ?? "default"
+    })
+  );
+  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 state.editMode.value !== "editing";
+}
+const singleVisibleOptions = computed(
+  () => visibleOptions.value.filter((v) => !v.option.group)
+);
+const optionGroups = computed(() => {
+  return Object.values(
+    visibleOptions.value.reduce((acc, option) => {
+      if (option.option.group) {
+        if (!acc[option.option.group]) {
+          acc[option.option.group] = {
+            label: option.option.group,
+            options: [option]
+          };
+        } else {
+          acc[option.option.group].options.push(option);
+        }
+      }
+      return acc;
+    }, {})
+  );
+});
+function setOptionValue(key, value) {
+  if (Array.isArray(props.uuids)) {
+    props.uuids.forEach((uuid) => {
+      updated.set(uuid, key, value);
+      if (!state.mutatedOptions[uuid]) {
+        state.mutatedOptions[uuid] = {};
+      }
+      state.mutatedOptions[uuid][key] = value;
+      eventBus.emit("option:update", { uuid, key, value });
+    });
+  } else {
+    updated.set("HOST", key, value);
+    if (!state.mutatedOptions.HOST) {
+      state.mutatedOptions.HOST = {};
+    }
+    state.mutatedOptions.HOST[key] = value;
+  }
+}
+onMounted(() => {
+  if (Array.isArray(props.uuids)) {
+    props.uuids.forEach((uuid) => {
+      availableOptions.value.forEach((option) => {
+        const currentValue = getOptionValue(
+          uuid,
+          option.property,
+          option.option.default
+        );
+        original.set(
+          uuid,
+          option.property,
+          optionValueToStorable(option.option, currentValue)
+        );
+      });
+    });
+  } else {
+    availableOptions.value.forEach((option) => {
+      const currentValue = getOptionValue(
+        "HOST",
+        option.property,
+        option.option.default
+      );
+      original.set(
+        "HOST",
+        option.property,
+        optionValueToStorable(option.option, currentValue)
+      );
+    });
+  }
+});
+onBeforeUnmount(() => {
+  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;
+  }
+  if (Array.isArray(props.uuids)) {
+    state.mutateWithLoadingState(() => adapter.updateOptions(values));
+  } else {
+    state.mutateWithLoadingState(
+      () => adapter.updateHostOptions(
+        values.map((v) => {
+          return {
+            ...v,
+            uuid: void 0
+          };
+        })
+      )
+    );
+  }
+});
+</script>
+
+<script>
+export default {
+  name: "OptionsForm"
+};
+</script>

package/dist/runtime/editor/features/options/Form/index.vue.d.ts

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

package/dist/runtime/editor/features/options/index.d.vue.ts

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