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

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;

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

@@ -0,0 +1,37 @@
+<template>
+  <div>
+    <div class="bk-form-label">
+      {{ label }}<span v-if="required" class="bk-required-indicator">*</span>
+    </div>
+    <div
+      class="bk-radio-tabs"
+      :class="scheme ? 'bk-scheme-' + scheme : void 0"
+    >
+      <label v-for="option in options" :key="option.value">
+        <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 },
+  scheme: { type: String, required: false }
+});
+const value = defineModel({ type: String });
+</script>

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

@@ -0,0 +1,22 @@
+import type { ThemeColorName } from '#blokkli/types/theme';
+type __VLS_Props = {
+    id: string;
+    label: string;
+    options: {
+        value: string;
+        label: string;
+    }[];
+    required?: boolean;
+    disabled?: boolean;
+    description?: string;
+    scheme?: ThemeColorName;
+};
+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;

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

@@ -0,0 +1,29 @@
+<template>
+  <div>
+    <label class="bk-form-label" :for="id">
+      {{ label }}<span v-if="required" class="bk-required-indicator">*</span>
+    </label>
+    <select :id v-model="value" class="bk-form-input" :required :disabled>
+      <option
+        v-for="option in options"
+        :key="option.value"
+        :value="option.value"
+      >
+        {{ option.label }}
+      </option>
+    </select>
+    <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/Select/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;

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

@@ -0,0 +1,33 @@
+<template>
+  <div>
+    <label class="bk-form-label" :for="id">
+      {{ label }}<span v-if="required" class="bk-required-indicator">*</span>
+    </label>
+    <input
+      :id
+      v-model.lazy="value"
+      type="text"
+      class="bk-form-input"
+      :placeholder
+      :required
+      :disabled
+      :minlength
+      :maxlength
+    />
+    <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 },
+  description: { type: String, required: false },
+  placeholder: { type: String, required: false },
+  required: { type: Boolean, required: false },
+  disabled: { type: Boolean, required: false },
+  minlength: { type: [String, Number], required: false },
+  maxlength: { type: [String, Number], required: false }
+});
+const value = defineModel({ type: String });
+</script>

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

@@ -0,0 +1,19 @@
+type __VLS_Props = {
+    id: string;
+    label: string;
+    description?: string;
+    placeholder?: string;
+    required?: boolean;
+    disabled?: boolean;
+    minlength?: string | number;
+    maxlength?: string | number;
+};
+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;

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

@@ -1,15 +1,18 @@
 <template>
   <div>
-    <label class="bk-form-label">
-      {{ label }}
+    <label class="bk-form-label" :for="id">
+      {{ label }}<span v-if="required" class="bk-required-indicator">*</span>
     </label>
     <textarea
-      v-model="value"
+      :id
+      v-model.lazy="value"
       class="bk-form-input"
-      :placeholder="placeholder"
+      :placeholder
       :required
       :disabled
-      rows="5"
+      :rows="rows ?? 5"
+      :minlength
+      :maxlength
     />
     <div v-if="description" class="bk-form-description">{{ description }}</div>
   </div>
@@ -17,11 +20,15 @@
 
 <script setup>
 defineProps({
+  id: { type: String, required: true },
   label: { type: String, required: true },
   description: { type: String, required: false },
   placeholder: { type: String, required: false },
   required: { type: Boolean, required: false },
-  disabled: { type: Boolean, required: false }
+  disabled: { type: Boolean, required: false },
+  minlength: { type: [String, Number], required: false },
+  maxlength: { type: [String, Number], required: false },
+  rows: { type: [String, Number], required: false }
 });
 const value = defineModel({ type: String });
 </script>

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

@@ -1,9 +1,13 @@
 type __VLS_Props = {
+    id: string;
     label: string;
     description?: string;
     placeholder?: string;
     required?: boolean;
     disabled?: boolean;
+    minlength?: string | number;
+    maxlength?: string | number;
+    rows?: string | number;
 };
 type __VLS_PublicProps = __VLS_Props & {
     modelValue?: string;

package/dist/runtime/components/Edit/FormOverlay/index.vue

@@ -1,6 +1,6 @@
 <template>
   <div
-    class="bk-form-overlay"
+    class="bk-form-overlay bk-vars"
     @click.stop
     @mousedown.stop
     @keyup.stop

package/dist/runtime/components/Edit/Indicators/index.vue

@@ -0,0 +1,123 @@
+<template>
+  <Teleport to="body">
+    <div id="bk-indicators" class="bk bk-indicators" :style>
+      <div id="bk-indicators-left" />
+      <div id="bk-indicators-right" />
+      <div class="bk-indicators-hovered" :style="hoveredStyle" />
+      <div class="bk-indicators-highlighted" :style="highlightedStyle" />
+    </div>
+  </Teleport>
+</template>
+
+<script setup>
+import onBlokkliEvent from "#blokkli/helpers/composables/onBlokkliEvent";
+import { computed, useBlokkli, watch, ref } from "#imports";
+const { ui, dom, indicators, selection } = useBlokkli();
+const artboardElement = ui.artboardElement();
+const highlighted = ref(null);
+const hasIndicators = computed(
+  () => !!indicators.indicators.value.length || !!highlighted.value
+);
+const style = computed(() => {
+  const offset = ui.artboardOffset.value;
+  return {
+    width: ui.artboardSize.value.width + "px",
+    height: ui.artboardSize.value.height + "px",
+    transform: `translate(${offset.x}px, ${offset.y}px) scale(${ui.artboardScale.value})`
+  };
+});
+const hoveredStyle = computed(() => {
+  if (indicators.hovered.value && hasIndicators.value) {
+    const rect = dom.getBlockRect(indicators.hovered.value, true);
+    if (rect) {
+      return {
+        width: rect.width.toString() + "px",
+        height: rect.height.toString() + "px",
+        transform: `translate(${rect.x}px, ${rect.y}px)`
+      };
+    }
+  }
+  return {
+    visibility: "hidden"
+  };
+});
+const highlightedStyle = computed(() => {
+  if (highlighted.value) {
+    return {
+      width: highlighted.value.width.toString() + "px",
+      height: highlighted.value.height.toString() + "px",
+      transform: `translate(${highlighted.value.x}px, ${highlighted.value.y}px)`
+    };
+  }
+  return {
+    visibility: "hidden"
+  };
+});
+const HEIGHT = 30;
+function snapToAnchorGrid(y) {
+  return Math.ceil(y / HEIGHT) * HEIGHT;
+}
+const prevRects = /* @__PURE__ */ new Map();
+let lastFullUpdate = 0;
+onBlokkliEvent("animationFrame", function(ctx) {
+  if (!hasIndicators.value) {
+    return;
+  }
+  const items = indicators.indicators.value;
+  const taken = /* @__PURE__ */ new Set();
+  const forceRefresh = ctx.time - lastFullUpdate > 1e3;
+  for (let i = 0; i < items.length; i++) {
+    const item = items[i];
+    if (!item) {
+      continue;
+    }
+    const rect = dom.getBlockRect(item.uuid, forceRefresh);
+    if (!rect) {
+      prevRects.delete(item.uuid);
+      continue;
+    }
+    let y = snapToAnchorGrid(Math.round(rect.y));
+    while (taken.has(y)) {
+      y += HEIGHT;
+    }
+    taken.add(y);
+    const style2 = `translateY(${y}px)`;
+    if (prevRects.get(item.uuid) !== y) {
+      prevRects.set(item.uuid, y);
+      item.element.style.transform = style2;
+    }
+  }
+  if (forceRefresh) {
+    lastFullUpdate = ctx.time;
+  }
+});
+onBlokkliEvent("view-option:toggle", () => {
+  prevRects.clear();
+});
+onBlokkliEvent("state:reloaded", () => {
+  prevRects.clear();
+});
+onBlokkliEvent("scrollIntoView", (e) => {
+  if ("element" in e) {
+    if (artboardElement.contains(e.element)) {
+      highlighted.value = ui.getAbsoluteElementRect(e.element);
+    } else {
+      highlighted.value = {
+        x: 0,
+        y: 0,
+        width: ui.artboardSize.value.width,
+        height: ui.artboardSize.value.height
+      };
+    }
+  }
+});
+onBlokkliEvent("window:clickAway", function() {
+  highlighted.value = null;
+});
+watch(indicators.indicators, function() {
+  prevRects.clear();
+});
+watch(selection.uuids, function() {
+  highlighted.value = null;
+});
+</script>

package/dist/runtime/components/Edit/Indicators/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;