@blokkli/editor 2.0.0-alpha.2 → 2.0.0-alpha.20

package/dist/runtime/components/Edit/Features/Validations/SidebarItem/index.vue

@@ -1,7 +1,7 @@
 <template>
   <button class="bk-validation-item" @click.prevent="onClick">
     <div v-if="block" class="bk-validation-item-header">
-      <ItemIcon :bundle="block.itemBundle" />
+      <ItemIcon :bundle="block.bundle" />
       <div>{{ itemBundle?.label }}</div>
     </div>
     <div v-html="message" />
@@ -18,19 +18,19 @@ const props = defineProps({
   entityType: { type: String, required: false },
   entityUuid: { type: String, required: false }
 });
-const { runtimeConfig, eventBus, dom, types } = useBlokkli();
+const { runtimeConfig, eventBus, types, blocks } = useBlokkli();
 const isBlock = computed(
   () => props.entityType === runtimeConfig.itemEntityType
 );
 const block = computed(() => {
   if (isBlock.value && props.entityUuid) {
-    return dom.findBlock(props.entityUuid);
+    return blocks.getBlock(props.entityUuid);
   }
   return null;
 });
 const itemBundle = computed(() => {
-  if (block.value?.itemBundle) {
-    return types.getBlockBundleDefinition(block.value.itemBundle);
+  if (block.value?.bundle) {
+    return types.getBlockBundleDefinition(block.value.bundle);
   }
   return null;
 });

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

@@ -10,7 +10,7 @@
 import {
   featureComponents
 } from "#blokkli-build/features";
-import { useBlokkli, onMounted, nextTick, computed } from "#imports";
+import { useBlokkli, computed, watch } from "#imports";
 const emit = defineEmits(["loaded"]);
 const { adapter, features, ui, debug } = useBlokkli();
 const logger = debug.createLogger("Features");
@@ -37,12 +37,22 @@ const availableFeatures = computed(() => {
     return v.id;
   });
 });
-onMounted(() => {
-  nextTick(() => {
-    emit("loaded");
-    logger.log("Features loaded", renderedFeatures.value);
-  });
-});
+const hasLoadedFeatures = computed(
+  () => renderedFeatures.value.length === availableFeatures.value.length
+);
+const unwatchInit = watch(
+  hasLoadedFeatures,
+  (hasLoaded) => {
+    if (hasLoaded) {
+      emit("loaded");
+      logger.log("Features loaded", renderedFeatures.value);
+      unwatchInit();
+    }
+  },
+  {
+    immediate: true
+  }
+);
 </script>
 
 <script>

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

@@ -0,0 +1,198 @@
+<template>
+  <div
+    class="bk-datepicker"
+    :class="{
+  'bk-is-invalid': error
+}"
+  >
+    <div class="bk-datepicker-header">
+      <button
+        type="button"
+        class="bk-datepicker-nav"
+        :disabled="!canGoPrevious"
+        @click="previousMonth"
+      >
+        <Icon name="arrow-left" />
+      </button>
+      <div class="bk-datepicker-title">{{ monthName }} {{ currentYear }}</div>
+      <button
+        type="button"
+        class="bk-datepicker-nav"
+        :disabled="!canGoNext"
+        @click="nextMonth"
+      >
+        <Icon name="arrow-right" />
+      </button>
+    </div>
+    <div class="bk-datepicker-weekdays">
+      <div v-for="day in weekdays" :key="day" class="bk-datepicker-weekday">
+        {{ day }}
+      </div>
+    </div>
+    <div class="bk-datepicker-days">
+      <button
+        v-for="day in calendarDays"
+        :key="day.key"
+        type="button"
+        class="bk-datepicker-day"
+        :disabled="disabled || day.isDisabled"
+        @click="selectDate(day)"
+      >
+        <div
+          class="bk-datepicker-day-inner"
+          :class="{
+  'bk-is-other-month': !day.isCurrentMonth,
+  'bk-is-today': day.isToday,
+  'bk-is-selected': day.isSelected,
+  'bk-is-disabled': day.isDisabled
+}"
+        >
+          {{ day.day }}
+        </div>
+      </button>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed, watch, useBlokkli } from "#imports";
+import { Icon } from "#blokkli/components";
+const props = defineProps({
+  min: { type: String, required: false },
+  max: { type: String, required: false },
+  disabled: { type: Boolean, required: false },
+  error: { type: Boolean, required: false }
+});
+const { ui } = useBlokkli();
+const modelValue = defineModel({ type: String });
+const weekdays = computed(() => {
+  const formatter = new Intl.DateTimeFormat(ui.locale.value, {
+    weekday: "short"
+  });
+  const days = [];
+  for (let i = 0; i < 7; i++) {
+    const date = new Date(2023, 0, 2 + i);
+    days.push(formatter.format(date));
+  }
+  return days;
+});
+const monthNames = computed(() => {
+  const formatter = new Intl.DateTimeFormat(ui.locale.value, { month: "long" });
+  const months = [];
+  for (let i = 0; i < 12; i++) {
+    const date = new Date(2023, i, 1);
+    months.push(formatter.format(date));
+  }
+  return months;
+});
+const initDate = modelValue.value ? new Date(modelValue.value) : /* @__PURE__ */ new Date();
+const currentMonth = ref(initDate.getMonth());
+const currentYear = ref(initDate.getFullYear());
+const monthName = computed(() => monthNames.value[currentMonth.value]);
+const canGoPrevious = computed(() => {
+  if (props.disabled) {
+    return false;
+  }
+  if (!props.min) {
+    return true;
+  }
+  const prevMonth = currentMonth.value === 0 ? 11 : currentMonth.value - 1;
+  const prevYear = currentMonth.value === 0 ? currentYear.value - 1 : currentYear.value;
+  const lastDayOfPrevMonth = new Date(prevYear, prevMonth + 1, 0);
+  const lastDayString = formatDate(lastDayOfPrevMonth);
+  return lastDayString >= props.min;
+});
+const canGoNext = computed(() => {
+  if (props.disabled) {
+    return false;
+  }
+  if (!props.max) {
+    return true;
+  }
+  const nextMonth2 = currentMonth.value === 11 ? 0 : currentMonth.value + 1;
+  const nextYear = currentMonth.value === 11 ? currentYear.value + 1 : currentYear.value;
+  const firstDayOfNextMonth = new Date(nextYear, nextMonth2, 1);
+  const firstDayString = formatDate(firstDayOfNextMonth);
+  return firstDayString <= props.max;
+});
+function previousMonth() {
+  if (currentMonth.value === 0) {
+    currentMonth.value = 11;
+    currentYear.value--;
+  } else {
+    currentMonth.value--;
+  }
+}
+function nextMonth() {
+  if (currentMonth.value === 11) {
+    currentMonth.value = 0;
+    currentYear.value++;
+  } else {
+    currentMonth.value++;
+  }
+}
+const calendarDays = computed(() => {
+  const firstDay = new Date(currentYear.value, currentMonth.value, 1);
+  const lastDay = new Date(currentYear.value, currentMonth.value + 1, 0);
+  let firstDayOfWeek = firstDay.getDay() - 1;
+  if (firstDayOfWeek < 0) firstDayOfWeek = 6;
+  const days = [];
+  const prevMonthLastDay = new Date(currentYear.value, currentMonth.value, 0);
+  for (let i = firstDayOfWeek - 1; i >= 0; i--) {
+    const day = prevMonthLastDay.getDate() - i;
+    const date = new Date(currentYear.value, currentMonth.value - 1, day);
+    days.push(createCalendarDay(date, false));
+  }
+  for (let day = 1; day <= lastDay.getDate(); day++) {
+    const date = new Date(currentYear.value, currentMonth.value, day);
+    days.push(createCalendarDay(date, true));
+  }
+  const remainingDays = 42 - days.length;
+  for (let day = 1; day <= remainingDays; day++) {
+    const date = new Date(currentYear.value, currentMonth.value + 1, day);
+    days.push(createCalendarDay(date, false));
+  }
+  return days;
+});
+function createCalendarDay(date, isCurrentMonth) {
+  const dateString = formatDate(date);
+  const today = /* @__PURE__ */ new Date();
+  const todayString = formatDate(today);
+  let isDisabled = false;
+  if (props.min && dateString < props.min) {
+    isDisabled = true;
+  }
+  if (props.max && dateString > props.max) {
+    isDisabled = true;
+  }
+  return {
+    day: date.getDate(),
+    date,
+    dateString,
+    key: dateString,
+    isCurrentMonth,
+    isToday: dateString === todayString,
+    isSelected: dateString === modelValue.value,
+    isDisabled
+  };
+}
+function formatDate(date) {
+  const year = date.getFullYear();
+  const month = String(date.getMonth() + 1).padStart(2, "0");
+  const day = String(date.getDate()).padStart(2, "0");
+  return `${year}-${month}-${day}`;
+}
+function selectDate(day) {
+  if (day.isDisabled || props.disabled) {
+    return;
+  }
+  modelValue.value = day.dateString;
+}
+watch(modelValue, (newValue) => {
+  if (newValue) {
+    const date = new Date(newValue);
+    currentMonth.value = date.getMonth();
+    currentYear.value = date.getFullYear();
+  }
+});
+</script>

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

@@ -0,0 +1,15 @@
+type __VLS_Props = {
+    min?: string;
+    max?: string;
+    disabled?: boolean;
+    error?: boolean;
+};
+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/Group/index.vue.d.ts

@@ -2,14 +2,12 @@ type __VLS_Props = {
     title?: string;
     horizontal?: boolean;
 };
-declare const __VLS_ctx: InstanceType<__VLS_PickNotAny<typeof __VLS_self, new () => {}>>;
 declare var __VLS_1: {}, __VLS_3: {};
-type __VLS_Slots = __VLS_PrettifyGlobal<__VLS_OmitStringIndex<typeof __VLS_ctx.$slots> & {
+type __VLS_Slots = {} & {
     addon?: (props: typeof __VLS_1) => any;
 } & {
     default?: (props: typeof __VLS_3) => any;
-}>;
-declare const __VLS_self: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+};
 declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
 export default _default;

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

@@ -1,9 +1,7 @@
-declare const __VLS_ctx: InstanceType<__VLS_PickNotAny<typeof __VLS_self, new () => {}>>;
 declare var __VLS_1: {};
-type __VLS_Slots = __VLS_PrettifyGlobal<__VLS_OmitStringIndex<typeof __VLS_ctx.$slots> & {
+type __VLS_Slots = {} & {
     default?: (props: typeof __VLS_1) => any;
-}>;
-declare const __VLS_self: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+};
 declare const __VLS_component: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
 export default _default;

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,34 @@
+<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 },
+  type: { type: String, required: false }
+});
+const value = defineModel({ type: String });
+</script>

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

@@ -0,0 +1,20 @@
+type __VLS_Props = {
+    id: string;
+    label: string;
+    description?: string;
+    placeholder?: string;
+    required?: boolean;
+    disabled?: boolean;
+    minlength?: string | number;
+    maxlength?: string | number;
+    type?: 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/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/Form/Toggle/index.vue

@@ -1,9 +1,10 @@
 <template>
   <label class="bk-checkbox-toggle">
+    <slot />
     <input v-model="value" type="checkbox" class="peer" :disabled />
     <div class="bk-checkbox-toggle-toggle" />
-    <div class="bk-checkbox-toggle-label">
-      <div>{{ label }}</div>
+    <div v-if="label || description" class="bk-checkbox-toggle-label">
+      <div v-if="label">{{ label }}</div>
       <div v-if="description">
         {{ description }}
       </div>
@@ -13,7 +14,7 @@
 
 <script setup>
 defineProps({
-  label: { type: String, required: true },
+  label: { type: String, required: false },
   description: { type: String, required: false },
   disabled: { type: Boolean, required: false }
 });

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

@@ -1,14 +1,24 @@
 type __VLS_Props = {
-    label: string;
+    label?: string;
     description?: string;
     disabled?: boolean;
 };
 type __VLS_PublicProps = __VLS_Props & {
     modelValue?: boolean;
 };
-declare const _default: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_component: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:modelValue": (value: boolean | undefined) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
     "onUpdate:modelValue"?: ((value: boolean | undefined) => any) | undefined;
 }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
 export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

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/FormOverlay/index.vue.d.ts

@@ -14,8 +14,9 @@ declare const _default: __VLS_WithSlots<import("vue").DefineComponent<{
 }> & Readonly<{
     onClose?: (() => any) | undefined;
 }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
-    default?: ((props: {}) => any) | undefined;
-    footer?: ((props: {}) => any) | undefined;
+    default?: (props: {}) => any;
+} & {
+    footer?: (props: {}) => any;
 }>;
 export default _default;
 type __VLS_WithSlots<T, S> = T & {