@blokkli/editor 1.4.0-alpha.1 → 2.0.0-alpha.2

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

@@ -0,0 +1,251 @@
+<template>
+  <DialogModal
+    :title="$t('publishDialogTitle', 'Publish changes')"
+    :width="1200"
+    :submit-label
+    :is-loading="isLoading"
+    :can-submit="!!selectedToPublishItems.length"
+    class="bk-is-publish-dialog"
+    @submit="onSubmit"
+    @cancel="$emit('close')"
+  >
+    <div class="bk bk-form bk-dialog-publish-form">
+      <FormGroup title="Einstellungen" horizontal>
+        <FormItem v-if="publishOptions?.hasRevisionLogMessage">
+          <FormTextarea
+            v-model="revisionMessage"
+            label="Protokollnachricht der Revision"
+            description="Beschreiben Sie kurz die vorgenommenen Änderungen"
+            :disabled="isLoading"
+          />
+        </FormItem>
+        <FormItem>
+          <FormToggle
+            v-model="shouldPublish"
+            :label="toggleLabel"
+            :disabled="isLoading"
+          />
+        </FormItem>
+      </FormGroup>
+
+      <FormGroup title="Inhalte" horizontal>
+        <FormItem>
+          <template v-if="successItems.length">
+            <h2 class="bk-heading-2">Erfolgreich veröffentlicht</h2>
+
+            <table class="bk-table bk-publish-dialog-table">
+              <thead>
+                <tr>
+                  <th>Name</th>
+                  <th colspan="2">Status</th>
+                </tr>
+              </thead>
+
+              <tbody>
+                <Item
+                  v-for="item in successItems"
+                  :key="'success' + item.id"
+                  v-bind="item"
+                  v-model="states"
+                  :is-current="item.id === currentId"
+                  :should-publish
+                  :is-mutating
+                  :mutation-status="mutationStatusItems[item.id]"
+                />
+              </tbody>
+            </table>
+          </template>
+
+          <table class="bk-table bk-publish-dialog-table">
+            <thead>
+              <tr>
+                <th>Name</th>
+                <th colspan="2">Status</th>
+              </tr>
+            </thead>
+
+            <tbody>
+              <Item
+                v-for="item in toPublishItems"
+                :key="'to_publish_' + item.id"
+                v-bind="item"
+                v-model="states"
+                :is-current="item.id === currentId"
+                :should-publish
+                :is-mutating
+                :mutation-status="mutationStatusItems[item.id]"
+              />
+            </tbody>
+          </table>
+        </FormItem>
+      </FormGroup>
+    </div>
+  </DialogModal>
+</template>
+
+<script setup>
+import { ref, computed, useBlokkli, useAsyncData } from "#imports";
+import {
+  DialogModal,
+  FormToggle,
+  FormTextarea,
+  FormItem,
+  FormGroup
+} from "#blokkli/components";
+import { falsy } from "#blokkli/helpers";
+import Item from "./Item.vue";
+const { adapter, $t, state, context } = useBlokkli();
+const isMutating = ref(false);
+const mutationStatusItems = ref({});
+const publishedIds = ref([]);
+const shouldPublish = defineModel("shouldPublish", { type: Boolean, ...{
+  default: () => false
+} });
+const states = defineModel("states", { type: Array, ...{
+  default: () => []
+} });
+const revisionMessage = defineModel("revisionMessage", { type: String, ...{
+  default: () => false
+} });
+const emit = defineEmits(["close", "submit"]);
+const { data: publishOptions, status } = await useAsyncData(() => {
+  return adapter.getPublishOptions();
+});
+const { data: editStates } = await useAsyncData(
+  () => {
+    if (adapter.getEditStates) {
+      return adapter.getEditStates();
+    }
+    return Promise.resolve({
+      items: [],
+      perPage: 16,
+      total: 0
+    });
+  },
+  {
+    default: () => {
+      return {
+        items: [],
+        perPage: 16,
+        total: 0
+      };
+    }
+  }
+);
+const currentId = computed(
+  () => `${context.value.entityType}:${context.value.entityUuid}`
+);
+const stateItems = computed(() => {
+  const hostEntityType = context.value.entityType;
+  const hostEntityUuid = context.value.entityUuid;
+  return [
+    {
+      id: currentId.value,
+      hostEntityType,
+      hostEntityUuid,
+      currentUserIsOwner: !!state.owner.value?.currentUserIsOwner,
+      entity: state.entity.value
+    },
+    ...editStates.value.items.map((v) => {
+      return {
+        ...v,
+        id: `${v.hostEntityType}:${v.hostEntityUuid}`
+      };
+    }).filter((v) => v.id !== currentId.value)
+  ];
+});
+const successItems = computed(
+  () => stateItems.value.filter((v) => publishedIds.value.includes(v.id))
+);
+const toPublishItems = computed(
+  () => stateItems.value.filter((v) => !publishedIds.value.includes(v.id))
+);
+const selectedToPublishItems = computed(
+  () => toPublishItems.value.filter(
+    (v) => currentId.value === v.id || states.value.includes(v.id)
+  )
+);
+const isLoading = computed(() => status.value === "pending" || isMutating.value);
+const submitLabelPublish = computed(() => {
+  if (shouldPublish.value) {
+    const count = 1 + states.value.length;
+    return "@count Inhalte publizieren".replace("@count", count.toString());
+  }
+  return null;
+});
+const submitLabelSave = computed(() => {
+  const count = selectedToPublishItems.value.length;
+  if (!count) {
+    if (shouldPublish.value) {
+      return "Inhalte publizieren";
+    }
+    return "Inhalte speichern";
+  }
+  if (!shouldPublish.value) {
+    return "@count Inhalte speichern".replace("@count", count.toString());
+  }
+  return null;
+});
+const submitLabel = computed(() => {
+  return [submitLabelPublish.value, submitLabelSave.value].filter(falsy).join(", ");
+});
+const toggleLabel = computed(() => {
+  if (states.value.length) {
+    return "Inhalte publizieren";
+  }
+  return "Inhalt publizieren";
+});
+async function onSubmit() {
+  isMutating.value = true;
+  const items = stateItems.value;
+  let hasAnyError = false;
+  for (const item of items) {
+    const isSelected = states.value.includes(item.id) || item.hostEntityType === context.value.entityType && item.hostEntityUuid === context.value.entityUuid;
+    if (!isSelected) {
+      continue;
+    }
+    if (publishedIds.value.includes(item.id)) {
+      continue;
+    }
+    try {
+      const result = await adapter.publish({
+        hostEntityType: item.hostEntityType,
+        hostEntityUuid: item.hostEntityUuid,
+        closeAfterPublish: true,
+        revisionLogMessage: revisionMessage.value,
+        publishIfUnpublished: shouldPublish.value
+      });
+      let violations = [];
+      if (!result.success && result.state) {
+        const mapped = adapter.mapState(result.state);
+        if (mapped.mutatedState?.violations) {
+          violations = mapped.mutatedState.violations;
+        }
+      }
+      mutationStatusItems.value[item.id] = {
+        id: item.id,
+        success: result.success,
+        errors: result.errors,
+        violations
+      };
+      if (result.success) {
+        publishedIds.value.push(item.id);
+      }
+      hasAnyError ||= !result.success;
+    } catch {
+      mutationStatusItems.value[item.id] = {
+        id: item.id,
+        success: false,
+        errors: [
+          $t("unexpectedMutationError", "An unexpected error happened.")
+        ]
+      };
+    }
+  }
+  isMutating.value = false;
+  if (hasAnyError) {
+    return;
+  }
+  emit("submit");
+}
+</script>

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

@@ -0,0 +1,19 @@
+type __VLS_PublicProps = {
+    'shouldPublish'?: boolean;
+    'states'?: string[];
+    'revisionMessage'?: string;
+};
+declare const _default: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    close: () => void;
+    submit: () => void;
+    "update:shouldPublish": (value: boolean) => void;
+    "update:states": (value: string[]) => void;
+    "update:revisionMessage": (value: string) => void;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    onClose?: (() => any) | undefined;
+    onSubmit?: (() => any) | undefined;
+    "onUpdate:shouldPublish"?: ((value: boolean) => any) | undefined;
+    "onUpdate:states"?: ((value: string[]) => any) | undefined;
+    "onUpdate:revisionMessage"?: ((value: string) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

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

@@ -0,0 +1,7 @@
+import type { Validation } from '#blokkli/types';
+export type MutationStatus = {
+    id: string;
+    success: boolean;
+    errors?: string[];
+    violations?: Validation[];
+};

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

@@ -7,96 +7,92 @@
     type="success"
     :weight="0"
     :icon="icon"
-    @click="onClick"
+    @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>
+  </Teleport>
 </template>
 
-<script lang="ts" setup>
-import { useBlokkli, defineBlokkliFeature, computed, useRoute } from '#imports'
-import { PluginMenuButton } from '#blokkli/plugins'
-import type { BlokkliIcon } from '#blokkli-build/icons'
-
+<script setup>
+import {
+  useBlokkli,
+  defineBlokkliFeature,
+  computed,
+  useRoute,
+  ref
+} from "#imports";
+import { PluginMenuButton } from "#blokkli/plugins";
+import PublishDialog from "./Dialog/index.vue";
 const { adapter, settings } = defineBlokkliFeature({
-  id: 'publish',
-  icon: 'publish',
-  label: 'Publish',
-  requiredAdapterMethods: ['publish'],
-  description:
-    'Provides a menu button to publish the changes of the current entity.',
+  id: "publish",
+  icon: "publish",
+  label: "Publish",
+  requiredAdapterMethods: ["publish"],
+  description: "Provides a menu button to publish the changes of the current entity.",
   settings: {
     closeAfterPublish: {
-      type: 'checkbox',
-      label: 'Close editor after publishing',
-      description:
-        'Immediately closes the editor after successfully publishing or saving.',
+      type: "checkbox",
+      label: "Close editor after publishing",
+      description: "Immediately closes the editor after successfully publishing or saving.",
       default: true,
-      group: 'behavior',
-    },
-  },
-})
-
-const route = useRoute()
-const { state, $t, eventBus, broadcast, context } = useBlokkli()
-const { mutations, canEdit, mutateWithLoadingState } = state
-
-const isPublished = computed<boolean>(() => !!state.entity.value.status)
-
+      group: "behavior"
+    }
+  }
+});
+const route = useRoute();
+const { state, $t, broadcast, context } = useBlokkli();
+const { mutations, canEdit } = state;
+const hasPublishOptions = !!adapter.getPublishOptions;
+const isPublished = computed(() => !!state.entity.value.status);
+const showDialog = ref(false);
+const additionalEditStates = ref([]);
+const shouldPublish = ref(!!state.entity.value.status);
+const revisionMessage = ref("");
 const publishLabel = computed(() => {
-  // Entity is published. Clicking the button will make the changes go "live".
+  const suffix = hasPublishOptions ? "..." : "";
   if (isPublished.value) {
-    return settings.value.closeAfterPublish
-      ? $t('publishAndCloseLabel', 'Publish & Close')
-      : $t('publishLabel', 'Publish')
+    return (settings.value.closeAfterPublish ? $t("publishAndCloseLabel", "Publish & Close") : $t("publishLabel", "Publish")) + suffix;
   }
-
-  return settings.value.closeAfterPublish
-    ? $t('publishAndCloseLabelUnpublished', 'Save & Close')
-    : $t('publishLabelUnpublished', 'Save')
-})
-
-const publishDescription = computed(() =>
-  isPublished.value
-    ? $t('publishDescription', 'Publish all changes.')
-    : $t(
-        'publishDescriptionUnpublished',
-        'Save all changes while keeping page unpublished',
-      ),
-)
-
-const icon = computed<BlokkliIcon>(() =>
-  isPublished.value ? 'publish' : 'save',
-)
-
-const onClick = async () => {
-  const success = await mutateWithLoadingState(
-    () =>
-      adapter.publish({
-        closeAfterPublish: settings.value.closeAfterPublish,
-      }),
-    $t('publishError', 'Changes could not be published.'),
-    $t('publishSuccess', 'Changes published successfully.'),
+  return (settings.value.closeAfterPublish ? $t("publishAndCloseLabelUnpublished", "Save & Close") : $t("publishLabelUnpublished", "Save")) + suffix;
+});
+const publishDescription = computed(
+  () => isPublished.value ? $t("publishDescription", "Publish all changes.") : $t(
+    "publishDescriptionUnpublished",
+    "Save all changes while keeping page unpublished"
   )
-
-  if (!success) {
-    const validations = state.violations.value
-    if (validations.length) {
-      eventBus.emit('publish:failed')
-      // Open the validations sidebar when there are validation errors.
-      eventBus.emit('sidebar:open', 'violations')
-    }
-    return
+);
+const icon = computed(
+  () => isPublished.value ? "publish" : "save"
+);
+const onMenuClick = async () => {
+  if (hasPublishOptions) {
+    showDialog.value = true;
+    return;
   }
-
-  broadcast.emit('published', { uuid: context.value.entityUuid })
-
+  await publishCurrent();
+};
+async function publishCurrent() {
+}
+function onSubmit() {
+  broadcast.emit("published", { uuid: context.value.entityUuid });
   if (settings.value.closeAfterPublish) {
-    window.location.href = route.path
+    window.location.href = route.path;
   }
 }
 </script>
 
-<script lang="ts">
+<script>
 export default {
-  name: 'Publish',
-}
+  name: "Publish"
+};
 </script>

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

@@ -0,0 +1,2 @@
+declare const _default: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+export default _default;

package/dist/runtime/components/Edit/Features/ResponsivePreview/Frame/index.vue

@@ -6,13 +6,18 @@
     <div v-if="detached" class="bk-preview-controls">
       <slot />
     </div>
-    <div class="bk-preview-iframe">
+    <div
+      class="bk-preview-iframe"
+      :style="{
+  pointerEvents: isResizing ? 'none' : 'auto'
+}"
+    >
       <iframe ref="iframe" :src="src" @load="isLoading = false" />
     </div>
   </div>
 </template>
 
-<script lang="ts" setup>
+<script setup>
 import {
   ref,
   computed,
@@ -20,62 +25,51 @@ import {
   onMounted,
   onBeforeUnmount,
   useRoute,
-  watch,
-} from '#imports'
-import { Icon } from '#blokkli/components'
-import { frameEventBus } from './../../../../../helpers/frameEventBus'
-import onBlokkliEvent from '#blokkli/helpers/composables/onBlokkliEvent'
-
-defineProps<{
-  detached?: boolean
-}>()
-
-const route = useRoute()
-
-const { selection, broadcast } = useBlokkli()
-
+  watch
+} from "#imports";
+import { Icon } from "#blokkli/components";
+import { frameEventBus } from "./../../../../../helpers/frameEventBus";
+import onBlokkliEvent from "#blokkli/helpers/composables/onBlokkliEvent";
+defineProps({
+  detached: { type: Boolean, required: false },
+  isResizing: { type: Boolean, required: false }
+});
+const route = useRoute();
+const { selection, broadcast } = useBlokkli();
 watch(selection.uuids, (selectedUuids) => {
-  frameEventBus.emit('selectItems', selectedUuids)
-})
-
-const isLoading = ref(true)
-const iframe = ref<HTMLIFrameElement | null>(null)
-
-const src = computed(() =>
-  route.fullPath.replace('blokkliEditing', 'blokkliPreview'),
-)
-
-onBlokkliEvent('updateMutatedFields', (e) =>
-  frameEventBus.emit('mutatedFields', e.fields),
-)
-onBlokkliEvent('select', (uuids) => {
-  const uuid = Array.isArray(uuids) ? uuids[0] : uuids
-  frameEventBus.emit('focus', uuid)
-})
-onBlokkliEvent('option:update', (e) => frameEventBus.emit('updateOption', e))
-
-/**
- * Emit the event to the iframe.
- */
-const onFrameEventBusEvent = (name: any, data: any) =>
-  iframe.value?.contentWindow?.postMessage({
-    name: 'blokkli__' + name,
-    data: JSON.parse(JSON.stringify(data)),
-  })
-
+  frameEventBus.emit("selectItems", selectedUuids);
+});
+const isLoading = ref(true);
+const iframe = ref(null);
+const src = computed(
+  () => route.fullPath.replace("blokkliEditing", "blokkliPreview")
+);
+onBlokkliEvent(
+  "updateMutatedFields",
+  (e) => frameEventBus.emit("mutatedFields", e.fields)
+);
+onBlokkliEvent("select", (uuids) => {
+  const uuid = Array.isArray(uuids) ? uuids[0] : uuids;
+  if (uuid) {
+    frameEventBus.emit("focus", uuid);
+  }
+});
+onBlokkliEvent("option:update", (e) => frameEventBus.emit("updateOption", e));
+const onFrameEventBusEvent = (name, data) => iframe.value?.contentWindow?.postMessage({
+  name: "blokkli__" + name,
+  data: JSON.parse(JSON.stringify(data))
+});
 const onPreviewFocused = () => {
   if (iframe.value) {
-    iframe.value.focus()
+    iframe.value.focus();
   }
-}
-
+};
 onMounted(() => {
-  frameEventBus.on('*', onFrameEventBusEvent)
-  broadcast.on('previewFocused', onPreviewFocused)
-})
-
+  frameEventBus.on("*", onFrameEventBusEvent);
+  broadcast.on("previewFocused", onPreviewFocused);
+});
 onBeforeUnmount(() => {
-  frameEventBus.off('*', onFrameEventBusEvent)
-  broadcast.off('previewFocused', onPreviewFocused)
-})
+  frameEventBus.off("*", onFrameEventBusEvent);
+  broadcast.off("previewFocused", onPreviewFocused);
+});
 </script>

package/dist/runtime/components/Edit/Features/ResponsivePreview/Frame/index.vue.d.ts

@@ -0,0 +1,27 @@
+import { Icon } from '#blokkli/components';
+type __VLS_Props = {
+    detached?: boolean;
+    isResizing?: boolean;
+};
+declare const isLoading: import("vue").Ref<boolean, boolean>;
+declare const iframe: import("vue").Ref<HTMLIFrameElement | null, HTMLIFrameElement | null>;
+declare const src: import("vue").ComputedRef<string>;
+declare const __VLS_ctx: InstanceType<__VLS_PickNotAny<typeof __VLS_self, new () => {}>>;
+declare var __VLS_5: {};
+type __VLS_Slots = __VLS_PrettifyGlobal<__VLS_OmitStringIndex<typeof __VLS_ctx.$slots> & {
+    default?: (props: typeof __VLS_5) => any;
+}>;
+declare const __VLS_self: import("vue").DefineComponent<__VLS_Props, {
+    Icon: typeof Icon;
+    isLoading: typeof isLoading;
+    iframe: typeof iframe;
+    src: typeof src;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_component: 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>;
+declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};