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

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

@@ -0,0 +1,222 @@
+<template>
+  <DialogModal
+    :title="$t('blockSchedulerDialogTitle', 'Manage scheduling')"
+    :submit-label="$t('blockSchedulerDialogSubmit', 'Save schedule')"
+    :width="900"
+    :lead="
+  $t(
+    'blockSchedulerDialogLead',
+    'Schedule automatic publishing and unpublishing dates for the selected blocks.'
+  )
+"
+    :is-loading
+    :can-submit
+    @cancel="$emit('close')"
+    @submit="onSubmit"
+  >
+    <div class="bk-block-scheduler-dialog">
+      <ScheduleSection
+        v-model="publishOn"
+        icon="eye"
+        :label="$t('blockSchedulerDialogPublishOn', 'Publish on')"
+        :items="publishOnItems"
+        :supported-bundles="bundlesWithPublish"
+        :disabled="publishDisabled"
+      />
+
+      <ScheduleSection
+        v-model="unpublishOn"
+        icon="eye-off"
+        :label="$t('blockSchedulerDialogUnpublishOn', 'Unpublish on')"
+        :items="unpublishOnItems"
+        :supported-bundles="bundlesWithUnpublish"
+        :disabled="unpublishDisabled"
+      />
+
+      <div class="bk-block-scheduler-table">
+        <h3 class="bk-block-scheduler-table-title">
+          <span v-if="canSubmit">{{
+            $t("blockSchedulerChangesPreview", "Changes to be applied")
+          }}</span>
+          <span v-else>
+            {{ $t("blockSchedulerNoChanges", "No changes to be applied.") }}
+          </span>
+        </h3>
+        <table v-if="canSubmit" class="bk-table">
+          <thead>
+            <tr>
+              <th>{{ $t("bundle", "Bundle") }}</th>
+              <th>{{ $t("blockSchedulerDialogPublishOn", "Publish on") }}</th>
+              <th>
+                {{ $t("blockSchedulerDialogUnpublishOn", "Unpublish on") }}
+              </th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr v-for="(row, index) in tableRows" :key="index">
+              <td>{{ row.bundle }}</td>
+              <td>{{ row.publishOn }}</td>
+              <td>{{ row.unpublishOn }}</td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+    </div>
+  </DialogModal>
+</template>
+
+<script setup>
+import { falsy } from "#blokkli/helpers";
+import { computed, useBlokkli, ref } from "#imports";
+import ScheduleSection from "./ScheduleSection.vue";
+import { DialogModal } from "#blokkli/components";
+const props = defineProps({
+  uuids: { type: Array, required: true },
+  bundlesWithPublish: { type: Array, required: true },
+  bundlesWithUnpublish: { type: Array, required: true }
+});
+const emit = defineEmits(["close"]);
+const { state, $t, adapter, ui, types } = useBlokkli();
+const isLoading = ref(false);
+const error = ref("");
+const items = computed(() => {
+  return props.uuids.map((uuid) => {
+    return state.getFieldListItem(uuid);
+  }).filter(falsy).map((item) => {
+    return {
+      uuid: item.uuid,
+      bundle: item.bundle,
+      isPublished: !!item.editContext?.isPublished,
+      publishOn: item.editContext?.publishOn,
+      unpublishOn: item.editContext?.unpublishOn
+    };
+  });
+});
+const selectedBundles = computed(() => {
+  const bundles = items.value.map((item) => item.bundle);
+  return [...new Set(bundles)];
+});
+const publishDisabled = computed(() => {
+  return !selectedBundles.value.some(
+    (bundle) => props.bundlesWithPublish.includes(bundle)
+  );
+});
+const unpublishDisabled = computed(() => {
+  return !selectedBundles.value.some(
+    (bundle) => props.bundlesWithUnpublish.includes(bundle)
+  );
+});
+const publishOnItems = computed(() => {
+  return items.value.map((item) => ({
+    uuid: item.uuid,
+    bundle: item.bundle,
+    date: item.publishOn
+  }));
+});
+const unpublishOnItems = computed(() => {
+  return items.value.map((item) => ({
+    uuid: item.uuid,
+    bundle: item.bundle,
+    date: item.unpublishOn
+  }));
+});
+function getCommonDate(items2, supportedBundles) {
+  const supportedItems = items2.filter(
+    (item) => supportedBundles.includes(item.bundle)
+  );
+  if (supportedItems.length === 0) {
+    return void 0;
+  }
+  const dates = supportedItems.map((item) => item.date);
+  if (dates.every((date) => date == null)) {
+    return null;
+  }
+  const firstDate = dates[0];
+  const allSame = dates.every((date) => date === firstDate);
+  return allSame ? firstDate ?? null : void 0;
+}
+const publishOn = ref(
+  getCommonDate(publishOnItems.value, props.bundlesWithPublish)
+);
+const unpublishOn = ref(
+  getCommonDate(unpublishOnItems.value, props.bundlesWithUnpublish)
+);
+const tableRows = computed(() => {
+  return items.value.map((item) => {
+    const bundleDef = types.getBlockBundleDefinition(item.bundle);
+    const supportsPublish = props.bundlesWithPublish.includes(item.bundle);
+    const supportsUnpublish = props.bundlesWithUnpublish.includes(item.bundle);
+    let publishOnDisplay;
+    if (!supportsPublish) {
+      publishOnDisplay = $t("notSupported", "Not supported");
+    } else if (publishOn.value === void 0) {
+      publishOnDisplay = item.publishOn ? ui.formatDate(item.publishOn) : $t("notSet", "Not set");
+    } else if (publishOn.value) {
+      publishOnDisplay = ui.formatDate(publishOn.value);
+    } else {
+      publishOnDisplay = $t("notSet", "Not set");
+    }
+    let unpublishOnDisplay;
+    if (!supportsUnpublish) {
+      unpublishOnDisplay = $t("notSupported", "Not supported");
+    } else if (unpublishOn.value === void 0) {
+      unpublishOnDisplay = item.unpublishOn ? ui.formatDate(item.unpublishOn) : $t("notSet", "Not set");
+    } else if (unpublishOn.value) {
+      unpublishOnDisplay = ui.formatDate(unpublishOn.value);
+    } else {
+      unpublishOnDisplay = $t("notSet", "Not set");
+    }
+    return {
+      bundle: bundleDef?.label || item.bundle,
+      publishOn: publishOnDisplay,
+      unpublishOn: unpublishOnDisplay
+    };
+  });
+});
+const canSubmit = computed(() => {
+  return items.value.some((item) => {
+    const supportsPublish = props.bundlesWithPublish.includes(item.bundle);
+    const supportsUnpublish = props.bundlesWithUnpublish.includes(item.bundle);
+    if (supportsPublish && publishOn.value !== void 0 && item.publishOn !== publishOn.value) {
+      return true;
+    }
+    if (supportsUnpublish && unpublishOn.value !== void 0 && item.unpublishOn !== unpublishOn.value) {
+      return true;
+    }
+    return false;
+  });
+});
+async function onSubmit() {
+  isLoading.value = true;
+  const blocks = [];
+  items.value.forEach((item) => {
+    const supportsPublish = props.bundlesWithPublish.includes(item.bundle);
+    const supportsUnpublish = props.bundlesWithUnpublish.includes(item.bundle);
+    if (supportsPublish && publishOn.value !== void 0 && item.publishOn !== publishOn.value) {
+      blocks.push({
+        uuid: item.uuid,
+        type: "publish",
+        date: publishOn.value || void 0
+      });
+    }
+    if (supportsUnpublish && unpublishOn.value !== void 0 && item.unpublishOn !== unpublishOn.value) {
+      blocks.push({
+        uuid: item.uuid,
+        type: "unpublish",
+        date: unpublishOn.value || void 0
+      });
+    }
+  });
+  isLoading.value = true;
+  const isSuccess = await state.mutateWithLoadingState(
+    () => adapter.setBlockScheduleDate(blocks),
+    false,
+    $t("blockSchedulerSuccessMessage", "Successfully updated schedule dates.")
+  );
+  if (!isSuccess) {
+    error.value = "An unexpected error happened.";
+    return;
+  }
+  emit("close");
+}
+</script>

package/dist/runtime/components/Edit/Features/{Selection/AddButtons/AddButtonsField.vue.d.ts → BlockScheduler/Dialog/index.vue.d.ts}

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

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

@@ -0,0 +1,96 @@
+<template>
+  <PluginItemAction
+    id="block-scheduler"
+    :title="$t('manageSchedule', 'Manage schedule...')"
+    :disabled
+    multiple
+    edit-only
+    meta
+    :weight="1e3"
+    :class="{
+  'bk-has-schedule': selectionHasDates
+}"
+    @click="onClick"
+  >
+    <template #icon>
+      <div class="bk-schedule-action-icon">
+        <Icon name="calendar" class="bk-item-action-icon" />
+        <Icon
+          v-if="selectionHasDates"
+          name="check"
+          class="bk-schedule-action-icon-check"
+        />
+      </div>
+    </template>
+  </PluginItemAction>
+  <Teleport to="body">
+    <BlokkliTransition name="slide-up">
+      <SchedulerDialog
+        v-if="isVisible"
+        :uuids="selectedUuids"
+        :bundles-with-publish="bundlesWithPublish"
+        :bundles-with-unpublish="bundlesWithUnpublish"
+        @close="onClose"
+      />
+    </BlokkliTransition>
+  </Teleport>
+</template>
+
+<script setup>
+import { useBlokkli, defineBlokkliFeature, computed, ref } from "#imports";
+import { PluginItemAction } from "#blokkli/plugins";
+import { BlokkliTransition, Icon } from "#blokkli/components";
+import SchedulerDialog from "./Dialog/index.vue";
+defineBlokkliFeature({
+  id: "block-scheduler",
+  icon: "calendar",
+  label: "Block Scheduler",
+  description: "Adds support for scheduling blocks.",
+  requiredAdapterMethods: ["setBlockScheduleDate"]
+});
+const { $t, state, selection, types } = useBlokkli();
+const bundlesWithPublish = computed(
+  () => types.generallyAvailableBundles.filter((v) => v.hasPublishOn).map((v) => v.id)
+);
+const bundlesWithUnpublish = computed(
+  () => types.generallyAvailableBundles.filter((v) => v.hasUnpublishOn).map((v) => v.id)
+);
+const selectedUuids = ref([]);
+const isVisible = computed(() => {
+  return !!selectedUuids.value.length;
+});
+const selectionHasDates = computed(() => {
+  for (let i = 0; i < selection.uuids.value.length; i++) {
+    const uuid = selection.uuids.value[i];
+    if (!uuid) {
+      continue;
+    }
+    const block = state.getFieldListItem(uuid);
+    if (!block) {
+      continue;
+    }
+    if (block.editContext?.publishOn || block.editContext?.unpublishOn) {
+      return true;
+    }
+  }
+  return false;
+});
+const disabled = computed(() => {
+  const hasSupport = selection.bundles.value.some(
+    (bundle) => bundlesWithPublish.value.includes(bundle) || bundlesWithUnpublish.value.includes(bundle)
+  );
+  return !hasSupport;
+});
+function onClick() {
+  selectedUuids.value = [...selection.uuids.value];
+}
+function onClose() {
+  selectedUuids.value = [];
+}
+</script>
+
+<script>
+export default {
+  name: "BlockScheduler"
+};
+</script>

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

@@ -67,7 +67,7 @@
     id="clipboard"
     :title="$t('clipboard', 'Clipboard')"
     :enabled="
-  !!selection.blocks.value.length && state.editMode.value === 'editing'
+  !!selection.items.value.length && state.editMode.value === 'editing'
 "
     :items="itemDropdownItems"
     icon="clipboard"
@@ -92,6 +92,7 @@ import onBlokkliEvent from "#blokkli/helpers/composables/onBlokkliEvent";
 import defineShortcut from "#blokkli/helpers/composables/defineShortcut";
 import getVideoId from "get-video-id";
 import { emitMessage } from "#blokkli/helpers/eventBus";
+import { itemEntityType } from "#blokkli-build/config";
 const { settings, logger } = defineBlokkliFeature({
   id: "clipboard",
   label: "Clipboard",
@@ -108,7 +109,7 @@ const { settings, logger } = defineBlokkliFeature({
   },
   screenshot: "feature-clipboard.jpg"
 });
-const { selection, $t, adapter, dom, state, ui, types, keyboard } = useBlokkli();
+const { selection, $t, adapter, state, ui, types, keyboard, blocks } = useBlokkli();
 const plugin = ref(null);
 const selectionClipboard = ref([]);
 const itemDropdownItems = computed(() => {
@@ -290,7 +291,7 @@ const handleSelectionPaste = (pastedUuids) => {
   if (!pastedUuids.length) {
     return;
   }
-  const block = selection.blocks.value[0];
+  const block = selection.items.value[0];
   if (!block) {
     return;
   }
@@ -299,11 +300,11 @@ const handleSelectionPaste = (pastedUuids) => {
   let targetFieldKey = null;
   let preceedingUuid = void 0;
   if (!keyboard.isPressingShift.value) {
-    const pastedBundles = pastedUuids.map((uuid) => dom.findBlock(uuid)?.itemBundle).filter((bundle) => !!bundle);
+    const pastedBundles = pastedUuids.map((uuid) => blocks.getBlock(uuid)?.bundle).filter((bundle) => !!bundle);
     if (pastedBundles.length) {
       const nestedFields = types.fieldConfig.forEntityTypeAndBundle(
-        block.entityType,
-        block.itemBundle
+        itemEntityType,
+        block.bundle
       );
       for (const fieldConfig of nestedFields) {
         const allowedPastedBundles = pastedBundles.filter(
@@ -314,7 +315,7 @@ const handleSelectionPaste = (pastedUuids) => {
           const currentCount = state.getFieldBlockCount(nestedFieldKey);
           if (fieldConfig.cardinality === -1 || currentCount + allowedPastedBundles.length <= fieldConfig.cardinality) {
             targetField = {
-              entityType: block.entityType,
+              entityType: itemEntityType,
               entityUuid: block.uuid,
               name: fieldConfig.name
             };
@@ -328,13 +329,13 @@ const handleSelectionPaste = (pastedUuids) => {
     }
   }
   if (!targetField || !targetFieldConfig || !targetFieldKey) {
-    const field = state.getMutatedField(block.hostUuid, block.hostFieldName);
+    const field = state.getMutatedField(block.host.uuid, block.host.fieldName);
     if (!field) {
       return;
     }
     const fieldConfig = types.getFieldConfig(
       field.entityType,
-      block.hostBundle,
+      block.host.bundle,
       field.name
     );
     if (!fieldConfig) {
@@ -356,15 +357,13 @@ const handleSelectionPaste = (pastedUuids) => {
     if (!uuid) {
       continue;
     }
-    const block2 = dom.findBlock(uuid);
+    const block2 = blocks.getBlock(uuid);
     if (!block2) {
       continue;
     }
-    const isAllowed = targetFieldConfig.allowedBundles.includes(
-      block2.itemBundle
-    );
+    const isAllowed = targetFieldConfig.allowedBundles.includes(block2.bundle);
     if (!isAllowed) {
-      notAllowedBundles.push(block2.itemBundle);
+      notAllowedBundles.push(block2.bundle);
       continue;
     }
     pastedBlocks.push(block2);
@@ -500,7 +499,7 @@ function setClipboard(text) {
   }
 }
 function copyCurrentSelectionToClipboard() {
-  if (!selection.blocks.value.length) {
+  if (!selection.items.value.length) {
     selectionClipboard.value = [];
     return;
   }
@@ -510,7 +509,7 @@ function copyCurrentSelectionToClipboard() {
   selectionClipboard.value = selection.uuids.value;
 }
 onBlokkliEvent("keyPressed", (e) => {
-  if (e.code !== "c" || !e.meta) {
+  if (e.code !== "c" || !e.meta || ui.hasDialogOpen.value) {
     return;
   }
   copyCurrentSelectionToClipboard();

package/dist/runtime/components/Edit/Features/CommandPalette/Palette/Item/index.vue

@@ -0,0 +1,51 @@
+<template>
+  <button
+    ref="buttonEl"
+    :data-command-id="item.id"
+    :data-command-visible="true"
+    class="bk-command"
+    :class="{ 'bk-is-focused': isFocused }"
+    @mouseenter="$emit('focus', index)"
+    @click.prevent="$emit('select', item.id)"
+  >
+    <div class="bk-command-icon">
+      <Icon v-if="item.icon" :name="item.icon" />
+      <ItemIcon v-else :bundle="item.bundle" />
+    </div>
+    <Highlight :text="item.label" tag="span" :positions="item.positions" />
+    <div class="bk-command-group">{{ getGroupLabel(item.group) }}</div>
+  </button>
+</template>
+
+<script setup>
+import { watch, useBlokkli, useTemplateRef } from "#imports";
+import { Icon, ItemIcon, Highlight } from "#blokkli/components";
+const props = defineProps({
+  item: { type: Object, required: true },
+  index: { type: Number, required: true },
+  isFocused: { type: Boolean, required: true }
+});
+defineEmits(["focus", "select"]);
+const { $t } = useBlokkli();
+const buttonEl = useTemplateRef("buttonEl");
+watch(
+  () => props.isFocused,
+  (focused) => {
+    if (focused && buttonEl.value) {
+      buttonEl.value.scrollIntoView({ block: "nearest", inline: "nearest" });
+    }
+  }
+);
+const getGroupLabel = (id) => {
+  if (id === "ui") {
+    return $t("commandGroup.ui", "Interface");
+  } else if (id === "add") {
+    return $t("commandGroup.add", "Add new");
+  } else if (id === "action") {
+    return $t("commandGroup.action", "Actions");
+  } else if (id === "selection") {
+    return $t("commandGroup.selection", "Selection");
+  }
+  return $t("commandGroup.misc", "Miscellaneous");
+};
+</script>

package/dist/runtime/components/Edit/Features/CommandPalette/Palette/{Group → Item}/index.vue.d.ts

@@ -1,21 +1,17 @@
 import type { Command } from '#blokkli/types';
 type __VLS_Props = {
-    commands: Array<Command & {
+    item: Command & {
         _id: number;
-    }>;
-    visibleIds: {
-        id: number;
-        positions: number[];
-    }[] | undefined;
-    focusedId: string;
+        positions?: number[];
+    };
+    index: number;
+    isFocused: boolean;
 };
-declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    close: () => void;
-    focus: (id: string) => void;
-    select: (id: string) => void;
+declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    select: (id: string) => any;
+    focus: (index: number) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
-    onClose?: (() => any) | undefined;
-    onFocus?: ((id: string) => any) | undefined;
     onSelect?: ((id: string) => any) | undefined;
+    onFocus?: ((index: number) => any) | undefined;
 }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 export default _default;