@blokkli/editor 2.0.0-alpha.13 → 2.0.0-alpha.14

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

@@ -1,20 +1,14 @@
 <template>
   <div class="bk-form-item" :class="'bk-is-' + setting.type">
-    <label v-if="setting.type === 'checkbox'" class="bk-checkbox-toggle">
-      <input
-        :checked="settingsStorage[settingsKey]"
-        type="checkbox"
-        class="peer"
-        @change="toggleCheckbox"
-      />
-      <div class="bk-checkbox-toggle-toggle" />
-      <div class="bk-checkbox-toggle-label">
-        <div>{{ settingLabel }}</div>
-        <div v-if="settingDescription">
-          {{ settingDescription }}
-        </div>
-      </div>
-    </label>
+    <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 }}
@@ -64,7 +58,7 @@
 </template>
 
 <script setup>
-import { Icon } from "#blokkli/components";
+import { Icon, FormToggle } from "#blokkli/components";
 import { useBlokkli, computed } from "#imports";
 const props = defineProps({
   featureId: { type: null, required: true },
@@ -94,7 +88,8 @@ const getOptionLabel = (key, defaultLabel) => {
 };
 const settingsStorage = storage.use(
   `feature:${props.featureId}:settings`,
-  {}
+  {},
+  true
 );
 const toggleCheckbox = () => {
   const current = settingsStorage.value[props.settingsKey];

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

@@ -10,25 +10,19 @@
     @click="onClick"
   />
   <Teleport to="body">
-    <transition appear name="bk-slide-up">
+    <BlokkliTransition name="slide-up">
       <SettingsDialog v-if="showSettings" @cancel="showSettings = false" />
-    </transition>
+    </BlokkliTransition>
   </Teleport>
 </template>
 
 <script setup>
-import {
-  ref,
-  useBlokkli,
-  defineBlokkliFeature,
-  watch,
-  onMounted,
-  onBeforeUnmount
-} from "#imports";
+import { ref, useBlokkli, defineBlokkliFeature, computed } from "#imports";
 import { PluginMenuButton } from "#blokkli/plugins";
 import SettingsDialog from "./Dialog/index.vue";
+import { addElementClasses } from "#blokkli/helpers/addElementClasses";
+import { BlokkliTransition } from "#blokkli/components";
 const { $t } = useBlokkli();
-const LOW_PERFORMANCE_CLASS = "bk-low-performance-mode";
 const { settings } = defineBlokkliFeature({
   id: "settings",
   label: "Settings",
@@ -61,20 +55,12 @@ const { settings } = defineBlokkliFeature({
 });
 const showSettings = ref(false);
 const onClick = () => showSettings.value = true;
-function setRootClass() {
-  if (settings.value.lowPerformanceMode) {
-    document.documentElement.classList.add(LOW_PERFORMANCE_CLASS);
-  } else {
-    document.documentElement.classList.remove(LOW_PERFORMANCE_CLASS);
-  }
-}
-watch(settings, setRootClass);
-onMounted(() => {
-  setRootClass();
-});
-onBeforeUnmount(() => {
-  document.documentElement.classList.remove(LOW_PERFORMANCE_CLASS);
-});
+const lowPerformanceMode = computed(() => settings.value.lowPerformanceMode);
+addElementClasses(
+  document.documentElement,
+  "bk-low-performance-mode",
+  lowPerformanceMode
+);
 </script>
 
 <script>

package/dist/runtime/components/Edit/Features/Theme/Color/index.vue

@@ -48,7 +48,11 @@ const initValue = computed(
 );
 const inputValue = computed({
   get() {
-    return rgbToHex(theme[props.group].value[props.shade]);
+    const v = theme[props.group]?.value[props.shade];
+    if (v) {
+      return rgbToHex(v);
+    }
+    return "#ffffff";
   },
   set(hex) {
     const rgb = hexToRgb(hex);

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

@@ -96,7 +96,8 @@ const contextGroups = [
   "teal",
   "yellow",
   "red",
-  "lime"
+  "lime",
+  "orange"
 ];
 const contextShades = ["light", "normal", "dark"];
 </script>

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

@@ -1,6 +1,6 @@
 <template>
   <Teleport to="body">
-    <Transition name="bk-touch-bar">
+    <BlokkliTransition name="touch-bar">
       <Bar
         v-if="
   selection.isMultiSelecting.value && selection.interactionMode.value === 'touch'
@@ -16,12 +16,13 @@
         danger
         @click="eventBus.emit('dragging:end')"
       />
-    </Transition>
+    </BlokkliTransition>
   </Teleport>
 </template>
 
 <script setup>
 import { useBlokkli, defineBlokkliFeature } from "#imports";
+import { BlokkliTransition } from "#blokkli/components";
 import Bar from "./Bar/index.vue";
 const { eventBus, selection, $t } = useBlokkli();
 defineBlokkliFeature({

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

@@ -0,0 +1,198 @@
+<template>
+  <div class="bk bk-transform-overlay" @keydown.stop @keyup.stop>
+    <div ref="el" class="bk-transform-overlay-dialog" @wheel="onWheel">
+      <div class="bk-transform-overlay-dialog-inner">
+        <div class="bk-transform-overlay-dialog-inner-content">
+          <header>
+            <p>{{ title }}</p>
+            <button @click.prevent="$emit('cancel')">
+              <Icon name="close" />
+            </button>
+          </header>
+          <main>
+            <div class="bk-transform-overlay-dialog-grid">
+              <div class="bk-transform-overlay-dialog-top">
+                <p v-if="lead" class="bk-lead">{{ lead }}</p>
+                <ConfigForm ref="configForm" v-model="value" :config />
+              </div>
+              <DiffViewerState
+                v-if="stateAfter"
+                :state-before
+                :state-after
+                show-select
+                :selected="selection.uuids.value"
+                :include-uuids="uuids"
+                scheme="orange"
+                @toggle="onToggleSelected"
+              />
+            </div>
+            <Loading v-if="isLocked" white />
+          </main>
+          <footer>
+            <button
+              v-if="supportsPreview"
+              class="bk-button"
+              :disabled="disabled || !hasChanged && !hasSeedInput"
+              :class="{
+  'bk-is-loading': isPreviewing
+}"
+              @click.prevent="onClickPreview"
+            >
+              {{ $t("transformDialogButtonPreview", "Preview") }}
+            </button>
+            <button
+              class="bk-button bk-is-orange"
+              :disabled
+              @click.prevent="onClickSubmit"
+            >
+              {{ $t("transformDialogButtonApply", "Apply") }}
+            </button>
+          </footer>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import {
+  useBlokkli,
+  ref,
+  watch,
+  computed,
+  useTemplateRef,
+  onMounted,
+  onBeforeUnmount
+} from "#imports";
+import { ConfigForm, DiffViewerState, Icon, Loading } from "#blokkli/components";
+const props = defineProps({
+  plugin: { type: Object, required: true },
+  uuids: { type: Array, required: false }
+});
+const { adapter, state, ui, selection, $t, eventBus } = useBlokkli();
+function onToggleSelected(uuid) {
+  let newSelection = [...selection.uuids.value];
+  if (newSelection.includes(uuid)) {
+    newSelection = newSelection.filter((v) => v !== uuid);
+  } else {
+    newSelection.push(uuid);
+  }
+  eventBus.emit("select:force", newSelection);
+}
+const configForm = useTemplateRef("configForm");
+function clone(v) {
+  return JSON.parse(JSON.stringify(v));
+}
+function mapValues(values) {
+  return Object.entries(values).map(([name, value2]) => {
+    return {
+      name,
+      value: value2
+    };
+  });
+}
+const hasSeedInput = computed(
+  () => !!props.plugin.configInputs?.find((v) => v.type === "seed")
+);
+const isLocked = ref(false);
+const hasChanged = ref(false);
+const isPreviewing = ref(false);
+const title = computed(() => props.plugin.label);
+const lead = computed(() => props.plugin.description);
+const config = computed(() => props.plugin.configInputs ?? []);
+const isHostPlugin = computed(() => !("bundles" in props.plugin));
+const supportsPreview = computed(() => {
+  if (!props.plugin.preview) {
+    return false;
+  }
+  if (isHostPlugin.value) {
+    return !!adapter.previewHostTransformPlugin;
+  }
+  return !!adapter.previewTransformPlugin;
+});
+const stateBefore = clone(state.getMappedState());
+const stateAfter = ref(null);
+const emit = defineEmits(["cancel", "submit"]);
+const value = ref(
+  (props.plugin.configInputs ?? []).reduce(
+    (acc, plugin) => {
+      acc[plugin.name] = "";
+      return acc;
+    },
+    {}
+  )
+);
+const requiredItems = computed(
+  () => config.value.filter((v) => v.required).map((v) => v.name)
+);
+const canSubmit = computed(() => {
+  return requiredItems.value.every((name) => !!value.value[name]);
+});
+const disabled = computed(() => isLocked.value || !canSubmit.value);
+watch(
+  value,
+  () => {
+    hasChanged.value = true;
+  },
+  {
+    deep: true
+  }
+);
+function onWheel(e) {
+  if (e.metaKey || e.ctrlKey) {
+    return;
+  }
+  e.stopPropagation();
+}
+async function onClickPreview() {
+  if (isLocked.value) {
+    return;
+  }
+  if (configForm.value) {
+    configForm.value.updateSeed();
+  }
+  isLocked.value = true;
+  isPreviewing.value = true;
+  ui.setTransform(title.value);
+  if (supportsPreview.value && adapter.previewTransformPlugin && "bundles" in props.plugin && props.uuids) {
+    const config2 = mapValues(value.value);
+    try {
+      const result = await adapter.previewTransformPlugin({
+        pluginId: props.plugin.id,
+        uuids: props.uuids,
+        config: config2
+      });
+      stateAfter.value = clone(adapter.mapState(result.state));
+      state.setOverrideState(stateAfter.value);
+    } catch {
+    }
+  }
+  isLocked.value = false;
+  isPreviewing.value = false;
+  ui.setTransform();
+  hasChanged.value = false;
+}
+function onClickSubmit() {
+  if (isLocked.value) {
+    return;
+  }
+  isLocked.value = true;
+  emit("submit", mapValues(value.value));
+}
+onMounted(async () => {
+  ui.hasTransformOverlayOpen.value = true;
+  selection.lockSelection("transform-dialog");
+  if (hasSeedInput.value && supportsPreview.value) {
+    const hasOnlySeedInputs = props.plugin.configInputs?.every(
+      (v) => v.type === "seed"
+    );
+    if (hasOnlySeedInputs === true) {
+      await onClickPreview();
+    }
+  }
+});
+onBeforeUnmount(() => {
+  ui.hasTransformOverlayOpen.value = false;
+  selection.unlockSelection("transform-dialog");
+});
+</script>

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

@@ -0,0 +1,13 @@
+import type { HostTransformPlugin, PluginConfigInputItem, TransformPlugin } from '#blokkli/types';
+type __VLS_Props = {
+    plugin: HostTransformPlugin | TransformPlugin;
+    uuids?: string[];
+};
+declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    cancel: () => any;
+    submit: (values: PluginConfigInputItem[]) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onCancel?: (() => any) | undefined;
+    onSubmit?: ((values: PluginConfigInputItem[]) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

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

@@ -1,34 +1,53 @@
 <template>
   <PluginItemDropdown
     id="transform"
-    :title="$t('transformTo', 'Other actions')"
+    :title="$t('transformTo', 'Actions')"
     :enabled="!!(itemBundleIds.length && possibleTransforms.length)"
-  >
-    <button
-      v-for="transform in possibleTransforms"
-      :key="transform.id"
-      @click.prevent="onTransform(transform, selection.uuids.value)"
-    >
-      <div>
-        <div>{{ transform.label }}</div>
-      </div>
-    </button>
-  </PluginItemDropdown>
+    :items="possibleTransforms"
+    icon="script"
+    weight="100"
+    @select="onSelectBlockTransformPlugin($event, selection.uuids.value)"
+  />
+
+  <PluginItemDropdown
+    v-if="hostPlugins.length"
+    id="transform-host"
+    :title="$t('transformTo', 'Actions')"
+    :enabled="selection.hasHostSelected.value"
+    :items="hostPlugins"
+    icon="script"
+    weight="100"
+    @select="onSelectHostTransformPlugin($event)"
+  />
+
+  <Teleport to="body">
+    <BlokkliTransition name="transform-overlay">
+      <TransformDialog
+        v-if="openPluginDefinition"
+        :plugin="openPluginDefinition"
+        :uuids="selectedUuids"
+        @cancel="cancelTransform"
+        @submit="onSubmitDialog"
+      />
+    </BlokkliTransition>
+  </Teleport>
 </template>
 
 <script setup>
 import {
   computed,
   watch,
+  ref,
   useBlokkli,
   defineBlokkliFeature,
   useLazyAsyncData
 } from "#imports";
 import { PluginItemDropdown } from "#blokkli/plugins";
 import { onlyUnique } from "#blokkli/helpers";
+import { BlokkliTransition } from "#blokkli/components";
 import { filterTransforms } from "#blokkli/helpers/transform";
 import defineCommands from "#blokkli/helpers/composables/defineCommands";
-import defineDropAreas from "#blokkli/helpers/composables/defineDropAreas";
+import TransformDialog from "./Dialog/index.vue";
 const { adapter } = defineBlokkliFeature({
   id: "transform",
   icon: "script",
@@ -37,7 +56,9 @@ const { adapter } = defineBlokkliFeature({
   description: "Provides integration for block transform plugins.",
   screenshot: "feature-transform.jpg"
 });
-const { types, selection, state, $t, dom, ui } = useBlokkli();
+const { types, selection, state, $t, ui } = useBlokkli();
+const openPlugin = ref(null);
+const selectedUuids = ref([]);
 const {
   data: plugins,
   execute,
@@ -46,19 +67,131 @@ const {
   () => {
     return adapter.getTransformPlugins();
   },
-  { immediate: false, default: () => [] }
+  {
+    immediate: false,
+    default: () => [],
+    transform: function(plugins2) {
+      return plugins2.map((plugin) => {
+        return {
+          ...plugin,
+          label: getPluginLabel(plugin)
+        };
+      });
+    }
+  }
+);
+const {
+  data: hostPlugins,
+  status: statusHostPlugins,
+  execute: executeHostPlugins
+} = await useLazyAsyncData(
+  () => {
+    if (adapter.getHostTransformPlugins) {
+      return adapter.getHostTransformPlugins();
+    }
+    return Promise.resolve([]);
+  },
+  {
+    immediate: !openPlugin.value,
+    default: () => [],
+    transform: function(plugins2) {
+      return plugins2.map((plugin) => {
+        return {
+          ...plugin,
+          label: getPluginLabel(plugin)
+        };
+      });
+    }
+  }
 );
+const openPluginDefinition = computed(() => {
+  if (openPlugin.value) {
+    if (openPlugin.value.type === "block") {
+      return plugins.value.find((v) => v.id === openPlugin.value?.id) ?? null;
+    } else if (openPlugin.value.type === "host") {
+      return hostPlugins.value.find((v) => v.id === openPlugin.value?.id) ?? null;
+    }
+  }
+  return null;
+});
+function getPluginLabel(plugin) {
+  if (plugin.configInputs?.length) {
+    return plugin.label + "...";
+  }
+  return plugin.label;
+}
+function cancelTransform() {
+  openPlugin.value = null;
+  selectedUuids.value = [];
+  state.clearOverrideState();
+}
 watch(selection.uuids, async () => {
   if (status.value === "idle") {
     execute();
   }
 });
-async function onTransform(plugin, uuids) {
+watch(selection.hasHostSelected, () => {
+  if (statusHostPlugins.value === "idle") {
+    executeHostPlugins();
+  }
+});
+function onSelectBlockTransformPlugin(plugin, uuids) {
+  if (plugin.configInputs?.length) {
+    openPlugin.value = {
+      type: "block",
+      id: plugin.id
+    };
+    selectedUuids.value = [...selection.uuids.value];
+    return;
+  }
+  onTransformBlock(plugin, uuids, []);
+}
+function onSelectHostTransformPlugin(plugin) {
+  if (plugin.configInputs?.length) {
+    openPlugin.value = {
+      type: "host",
+      id: plugin.id
+    };
+    return;
+  }
+  onTransformHost(plugin, []);
+}
+async function onTransformBlock(plugin, uuids, values) {
   ui.setTransform(plugin.label);
+  openPlugin.value = null;
   await state.mutateWithLoadingState(
     () => adapter.applyTransformPlugin({
       uuids,
-      pluginId: plugin.id
+      pluginId: plugin.id,
+      config: values
+    }),
+    $t(
+      "failedToTransform",
+      'The action "@name" could not be executed.'
+    ).replace("@name", plugin.label)
+  );
+  ui.setTransform();
+}
+function onSubmitDialog(values) {
+  if (!openPluginDefinition.value) {
+    return;
+  }
+  if ("bundles" in openPluginDefinition.value) {
+    onTransformBlock(openPluginDefinition.value, selection.uuids.value, values);
+  } else {
+    onTransformHost(openPluginDefinition.value, values);
+  }
+}
+async function onTransformHost(plugin, values) {
+  if (!adapter.applyHostTransformPlugin) {
+    return;
+  }
+  ui.setTransform(plugin.label);
+  openPlugin.value = null;
+  await state.mutateWithLoadingState(
+    () => adapter.applyHostTransformPlugin({
+      pluginId: plugin.id,
+      config: values
     }),
     $t(
       "failedToTransform",
@@ -81,10 +214,12 @@ const possibleTransforms = computed(
 defineCommands(
   () => possibleTransforms.value.map((transform) => ({
     id: "transform:" + transform.id,
-    label: transform.label,
+    label: getPluginLabel(transform),
     group: "selection",
     icon: "script",
-    callback: () => onTransform(transform, selection.uuids.value)
+    callback: () => {
+      onSelectBlockTransformPlugin(transform, selection.uuids.value);
+    }
   }))
 );
 const getPossibleDropTransforms = (plugins2, allBlocks, dragItems) => {
@@ -98,7 +233,7 @@ const getPossibleDropTransforms = (plugins2, allBlocks, dragItems) => {
   const possibleTransforms2 = [];
   validPlugins.forEach((plugin) => {
     notDraggedBlocks.forEach((block) => {
-      if (plugin.targetBundles.includes(block.itemBundle)) {
+      if (!plugin.targetBundles || plugin.targetBundles.includes(block.itemBundle)) {
         possibleTransforms2.push({
           plugin,
           block
@@ -108,30 +243,6 @@ const getPossibleDropTransforms = (plugins2, allBlocks, dragItems) => {
   });
   return possibleTransforms2;
 };
-defineDropAreas((dragItems) => {
-  const existing = dragItems.filter(
-    (v) => v.itemType === "existing"
-  );
-  if (!existing.length) {
-    return;
-  }
-  const uuids = existing.map((v) => v.uuid);
-  return getPossibleDropTransforms(
-    plugins.value,
-    dom.getAllBlocks(),
-    existing
-  ).map((v) => {
-    return {
-      id: `transform:${v.plugin.id}:${v.block.uuid}`,
-      label: v.plugin.label,
-      element: v.block.element(),
-      onDrop: () => {
-        const transformUuids = [v.block.uuid, ...uuids];
-        return onTransform(v.plugin, transformUuids);
-      }
-    };
-  });
-});
 </script>
 
 <script>

package/dist/runtime/components/Edit/Form/Radio/index.vue

@@ -0,0 +1,33 @@
+<template>
+  <div>
+    <div class="bk-form-label">
+      {{ label }}<span v-if="required" class="bk-required-indicator">*</span>
+    </div>
+    <div>
+      <label v-for="option in options" :key="option.value" class="bk-radio">
+        <input
+          v-model="value"
+          type="radio"
+          :value="option.value"
+          :required
+          :name="id"
+          :disabled
+        />
+        <span>{{ option.label }}</span>
+      </label>
+    </div>
+    <div v-if="description" class="bk-form-description">{{ description }}</div>
+  </div>
+</template>
+
+<script setup>
+defineProps({
+  id: { type: String, required: true },
+  label: { type: String, required: true },
+  options: { type: Array, required: true },
+  required: { type: Boolean, required: false },
+  disabled: { type: Boolean, required: false },
+  description: { type: String, required: false }
+});
+const value = defineModel({ type: String });
+</script>

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

@@ -0,0 +1,20 @@
+type __VLS_Props = {
+    id: string;
+    label: string;
+    options: {
+        value: string;
+        label: string;
+    }[];
+    required?: boolean;
+    disabled?: boolean;
+    description?: string;
+};
+type __VLS_PublicProps = __VLS_Props & {
+    modelValue?: string;
+};
+declare const _default: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: string | undefined) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: string | undefined) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;