@blokkli/editor 2.0.0-alpha.21 → 2.0.0-alpha.23

package/dist/runtime/components/Edit/Features/Selection/{Overlay → Renderer}/index.vue

@@ -18,16 +18,14 @@ import { useTransitionedValue } from "#blokkli/helpers/useTransitionedValue";
 import { toShaderColor } from "#blokkli/helpers";
 const props = defineProps({
   blocks: { type: Array, required: true },
-  gl: { type: null, required: true },
   hasHostSelected: { type: Boolean, required: true }
 });
 const { animation, theme, dom, ui, state } = useBlokkli();
-const programInfo = animation.registerProgram("selection", props.gl, [vs, fs]);
 class SelectionRectangleBufferCollector extends RectangleBufferCollector {
   uuids = [];
   lastCount = 0;
   prevKey = "";
-  getBufferInfo(force) {
+  getBufferInfo(gl, force) {
     const key = props.blocks.map((block) => {
       const uuid = block.uuid;
       const rect = dom.getBlockRect(uuid);
@@ -93,13 +91,12 @@ class SelectionRectangleBufferCollector extends RectangleBufferCollector {
       }
       this.prevKey = key;
     }
-    if (hasChanged) {
-      this.bufferInfo = this.createBufferInfo();
+    if (hasChanged && gl) {
+      this.bufferInfo = this.createBufferInfo(gl);
     }
     return { info: this.bufferInfo, hasChanged };
   }
 }
-const collector = new SelectionRectangleBufferCollector(props.gl);
 const hasTransformingStyle = computed(
   () => ui.hasTransformOverlayOpen.value || ui.isTransforming.value
 );
@@ -109,68 +106,164 @@ const selectionColorOverride = computed(() => {
     return null;
   }
   if (color === "mono") {
-    return toShaderColor(theme.getColor(color, "500"));
+    return theme.getColor(color, "500");
   } else if (color === "accent") {
-    return toShaderColor(theme.getColor(color, "700"));
+    return theme.getColor(color, "700");
   }
-  return toShaderColor(theme.getColor(color, "normal"));
+  return theme.getColor(color, "normal");
 });
 const getColorDefault = useTransitionedValue(() => {
   if (selectionColorOverride.value) {
     return selectionColorOverride.value;
   }
   if (hasTransformingStyle.value) {
-    return toShaderColor(theme.orange.value.normal);
+    return theme.orange.value.normal;
   }
-  return toShaderColor(theme.accent.value[600]);
+  return theme.accent.value[600];
 });
 const getColorInverted = useTransitionedValue(() => {
   if (selectionColorOverride.value) {
     return selectionColorOverride.value;
   }
   if (hasTransformingStyle.value) {
-    return toShaderColor(theme.orange.value.normal);
+    return theme.orange.value.normal;
   }
-  return toShaderColor([255, 255, 255]);
+  return [255, 255, 255];
 });
 const getColorLibrary = useTransitionedValue(() => {
   if (selectionColorOverride.value) {
     return selectionColorOverride.value;
   }
   if (hasTransformingStyle.value) {
-    return toShaderColor(theme.orange.value.normal);
+    return theme.orange.value.normal;
   }
-  return toShaderColor(theme.lime.value.normal);
+  return theme.lime.value.normal;
 });
 const getColorHost = useTransitionedValue(() => {
-  return toShaderColor(theme.mono.value[700]);
+  return theme.mono.value[700];
 });
 const getTransforming = useTransitionedValue(() => {
   return ui.isTransforming.value ? 1 : 0;
 });
-defineRenderer("selection-overlay", {
+const { collector } = defineRenderer("selection-overlay", {
   zIndex: 100,
-  render: (ctx) => {
-    props.gl.useProgram(programInfo.program);
-    const { info } = collector.getBufferInfo();
+  collector: () => new SelectionRectangleBufferCollector(),
+  program: () => ({ shaders: [vs, fs] }),
+  render: (ctx, gl, program) => {
+    gl.useProgram(program.program);
+    const { info } = collector.getBufferInfo(gl);
     if (!info) {
       return;
     }
-    setUniforms(programInfo, {
-      u_color_default: getColorDefault(),
-      u_color_inverted: getColorInverted(),
-      u_color_library: getColorLibrary(),
-      u_color_host: getColorHost(),
+    setUniforms(program, {
+      u_color_default: toShaderColor(getColorDefault()),
+      u_color_inverted: toShaderColor(getColorInverted()),
+      u_color_library: toShaderColor(getColorLibrary()),
+      u_color_host: toShaderColor(getColorHost()),
       u_artboard_size: [
         ui.artboardSize.value.width,
         ui.artboardSize.value.height
       ],
       u_is_transforming: getTransforming(),
+      u_opacity: ctx.changeOptionsTransition,
       u_time: ctx.time
     });
-    animation.setSharedUniforms(props.gl, programInfo);
-    setBuffersAndAttributes(props.gl, programInfo, info);
-    drawBufferInfo(props.gl, info, props.gl.TRIANGLES);
+    animation.setSharedUniforms(gl, program);
+    setBuffersAndAttributes(gl, program, info);
+    drawBufferInfo(gl, info, gl.TRIANGLES);
+  },
+  renderFallback: (ctx, ctx2d) => {
+    collector.getBufferInfo();
+    const rects = Object.values(collector.rects);
+    if (rects.length === 0) {
+      return;
+    }
+    ctx2d.globalAlpha = ctx.changeOptionsTransition;
+    const rgbaToCss = (rgb) => {
+      return `rgb(${rgb[0]}, ${rgb[1]}, ${rgb[2]})`;
+    };
+    const colorDefault = rgbaToCss(getColorDefault());
+    const colorInverted = rgbaToCss(getColorInverted());
+    const colorLibrary = rgbaToCss(getColorLibrary());
+    const colorHost = rgbaToCss(getColorHost());
+    const smoothstepValue = Math.max(
+      0,
+      Math.min(1, (ctx.artboardScale - 0.3) / 0.7)
+    );
+    const thickness = (0.5 + smoothstepValue * 2.5) * ctx.dpi;
+    for (let i = 0; i < rects.length; i++) {
+      const rect = rects[i];
+      let strokeColor = colorDefault;
+      if (rect.isFromLibrary) {
+        strokeColor = colorLibrary;
+      } else if (rect.isInverted) {
+        strokeColor = colorInverted;
+      } else if (rect.id === "host") {
+        strokeColor = colorHost;
+      }
+      ctx2d.strokeStyle = strokeColor;
+      ctx2d.lineWidth = thickness;
+      const viewportX = (rect.x * ctx.artboardScale + ctx.artboardOffset.x) * ctx.dpi;
+      const viewportY = (rect.y * ctx.artboardScale + ctx.artboardOffset.y) * ctx.dpi;
+      const viewportWidth = rect.width * ctx.artboardScale * ctx.dpi;
+      const viewportHeight = rect.height * ctx.artboardScale * ctx.dpi;
+      const maxRadius = Math.min(viewportWidth, viewportHeight) / 2;
+      const rtl = Math.min(
+        rect.radius[0] * ctx.artboardScale * ctx.dpi,
+        maxRadius
+      );
+      const rtr = Math.min(
+        rect.radius[1] * ctx.artboardScale * ctx.dpi,
+        maxRadius
+      );
+      const rbr = Math.min(
+        rect.radius[2] * ctx.artboardScale * ctx.dpi,
+        maxRadius
+      );
+      const rbl = Math.min(
+        rect.radius[3] * ctx.artboardScale * ctx.dpi,
+        maxRadius
+      );
+      ctx2d.beginPath();
+      ctx2d.moveTo(viewportX + rtl, viewportY);
+      ctx2d.lineTo(viewportX + viewportWidth - rtr, viewportY);
+      if (rtr > 0) {
+        ctx2d.arcTo(
+          viewportX + viewportWidth,
+          viewportY,
+          viewportX + viewportWidth,
+          viewportY + rtr,
+          rtr
+        );
+      }
+      ctx2d.lineTo(viewportX + viewportWidth, viewportY + viewportHeight - rbr);
+      if (rbr > 0) {
+        ctx2d.arcTo(
+          viewportX + viewportWidth,
+          viewportY + viewportHeight,
+          viewportX + viewportWidth - rbr,
+          viewportY + viewportHeight,
+          rbr
+        );
+      }
+      ctx2d.lineTo(viewportX + rbl, viewportY + viewportHeight);
+      if (rbl > 0) {
+        ctx2d.arcTo(
+          viewportX,
+          viewportY + viewportHeight,
+          viewportX,
+          viewportY + viewportHeight - rbl,
+          rbl
+        );
+      }
+      ctx2d.lineTo(viewportX, viewportY + rtl);
+      if (rtl > 0) {
+        ctx2d.arcTo(viewportX, viewportY, viewportX + rtl, viewportY, rtl);
+      }
+      ctx2d.closePath();
+      ctx2d.stroke();
+    }
+    ctx2d.globalAlpha = 1;
   }
 });
 onBlokkliEvent("ui:resized", function() {

package/dist/runtime/components/Edit/Features/Selection/{Overlay → Renderer}/index.vue.d.ts

@@ -1,11 +1,9 @@
 import type { RenderedFieldListItem } from '#blokkli/types';
 declare const _default: import("vue").DefineComponent<{
     blocks: RenderedFieldListItem[];
-    gl: WebGLRenderingContext;
     hasHostSelected: boolean;
 }, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{
     blocks: RenderedFieldListItem[];
-    gl: WebGLRenderingContext;
     hasHostSelected: boolean;
 }> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 export default _default;

package/dist/runtime/components/Edit/Features/Selection/{Overlay → Renderer}/vertex.glsl

@@ -1,12 +1,14 @@
+#version 300 es
+
 precision highp float;
 
 // [x, y] position.
-attribute vec2 a_position;
+in vec2 a_position;
 // The [x,y,width, height] of the quad the vertex belongs to.
-attribute vec4 a_quad;
-attribute float a_rect_id;
-attribute float a_rect_type;
-attribute vec4 a_rect_radius;
+in vec4 a_quad;
+in float a_rect_id;
+in float a_rect_type;
+in vec4 a_rect_radius;
 
 // The global scaling applied to all quads.
 uniform float u_scale;
@@ -22,15 +24,18 @@ uniform vec3 u_color_library;
 uniform vec3 u_color_host;
 
 // The transformed quad for the fragment shader.
-varying vec4 v_quad;
-varying vec3 v_color;
-varying vec4 v_rect_radius;
-varying float v_thickness;
-varying vec2 v_rect_size;
-varying vec2 v_rect_center;
-varying float v_transition;
-varying float v_rect_id;
-varying float v_rect_width;
+out vec4 v_quad;
+out vec3 v_color;
+out vec4 v_rect_radius;
+out float v_thickness;
+out vec2 v_rect_size;
+out vec2 v_rect_center;
+out float v_transition;
+out float v_rect_id;
+out float v_rect_width;
+// Optimized varyings calculated in vertex shader
+out float v_stripe_distance;
+out vec4 v_base_scaled_radius;
 
 void main() {
   // Define the increase size in viewport terms (not affected by u_scale)
@@ -96,4 +101,8 @@ void main() {
   v_rect_size = vec2(v_quad.z, v_quad.w);
   v_rect_center = vec2(v_quad.x + v_quad.z / 2.0, v_quad.y + v_quad.w / 2.0); // The pixel-space rectangle center location
   v_transition = smoothstep(0.5, 0.8, u_scale);
+
+  // Calculate optimized values once per vertex
+  v_stripe_distance = 300.0 * u_scale;
+  v_base_scaled_radius = v_rect_radius * u_scale;
 }

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

@@ -1,22 +1,11 @@
 <template>
-  <Overlay
-    v-if="isVisible && gl && animation.webglEnabled.value"
+  <Renderer
+    v-if="isVisible"
+    :key="animation.renderKey.value"
     :blocks="selection.items.value"
     :uuids="selection.uuids.value"
-    :gl="gl"
     :has-host-selected="selection.hasHostSelected.value"
   />
-  <OverlayFallback v-if="isVisible && !gl" :uuids="selection.uuids.value" />
-  <PluginItemDropdown
-    v-if="itemDropdownItems.length"
-    id="selection"
-    :title="$t('selectionActionGroupTitle', 'Selection')"
-    :enabled="itemDropdownEnabled"
-    :items="itemDropdownItems"
-    icon="selection"
-    weight="200"
-    @select="onSelectDropdownItem"
-  />
 
   <SelectionAddButtons
     v-if="state.editMode.value === 'editing'"
@@ -25,8 +14,7 @@
 </template>
 
 <script setup>
-import Overlay from "./Overlay/index.vue";
-import OverlayFallback from "./OverlayFallback/index.vue";
+import Renderer from "./Renderer/index.vue";
 import SelectionAddButtons from "./AddButtons/index.vue";
 import {
   calculateIntersection,
@@ -37,7 +25,7 @@ import {
 } from "#blokkli/helpers";
 import onBlokkliEvent from "#blokkli/helpers/composables/onBlokkliEvent";
 import useStateBasedCache from "#blokkli/helpers/composables/useStateBasedCache";
-import { PluginItemDropdown } from "#blokkli/plugins";
+import defineItemDropdownAction from "#blokkli/helpers/composables/defineItemDropdownAction";
 import {
   computed,
   useBlokkli,
@@ -65,54 +53,20 @@ const {
   blocks,
   element
 } = useBlokkli();
-const getSelectionOrder = useStateBasedCache(() => {
-  return element.queryAll(
-    ui.artboardElement(),
-    "[data-uuid]",
+const getSelectionOrder = useStateBasedCache(
+  () => element.queryAll(
+    ui.providerElement,
+    ".bk-field-list-item",
     "getSelectionOrder",
-    (el) => el.dataset.uuid
-  );
-});
+    (el) => el.dataset.bkUuid
+  )
+);
 const selectedBundle = computed(() => {
   if (selection.bundles.value.length === 1) {
     return selection.bundles.value[0] ?? null;
   }
   return null;
 });
-const itemDropdownEnabled = computed(() => true);
-const itemDropdownItems = computed(() => {
-  if (selectedBundle.value) {
-    const label = types.getBlockBundleDefinition(selectedBundle.value)?.label ?? selectedBundle.value;
-    return [
-      {
-        id: "select-all-of-bundle",
-        label: $t("selectAllOfBundle", 'Select all "@bundle" blocks').replace(
-          "@bundle",
-          label
-        )
-      }
-    ];
-  } else if (selection.hasHostSelected.value) {
-    return [
-      {
-        id: "select-all-blocks",
-        label: $t("selectAllBlocks", "Select all blocks")
-      }
-    ];
-  }
-  return [];
-});
-function onSelectDropdownItem(item) {
-  if (item.id === "select-all-of-bundle") {
-    if (selectedBundle.value) {
-      const uuids = state.getAllUuids(selectedBundle.value);
-      eventBus.emit("select", uuids);
-    }
-  } else if (item.id === "select-all-blocks") {
-    selectAllBlocks();
-  }
-}
-const gl = animation.gl();
 const hasSelectedOnce = ref(false);
 const stop = watch(
   selection.hasAnythingSelected,
@@ -124,7 +78,7 @@ const stop = watch(
   }
 );
 const isVisible = computed(
-  () => dom.isReady.value && !selection.isMultiSelecting.value && !selection.editableActive.value && !selection.isChangingOptions.value && !selection.isDragging.value && !ui.isAnimating.value && hasSelectedOnce.value
+  () => dom.isReady.value && !selection.isMultiSelecting.value && !selection.editableActive.value && !selection.isDragging.value && !ui.isAnimating.value && hasSelectedOnce.value
 );
 const findMostVisibleBlock = () => {
   const viewport = ui.visibleViewportPadded.value;
@@ -310,6 +264,39 @@ onBlokkliEvent("keyPressed", (e) => {
     selectAllBlocks();
   }
 });
+defineItemDropdownAction(() => {
+  if (selectedBundle.value) {
+    const label = types.getBlockBundleDefinition(selectedBundle.value)?.label ?? selectedBundle.value;
+    return {
+      id: "selection-select-all-of-bundle",
+      label: $t("selectAllOfBundle", 'Select all "@bundle" blocks').replace(
+        "@bundle",
+        label
+      ),
+      icon: "selection",
+      group: "selection",
+      weight: 200,
+      callback: () => {
+        if (selectedBundle.value) {
+          const uuids = state.getAllUuids(selectedBundle.value);
+          eventBus.emit("select", uuids);
+        }
+      }
+    };
+  }
+});
+defineItemDropdownAction(() => {
+  if (selection.hasHostSelected.value) {
+    return {
+      id: "selection-select-all-blocks",
+      label: $t("selectAllBlocks", "Select all blocks"),
+      icon: "selection",
+      group: "selection",
+      weight: 200,
+      callback: selectAllBlocks
+    };
+  }
+});
 </script>
 
 <script>

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

@@ -38,14 +38,14 @@
 }"
               @click.prevent="onClickPreview"
             >
-              {{ $t("transformDialogButtonPreview", "Preview") }}
+              {{ $t("transformDialogButtonPreview", "New suggestion") }}
             </button>
             <button
               class="bk-button bk-is-orange"
               :disabled
               @click.prevent="onClickSubmit"
             >
-              {{ $t("transformDialogButtonApply", "Apply") }}
+              {{ $t("transformDialogButtonApply", "Apply changes") }}
             </button>
           </footer>
         </div>
@@ -183,10 +183,10 @@ 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"
+    const hasNoRequiredInput = props.plugin.configInputs?.every(
+      (v) => v.type === "seed" || !v.required
     );
-    if (hasOnlySeedInputs === true) {
+    if (hasNoRequiredInput === true) {
       await onClickPreview();
     }
   }

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

@@ -1,25 +1,4 @@
 <template>
-  <PluginItemDropdown
-    id="transform"
-    :title="$t('transformTo', 'Actions')"
-    :enabled="!!possibleTransforms.length"
-    :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
@@ -42,10 +21,10 @@ import {
   defineBlokkliFeature,
   useLazyAsyncData
 } from "#imports";
-import { PluginItemDropdown } from "#blokkli/plugins";
 import { BlokkliTransition } from "#blokkli/components";
 import { filterTransforms } from "#blokkli/helpers/transform";
 import defineCommands from "#blokkli/helpers/composables/defineCommands";
+import defineItemDropdownAction from "#blokkli/helpers/composables/defineItemDropdownAction";
 import TransformDialog from "./Dialog/index.vue";
 const { adapter } = defineBlokkliFeature({
   id: "transform",
@@ -218,6 +197,34 @@ defineCommands(
     }
   }))
 );
+defineItemDropdownAction(() => {
+  if (possibleTransforms.value.length) {
+    return possibleTransforms.value.map((transform) => ({
+      id: "transform-block-" + transform.id,
+      label: transform.label,
+      icon: "script",
+      group: "transform",
+      weight: 100,
+      callback: () => {
+        onSelectBlockTransformPlugin(transform, selection.uuids.value);
+      }
+    }));
+  }
+});
+defineItemDropdownAction(() => {
+  if (selection.hasHostSelected.value && hostPlugins.value && hostPlugins.value.length) {
+    return hostPlugins.value.map((plugin) => ({
+      id: "transform-host-" + plugin.id,
+      label: plugin.label,
+      icon: "script",
+      group: "transform",
+      weight: 100,
+      callback: () => {
+        onSelectHostTransformPlugin(plugin);
+      }
+    }));
+  }
+});
 </script>
 
 <script>

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

@@ -0,0 +1,43 @@
+<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-checkbox">
+        <input
+          :checked="isChecked(option.value)"
+          type="checkbox"
+          :value="option.value"
+          :required
+          :disabled
+          @change="toggleValue(option.value)"
+        />
+        <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: Array, ...{ default: [] } });
+function isChecked(optionValue) {
+  return value.value.includes(optionValue);
+}
+function toggleValue(optionValue) {
+  if (value.value.includes(optionValue)) {
+    value.value = value.value.filter((v) => v !== optionValue);
+  } else {
+    value.value = [...value.value, optionValue];
+  }
+}
+</script>

package/dist/runtime/components/Edit/Form/Checkboxes/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[]) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: string[]) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

package/dist/runtime/components/Edit/Messages/Item/index.vue.d.ts

@@ -1,5 +1,5 @@
 type __VLS_Props = {
-    type: 'success' | 'error';
+    type: 'success' | 'error' | 'warning';
     message: string;
     additional?: string | Error | unknown;
 };

package/dist/runtime/components/Edit/PreviewProvider.vue

@@ -124,7 +124,7 @@ const onWheel = (e) => {
 };
 const isInIframe = () => window.parent !== window;
 const onFocusItem = (uuid) => {
-  const el = document.querySelector(`[data-uuid="${uuid}"]`);
+  const el = document.querySelector(`[data-bk-uuid="${uuid}"]`);
   if (el) {
     const elRect = el.getBoundingClientRect();
     if (!intersects(elRect, {

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

@@ -10,14 +10,11 @@
 
 <script setup>
 import { useBlokkli } from "#imports";
-import {
-  buildDraggableItem,
-  getDistance,
-  getInteractionCoordinates
-} from "#blokkli/helpers";
+import { getDistance, getInteractionCoordinates } from "#blokkli/helpers";
 const { eventBus } = useBlokkli();
 const props = defineProps({
-  getDragItems: { type: Function, required: false }
+  getDragItems: { type: Function, required: false },
+  buildItem: { type: Function, required: true }
 });
 let pointerStartCoords = null;
 let activeItem = null;
@@ -31,10 +28,10 @@ function onPointerDown(e) {
   }
   pointerStartCoords = getInteractionCoordinates(e);
   const sortliItem = e.target.closest("[data-sortli-id]");
-  if (!sortliItem) {
+  if (!(sortliItem instanceof HTMLElement)) {
     return;
   }
-  const item = buildDraggableItem(sortliItem);
+  const item = props.buildItem(sortliItem);
   if (!item) {
     return;
   }

package/dist/runtime/components/Edit/Sortli/index.vue.d.ts

@@ -1,8 +1,10 @@
 import type { DraggableItem } from '#blokkli/types';
 declare const _default: __VLS_WithSlots<import("vue").DefineComponent<{
     getDragItems?: (activeItem?: DraggableItem) => DraggableItem[] | null;
+    buildItem: (el: HTMLElement) => DraggableItem | null | undefined;
 }, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{
     getDragItems?: (activeItem?: DraggableItem) => DraggableItem[] | null;
+    buildItem: (el: HTMLElement) => DraggableItem | null | undefined;
 }> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
     default?: (props: {}) => any;
 }>;