@blokkli/editor 2.0.0-alpha.2 → 2.0.0-alpha.21

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

@@ -36,7 +36,7 @@
     :key="renderKey"
     to="#blokkli-add-list-sidebar-before"
   >
-    <div class="bk-list-sidebar-form">
+    <div class="bk bk-list-sidebar-form">
       <input
         id="add_block_search"
         v-model="searchText"
@@ -60,6 +60,7 @@ import {
 import { AddListItem } from "#blokkli/components";
 import defineCommands from "#blokkli/helpers/composables/defineCommands";
 import onBlokkliEvent from "#blokkli/helpers/composables/onBlokkliEvent";
+import { isInternalBundle } from "#blokkli/helpers/bundles";
 import { PluginTourItem } from "#blokkli/plugins";
 import { getFieldKey, onlyUnique } from "#blokkli/helpers";
 const { settings } = defineBlokkliFeature({
@@ -79,7 +80,6 @@ const { settings } = defineBlokkliFeature({
     }
   }
 });
-const reservedBundles = ["from_library", "blokkli_fragment"];
 const {
   selection,
   storage,
@@ -91,53 +91,36 @@ const {
   $t,
   state,
   dom,
-  definitions
+  definitions,
+  blocks
 } = useBlokkli();
 const shouldRender = computed(() => state.editMode.value === "editing");
 const searchText = ref("");
 const itemEntityType = runtimeConfig.itemEntityType;
 const favorites = storage.use("blockFavorites", []);
-const activeField = computed(() => {
-  if (selection.activeFieldKey.value) {
-    const el = document.querySelector(
-      `[data-field-key="${selection.activeFieldKey.value}"]`
-    );
-    if (el && el instanceof HTMLElement) {
-      const label = el.dataset.fieldLabel;
-      const name = el.dataset.fieldName;
-      const isNested = el.dataset.fieldIsNested === "true";
-      const hostEntityType = el.dataset.hostEntityType;
-      const hostEntityUuid = el.dataset.hostEntityUuid;
-      if (label && name && hostEntityType && hostEntityUuid) {
-        return { label, name, hostEntityType, hostEntityUuid, isNested };
-      }
-    }
-  }
-  return void 0;
-});
 const getAllowedTypesForSelected = (p) => {
-  if (types.itemBundlesWithNested.includes(p.itemBundle)) {
-    return types.fieldConfig.forEntityTypeAndBundle(itemEntityType, p.itemBundle).flatMap((v) => v.allowedBundles).filter(Boolean);
+  if (types.itemBundlesWithNested.includes(p.bundle)) {
+    return types.fieldConfig.forEntityTypeAndBundle(itemEntityType, p.bundle).flatMap((v) => v.allowedBundles).filter(Boolean);
   }
-  if (p.hostType === itemEntityType) {
-    return types.fieldConfig.forEntityTypeAndBundle(itemEntityType, p.hostBundle).flatMap((v) => v.allowedBundles).filter(Boolean);
+  if (p.host.type === itemEntityType) {
+    return types.fieldConfig.forEntityTypeAndBundle(itemEntityType, p.host.bundle).flatMap((v) => v.allowedBundles).filter(Boolean);
   } else {
     return types.getFieldConfig(
       context.value.entityType,
       context.value.entityBundle,
-      p.hostFieldName
+      p.host.fieldName
     )?.allowedBundles || [];
   }
 };
-const bundlesForRenderedFields = computed(
-  () => dom.registeredFieldTypes.value.flatMap((field) => {
+const bundlesForRenderedFields = computed(() => {
+  return dom.registeredFieldTypes.value.flatMap((field) => {
     return types.getFieldConfig(
       field.entityType,
       field.entityBundle,
       field.fieldName
     )?.allowedBundles || [];
-  }).filter(onlyUnique)
-);
+  }).filter(onlyUnique);
+});
 const generallyAvailableBundles = computed(
   () => types.generallyAvailableBundles.filter(
     (v) => (
@@ -147,15 +130,8 @@ const generallyAvailableBundles = computed(
   )
 );
 const selectableBundles = computed(() => {
-  if (selection.blocks.value.length) {
-    return selection.blocks.value.flatMap((v) => getAllowedTypesForSelected(v));
-  }
-  if (activeField.value && activeField.value.hostEntityType === context.value.entityType) {
-    return types.getFieldConfig(
-      context.value.entityType,
-      context.value.entityBundle,
-      activeField.value.name
-    )?.allowedBundles || [];
+  if (selection.items.value.length) {
+    return selection.items.value.flatMap((v) => getAllowedTypesForSelected(v));
   }
   return generallyAvailableBundles.value.map((v) => v.id || "");
 });
@@ -174,7 +150,7 @@ function determineVisibility(bundle, label) {
   return true;
 }
 const sortedList = computed(() => {
-  return [...generallyAvailableBundles.value].filter((v) => !reservedBundles.includes(v.id)).map((v) => {
+  return [...generallyAvailableBundles.value].filter((v) => !isInternalBundle(v.id)).map((v) => {
     const isVisible = determineVisibility(v.id, v.label);
     const isDisabled = !v.id || !selectableBundles.value.includes(v.id);
     return {
@@ -191,29 +167,29 @@ const sortedList = computed(() => {
 });
 const renderKey = ref("");
 const getBundlesForAppendCommands = () => {
-  if (selection.blocks.value.length !== 1) {
+  const item = selection.item.value;
+  if (!item) {
     return [];
   }
-  const block = selection.blocks.value[0];
   const field = types.getFieldConfig(
-    block.hostType,
-    block.hostBundle,
-    block.hostFieldName
+    item.host.type,
+    item.host.bundle,
+    item.host.fieldName
   );
   if (field) {
     if (field.cardinality !== -1) {
-      const key = getFieldKey(block.hostUuid, block.hostFieldName);
+      const key = getFieldKey(item.host.uuid, item.host.fieldName);
       const count = state.getFieldBlockCount(key);
       if (count >= field.cardinality) {
         return [];
       }
     }
-    return field.allowedBundles.filter((v) => !reservedBundles.includes(v));
+    return field.allowedBundles.filter((v) => !isInternalBundle(v));
   }
   return [];
 };
 const getAppendEndCommands = () => {
-  if (selection.blocks.value.length !== 0) {
+  if (selection.items.value.length !== 0) {
     return [];
   }
   return types.fieldConfig.forEntityTypeAndBundle(
@@ -227,7 +203,7 @@ const getAppendEndCommands = () => {
         return [];
       }
     }
-    return field.allowedBundles.filter((v) => !reservedBundles.includes(v)).map((bundle) => {
+    return field.allowedBundles.filter((v) => !isInternalBundle(v)).map((bundle) => {
       const definition = types.getBlockBundleDefinition(bundle);
       return {
         id: "block_add_list:append_end:" + bundle + field.name,
@@ -279,7 +255,7 @@ const getInsertCommands = (block) => {
   if (!block) {
     return [];
   }
-  const nestedFields = types.fieldConfig.forEntityTypeAndBundle(itemEntityType, block.itemBundle).map((field) => {
+  const nestedFields = types.fieldConfig.forEntityTypeAndBundle(itemEntityType, block.bundle).map((field) => {
     return {
       ...field,
       uuid: block.uuid
@@ -307,8 +283,8 @@ const getInsertCommands = (block) => {
       });
     }
   );
-  if (block.hostType === runtimeConfig.itemEntityType) {
-    const parentBlock = dom.findBlock(block.hostUuid);
+  if (block.host.type === runtimeConfig.itemEntityType) {
+    const parentBlock = blocks.getBlock(block.host.uuid);
     if (parentBlock) {
       getInsertCommands(parentBlock).forEach((parentCommand) => {
         commands.push(parentCommand);
@@ -318,7 +294,7 @@ const getInsertCommands = (block) => {
   return commands;
 };
 const commandCallbackAppend = (bundle) => {
-  const block = selection.blocks.value[0];
+  const block = selection.items.value[0];
   if (!block) {
     return;
   }
@@ -326,9 +302,9 @@ const commandCallbackAppend = (bundle) => {
     bundle,
     afterUuid: selection.uuids.value[0],
     host: {
-      type: block.hostType,
-      uuid: block.hostUuid,
-      fieldName: block.hostFieldName
+      type: block.host.type,
+      uuid: block.host.uuid,
+      fieldName: block.host.fieldName
     }
   });
 };
@@ -353,7 +329,7 @@ defineCommands(() => {
   }
   return [
     ...getAppendCommands(),
-    ...getInsertCommands(selection.blocks.value[0]),
+    ...getInsertCommands(selection.items.value[0]),
     ...getAppendEndCommands()
   ];
 });

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

@@ -0,0 +1,154 @@
+<template>
+  <div class="bk-schedule-section">
+    <FormToggle v-model="isEnabled" :disabled="disabled">
+      <div class="bk-schedule-section-toggle-title">
+        <Icon :name="icon" />
+        <div class="bk-schedule-section-toggle-title-label">{{ label }}</div>
+      </div>
+    </FormToggle>
+
+    <TransitionHeight opacity>
+      <div v-if="isEnabled" class="bk-schedule-section-content">
+        <div
+          v-if="hasMixedDates && !overrideMode"
+          class="bk-schedule-section-mixed"
+        >
+          <InfoBox :text="mixedDatesMessage" />
+          <button type="button" class="bk-button" @click="enableOverride">
+            {{ $t("blockSchedulerOverride", "Set date for all") }}
+          </button>
+        </div>
+
+        <div v-if="!hasMixedDates || overrideMode">
+          <ScheduleDate v-model="selectedDate" />
+        </div>
+      </div>
+    </TransitionHeight>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed, watch, useBlokkli } from "#imports";
+import {
+  FormToggle,
+  ScheduleDate,
+  InfoBox,
+  Icon,
+  TransitionHeight
+} from "#blokkli/components";
+const props = defineProps({
+  label: { type: String, required: true },
+  icon: { type: null, required: true },
+  items: { type: Array, required: true },
+  supportedBundles: { type: Array, required: true },
+  disabled: { type: Boolean, required: false, default: false }
+});
+const { $t, ui } = useBlokkli();
+const modelValue = defineModel({ type: null });
+const isEnabled = ref(false);
+const selectedDate = ref(void 0);
+const overrideMode = ref(false);
+const hasMixedDates = computed(() => {
+  const supportedItems2 = props.items.filter(
+    (item) => props.supportedBundles.includes(item.bundle)
+  );
+  if (supportedItems2.length === 0) {
+    return false;
+  }
+  const dates = supportedItems2.map((item) => item.date);
+  if (dates.every((date) => date == null)) {
+    return false;
+  }
+  const firstDate = dates[0];
+  const allSame = dates.every((date) => date === firstDate);
+  return !allSame;
+});
+const commonDate = computed(() => {
+  if (hasMixedDates.value) {
+    return void 0;
+  }
+  const supportedItems2 = props.items.filter(
+    (item) => props.supportedBundles.includes(item.bundle)
+  );
+  const dates = supportedItems2.map((item) => item.date).filter((date) => date != null);
+  if (dates.length === 0) {
+    return void 0;
+  }
+  return dates[0] || void 0;
+});
+const mixedDatesMessage = computed(() => {
+  const supportedItems2 = props.items.filter(
+    (item) => props.supportedBundles.includes(item.bundle)
+  );
+  const dates = supportedItems2.map((item) => item.date).filter((date) => date != null);
+  const uniqueDates = [...new Set(dates)];
+  const formattedDates = uniqueDates.map((date) => ui.formatDate(date)).join(", ");
+  const message = $t(
+    "blockSchedulerMixedDates",
+    "Selected blocks have different dates: @dates"
+  );
+  return message.replace("@dates", formattedDates);
+});
+function getTomorrowDate() {
+  const tomorrow = /* @__PURE__ */ new Date();
+  tomorrow.setDate(tomorrow.getDate() + 1);
+  tomorrow.setHours(12, 0, 0, 0);
+  return tomorrow.toISOString();
+}
+function getMostCommonDate() {
+  const supportedItems2 = props.items.filter(
+    (item) => props.supportedBundles.includes(item.bundle)
+  );
+  const dates = supportedItems2.map((item) => item.date).filter((date) => date != null);
+  if (dates.length === 0) {
+    return void 0;
+  }
+  const dateCount = /* @__PURE__ */ new Map();
+  for (const date of dates) {
+    dateCount.set(date, (dateCount.get(date) || 0) + 1);
+  }
+  let mostCommonDate;
+  let maxCount = 0;
+  for (const [date, count] of dateCount.entries()) {
+    if (count > maxCount) {
+      maxCount = count;
+      mostCommonDate = date;
+    }
+  }
+  return mostCommonDate;
+}
+const supportedItems = props.items.filter(
+  (item) => props.supportedBundles.includes(item.bundle)
+);
+const hasAnyDate = supportedItems.some((item) => item.date != null);
+if (hasAnyDate && !props.disabled) {
+  isEnabled.value = true;
+  if (commonDate.value) {
+    selectedDate.value = commonDate.value;
+  }
+}
+watch(isEnabled, (enabled) => {
+  if (!enabled) {
+    selectedDate.value = void 0;
+    overrideMode.value = false;
+    modelValue.value = null;
+  } else if (commonDate.value && !hasMixedDates.value) {
+    selectedDate.value = commonDate.value;
+  } else if (!selectedDate.value) {
+    selectedDate.value = getTomorrowDate();
+  }
+});
+watch(selectedDate, (date) => {
+  if (isEnabled.value) {
+    modelValue.value = date || null;
+  }
+});
+function enableOverride() {
+  overrideMode.value = true;
+  selectedDate.value = getMostCommonDate() || getTomorrowDate();
+}
+defineExpose({
+  isEnabled,
+  selectedDate
+});
+</script>

package/dist/runtime/components/Edit/Features/BlockScheduler/Dialog/ScheduleSection.vue.d.ts

@@ -0,0 +1,27 @@
+import type { BlokkliIcon } from '#blokkli-build/icons';
+export type ScheduleItemData = {
+    uuid: string;
+    bundle: string;
+    date: string | null | undefined;
+};
+type __VLS_Props = {
+    label: string;
+    icon: BlokkliIcon;
+    items: ScheduleItemData[];
+    supportedBundles: string[];
+    disabled?: boolean;
+};
+type __VLS_PublicProps = __VLS_Props & {
+    modelValue?: string | null | undefined;
+};
+declare const _default: import("vue").DefineComponent<__VLS_PublicProps, {
+    isEnabled: import("vue").Ref<boolean, boolean>;
+    selectedDate: import("vue").Ref<string | undefined, string | undefined>;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: string | null | undefined) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: string | null | undefined) => any) | undefined;
+}>, {
+    disabled: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

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/BlockScheduler/Dialog/index.vue.d.ts

@@ -0,0 +1,11 @@
+type __VLS_Props = {
+    uuids: string[];
+    bundlesWithPublish: string[];
+    bundlesWithUnpublish: string[];
+};
+declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    close: () => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onClose?: (() => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;