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

package/dist/runtime/editor/features/settings/Dialog/FeatureSetting/index.vue

@@ -0,0 +1,126 @@
+<template>
+  <div class="bk-form-item" :class="'bk-is-' + setting.type">
+    <FormToggle
+      v-if="setting.type === 'checkbox'"
+      :label="settingLabel"
+      :description="settingDescription"
+      :model-value="
+  settingsStorage[settingsKey] ?? setting.default
+"
+      @update:model-value="toggleCheckbox"
+    />
+    <div v-else-if="setting.type === 'radios'">
+      <h3 class="bk-form-label">
+        {{ settingLabel }}
+      </h3>
+      <ul class="bk-settings-ui">
+        <li
+          v-for="[value, config] in Object.entries(setting.options)"
+          :key="value"
+        >
+          <label>
+            <input
+              :checked="settingsStorage[settingsKey] === value"
+              type="radio"
+              :value="true"
+              :name="settingsKey"
+              @change="setRadioValue(value)"
+            />
+            <Icon v-if="config.icon" :name="config.icon" />
+            <span>{{ getOptionLabel(value, config.label) }}</span>
+          </label>
+        </li>
+      </ul>
+    </div>
+    <div v-else-if="setting.type === 'method'">
+      <button class="bk-button" @click="setting.method(blokkliApp)">
+        {{ settingLabel }}
+      </button>
+    </div>
+    <div v-else-if="setting.type === 'slider'">
+      <label class="bk-input-range">
+        <span>{{ settingLabel }}: {{ settingsStorage[settingsKey] }}</span>
+        <input
+          :value="settingsStorage[settingsKey]"
+          type="range"
+          :min="setting.min"
+          :max="setting.max"
+          :step="setting.step"
+          list="tickmarks"
+          @input="setSliderValue($event)"
+        />
+        <datalist id="tickmarks">
+          <option v-for="tick in tickmarks" :key="tick" :value="tick" />
+        </datalist>
+      </label>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { Icon, FormToggle } from "#blokkli/editor/components";
+import { useBlokkli, computed } from "#imports";
+const props = defineProps({
+  featureId: { type: null, required: true },
+  settingsKey: { type: String, required: true },
+  setting: { type: Object, required: true }
+});
+const { storage, $t: textTranslation } = useBlokkli();
+const blokkliApp = useBlokkli();
+const settingLabel = computed(() => {
+  return textTranslation(
+    "feature_" + props.featureId + "_setting_" + props.settingsKey + "_label"
+  ) || props.setting.label;
+});
+const settingDescription = computed(() => {
+  const translated = textTranslation(
+    "feature_" + props.featureId + "_setting_" + props.settingsKey + "_description"
+  );
+  if (!translated && "description" in props.setting) {
+    return props.setting.description;
+  }
+  return translated;
+});
+const getOptionLabel = (key, defaultLabel) => {
+  return textTranslation(
+    "feature_" + props.featureId + "_setting_" + props.settingsKey + "_option_" + key
+  ) || defaultLabel;
+};
+const settingsStorage = storage.use(
+  `feature:${props.featureId}:settings`,
+  {},
+  true
+);
+const toggleCheckbox = () => {
+  const current = settingsStorage.value[props.settingsKey];
+  settingsStorage.value = {
+    ...settingsStorage.value,
+    [props.settingsKey]: !current
+  };
+};
+const setRadioValue = (value) => {
+  settingsStorage.value = {
+    ...settingsStorage.value,
+    [props.settingsKey]: value
+  };
+};
+const setSliderValue = (e) => {
+  if (e.target instanceof HTMLInputElement) {
+    settingsStorage.value = {
+      ...settingsStorage.value,
+      [props.settingsKey]: Number.parseFloat(e.target.value)
+    };
+  }
+};
+const tickmarks = computed(() => {
+  if (props.setting.type === "slider") {
+    const values = [];
+    for (let value = props.setting.min; value <= props.setting.max; value += props.setting.step) {
+      values.push(value);
+    }
+    values.push(props.setting.max);
+    return values;
+  }
+  return [];
+});
+</script>

package/dist/runtime/editor/features/settings/Dialog/FeatureSetting/index.vue.d.ts

@@ -0,0 +1,10 @@
+import type { ValidFeatureKey } from '#blokkli-build/features';
+import type { FeatureDefinitionSetting } from '#blokkli/editor/types/features';
+type __VLS_Props = {
+    featureId: ValidFeatureKey;
+    settingsKey: string;
+    setting: FeatureDefinitionSetting;
+};
+declare const __VLS_export: 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>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/editor/features/settings/Dialog/index.d.vue.ts

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

package/dist/runtime/editor/features/settings/Dialog/index.vue

@@ -0,0 +1,130 @@
+<template>
+  <DialogModal
+    id="settings"
+    :title="$t('settingsDialogTitle', 'Change settings')"
+    :width="900"
+    hide-buttons
+    icon="bk_mdi_settings"
+    @cancel="$emit('cancel')"
+  >
+    <div class="bk bk-settings">
+      <div v-for="group in groups" :key="group.key" class="bk-form-section">
+        <h3 class="bk-settings-group-title">
+          <span>{{ group.label }}</span>
+          <span v-if="group.id === 'beta'" class="bk-beta-indicator">BETA</span>
+        </h3>
+        <div>
+          <FeatureSettingComponent
+            v-for="setting in group.settings"
+            :key="group.key + setting.settingsKey"
+            :feature-id="setting.featureId"
+            :settings-key="setting.settingsKey"
+            :setting="setting.setting"
+          />
+        </div>
+      </div>
+    </div>
+  </DialogModal>
+</template>
+
+<script setup>
+import { useBlokkli, computed } from "#imports";
+import { DialogModal } from "#blokkli/editor/components";
+import FeatureSettingComponent from "./FeatureSetting/index.vue";
+import { SETTINGS_GROUP } from "../../../../../global/constants";
+import { settingsOverride } from "#blokkli-build/editor-config";
+const { $t, features, ui } = useBlokkli();
+const getTranslation = $t;
+const getGroupLabel = (key) => {
+  if (key === "behavior") {
+    return $t("settingsBehaviour", "Behaviour");
+  } else if (key === "appearance") {
+    return $t("settingsAppearance", "Appearance");
+  } else if (key === "advanced") {
+    return $t("settingsAdvanced", "Advanced");
+  } else if (key === "artboard") {
+    return $t("settingsArtboard", "Artboard");
+  } else if (key === "beta") {
+    return $t("settingsBeta", "New Features");
+  }
+  return key;
+};
+const getGroupIcon = (key) => {
+  if (key === "behavior") {
+    return "bk_mdi_construction";
+  } else if (key === "appearance") {
+    return "bk_mdi_palette";
+  } else if (key === "advanced") {
+    return "bk_mdi_bug_report";
+  }
+  return "bk_mdi_question_mark";
+};
+const shouldRenderSetting = (key, setting) => {
+  if (settingsOverride[key]?.disable) {
+    return false;
+  }
+  if (setting.viewports?.length) {
+    return setting.viewports.includes(ui.appViewport.value);
+  }
+  return true;
+};
+const settingTypeOrder = ["checkbox", "slider", "method"];
+const groups = computed(() => {
+  const settingGroups = features.mountedFeatures.value.reduce((acc, feature) => {
+    Object.entries(feature.settings || {}).forEach(([settingsKey, setting]) => {
+      const key = `feature:${feature.id}:${settingsKey}`;
+      if (shouldRenderSetting(key, setting)) {
+        const group = setting.group || "advanced";
+        if (!acc[group]) {
+          acc[group] = {
+            id: group,
+            key: group,
+            label: getGroupLabel(group),
+            icon: getGroupIcon(group),
+            settings: []
+          };
+        }
+        acc[group].settings.push({
+          featureId: feature.id,
+          settingsKey,
+          setting
+        });
+      }
+    });
+    return acc;
+  }, {});
+  if (features.betaFeatures.value.length) {
+    if (!settingGroups.beta) {
+      settingGroups.beta = {
+        id: "beta",
+        key: "betaFeatures",
+        label: getGroupLabel("beta"),
+        icon: "bk_mdi_bug_report",
+        settings: []
+      };
+    }
+    features.betaFeatures.value.forEach((v) => {
+      const label = getTranslation(`feature_${v.id}_label`) || v.label;
+      const description = getTranslation(`feature_${v.id}_description`) || v.description;
+      settingGroups.beta.settings.push({
+        featureId: "settings",
+        settingsKey: "beta:" + v.id,
+        setting: {
+          type: "checkbox",
+          default: false,
+          label,
+          description,
+          group: "beta"
+        }
+      });
+    });
+  }
+  return Object.values(settingGroups).map((group) => {
+    group.settings.sort((a, b) => b.settingsKey.localeCompare(a.settingsKey)).sort(
+      (a, b) => settingTypeOrder.indexOf(a.setting.type) - settingTypeOrder.indexOf(b.setting.type)
+    );
+    return group;
+  }).sort((a, b) => SETTINGS_GROUP.indexOf(a.id) - SETTINGS_GROUP.indexOf(b.id));
+});
+defineEmits(["cancel"]);
+</script>

package/dist/runtime/editor/features/settings/Dialog/index.vue.d.ts

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

package/dist/runtime/editor/features/settings/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>;

package/dist/runtime/editor/features/settings/index.vue

@@ -0,0 +1,77 @@
+<template>
+  <Teleport :to="ui.mainLayoutElement.value">
+    <BlokkliTransition name="slide-up">
+      <SettingsDialog v-if="showSettings" @cancel="onClose" />
+    </BlokkliTransition>
+  </Teleport>
+</template>
+
+<script setup>
+import { useBlokkli, defineBlokkliFeature, computed } from "#imports";
+import SettingsDialog from "./Dialog/index.vue";
+import { BlokkliTransition } from "#blokkli/editor/components";
+import { addElementClasses, defineMenuButton } from "#blokkli/editor/composables";
+const { ui, $t } = useBlokkli();
+const { settings } = defineBlokkliFeature({
+  id: "settings",
+  label: "Settings",
+  icon: "bk_mdi_settings",
+  description: "Provides a menu button to display a settings dialog.",
+  settings: {
+    useAnimations: {
+      type: "checkbox",
+      default: true,
+      label: "Use animations",
+      description: "Animates UI elements like dialogs or drawers or interactions like drag and drop or scroll changes.",
+      group: "advanced"
+    },
+    lowPerformanceMode: {
+      type: "checkbox",
+      default: false,
+      label: "Enable low performance mode",
+      description: "Reduces the animations and interactivity to a minimum for devices with low performance.",
+      group: "advanced"
+    },
+    resetAllSettings: {
+      type: "method",
+      label: "Reset all settings",
+      method: (app) => {
+        app.storage.clearAll();
+      },
+      group: "advanced"
+    }
+  }
+});
+const showSettings = computed(() => ui.currentDialog.value?.id === "settings");
+function onClick() {
+  ui.openDialog({ id: "settings", alignment: "center" });
+}
+function onClose() {
+  ui.closeDialog("settings");
+}
+const lowPerformanceMode = computed(() => settings.value.lowPerformanceMode);
+addElementClasses(
+  document.documentElement,
+  "bk-low-performance-mode",
+  lowPerformanceMode
+);
+defineMenuButton(() => {
+  return {
+    id: "settings",
+    title: $t("settingsMenuTitle", "Settings"),
+    description: $t(
+      "settingsMenuDescription",
+      "Personal settings for the editor"
+    ),
+    icon: "bk_mdi_settings",
+    secondary: true,
+    callback: onClick
+  };
+});
+</script>
+
+<script>
+export default {
+  name: "Settings"
+};
+</script>

package/dist/runtime/editor/features/settings/index.vue.d.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>;

package/dist/runtime/editor/features/structure/List/Field/index.d.vue.ts

@@ -0,0 +1,16 @@
+type __VLS_Props = {
+    name: string;
+    entityUuid: string;
+    entityType: string;
+    entityBundle: string;
+    allowedBundles: string[];
+    cardinality: number;
+    level?: number;
+    visibleFieldKeys: Record<string, boolean>;
+    isSelectedFromParent?: boolean;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    level: number;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/editor/features/structure/List/Field/index.vue

@@ -0,0 +1,145 @@
+<template>
+  <div ref="el" class="bk-structure-field" :data-structure-field-key="key">
+    <button
+      v-if="totalFieldsOfType > 1"
+      class="bk-structure-field-label"
+      @click.prevent.stop.capture="onClickFieldLabel"
+    >
+      {{ config?.label || name }}
+    </button>
+    <div class="bk-structure-field-items">
+      <div
+        v-for="(item, index) in list"
+        :key="item.uuid"
+        class="bk-structure-field-item"
+      >
+        <div
+          v-if="
+  index === 0 && showTargets && !selection.isBlockSelected(item.uuid)
+"
+          :style="targetStyle"
+          class="bk-structure-field-target bk-is-before"
+          @pointerup.stop.capture="onMouseUp(null)"
+        />
+        <Item
+          :uuid="item.uuid"
+          :bundle="item.bundle"
+          :level="level"
+          :visible-field-keys="visibleFieldKeys"
+          :is-selected-from-parent="isSelectedFromParent"
+          :is-visible="isVisible"
+        />
+        <div
+          v-if="
+  showTargets && (!selection.isDraggingExisting.value || !selection.isBlockSelected(item.uuid)) && (!list[index + 1] || !selection.isDraggingExisting.value || !selection.isBlockSelected(list[index + 1].uuid))
+"
+          :style="targetStyle"
+          class="bk-structure-field-target bk-is-after"
+          @pointerup.stop.capture="onMouseUp(item.uuid)"
+        />
+      </div>
+      <div
+        v-if="!list.length && showTargets"
+        class="bk-structure-field-target bk-is-after"
+        :style="targetStyle"
+        @pointerup.stop.capture="onMouseUp(null)"
+      />
+    </div>
+  </div>
+</template>
+
+<script setup>
+import {
+  useBlokkli,
+  computed,
+  inject,
+  onMounted,
+  onBeforeUnmount,
+  nextTick,
+  useTemplateRef
+} from "#imports";
+import Item from "./../Item/index.vue";
+const props = defineProps({
+  name: { type: String, required: true },
+  entityUuid: { type: String, required: true },
+  entityType: { type: String, required: true },
+  entityBundle: { type: String, required: true },
+  allowedBundles: { type: Array, required: true },
+  cardinality: { type: Number, required: true },
+  level: { type: Number, required: false, default: 0 },
+  visibleFieldKeys: { type: Object, required: true },
+  isSelectedFromParent: { type: Boolean, required: false }
+});
+const targetStyle = computed(() => {
+  return {
+    zIndex: 50 + props.level
+  };
+});
+const { types, state, selection, eventBus, fields } = useBlokkli();
+const mutatedField = computed(
+  () => state.getMutatedField(props.entityUuid, props.name)
+);
+const list = computed(() => mutatedField.value?.list || []);
+const key = computed(() => props.entityUuid + ":" + props.name);
+function onMouseUp(preceedingUuid) {
+  const field = fields.find(props.entityUuid, props.name);
+  if (!field) {
+    return;
+  }
+  eventBus.emit("dragging:drop", {
+    field,
+    preceedingUuid,
+    items: selection.dragItems.value,
+    host: {
+      type: field.hostEntityType,
+      uuid: field.hostEntityUuid,
+      fieldName: field.name
+    }
+  });
+  const uuid = selection.uuids.value[0];
+  if (uuid) {
+    nextTick(() => {
+      eventBus.emit("scrollIntoView", { uuid, center: true });
+    });
+  }
+}
+function onClickFieldLabel() {
+  eventBus.emit(
+    "select",
+    list.value.map((v) => v.uuid)
+  );
+}
+const el = useTemplateRef("el");
+const observer = inject("bk_structure_observer");
+const isVisible = computed(() => !!props.visibleFieldKeys[key.value]);
+const bundlesAllowed = computed(
+  () => selection.dragItemsBundles.value.every(
+    (bundle) => props.allowedBundles.includes(bundle)
+  )
+);
+const showTargets = computed(
+  () => selection.isDragging.value && isVisible.value && !props.isSelectedFromParent && (props.cardinality === -1 || list.value.length < props.cardinality) && bundlesAllowed.value
+);
+const config = computed(
+  () => types.getFieldConfig(props.entityType, props.entityBundle, props.name)
+);
+const totalFieldsOfType = computed(
+  () => types.fieldConfig.forEntityTypeAndBundle(
+    props.entityType,
+    props.entityBundle
+  ).length
+);
+onMounted(() => {
+  if (el.value && observer) {
+    observer.observe(el.value);
+  }
+});
+onBeforeUnmount(() => {
+  if (el.value && observer) {
+    observer.unobserve(el.value);
+  }
+});
+defineOptions({
+  name: "StructureListField"
+});
+</script>

package/dist/runtime/editor/features/structure/List/Field/index.vue.d.ts

@@ -0,0 +1,16 @@
+type __VLS_Props = {
+    name: string;
+    entityUuid: string;
+    entityType: string;
+    entityBundle: string;
+    allowedBundles: string[];
+    cardinality: number;
+    level?: number;
+    visibleFieldKeys: Record<string, boolean>;
+    isSelectedFromParent?: boolean;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    level: number;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/editor/features/structure/List/Item/index.d.vue.ts

@@ -0,0 +1,13 @@
+type __VLS_Props = {
+    uuid: string;
+    bundle: string;
+    level?: number;
+    visibleFieldKeys: Record<string, boolean>;
+    isVisible: boolean;
+    isSelectedFromParent?: boolean;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    level: number;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;