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

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

@@ -0,0 +1,18 @@
+import type { BlokkliIcon } from '#blokkli-build/icons';
+import type { ThemeColorName } from '#blokkli/types/theme';
+type __VLS_Props = {
+    id: string;
+    icon: BlokkliIcon;
+    text: string;
+    button?: string;
+    scheme?: ThemeColorName;
+};
+declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    click: () => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onClick?: (() => any) | undefined;
+}>, {
+    button: string;
+    scheme: ThemeColorName;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

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

@@ -34,6 +34,7 @@ import { computed, useBlokkli, ref } from "#imports";
 import { getBlokkliItemProxyComponent } from "#blokkli/helpers/editComponents";
 import { ItemIcon } from "#blokkli/components";
 import { buildAttributesForLibraryItem, falsy } from "#blokkli/helpers";
+import { useBlockRegistration } from "#blokkli/helpers/composables/useBlockRegistration";
 const props = defineProps({
   uuid: { type: String, required: true },
   bundle: { type: String, required: true },
@@ -63,7 +64,7 @@ const rootProps = computed(() => {
 const proxyBundle = computed(
   () => libraryItemProps.value?.block?.bundle || props.bundle
 );
-const { types, runtimeConfig, definitions } = useBlokkli();
+const { types, runtimeConfig, definitions, dom } = useBlokkli();
 const root = ref(null);
 const type = computed(() => types.getBlockBundleDefinition(proxyBundle.value));
 const proxyComponent = getBlokkliItemProxyComponent(proxyBundle.value);
@@ -89,4 +90,5 @@ const fieldLayout = computed(() => {
   }
   return types.fieldConfig.forEntityTypeAndBundle(runtimeConfig.itemEntityType, proxyBundle.value).map((config) => [config]);
 });
+useBlockRegistration(dom, props.uuid);
 </script>

package/dist/runtime/components/Edit/BlokkliErrorBoundary.vue.d.ts

@@ -1,18 +1,7 @@
-import { Icon } from '#blokkli/components';
-declare const errors: import("vue").Ref<Error[], Error[]>;
-declare const $t: import("#blokkli/helpers/textProvider").TextProvider;
-declare const unique: import("vue").ComputedRef<Error[]>;
-declare const __VLS_ctx: InstanceType<__VLS_PickNotAny<typeof __VLS_self, new () => {}>>;
 declare var __VLS_1: {};
-type __VLS_Slots = __VLS_PrettifyGlobal<__VLS_OmitStringIndex<typeof __VLS_ctx.$slots> & {
+type __VLS_Slots = {} & {
     default?: (props: typeof __VLS_1) => any;
-}>;
-declare const __VLS_self: import("vue").DefineComponent<{}, {
-    Icon: typeof Icon;
-    errors: typeof errors;
-    $t: typeof $t;
-    unique: typeof unique;
-}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+};
 declare const __VLS_component: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
 export default _default;

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"
@@ -50,10 +53,10 @@
 </template>
 
 <script setup>
-import { useBlokkli, onMounted, computed, ref } from "#imports";
+import { useBlokkli, onMounted, computed, ref, onBeforeUnmount } from "#imports";
 import { Icon } from "#blokkli/components";
 import { modulo } from "#blokkli/helpers";
-const { ui } = useBlokkli();
+const { ui, element } = useBlokkli();
 const emit = defineEmits(["submit", "cancel"]);
 const rootEl = ref(null);
 const props = defineProps({
@@ -91,9 +94,11 @@ const getFocusableElements = () => {
   if (!rootEl.value) {
     return [];
   }
-  return [
-    ...rootEl.value.querySelectorAll("input,select,button,textarea")
-  ];
+  return element.queryAll(
+    rootEl.value,
+    "input,select,button,textarea",
+    `Dialog "${props.title}" getFocusableElements`
+  );
 };
 const onKeyDown = (e) => {
   if (e.code === "Escape") {
@@ -125,12 +130,16 @@ const onKeyDown = (e) => {
   }
 };
 onMounted(() => {
+  ui.hasDialogOpen.value = true;
   const focusableElements = getFocusableElements();
   const bestMatch = focusableElements.find((el) => !(el instanceof HTMLButtonElement)) || focusableElements[0];
   if (bestMatch) {
     bestMatch.focus();
   }
 });
+onBeforeUnmount(() => {
+  ui.hasDialogOpen.value = false;
+});
 </script>
 
 <script>

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

@@ -28,13 +28,15 @@ declare const _default: __VLS_WithSlots<import("vue").DefineComponent<{
     onCancel?: ((...args: any[]) => any) | undefined;
     onSubmit?: ((...args: any[]) => any) | undefined;
 }>, {
-    width: number | string;
     icon: BlokkliIcon;
+    width: number | string;
     lead: string;
     submitLabel: string;
     canSubmit: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
-    default?: ((props: {}) => any) | undefined;
+    default?: (props: {}) => any;
+} & {
+    'pre-footer'?: (props: {}) => any;
 }>;
 export default _default;
 type __VLS_WithSlots<T, S> = T & {

package/dist/runtime/components/Edit/DiffViewer/State.vue

@@ -0,0 +1,276 @@
+<template>
+  <div class="bk bk-diff-view">
+    <div class="bk-diff-mode-selector">
+      <FormRadioTabs
+        id="diff-viewer-state-display"
+        v-model="diffMode"
+        :options="diffModeOptions"
+        :label="$t('diffModeLabel', 'Display')"
+        :scheme
+      />
+    </div>
+    <div class="bk-diff-table" :data-diff-mode="diffMode">
+      <button
+        v-for="item in diffItems"
+        :key="item.uuid"
+        class="bk-diff-item"
+        :class="{
+  'bk-is-muted': showSelect && !selected?.includes(item.uuid)
+}"
+        @click.prevent="onClick(item.uuid)"
+      >
+        <div
+          class="bk-diff-item-header"
+          :disabled="item.status === 'removed' && !showSelect"
+          :class="{
+  'bk-is-selected': showSelect && selected?.includes(item.uuid)
+}"
+        >
+          <div class="bk-blokkli-item-label">
+            <div class="bk-blokkli-item-label-icon">
+              <ItemIcon :bundle="item.bundle" />
+            </div>
+            <span>{{ getLabel(item.bundle) }}</span>
+          </div>
+          <div class="bk-diff-status">
+            <div
+              v-if="item.status === 'added'"
+              class="bk-diff-status-label bk-is-added"
+            >
+              {{ $t("diffStatusAdded", "Added") }}
+            </div>
+            <div
+              v-else-if="item.status === 'removed'"
+              class="bk-diff-status-label bk-is-removed"
+            >
+              {{ $t("diffStatusDeleted", "Deleted") }}
+            </div>
+            <div
+              v-else-if="item.status === 'unchanged'"
+              class="bk-diff-status-label"
+            >
+              {{ $t("diffStatusUnchanged", "Unchanged") }}
+            </div>
+            <div v-else class="bk-diff-status-label">
+              {{ $t("diffStatusEdited", "Edited") }}
+            </div>
+          </div>
+        </div>
+        <div class="bk-diff-item-diffs">
+          <div
+            v-for="prop in item.props"
+            :key="prop.key"
+            class="bk-diff-prop-row"
+          >
+            <h3>{{ prop.key }}</h3>
+            <div class="bk-diff-monospace">
+              <div
+                v-if="diffMode === 'inline'"
+                class="bk-diff-prop-diff"
+                v-html="prop.diff"
+              />
+              <div
+                v-else-if="diffMode === 'side_by_side'"
+                class="bk-diff-prop-side-by-side"
+              >
+                <div class="bk-diff-prop-before">
+                  <div class="bk-diff-prop-label">
+                    {{ $t("diffBefore", "Before") }}
+                  </div>
+                  <div class="bk-diff-prop-content" v-html="prop.before" />
+                </div>
+                <div class="bk-diff-prop-after">
+                  <div class="bk-diff-prop-label">
+                    {{ $t("diffAfter", "After") }}
+                  </div>
+                  <div class="bk-diff-prop-content" v-html="prop.after" />
+                </div>
+              </div>
+              <div
+                v-else-if="diffMode === 'after'"
+                class="bk-diff-prop-after-only"
+              >
+                <div class="bk-diff-prop-content" v-html="prop.after" />
+              </div>
+            </div>
+          </div>
+        </div>
+      </button>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { computed, useBlokkli } from "#imports";
+import { ItemIcon, FormRadioTabs } from "#blokkli/components";
+import diff from "html-diff-ts";
+const props = defineProps({
+  stateBefore: { type: Object, required: true },
+  stateAfter: { type: Object, required: true },
+  showSelect: { type: Boolean, required: false },
+  includeUuids: { type: Array, required: false },
+  selected: { type: Array, required: false },
+  scheme: { type: String, required: false }
+});
+const { types, $t, eventBus, dom, definitions, storage } = useBlokkli();
+const diffMode = storage.use(
+  "diffMode",
+  "inline"
+);
+const diffModeOptions = computed(() => [
+  {
+    value: "inline",
+    label: $t("diffModeInline", "Inline")
+  },
+  {
+    value: "side_by_side",
+    label: $t("diffModeSideBySide", "Both")
+  },
+  {
+    value: "after",
+    label: $t("diffModeAfter", "After")
+  }
+]);
+const emit = defineEmits(["toggle"]);
+function getProps(bundle, props2) {
+  const definition = definitions.getDefaultDefinition(bundle);
+  if (definition?.editor?.mapDiffProps) {
+    return definition.editor.mapDiffProps(props2);
+  }
+  if (typeof props2 === "object") {
+    return Object.entries(props2).reduce(
+      (acc, [key, value]) => {
+        if (typeof value === "string" || typeof value === "number") {
+          acc[key] = value.toString();
+        } else if (typeof value === "object") {
+          try {
+            const json = JSON.stringify(value, null, 2);
+            acc[key] = `<pre>${json}</pre>`;
+          } catch {
+          }
+        }
+        return acc;
+      },
+      {}
+    );
+  }
+  return {};
+}
+function buildDiffItems(fields) {
+  const items = (fields || []).flatMap((v) => v.list);
+  return items;
+}
+const itemsBefore = computed(
+  () => buildDiffItems(props.stateBefore.mutatedState?.fields)
+);
+const itemsAfter = computed(
+  () => buildDiffItems(props.stateAfter.mutatedState?.fields)
+);
+function toString(v) {
+  if (typeof v === "string") {
+    return v;
+  } else if (typeof v === "number") {
+    return v.toString();
+  }
+  return "";
+}
+const diffItems = computed(() => {
+  const diffMap = /* @__PURE__ */ new Map();
+  itemsBefore.value.forEach((beforeItem) => {
+    if (props.includeUuids && !props.includeUuids.includes(beforeItem.uuid)) {
+      return;
+    }
+    const afterItem = itemsAfter.value.find(
+      (item) => item.uuid === beforeItem.uuid
+    );
+    const beforeProps = getProps(beforeItem.bundle, beforeItem.props);
+    if (!afterItem) {
+      diffMap.set(beforeItem.uuid, {
+        uuid: beforeItem.uuid,
+        bundle: beforeItem.bundle,
+        status: "removed",
+        props: Object.entries(beforeProps).map(([key, value]) => ({
+          key,
+          diff: diff(toString(value), ""),
+          before: toString(value),
+          after: ""
+        }))
+      });
+    } else {
+      const afterProps = getProps(afterItem.bundle, afterItem.props);
+      const changedProps = [];
+      Object.entries(beforeProps).forEach(([key, beforeValue]) => {
+        const afterValue = afterProps[key];
+        if (beforeValue !== afterValue) {
+          changedProps.push({
+            key,
+            diff: diff(toString(beforeValue), toString(afterValue)),
+            before: toString(beforeValue),
+            after: toString(afterValue)
+          });
+        }
+      });
+      Object.keys(afterProps).forEach((key) => {
+        if (!(key in beforeProps)) {
+          changedProps.push({
+            key,
+            diff: diff("", toString(afterProps[key])),
+            before: "",
+            after: toString(afterProps[key])
+          });
+        }
+      });
+      if (changedProps.length > 0) {
+        diffMap.set(beforeItem.uuid, {
+          uuid: beforeItem.uuid,
+          bundle: beforeItem.bundle,
+          status: "changed",
+          props: changedProps
+        });
+      } else if (props.includeUuids) {
+        diffMap.set(beforeItem.uuid, {
+          uuid: beforeItem.uuid,
+          bundle: beforeItem.bundle,
+          status: "unchanged",
+          props: []
+        });
+      }
+    }
+  });
+  itemsAfter.value.forEach((afterItem) => {
+    if (!itemsBefore.value.some((item) => item.uuid === afterItem.uuid)) {
+      const afterProps = getProps(afterItem.bundle, afterItem.props);
+      diffMap.set(afterItem.uuid, {
+        uuid: afterItem.uuid,
+        bundle: afterItem.bundle,
+        status: "added",
+        props: Object.entries(afterProps).map(([key, value]) => ({
+          key,
+          diff: diff("", toString(value)),
+          before: "",
+          after: toString(value)
+        }))
+      });
+    }
+  });
+  return Array.from(diffMap.values()).sort((a, b) => {
+    const aY = dom.getBlockRect(a.uuid)?.y || 0;
+    const bY = dom.getBlockRect(b.uuid)?.y || 0;
+    return aY - bY;
+  });
+});
+function onClick(uuid) {
+  if (props.showSelect) {
+    emit("toggle", uuid);
+  } else {
+    scrollToBlock(uuid);
+  }
+}
+function getLabel(bundle) {
+  return types.getBlockBundleDefinition(bundle)?.label || bundle;
+}
+function scrollToBlock(uuid) {
+  eventBus.emit("scrollIntoView", { uuid, center: true });
+  eventBus.emit("select", uuid);
+}
+</script>

package/dist/runtime/components/Edit/DiffViewer/State.vue.d.ts

@@ -0,0 +1,16 @@
+import type { MappedState } from '#blokkli/types';
+import type { ThemeColorName } from '#blokkli/types/theme';
+type __VLS_Props = {
+    stateBefore: MappedState;
+    stateAfter: MappedState;
+    showSelect?: boolean;
+    includeUuids?: string[];
+    selected?: string[];
+    scheme?: ThemeColorName;
+};
+declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    toggle: (uuid: string) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onToggle?: ((uuid: string) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

package/dist/runtime/components/Edit/DraggableList.vue

@@ -12,14 +12,12 @@
     <div
       ref="root"
       class="bk-field-list-proxy-list bk-draggable-list-container"
-      v-bind="fieldAttributes"
     >
       <BlokkliItem
         v-for="(item, i) in list"
         :key="item.uuid + fieldListType + definitions.renderKey.value"
         :uuid="item.uuid"
         :bundle="item.bundle"
-        :is-new="item.isNew"
         :options="item.options"
         :props="item.props"
         is-editing
@@ -36,7 +34,6 @@
         :data-host-field-name="name"
         :data-host-field-list-type="fieldListType"
         :data-is-nested="isNested"
-        :data-is-new="item.isNew"
         :data-entity-type="runtimeConfig.itemEntityType"
         :data-bk-is-muted="isMuted(item)"
       />
@@ -47,14 +44,12 @@
     v-else
     ref="root"
     :class="['bk-draggable-list-container', attrs.class]"
-    v-bind="fieldAttributes"
   >
     <BlokkliItem
       v-for="(item, i) in list"
       :key="item.uuid + fieldListType"
       :uuid="item.uuid"
       :bundle="item.bundle"
-      :is-new="item.isNew"
       :options="item.options"
       :props="item.props"
       is-editing
@@ -71,7 +66,6 @@
       :data-host-field-name="name"
       :data-host-field-list-type="fieldListType"
       :data-is-nested="isNested"
-      :data-is-new="item.isNew"
       :data-entity-type="runtimeConfig.itemEntityType"
       :data-bk-is-muted="isMuted(item)"
     />
@@ -95,7 +89,7 @@ import {
   INJECT_FIELD_PROXY_MODE,
   INJECT_IS_EDITING
 } from "#blokkli/helpers/symbols";
-const { dom, types, runtimeConfig, selection, definitions } = useBlokkli();
+const { dom, runtimeConfig, selection, definitions } = useBlokkli();
 const root = ref(null);
 const props = defineProps({
   name: { type: String, required: true },
@@ -105,8 +99,10 @@ const props = defineProps({
   language: { type: String, required: false, default: void 0 },
   tag: { type: String, required: false, default: "div" },
   isNested: { type: Boolean, required: true },
-  fieldListType: { type: String, required: true },
-  allowedFragments: { type: Array, required: false, default: void 0 },
+  fieldListType: { type: null, required: true },
+  allowedFragments: { type: null, required: false, default: () => {
+    return [];
+  } },
   dropAlignment: { type: String, required: false, default: void 0 },
   proxyMode: { type: Boolean, required: false },
   globalProxyMode: { type: Boolean, required: false },
@@ -119,61 +115,35 @@ provide(INJECT_IS_EDITING, true);
 const proxyVisible = computed(
   () => props.proxyMode && (selection.uuids.value.length || selection.isDragging.value || selection.isMultiSelecting.value)
 );
-const fieldConfig = computed(() => {
-  const match = types.getFieldConfig(
-    props.entity.type,
-    props.entity.bundle,
-    props.name
-  );
-  if (!match) {
-    throw new Error(
-      `Missing field configuration for field "${props.name}" on entity type "${props.entity.type}" with bundle "${props.entity.bundle}". Make sure the "name" prop passed to <BlokkliField> is correct.`
-    );
-  }
-  return match;
-});
-const allowedBundles = computed(() => {
-  const bundles = fieldConfig.value.allowedBundles;
-  if (!bundles.length) {
-    console.error(
-      `Field with name "${props.name}" on entity "${props.entity.type}" with bundle "${props.entity.bundle}" does not define any allowed bundles.`
-    );
-  }
-  return bundles.join(",");
-});
-const fieldAttributes = computed(() => {
-  return {
-    "data-field-name": props.name,
-    "data-field-label": fieldConfig.value.label,
-    "data-field-is-nested": props.isNested,
-    "data-bk-nesting-level": props.nestingLevel,
-    "data-host-entity-type": props.entity.type,
-    "data-host-entity-uuid": props.entity.uuid,
-    "data-host-entity-bundle": props.entity.bundle,
-    "data-field-key": props.fieldKey,
-    "data-field-drop-alignment": props.dropAlignment,
-    "data-allowed-fragments": props.allowedFragments ? props.allowedFragments.join(",") : void 0,
-    "data-field-allowed-bundles": allowedBundles.value,
-    "data-field-list-type": props.fieldListType,
-    "data-field-cardinality": fieldConfig.value.cardinality
-  };
-});
 function isMuted(item) {
   if (!item) {
     return true;
   }
+  if (!item.editContext?.isPublished) {
+    return true;
+  }
   const isVisible = isVisibleByOptions(item, props.language);
   const isVisibleCustom = props.shouldRenderItem ? props.shouldRenderItem(item) : true;
   return !(isVisible && isVisibleCustom);
 }
+const data = computed(() => {
+  const allowedFragments = Array.isArray(props.allowedFragments) ? props.allowedFragments : [props.allowedFragments];
+  return {
+    fieldListType: props.fieldListType,
+    allowedFragments,
+    isNested: props.isNested,
+    nestingLevel: props.nestingLevel,
+    dropAlignment: props.dropAlignment ?? null
+  };
+});
 watch(root, function(newRoot) {
   if (newRoot) {
-    dom.updateFieldElement(props.entity, props.name, newRoot);
+    dom.updateFieldElement(props.entity, props.name, newRoot, data.value);
   }
 });
 onMounted(() => {
   if (root.value) {
-    dom.registerField(props.entity, props.name, root.value);
+    dom.registerField(props.entity, props.name, root.value, data.value);
   }
 });
 onBeforeUnmount(() => {

package/dist/runtime/components/Edit/DraggableList.vue.d.ts

@@ -1,6 +1,6 @@
-import type { FieldListItem, EntityContext } from '#blokkli/types';
+import type { FieldListItem, EntityContext, FieldDropAlignment } from '#blokkli/types';
 import type { BlokkliFragmentName } from '#blokkli-build/definitions';
-import type { FieldListItemTyped } from '#blokkli-build/generated-types';
+import type { FieldListItemTyped, ValidFieldListTypes } from '#blokkli-build/generated-types';
 type __VLS_Props = {
     name: string;
     fieldKey: string;
@@ -9,19 +9,19 @@ type __VLS_Props = {
     language?: string;
     tag?: string;
     isNested: boolean;
-    fieldListType: string;
-    allowedFragments?: BlokkliFragmentName[];
-    dropAlignment?: 'vertical' | 'horizontal';
+    fieldListType: ValidFieldListTypes;
+    allowedFragments?: BlokkliFragmentName[] | BlokkliFragmentName;
+    dropAlignment?: FieldDropAlignment;
     proxyMode?: boolean;
     globalProxyMode?: boolean;
     nestingLevel: number;
     shouldRenderItem?: (item: FieldListItem | FieldListItemTyped) => boolean;
 };
 declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
-    allowedFragments: BlokkliFragmentName[];
+    allowedFragments: BlokkliFragmentName[] | BlokkliFragmentName;
+    dropAlignment: FieldDropAlignment;
     tag: string;
     language: string;
-    dropAlignment: "vertical" | "horizontal";
     shouldRenderItem: (item: FieldListItem | FieldListItemTyped) => boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 export default _default;