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

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/{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/{Features/Publish/Dialog/ScheduleDate.vue.d.ts → ScheduleDate/index.vue.d.ts}

@@ -5,9 +5,19 @@ type __VLS_Props = {
 type __VLS_PublicProps = __VLS_Props & {
     modelValue?: string;
 };
-declare const _default: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+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

@@ -2,6 +2,7 @@ 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';
@@ -28,5 +29,6 @@ import ScrollBoundary from './ScrollBoundary/index.vue.js';
 import ShortcutIndicator from './ShortcutIndicator/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';
-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, };
+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

@@ -2,6 +2,7 @@ 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";
@@ -28,6 +29,7 @@ import ScrollBoundary from "./ScrollBoundary/index.vue";
 import ShortcutIndicator from "./ShortcutIndicator/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";
 export {
   AddListItem,
@@ -60,5 +62,7 @@ export {
   ShortcutIndicator,
   Sortli,
   ViewportBlockingRect,
-  Banner
+  Banner,
+  ScheduleDate,
+  TransitionHeight
 };