@blokkli/editor 2.0.0-alpha.13 → 2.0.0-alpha.15

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

@@ -4,22 +4,15 @@
     :title="publishLabel"
     :description="publishDescription"
     :disabled="!mutations.length || !canEdit"
-    type="success"
+    :type="isScheduled ? 'yellow' : 'success'"
     :weight="0"
     :icon="icon"
     @click="onMenuClick"
   />
   <Teleport to="body">
-    <transition appear name="bk-slide-up">
-      <PublishDialog
-        v-if="showDialog"
-        v-model:states="additionalEditStates"
-        v-model:revision-message="revisionMessage"
-        v-model:should-publish="shouldPublish"
-        @close="showDialog = false"
-        @submit="onSubmit"
-      />
-    </transition>
+    <BlokkliTransition name="slide-up">
+      <PublishDialog v-if="showDialog" @close="onClose" @submit="onSubmit" />
+    </BlokkliTransition>
   </Teleport>
 </template>
 
@@ -29,10 +22,13 @@ import {
   defineBlokkliFeature,
   computed,
   useRoute,
-  ref
+  ref,
+  nextTick
 } from "#imports";
 import { PluginMenuButton } from "#blokkli/plugins";
+import { BlokkliTransition } from "#blokkli/components";
 import PublishDialog from "./Dialog/index.vue";
+import onBlokkliEvent from "#blokkli/helpers/composables/onBlokkliEvent";
 const { adapter, settings } = defineBlokkliFeature({
   id: "publish",
   icon: "publish",
@@ -54,26 +50,38 @@ const { state, $t, broadcast, context, eventBus } = useBlokkli();
 const { mutations, canEdit, mutateWithLoadingState } = state;
 const hasPublishOptions = !!adapter.getPublishOptions;
 const isPublished = computed(() => !!state.entity.value.status);
+const isScheduled = computed(
+  () => !!state.publishOptions.value.publishOn
+);
 const showDialog = ref(false);
-const additionalEditStates = ref([]);
-const shouldPublish = ref(!!state.entity.value.status);
-const revisionMessage = ref("");
 const publishLabel = computed(() => {
   const suffix = hasPublishOptions ? "..." : "";
+  if (isScheduled.value) {
+    return $t("publishManageSchedule", "Manage scheduling") + suffix;
+  }
   if (isPublished.value) {
     return (settings.value.closeAfterPublish ? $t("publishAndCloseLabel", "Publish & Close") : $t("publishLabel", "Publish")) + suffix;
   }
   return (settings.value.closeAfterPublish ? $t("publishAndCloseLabelUnpublished", "Save & Close") : $t("publishLabelUnpublished", "Save")) + suffix;
 });
-const publishDescription = computed(
-  () => isPublished.value ? $t("publishDescription", "Publish all changes.") : $t(
+const publishDescription = computed(() => {
+  if (isScheduled.value) {
+    return $t(
+      "publishDescriptionScheduled",
+      "View or change the scheduled publication"
+    );
+  }
+  return isPublished.value ? $t("publishDescription", "Publish all changes.") : $t(
     "publishDescriptionUnpublished",
     "Save all changes while keeping page unpublished"
-  )
-);
-const icon = computed(
-  () => isPublished.value ? "publish" : "save"
-);
+  );
+});
+const icon = computed(() => {
+  if (state.publishOptions.value?.publishOn) {
+    return "calendar-clock";
+  }
+  return isPublished.value ? "publish" : "save";
+});
 const onMenuClick = async () => {
   if (hasPublishOptions) {
     showDialog.value = true;
@@ -107,6 +115,13 @@ function onSubmit() {
     window.location.href = route.path;
   }
 }
+async function onClose() {
+  await nextTick();
+  showDialog.value = false;
+}
+onBlokkliEvent("publish:show-dialog", () => {
+  showDialog.value = true;
+});
 </script>
 
 <script>

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

@@ -13,7 +13,7 @@
   />
 
   <Teleport to="body">
-    <transition appear name="bk-slide-up">
+    <BlokkliTransition name="slide-up">
       <DialogModal
         v-if="showConfirm"
         :title="$t('revertDialogTitle', 'Irrevocably discard changes')"
@@ -28,14 +28,14 @@
         @submit="onSubmit"
         @cancel="showConfirm = false"
       />
-    </transition>
+    </BlokkliTransition>
   </Teleport>
 </template>
 
 <script setup>
 import { useBlokkli, ref, defineBlokkliFeature } from "#imports";
 import { PluginMenuButton } from "#blokkli/plugins";
-import { DialogModal } from "#blokkli/components";
+import { DialogModal, BlokkliTransition } from "#blokkli/components";
 const { adapter } = defineBlokkliFeature({
   id: "revert",
   icon: "revert",

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

@@ -1,6 +1,6 @@
 <template>
   <Teleport to="body">
-    <Transition name="bk-search">
+    <BlokkliTransition name="search">
       <div
         v-if="isRendered"
         v-show="isVisible"
@@ -15,7 +15,7 @@
           @close="isVisible = false"
         />
       </div>
-    </Transition>
+    </BlokkliTransition>
   </Teleport>
   <PluginToolbarButton
     id="search"
@@ -37,6 +37,7 @@
 <script setup>
 import { nextTick, ref, useBlokkli, defineBlokkliFeature } from "#imports";
 import Overlay from "./Overlay/index.vue";
+import { BlokkliTransition } from "#blokkli/components";
 import { PluginToolbarButton } from "#blokkli/plugins";
 import onBlokkliEvent from "#blokkli/helpers/composables/onBlokkliEvent";
 defineBlokkliFeature({

package/dist/runtime/components/Edit/Features/Selection/AddButtons/AddButtonsField.vue

@@ -0,0 +1,54 @@
+<template>
+  <button
+    ref="button"
+    class="bk-selection-add-button bk-is-field"
+    tabindex="-1"
+    :data-title="title"
+    :style="{
+  transform: `translate(${left}px, ${top}px)`,
+  visibility: isVisible ? 'visible' : 'hidden'
+}"
+    @click="onClick"
+  >
+    <div>
+      <Icon name="plus" />
+    </div>
+  </button>
+</template>
+
+<script setup>
+import onBlokkliEvent from "#blokkli/helpers/composables/onBlokkliEvent";
+import { useBlokkli, ref, useTemplateRef } from "#imports";
+import { Icon } from "#blokkli/components";
+const props = defineProps({
+  fieldKey: { type: null, required: true },
+  containerRect: { type: [Object, null], required: true },
+  title: { type: String, required: true }
+});
+const emit = defineEmits(["click"]);
+const { dom } = useBlokkli();
+const button = useTemplateRef("button");
+const left = ref(0);
+const top = ref(0);
+const isVisible = ref(false);
+const BUTTON_SIZE = 30;
+function onClick() {
+  if (button.value) {
+    emit("click", button.value);
+  }
+}
+onBlokkliEvent("canvas:draw", () => {
+  if (!props.fieldKey || !props.containerRect) {
+    isVisible.value = false;
+    return;
+  }
+  const fieldRect = dom.getFieldRect(props.fieldKey);
+  if (!fieldRect) {
+    isVisible.value = false;
+    return;
+  }
+  left.value = Math.round(fieldRect.x + fieldRect.width / 2 - BUTTON_SIZE / 2);
+  top.value = Math.round(fieldRect.y + fieldRect.height / 2 - BUTTON_SIZE / 2);
+  isVisible.value = true;
+});
+</script>

package/dist/runtime/components/Edit/Features/Selection/AddButtons/AddButtonsField.vue.d.ts

@@ -0,0 +1,14 @@
+type __VLS_Props = {
+    fieldKey: string | undefined;
+    containerRect: {
+        x: number;
+        y: number;
+    } | null;
+    title: string;
+};
+declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    click: (element: HTMLElement) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onClick?: ((element: HTMLElement) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

package/dist/runtime/components/Edit/Features/Selection/AddButtons/Overlay/index.vue

@@ -0,0 +1,120 @@
+<template>
+  <div
+    ref="el"
+    class="bk bk-selection-add-overlay"
+    :class="'bk-is-' + placementY"
+    :style="{
+  '--bk-caret-x': caretX
+}"
+  >
+    <div class="bk bk-selection-add-overlay-inner bk-caret-tooltip-inner">
+      <div v-if="label" class="bk-selection-add-overlay-label">
+        <div v-html="label" />
+        <button @click="$emit('close')">
+          <Icon name="close" />
+        </button>
+      </div>
+      <div
+        ref="listEl"
+        class="bk-selection-add-overlay-list bk-scrollbar-dark"
+        @wheel="onWheel"
+      >
+        <button
+          v-for="item in items"
+          :key="item.bundle"
+          tabindex="-1"
+          @click.prevent="$emit('select', item.bundle)"
+        >
+          <AddListItemIcon
+            :bundle="item.bundle"
+            :color="item.isFavorite ? 'yellow' : 'default'"
+          />
+          <span>{{ item.label }}</span>
+        </button>
+        <button
+          v-for="action in actions"
+          :key="'action:' + action.id"
+          tabindex="-1"
+          @click.prevent="$emit('action', action.id)"
+        >
+          <AddListItemIcon :icon="action.icon" :color="action.color" />
+          <span>{{ action.title }}</span>
+        </button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import useStickyToolbar from "#blokkli/helpers/composables/useStickyToolbar";
+import {
+  useTemplateRef,
+  useBlokkli,
+  computed,
+  onMounted,
+  onBeforeUnmount
+} from "#imports";
+import { Icon, AddListItemIcon } from "#blokkli/components";
+import { isInternalBundle } from "#blokkli/helpers/bundles";
+const props = defineProps({
+  bundles: { type: Array, required: true },
+  anchorEl: { type: null, required: true },
+  label: { type: String, required: false }
+});
+defineEmits(["select", "action", "close"]);
+const el = useTemplateRef("el");
+const listEl = useTemplateRef("listEl");
+let hasScrollbar = null;
+const { types, ui, plugins, storage } = useBlokkli();
+const favorites = storage.use("blockFavorites", []);
+const { placementY, caretX } = useStickyToolbar(el, {
+  getAnchorElement() {
+    return props.anchorEl;
+  },
+  getPlacementY() {
+    return "auto";
+  },
+  getPlacementX() {
+    return "center";
+  },
+  getCaretWidth() {
+    return 30;
+  }
+});
+const items = computed(() => {
+  return props.bundles.filter((bundle) => !isInternalBundle(bundle)).map((bundle) => {
+    return {
+      bundle,
+      label: types.getBlockBundleDefinition(bundle)?.label ?? bundle,
+      isFavorite: favorites.value.includes(bundle)
+    };
+  }).sort((a, b) => {
+    if (a.isFavorite && !b.isFavorite) return -1;
+    if (!a.isFavorite && b.isFavorite) return 1;
+    return a.label.localeCompare(b.label);
+  });
+});
+const actions = computed(() => {
+  return plugins.getAddActions().filter((action) => {
+    if (!action.itemBundle) {
+      return true;
+    }
+    return props.bundles.includes(action.itemBundle);
+  });
+});
+const onWheel = (e) => {
+  if (hasScrollbar === null) {
+    const element = listEl.value;
+    hasScrollbar = element && element.scrollHeight > element.clientHeight;
+  }
+  if (hasScrollbar) {
+    e.stopPropagation();
+  }
+};
+onMounted(() => {
+  ui.hasAddTooltipOpen.value = true;
+});
+onBeforeUnmount(() => {
+  ui.hasAddTooltipOpen.value = false;
+});
+</script>

package/dist/runtime/components/Edit/Features/Selection/AddButtons/Overlay/index.vue.d.ts

@@ -0,0 +1,15 @@
+type __VLS_Props = {
+    bundles: string[];
+    anchorEl: HTMLElement;
+    label?: string;
+};
+declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    select: (id: string) => void;
+    action: (id: string) => void;
+    close: () => void;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onClose?: (() => any) | undefined;
+    onSelect?: ((id: string) => any) | undefined;
+    onAction?: ((id: string) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;