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

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

@@ -9,83 +9,52 @@
   </Teleport>
 </template>
 
-<script lang="ts" setup>
-import { computed, useBlokkli, defineBlokkliFeature } from '#imports'
-import { falsy, onlyUnique } from '#blokkli/helpers'
-import {
-  getDefinition,
-  getFragmentDefinition,
-} from '#blokkli-build/definitions'
-import OptionsForm from './Form/index.vue'
-import type {
-  BlockDefinitionInput,
-  FragmentDefinitionInput,
-} from '#blokkli/types'
-
+<script setup>
+import { computed, useBlokkli, defineBlokkliFeature } from "#imports";
+import { falsy, onlyUnique } from "#blokkli/helpers";
+import OptionsForm from "./Form/index.vue";
 defineBlokkliFeature({
-  id: 'options',
-  label: 'Options',
-  icon: 'palette',
-  description: 'Renders the options form for one or more blocks.',
-  requiredAdapterMethods: ['updateOptions'],
-})
-
-const { selection, state, ui } = useBlokkli()
-
-const uuids = computed(() => selection.blocks.value.map((v) => v.uuid))
-
-const definition = computed<
-  BlockDefinitionInput<any, any> | FragmentDefinitionInput<any, any> | undefined
->(() => {
-  const bundles = selection.blocks.value
-    .map((v) => v.reusableBundle || v.itemBundle)
-    .filter(onlyUnique)
-
-  // @TODO: Support shared global options.
+  id: "options",
+  label: "Options",
+  icon: "palette",
+  description: "Renders the options form for one or more blocks.",
+  requiredAdapterMethods: ["updateOptions"]
+});
+const { selection, state, ui, definitions } = useBlokkli();
+const uuids = computed(() => selection.blocks.value.map((v) => v.uuid));
+const definition = computed(() => {
+  const bundles = selection.blocks.value.map((v) => v.reusableBundle || v.itemBundle).filter(onlyUnique);
   if (bundles.length !== 1) {
-    return
+    return;
   }
-
-  const bundle = bundles[0]
-
-  if (bundle === 'blokkli_fragment') {
+  const bundle = bundles[0];
+  if (bundle === "blokkli_fragment") {
     const fragments = selection.blocks.value.filter(
-      (v) => v.itemBundle === 'blokkli_fragment',
-    )
-
-    const fragmentNames = fragments
-      .map((v) => {
-        const props: any = state.getFieldListItem(v.uuid)?.props
-        if (props && props.name) {
-          return props.name
-        }
-      })
-      .filter(falsy)
-      .filter(onlyUnique)
-
+      (v) => v.itemBundle === "blokkli_fragment"
+    );
+    const fragmentNames = fragments.map((v) => {
+      const props = state.getFieldListItem(v.uuid)?.props;
+      if (props && props.name) {
+        return props.name;
+      }
+    }).filter(falsy).filter(onlyUnique);
     if (fragmentNames.length !== 1) {
-      return
+      return;
     }
-
-    return getFragmentDefinition(fragmentNames[0])
+    return definitions.getFragmentDefinition(fragmentNames[0]);
   }
-
-  const definitions = selection.blocks.value
-    .map((block) => {
-      return getDefinition(
-        bundle,
-        block.hostFieldListType,
-        block.parentBlockBundle,
-      )
-    })
-    .filter(falsy)
-
-  return definitions[0]
-})
+  return selection.blocks.value.map((block) => {
+    return definitions.getBlockDefinition(
+      bundle,
+      block.hostFieldListType,
+      block.parentBlockBundle
+    );
+  }).filter(falsy).at(0);
+});
 </script>
 
-<script lang="ts">
+<script>
 export default {
-  name: 'Options',
-}
+  name: "Options"
+};
 </script>

package/dist/runtime/components/Edit/Features/Options/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/Ownership/index.vue

@@ -6,52 +6,45 @@
     >
       <p
         v-html="
-          $t(
-            'ownershipNote',
-            'This page is currently being edited by @name. Changes can only be made by one person at a time.',
-          ).replace('@name', name)
-        "
+  $t(
+    'ownershipNote',
+    'This page is currently being edited by @name. Changes can only be made by one person at a time.'
+  ).replace('@name', name)
+"
       />
       <button class="bk-button bk-is-danger" @click="takeOwnership">
-        {{ $t('ownershipTakeOwnership', 'Assign to me') }}
+        {{ $t("ownershipTakeOwnership", "Assign to me") }}
       </button>
     </div>
   </Teleport>
 </template>
 
-<script lang="ts" setup>
-import { computed, useBlokkli, defineBlokkliFeature } from '#imports'
-
+<script setup>
+import { computed, useBlokkli, defineBlokkliFeature } from "#imports";
 const { adapter } = defineBlokkliFeature({
-  id: 'ownership',
-  icon: 'user',
-  label: 'Ownership',
-  requiredAdapterMethods: ['takeOwnership'],
-  description:
-    'Renders a large button to take ownership of the current edit state.',
-})
-
-const { state, $t } = useBlokkli()
-
-const takeOwnership = () =>
-  state.mutateWithLoadingState(
-    () => adapter.takeOwnership(),
-    $t('ownershipError', 'Error in assigning'),
-    $t('ownershipSuccess', 'You are now the owner.'),
-  )
-
+  id: "ownership",
+  icon: "user",
+  label: "Ownership",
+  requiredAdapterMethods: ["takeOwnership"],
+  description: "Renders a large button to take ownership of the current edit state."
+});
+const { state, $t } = useBlokkli();
+const takeOwnership = () => state.mutateWithLoadingState(
+  () => adapter.takeOwnership(),
+  $t("ownershipError", "Error in assigning"),
+  $t("ownershipSuccess", "You are now the owner.")
+);
 const name = computed(() => {
-  const v = state.owner.value?.name
+  const v = state.owner.value?.name;
   if (v) {
-    return `<strong>${v}</strong>`
+    return `<strong>${v}</strong>`;
   }
-
-  return ''
-})
+  return "";
+});
 </script>
 
-<script lang="ts">
+<script>
 export default {
-  name: 'Ownership',
-}
+  name: "Ownership"
+};
 </script>

package/dist/runtime/components/Edit/Features/Ownership/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/Preview/index.vue

@@ -6,41 +6,36 @@
     icon="open_in_new"
     :disabled="!state.canEdit.value"
     :tour-text="
-      $t(
-        'previewNewWindowTourText',
-        'Opens a preview of the current changes in a new window.',
-      )
-    "
+  $t(
+    'previewNewWindowTourText',
+    'Opens a preview of the current changes in a new window.'
+  )
+"
     @click="openPreview"
   />
 </template>
 
-<script lang="ts" setup>
-import { computed, useBlokkli, useRoute, defineBlokkliFeature } from '#imports'
-import { PluginToolbarButton } from '#blokkli/plugins'
-
+<script setup>
+import { computed, useBlokkli, useRoute, defineBlokkliFeature } from "#imports";
+import { PluginToolbarButton } from "#blokkli/plugins";
 defineBlokkliFeature({
-  id: 'preview',
-  label: 'Preview',
-  icon: 'preview',
-  description: 'Provides a button to open a preview in a new window.',
-})
-
-const { $t, state } = useBlokkli()
-
-const route = useRoute()
-
-const previewUrl = computed(() =>
-  route.fullPath.replace('blokkliEditing', 'blokkliPreview'),
-)
-
+  id: "preview",
+  label: "Preview",
+  icon: "preview",
+  description: "Provides a button to open a preview in a new window."
+});
+const { $t, state } = useBlokkli();
+const route = useRoute();
+const previewUrl = computed(
+  () => route.fullPath.replace("blokkliEditing", "blokkliPreview")
+);
 function openPreview() {
-  window.open(previewUrl.value)
+  window.open(previewUrl.value);
 }
 </script>
 
-<script lang="ts">
+<script>
 export default {
-  name: 'Preview',
-}
+  name: "Preview"
+};
 </script>

package/dist/runtime/components/Edit/Features/Preview/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/PreviewGrant/QrCode/index.vue

@@ -2,29 +2,25 @@
   <div class="bk-qr-code">
     <QrCodeVue :value="fullUrl" :size="430" level="H" />
     <p>
-      {{ $t('previewQrCodeText', 'You can also copy the link and share it.') }}
+      {{ $t("previewQrCodeText", "You can also copy the link and share it.") }}
     </p>
     <input :value="fullUrl" class="bk-form-input" readonly @focus="onFocus" />
   </div>
 </template>
 
-<script lang="ts" setup>
-import { computed, useBlokkli } from '#imports'
-import QrCodeVue from 'qrcode.vue'
-
-const { $t } = useBlokkli()
-
-const props = defineProps<{
-  url: string
-}>()
-
+<script setup>
+import { computed, useBlokkli } from "#imports";
+import QrCodeVue from "qrcode.vue";
+const { $t } = useBlokkli();
+const props = defineProps({
+  url: { type: String, required: true }
+});
 const fullUrl = computed(() => {
-  return window.location.origin + props.url
-})
-
-function onFocus(e: FocusEvent) {
+  return window.location.origin + props.url;
+});
+function onFocus(e) {
   if (e.target && e.target instanceof HTMLInputElement) {
-    e.target.select()
+    e.target.select();
   }
 }
 </script>

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

@@ -0,0 +1,5 @@
+type __VLS_Props = {
+    url: 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;

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

@@ -5,11 +5,11 @@
     :title="$t('previewWithSmartphone', 'Preview (with smartphone)')"
     :disabled="!state.canEdit.value"
     :tour-text="
-      $t(
-        'previewWithSmartphoneTourText',
-        'Shows a QR code to quickly open a preview of the changes with your smartphone.',
-      )
-    "
+  $t(
+    'previewWithSmartphoneTourText',
+    'Shows a QR code to quickly open a preview of the changes with your smartphone.'
+  )
+"
     region="after-menu"
     icon="qrcode"
     @click="qrCodeVisible = true"
@@ -21,11 +21,11 @@
         v-if="qrCodeVisible"
         :title="$t('previewDialogTitle', 'Preview with smartphone')"
         :lead="
-          $t(
-            'previewDialogLead',
-            'Scan the QR code with your smartphone to open the preview.',
-          )
-        "
+  $t(
+    'previewDialogLead',
+    'Scan the QR code with your smartphone to open the preview.'
+  )
+"
         :submit-label="$t('close', 'Close')"
         is-danger
         hide-buttons
@@ -39,36 +39,31 @@
   </Teleport>
 </template>
 
-<script lang="ts" setup>
-import { ref, watch, useBlokkli, defineBlokkliFeature } from '#imports'
-import { PluginToolbarButton } from '#blokkli/plugins'
-import QrCode from './QrCode/index.vue'
-import { DialogModal } from '#blokkli/components'
-
+<script setup>
+import { ref, watch, useBlokkli, defineBlokkliFeature } from "#imports";
+import { PluginToolbarButton } from "#blokkli/plugins";
+import QrCode from "./QrCode/index.vue";
+import { DialogModal } from "#blokkli/components";
 const { adapter } = defineBlokkliFeature({
-  id: 'preview-grant',
-  label: 'Preview Grant',
-  icon: 'qrcode',
-  description:
-    'Provides a button to open a dialog with a QR code to preview the page on a smartphone.',
-  requiredAdapterMethods: ['getPreviewGrantUrl'],
-  viewports: ['desktop'],
-})
-
-const { $t, ui, state } = useBlokkli()
-
-const qrCodeVisible = ref(false)
-const previewGrantUrl = ref<string | undefined | null>('')
-
-watch(qrCodeVisible, async function (isVisible) {
+  id: "preview-grant",
+  label: "Preview Grant",
+  icon: "qrcode",
+  description: "Provides a button to open a dialog with a QR code to preview the page on a smartphone.",
+  requiredAdapterMethods: ["getPreviewGrantUrl"],
+  viewports: ["desktop"]
+});
+const { $t, ui, state } = useBlokkli();
+const qrCodeVisible = ref(false);
+const previewGrantUrl = ref("");
+watch(qrCodeVisible, async function(isVisible) {
   if (isVisible && !previewGrantUrl.value) {
-    previewGrantUrl.value = await adapter.getPreviewGrantUrl()
+    previewGrantUrl.value = await adapter.getPreviewGrantUrl();
   }
-})
+});
 </script>
 
-<script lang="ts">
+<script>
 export default {
-  name: 'PreviewGrant',
-}
+  name: "PreviewGrant"
+};
 </script>

package/dist/runtime/components/Edit/Features/PreviewGrant/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/ProxyView/index.vue

@@ -6,33 +6,31 @@
     :title-on="$t('proxyViewShow', 'Show structure view')"
     :title-off="$t('proxyViewHide', 'Show content preview')"
     :tour-text="
-      $t(
-        'proxyViewTourText',
-        'Displays the content blocks as a structured view.',
-      )
-    "
+  $t(
+    'proxyViewTourText',
+    'Displays the content blocks as a structured view.'
+  )
+"
     key-code="P"
     icon="tree"
   />
 </template>
 
-<script lang="ts" setup>
-import { useBlokkli, defineBlokkliFeature } from '#imports'
-import { PluginViewOption } from '#blokkli/plugins'
-
+<script setup>
+import { useBlokkli, defineBlokkliFeature } from "#imports";
+import { PluginViewOption } from "#blokkli/plugins";
 defineBlokkliFeature({
-  id: 'proxy_view',
-  label: 'Proxy View',
-  icon: 'tree',
-  description: 'Displays the blocks as a structure in the preview.',
-  viewports: ['desktop'],
-})
-
-const { $t, ui } = useBlokkli()
+  id: "proxy_view",
+  label: "Proxy View",
+  icon: "tree",
+  description: "Displays the blocks as a structure in the preview.",
+  viewports: ["desktop"]
+});
+const { $t, ui } = useBlokkli();
 </script>
 
-<script lang="ts">
+<script>
 export default {
-  name: 'ProxyView',
-}
+  name: "ProxyView"
+};
 </script>

package/dist/runtime/components/Edit/Features/ProxyView/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/Publish/Dialog/Item.vue

@@ -0,0 +1,118 @@
+<template>
+  <tr
+    :class="{
+  'bk-is-success': isSuccess,
+  'bk-is-error': isError
+}"
+  >
+    <td>
+      <label class="bk-checkbox">
+        <input
+          v-if="isCurrent || isMutating || isSuccess"
+          :checked="isSelected"
+          type="checkbox"
+          disabled
+        />
+        <input v-else v-model="modelValue" type="checkbox" :value="id" />
+        <span />
+
+        <div>
+          <div>
+            <strong>{{ title }}</strong>
+          </div>
+          <div>
+            {{ bundleLabel }}
+          </div>
+        </div>
+        <div v-if="isCurrent" class="bk-pill">Aktuelle Seite</div>
+      </label>
+    </td>
+    <td>
+      <span v-if="mutationStatusLabel">{{ mutationStatusLabel }}</span>
+      <span v-else-if="isSelected">{{ newStatus.label }}</span>
+    </td>
+    <td class="bk-is-status">
+      <div v-if="isSuccess">
+        <span
+          class="bk-status-indicator"
+          :class="{
+  'bk-is-success': newStatus.status
+}"
+        />
+      </div>
+      <div v-else-if="isSelected && isMutating">
+        <Icon name="loader" />
+      </div>
+      <div v-else-if="isSelected">
+        <span
+          class="bk-status-indicator"
+          :class="{
+  'bk-is-success': isCurrentlyPublished
+}"
+        />
+        <template v-if="newStatus.status !== isCurrentlyPublished">
+          <Icon name="arrow-right-thin" />
+          <span
+            class="bk-status-indicator"
+            :class="{
+  'bk-is-success': newStatus.status
+}"
+          />
+        </template>
+      </div>
+    </td>
+  </tr>
+</template>
+
+<script setup>
+import { computed } from "#imports";
+import { Icon } from "#blokkli/components";
+const props = defineProps({
+  hostEntityType: { type: String, required: true },
+  hostEntityUuid: { type: String, required: true },
+  entity: { type: Object, required: true },
+  currentUserIsOwner: { type: Boolean, required: true },
+  id: { type: String, required: true },
+  isCurrent: { type: Boolean, required: true },
+  shouldPublish: { type: Boolean, required: true },
+  isMutating: { type: Boolean, required: true },
+  mutationStatus: { type: Object, required: false }
+});
+const modelValue = defineModel({ type: Array, ...{
+  default: () => {
+    return [];
+  }
+} });
+const isSelected = computed(
+  () => props.isCurrent || modelValue.value.includes(props.id)
+);
+const isSuccess = computed(() => props.mutationStatus?.success);
+const isError = computed(
+  () => !isSuccess.value && !!(props.mutationStatus?.errors?.length || props.mutationStatus?.violations?.length)
+);
+const mutationStatusLabel = computed(() => {
+  if (isSuccess.value) {
+    if (props.entity.status && props.shouldPublish) {
+      return "Erfolgreich publiziert";
+    } else {
+      return "Erfolgreich gespeichert";
+    }
+  }
+  return null;
+});
+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 };
+  } else if (isSelected.value && !isCurrentlyPublished.value && props.shouldPublish) {
+    return { label: "wird publiziert", status: true };
+  } else if (isSelected.value && isCurrentlyPublished.value) {
+    return { label: "bleibt publiziert", status: true };
+  } else if (isSelected.value && !isCurrentlyPublished.value) {
+    return { label: "bleibt unpubliziert", status: false };
+  }
+  return { label: "", status: false };
+});
+</script>

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

@@ -0,0 +1,18 @@
+import type { GetEditStatesItem } from '#blokkli/types';
+import type { MutationStatus } from './types.js';
+type __VLS_Props = GetEditStatesItem & {
+    id: string;
+    isCurrent: boolean;
+    shouldPublish: boolean;
+    isMutating: boolean;
+    mutationStatus?: MutationStatus;
+};
+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[]) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: string[]) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;