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

package/dist/runtime/editor/features/editable-field/Overlay/index.vue

@@ -7,9 +7,26 @@
     placement-y="top"
     :placement-x="useHorizontalPlacement ? 'auto-side' : 'center'"
     class="bk-editable-field"
+    :class="{ 'bk-is-fullscreen': isFullscreen }"
     close-icon="bk_mdi_check"
+    :fullscreen="isFullscreen"
+    :button-label="$t('save', 'Save')"
     @close="save"
   >
+    <template #header>
+      <button
+        v-if="canDoFullscreen"
+        type="button"
+        @click="isFullscreenPreference = !isFullscreenPreference"
+      >
+        <Icon
+          :name="isFullscreen ? 'bk_mdi_fullscreen_exit' : 'bk_mdi_fullscreen'"
+        />
+        <span>{{
+          isFullscreen ? $t("editableFieldExitFullscreen", "Exit Fullscreen") : $t("editableFieldFullscreen", "Fullscreen")
+        }}</span>
+      </button>
+    </template>
     <form ref="form" class="bk-editable-field-input" @submit.prevent="save">
       <div ref="input">
         <InputContenteditable
@@ -21,11 +38,14 @@
 
         <InputFrame
           v-else-if="config.type === 'frame'"
+          ref="inputFrame"
           v-model="modelValue"
           :type="config.type"
           :field-name="fieldName"
           :host="host"
           :initial-height="scrollHeight"
+          :is-fullscreen
+          @formatted="onFormattedValue"
         />
 
         <InputPlaintext
@@ -40,9 +60,30 @@
       </div>
 
       <div class="bk-artboard-tooltip-info">
-        <button :disabled="!hasChanged" @click.prevent="discard">
+        <button
+          :disabled="!hasChanged"
+          class="bk-artboard-tooltip-info-button bk-scheme-red"
+          @click.prevent="discard"
+        >
           {{ $t("editableFieldDiscard", "Discard") }}
         </button>
+        <button
+          v-if="canTranslate"
+          :disabled="isAutoTranslating"
+          class="bk-artboard-tooltip-info-button bk-scheme-mono _bk_relative _bk_group/tooltip"
+          @click.prevent="autoTranslate"
+        >
+          <Icon name="bk_mdi_translate" class="_bk_size-15" />
+          {{ $t("editableFieldTranslate", "Translate") }}
+          <Tooltip
+            :label="
+  $t(
+    'editableFieldTranslateTooltip',
+    'Automatically translate the current text.'
+  )
+"
+          />
+        </button>
         <div v-if="errorText" class="bk-editable-field-info-error">
           {{ errorText }}
         </div>
@@ -57,9 +98,18 @@
           :text="modelValue"
           :field-type="readabilityFieldType"
         />
-        <div v-if="!isMarkup" class="bk-editable-field-info-count">
+        <div
+          v-if="!isMarkup"
+          class="bk-editable-field-info-count _bk_relative _bk_group/tooltip"
+        >
           <span>{{ count }}</span>
           <span v-if="maxlength >= 1">&nbsp;/&nbsp;{{ maxlength }}</span>
+          <Tooltip
+            v-if="maxlength >= 1"
+            :label="
+  $t('editableFieldCharCountMax', '@count of @max characters used').replace('@count', count.toString()).replace('@max', maxlength.toString())
+"
+          />
         </div>
       </div>
     </form>
@@ -73,7 +123,7 @@
 </template>
 
 <script setup>
-import { ArtboardTooltip } from "#blokkli/editor/components";
+import { ArtboardTooltip, Icon, Tooltip } from "#blokkli/editor/components";
 import {
   computed,
   ref,
@@ -95,7 +145,16 @@ import {
 } from "#blokkli/editor/composables";
 import ReadabilityIndicator from "./ReadabilityIndicator/index.vue";
 import ChunkOverlay from "./ReadabilityIndicator/ChunkOverlay.vue";
-const { state, adapter, $t, types, element: elementProvider } = useBlokkli();
+const {
+  state,
+  adapter,
+  $t,
+  types,
+  context,
+  fieldValue,
+  element: elementProvider,
+  storage
+} = useBlokkli();
 const props = defineProps({
   fieldName: { type: String, required: true },
   host: { type: Object, required: true },
@@ -110,7 +169,17 @@ const loaded = ref(false);
 const originalText = ref("");
 const modelValue = ref("");
 const form = useTemplateRef("form");
+const inputFrame = useTemplateRef("inputFrame");
 const isClosing = ref(false);
+const isAutoTranslating = ref(false);
+const isFullscreenPreference = storage.use("editableOverlayFullscreen", false);
+const canDoFullscreen = computed(
+  () => props.config.type === "markup" || props.config.type === "frame"
+);
+const isFullscreen = computed(
+  () => canDoFullscreen.value && isFullscreenPreference.value
+);
+const formattedValue = ref(null);
 const override = useEditableFieldOverride(props.fieldName, props.host);
 const hasChanged = computed(
   () => modelValue.value.trim() !== originalText.value.trim()
@@ -146,6 +215,37 @@ const isReadabilityField = computed(
 const readabilityFieldType = computed(
   () => props.config.type === "frame" || props.config.type === "markup" ? "markup" : "plain"
 );
+function onFormattedValue(text) {
+  formattedValue.value = text;
+}
+const canTranslate = computed(
+  () => state.editMode.value === "translating" && !!adapter.requestTranslation
+);
+async function autoTranslate() {
+  if (isAutoTranslating.value) return;
+  isAutoTranslating.value = true;
+  try {
+    const sourceLanguage = state.translation.value.sourceLanguage || "en";
+    const targetLanguage = context.value.language;
+    const key = `${props.host.uuid}:${props.fieldName}`;
+    const response = await adapter.requestTranslation([
+      {
+        key,
+        text: modelValue.value,
+        isHtml: readabilityFieldType.value === "markup",
+        sourceLanguage,
+        targetLanguage
+      }
+    ]);
+    if (response.success && response.data.length) {
+      const translatedText = response.data[0].translatedText;
+      modelValue.value = translatedText;
+      inputFrame.value?.setValue(translatedText);
+    }
+  } finally {
+    isAutoTranslating.value = false;
+  }
+}
 function restoreOriginalState() {
   override.restore();
 }
@@ -183,6 +283,8 @@ async function save() {
   }
   isClosing.value = true;
   if (hasChanged.value) {
+    console.log("modelValue", modelValue.value);
+    console.log("originalText", originalText.value);
     if (errorText.value) {
       restoreOriginalState();
     } else {
@@ -192,9 +294,14 @@ async function save() {
   emit("close");
 }
 onBlokkliEvent("window:clickAway", save);
-watch(modelValue, (newText) => {
-  override.setValue(newText);
-});
+watch(
+  () => props.config.type === "frame" ? formattedValue.value : modelValue.value,
+  (newText) => {
+    if (newText !== null) {
+      override.setValue(newText);
+    }
+  }
+);
 const focusInput = (el) => {
   if (!el) {
     return;
@@ -232,7 +339,10 @@ onMounted(() => {
   if (props.isComponent) {
     modelValue.value = props.value || "";
   } else {
-    modelValue.value = override.originalValue;
+    const tfv = fieldValue.getTextFieldValues().find(
+      (v) => v.uuid === props.host.uuid && v.fieldName === props.fieldName
+    );
+    modelValue.value = tfv?.value || override.originalValue || (isMarkup.value ? props.element.innerHTML : props.element.textContent) || "";
   }
   originalText.value = modelValue.value;
   nextTick(() => {
@@ -252,3 +362,302 @@ onBeforeUnmount(async () => {
   }
 });
 </script>
+
+<style>
+.bk.bk-editable-field {
+  --bk-bg: white;
+  --bk-header-bg: rgb(var(--bk-theme-teal-normal) / 1);
+  --bk-header-text: rgb(var(--bk-theme-teal-dark) / 1);
+  --bk-border: rgb(var(--bk-theme-teal-normal) / 1);
+  --bk-header-hover: rgb(var(--bk-theme-teal-dark) / 0.2);
+}
+
+  .bk.bk-editable-field.bk-is-fullscreen .bk-editable-field-input {
+  display: flex;
+  max-width: none;
+  flex: 1 1 0%;
+  flex-direction: column;
+}
+
+  .bk.bk-editable-field.bk-is-fullscreen .bk-editable-field-input > div:first-child {
+  display: flex;
+  flex: 1 1 0%;
+  flex-direction: column;
+}
+
+  .bk.bk-editable-field.bk-is-fullscreen .bk-editable-field-input > div:first-child > * {
+  flex: 1 1 0%;
+}
+
+  .bk.bk-editable-field .bk-editable-field-input {
+  width: 100%;
+  min-width: 360px;
+  max-width: 700px;
+}
+
+  @media (min-width: 768px) {
+
+  .bk.bk-editable-field .bk-editable-field-input {
+    border-radius: 4px;
+  }
+    }
+
+  .bk.bk-editable-field .bk-editable-field-input .bk-editable-field-textarea {
+  position: relative;
+}
+
+  @media (min-width: 1024px) {
+
+  .bk.bk-editable-field .bk-editable-field-input .bk-editable-field-textarea {
+    min-width: 600px;
+  }
+      }
+
+  .bk.bk-editable-field .bk-editable-field-input textarea {
+  display: block;
+  resize: none;
+  appearance: none;
+  padding: 10px;
+  border-style: none;
+  --bk-tw-shadow: 0 0 #0000;
+  --bk-tw-shadow-colored: 0 0 #0000;
+  box-shadow: var(--bk-tw-ring-offset-shadow, 0 0 #0000), var(--bk-tw-ring-shadow, 0 0 #0000), var(--bk-tw-shadow);
+  outline: 2px solid transparent;
+  outline-offset: 2px;
+  background-color: transparent;
+}
+
+  .bk.bk-editable-field .bk-editable-field-input textarea:focus {
+  border-style: none !important;
+  --bk-tw-shadow: 0 0 #0000 !important;
+  --bk-tw-shadow-colored: 0 0 #0000 !important;
+  box-shadow: var(--bk-tw-ring-offset-shadow, 0 0 #0000), var(--bk-tw-ring-shadow, 0 0 #0000), var(--bk-tw-shadow) !important;
+  outline: 2px solid transparent !important;
+  outline-offset: 2px !important;
+  --bk-tw-ring-offset-shadow: var(--bk-tw-ring-inset) 0 0 0 var(--bk-tw-ring-offset-width) var(--bk-tw-ring-offset-color) !important;
+  --bk-tw-ring-shadow: var(--bk-tw-ring-inset) 0 0 0 calc(0px + var(--bk-tw-ring-offset-width)) var(--bk-tw-ring-color) !important;
+  box-shadow: var(--bk-tw-ring-offset-shadow), var(--bk-tw-ring-shadow), var(--bk-tw-shadow, 0 0 #0000) !important;
+}
+
+  .bk.bk-editable-field .bk-editable-field-input textarea {
+  min-height: 50px;
+  width: 100%;
+  font-size: 16px;
+  line-height: 24px;
+}
+
+  @media (min-width: 1024px) {
+
+  .bk.bk-editable-field .bk-editable-field-input textarea {
+    font-size: 18px;
+    line-height: 28px;
+  }
+}
+
+  .bk.bk-editable-field .bk-editable-field-input textarea {
+  position: absolute;
+  top: 0px;
+  left: 0px;
+  height: 100%;
+}
+
+  .bk.bk-editable-field .bk-editable-field-translate {
+  display: flex;
+  align-items: center;
+  gap: 3px;
+  border-right-width: 1px;
+  --bk-tw-border-opacity: 1;
+  border-right-color: rgb(var(--bk-theme-mono-300) / var(--bk-tw-border-opacity, 1));
+  padding-left: 10px;
+  padding-right: 10px;
+  --bk-tw-text-opacity: 1;
+  color: rgb(var(--bk-theme-teal-dark) / var(--bk-tw-text-opacity, 1));
+}
+
+  .bk.bk-editable-field .bk-editable-field-translate:disabled {
+  opacity: 0.5;
+}
+
+  .bk.bk-editable-field .bk-editable-field-info-error {
+  margin-left: auto;
+  padding-left: 10px;
+  padding-right: 10px;
+  --bk-tw-text-opacity: 1;
+  color: rgb(var(--bk-theme-red-normal) / var(--bk-tw-text-opacity, 1));
+}
+
+  .bk.bk-editable-field .bk-editable-field-info-hint {
+  margin-left: auto;
+  padding-left: 10px;
+  padding-right: 10px;
+  text-align: right;
+  font-size: 12px;
+  line-height: 16px;
+  font-weight: 400;
+  --bk-tw-text-opacity: 1;
+  color: rgb(var(--bk-theme-mono-500) / var(--bk-tw-text-opacity, 1));
+}
+
+  .bk.bk-editable-field .bk-editable-field-readability {
+  position: relative;
+  display: flex;
+  height: 32px;
+  cursor: default;
+  align-items: center;
+  gap: 5px;
+  border-left-width: 1px;
+  --bk-tw-border-opacity: 1;
+  border-left-color: rgb(var(--bk-theme-mono-300) / var(--bk-tw-border-opacity, 1));
+  padding-left: 10px;
+  padding-right: 10px;
+  font-size: 12px;
+  line-height: 16px;
+  --bk-tw-text-opacity: 1;
+  color: rgb(var(--bk-theme-mono-600) / var(--bk-tw-text-opacity, 1));
+  transition-property: opacity;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 200ms;
+  cursor: help;
+}
+
+  .bk.bk-editable-field .bk-editable-field-readability.bk-is-stale {
+  opacity: 0.4;
+}
+
+  .bk.bk-editable-field .bk-readability-scale {
+  margin-top: 15px;
+  width: 100%;
+  padding-bottom: 25px;
+}
+
+  .bk.bk-editable-field .bk-readability-scale-labels {
+  position: relative;
+  height: 16px;
+  font-size: 12px;
+  line-height: 16px;
+  font-weight: 600;
+  --bk-tw-text-opacity: 1;
+  color: rgb(var(--bk-theme-mono-50) / var(--bk-tw-text-opacity, 1));
+}
+
+  .bk.bk-editable-field .bk-readability-scale-labels > span {
+  position: absolute;
+  top: -5px;
+  --bk-tw-translate-x: -50%;
+  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-editable-field .bk-readability-scale-bar {
+  position: relative;
+  height: 12px;
+}
+
+  .bk.bk-editable-field .bk-readability-scale-segments {
+  position: absolute;
+  inset: 0px;
+  overflow: hidden;
+  border-radius: 9999px;
+}
+
+  .bk.bk-editable-field .bk-readability-scale-segment {
+  position: absolute;
+  top: 0px;
+  height: 100%;
+}
+
+  .bk.bk-editable-field .bk-readability-scale-segment.bk-is-left {
+  left: 0px;
+}
+
+  .bk.bk-editable-field .bk-readability-scale-segment.bk-is-middle {
+  --bk-tw-bg-opacity: 1;
+  background-color: rgb(var(--bk-theme-yellow-normal) / var(--bk-tw-bg-opacity, 1));
+}
+
+  /* higher_easier (e.g. FRE): low=hard, high=easy */
+
+  .bk.bk-editable-field .bk-readability-scale.bk-is-higher_easier .bk-is-left {
+  --bk-tw-bg-opacity: 1;
+  background-color: rgb(var(--bk-theme-red-normal) / var(--bk-tw-bg-opacity, 1));
+}
+
+  .bk.bk-editable-field .bk-readability-scale.bk-is-higher_easier .bk-is-right {
+  --bk-tw-bg-opacity: 1;
+  background-color: rgb(var(--bk-theme-lime-normal) / var(--bk-tw-bg-opacity, 1));
+}
+
+  /* higher_harder (e.g. LIX): low=easy, high=hard */
+
+  .bk.bk-editable-field .bk-readability-scale.bk-is-higher_harder .bk-is-left {
+  --bk-tw-bg-opacity: 1;
+  background-color: rgb(var(--bk-theme-lime-normal) / var(--bk-tw-bg-opacity, 1));
+}
+
+  .bk.bk-editable-field .bk-readability-scale.bk-is-higher_harder .bk-is-right {
+  --bk-tw-bg-opacity: 1;
+  background-color: rgb(var(--bk-theme-red-normal) / var(--bk-tw-bg-opacity, 1));
+}
+
+  .bk.bk-editable-field .bk-readability-scale-marker {
+  position: absolute;
+  top: -5px;
+  bottom: -5px;
+  width: 3px;
+  --bk-tw-translate-x: -50%;
+  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));
+  border-radius: 9999px;
+  --bk-tw-bg-opacity: 1;
+  background-color: rgb(255 255 255 / var(--bk-tw-bg-opacity, 1));
+    box-shadow: 0 0 0 1px rgb(0 0 0 / 0.3);
+}
+
+  .bk.bk-editable-field .bk-readability-scale-marker > span {
+  position: absolute;
+  top: 100%;
+  left: 50%;
+  margin-top: 5px;
+  --bk-tw-translate-x: -50%;
+  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));
+  white-space: nowrap;
+  font-size: 14px;
+  line-height: 20px;
+  font-weight: 700;
+  --bk-tw-text-opacity: 1;
+  color: rgb(255 255 255 / var(--bk-tw-text-opacity, 1));
+}
+
+  .bk.bk-editable-field .bk-editable-field-readability-dot {
+  height: 8px;
+  width: 8px;
+  flex-shrink: 0;
+  border-radius: 9999px;
+  --bk-tw-bg-opacity: 1;
+  background-color: rgb(var(--bk-theme-mono-300) / var(--bk-tw-bg-opacity, 1));
+}
+
+  .bk.bk-editable-field .bk-editable-field-readability-dot.bk-is-easy {
+  --bk-tw-bg-opacity: 1;
+  background-color: rgb(var(--bk-theme-lime-normal) / var(--bk-tw-bg-opacity, 1));
+}
+
+  .bk.bk-editable-field .bk-editable-field-readability-dot.bk-is-ok {
+  --bk-tw-bg-opacity: 1;
+  background-color: rgb(var(--bk-theme-yellow-normal) / var(--bk-tw-bg-opacity, 1));
+}
+
+  .bk.bk-editable-field .bk-editable-field-readability-dot.bk-is-hard {
+  --bk-tw-bg-opacity: 1;
+  background-color: rgb(var(--bk-theme-red-normal) / var(--bk-tw-bg-opacity, 1));
+}
+
+  .bk.bk-editable-field .bk-editable-field-info-count {
+  display: flex;
+  height: 32px;
+  align-items: center;
+  border-left-width: 1px;
+  --bk-tw-border-opacity: 1;
+  border-left-color: rgb(var(--bk-theme-mono-300) / var(--bk-tw-border-opacity, 1));
+  padding-left: 10px;
+  padding-right: 10px;
+}
+</style>

package/dist/runtime/editor/features/editable-mask/index.vue

@@ -37,3 +37,12 @@ export default {
   name: "EditableMask"
 };
 </script>
+
+<style>
+html.bk-hide-non-editable .bk-main-canvas > * {
+    visibility: hidden
+}
+    html.bk-hide-non-editable .bk-main-canvas [data-blokkli-provider-active='true'] {
+    visibility: visible
+}
+</style>

package/dist/runtime/editor/features/entity-title/index.vue

@@ -2,49 +2,35 @@
   <Teleport to="#bk-toolbar-title">
     <button
       v-if="scheduledDate"
-      class="bk-toolbar-title-scheduled"
+      class="bk-toolbar-title-scheduled _bk_group/tooltip"
       @click.prevent="eventBus.emit('publish:show-dialog')"
     >
       <Icon name="bk_mdi_calendar_clock" />
       <div class="bk-toolbar-title-scheduled-text">
         <div>{{ formattedScheduledDate }}</div>
       </div>
-      <div class="bk-tooltip">
-        <div>
-          {{
-            $t("scheduledFor", "The changes will be published on this date.")
-          }}
-        </div>
-      </div>
+      <Tooltip
+        :label="
+  $t('scheduledFor', 'The changes will be published on this date.')
+"
+      />
     </button>
     <button
       ref="buttonEl"
-      class="bk-toolbar-button"
+      class="bk-toolbar-button _bk_group/tooltip _bk_w-full _bk_justify-start _bk_relative"
       :disabled="!state.canEdit.value"
       @click="eventBus.emit('editEntity')"
     >
-      <div class="bk-toolbar-title">
-        <div>
-          <span
-            class="bk-status-indicator"
-            :class="{
-  'bk-is-success': entity.status && !mutations.length,
-  'bk-is-warning': entity.status && mutations.length
-}"
-          />
-          <strong>{{ entity.label }}</strong>
+      <div class="bk-toolbar-title _bk_relative _bk_size-full">
+        <div
+          class="_bk_min-w-0 _bk_truncate _bk_absolute _bk_top-1/2 _bk_left-0 _bk_w-full _bk_-translate-y-1/2 _bk_text-left _bk_flex _bk_items-center"
+        >
+          <StatusIndicator :status="statusIndicatorStatus" />
+          <strong class="_bk_text-mono-100">{{ entity.label }}</strong>
           <span>&nbsp;{{ entity.bundleLabel }}</span>
         </div>
       </div>
-      <div class="bk-tooltip">
-        <span v-if="entity.status && !mutations.length">{{
-          statusPublished
-        }}</span>
-        <span v-else-if="entity.status && mutations.length">{{
-          statusPending
-        }}</span>
-        <span v-else>{{ statusUnpublished }}</span>
-      </div>
+      <Tooltip :label="tooltipLabel" />
     </button>
   </Teleport>
 </template>
@@ -56,7 +42,7 @@ import {
   computed,
   useTemplateRef
 } from "#imports";
-import { Icon } from "#blokkli/editor/components";
+import { Icon, StatusIndicator, Tooltip } from "#blokkli/editor/components";
 import { defineCommands, defineTourItem } from "#blokkli/editor/composables";
 defineBlokkliFeature({
   id: "entity-title",
@@ -81,18 +67,17 @@ const formattedScheduledDate = computed(() => {
     minute: "2-digit"
   });
 });
-const statusPublished = computed(
-  () => $t("pageIsPublished", "Page is published")
-);
-const statusPending = computed(
-  () => $t(
-    "pageIsPublishedWithPendingChanges",
-    "Page is published (changes pending)"
-  )
-);
-const statusUnpublished = computed(
-  () => $t("pageIsNotPublished", "Page is not published")
-);
+const tooltipLabel = computed(() => {
+  if (entity.value.status && !mutations.value.length) {
+    return $t("pageIsPublished", "Page is published");
+  } else if (entity.value.status && mutations.value.length) {
+    return $t(
+      "pageIsPublishedWithPendingChanges",
+      "Page is published (changes pending)"
+    );
+  }
+  return $t("pageIsNotPublished", "Page is not published");
+});
 defineCommands(() => {
   return {
     id: "feature:entity-title:edit-entity",
@@ -105,28 +90,27 @@ defineCommands(() => {
     icon: "bk_mdi_edit"
   };
 });
-const tourText = computed(() => {
-  const intro = $t(
-    "entityTitleTourText",
-    "<p>Shows the title and status of the current page.</p><p>Click on the title to open the page edit form.</p>"
-  );
-  return `
-  ${intro}
-  <ul>
-  <li><div class="bk-status-indicator"></div>${statusUnpublished.value}</li>
-  <li><div class="bk-status-indicator bk-is-warning"></div>${statusPending.value}</li>
-  <li><div class="bk-status-indicator bk-is-success"></div>${statusPublished.value}</li>
-  </ul>
-  `;
-});
 defineTourItem(() => {
   return {
     id: "entity-title",
     title: $t("entityTitleTourTitle", "Page"),
-    text: tourText.value,
+    text: $t(
+      "entityTitleTourText",
+      "<p>Shows the title and status of the current page.</p><p>Click on the title to open the page edit form.</p>"
+    ),
     element: buttonEl.value
   };
 });
+const statusIndicatorStatus = computed(() => {
+  if (entity.value.status) {
+    if (mutations.value.length) {
+      return "warning";
+    } else {
+      return "success";
+    }
+  }
+  return "error";
+});
 </script>
 
 <script>