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

package/dist/modules/drupal/graphql/base/fragment.paragraphsBlokkliEditState.graphql

@@ -17,6 +17,10 @@ fragment paragraphsBlokkliEditState on ParagraphsBlokkliEditState {
     }
   }
 
+  publishOptions {
+    ...paragraphsBlokkliPublishOptions
+  }
+
   entity {
     status
     label

package/dist/modules/drupal/graphql/features/publishNew.graphql

@@ -31,10 +31,7 @@ query pbPublishOptions(
     langcode: $langcode
   ) {
     publishOptions {
-      canPublish
-      isRevisionable
-      hasRevisionLogMessage
-      lastChanged
+      ...paragraphsBlokkliPublishOptions
     }
   }
 }

package/dist/modules/drupal/graphql/features/scheduler.graphql

@@ -0,0 +1,31 @@
+mutation pbUnschedule(
+  $entityType: EntityType!
+  $entityUuid: String!
+  $langcode: String
+) {
+  state: paragraphsEditMutationState(
+    entityType: $entityType
+    entityUuid: $entityUuid
+  ) {
+    action: unschedule {
+      ...paragraphsBlokkliMutationResult
+    }
+  }
+}
+
+mutation pbSchedule(
+  $entityType: EntityType!
+  $entityUuid: String!
+  $langcode: String
+  $date: String!
+  $revisionLogMessage: String
+) {
+  state: paragraphsEditMutationState(
+    entityType: $entityType
+    entityUuid: $entityUuid
+  ) {
+    action: schedule(date: $date, revisionLogMessage: $revisionLogMessage) {
+      ...paragraphsBlokkliMutationResult
+    }
+  }
+}

package/dist/modules/drupal/index.mjs

@@ -181,6 +181,23 @@ const index = defineBlokkliModule({
     }
     if (editStateFields.has("publishOptions") && queryFields.has("pbSearchEditStates")) {
       addGraphqlDocument("features/publishNew.graphql");
+      const publishOptionsFragmentFields = [
+        "canPublish",
+        "isRevisionable",
+        "hasRevisionLogMessage",
+        "lastChanged",
+        "revisionLogMessage"
+      ];
+      if (editMutationStateFields.has("unschedule")) {
+        addGraphqlDocument("features/scheduler.graphql");
+        publishOptionsFragmentFields.push("canSchedule", "publishOn");
+      }
+      const publishOptionsFragment = `
+fragment paragraphsBlokkliPublishOptions on ParagraphsBlokkliPublishOptions {
+  ${publishOptionsFragmentFields.join("\n  ")}
+}
+`;
+      graphql.addDocument("blokkli:publishOptions", publishOptionsFragment);
     } else {
       addGraphqlDocument("features/publish.graphql");
     }

package/dist/modules/drupal/runtime/adapter/index.js

@@ -10,6 +10,17 @@ import {
   useRouter
 } from "#imports";
 import { ParagraphsBlokkliRemoteVideoProvider } from "#graphql-operations";
+function mapPublishOptions(publishOptions) {
+  return {
+    canPublish: !!publishOptions.canPublish,
+    isRevisionable: !!publishOptions.isRevisionable,
+    hasRevisionLogMessage: !!publishOptions.hasRevisionLogMessage,
+    lastChanged: publishOptions.lastChanged ?? null,
+    canSchedule: !!publishOptions.canSchedule,
+    publishOn: publishOptions.publishOn ?? null,
+    revisionLogMessage: publishOptions.revisionLogMessage ?? null
+  };
+}
 function mapPluginConfigInputs(inputs) {
   return inputs.map((input) => {
     if (input.__typename === "ParagraphsBlokkliConfigInputText") {
@@ -136,6 +147,10 @@ export default defineBlokkliEditAdapter(
       const fields = state?.mutatedState?.fields || [];
       const violations = state.mutatedState?.violations || [];
       const entity = state.entity;
+      if (!state.publishOptions) {
+        throw new Error("Missing publish options.");
+      }
+      const publishOptions = mapPublishOptions(state.publishOptions);
       const mutatedOptions = state.mutatedState?.mutatedOptions || {};
       Object.keys(mutatedOptions).forEach((uuid) => {
         mutatedOptions[uuid] = mutatedOptions[uuid]?.paragraphs_blokkli_data || {};
@@ -175,6 +190,7 @@ export default defineBlokkliEditAdapter(
           // PHP and its arrays...
           mutatedHostOptions: Array.isArray(mutatedHostOptions) ? {} : mutatedHostOptions
         },
+        publishOptions,
         entity,
         mutatedEntity: state.mutatedEntity,
         translationState
@@ -324,7 +340,7 @@ export default defineBlokkliEditAdapter(
         if (!options) {
           throw new Error("Failed to load publish options.");
         }
-        return options;
+        return mapPublishOptions(options);
       });
     }
     if (hasQuery("pbGetImportSourceEntities")) {
@@ -865,6 +881,20 @@ export default defineBlokkliEditAdapter(
         });
       };
     }
+    if (hasMutation("pbUnschedule")) {
+      adapter.unscheduleEditState = (options) => useGraphqlMutation("pbUnschedule", {
+        entityType: options.hostEntityType.toUpperCase(),
+        entityUuid: options.hostEntityUuid
+      }).then(mapMutation);
+    }
+    if (hasMutation("pbSchedule")) {
+      adapter.scheduleEditState = (options) => useGraphqlMutation("pbSchedule", {
+        entityType: options.hostEntityType.toUpperCase(),
+        entityUuid: options.hostEntityUuid,
+        date: options.date,
+        revisionLogMessage: options.revisionLogMessage
+      }).then(mapMutation);
+    }
     return adapter;
   }
 );

package/dist/runtime/adapter/index.d.ts

@@ -161,6 +161,34 @@ export type BlokkliAdapterPublishOptions = {
      */
     revisionLogMessage?: string;
 };
+export type BlokkliAdapterScheduleOptions = {
+    /**
+     * The host entity type.
+     */
+    hostEntityType: string;
+    /**
+     * The host entity UUID.
+     */
+    hostEntityUuid: string;
+    /**
+     * The revision log message.
+     */
+    revisionLogMessage?: string;
+    /**
+     * The date and time when the edit state should be published.
+     */
+    date: string;
+};
+export type BlokkliAdapterUnscheduleOptions = {
+    /**
+     * The host entity type.
+     */
+    hostEntityType: string;
+    /**
+     * The host entity UUID.
+     */
+    hostEntityUuid: string;
+};
 export interface BlokkliAdapter<T> {
     /**
      * Load the state.
@@ -308,6 +336,14 @@ export interface BlokkliAdapter<T> {
      * Publish all changes.
      */
     publish?: (options: BlokkliAdapterPublishOptions) => Promise<MutationResponseLike<T | undefined | null>>;
+    /**
+     * Schedule an edit state.
+     */
+    scheduleEditState?: (options: BlokkliAdapterScheduleOptions) => Promise<MutationResponseLike<T | undefined | null>>;
+    /**
+     * Unschedule an already scheduled edit state.
+     */
+    unscheduleEditState?: (options: BlokkliAdapterUnscheduleOptions) => Promise<MutationResponseLike<T | undefined | null>>;
     /**
      * Set a specific history index.
      */

package/dist/runtime/blokkliPlugins/MenuButton/index.vue.d.ts

@@ -5,7 +5,7 @@ declare const _default: __VLS_WithSlots<import("vue").DefineComponent<{
     description: string;
     disabled?: boolean;
     icon?: BlokkliIcon;
-    type?: "success" | "danger";
+    type?: "success" | "danger" | "yellow";
     weight?: number;
     secondary?: boolean;
 }, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
@@ -16,7 +16,7 @@ declare const _default: __VLS_WithSlots<import("vue").DefineComponent<{
     description: string;
     disabled?: boolean;
     icon?: BlokkliIcon;
-    type?: "success" | "danger";
+    type?: "success" | "danger" | "yellow";
     weight?: number;
     secondary?: boolean;
 }> & Readonly<{

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

@@ -32,6 +32,9 @@
           <slot />
         </div>
       </div>
+      <div v-if="$slots['pre-footer']" class="bk-dialog-pre-footer">
+        <slot name="pre-footer" />
+      </div>
       <div v-if="!hideButtons" class="bk bk-dialog-footer">
         <button
           class="bk-button"

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

@@ -35,6 +35,8 @@ declare const _default: __VLS_WithSlots<import("vue").DefineComponent<{
     canSubmit: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
     default?: (props: {}) => any;
+} & {
+    'pre-footer'?: (props: {}) => any;
 }>;
 export default _default;
 type __VLS_WithSlots<T, S> = T & {

package/dist/runtime/components/Edit/Features/DraggingOverlay/DropTargets/fragment.glsl

@@ -8,6 +8,7 @@ varying vec3 v_color;
 uniform float u_scale;
 uniform float u_dpi;
 uniform vec2 u_resolution;
+uniform float u_active_hover_nesting_level;
 
 float roundedBoxSDF(vec2 CenterPosition, vec2 Size, float Radius) {
   return length(max(abs(CenterPosition) - Size + Radius, 0.0)) - Radius;
@@ -74,7 +75,12 @@ void main() {
       : alphaInner * 0.2;
 
   if (v_is_hover_area >= 1.0) {
-    adjustedAlphaFill *= 0.5;
+    // If nesting level is 0, don't render the fill (border only)
+    if (u_active_hover_nesting_level < 0.5) {
+      adjustedAlphaFill = 0.0;
+    } else {
+      adjustedAlphaFill *= 0.5;
+    }
   }
 
   if (alphaBorder > 0.0) {

package/dist/runtime/components/Edit/Features/DraggingOverlay/DropTargets/index.vue

@@ -444,6 +444,7 @@ class DropTargetRectangleBufferCollector extends RectangleBufferCollector {
         false
       );
     }
+    this.processPendingRects();
     const hasChanged = lengthBefore !== this.positions.length;
     if (hasChanged) {
       this.bufferInfo = this.createBufferInfo();
@@ -483,7 +484,9 @@ class DropTargetRectangleBufferCollector extends RectangleBufferCollector {
     return null;
   }
 }
-const collector = new DropTargetRectangleBufferCollector(gl);
+const collector = new DropTargetRectangleBufferCollector(gl, {
+  deferredMode: true
+});
 if (gl) {
   collector.addRectangle(
     {
@@ -541,6 +544,18 @@ const activeHoverRect = computed(() => {
     return [0, 0, 0, 0];
   }
   const outset = activeHoverField.value.field.nestingLevel === 0 ? 0 : 20;
+  if (activeHoverField.value.emptyChild) {
+    const emptyChildId = activeHoverField.value.emptyChild.id;
+    const adjustedRect = collector.rects[emptyChildId];
+    if (adjustedRect) {
+      return [
+        adjustedRect.x - outset,
+        adjustedRect.y - outset,
+        adjustedRect.width + 2 * outset,
+        adjustedRect.height + 2 * outset
+      ];
+    }
+  }
   return [
     activeHoverField.value.x - outset,
     activeHoverField.value.y - outset,
@@ -551,6 +566,9 @@ const activeHoverRect = computed(() => {
 const activeHoverColor = computed(() => {
   return getColorForField(activeHoverField.value);
 });
+const activeHoverFieldNestingLevel = computed(() => {
+  return activeHoverField.value?.field.nestingLevel ?? 0;
+});
 const uniforms = computed(() => {
   const index = active.value?.index;
   return {
@@ -561,7 +579,8 @@ const uniforms = computed(() => {
     u_color_hover_area: toShaderColor(activeHoverColor.value),
     u_color_area: toShaderColor(theme.teal.value.normal),
     u_active_rect_id: index === void 0 ? -1 : index,
-    u_active_hover_rect: activeHoverRect.value
+    u_active_hover_rect: activeHoverRect.value,
+    u_active_hover_nesting_level: activeHoverFieldNestingLevel.value
   };
 });
 const dragBox = ref({
@@ -621,6 +640,7 @@ onBlokkliEvent("canvas:draw", () => {
     gl.useProgram(programInfo.program);
     animation.setSharedUniforms(gl, programInfo);
   }
+  const { info, hasChanged } = collector.getBufferInfo();
   if (!props.isTouch) {
     if (cursorIsInsideClipped()) {
       const closest = collector.getClosestIntersectingRect(
@@ -632,7 +652,6 @@ onBlokkliEvent("canvas:draw", () => {
       active.value = null;
     }
   }
-  const { info, hasChanged } = collector.getBufferInfo();
   if (programInfo && gl) {
     setHoveredFieldArea(dragBox.value, mouseAbsolute);
     setUniforms(programInfo, uniforms.value);

package/dist/runtime/components/Edit/Features/DraggingOverlay/DropTargets/vertex.glsl

@@ -17,6 +17,7 @@ uniform vec3 u_color_field_3;
 uniform vec3 u_color_area;
 uniform vec3 u_color_hover_area;
 uniform vec4 u_active_hover_rect;
+uniform float u_active_hover_nesting_level;
 uniform float u_dpi;
 
 varying vec4 v_quad;

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

@@ -1,5 +1,22 @@
 <template>
   <Teleport to="#bk-toolbar-title">
+    <button
+      v-if="scheduledDate"
+      class="bk-toolbar-title-scheduled"
+      @click.prevent="eventBus.emit('publish:show-dialog')"
+    >
+      <Icon name="calendar-clock" />
+      <div class="bk-toolbar-title-scheduled-text">
+        <div>{{ formattedScheduledDate }}</div>
+      </div>
+      <div class="bk-tooltip">
+        <div>
+          {{
+            $t("scheduledFor", "The changes will be published on this date.")
+          }}
+        </div>
+      </div>
+    </button>
     <button
       ref="buttonEl"
       class="bk-toolbar-button"
@@ -36,15 +53,30 @@
 import defineCommands from "#blokkli/helpers/composables/defineCommands";
 import { useBlokkli, defineBlokkliFeature, ref, computed } from "#imports";
 import defineTourItem from "#blokkli/helpers/composables/defineTourItem";
+import { Icon } from "#blokkli/components";
 defineBlokkliFeature({
   id: "entity-title",
   icon: "title",
   label: "Entity Title",
   description: "Renders the title and status of the page entity."
 });
-const { state, eventBus, $t } = useBlokkli();
+const { state, eventBus, $t, ui } = useBlokkli();
 const { entity, mutations } = state;
 const buttonEl = ref(null);
+const scheduledDate = computed(() => state.publishOptions.value?.publishOn);
+const formattedScheduledDate = computed(() => {
+  if (!scheduledDate.value) {
+    return "";
+  }
+  return ui.formatDate(scheduledDate.value, {
+    weekday: "short",
+    year: "numeric",
+    month: "2-digit",
+    day: "2-digit",
+    hour: "2-digit",
+    minute: "2-digit"
+  });
+});
 const statusPublished = computed(
   () => $t("pageIsPublished", "Page is published")
 );

package/dist/runtime/components/Edit/Features/Publish/Dialog/Item.vue

@@ -2,7 +2,8 @@
   <tr
     :class="{
   'bk-is-success': isSuccess,
-  'bk-is-error': isError
+  'bk-is-error': isError,
+  'bk-is-warning': isScheduled && isSelected && !isSuccess
 }"
   >
     <td>
@@ -24,7 +25,9 @@
             {{ bundleLabel }}
           </div>
         </div>
-        <div v-if="isCurrent" class="bk-pill">Aktuelle Seite</div>
+        <div v-if="isCurrent" class="bk-pill">
+          {{ $t("publishCurrentPage", "Current page") }}
+        </div>
       </label>
     </td>
     <td>
@@ -36,7 +39,8 @@
         <span
           class="bk-status-indicator"
           :class="{
-  'bk-is-success': newStatus.status
+  'bk-is-success': newStatus.status === true,
+  'bk-is-warning': newStatus.status === 'scheduled'
 }"
         />
       </div>
@@ -55,7 +59,8 @@
           <span
             class="bk-status-indicator"
             :class="{
-  'bk-is-success': newStatus.status
+  'bk-is-success': newStatus.status === true,
+  'bk-is-warning': newStatus.status === 'scheduled'
 }"
           />
         </template>
@@ -65,8 +70,9 @@
 </template>
 
 <script setup>
-import { computed } from "#imports";
+import { computed, useBlokkli } from "#imports";
 import { Icon } from "#blokkli/components";
+const { $t } = useBlokkli();
 const props = defineProps({
   hostEntityType: { type: String, required: true },
   hostEntityUuid: { type: String, required: true },
@@ -76,7 +82,9 @@ const props = defineProps({
   isCurrent: { type: Boolean, required: true },
   shouldPublish: { type: Boolean, required: true },
   isMutating: { type: Boolean, required: true },
-  mutationStatus: { type: Object, required: false }
+  mutationStatus: { type: Object, required: false },
+  isScheduled: { type: Boolean, required: true },
+  scheduleDate: { type: String, required: true }
 });
 const modelValue = defineModel({ type: Array, ...{
   default: () => {
@@ -92,10 +100,12 @@ const isError = computed(
 );
 const mutationStatusLabel = computed(() => {
   if (isSuccess.value) {
-    if (props.entity.status && props.shouldPublish) {
-      return "Erfolgreich publiziert";
+    if (props.isScheduled) {
+      return $t("publishPublicationScheduled", "Publication scheduled");
+    } else if (props.entity.status && props.shouldPublish) {
+      return $t("publishSuccessfullyPublished", "Successfully published");
     } else {
-      return "Erfolgreich gespeichert";
+      return $t("publishSuccessfullySaved", "Successfully saved");
     }
   }
   return null;
@@ -104,14 +114,31 @@ const isCurrentlyPublished = computed(() => props.entity.status);
 const title = computed(() => props.entity.label);
 const bundleLabel = computed(() => props.entity.bundleLabel);
 const newStatus = computed(() => {
-  if (isSelected.value && isCurrentlyPublished.value && !props.shouldPublish) {
-    return { label: "bleibt publiziert", status: true };
+  if (isSelected.value && props.isScheduled) {
+    return {
+      label: $t("publishWillBeScheduled", "Will be scheduled"),
+      status: "scheduled"
+    };
+  } else if (isSelected.value && isCurrentlyPublished.value && !props.shouldPublish) {
+    return {
+      label: $t("publishRemainsPublished", "Remains published"),
+      status: true
+    };
   } else if (isSelected.value && !isCurrentlyPublished.value && props.shouldPublish) {
-    return { label: "wird publiziert", status: true };
+    return {
+      label: $t("publishWillBePublished", "Will be published"),
+      status: true
+    };
   } else if (isSelected.value && isCurrentlyPublished.value) {
-    return { label: "bleibt publiziert", status: true };
+    return {
+      label: $t("publishRemainsPublished", "Remains published"),
+      status: true
+    };
   } else if (isSelected.value && !isCurrentlyPublished.value) {
-    return { label: "bleibt unpubliziert", status: false };
+    return {
+      label: $t("publishRemainsUnpublished", "Remains unpublished"),
+      status: false
+    };
   }
   return { label: "", status: false };
 });

package/dist/runtime/components/Edit/Features/Publish/Dialog/Item.vue.d.ts

@@ -6,6 +6,8 @@ type __VLS_Props = GetEditStatesItem & {
     shouldPublish: boolean;
     isMutating: boolean;
     mutationStatus?: MutationStatus;
+    isScheduled: boolean;
+    scheduleDate: string;
 };
 type __VLS_PublicProps = __VLS_Props & {
     modelValue?: string[];

package/dist/runtime/components/Edit/Features/Publish/Dialog/PublishOption.vue

@@ -0,0 +1,47 @@
+<template>
+  <label
+    class="bk-publish-option"
+    :class="[
+  'bk-is-' + color,
+  {
+    'bk-is-disabled': disabled
+  }
+]"
+  >
+    <input
+      v-model="value"
+      type="radio"
+      :value="id"
+      required
+      name="publish-mode"
+      :disabled
+    />
+    <div class="bk-publish-option-icon">
+      <Icon :name="icon" />
+      <div class="bk-publish-option-icon-check">
+        <Icon name="check" />
+      </div>
+    </div>
+    <div>
+      <div class="bk-publish-option-label">
+        {{ label }}
+      </div>
+      <div class="bk-publish-option-description">
+        {{ description }}
+      </div>
+    </div>
+  </label>
+</template>
+
+<script setup>
+import { Icon } from "#blokkli/components";
+defineProps({
+  id: { type: String, required: true },
+  label: { type: String, required: true },
+  description: { type: String, required: true },
+  icon: { type: null, required: true },
+  color: { type: String, required: true },
+  disabled: { type: Boolean, required: false }
+});
+const value = defineModel({ type: String });
+</script>

package/dist/runtime/components/Edit/Features/Publish/Dialog/PublishOption.vue.d.ts

@@ -0,0 +1,19 @@
+import type { BlokkliIcon } from '#blokkli-build/icons';
+export type PublishOptionProps = {
+    id: string;
+    label: string;
+    description: string;
+    icon: BlokkliIcon;
+    color: 'lime' | 'yellow' | 'red';
+    disabled?: boolean;
+};
+type __VLS_Props = PublishOptionProps;
+type __VLS_PublicProps = __VLS_Props & {
+    modelValue?: string;
+};
+declare const _default: 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>;
+export default _default;