@blokkli/editor 2.0.0-alpha.35 → 2.0.0-alpha.36

package/dist/runtime/editor/events/index.d.ts

@@ -241,6 +241,13 @@ export interface EventbusEvents {
     'view-option:toggle': {
         id: string;
     };
+    /**
+     * Emitted when editing a fragment provided by a feature.
+     */
+    'fragment:edit': {
+        name: string;
+        uuid: string;
+    };
 }
 type EventbusEventsType = {
     [K in keyof EventbusEvents]: EventbusEvents[K];

package/dist/runtime/editor/features/add-list/Help/Item.vue

@@ -73,12 +73,15 @@ onElementResize(el, (size) => {
 defineExpose({
   height
 });
-const { types, $t, definitions } = useBlokkli();
+const { types, $t, definitions, dom } = useBlokkli();
 const reusableBlockTypes = computed(
   () => types.generallyAvailableBundles.filter((v) => v.allowReusable)
 );
 const fragments = computed(() => {
-  return definitions.fragmentDefinitions.value.map((v) => {
+  const available = dom.generallyAvailableFragments.value;
+  return definitions.fragmentDefinitions.value.filter((definition) => {
+    return available.includes(definition.name);
+  }).map((v) => {
     return {
       bundle: fragmentBlockBundle,
       label: v.label,

package/dist/runtime/editor/features/artboard/Renderer.vue

@@ -253,7 +253,7 @@ const resetZoom = () => {
   animation.requestDraw();
 };
 onBlokkliEvent("keyPressed", (e) => {
-  if (ui.hasDialogOpen.value) {
+  if (ui.hasDialogOpen.value || ui.hasNestedEditorOpen.value) {
     return;
   }
   if (e.code === "Home") {

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

@@ -538,7 +538,7 @@ function copyCurrentSelectionToClipboard() {
   selectionClipboard.value = selection.uuids.value;
 }
 onBlokkliEvent("keyPressed", (e) => {
-  if (e.code !== "c" || !e.meta || ui.hasDialogOpen.value || !ui.canvasFocused.value) {
+  if (e.code !== "c" || !e.meta || ui.hasDialogOpen.value || ui.hasNestedEditorOpen.value || !ui.canvasFocused.value) {
     return;
   }
   copyCurrentSelectionToClipboard();

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

@@ -14,7 +14,7 @@ const { logger } = defineBlokkliFeature({
 });
 const { debug, ui } = useBlokkli();
 onBlokkliEvent("keyPressed", (e) => {
-  if (ui.hasDialogOpen.value) {
+  if (ui.hasDialogOpen.value || ui.hasNestedEditorOpen.value) {
     return;
   }
   if (e.code === "=" && e.meta) {

package/dist/runtime/editor/features/dev-mode/index.vue

@@ -9,12 +9,55 @@
     key-code="I"
     weight="-99999"
   />
+  <Teleport :to="ui.mainLayoutElement.value">
+    <div v-if="fieldMappingValidations.length" class="bk bk-dev-mode">
+      <div class="bk-dev-mode-inner">
+        <Banner
+          id="dev-mode"
+          icon="bk_mdi_logo_dev"
+          text="Invalid definitions found!"
+          scheme="red"
+        >
+          <div class="bk-dev-mode-banner">
+            <h3>Some block components are invalid:</h3>
+            <table>
+              <thead>
+                <tr>
+                  <th>Bundle</th>
+                  <th>Error</th>
+                </tr>
+              </thead>
+
+              <tbody>
+                <tr
+                  v-for="(item, index) in fieldMappingValidations"
+                  :key="index"
+                >
+                  <td>{{ item.bundle }}</td>
+                  <td v-html="item.validation" />
+                </tr>
+              </tbody>
+            </table>
+          </div>
+        </Banner>
+      </div>
+    </div>
+  </Teleport>
 </template>
 
 <script setup>
-import { useBlokkli, defineBlokkliFeature, ref } from "#imports";
+import {
+  useBlokkli,
+  defineBlokkliFeature,
+  ref,
+  computed,
+  onMounted
+} from "#imports";
 import { PluginViewOption } from "#blokkli/editor/plugins";
+import { Banner } from "#blokkli/editor/components";
 import { addElementClasses } from "#blokkli/editor/composables";
+import { falsy } from "#blokkli/helpers";
+import { itemEntityType } from "#blokkli-build/config";
 defineBlokkliFeature({
   id: "dev-mode",
   label: "Dev Mode",
@@ -22,13 +65,54 @@ defineBlokkliFeature({
   description: "Feature enabled in development mode.",
   viewports: ["desktop"]
 });
-const { $t } = useBlokkli();
+const { $t, types, definitions, ui } = useBlokkli();
 const isEnabled = ref(false);
+const fieldMappingValidations = computed(() => {
+  return definitions.blockDefinitions.value.flatMap((definition) => {
+    if (definition.renderFor) {
+      return null;
+    }
+    const propsFieldMapping = definition.propsFieldMapping ?? {};
+    const bundle = definition.bundle;
+    const fields = new Set(
+      types.fieldConfig.forEntityTypeAndBundle(itemEntityType, bundle).map((field) => field.name)
+    );
+    const mappings = Object.entries(propsFieldMapping).map(([propName, mapping]) => {
+      if (mapping && mapping.type === "field") {
+        return {
+          propName,
+          fieldName: mapping.name
+        };
+      }
+      return null;
+    }).filter(falsy);
+    const invalidMappings = mappings.filter((mapping) => {
+      return !fields.has(mapping.fieldName);
+    }).map((mapping) => {
+      return {
+        bundle,
+        validation: `The props field mapping <code>'${mapping.propName}': '${mapping.fieldName}'</code> is invalid, because <strong>${bundle}</strong> has no field <strong>${mapping.fieldName}</strong>`
+      };
+    });
+    const missingMappings = [...fields.values()].filter((fieldName) => {
+      return !mappings.find((mapping) => mapping.fieldName === fieldName);
+    }).map((fieldName) => {
+      return {
+        bundle,
+        validation: `Missing props field mapping for field <strong>${fieldName}</strong>`
+      };
+    });
+    return [...invalidMappings, ...missingMappings];
+  }).filter(falsy);
+});
 addElementClasses(
   document.documentElement,
   "bk-hide-interaction-layers",
   isEnabled
 );
+onMounted(() => {
+  console.log(fieldMappingValidations.value);
+});
 </script>
 
 <script>

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

@@ -16,6 +16,8 @@
 import { computed, useBlokkli, defineBlokkliFeature } from "#imports";
 import { PluginItemAction } from "#blokkli/editor/plugins";
 import { onBlokkliEvent } from "#blokkli/editor/composables";
+import { featureFragmentNames } from "#blokkli-build/editor-config";
+import { fragmentBlockBundle } from "#blokkli-build/config";
 defineBlokkliFeature({
   id: "edit",
   icon: "bk_mdi_edit",
@@ -27,11 +29,20 @@ const { eventBus, selection, state, $t, adapter, definitions, permissions } = us
 const userCanEditLibraryItems = computed(
   () => permissions.hasPermission("edit_library_item")
 );
+function isFragment(item) {
+  return item.bundle === fragmentBlockBundle;
+}
+function isFeatureFragment(item) {
+  return !!item.fragment?.name && featureFragmentNames.includes(item.fragment.name);
+}
 const canEdit = computed(() => {
   const item = selection.item.value;
   if (!item) {
     return false;
   }
+  if (isFragment(item)) {
+    return isFeatureFragment(item);
+  }
   const definition = definitions.getBlockDefinition(
     item.bundle,
     item.fieldListType,
@@ -66,6 +77,15 @@ function onClick(items) {
     });
     return;
   }
+  if (isFragment(item)) {
+    if (isFeatureFragment(item)) {
+      eventBus.emit("fragment:edit", {
+        uuid: item.uuid,
+        name: item.fragment.name
+      });
+    }
+    return;
+  }
   eventBus.emit("item:edit", {
     uuid: item.uuid,
     bundle: item.bundle

package/dist/runtime/editor/features/fragments/types.d.ts

@@ -3,6 +3,7 @@ export type AdapterFragmentsAddBlock = {
     name: string;
     host: BlokkliItemHost;
     preceedingUuid: string | null;
+    options?: Record<string, string>;
 };
 declare module '#blokkli/editor/adapter' {
     interface BlokkliAdapter<T> {

package/dist/runtime/editor/features/hover/Renderer/index.vue

@@ -15,7 +15,17 @@ import { RectangleBufferCollector } from "#blokkli/editor/helpers/webgl";
 import { isInsideRect } from "#blokkli/editor/helpers/geometry";
 import { toShaderColor } from "#blokkli/editor/helpers/color";
 import { defineRenderer, onBlokkliEvent } from "#blokkli/editor/composables";
-const { animation, theme, dom, selection, state, ui, directive, blocks } = useBlokkli();
+const {
+  animation,
+  theme,
+  dom,
+  selection,
+  state,
+  ui,
+  directive,
+  blocks,
+  fields
+} = useBlokkli();
 const MAX_RECTS = 11;
 function getDeepestUuid(uuids) {
   if (uuids.length === 0) {
@@ -29,6 +39,10 @@ function getDeepestUuid(uuids) {
     if (level > maxLevel) {
       maxLevel = level;
       deepestUuid = uuid;
+    } else if (level === maxLevel) {
+      if (fields.compareFieldPriority(uuid, deepestUuid) > 0) {
+        deepestUuid = uuid;
+      }
     }
   }
   return deepestUuid;
@@ -119,12 +133,22 @@ function updateHoverState(mouseX, mouseY, offset, scale, artboardSize) {
   ) || deepestUuid !== previousDeepestUuid;
   let hoveredEditableFieldRect = null;
   const editableRects = directive.getVisible("editable");
+  let fallbackEditableRect = null;
   for (let i = 0; i < editableRects.length; i++) {
     const editableRect = editableRects[i];
-    if (isInsideRect(artboardMouseX, artboardMouseY, editableRect)) {
+    if (!isInsideRect(artboardMouseX, artboardMouseY, editableRect)) continue;
+    const key = editableRect.key;
+    const entityUuid = key.split(":")[2];
+    if (deepestUuid && entityUuid === deepestUuid) {
       hoveredEditableFieldRect = editableRect;
       break;
     }
+    if (!fallbackEditableRect && !hoveredUuids.includes(entityUuid)) {
+      fallbackEditableRect = editableRect;
+    }
+  }
+  if (!hoveredEditableFieldRect) {
+    hoveredEditableFieldRect = fallbackEditableRect;
   }
   if (!hoveredChanged) {
     const editableFieldChanged = hoveredEditableFieldRect === null !== (previousEditableFieldRect === null) || hoveredEditableFieldRect && previousEditableFieldRect && (hoveredEditableFieldRect.x !== previousEditableFieldRect.x || hoveredEditableFieldRect.y !== previousEditableFieldRect.y || hoveredEditableFieldRect.width !== previousEditableFieldRect.width || hoveredEditableFieldRect.height !== previousEditableFieldRect.height);
@@ -138,7 +162,10 @@ function updateHoverState(mouseX, mouseY, offset, scale, artboardSize) {
   for (let i = 0; i < unselectedHoveredUuids.length; i++) {
     const uuid = unselectedHoveredUuids[i];
     const level = Math.min(state.getNestingLevel(uuid), 9);
-    if (!nestingMap.has(level)) {
+    const existing = nestingMap.get(level);
+    if (!existing) {
+      nestingMap.set(level, uuid);
+    } else if (fields.compareFieldPriority(uuid, existing) > 0) {
       nestingMap.set(level, uuid);
     }
   }

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

@@ -17,7 +17,7 @@ defineBlokkliFeature({
 const { selection, ui, dom, animation, $t } = useBlokkli();
 const isLocked = ref(false);
 const isVisible = computed(
-  () => !isLocked.value && dom.isReady.value && !selection.isMultiSelecting.value && !selection.activeEditableLabel.value && !selection.isDragging.value && !ui.hasTransformOverlayOpen.value && !ui.hasDialogOpen.value && !ui.isAnimating.value
+  () => !isLocked.value && dom.isReady.value && !selection.isMultiSelecting.value && !selection.activeEditableLabel.value && !selection.isDragging.value && !ui.hasTransformOverlayOpen.value && !ui.hasDialogOpen.value && !ui.hasNestedEditorOpen.value && !ui.isAnimating.value
 );
 </script>
 

package/dist/runtime/editor/features/options/Form/Checkbox/index.d.vue.ts

@@ -3,14 +3,14 @@ export default _default;
 declare const __VLS_export: import("vue").DefineComponent<{
     label: string;
     property: string;
-    modelValue?: string;
+    modelValue?: boolean;
     required?: boolean;
 }, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:modelValue": (...args: any[]) => void;
 }, string, import("vue").PublicProps, Readonly<{
     label: string;
     property: string;
-    modelValue?: string;
+    modelValue?: boolean;
     required?: boolean;
 }> & Readonly<{
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;

package/dist/runtime/editor/features/options/Form/Checkbox/index.vue

@@ -13,16 +13,16 @@ const { $t, state } = useBlokkli();
 const props = defineProps({
   label: { type: String, required: true },
   property: { type: String, required: true },
-  modelValue: { type: String, required: false },
+  modelValue: { type: Boolean, required: false },
   required: { type: Boolean, required: false }
 });
 const emit = defineEmits(["update:modelValue"]);
 const checked = computed({
   get() {
-    return props.modelValue === "1";
+    return props.modelValue ?? false;
   },
   set(v) {
-    emit("update:modelValue", v ? "1" : "0");
+    emit("update:modelValue", v);
   }
 });
 defineCommands(() => {

package/dist/runtime/editor/features/options/Form/Checkbox/index.vue.d.ts

@@ -3,14 +3,14 @@ export default _default;
 declare const __VLS_export: import("vue").DefineComponent<{
     label: string;
     property: string;
-    modelValue?: string;
+    modelValue?: boolean;
     required?: boolean;
 }, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:modelValue": (...args: any[]) => void;
 }, string, import("vue").PublicProps, Readonly<{
     label: string;
     property: string;
-    modelValue?: string;
+    modelValue?: boolean;
     required?: boolean;
 }> & Readonly<{
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;

package/dist/runtime/editor/features/options/Form/Checkboxes/index.d.vue.ts

@@ -3,7 +3,7 @@ export default _default;
 declare const __VLS_export: import("vue").DefineComponent<{
     label: string;
     property: string;
-    modelValue?: string;
+    modelValue?: string[];
     options: {
         value: string;
         label: string;
@@ -14,7 +14,7 @@ declare const __VLS_export: import("vue").DefineComponent<{
 }, string, import("vue").PublicProps, Readonly<{
     label: string;
     property: string;
-    modelValue?: string;
+    modelValue?: string[];
     options: {
         value: string;
         label: string;

package/dist/runtime/editor/features/options/Form/Checkboxes/index.vue

@@ -43,7 +43,7 @@ const { $t, state } = useBlokkli();
 const props = defineProps({
   label: { type: String, required: true },
   property: { type: String, required: true },
-  modelValue: { type: String, required: false },
+  modelValue: { type: Array, required: false },
   options: { type: Array, required: true },
   isGrouped: { type: Boolean, required: false }
 });
@@ -52,13 +52,13 @@ const isOpen = ref(false);
 const optionOrder = computed(() => props.options.map((v) => v.value));
 const checked = computed({
   get() {
-    return (props.modelValue || "").split(",").filter(Boolean);
+    return props.modelValue || [];
   },
   set(newValue) {
-    const storedValue = newValue.filter(Boolean).sort((a, b) => {
+    const sorted = newValue.filter(Boolean).sort((a, b) => {
       return optionOrder.value.indexOf(a) - optionOrder.value.indexOf(b);
-    }).join(",");
-    emit("update:modelValue", storedValue);
+    });
+    emit("update:modelValue", sorted);
   }
 });
 const visibleLabel = computed(() => {

package/dist/runtime/editor/features/options/Form/Checkboxes/index.vue.d.ts

@@ -3,7 +3,7 @@ export default _default;
 declare const __VLS_export: import("vue").DefineComponent<{
     label: string;
     property: string;
-    modelValue?: string;
+    modelValue?: string[];
     options: {
         value: string;
         label: string;
@@ -14,7 +14,7 @@ declare const __VLS_export: import("vue").DefineComponent<{
 }, string, import("vue").PublicProps, Readonly<{
     label: string;
     property: string;
-    modelValue?: string;
+    modelValue?: string[];
     options: {
         value: string;
         label: string;

package/dist/runtime/editor/features/options/Form/Item.d.vue.ts

@@ -6,9 +6,9 @@ type __VLS_Props = {
     isGrouped?: boolean;
 };
 declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
-    update: (data: string) => any;
+    update: (data: unknown) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
-    onUpdate?: ((data: string) => any) | undefined;
+    onUpdate?: ((data: unknown) => any) | undefined;
 }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/editor/features/options/Form/Item.vue

@@ -88,10 +88,6 @@ import OptionColor from "./Color/index.vue";
 import OptionRange from "./Range/index.vue";
 import OptionNumber from "./Number/index.vue";
 import OptionDateTimeLocal from "./DateTimeLocal/index.vue";
-import {
-  isValidDatetimeLocalValue,
-  mapCheckboxTrue
-} from "#blokkli/helpers/runtimeHelpers";
 import { BK_VISIBLE_LANGUAGES } from "./../../../../../global/constants";
 const { state, $t: $blokkliText } = useBlokkli();
 const emit = defineEmits(["update"]);
@@ -113,12 +109,17 @@ const showLabel = computed(() => {
 const label = computed(
   () => $blokkliText(`blockOption_${props.property}_label`, props.option.label)
 );
-const description = computed(
-  () => $blokkliText(
-    `blockOption_${props.property}_description`,
-    props.option.description
-  )
-);
+const description = computed(() => {
+  if (!props.option.description) {
+    return null;
+  }
+  const key = `blockOption_${props.property}_description`;
+  const translation = $blokkliText(key, props.option.description);
+  if (key === translation) {
+    return null;
+  }
+  return translation;
+});
 const checkboxOptions = computed(() => {
   if (props.option.type !== "checkboxes") {
     return [];
@@ -140,47 +141,12 @@ const checkboxOptions = computed(() => {
     };
   });
 });
-const validCheckboxValues = computed(
-  () => checkboxOptions.value.map((v) => v.value)
-);
-const validateValue = (v) => {
-  if (props.option.type === "text") {
-    if (typeof v === "string") {
-      return v;
-    }
-  } else if (props.option.type === "datetime-local") {
-    if (typeof v === "string" && isValidDatetimeLocalValue(v)) {
-      return v;
-    }
-  } else if (props.option.type === "color") {
-    if (typeof v === "string" && v.startsWith("#") && v.length === 7) {
-      return v;
-    }
-  } else if (props.option.type === "radios" && typeof v === "string") {
-    if (props.option.options[v]) {
-      return v;
-    }
-  } else if (props.option.type === "checkbox") {
-    return mapCheckboxTrue(v);
-  } else if (props.option.type === "checkboxes") {
-    const items = Array.isArray(v) ? v : (typeof v === "string" ? v : "").split(",");
-    return items.filter((key) => {
-      return validCheckboxValues.value.includes(key);
-    }).join(",");
-  } else if (props.option.type === "range" || props.option.type === "number") {
-    if (typeof v === "number") {
-      return v.toString();
-    } else if (typeof v === "string") {
-      return v;
-    }
-  }
-};
 const value = computed({
   get() {
-    return validateValue(props.mutatedValue);
+    return props.mutatedValue;
   },
-  set(value2) {
-    emit("update", value2 === void 0 ? "" : value2);
+  set(v) {
+    emit("update", v);
   }
 });
 </script>

package/dist/runtime/editor/features/options/Form/Item.vue.d.ts

@@ -6,9 +6,9 @@ type __VLS_Props = {
     isGrouped?: boolean;
 };
 declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
-    update: (data: string) => any;
+    update: (data: unknown) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
-    onUpdate?: ((data: string) => any) | undefined;
+    onUpdate?: ((data: unknown) => any) | undefined;
 }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/editor/features/options/Form/Number/index.d.vue.ts

@@ -2,7 +2,7 @@ declare const _default: typeof __VLS_export;
 export default _default;
 declare const __VLS_export: import("vue").DefineComponent<{
     label: string;
-    modelValue?: string;
+    modelValue?: number;
     min: number;
     max: number;
     type?: string;
@@ -10,7 +10,7 @@ declare const __VLS_export: import("vue").DefineComponent<{
     "update:modelValue": (...args: any[]) => void;
 }, string, import("vue").PublicProps, Readonly<{
     label: string;
-    modelValue?: string;
+    modelValue?: number;
     min: number;
     max: number;
     type?: string;
@@ -18,5 +18,5 @@ declare const __VLS_export: import("vue").DefineComponent<{
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
 }>, {
     type: string;
-    modelValue: string;
+    modelValue: number;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

package/dist/runtime/editor/features/options/Form/Number/index.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="bk-blokkli-item-options-number">
-    <button :disabled="numeric <= min" @click.stop.prevent="decrement">
+    <button :disabled="modelValue <= min" @click.stop.prevent="decrement">
       <Icon name="bk_mdi_remove" />
     </button>
     <input
@@ -13,7 +13,7 @@
 }"
     />
 
-    <button :disabled="numeric >= max" @click.stop.prevent="increment">
+    <button :disabled="modelValue >= max" @click.stop.prevent="increment">
       <Icon name="bk_mdi_add" />
     </button>
   </div>
@@ -24,7 +24,7 @@ import { computed } from "#imports";
 import { Icon } from "#blokkli/editor/components";
 const props = defineProps({
   label: { type: String, required: true },
-  modelValue: { type: String, required: false, default: "0" },
+  modelValue: { type: Number, required: false, default: 0 },
   min: { type: Number, required: true },
   max: { type: Number, required: true },
   type: { type: String, required: false, default: "text" }
@@ -33,27 +33,17 @@ const width = computed(() => props.max.toString().length * 30);
 const emit = defineEmits(["update:modelValue"]);
 const text = computed({
   get() {
-    return props.modelValue;
+    return String(props.modelValue);
   },
   set(v) {
-    emit("update:modelValue", (v === void 0 ? "" : v).toString());
+    emit("update:modelValue", Number(v) || 0);
   }
 });
-const numeric = computed(() => {
-  if (props.modelValue === void 0) {
-    return 0;
-  }
-  const v = Number.parseInt(props.modelValue);
-  if (Number.isNaN(v)) {
-    return 0;
-  }
-  return v;
-});
 function increment() {
-  text.value = (numeric.value + 1).toString();
+  emit("update:modelValue", props.modelValue + 1);
 }
 function decrement() {
-  text.value = (numeric.value - 1).toString();
+  emit("update:modelValue", props.modelValue - 1);
 }
 </script>
 

package/dist/runtime/editor/features/options/Form/Number/index.vue.d.ts

@@ -2,7 +2,7 @@ declare const _default: typeof __VLS_export;
 export default _default;
 declare const __VLS_export: import("vue").DefineComponent<{
     label: string;
-    modelValue?: string;
+    modelValue?: number;
     min: number;
     max: number;
     type?: string;
@@ -10,7 +10,7 @@ declare const __VLS_export: import("vue").DefineComponent<{
     "update:modelValue": (...args: any[]) => void;
 }, string, import("vue").PublicProps, Readonly<{
     label: string;
-    modelValue?: string;
+    modelValue?: number;
     min: number;
     max: number;
     type?: string;
@@ -18,5 +18,5 @@ declare const __VLS_export: import("vue").DefineComponent<{
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
 }>, {
     type: string;
-    modelValue: string;
+    modelValue: number;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

package/dist/runtime/editor/features/options/Form/Range/index.d.vue.ts

@@ -2,7 +2,7 @@ declare const _default: typeof __VLS_export;
 export default _default;
 declare const __VLS_export: import("vue").DefineComponent<{
     label: string;
-    modelValue?: string;
+    modelValue?: number;
     min: number;
     max: number;
     step: number;
@@ -10,7 +10,7 @@ declare const __VLS_export: import("vue").DefineComponent<{
     "update:modelValue": (...args: any[]) => void;
 }, string, import("vue").PublicProps, Readonly<{
     label: string;
-    modelValue?: string;
+    modelValue?: number;
     min: number;
     max: number;
     step: number;