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

package/dist/runtime/components/Edit/Features/Settings/Dialog/index.vue

@@ -26,148 +26,104 @@
   </DialogModal>
 </template>
 
-<script lang="ts" setup>
-import { useBlokkli, computed } from '#imports'
-import { DialogModal } from '#blokkli/components'
-import FeatureSetting from './FeatureSetting/index.vue'
-import type { ValidFeatureKey } from '#blokkli-build/features'
-import type { FeatureDefinitionSetting } from '#blokkli/types'
-import { SETTINGS_GROUP, type SettingsGroup } from '#blokkli/constants'
-import type { BlokkliIcon } from '#blokkli-build/icons'
-import { settingsOverride } from '#blokkli-build/config'
-
-const { $t, features, ui } = useBlokkli()
-
-const getTranslation = $t
-
-type FeatureSetting = {
-  featureId: ValidFeatureKey
-  settingsKey: string
-  setting: FeatureDefinitionSetting
-}
-
-type GroupedSettings = {
-  id: SettingsGroup
-  key: string
-  label: string
-  icon: BlokkliIcon
-  settings: FeatureSetting[]
-}
-
-const getGroupLabel = (key: SettingsGroup): string => {
-  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')
+<script setup>
+import { useBlokkli, computed } from "#imports";
+import { DialogModal } from "#blokkli/components";
+import FeatureSetting from "./FeatureSetting/index.vue";
+import { SETTINGS_GROUP } from "#blokkli/constants";
+import { settingsOverride } from "#blokkli-build/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: SettingsGroup): BlokkliIcon => {
-  if (key === 'behavior') {
-    return 'tools'
-  } else if (key === 'appearance') {
-    return 'palette'
-  } else if (key === 'advanced') {
-    return 'bug'
+  return key;
+};
+const getGroupIcon = (key) => {
+  if (key === "behavior") {
+    return "tools";
+  } else if (key === "appearance") {
+    return "palette";
+  } else if (key === "advanced") {
+    return "bug";
   }
-  return 'question'
-}
-
-const shouldRenderSetting = (
-  key: keyof typeof settingsOverride,
-  setting: FeatureDefinitionSetting,
-): boolean => {
-  // Setting is disabled in module config.
+  return "question";
+};
+const shouldRenderSetting = (key, setting) => {
   if (settingsOverride[key]?.disable) {
-    return false
+    return false;
   }
   if (setting.viewports?.length) {
-    return setting.viewports.includes(ui.appViewport.value)
+    return setting.viewports.includes(ui.appViewport.value);
   }
-  return true
-}
-
-const settingTypeOrder = ['checkbox', 'slider', 'method']
-
-const groups = computed<GroupedSettings[]>(() => {
-  const settingGroups = features.features.value.reduce<
-    Partial<Record<SettingsGroup, GroupedSettings>>
-  >((acc, feature) => {
+  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: any = `feature:${feature.id}:${settingsKey}`
+      const key = `feature:${feature.id}:${settingsKey}`;
       if (shouldRenderSetting(key, setting)) {
-        const group = setting.group || 'advanced'
+        const group = setting.group || "advanced";
         if (!acc[group]) {
           acc[group] = {
-            id: group as any,
+            id: group,
             key: group,
             label: getGroupLabel(group),
             icon: getGroupIcon(group),
-            settings: [],
-          }
+            settings: []
+          };
         }
-
         acc[group].settings.push({
-          featureId: feature.id as ValidFeatureKey,
+          featureId: feature.id,
           settingsKey,
-          setting,
-        })
+          setting
+        });
       }
-    })
-    return acc
-  }, {})
-
+    });
+    return acc;
+  }, {});
   if (features.betaFeatures.value.length) {
     if (!settingGroups.beta) {
       settingGroups.beta = {
-        id: 'beta',
-        key: 'betaFeatures',
-        label: getGroupLabel('beta'),
-        icon: 'bug',
-        settings: [],
-      }
+        id: "beta",
+        key: "betaFeatures",
+        label: getGroupLabel("beta"),
+        icon: "bug",
+        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,
+      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',
+          type: "checkbox",
           default: false,
           label,
           description,
-          group: 'beta',
-        },
-      })
-    })
+          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<{
-  (e: 'cancel'): void
-}>()
+  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/components/Edit/Features/Settings/Dialog/index.vue.d.ts

@@ -0,0 +1,6 @@
+declare const _default: 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>;
+export default _default;

package/dist/runtime/components/Edit/Features/Settings/index.vue

@@ -3,8 +3,8 @@
     id="settings"
     :title="$t('settingsMenuTitle', 'Settings')"
     :description="
-      $t('settingsMenuDescription', 'Personal settings for the editor')
-    "
+  $t('settingsMenuDescription', 'Personal settings for the editor')
+"
     secondary
     icon="cog"
     @click="onClick"
@@ -16,81 +16,69 @@
   </Teleport>
 </template>
 
-<script lang="ts" setup>
+<script setup>
 import {
   ref,
   useBlokkli,
   defineBlokkliFeature,
   watch,
   onMounted,
-  onBeforeUnmount,
-} from '#imports'
-import { PluginMenuButton } from '#blokkli/plugins'
-import SettingsDialog from './Dialog/index.vue'
-
-const { $t, storage } = useBlokkli()
-
-const LOW_PERFORMANCE_CLASS = 'bk-low-performance-mode'
-
+  onBeforeUnmount
+} from "#imports";
+import { PluginMenuButton } from "#blokkli/plugins";
+import SettingsDialog from "./Dialog/index.vue";
+const { $t } = useBlokkli();
+const LOW_PERFORMANCE_CLASS = "bk-low-performance-mode";
 const { settings } = defineBlokkliFeature({
-  id: 'settings',
-  label: 'Settings',
-  icon: 'cog',
-  description: 'Provides a menu button to display a settings dialog.',
-
+  id: "settings",
+  label: "Settings",
+  icon: "cog",
+  description: "Provides a menu button to display a settings dialog.",
   settings: {
     useAnimations: {
-      type: 'checkbox',
+      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',
+      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',
+      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',
+      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: () => {
-        storage.clearAll()
+      type: "method",
+      label: "Reset all settings",
+      method: (app) => {
+        app.storage.clearAll();
       },
-      group: 'advanced',
-    },
-  },
-})
-
-const showSettings = ref(false)
-
-const onClick = () => (showSettings.value = true)
-
+      group: "advanced"
+    }
+  }
+});
+const showSettings = ref(false);
+const onClick = () => showSettings.value = true;
 function setRootClass() {
   if (settings.value.lowPerformanceMode) {
-    document.documentElement.classList.add(LOW_PERFORMANCE_CLASS)
+    document.documentElement.classList.add(LOW_PERFORMANCE_CLASS);
   } else {
-    document.documentElement.classList.remove(LOW_PERFORMANCE_CLASS)
+    document.documentElement.classList.remove(LOW_PERFORMANCE_CLASS);
   }
 }
-
-watch(settings, setRootClass)
-
+watch(settings, setRootClass);
 onMounted(() => {
-  setRootClass()
-})
-
+  setRootClass();
+});
 onBeforeUnmount(() => {
-  document.documentElement.classList.remove(LOW_PERFORMANCE_CLASS)
-})
+  document.documentElement.classList.remove(LOW_PERFORMANCE_CLASS);
+});
 </script>
 
-<script lang="ts">
+<script>
 export default {
-  name: 'Settings',
-}
+  name: "Settings"
+};
 </script>

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

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

package/dist/runtime/components/Edit/Features/Structure/List/Field/index.vue

@@ -15,8 +15,8 @@
       >
         <div
           v-if="
-            index === 0 && showTargets && !selection.isBlockSelected(item.uuid)
-          "
+  index === 0 && showTargets && !selection.isBlockSelected(item.uuid)
+"
           :style="targetStyle"
           class="bk-structure-field-target bk-is-before"
           @pointerup.stop.capture="onMouseUp()"
@@ -31,13 +31,8 @@
         />
         <div
           v-if="
-            showTargets &&
-            (!selection.isDraggingExisting.value ||
-              !selection.isBlockSelected(item.uuid)) &&
-            (!list[index + 1] ||
-              !selection.isDraggingExisting.value ||
-              !selection.isBlockSelected(list[index + 1].uuid))
-          "
+  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)"
@@ -53,7 +48,7 @@
   </div>
 </template>
 
-<script lang="ts" setup>
+<script setup>
 import {
   ref,
   useBlokkli,
@@ -61,121 +56,90 @@ import {
   inject,
   onMounted,
   onBeforeUnmount,
-  nextTick,
-} from '#imports'
-import Item from './../Item/index.vue'
-
-const props = withDefaults(
-  defineProps<{
-    name: string
-    entityUuid: string
-    entityType: string
-    entityBundle: string
-    allowedBundles: string[]
-    cardinality: number
-    level?: number
-    visibleFieldKeys: Record<string, boolean>
-    isSelectedFromParent?: boolean
-  }>(),
-  {
-    level: 0,
-  },
-)
-
+  nextTick
+} 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, dom, eventBus } = 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?: string) {
-  const field = dom.findField(props.entityUuid, props.name)
-
+    zIndex: 50 + props.level
+  };
+});
+const { types, state, selection, dom, eventBus } = 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 = dom.findField(props.entityUuid, props.name);
   if (!field) {
-    return
+    return;
   }
-
-  eventBus.emit('dragging:drop', {
+  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]
+      fieldName: field.name
+    }
+  });
+  const uuid = selection.uuids.value[0];
   if (uuid) {
     nextTick(() => {
-      eventBus.emit('scrollIntoView', { uuid, center: true })
-    })
+      eventBus.emit("scrollIntoView", { uuid, center: true });
+    });
   }
 }
-
 function onClickFieldLabel() {
   eventBus.emit(
-    'select',
-    list.value.map((v) => v.uuid),
-  )
+    "select",
+    list.value.map((v) => v.uuid)
+  );
 }
-
-const el = ref<HTMLDivElement | null>(null)
-
-const observer = inject<IntersectionObserver>('bk_structure_observer')
-
-const isVisible = computed(() => !!props.visibleFieldKeys[key.value])
-
-const bundlesAllowed = computed(() =>
-  selection.dragItemsBundles.value.every((bundle) =>
-    props.allowedBundles.includes(bundle),
-  ),
-)
-
+const el = ref(null);
+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),
-)
-
+  () => 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,
-)
-
+  () => types.fieldConfig.forEntityTypeAndBundle(
+    props.entityType,
+    props.entityBundle
+  ).length
+);
 onMounted(() => {
   if (el.value && observer) {
-    observer.observe(el.value)
+    observer.observe(el.value);
   }
-})
-
+});
 onBeforeUnmount(() => {
   if (el.value && observer) {
-    observer.unobserve(el.value)
+    observer.unobserve(el.value);
   }
-})
-
+});
 defineOptions({
-  name: 'StructureListField',
-})
+  name: "StructureListField"
+});
 </script>

package/dist/runtime/components/Edit/Features/Structure/List/Field/index.vue.d.ts

@@ -0,0 +1,15 @@
+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 _default: 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>;
+export default _default;