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

package/dist/runtime/editor/features/ownership/Banner/index.vue

@@ -1,16 +1,17 @@
 <template>
-  <Banner
-    id="ownership"
-    icon="bk_mdi_person-fill"
-    :text
-    :button
-    @click="$emit('submit')"
-  />
+  <Banner id="ownership">
+    <BannerInner
+      icon="bk_mdi_person-fill"
+      :text
+      :button
+      @click="$emit('submit')"
+    />
+  </Banner>
 </template>
 
 <script setup>
 import { computed, useBlokkli, onMounted, onBeforeUnmount } from "#imports";
-import { Banner } from "#blokkli/editor/components";
+import { Banner, BannerInner } from "#blokkli/editor/components";
 const props = defineProps({
   canTakeOwnership: { type: Boolean, required: true }
 });

package/dist/runtime/editor/features/ownership/index.vue

@@ -20,7 +20,7 @@ const { adapter } = defineBlokkliFeature({
 });
 const { state, $t, permissions } = useBlokkli();
 const shouldRender = computed(
-  () => !state.owner.value?.currentUserIsOwner && state.permissions.value.includes("edit")
+  () => state.stateAvailable.value && !state.owner.value?.currentUserIsOwner && state.permissions.value.includes("edit")
 );
 const canTakeOwnership = computed(
   () => permissions.hasPermission("take_ownership")

package/dist/runtime/editor/features/preview-grant/QrCode/index.vue

@@ -1,7 +1,12 @@
 <template>
-  <div class="bk-qr-code">
-    <QrCodeVue :value="fullUrl" :size="430" level="H" />
-    <p>
+  <div>
+    <QrCodeVue
+      :value="fullUrl"
+      :size="430"
+      level="H"
+      class="_bk_!w-full _bk_!h-auto _bk_aspect-square"
+    />
+    <p class="_bk_my-20">
       {{ $t("previewQrCodeText", "You can also copy the link and share it.") }}
     </p>
     <input :value="fullUrl" class="bk-form-input" readonly @focus="onFocus" />

package/dist/runtime/editor/features/publish/Dialog/Item.vue

@@ -36,33 +36,19 @@
     </td>
     <td class="bk-is-status">
       <div v-if="isSuccess">
-        <span
-          class="bk-status-indicator"
-          :class="{
-  'bk-is-success': newStatus.status === true,
-  'bk-is-warning': newStatus.status === 'scheduled'
-}"
-        />
+        <StatusIndicator :status="newStatusPropValue" class="_bk_mx-0" />
       </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
-}"
+        <StatusIndicator
+          :status="isCurrentlyPublished ? 'success' : 'error'"
+          class="_bk_mx-0"
         />
         <template v-if="newStatus.status !== isCurrentlyPublished">
           <Icon name="arrow-right-thin" />
-          <span
-            class="bk-status-indicator"
-            :class="{
-  'bk-is-success': newStatus.status === true,
-  'bk-is-warning': newStatus.status === 'scheduled'
-}"
-          />
+          <StatusIndicator :status="newStatusPropValue" class="_bk_mx-0" />
         </template>
       </div>
     </td>
@@ -71,13 +57,17 @@
 
 <script setup>
 import { computed, useBlokkli } from "#imports";
-import { Icon } from "#blokkli/editor/components";
+import { Icon, StatusIndicator } from "#blokkli/editor/components";
 const { $t } = useBlokkli();
 const props = defineProps({
   hostEntityType: { type: String, required: true },
   hostEntityUuid: { type: String, required: true },
   entity: { type: Object, required: true },
   currentUserIsOwner: { type: Boolean, required: true },
+  lastChanged: { type: String, required: true },
+  pendingChanges: { type: Number, required: true },
+  ownerName: { type: String, required: true },
+  url: { type: String, required: true },
   id: { type: String, required: true },
   isCurrent: { type: Boolean, required: true },
   shouldPublish: { type: Boolean, required: true },
@@ -142,4 +132,12 @@ const newStatus = computed(() => {
   }
   return { label: "", status: false };
 });
+const newStatusPropValue = computed(() => {
+  if (newStatus.value.status === true) {
+    return "success";
+  } else if (newStatus.value.status === "scheduled") {
+    return "warning";
+  }
+  return "error";
+});
 </script>

package/dist/runtime/editor/features/publish/Dialog/index.vue

@@ -360,7 +360,11 @@ const stateItems = computed(() => {
       hostEntityType,
       hostEntityUuid,
       currentUserIsOwner: !!state.owner.value?.currentUserIsOwner,
-      entity: state.entity.value
+      entity: state.entity.value,
+      lastChanged: "",
+      pendingChanges: state.mutations.value.length,
+      ownerName: state.owner.value?.name ?? "",
+      url: ""
     },
     ...editStates.value.items.map((v) => {
       return {