@blokkli/editor 2.0.0-alpha.16 → 2.0.0-alpha.18

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

@@ -1,5 +1,5 @@
 <template>
-  <Teleport to="body">
+  <Teleport to="#bk-canvas-overlay">
     <div id="bk-indicators" class="bk bk-indicators" :style>
       <div id="bk-indicators-left" />
       <div id="bk-indicators-right" />

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

@@ -1,13 +1,17 @@
 <template>
   <div class="bk-info-box">
     <Icon name="info" />
-    <p v-html="text" />
+    <div>
+      <slot>
+        <p v-html="text" />
+      </slot>
+    </div>
   </div>
 </template>
 
 <script setup>
 import { Icon } from "#blokkli/components";
 defineProps({
-  text: { type: String, required: true }
+  text: { type: String, required: false }
 });
 </script>

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

@@ -1,5 +1,15 @@
 type __VLS_Props = {
-    text: string;
+    text?: string;
 };
-declare const _default: 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 var __VLS_5: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_5) => 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;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/Edit/Konami/Game/index.vue

@@ -125,7 +125,7 @@ let snakeCanvas = null;
 let logoCanvas = null;
 let lastScore = -1;
 let lastBlocksEaten = -1;
-const cellMoveDuration = 250;
+const MOVE_DURATION = 200;
 function generateFood() {
   let newFood;
   do {
@@ -227,7 +227,7 @@ function update(currentTime) {
     return;
   }
   const timeSinceLastUpdate = currentTime - lastCellUpdate;
-  if (timeSinceLastUpdate >= cellMoveDuration) {
+  if (timeSinceLastUpdate >= MOVE_DURATION) {
     if (DEBUG_GAME) {
       nextDirection.value = getAIDirection();
     }
@@ -250,14 +250,14 @@ function update(currentTime) {
     }
     if (newHead.x < 0 || newHead.x >= worldWidth || newHead.y < 0 || newHead.y >= worldHeight) {
       gameOver.value = true;
-      gameOverTime = lastCellUpdate + cellMoveDuration;
+      gameOverTime = lastCellUpdate + MOVE_DURATION;
       return;
     }
     if (snake.value.some(
       (segment) => segment.x === newHead.x && segment.y === newHead.y
     )) {
       gameOver.value = true;
-      gameOverTime = lastCellUpdate + cellMoveDuration;
+      gameOverTime = lastCellUpdate + MOVE_DURATION;
       return;
     }
     lastCellUpdate = currentTime;
@@ -421,7 +421,7 @@ function draw(currentTime) {
   if (lastCellUpdate > 0) {
     const timeToUse = gameOver.value && gameOverTime > 0 ? gameOverTime : currentTime;
     const timeSinceLastUpdate = timeToUse - lastCellUpdate;
-    movementProgress = Math.min(timeSinceLastUpdate / cellMoveDuration, 1);
+    movementProgress = Math.min(timeSinceLastUpdate / MOVE_DURATION, 1);
   }
   if (score.value !== lastScore || blocksEaten.value !== lastBlocksEaten) {
     drawScoreArea();

package/dist/runtime/components/Edit/{Features/Publish/Dialog/ScheduleDate.vue → ScheduleDate/index.vue}

@@ -41,41 +41,7 @@
         </button>
       </div>
 
-      <div class="bk-schedule-date-presets">
-        <button
-          type="button"
-          class="bk-button bk-is-small"
-          :disabled="disabled"
-          @click="setTomorrow"
-        >
-          {{ $t("publishScheduleTomorrow", "Tomorrow") }}
-        </button>
-        <button
-          type="button"
-          class="bk-button bk-is-small"
-          :disabled="disabled"
-          @click="setInSevenDays"
-        >
-          {{ $t("publishScheduleInSevenDays", "In 7 days") }}
-        </button>
-        <button
-          type="button"
-          class="bk-button bk-is-small"
-          :disabled="disabled"
-          @click="setNextMonday"
-        >
-          {{ $t("publishScheduleNextMonday", "Next Monday") }}
-        </button>
-      </div>
-      <div
-        class="bk-schedule-date-info"
-        v-text="
-  $t(
-    'publishScheduledInfo',
-    'You can still make changes until the scheduled publication date.'
-  )
-"
-      />
+      <slot />
       <div v-if="error" class="bk-schedule-date-error">
         {{ error }}
       </div>
@@ -86,7 +52,7 @@
 <script setup>
 import { ref, computed, watch, useBlokkli } from "#imports";
 import { FormDatepicker, Icon } from "#blokkli/components";
-const { $t, ui } = useBlokkli();
+const { ui } = useBlokkli();
 defineProps({
   disabled: { type: Boolean, required: false },
   error: { type: String, required: false }
@@ -152,32 +118,14 @@ watch(modelValue, (newValue) => {
     selectedTime.value = newTime;
   }
 });
-function setTomorrow() {
-  const tomorrow = /* @__PURE__ */ new Date();
-  tomorrow.setDate(tomorrow.getDate() + 1);
-  selectedDate.value = formatDate(tomorrow);
-}
-function setInSevenDays() {
-  const date = /* @__PURE__ */ new Date();
-  date.setDate(date.getDate() + 7);
-  selectedDate.value = formatDate(date);
-}
-function setNextMonday() {
-  const today = /* @__PURE__ */ new Date();
-  const dayOfWeek = today.getDay();
-  const daysUntilMonday = dayOfWeek === 0 ? 1 : 8 - dayOfWeek;
-  const nextMonday = /* @__PURE__ */ new Date();
-  nextMonday.setDate(today.getDate() + daysUntilMonday);
-  selectedDate.value = formatDate(nextMonday);
-}
 function incrementHour() {
   const [hours = 0, minutes = 0] = selectedTime.value.split(":").map(Number);
-  const newHours = (hours + 1) % 24;
-  selectedTime.value = `${String(newHours).padStart(2, "0")}:${String(minutes).padStart(2, "0")}`;
+  const newHours = minutes > 0 ? (hours + 1) % 24 : (hours + 1) % 24;
+  selectedTime.value = `${String(newHours).padStart(2, "0")}:00`;
 }
 function decrementHour() {
   const [hours = 0, minutes = 0] = selectedTime.value.split(":").map(Number);
-  const newHours = hours === 0 ? 23 : hours - 1;
-  selectedTime.value = `${String(newHours).padStart(2, "0")}:${String(minutes).padStart(2, "0")}`;
+  const newHours = minutes > 0 ? hours : hours === 0 ? 23 : hours - 1;
+  selectedTime.value = `${String(newHours).padStart(2, "0")}:00`;
 }
 </script>

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

@@ -0,0 +1,23 @@
+type __VLS_Props = {
+    disabled?: boolean;
+    error?: string;
+};
+type __VLS_PublicProps = __VLS_Props & {
+    modelValue?: string;
+};
+declare var __VLS_13: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_13) => any;
+};
+declare const __VLS_component: 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>;
+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/ShortcutIndicator/index.vue

@@ -54,6 +54,9 @@ if (!props.viewOnly) {
   });
 }
 onBlokkliEvent("keyPressed", (e) => {
+  if (ui.hasDialogOpen.value) {
+    return;
+  }
   const checkKey = [e.meta, e.shift, e.code.toLowerCase()].join("-");
   if (key.value !== checkKey) {
     return;

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

@@ -0,0 +1,95 @@
+<template>
+  <Transition :css="false" @enter="enterTransition" @leave="leaveTransition">
+    <slot />
+  </Transition>
+</template>
+
+<script setup>
+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" }
+});
+const getElementStyle = (element) => {
+  return {
+    height: element.style.height,
+    width: element.style.width,
+    position: element.style.position,
+    visibility: element.style.visibility,
+    overflow: element.style.overflow,
+    paddingTop: element.style.paddingTop,
+    paddingBottom: element.style.paddingBottom,
+    borderTopWidth: element.style.borderTopWidth,
+    borderBottomWidth: element.style.borderBottomWidth,
+    marginTop: element.style.marginTop,
+    marginBottom: element.style.marginBottom
+  };
+};
+const prepareElement = (element, initialStyle) => {
+  const { width } = getComputedStyle(element);
+  element.style.width = width;
+  element.style.position = "absolute";
+  element.style.visibility = "hidden";
+  element.style.height = "";
+  const { height } = getComputedStyle(element);
+  element.style.width = initialStyle.width;
+  element.style.position = initialStyle.position;
+  element.style.visibility = initialStyle.visibility;
+  element.style.height = "0px";
+  element.style.overflow = "hidden";
+  return initialStyle.height && initialStyle.height !== "0px" ? initialStyle.height : height;
+};
+const animateTransition = (element, initialStyle, done, keyframes, options) => {
+  const animation = element.animate(keyframes, options);
+  element.style.height = initialStyle.height;
+  animation.onfinish = () => {
+    element.style.overflow = initialStyle.overflow;
+    done();
+  };
+};
+const getEnterKeyframes = (height, initialStyle) => [
+  {
+    height: "0px",
+    opacity: props.opacity ? 0 : 1,
+    paddingTop: "0px",
+    paddingBottom: "0px",
+    borderTopWidth: "0px",
+    borderBottomWidth: "0px",
+    marginTop: "0px",
+    marginBottom: "0px"
+  },
+  {
+    height,
+    opacity: props.opacity ? 1 : 1,
+    paddingTop: initialStyle.paddingTop,
+    paddingBottom: initialStyle.paddingBottom,
+    borderTopWidth: initialStyle.borderTopWidth,
+    borderBottomWidth: initialStyle.borderBottomWidth,
+    marginTop: initialStyle.marginTop,
+    marginBottom: initialStyle.marginBottom
+  }
+];
+const enterTransition = (element, done) => {
+  if (!(element instanceof HTMLElement)) {
+    return done();
+  }
+  const initialStyle = getElementStyle(element);
+  const height = prepareElement(element, initialStyle);
+  const keyframes = getEnterKeyframes(height, initialStyle);
+  const options = { duration: props.duration, easing: props.easingEnter };
+  animateTransition(element, initialStyle, done, keyframes, options);
+};
+const leaveTransition = (element, done) => {
+  if (!(element instanceof HTMLElement)) {
+    return done();
+  }
+  const initialStyle = getElementStyle(element);
+  const { height } = getComputedStyle(element);
+  element.style.height = height;
+  element.style.overflow = "hidden";
+  const keyframes = getEnterKeyframes(height, initialStyle).reverse();
+  const options = { duration: props.duration, easing: props.easingLeave };
+  animateTransition(element, initialStyle, done, keyframes, options);
+};
+</script>

package/dist/runtime/components/Edit/Transition/Height.vue.d.ts

@@ -0,0 +1,36 @@
+type __VLS_Props = {
+    /**
+     * The duration of the transition.
+     */
+    duration?: number;
+    /**
+     * Whether to also transition the opacity.
+     * If set, the element is transitioned from 0 to 1 and vice versa.
+     */
+    opacity?: boolean;
+    /**
+     * The easing function when entering.
+     */
+    easingEnter?: string;
+    /**
+     * The easing function when leaving.
+     */
+    easingLeave?: string;
+};
+declare var __VLS_10: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_10) => any;
+};
+declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    opacity: boolean;
+    duration: number;
+    easingEnter: string;
+    easingLeave: string;
+}, {}, {}, {}, 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/index.d.ts

@@ -1,4 +1,8 @@
 import AddListItem from './AddListItem/index.vue.js';
+import AddListItemIcon from './AddListItemIcon/index.vue.js';
+import ArtboardTooltip from './ArtboardTooltip/index.vue.js';
+import BlokkliTransition from './Transition/index.vue.js';
+import TransitionHeight from './Transition/Height.vue.js';
 import ConfigForm from './PluginConfigForm/index.vue.js';
 import DialogModal from './Dialog/index.vue.js';
 import DiffViewerState from './DiffViewer/State.vue.js';
@@ -23,8 +27,8 @@ import Resizable from './Resizable/index.vue.js';
 import ScaleToFit from './ScaleToFit/index.vue.js';
 import ScrollBoundary from './ScrollBoundary/index.vue.js';
 import ShortcutIndicator from './ShortcutIndicator/index.vue.js';
-import BlokkliTransition from './Transition/index.vue.js';
 import Sortli from './Sortli/index.vue.js';
+import Banner from './Banner/index.vue.js';
+import ScheduleDate from './ScheduleDate/index.vue.js';
 import ViewportBlockingRect from './ViewportBlockingRect/index.vue.js';
-import AddListItemIcon from './AddListItemIcon/index.vue.js';
-export { AddListItem, AddListItemIcon, ConfigForm, DialogModal, DiffViewerState, FormDatepicker, FormGroup, FormItem, FormOverlay, FormRadio, FormSelect, FormText, FormTextarea, FormToggle, FormRadioTabs, Highlight, Icon, InfoBox, ItemIcon, Loading, Pagination, RelativeTime, Resizable, ScaleToFit, ScrollBoundary, ShortcutIndicator, Sortli, ViewportBlockingRect, BlokkliTransition, };
+export { AddListItem, AddListItemIcon, ArtboardTooltip, BlokkliTransition, ConfigForm, DialogModal, DiffViewerState, FormDatepicker, FormGroup, FormItem, FormOverlay, FormRadio, FormRadioTabs, FormSelect, FormText, FormTextarea, FormToggle, Highlight, Icon, InfoBox, ItemIcon, Loading, Pagination, RelativeTime, Resizable, ScaleToFit, ScrollBoundary, ShortcutIndicator, Sortli, ViewportBlockingRect, Banner, ScheduleDate, TransitionHeight, };

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

@@ -1,4 +1,8 @@
 import AddListItem from "./AddListItem/index.vue";
+import AddListItemIcon from "./AddListItemIcon/index.vue";
+import ArtboardTooltip from "./ArtboardTooltip/index.vue";
+import BlokkliTransition from "./Transition/index.vue";
+import TransitionHeight from "./Transition/Height.vue";
 import ConfigForm from "./PluginConfigForm/index.vue";
 import DialogModal from "./Dialog/index.vue";
 import DiffViewerState from "./DiffViewer/State.vue";
@@ -23,13 +27,15 @@ import Resizable from "./Resizable/index.vue";
 import ScaleToFit from "./ScaleToFit/index.vue";
 import ScrollBoundary from "./ScrollBoundary/index.vue";
 import ShortcutIndicator from "./ShortcutIndicator/index.vue";
-import BlokkliTransition from "./Transition/index.vue";
 import Sortli from "./Sortli/index.vue";
+import Banner from "./Banner/index.vue";
+import ScheduleDate from "./ScheduleDate/index.vue";
 import ViewportBlockingRect from "./ViewportBlockingRect/index.vue";
-import AddListItemIcon from "./AddListItemIcon/index.vue";
 export {
   AddListItem,
   AddListItemIcon,
+  ArtboardTooltip,
+  BlokkliTransition,
   ConfigForm,
   DialogModal,
   DiffViewerState,
@@ -38,11 +44,11 @@ export {
   FormItem,
   FormOverlay,
   FormRadio,
+  FormRadioTabs,
   FormSelect,
   FormText,
   FormTextarea,
   FormToggle,
-  FormRadioTabs,
   Highlight,
   Icon,
   InfoBox,
@@ -56,5 +62,7 @@ export {
   ShortcutIndicator,
   Sortli,
   ViewportBlockingRect,
-  BlokkliTransition
+  Banner,
+  ScheduleDate,
+  TransitionHeight
 };

package/dist/runtime/composables/defineBlokkli.js

@@ -6,7 +6,8 @@ import {
   INJECT_REUSABLE_OPTIONS,
   INJECT_PROVIDER_BLOCKS,
   INJECT_PROVIDER_CONTEXT,
-  INJECT_FIELD_USES_PROXY
+  INJECT_FIELD_USES_PROXY,
+  INJECT_REUSABLE_UUID
 } from "../helpers/symbols.js";
 import { computed, inject } from "#imports";
 import { getRuntimeOptionValue } from "#blokkli/helpers/runtimeHelpers";
@@ -45,6 +46,7 @@ export function defineBlokkli(arg) {
     INJECT_REUSABLE_OPTIONS,
     null
   );
+  const reusableUuid = inject(INJECT_REUSABLE_UUID, null);
   const editContext = inject(INJECT_EDIT_CONTEXT, null);
   const provider = inject(
     INJECT_PROVIDER_CONTEXT,
@@ -95,7 +97,7 @@ export function defineBlokkli(arg) {
   if (editContext?.useBlockRegistration && editContext.dom && bundle !== BUNDLE_FROM_LIBRARY && bundle !== BUNDLE_BLOKKLI_FRAGMENT) {
     const isProxyMode = inject(INJECT_FIELD_USES_PROXY, false);
     if (!isProxyMode) {
-      editContext.useBlockRegistration(editContext.dom, uuid);
+      editContext.useBlockRegistration(editContext.dom, reusableUuid ?? uuid);
     }
   }
   return {