@blokkli/editor 2.0.0-alpha.51 → 2.0.0-alpha.53

package/dist/runtime/editor/features/publish/types.d.ts

@@ -69,6 +69,10 @@ export type GetEditStatesItem = {
     hostEntityUuid: string;
     entity: EditEntity;
     currentUserIsOwner: boolean;
+    lastChanged: string;
+    pendingChanges: number;
+    ownerName: string;
+    url: string;
 };
 export type BlokkliAdapterGetEditStatesResult = BlokkliAdapterSearchResults<GetEditStatesItem>;
 declare module '#blokkli/editor/adapter' {
@@ -92,7 +96,7 @@ declare module '#blokkli/editor/adapter' {
         /**
          * Search for edit states.
          */
-        getEditStates?: (page?: number) => Promise<BlokkliAdapterGetEditStatesResult>;
+        getEditStates?: (e?: AdapterSearchArguments) => Promise<BlokkliAdapterGetEditStatesResult>;
     }
 }
 declare module '#blokkli/editor/events' {

package/dist/runtime/editor/features/referenced-entities/List/Item/index.d.vue.ts

@@ -0,0 +1,4 @@
+import type { ReferencedEntity } from '../../types.js';
+declare const __VLS_export: import("vue").DefineComponent<ReferencedEntity, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ReferencedEntity> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/editor/features/referenced-entities/List/Item/index.vue

@@ -0,0 +1,81 @@
+<template>
+  <a
+    ref="rootEl"
+    :href="editUrl"
+    target="_blank"
+    rel="noopener"
+    class="_bk_flex _bk_px-10 _bk_py-8 _bk_hover:bg-mono-600"
+    @click.prevent="isEditing = true"
+  >
+    <div class="_bk_text-mono-200 _bk_flex _bk_items-center _bk_gap-10 _bk_pl-2">
+      <div
+        class="_bk_size-30 _bk_bg-mono-600 _bk_text-mono-100 _bk_border _bk_border-mono-300 _bk_flex _bk_items-center _bk_justify-center _bk_rounded-md"
+      >
+        <Icon :name="icon" class="_bk_size-20" />
+      </div>
+      <div>
+        <div class="_bk_text-sm _bk_font-bold _bk_max-w-[280px] _bk_truncate _bk_leading-none">
+          {{ label }}
+        </div>
+        <div class="_bk_text-xs">
+          <span>{{ bundleLabel }}</span>
+        </div>
+      </div>
+    </div>
+  </a>
+  <NestedEditorOverlay
+    v-if="editUrl && isEditing"
+    :url="editUrl"
+    :uuid="entityUuid"
+    :element
+    :title="editorOverlayTitle"
+    theme="accent"
+    :icon
+    @close="onSubmitEdit"
+    @submit="onSubmitEdit"
+  />
+</template>
+
+<script setup>
+import { computed, useBlokkli, ref, useTemplateRef } from "#imports";
+import { NestedEditorOverlay, Icon } from "#blokkli/editor/components";
+const props = defineProps({
+  editUrl: { type: String, required: true },
+  entityBundle: { type: String, required: true },
+  entityType: { type: String, required: true },
+  entityUuid: { type: String, required: true },
+  label: { type: String, required: true },
+  uuids: { type: Array, required: true }
+});
+const { adapter, $t, eventBus } = useBlokkli();
+const isEditing = ref(false);
+const element = useTemplateRef("rootEl");
+const bundleLabel = computed(() => {
+  if (!adapter.getEntityBundleInfo) {
+    return props.entityBundle;
+  }
+  return adapter.getEntityBundleInfo(props.entityType, props.entityBundle)?.label ?? props.entityBundle;
+});
+const editorOverlayTitle = computed(() => {
+  return $t("referencedEntitiesEditorOverlayTitle", 'Edit "@label"').replace(
+    "@label",
+    props.label
+  );
+});
+const icon = computed(() => {
+  if (props.entityBundle.includes("image")) {
+    return "bk_mdi_image";
+  } else if (props.entityBundle.includes("video")) {
+    return "bk_mdi_play_circle";
+  } else if (props.entityBundle === "document" || props.entityBundle === "file") {
+    return "bk_mdi_docs";
+  } else if (props.entityBundle.includes("person") || props.entityBundle.includes("contact")) {
+    return "bk_mdi_person-fill";
+  }
+  return "bk_mdi_join";
+});
+function onSubmitEdit() {
+  eventBus.emit("reloadState");
+  isEditing.value = false;
+}
+</script>

package/dist/runtime/editor/features/referenced-entities/List/Item/index.vue.d.ts

@@ -0,0 +1,4 @@
+import type { ReferencedEntity } from '../../types.js';
+declare const __VLS_export: import("vue").DefineComponent<ReferencedEntity, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ReferencedEntity> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/editor/features/referenced-entities/List/index.d.vue.ts

@@ -0,0 +1,11 @@
+import type { ReferencedEntity } from '../types.js';
+type __VLS_Props = {
+    uuids: string[];
+    getCache: () => {
+        loadedUuids: Set<string>;
+        entities: Map<string, ReferencedEntity>;
+    };
+};
+declare const __VLS_export: 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: typeof __VLS_export;
+export default _default;

package/dist/runtime/editor/features/referenced-entities/List/index.vue

@@ -0,0 +1,78 @@
+<template>
+  <div class="_bk_order-last _bk_bg-mono-700">
+    <div class="_bk_px-10 _bk_py-5 _bk_group/tooltip _bk_relative">
+      <span
+        class="_bk_uppercase _bk_font-semibold _bk_tracking-wide _bk_text-mono-300 _bk_text-xs"
+        >{{ $t("relatedContent", "Related Content") }}</span
+      >
+      <Tooltip
+        :label="
+  $t(
+    'relatedContentTooltip',
+    'Content like pages or images referenced or linked by this block.'
+  )
+"
+        placement="center-after"
+      />
+    </div>
+    <div
+      v-if="isLoading || !entities.length"
+      class="_bk_flex _bk_gap-10 _bk_px-10 _bk_pt-5 _bk_pb-10 _bk_items-center _bk_text-sm"
+    >
+      <Icon v-if="isLoading" name="spinner" class="_bk_animate-spin _bk_size-15" />
+      <span v-if="isLoading" class="_bk_font-semibold">{{
+        $t("loading", "Loading...")
+      }}</span>
+      <span v-else>{{
+        $t("relatedContentNoEntitiesFound", "No related content found")
+      }}</span>
+    </div>
+    <ol v-else-if="entities.length">
+      <li v-for="entity in entities" :key="entity.entityUuid">
+        <Item v-bind="entity" />
+      </li>
+    </ol>
+  </div>
+</template>
+
+<script setup>
+import { useBlokkli, ref, onMounted } from "#imports";
+import { Tooltip, Icon } from "#blokkli/editor/components";
+import Item from "./Item/index.vue";
+const props = defineProps({
+  uuids: { type: Array, required: true },
+  getCache: { type: Function, required: true }
+});
+const { $t, adapter } = useBlokkli();
+const isLoading = ref(false);
+const entities = ref([]);
+onMounted(async () => {
+  const cache = props.getCache();
+  const uncachedUuids = props.uuids.filter(
+    (uuid) => !cache.loadedUuids.has(uuid)
+  );
+  if (uncachedUuids.length && adapter.getReferencedEntities) {
+    isLoading.value = true;
+    const results = await adapter.getReferencedEntities(uncachedUuids);
+    for (const entity of results) {
+      const existing = cache.entities.get(entity.entityUuid);
+      if (existing) {
+        for (const uuid of entity.uuids) {
+          if (!existing.uuids.includes(uuid)) {
+            existing.uuids.push(uuid);
+          }
+        }
+      } else {
+        cache.entities.set(entity.entityUuid, entity);
+      }
+    }
+    for (const uuid of uncachedUuids) {
+      cache.loadedUuids.add(uuid);
+    }
+  }
+  isLoading.value = false;
+  entities.value = [...cache.entities.values()].filter(
+    (entity) => entity.uuids.some((uuid) => props.uuids.includes(uuid))
+  );
+});
+</script>

package/dist/runtime/editor/features/referenced-entities/List/index.vue.d.ts

@@ -0,0 +1,11 @@
+import type { ReferencedEntity } from '../types.js';
+type __VLS_Props = {
+    uuids: string[];
+    getCache: () => {
+        loadedUuids: Set<string>;
+        entities: Map<string, ReferencedEntity>;
+    };
+};
+declare const __VLS_export: 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: typeof __VLS_export;
+export default _default;

package/dist/runtime/editor/features/referenced-entities/index.d.vue.ts

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

package/dist/runtime/editor/features/referenced-entities/index.vue

@@ -0,0 +1,36 @@
+<template>
+  <Teleport to="#bk-blokkli-item-actions-dropdown" defer>
+    <List
+      v-if="uuids.length && uuids.length <= 5 && ui.itemActionsOpen.value"
+      :uuids
+      :get-cache
+    />
+  </Teleport>
+</template>
+
+<script setup>
+import { useBlokkli, defineBlokkliFeature, computed } from "#imports";
+import { useStateBasedCache } from "#blokkli/editor/composables";
+import List from "./List/index.vue";
+defineBlokkliFeature({
+  id: "referenced-entities",
+  label: "Referenced Entities",
+  icon: "bk_mdi_join",
+  description: "Renders referenced entities of blocks.",
+  requiredAdapterMethods: ["getReferencedEntities"]
+});
+const { selection, ui } = useBlokkli();
+const uuids = computed(() => {
+  return selection.uuids.value;
+});
+const getCache = useStateBasedCache(() => ({
+  loadedUuids: /* @__PURE__ */ new Set(),
+  entities: /* @__PURE__ */ new Map()
+}));
+</script>
+
+<script>
+export default {
+  name: "ReferencedEntities"
+};
+</script>

package/dist/runtime/editor/features/referenced-entities/index.vue.d.ts

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

package/dist/runtime/editor/features/referenced-entities/types.d.ts

@@ -0,0 +1,13 @@
+export type ReferencedEntity = {
+    editUrl: string;
+    entityBundle: string;
+    entityType: string;
+    entityUuid: string;
+    label: string;
+    uuids: string[];
+};
+declare module '#blokkli/editor/adapter' {
+    interface BlokkliAdapter<T> {
+        getReferencedEntities?(uuids: string[]): Promise<ReferencedEntity[]>;
+    }
+}

package/dist/runtime/editor/features/responsive-preview/Frame/index.vue

@@ -74,3 +74,191 @@ onBeforeUnmount(() => {
   broadcast.off("previewFocused", onPreviewFocused);
 });
 </script>
+
+<style>
+.bk .bk-preview {
+    position: absolute;
+    top: 0px;
+    left: 0px;
+    display: flex;
+    height: 100%;
+    width: 100%;
+    flex-direction: column
+}
+    .bk .bk-preview .bk-preview-iframe {
+    position: relative;
+    width: 100%;
+    flex: 1 1 0%
+}
+    .bk .bk-preview .bk-preview-iframe iframe {
+    display: block;
+    height: 100%;
+    width: 100%;
+    --bk-tw-bg-opacity: 1;
+    background-color: rgb(255 255 255 / var(--bk-tw-bg-opacity, 1));
+    overflow: hidden;
+    overflow-y: auto
+}
+    .bk .bk-preview .bk-preview-loading {
+    position: absolute;
+    top: 0px;
+    left: 0px;
+    z-index: 50;
+    display: flex;
+    height: 100%;
+    width: 100%;
+    align-items: center;
+    justify-content: center;
+    background-color: rgb(255 255 255 / 0.9);
+    --bk-tw-backdrop-blur: blur(16px);
+    -webkit-backdrop-filter: var(--bk-tw-backdrop-blur) var(--bk-tw-backdrop-brightness) var(--bk-tw-backdrop-contrast) var(--bk-tw-backdrop-grayscale) var(--bk-tw-backdrop-hue-rotate) var(--bk-tw-backdrop-invert) var(--bk-tw-backdrop-opacity) var(--bk-tw-backdrop-saturate) var(--bk-tw-backdrop-sepia);
+    backdrop-filter: var(--bk-tw-backdrop-blur) var(--bk-tw-backdrop-brightness) var(--bk-tw-backdrop-contrast) var(--bk-tw-backdrop-grayscale) var(--bk-tw-backdrop-hue-rotate) var(--bk-tw-backdrop-invert) var(--bk-tw-backdrop-opacity) var(--bk-tw-backdrop-saturate) var(--bk-tw-backdrop-sepia)
+}
+    .bk .bk-preview .bk-preview-loading svg {
+    height: 100px;
+    width: 100px
+}
+    @keyframes spin {
+    to {
+        transform: rotate(360deg)
+    }
+}
+    .bk .bk-preview .bk-preview-loading svg {
+    animation: spin 1s linear infinite;
+    fill: rgb(var(--bk-theme-mono-900) / 1);
+    --bk-tw-text-opacity: 1;
+    color: rgb(var(--bk-theme-mono-200) / var(--bk-tw-text-opacity, 1))
+}
+  .bk .bk-preview-controls {
+    display: flex;
+    height: 50px;
+    --bk-tw-bg-opacity: 1;
+    background-color: rgb(var(--bk-theme-mono-200) / var(--bk-tw-bg-opacity, 1))
+}
+  .bk .bk-preview-controls button,
+    .bk .bk-preview-controls label {
+    cursor: pointer;
+    --bk-tw-bg-opacity: 1;
+    background-color: rgb(var(--bk-theme-mono-200) / var(--bk-tw-bg-opacity, 1));
+    --bk-tw-text-opacity: 1;
+    color: rgb(var(--bk-theme-mono-500) / var(--bk-tw-text-opacity, 1))
+}
+  .bk .bk-preview-controls button:hover,
+    .bk .bk-preview-controls label:hover {
+    --bk-tw-bg-opacity: 1;
+    background-color: rgb(var(--bk-theme-mono-300) / var(--bk-tw-bg-opacity, 1))
+}
+  .bk .bk-preview-controls button {
+    display: flex;
+    min-width: 50px
+}
+  .bk .bk-preview-controls button:disabled {
+    pointer-events: none;
+    --bk-tw-text-opacity: 1;
+    color: rgb(var(--bk-theme-mono-300) / var(--bk-tw-text-opacity, 1))
+}
+  .bk .bk-preview-controls button.bk-is-rotate {
+    align-items: center;
+    justify-content: center
+}
+  .bk .bk-preview-controls button.bk-is-rotate svg {
+    height: 20px;
+    width: 20px;
+    fill: currentColor
+}
+  .bk .bk-preview-controls .bk-dropdown {
+    position: relative;
+    flex: 1 1 0%
+}
+  .bk .bk-preview-controls .bk-dropdown button {
+    display: flex;
+    height: 100%;
+    width: 100%;
+    align-items: center;
+    padding-right: 15px
+}
+  .bk .bk-preview-controls .bk-dropdown button > .bk-icon svg {
+    height: 15px;
+    width: 15px;
+    fill: currentColor
+}
+  .bk .bk-preview-controls .bk-dropdown button.bk-is-open > .bk-icon {
+    --bk-tw-rotate: 180deg;
+    transform: translate(var(--bk-tw-translate-x), var(--bk-tw-translate-y)) rotate(var(--bk-tw-rotate)) skewX(var(--bk-tw-skew-x)) skewY(var(--bk-tw-skew-y)) scaleX(var(--bk-tw-scale-x)) scaleY(var(--bk-tw-scale-y))
+}
+  .bk .bk-preview-controls .bk-dropdown label {
+    display: block
+}
+  .bk .bk-preview-controls .bk-dropdown input:not(:checked) + .bk-preview-viewport-option {
+    --bk-tw-text-opacity: 1;
+    color: rgb(var(--bk-theme-mono-400) / var(--bk-tw-text-opacity, 1))
+}
+  .bk .bk-preview-controls .bk-dropdown .bk-dropdown-content {
+    position: absolute;
+    top: 100%;
+    left: 0px;
+    z-index: 50;
+    width: 100%;
+    --bk-tw-bg-opacity: 1;
+    background-color: rgb(var(--bk-theme-mono-800) / var(--bk-tw-bg-opacity, 1))
+}
+  .bk .bk-preview-controls .bk-dropdown .bk-dropdown-content input {
+    position: absolute;
+    opacity: 0
+}
+  .bk .bk-preview-controls .bk-preview-viewport-option {
+    display: flex;
+    width: 100%;
+    align-items: center;
+    gap: 10px;
+    padding-top: 10px;
+    padding-bottom: 10px;
+    padding-left: 10px;
+    padding-right: 10px;
+    text-align: left;
+    font-size: 12px;
+    line-height: 16px;
+    line-height: 1
+}
+  .bk .bk-preview-controls .bk-preview-viewport-option strong {
+    margin-bottom: 5px;
+    display: block
+}
+  .bk .bk-preview-controls .bk-preview-viewport-option .bk-icon {
+    height: 25px;
+    width: 25px;
+    fill: currentColor
+}
+  .bk .bk-sidebar-detached.bk-is-focused .bk-preview-controls {
+    --bk-tw-bg-opacity: 1;
+    background-color: rgb(var(--bk-theme-mono-300) / var(--bk-tw-bg-opacity, 1))
+}
+  .bk .bk-sidebar-detached.bk-is-focused .bk-preview-controls button,
+      .bk .bk-sidebar-detached.bk-is-focused .bk-preview-controls label {
+    --bk-tw-bg-opacity: 1;
+    background-color: rgb(var(--bk-theme-mono-800) / var(--bk-tw-bg-opacity, 1));
+    --bk-tw-text-opacity: 1;
+    color: rgb(255 255 255 / var(--bk-tw-text-opacity, 1))
+}
+  .bk .bk-sidebar-detached.bk-is-focused .bk-preview-controls button:hover,
+      .bk .bk-sidebar-detached.bk-is-focused .bk-preview-controls label:hover {
+    --bk-tw-bg-opacity: 1;
+    background-color: rgb(var(--bk-theme-mono-700) / var(--bk-tw-bg-opacity, 1))
+}
+  .bk .bk-sidebar-detached.bk-is-focused .bk-preview-controls .bk-is-rotate {
+    --bk-tw-border-opacity: 1;
+    border-right-color: rgb(var(--bk-theme-mono-700) / var(--bk-tw-border-opacity, 1))
+}
+  .bk .bk-sidebar-detached.bk-is-focused .bk-preview-controls .bk-is-rotate:disabled {
+    --bk-tw-text-opacity: 1;
+    color: rgb(var(--bk-theme-mono-600) / var(--bk-tw-text-opacity, 1))
+}
+  .bk .bk-sidebar-detached.bk-is-focused .bk-preview-controls input:not(:checked) + .bk-preview-viewport-option {
+    --bk-tw-text-opacity: 1;
+    color: rgb(var(--bk-theme-mono-500) / var(--bk-tw-text-opacity, 1))
+}
+  .bk .bk-sidebar-detached.bk-is-focused .bk-preview-controls label:hover input:not(:checked) + .bk-preview-viewport-option {
+    --bk-tw-text-opacity: 1;
+    color: rgb(var(--bk-theme-mono-300) / var(--bk-tw-text-opacity, 1))
+}
+</style>

package/dist/runtime/editor/features/search/Overlay/Results/Page/index.vue

@@ -4,7 +4,7 @@
       v-for="(item, i) in visibleItems"
       :key="item.item.uuid"
       ref="listItems"
-      class="bk bk-search-item"
+      class="bk-search-item"
       :class="{ 'bk-is-active': i === index }"
       @click.stop="clickItem"
       @mouseenter="index = i"