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

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

@@ -16,7 +16,7 @@
   />
 
   <Teleport to="body">
-    <Transition appear name="bk-slide-up">
+    <BlokkliTransition name="slide-up">
       <DialogModal
         v-if="qrCodeVisible"
         :title="$t('previewDialogTitle', 'Preview with smartphone')"
@@ -35,7 +35,7 @@
       >
         <QrCode v-if="previewGrantUrl" :url="previewGrantUrl" />
       </DialogModal>
-    </Transition>
+    </BlokkliTransition>
   </Teleport>
 </template>
 
@@ -43,7 +43,7 @@
 import { ref, watch, useBlokkli, defineBlokkliFeature } from "#imports";
 import { PluginToolbarButton } from "#blokkli/plugins";
 import QrCode from "./QrCode/index.vue";
-import { DialogModal } from "#blokkli/components";
+import { DialogModal, BlokkliTransition } from "#blokkli/components";
 const { adapter } = defineBlokkliFeature({
   id: "preview-grant",
   label: "Preview Grant",

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

@@ -13,6 +13,7 @@
 "
     key-code="P"
     icon="tree"
+    @update:model-value="onToggleProxyMode"
   />
 </template>
 
@@ -26,7 +27,10 @@ defineBlokkliFeature({
   description: "Displays the blocks as a structure in the preview.",
   viewports: ["desktop"]
 });
-const { $t, ui } = useBlokkli();
+const { $t, ui, eventBus } = useBlokkli();
+function onToggleProxyMode() {
+  eventBus.emit("state:reloaded");
+}
 </script>
 
 <script>

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;

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

@@ -0,0 +1,83 @@
+<template>
+  <div class="bk-publish-summary">
+    <!-- Current State -->
+    <div class="bk-publish-summary-state">
+      <div class="bk-publish-summary-state-icon" :class="currentStateClass">
+        <Icon :name="currentStateIcon" />
+      </div>
+      <div class="bk-publish-summary-state-label">
+        {{ currentStateLabel }}
+      </div>
+    </div>
+
+    <!-- Arrow -->
+    <div class="bk-publish-summary-arrow">
+      <Icon name="arrow-right" />
+    </div>
+
+    <!-- Action -->
+    <div class="bk-publish-summary-action">
+      <div class="bk-publish-summary-action-icon" :class="actionClass">
+        <Icon :name="actionIcon" />
+      </div>
+      <div class="bk-publish-summary-action-label">
+        {{ actionLabel }}
+      </div>
+    </div>
+
+    <!-- Arrow -->
+    <div class="bk-publish-summary-arrow">
+      <Icon name="arrow-right" />
+    </div>
+
+    <!-- Result State -->
+    <div class="bk-publish-summary-state" :class="resultStateClass">
+      <div>
+        <Icon :name="resultStateIcon" />
+      </div>
+      <div class="bk-publish-summary-state-label">
+        {{ resultStateLabel }}
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { computed } from "#imports";
+import { Icon } from "#blokkli/components";
+const props = defineProps({
+  isPublished: { type: Boolean, required: true },
+  mode: { type: String, required: true },
+  currentStateLabel: { type: String, required: true },
+  actionLabel: { type: String, required: true },
+  resultStateLabel: { type: String, required: true }
+});
+const currentStateIcon = computed(
+  () => props.isPublished ? "eye" : "eye-off"
+);
+const currentStateClass = computed(
+  () => props.isPublished ? "bk-is-published" : "bk-is-unpublished"
+);
+const resultStateIcon = computed(() => {
+  if (props.mode === "save") {
+    return "eye-off";
+  }
+  return "eye";
+});
+const resultStateClass = computed(() => {
+  if (props.mode === "save") {
+    return "bk-is-unpublished";
+  }
+  return "bk-is-published";
+});
+const actionIcon = computed(() => {
+  if (props.mode === "save") return "save";
+  if (props.mode === "scheduled") return "calendar-clock";
+  return "publish";
+});
+const actionClass = computed(() => {
+  if (props.mode === "save") return "bk-is-save";
+  if (props.mode === "scheduled") return "bk-is-scheduled";
+  return "bk-is-publish";
+});
+</script>

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

@@ -0,0 +1,9 @@
+type __VLS_Props = {
+    isPublished: boolean;
+    mode: 'immediate' | 'scheduled' | 'save';
+    currentStateLabel: string;
+    actionLabel: string;
+    resultStateLabel: 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>;
+export default _default;