@blokkli/editor 2.0.0-alpha.58 → 2.0.0-alpha.59

package/dist/runtime/editor/components/EditProvider.vue

@@ -14,9 +14,8 @@
       :lang="ui.interfaceLanguage.value"
     >
       <Toolbar @loaded="toolbarLoaded = true" />
-      <div ref="viewportElement" class="bk bk-viewport">
-        <Messages />
-      </div>
+      <div ref="viewportElement" class="bk bk-viewport" />
+      <Messages />
       <Actions v-if="!isInitializing" />
       <div
         id="bk-banner-container"
@@ -117,6 +116,7 @@ import directiveProvider from "#blokkli/editor/providers/directive";
 import fieldsProvider from "#blokkli/editor/providers/fields";
 import iconsProvider from "#blokkli/editor/providers/icons";
 import permissionsProvider from "#blokkli/editor/providers/permissions";
+import userProvider from "#blokkli/editor/providers/user";
 import adaptersProvider from "#blokkli/editor/providers/adapters";
 import analyzeProviderFn from "#blokkli/editor/providers/analyze";
 import readabilityProviderFn from "#blokkli/editor/providers/readability";
@@ -124,6 +124,7 @@ import fieldValueProviderFn from "#blokkli/editor/providers/fieldValue";
 import dragdropProvider from "#blokkli/editor/providers/dragdrop";
 import cacheProvider from "#blokkli/editor/providers/cache";
 import workspacesProvider from "#blokkli/editor/providers/workspaces";
+import configProvider from "#blokkli/editor/providers/config";
 import { eventBus } from "#blokkli/editor/events";
 import "#blokkli-build/styles.css";
 import getAdapter from "#blokkli-build/edit-adapter";
@@ -145,7 +146,8 @@ import { allComponents } from "#blokkli-build/chunk-editing";
 import { falsy } from "#blokkli/helpers";
 import {
   addElementClasses,
-  useBlockRegistration
+  useBlockRegistration,
+  useGlobalBlokkliObject
 } from "#blokkli/editor/composables";
 const props = defineProps({
   entity: { type: null, required: false, default: void 0 },
@@ -194,6 +196,7 @@ const state = await editStateProvider(
   providerKey,
   props.permissions.filter(falsy)
 );
+const config = configProvider();
 const storage = await storageProvider(adapter, context);
 const plugins = pluginProvider();
 const debug = debugProvider(eventBus, storage);
@@ -212,12 +215,14 @@ const ui = uiProvider(
   context,
   element,
   mainLayoutElement,
-  viewportElement
+  viewportElement,
+  $t
 );
 const dom = domProvider(ui, debug, state, element);
 const theme = themeProvider(element);
 const blocks = blocksProvider(state, dom, context);
 const permissionsInstance = await permissionsProvider(adapter, blocks);
+const user = await userProvider(adapter);
 const selection = selectionProvider(blocks, permissionsInstance);
 const keyboard = keyboardProvider(eventBus);
 const animation = animationProvider(
@@ -336,14 +341,17 @@ const app = {
   fields,
   icons,
   permissions: permissionsInstance,
+  user,
   analyze,
   readability,
   fieldValue,
   dragdrop,
   cache,
-  workspaces
+  workspaces,
+  config
 };
 provide(INJECT_APP, app);
+useGlobalBlokkliObject().setApp(app);
 function textWithHighlight(title, text) {
   return `<strong>${title}</strong> ${text}`;
 }
@@ -450,12 +458,11 @@ onUnmounted(() => {
 });
 </script>
 
-<style>
+<style>/*! tailwindcss v4.2.4 | MIT License | https://tailwindcss.com */
 .bk.bk-viewport {
   position: relative;
-  grid-area: viewport
+  grid-area: viewport;
 }
-
 .bk-vars.bk-main-layout {
   pointer-events: none;
   position: fixed;
@@ -465,53 +472,40 @@ onUnmounted(() => {
   display: grid;
   height: 100vh;
   width: 100vw;
-
   --bk-toolbar-height: 40px;
-
-  grid-template-areas:
-    'toolbar toolbar      toolbar       toolbar     '
+  grid-template-areas: 'toolbar toolbar      toolbar       toolbar     '
     'left    right        right         right       '
     'left    mode         mode          mode        '
     'left    sidebar-left viewport      scrollbar-y '
     'left    sidebar-left banner        scrollbar-y '
     'left    breadcrumbs  breadcrumbs   breadcrumbs ';
   grid-template-columns: auto auto 1fr 16px;
-  grid-template-rows: var(--bk-toolbar-height) auto auto 1fr auto auto
+  grid-template-rows: var(--bk-toolbar-height) auto auto 1fr auto auto;
 }
-
-@media (min-width: 768px) {
-
-.bk-vars.bk-main-layout {
+@media (width >= 48rem) {
+  .bk-vars.bk-main-layout {
     --bk-toolbar-height: 50px;
-
-    grid-template-areas:
-      'toolbar toolbar      toolbar       toolbar     toolbar       right'
-      'left    mode         mode          mode        sidebar-right right'
+    grid-template-areas: 'toolbar toolbar      toolbar       toolbar     toolbar       right'
+      'left    mode         mode          scrollbar-y sidebar-right right'
       'left    sidebar-left viewport      scrollbar-y sidebar-right right'
       'left    sidebar-left banner        scrollbar-y sidebar-right right'
       'left    breadcrumbs  breadcrumbs   breadcrumbs sidebar-right right';
-
     grid-template-columns: auto auto 1fr 16px auto minmax(0, 50px);
-    grid-template-rows: var(--bk-toolbar-height) auto 1fr auto auto
-}
+    grid-template-rows: var(--bk-toolbar-height) auto 1fr auto auto;
   }
-
+}
 .bk.bk-canvas-overlay {
   position: fixed;
   top: 0px;
   left: 0px;
   z-index: calc(var(--bk-z-index-base) + 10000) /* "canvas-overlay" */;
   width: 100%;
-  height: 100%
+  height: 100%;
 }
-
 html.bk-isolate-provider [data-provider-uuid]:not([data-blokkli-provider-active='true']) {
-  display: none !important
+  display: none !important;
+}
+html.bk-html-root:not(.bk-use-animations) *,html.bk-html-root:not(.bk-use-animations) *:before,html.bk-html-root:not(.bk-use-animations) *:after {
+  transition: none !important;
 }
-
-html.bk-html-root:not(.bk-use-animations) *,
-  html.bk-html-root:not(.bk-use-animations) *:before,
-  html.bk-html-root:not(.bk-use-animations) *:after {
-    transition: none !important;
-  }
 </style>

package/dist/runtime/editor/components/FileDropHandler/index.vue

@@ -83,26 +83,30 @@ function onDrop(e) {
 }
 </script>
 
-<style>
-.bk-file-drop-enter-active .bk-file-drop-content, .bk-file-drop-leave-active .bk-file-drop-content {
-    transition-property: all;
-    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-    transition-duration: 300ms;
-    transition-timing-function: cubic-bezier(0.56, 0.04, 0.25, 1);
+<style>/*! tailwindcss v4.2.4 | MIT License | https://tailwindcss.com */
+:is(.bk-file-drop-enter-active,.bk-file-drop-leave-active) .bk-file-drop-content {
+  transition-property: all;
+  transition-timing-function: var(--bk-tw-ease, var(--default-transition-timing-function, cubic-bezier(0.4, 0, 0.2, 1)));
+  transition-duration: var(--bk-tw-duration, var(--default-transition-duration, 150ms));
+  --bk-tw-duration: 300ms;
+  transition-duration: 300ms;
+  --bk-tw-ease: cubic-bezier(0.56, 0.04, 0.25, 1);
+  transition-timing-function: cubic-bezier(0.56, 0.04, 0.25, 1);
 }
-  .bk-file-drop-enter-active .bk-file-drop-backdrop, .bk-file-drop-leave-active .bk-file-drop-backdrop {
-    transition-property: opacity;
-    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-    transition-duration: 200ms;
-    transition-timing-function: cubic-bezier(0.56, 0.04, 0.25, 1);
+:is(.bk-file-drop-enter-active,.bk-file-drop-leave-active) .bk-file-drop-backdrop {
+  transition-property: opacity;
+  transition-timing-function: var(--bk-tw-ease, var(--default-transition-timing-function, cubic-bezier(0.4, 0, 0.2, 1)));
+  transition-duration: var(--bk-tw-duration, var(--default-transition-duration, 150ms));
+  --bk-tw-duration: 200ms;
+  transition-duration: 200ms;
+  --bk-tw-ease: cubic-bezier(0.56, 0.04, 0.25, 1);
+  transition-timing-function: cubic-bezier(0.56, 0.04, 0.25, 1);
+}
+:is(.bk-file-drop-enter-from,.bk-file-drop-leave-to) .bk-file-drop-backdrop {
+  opacity: 0;
+}
+:is(.bk-file-drop-enter-from,.bk-file-drop-leave-to) .bk-file-drop-content {
+  opacity: 0;
+  transform: scale(0.8);
 }
-
-.bk-file-drop-enter-from .bk-file-drop-backdrop, .bk-file-drop-leave-to .bk-file-drop-backdrop {
-    opacity: 0;
-  }
-
-.bk-file-drop-enter-from .bk-file-drop-content, .bk-file-drop-leave-to .bk-file-drop-content {
-    opacity: 0;
-    transform: scale(0.8);
-  }
 </style>

package/dist/runtime/editor/components/FlexTextarea/index.d.vue.ts

@@ -28,8 +28,8 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {
     onSubmit?: (() => any) | undefined;
     "onUpdate:modelValue"?: ((value: string) => any) | undefined;
 }>, {
-    maxHeight: number;
     minHeight: number;
+    maxHeight: number;
     onBeforePaste: (data: ClipboardData) => boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;

package/dist/runtime/editor/components/FlexTextarea/index.vue

@@ -1,7 +1,10 @@
 <template>
   <div
     class="bk-flex-textarea _bk_relative"
-    :class="{ 'bk-is-scrollable': isScrollable }"
+    :class="{
+  'bk-is-scrollable': isScrollable,
+  '_bk_overflow-hidden': !isScrollable
+}"
     :style="{
   height: height + 'px'
 }"
@@ -13,7 +16,8 @@
       class="_bk_absolute _bk_top-0 _bk_left-0 _bk_size-full _bk_resize-none"
       :class="{
   'bk-form-input': textareaClass,
-  '_bk_overflow-y-auto': isScrollable
+  '_bk_overflow-y-auto': isScrollable,
+  '_bk_overflow-hidden': !isScrollable
 }"
       @keydown.capture.stop="onKeydown"
       @keyup.capture.stop
@@ -32,7 +36,7 @@ import {
   onMounted,
   useBlokkli
 } from "#imports";
-import { onBlokkliEvent } from "#blokkli/editor/composables";
+import { useAnimationFrame } from "#blokkli/editor/composables";
 import { ClipboardData } from "#blokkli/editor/helpers/clipboardData";
 import { textAutoReplace } from "#blokkli-build/editor-config";
 const GUILLEMET_LANGUAGES = ["de", "fr"];
@@ -307,7 +311,7 @@ function onPaste(e) {
     pushSnapshot();
   });
 }
-onBlokkliEvent("animationFrame", () => {
+useAnimationFrame(() => {
   const scrollHeight = textarea.value?.scrollHeight ?? props.minHeight;
   const newHeight = Math.max(scrollHeight, props.minHeight);
   height.value = props.maxHeight ? Math.min(newHeight, props.maxHeight) : newHeight;

package/dist/runtime/editor/components/FlexTextarea/index.vue.d.ts

@@ -28,8 +28,8 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {
     onSubmit?: (() => any) | undefined;
     "onUpdate:modelValue"?: ((value: string) => any) | undefined;
 }>, {
-    maxHeight: number;
     minHeight: number;
+    maxHeight: number;
     onBeforePaste: (data: ClipboardData) => boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;

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

@@ -1,6 +1,6 @@
 type __VLS_Props = {
     id: string;
-    label: string;
+    label?: string;
     options: {
         value: string;
         label: string;

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

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <div class="bk-form-label">
+    <div v-if="label" class="bk-form-label">
       {{ label }}<span v-if="required" class="bk-required-indicator">*</span>
     </div>
     <div
@@ -28,7 +28,7 @@
 <script setup>
 defineProps({
   id: { type: String, required: true },
-  label: { type: String, required: true },
+  label: { type: String, required: false },
   options: { type: Array, required: true },
   required: { type: Boolean, required: false },
   disabled: { type: Boolean, required: false },

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

@@ -1,6 +1,6 @@
 type __VLS_Props = {
     id: string;
-    label: string;
+    label?: string;
     options: {
         value: string;
         label: string;

package/dist/runtime/editor/components/Form/Datepicker/index.vue

@@ -1,50 +1,53 @@
 <template>
   <div
-    class="bk-datepicker"
+    class="bk-datepicker _bk_bg-white _bk_select-none _bk_border _bk_border-mono-300 _bk_rounded"
     :class="{
-  'bk-is-invalid': error
+  '_bk_ring-[3px] _bk_ring-red-normal/40 _bk_!border-red-normal': error
 }"
   >
-    <div class="bk-datepicker-header">
-      <button
-        type="button"
-        class="bk-datepicker-nav"
+    <div
+      class="_bk_flex _bk_items-center _bk_justify-between _bk_mb-15 _bk_p-10 _bk_border-b _bk_border-b-mono-300"
+    >
+      <ButtonAction
         :disabled="!canGoPrevious"
+        icon="bk_mdi_arrow_left_alt"
         @click="previousMonth"
-      >
-        <Icon name="bk_mdi_arrow_left_alt" />
-      </button>
-      <div class="bk-datepicker-title">{{ monthName }} {{ currentYear }}</div>
-      <button
-        type="button"
-        class="bk-datepicker-nav"
+      />
+      <div class="_bk_font-bold _bk_text-lg _bk_text-mono-900">
+        {{ monthName }} {{ currentYear }}
+      </div>
+      <ButtonAction
         :disabled="!canGoNext"
+        icon="bk_mdi_arrow_right_alt"
         @click="nextMonth"
-      >
-        <Icon name="bk_mdi_arrow_right_alt" />
-      </button>
+      />
     </div>
-    <div class="bk-datepicker-weekdays">
-      <div v-for="day in weekdays" :key="day" class="bk-datepicker-weekday">
+    <div class="_bk_grid _bk_grid-cols-7 _bk_px-10">
+      <div
+        v-for="day in weekdays"
+        :key="day"
+        class="_bk_text-center _bk_text-sm _bk_font-semibold _bk_text-mono-600 _bk_h-30 _bk_flex _bk_items-center _bk_justify-center"
+      >
         {{ day }}
       </div>
     </div>
-    <div class="bk-datepicker-days">
+    <div class="_bk_px-10 _bk_grid _bk_grid-cols-7 _bk_pb-10">
       <button
         v-for="day in calendarDays"
         :key="day.key"
         type="button"
-        class="bk-datepicker-day"
+        class="_bk_flex _bk_items-center _bk_justify-center _bk_py-3 _bk_disabled:cursor-not-allowed _bk_group"
+        :data-test="'datepicker-day-' + day.dateString"
         :disabled="disabled || day.isDisabled"
         @click="selectDate(day)"
       >
         <div
-          class="bk-datepicker-day-inner"
+          class="_bk_size-30 _bk_flex _bk_items-center _bk_justify-center _bk_rounded-full _bk_!leading-none _bk_text-sm _bk_text-mono-800 _bk_text-center _bk_border _bk_border-transparent _bk_ease-swing _bk_transition-transform _bk_duration-150 _bk_group-hover:bg-mono-200"
           :class="{
-  'bk-is-other-month': !day.isCurrentMonth,
-  'bk-is-today': day.isToday,
-  'bk-is-selected': day.isSelected,
-  'bk-is-disabled': day.isDisabled
+  '_bk_text-mono-400': !day.isCurrentMonth,
+  '_bk_border-mono-300': day.isToday,
+  '_bk_bg-accent-700 _bk_text-white _bk_font-bold _bk_scale-125 _bk_group-hover:bg-accent-800!': day.isSelected,
+  '_bk_!text-mono-300': day.isDisabled
 }"
         >
           {{ day.day }}
@@ -56,7 +59,7 @@
 
 <script setup>
 import { ref, computed, watch, useBlokkli } from "#imports";
-import { Icon } from "#blokkli/editor/components";
+import ButtonAction from "#blokkli/editor/components/ButtonAction/index.vue";
 const props = defineProps({
   min: { type: String, required: false },
   max: { type: String, required: false },
@@ -196,152 +199,3 @@ watch(modelValue, (newValue) => {
   }
 });
 </script>
-
-<style>
-.bk .bk-datepicker {
-    user-select: none;
-    border-radius: 6px;
-    border-width: 1px;
-    --bk-tw-border-opacity: 1;
-    border-color: rgb(var(--bk-theme-mono-300) / var(--bk-tw-border-opacity, 1))
-}
-    .bk .bk-datepicker.bk-is-invalid {
-    --bk-tw-border-opacity: 1 !important;
-    border-color: rgb(var(--bk-theme-red-normal) / var(--bk-tw-border-opacity, 1)) !important;
-    --bk-tw-ring-offset-shadow: var(--bk-tw-ring-inset) 0 0 0 var(--bk-tw-ring-offset-width) var(--bk-tw-ring-offset-color);
-    --bk-tw-ring-shadow: var(--bk-tw-ring-inset) 0 0 0 calc(3px + var(--bk-tw-ring-offset-width)) var(--bk-tw-ring-color);
-    box-shadow: var(--bk-tw-ring-offset-shadow), var(--bk-tw-ring-shadow), var(--bk-tw-shadow, 0 0 #0000);
-    --bk-tw-ring-color: rgb(var(--bk-theme-red-normal) / 0.4)
-}
-  .bk .bk-datepicker-header {
-    margin-bottom: 15px;
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    border-bottom-width: 1px;
-    --bk-tw-border-opacity: 1;
-    border-bottom-color: rgb(var(--bk-theme-mono-300) / var(--bk-tw-border-opacity, 1));
-    padding: 10px
-}
-  .bk .bk-datepicker-nav {
-    display: flex;
-    width: 30px;
-    height: 30px;
-    align-items: center;
-    justify-content: center;
-    border-radius: 6px
-}
-  .bk .bk-datepicker-nav:disabled {
-    cursor: not-allowed;
-    opacity: 0.5
-}
-  .bk .bk-datepicker-nav:not([disabled]):hover {
-    --bk-tw-bg-opacity: 1;
-    background-color: rgb(var(--bk-theme-mono-100) / var(--bk-tw-bg-opacity, 1))
-}
-  .bk .bk-datepicker-nav .bk-icon {
-    width: 20px;
-    height: 20px
-}
-  .bk .bk-datepicker-nav .bk-icon svg {
-    width: 100%;
-    height: 100%;
-    fill: rgb(var(--bk-theme-mono-700) / 1)
-}
-  .bk .bk-datepicker-title {
-    font-size: 18px;
-    line-height: 28px;
-    font-weight: 700;
-    --bk-tw-text-opacity: 1;
-    color: rgb(var(--bk-theme-mono-900) / var(--bk-tw-text-opacity, 1))
-}
-  .bk .bk-datepicker-weekdays,
-  .bk .bk-datepicker-days {
-    padding-left: 10px;
-    padding-right: 10px
-}
-  .bk .bk-datepicker-weekdays {
-    display: grid;
-    grid-template-columns: repeat(7, minmax(0, 1fr))
-}
-  .bk .bk-datepicker-weekday {
-    text-align: center;
-    font-size: 14px;
-    line-height: 20px;
-    font-weight: 600;
-    --bk-tw-text-opacity: 1;
-    color: rgb(var(--bk-theme-mono-600) / var(--bk-tw-text-opacity, 1));
-    display: flex;
-    height: 30px;
-    align-items: center;
-    justify-content: center
-}
-  .bk .bk-datepicker-days {
-    display: grid;
-    grid-template-columns: repeat(7, minmax(0, 1fr));
-    padding-bottom: 10px
-}
-  .bk .bk-datepicker-day {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    padding-top: 3px;
-    padding-bottom: 3px
-}
-  .bk .bk-datepicker-day:disabled {
-    cursor: not-allowed
-}
-  .bk .bk-datepicker-day-inner {
-    display: flex;
-    width: 30px;
-    height: 30px;
-    align-items: center;
-    justify-content: center;
-    border-radius: 9999px;
-    line-height: 1 !important;
-    text-align: center;
-    font-size: 14px;
-    line-height: 20px;
-    --bk-tw-text-opacity: 1;
-    color: rgb(var(--bk-theme-mono-800) / var(--bk-tw-text-opacity, 1));
-    border-width: 1px;
-    border-color: transparent;
-    transition-property: all;
-    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-    transition-duration: 150ms;
-    transition-timing-function: cubic-bezier(0.56, 0.04, 0.25, 1)
-}
-  .bk .bk-datepicker-day-inner.bk-is-other-month {
-    --bk-tw-text-opacity: 1;
-    color: rgb(var(--bk-theme-mono-400) / var(--bk-tw-text-opacity, 1))
-}
-  .bk .bk-datepicker-day-inner.bk-is-today {
-    --bk-tw-border-opacity: 1;
-    border-color: rgb(var(--bk-theme-mono-300) / var(--bk-tw-border-opacity, 1))
-}
-  .bk .bk-datepicker-day-inner.bk-is-selected {
-    --bk-tw-bg-opacity: 1;
-    background-color: rgb(var(--bk-scheme-normal, var(--bk-theme-accent-600)) / var(--bk-tw-bg-opacity, 1));
-    font-weight: 700;
-    --bk-tw-text-opacity: 1;
-    color: rgb(255 255 255 / var(--bk-tw-text-opacity, 1));
-    --bk-tw-scale-x: 1.25;
-    --bk-tw-scale-y: 1.25;
-    transform: translate(var(--bk-tw-translate-x), var(--bk-tw-translate-y)) rotate(var(--bk-tw-rotate)) skewX(var(--bk-tw-skew-x)) skewY(var(--bk-tw-skew-y)) scaleX(var(--bk-tw-scale-x)) scaleY(var(--bk-tw-scale-y))
-}
-  .bk .bk-datepicker-day-inner.bk-is-disabled {
-    --bk-tw-text-opacity: 1;
-    color: rgb(var(--bk-theme-mono-300) / var(--bk-tw-text-opacity, 1))
-}
-  .bk .bk-datepicker-day:hover .bk-datepicker-day-inner {
-    --bk-tw-bg-opacity: 1;
-    background-color: rgb(var(--bk-theme-mono-200) / var(--bk-tw-bg-opacity, 1))
-}
-  .bk .bk-datepicker-day:hover .bk-datepicker-day-inner.bk-is-selected {
-    --bk-tw-bg-opacity: 1;
-    background-color: rgb(var(--bk-scheme-normal, var(--bk-theme-accent-600)) / var(--bk-tw-bg-opacity, 1))
-}
-  .bk .bk-datepicker-day:hover .bk-datepicker-day-inner.bk-is-disabled {
-    background-color: transparent
-}
-</style>

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

@@ -0,0 +1,36 @@
+type __VLS_Props = {
+    id: string;
+    label: string;
+    description?: string;
+    placeholder?: string;
+    required?: boolean;
+    disabled?: boolean;
+    min?: number;
+    max?: number;
+    step?: number;
+    /**
+     * When true, an empty input emits `undefined`. The placeholder defaults to
+     * "Auto" if no explicit placeholder is given.
+     */
+    nullable?: boolean;
+    /**
+     * If true, the model is only updated on `change` (blur / Enter), matching
+     * Vue's `v-model.lazy` behavior. Defaults to eager (per-keystroke).
+     */
+    lazy?: boolean;
+    hideLabel?: boolean;
+};
+type __VLS_ModelProps = {
+    modelValue?: number | undefined;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {
+    focus: () => any;
+    select: () => any;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: number | undefined) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: number | undefined) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/editor/components/Form/Number/index.vue

@@ -0,0 +1,79 @@
+<template>
+  <div>
+    <label v-if="!hideLabel" class="bk-form-label" :for="id">
+      {{ label }}<span v-if="required" class="bk-required-indicator">*</span>
+    </label>
+    <div class="bk-form-text">
+      <input
+        :id
+        ref="inputRef"
+        :value="displayValue"
+        type="number"
+        class="bk-form-input"
+        :placeholder="resolvedPlaceholder"
+        :required
+        :disabled
+        :min
+        :max
+        :step
+        @[updateEvent]="onUpdate"
+      />
+      <button
+        v-show="nullable && value !== void 0"
+        type="button"
+        :title="$t('clearInput', 'Clear input')"
+        @click.prevent="value = void 0"
+      >
+        <Icon name="bk_mdi_close" />
+      </button>
+    </div>
+    <div v-if="description" class="bk-form-description">{{ description }}</div>
+  </div>
+</template>
+
+<script setup>
+import { Icon } from "#blokkli/editor/components";
+import { computed, useBlokkli, useTemplateRef } from "#imports";
+const props = 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 },
+  min: { type: Number, required: false },
+  max: { type: Number, required: false },
+  step: { type: Number, required: false },
+  nullable: { type: Boolean, required: false },
+  lazy: { type: Boolean, required: false },
+  hideLabel: { type: Boolean, required: false }
+});
+const updateEvent = computed(() => props.lazy ? "change" : "input");
+const value = defineModel({ type: null });
+const displayValue = computed(
+  () => value.value === void 0 ? "" : String(value.value)
+);
+const { $t } = useBlokkli();
+const resolvedPlaceholder = computed(() => {
+  if (props.placeholder) return props.placeholder;
+  return props.nullable ? $t("auto", "Auto") : "";
+});
+function onUpdate(event) {
+  const raw = event.target.value.trim();
+  if (raw === "") {
+    if (props.nullable) {
+      value.value = void 0;
+    }
+    return;
+  }
+  const parsed = Number(raw);
+  if (Number.isFinite(parsed)) {
+    value.value = parsed;
+  }
+}
+const inputRef = useTemplateRef("inputRef");
+defineExpose({
+  focus: () => inputRef.value?.focus(),
+  select: () => inputRef.value?.select()
+});
+</script>