@blokkli/editor 2.0.0-alpha.31 → 2.0.0-alpha.33

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

@@ -1,28 +1,39 @@
 <template>
   <Teleport :to="ui.mainLayoutElement.value">
-    <Loading v-if="isLoading" />
     <Transition name="bk-library-edit-header">
-      <header v-show="isLoaded" class="bk bk-library-edit-overlay-header">
-        <h2>
-          <span>{{ title }}</span>
-          <span v-if="label">&nbsp;{{ label }}</span>
-        </h2>
-        <button @click.prevent="closeOverlay">
-          <Icon name="bk_mdi_arrow_left_alt" />
-          <span>{{ $t("libraryItemEditOverlayBack", "Back to page") }}</span>
-        </button>
-      </header>
+      <div
+        v-show="isLoaded"
+        class="bk bk-nested-editor-overlay"
+        :class="'bk-is-' + theme"
+      >
+        <Icon :name="icon" />
+        <header>
+          <h2>
+            <span>{{ title }}</span>
+          </h2>
+          <button @click.prevent="closeOverlay">
+            <Icon name="bk_mdi_arrow_left_alt" />
+            <span>{{ backLabel }}</span>
+          </button>
+        </header>
+      </div>
     </Transition>
     <Transition
       :css="false"
+      @before-enter="onBeforeEnter"
       @enter="onEnter"
       @after-enter="onAfter"
       @enter-cancelled="onAfter"
+      @before-leave="onBeforeLeave"
       @leave="onLeave"
       @after-leave="onAfterLeave"
       @leave-cancelled="onAfterLeave"
     >
-      <div v-show="isLoaded" class="bk bk-library-edit-overlay">
+      <div
+        v-show="isLoaded"
+        class="bk bk-library-edit-overlay"
+        :class="'bk-is-' + theme"
+      >
         <iframe
           ref="iframe"
           :src="url"
@@ -35,19 +46,27 @@
 </template>
 
 <script setup>
-import { ref, useBlokkli, useTemplateRef } from "#imports";
-import { Icon, Loading } from "#blokkli/editor/components";
+import {
+  computed,
+  onBeforeUnmount,
+  onMounted,
+  ref,
+  useBlokkli,
+  useTemplateRef
+} from "#imports";
+import { Icon } from "#blokkli/editor/components";
 import { onBroadcastEvent } from "#blokkli/editor/composables";
 const props = defineProps({
   url: { type: String, required: true },
   uuid: { type: String, required: true },
   title: { type: String, required: true },
+  theme: { type: String, required: true },
+  icon: { type: null, required: true },
   blockUuid: { type: String, required: false },
-  element: { type: null, required: false },
-  label: { type: String, required: false }
+  element: { type: null, required: false }
 });
-const { $t, ui, dom, blocks } = useBlokkli();
-const DURATION = 530;
+const { $t, ui, dom, blocks, state } = useBlokkli();
+const DURATION = 600;
 const emit = defineEmits(["submit", "close"]);
 function getOriginatingElement() {
   if (props.element) {
@@ -61,69 +80,127 @@ function getOriginatingElement() {
   }
   return null;
 }
-function onEnter(el, done) {
+const backLabel = computed(() => {
+  const entityLabel = state.entity.value.label;
+  if (!entityLabel) {
+    return $t("libraryItemEditOverlayBack", "Back to page");
+  }
+  return $t("libraryItemEditOverlayBackWithPage", 'Back to "@label"').replace(
+    "@label",
+    entityLabel
+  );
+});
+const FADE_DURATION = 150;
+const EASING = "cubic-bezier(0.56, 0.04, 0.25, 1)";
+let pendingTimeouts = [];
+let raf = null;
+function cancelPendingTimeouts() {
+  pendingTimeouts.forEach((id) => window.clearTimeout(id));
+  pendingTimeouts = [];
+}
+function withTimeout(callback, duration) {
+  const id = window.setTimeout(callback, duration);
+  pendingTimeouts.push(id);
+}
+function onBeforeEnter(el) {
+  cancelPendingTimeouts();
   if (el instanceof HTMLElement) {
-    const originating = getOriginatingElement();
-    console.log(originating);
-    if (!originating) {
-      done();
-      isLoading.value = false;
-      return;
-    }
-    const originatingRect = originating.getBoundingClientRect();
-    const overlayRect = el.getBoundingClientRect();
-    const offsetX = originatingRect.x - overlayRect.x + originatingRect.width / 2;
-    const offsetY = originatingRect.y - overlayRect.y + originatingRect.height / 2;
-    el.style.transform = `translate(${offsetX}px, ${offsetY}px) scale(0, 0)`;
-    setTimeout(() => {
-      el.style.transitionDuration = DURATION + "ms";
-      el.style.transitionTimingFunction = "cubic-bezier(0.56, 0.04, 0.25, 1)";
-      el.style.transitionProperty = "transform";
-      el.style.transformOrigin = "0px 0px";
-      el.style.transform = "translate(0px, 0px)";
-    }, 10);
-    setTimeout(() => {
-      done();
-      isLoading.value = false;
-    }, DURATION);
+    el.style.transition = "none";
+    el.style.opacity = "0";
+  }
+}
+function onEnter(el, done) {
+  isLoading.value = false;
+  if (raf) {
+    window.cancelAnimationFrame(raf);
+  }
+  if (!(el instanceof HTMLElement)) {
+    done();
+    return;
+  }
+  const originating = getOriginatingElement();
+  if (!originating) {
+    done();
+    return;
   }
+  const originatingRect = originating.getBoundingClientRect();
+  const overlayRect = el.getBoundingClientRect();
+  const scaleX = originatingRect.width / overlayRect.width;
+  const scaleY = originatingRect.height / overlayRect.height;
+  const offsetX = originatingRect.x - overlayRect.x;
+  const offsetY = originatingRect.y - overlayRect.y;
+  el.style.transition = "none";
+  el.style.opacity = "0";
+  el.style.transformOrigin = "0px 0px";
+  el.style.transform = `translate(${offsetX}px, ${offsetY}px) scale(${scaleX}, ${scaleY})`;
+  el.getBoundingClientRect();
+  raf = requestAnimationFrame(() => {
+    el.style.transition = `opacity ${FADE_DURATION}ms ease-out`;
+    el.style.opacity = "1";
+    withTimeout(() => {
+      el.style.transition = `transform ${DURATION}ms ${EASING}`;
+      el.style.transform = "translate(0px, 0px) scale(1, 1)";
+      withTimeout(() => {
+        pendingTimeouts = [];
+        done();
+      }, DURATION);
+    }, FADE_DURATION);
+  });
 }
 function onAfter(el) {
   if (el instanceof HTMLElement) {
     el.style.transform = "";
-    el.style.transitionDuration = "";
+    el.style.transition = "";
     el.style.opacity = "";
-    el.style.transitionProperty = "";
-    el.style.transitionTimingFunction = "";
     el.style.transformOrigin = "";
   }
+  pendingTimeouts = [];
 }
-function onLeave(el, done) {
+function onBeforeLeave(el) {
+  cancelPendingTimeouts();
   if (el instanceof HTMLElement) {
-    const originating = getOriginatingElement();
-    if (!originating) {
-      done();
-      return;
-    }
-    const originatingRect = originating.getBoundingClientRect();
-    const overlayRect = el.getBoundingClientRect();
-    const offsetX = originatingRect.x - overlayRect.x + originatingRect.width / 2;
-    const offsetY = originatingRect.y - overlayRect.y + originatingRect.height / 2;
-    el.style.transform = "translate(0px, 0px)";
-    setTimeout(() => {
-      el.style.transitionDuration = DURATION + "ms";
-      el.style.transitionTimingFunction = "cubic-bezier(0.56, 0.04, 0.25, 1)";
-      el.style.transitionProperty = "transform";
-      el.style.transformOrigin = "0px 0px";
-      el.style.transform = `translate(${offsetX}px, ${offsetY}px) scale(0, 0)`;
-    }, 10);
-    setTimeout(() => {
-      done();
-    }, DURATION);
+    el.style.transform = "none";
+    el.style.opacity = "1";
+  }
+}
+function onLeave(el, done) {
+  if (raf) {
+    window.cancelAnimationFrame(raf);
+  }
+  if (!(el instanceof HTMLElement)) {
+    done();
+    return;
+  }
+  const originating = getOriginatingElement();
+  if (!originating) {
+    done();
+    return;
   }
+  const originatingRect = originating.getBoundingClientRect();
+  const overlayRect = el.getBoundingClientRect();
+  const scaleX = originatingRect.width / overlayRect.width;
+  const scaleY = originatingRect.height / overlayRect.height;
+  const offsetX = originatingRect.x - overlayRect.x;
+  const offsetY = originatingRect.y - overlayRect.y;
+  el.style.transition = `transform ${DURATION}ms ${EASING}`;
+  el.style.transformOrigin = "0px 0px";
+  el.style.transform = `translate(${offsetX}px, ${offsetY}px) scale(${scaleX}, ${scaleY})`;
+  withTimeout(() => {
+    el.style.transition = `opacity ${FADE_DURATION}ms ease-out`;
+    el.style.opacity = "0";
+    withTimeout(() => {
+      pendingTimeouts = [];
+      done();
+    }, FADE_DURATION);
+  }, DURATION);
 }
 function onAfterLeave(el) {
   onAfter(el);
+  pendingTimeouts = [];
+  if (raf) {
+    window.cancelAnimationFrame(raf);
+    raf = null;
+  }
   if (hasPublished.value) {
     emit("submit");
   } else {
@@ -134,7 +211,6 @@ const iframe = useTemplateRef("iframe");
 const isLoaded = ref(false);
 const isLoading = ref(true);
 const hasPublished = ref(false);
-let timeout = null;
 function onPublished({ uuid }) {
   if (props.uuid === uuid) {
     hasPublished.value = true;
@@ -142,10 +218,6 @@ function onPublished({ uuid }) {
   }
 }
 function onLoad() {
-  clearTimeout(timeout);
-  timeout = window.setTimeout(() => {
-    isLoaded.value = true;
-  }, 3e3);
   if (!iframe.value) {
     return;
   }
@@ -166,6 +238,13 @@ function onEditorLoaded({ uuid }) {
     isLoaded.value = true;
   }
 }
+onMounted(() => {
+  isLoaded.value = true;
+  ui.setNestedEditor(props.uuid);
+});
+onBeforeUnmount(() => {
+  ui.setNestedEditor(null);
+});
 onBroadcastEvent("published", onPublished);
 onBroadcastEvent("closeEditor", onClosed);
 onBroadcastEvent("editorLoaded", onEditorLoaded);

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

@@ -1,10 +1,12 @@
+import type { BlokkliIcon } from '#blokkli-build/icons';
 export type NestedEditorOverlayProps = {
     url: string;
     uuid: string;
     title: string;
+    theme: 'lime' | 'red';
+    icon: BlokkliIcon;
     blockUuid?: string;
     element?: HTMLElement | null;
-    label?: string;
 };
 declare const __VLS_export: import("vue").DefineComponent<NestedEditorOverlayProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     close: (...args: any[]) => void;

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

@@ -1,7 +1,11 @@
 <template>
-  <ol>
+  <ol class="bk-plugin-config-form">
     <slot name="before" />
-    <li v-for="item in renderedConfig" :key="item.name" class="bk-form-item">
+    <li
+      v-for="item in renderedConfig"
+      :key="item.name"
+      :class="'bk-is-type-' + item.type"
+    >
       <FormCheckbox
         v-if="item.type === 'checkbox'"
         v-bind="item"

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

@@ -1,12 +1,13 @@
 declare const _default: typeof __VLS_export;
 export default _default;
 declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<{
-    timestamp: number;
+    timestamp: number | string;
 }, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{
-    timestamp: number;
+    timestamp: number | string;
 }> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
     default?: (props: {
         formatted: any;
+        formattedDate: any;
     }) => any;
 }>;
 type __VLS_WithSlots<T, S> = T & {

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

@@ -1,14 +1,26 @@
 <template>
-  <slot :formatted="formatted" />
+  <slot :formatted :formatted-date>
+    <span :title="formattedDate">{{ formatted }}</span>
+  </slot>
 </template>
 
 <script setup>
+import { isValidDate } from "#blokkli/editor/helpers/date";
 import { ref, computed, onMounted, onBeforeUnmount, useBlokkli } from "#imports";
 const props = defineProps({
-  timestamp: { type: Number, required: true }
+  timestamp: { type: [Number, String], required: true }
 });
-function getRelativeTimeString(date, lang = navigator.language) {
-  const timeMs = typeof date === "number" ? date : date.getTime();
+const { ui } = useBlokkli();
+const date = computed(() => {
+  const dateArg = typeof props.timestamp === "number" ? props.timestamp * 1e3 : props.timestamp;
+  const parsedDate = new Date(dateArg);
+  return isValidDate(parsedDate) ? parsedDate : null;
+});
+const formattedDate = computed(() => {
+  return date.value ? ui.formatDate(date.value) : "";
+});
+function getRelativeTimeString(date2, lang = navigator.language) {
+  const timeMs = typeof date2 === "number" ? date2 : date2.getTime();
   const deltaSeconds = Math.round((timeMs - Date.now()) / 1e3);
   const cutoffs = [
     60,
@@ -35,12 +47,14 @@ function getRelativeTimeString(date, lang = navigator.language) {
   const rtf = new Intl.RelativeTimeFormat(lang, { numeric: "auto" });
   return rtf.format(Math.floor(deltaSeconds / divisor), units[unitIndex]);
 }
-const { ui } = useBlokkli();
 const incrementToggle = ref(0);
 let interval = null;
 const formatted = computed(() => {
-  const date = new Date(props.timestamp * 1e3 + incrementToggle.value);
-  return getRelativeTimeString(date, ui.interfaceLanguage.value);
+  if (!date.value) {
+    return;
+  }
+  const dateIncremented = new Date(date.value.getTime() + incrementToggle.value);
+  return getRelativeTimeString(dateIncremented, ui.interfaceLanguage.value);
 });
 onMounted(() => {
   interval = setInterval(() => {

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

@@ -1,12 +1,13 @@
 declare const _default: typeof __VLS_export;
 export default _default;
 declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<{
-    timestamp: number;
+    timestamp: number | string;
 }, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{
-    timestamp: number;
+    timestamp: number | string;
 }> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
     default?: (props: {
         formatted: any;
+        formattedDate: any;
     }) => any;
 }>;
 type __VLS_WithSlots<T, S> = T & {

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

@@ -0,0 +1,9 @@
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: import("vue").DefineComponent<{
+    status: "pending" | "active" | "success" | "error";
+    bulletText?: string | number;
+}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{
+    status: "pending" | "active" | "success" | "error";
+    bulletText?: string | number;
+}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

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

@@ -0,0 +1,31 @@
+<template>
+  <div class="bk-status-icon" :class="`bk-is-${status}`">
+    <Icon v-if="icon" :name="icon" />
+    <span v-else class="bk-status-icon-bullet" v-html="bulletText" />
+  </div>
+</template>
+
+<script setup>
+import { computed } from "#imports";
+import Icon from "../Icon/index.vue";
+const props = defineProps({
+  status: { type: String, required: true },
+  bulletText: { type: [String, Number], required: false }
+});
+const icon = computed(() => {
+  if (props.status === "active") {
+    return "loader";
+  } else if (props.status === "success") {
+    return "bk_mdi_check";
+  } else if (props.status === "error") {
+    return "bk_mdi_priority_high";
+  }
+  return null;
+});
+</script>
+
+<script>
+export default {
+  name: "StatusIcon"
+};
+</script>

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

@@ -0,0 +1,9 @@
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: import("vue").DefineComponent<{
+    status: "pending" | "active" | "success" | "error";
+    bulletText?: string | number;
+}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{
+    status: "pending" | "active" | "success" | "error";
+    bulletText?: string | number;
+}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

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

@@ -56,7 +56,11 @@
 
 <script setup>
 import { useBlokkli, computed } from "#imports";
-import { DialogModal, Icon, BlokkliTransition } from "#blokkli/editor/components";
+import {
+  DialogModal,
+  Icon,
+  BlokkliTransition
+} from "#blokkli/editor/components";
 const { $t, storage, animation } = useBlokkli();
 const hasDismissed = storage.use("system_requirements_dismissed", false);
 const requirements = computed(() => {

package/dist/runtime/editor/components/Transition/Height.vue

@@ -5,11 +5,12 @@
 </template>
 
 <script setup>
+const EASE_SWING = "cubic-bezier(0.56, 0.04, 0.25, 1)";
 const props = defineProps({
   duration: { type: Number, required: false, default: 200 },
   opacity: { type: Boolean, required: false, default: false },
-  easingEnter: { type: String, required: false, default: "ease-in-out" },
-  easingLeave: { type: String, required: false, default: "ease-in-out" }
+  easingEnter: { type: String, required: false, default: EASE_SWING },
+  easingLeave: { type: String, required: false, default: EASE_SWING }
 });
 const getElementStyle = (element) => {
   return {

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

@@ -1,4 +1,4 @@
-type TransitionName = 'transform-overlay' | 'fade' | 'touch-bar' | 'drag-item' | 'editable' | 'menu' | 'loading' | 'toolbar' | 'slide-in' | 'slide-up' | 'search' | 'context-menu' | 'command-palette' | 'caret-tooltip';
+type TransitionName = 'transform-overlay' | 'fade' | 'touch-bar' | 'drag-item' | 'editable' | 'menu' | 'loading' | 'drop-up' | 'toolbar' | 'slide-in' | 'slide-up' | 'search' | 'context-menu' | 'command-palette' | 'caret-tooltip';
 type __VLS_Props = {
     name: TransitionName;
     enabled?: boolean;

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

@@ -24,7 +24,8 @@ const DURATION = {
   editable: 250,
   "touch-bar": 200,
   "command-palette": 100,
-  "caret-tooltip": 150
+  "caret-tooltip": 150,
+  "drop-up": 200
 };
 const name = computed(() => {
   if (!ui.useAnimations.value || !props.enabled) {

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

@@ -1,4 +1,4 @@
-type TransitionName = 'transform-overlay' | 'fade' | 'touch-bar' | 'drag-item' | 'editable' | 'menu' | 'loading' | 'toolbar' | 'slide-in' | 'slide-up' | 'search' | 'context-menu' | 'command-palette' | 'caret-tooltip';
+type TransitionName = 'transform-overlay' | 'fade' | 'touch-bar' | 'drag-item' | 'editable' | 'menu' | 'loading' | 'drop-up' | 'toolbar' | 'slide-in' | 'slide-up' | 'search' | 'context-menu' | 'command-palette' | 'caret-tooltip';
 type __VLS_Props = {
     name: TransitionName;
     enabled?: boolean;

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

@@ -1,14 +1,17 @@
 import AddListItem from './AddListItem/index.vue.js';
-import BlockPreviewItem from './BlockPreviewItem/index.vue.js';
-import BlockPreviewRenderer from './BlockPreviewRenderer/index.vue.js';
-import ItemIconBox from './ItemIconBox/index.vue.js';
 import ArtboardTooltip from './ArtboardTooltip/index.vue.js';
+import AutoHeight from './AutoHeight/index.vue.js';
 import Banner from './Banner/index.vue.js';
+import BlockPreviewItem from './BlockPreviewItem/index.vue.js';
+import BlockPreviewRenderer from './BlockPreviewRenderer/index.vue.js';
 import BlokkliTransition from './Transition/index.vue.js';
+import BundleSelector from './BundleSelector/index.vue.js';
 import ConfigForm from './PluginConfigForm/index.vue.js';
 import DialogModal from './Dialog/index.vue.js';
+import DiffValue from './DiffViewer/DiffValue.vue.js';
 import DiffViewerState from './DiffViewer/State.vue.js';
 import ErrorBoundary from './BlokkliErrorBoundary.vue.js';
+import FlexTextarea from './FlexTextarea/index.vue.js';
 import FormCheckboxes from './Form/Checkboxes/index.vue.js';
 import FormDatepicker from './Form/Datepicker/index.vue.js';
 import FormGroup from './Form/Group/index.vue.js';
@@ -24,7 +27,9 @@ import Highlight from './Highlight/index.vue.js';
 import Icon from './Icon/index.vue.js';
 import InfoBox from './InfoBox/index.vue.js';
 import ItemIcon from './ItemIcon/index.vue.js';
+import ItemIconBox from './ItemIconBox/index.vue.js';
 import Loading from './Loading/index.vue.js';
+import NestedEditorOverlay from './NestedEditorOverlay/index.vue.js';
 import Pagination from './Pagination/index.vue.js';
 import RelativeTime from './RelativeTime/index.vue.js';
 import Resizable from './Resizable/index.vue.js';
@@ -33,8 +38,7 @@ import ScheduleDate from './ScheduleDate/index.vue.js';
 import ScrollBoundary from './ScrollBoundary/index.vue.js';
 import ShortcutIndicator from './ShortcutIndicator/index.vue.js';
 import Sortli from './Sortli/index.vue.js';
+import StatusIcon from './StatusIcon/index.vue.js';
 import TransitionHeight from './Transition/Height.vue.js';
 import ViewportBlockingRect from './ViewportBlockingRect/index.vue.js';
-import BundleSelector from './BundleSelector/index.vue.js';
-import NestedEditorOverlay from './NestedEditorOverlay/index.vue.js';
-export { AddListItem, BlockPreviewItem, BlockPreviewRenderer, ItemIconBox, ArtboardTooltip, Banner, BlokkliTransition, ConfigForm, DialogModal, DiffViewerState, ErrorBoundary, FormCheckboxes, FormDatepicker, FormGroup, FormItem, FormOverlay, FormRadio, FormRadioTabs, FormSelect, FormText, FormTextarea, FormToggle, Highlight, Icon, InfoBox, ItemIcon, Loading, Pagination, RelativeTime, Resizable, ScaleToFit, ScheduleDate, ScrollBoundary, ShortcutIndicator, Sortli, TransitionHeight, ViewportBlockingRect, BundleSelector, NestedEditorOverlay, };
+export { AddListItem, ArtboardTooltip, AutoHeight, Banner, BlockPreviewItem, BlockPreviewRenderer, BlokkliTransition, BundleSelector, ConfigForm, DialogModal, DiffValue, DiffViewerState, ErrorBoundary, FlexTextarea, FormCheckboxes, FormDatepicker, FormGroup, FormItem, FormOverlay, FormRadio, FormRadioTabs, FormSelect, FormText, FormTextarea, FormToggle, Highlight, Icon, InfoBox, ItemIcon, ItemIconBox, Loading, NestedEditorOverlay, Pagination, RelativeTime, Resizable, ScaleToFit, ScheduleDate, ScrollBoundary, ShortcutIndicator, Sortli, StatusIcon, TransitionHeight, ViewportBlockingRect, };

package/dist/runtime/editor/components/index.js

@@ -1,14 +1,17 @@
 import AddListItem from "./AddListItem/index.vue";
-import BlockPreviewItem from "./BlockPreviewItem/index.vue";
-import BlockPreviewRenderer from "./BlockPreviewRenderer/index.vue";
-import ItemIconBox from "./ItemIconBox/index.vue";
 import ArtboardTooltip from "./ArtboardTooltip/index.vue";
+import AutoHeight from "./AutoHeight/index.vue";
 import Banner from "./Banner/index.vue";
+import BlockPreviewItem from "./BlockPreviewItem/index.vue";
+import BlockPreviewRenderer from "./BlockPreviewRenderer/index.vue";
 import BlokkliTransition from "./Transition/index.vue";
+import BundleSelector from "./BundleSelector/index.vue";
 import ConfigForm from "./PluginConfigForm/index.vue";
 import DialogModal from "./Dialog/index.vue";
+import DiffValue from "./DiffViewer/DiffValue.vue";
 import DiffViewerState from "./DiffViewer/State.vue";
 import ErrorBoundary from "./BlokkliErrorBoundary.vue";
+import FlexTextarea from "./FlexTextarea/index.vue";
 import FormCheckboxes from "./Form/Checkboxes/index.vue";
 import FormDatepicker from "./Form/Datepicker/index.vue";
 import FormGroup from "./Form/Group/index.vue";
@@ -24,7 +27,9 @@ import Highlight from "./Highlight/index.vue";
 import Icon from "./Icon/index.vue";
 import InfoBox from "./InfoBox/index.vue";
 import ItemIcon from "./ItemIcon/index.vue";
+import ItemIconBox from "./ItemIconBox/index.vue";
 import Loading from "./Loading/index.vue";
+import NestedEditorOverlay from "./NestedEditorOverlay/index.vue";
 import Pagination from "./Pagination/index.vue";
 import RelativeTime from "./RelativeTime/index.vue";
 import Resizable from "./Resizable/index.vue";
@@ -33,22 +38,24 @@ import ScheduleDate from "./ScheduleDate/index.vue";
 import ScrollBoundary from "./ScrollBoundary/index.vue";
 import ShortcutIndicator from "./ShortcutIndicator/index.vue";
 import Sortli from "./Sortli/index.vue";
+import StatusIcon from "./StatusIcon/index.vue";
 import TransitionHeight from "./Transition/Height.vue";
 import ViewportBlockingRect from "./ViewportBlockingRect/index.vue";
-import BundleSelector from "./BundleSelector/index.vue";
-import NestedEditorOverlay from "./NestedEditorOverlay/index.vue";
 export {
   AddListItem,
-  BlockPreviewItem,
-  BlockPreviewRenderer,
-  ItemIconBox,
   ArtboardTooltip,
+  AutoHeight,
   Banner,
+  BlockPreviewItem,
+  BlockPreviewRenderer,
   BlokkliTransition,
+  BundleSelector,
   ConfigForm,
   DialogModal,
+  DiffValue,
   DiffViewerState,
   ErrorBoundary,
+  FlexTextarea,
   FormCheckboxes,
   FormDatepicker,
   FormGroup,
@@ -64,7 +71,9 @@ export {
   Icon,
   InfoBox,
   ItemIcon,
+  ItemIconBox,
   Loading,
+  NestedEditorOverlay,
   Pagination,
   RelativeTime,
   Resizable,
@@ -73,8 +82,7 @@ export {
   ScrollBoundary,
   ShortcutIndicator,
   Sortli,
+  StatusIcon,
   TransitionHeight,
-  ViewportBlockingRect,
-  BundleSelector,
-  NestedEditorOverlay
+  ViewportBlockingRect
 };

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

@@ -20,3 +20,5 @@ export { useGlobalBlokkliObject } from './useGlobalBlokkliObject.js';
 export { useStateBasedCache } from './useStateBasedCache.js';
 export { useStickyToolbar } from './useStickyToolbar.js';
 export { useTransitionedValue } from './useTransitionedValue.js';
+export { onElementResize } from './onElementResize.js';
+export { useEditableFieldOverride } from './useEditableFieldOverride.js';

package/dist/runtime/editor/composables/index.js

@@ -20,3 +20,5 @@ export { useGlobalBlokkliObject } from "./useGlobalBlokkliObject.js";
 export { useStateBasedCache } from "./useStateBasedCache.js";
 export { useStickyToolbar } from "./useStickyToolbar.js";
 export { useTransitionedValue } from "./useTransitionedValue.js";
+export { onElementResize } from "./onElementResize.js";
+export { useEditableFieldOverride } from "./useEditableFieldOverride.js";

package/dist/runtime/editor/composables/onElementResize.d.ts

@@ -0,0 +1,3 @@
+import type { Ref } from 'vue';
+import type { Size } from '../types/geometry.js';
+export declare function onElementResize(el: Ref<HTMLElement | null>, cb: (size: Size) => void): void;