@blokkli/editor 2.0.0-alpha.58 → 2.0.0-alpha.59

package/dist/runtime/editor/components/Actions/ItemDropdown/index.vue

@@ -3,29 +3,11 @@
     <div
       v-for="group in groups"
       :key="group.name"
-      :class="'bk-is-' + group.name"
+      class="_bk_border-b _bk_border-b-mono-600"
     >
       <ol>
-        <li v-for="action in group.actions" :key="action.id">
-          <button
-            class="bk-blokkli-item-actions-type-dropdown-button _bk_group/tooltip"
-            :class="'bk-is-variant-' + action.variant || '_bk_default'"
-            :disabled="action.enabled === false"
-            @click.prevent="onActionClick(action)"
-          >
-            <div class="bk-blokkli-item-actions-type-dropdown-icon">
-              <Icon v-if="action.icon" :name="action.icon" />
-              <ItemIcon v-else-if="action.bundle" :bundle="action.bundle" />
-            </div>
-            <div>
-              <div>{{ action.label }}</div>
-            </div>
-            <Tooltip
-              v-if="action.description"
-              :label="action.description"
-              placement="center-after"
-            />
-          </button>
+        <li v-for="action in group.actions" :key="action.id" class="_bk_relative">
+          <Item :action @click.prevent="onActionClick(action)" />
         </li>
       </ol>
     </div>
@@ -34,7 +16,7 @@
 
 <script setup>
 import { useBlokkli } from "#imports";
-import { ItemIcon, Icon, Tooltip } from "#blokkli/editor/components";
+import Item from "./Item.vue";
 const emit = defineEmits(["close"]);
 const { plugins } = useBlokkli();
 function getGroupedActions() {

package/dist/runtime/editor/components/Actions/Title/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/components/Actions/Title/index.vue

@@ -0,0 +1,295 @@
+<template>
+  <div
+    id="bk-blokkli-item-actions-title"
+    class="_bk_w-[160px] _bk_lg:w-[240px]"
+    :style="{
+  height: 'var(--bk-actions-height)'
+}"
+  >
+    <button
+      data-test="item-actions-dropdown-toggle"
+      class="bk-blokkli-item-actions-type-button bk-item-icon-hover-parent _bk_group/tooltip _bk_pl-10 _bk_pr-3 _bk_flex _bk_items-center _bk_lg:min-w-[180px] _bk_text-mono-300 _bk_font-bold _bk_h-full _bk_leading-none _bk_relative _bk_w-full _bk_cursor-pointer _bk_hover:text-mono-50 _bk_hover:bg-mono-700"
+      tabindex="-1"
+      :class="{
+  '_bk_lg:bg-mono-700 _bk_text-white': showDropdown
+}"
+      @click.prevent="onToggleDropdown"
+    >
+      <Tooltip
+        :label="$t('actionsDropdownToolip', 'Further actions')"
+        placement="above-left"
+        class="_bk_w-full"
+      >
+        <template #status>
+          <TooltipStatus
+            v-if="restrictedPermissionsLabel"
+            :description="restrictedPermissionsLabel"
+            status="warning"
+          />
+          <TooltipStatus
+            v-if="selectedTranslationIsOutdated"
+            :description="
+  $t(
+    'translationOutdatedHint',
+    'The translation is marked as outdated.'
+  )
+"
+            status="warning"
+          />
+        </template>
+      </Tooltip>
+      <div
+        v-show="!hasSelectedHost && bundleIcon"
+        class="_bk_text-xl _bk_lg:text-[34px] _bk_mr-[0.25em] _bk_size-[1em] _bk_relative _bk_shrink-0"
+      >
+        <ItemIconBox
+          v-if="bundleIcon"
+          :icon="iconOverride"
+          :bundle="bundleIcon"
+          :color="isReusable ? 'lime' : void 0"
+          is-small
+        />
+        <div
+          v-if="itemBundle?.id === fromLibraryBlockBundle"
+          class="_bk_absolute _bk_z-50 _bk_-top-[7px] _bk_-right-[7px] _bk_bg-lime-dark _bk_size-20 _bk_flex _bk_items-center _bk_justify-center _bk_rounded-full _bk_border _bk_border-lime-normal _bk_shadow-lg"
+        >
+          <Icon name="reusable" class="_bk_size-[12px] _bk_fill-lime-light" />
+        </div>
+      </div>
+      <span class="_bk_truncate _bk_mr-auto">{{ title }}</span>
+      <Pill
+        v-if="selection.items.value.length > 1"
+        :text="selection.items.value.length"
+        scheme="mono"
+      />
+
+      <span
+        v-show="isPermissionRestricted"
+        class="_bk_size-25 _bk_text-yellow-normal _bk_p-5 _bk_bg-yellow-dark _bk_rounded-full"
+      >
+        <Icon name="bk_mdi_lock" class="_bk_size-full" />
+      </span>
+
+      <Pill
+        v-show="selectedIsNew"
+        :text="$t('selectedIsNew', 'New')"
+        variant="light"
+      />
+
+      <Pill
+        v-show="selectedTranslationIsOutdated"
+        :text="$t('selectedTranslationIsOutdated', 'Outdated')"
+        variant="normal"
+        scheme="yellow"
+      />
+
+      <Icon
+        name="bk_mdi_arrow_drop_down"
+        class="_bk_ml-2 _bk_pointer-events-none _bk_size-15 _bk_md:size-20"
+        :class="{
+  '_bk_rotate-180': showDropdown
+}"
+      />
+    </button>
+    <div
+      v-if="editingEnabled"
+      v-show="showDropdown"
+      id="bk-blokkli-item-actions-dropdown"
+      class="_bk_absolute _bk_bottom-full _bk_left-0 _bk_min-w-[300px] _bk_bg-mono-900 _bk_text-mono-200 _bk_shadow-xl-inverted _bk_w-screen _bk_lg:w-auto _bk_flex _bk_flex-col _bk_lg:top-full _bk_lg:bottom-auto _bk_lg:shadow-xl _bk_lg:left-[23px]"
+    >
+      <EditActionsItemDropdown
+        v-if="showDropdown"
+        @close="showDropdown = false"
+      />
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { watch, computed, useBlokkli } from "#imports";
+import { falsy } from "#blokkli/helpers";
+import {
+  Icon,
+  ItemIconBox,
+  Tooltip,
+  TooltipStatus,
+  Pill
+} from "#blokkli/editor/components";
+import EditActionsItemDropdown from "../ItemDropdown/index.vue";
+import { onBlokkliEvent } from "#blokkli/editor/composables";
+import {
+  fragmentBlockBundle,
+  fromLibraryBlockBundle
+} from "#blokkli-build/config";
+const {
+  selection,
+  $t,
+  types,
+  state,
+  ui,
+  definitions,
+  debug,
+  permissions,
+  context
+} = useBlokkli();
+const editingEnabled = computed(
+  () => state.editMode.value === "editing" || state.editMode.value === "translating"
+);
+const showDropdown = computed({
+  get() {
+    return ui.itemActionsOpen.value;
+  },
+  set(isOpen) {
+    ui.itemActionsOpen.value = isOpen;
+  }
+});
+async function onToggleDropdown() {
+  const willOpen = !showDropdown.value;
+  if (willOpen) {
+    await ui.flushPendingChanges();
+  }
+  showDropdown.value = willOpen;
+}
+watch(selection.items, () => {
+  showDropdown.value = false;
+});
+watch(selection.hasHostSelected, () => {
+  showDropdown.value = false;
+});
+const bundleIcon = computed(() => {
+  if (itemBundle.value?.id === fromLibraryBlockBundle) {
+    const reusableBundle = selection.items.value[0]?.library?.reusableBundle;
+    if (reusableBundle) {
+      return reusableBundle;
+    }
+  }
+  return itemBundle.value?.id;
+});
+const iconOverride = computed(() => {
+  if (fragment.value) {
+    return fragment.value.editor?.icon ?? null;
+  }
+  return null;
+});
+const isReusable = computed(() => {
+  return itemBundle.value?.id === fromLibraryBlockBundle;
+});
+const hasSelectedHost = computed(() => {
+  return selection.items.value.length === 0;
+});
+const fragment = computed(() => {
+  if (itemBundle.value?.id !== fragmentBlockBundle) {
+    return null;
+  }
+  const uuid = selection.uuids.value[0];
+  if (!uuid) {
+    return null;
+  }
+  const item = state.getFieldListItem(uuid);
+  if (!item) {
+    return null;
+  }
+  const name = item.props?.name;
+  if (!name) {
+    return null;
+  }
+  return definitions.getFragmentDefinition(name) ?? null;
+});
+const title = computed(() => {
+  if (ui.transformLabel.value) {
+    return ui.transformLabel.value;
+  } else if (debug.isEnabled.value && selection.uuids.value.length === 1) {
+    return selection.uuids.value[0];
+  } else if (itemBundle.value) {
+    if (itemBundle.value.id === fragmentBlockBundle) {
+      const fragments = selection.uuids.value.map((uuid) => {
+        const item = state.getFieldListItem(uuid);
+        if (!item) {
+          return;
+        }
+        const name = item.props?.name;
+        if (!name) {
+          return;
+        }
+        const definition = definitions.getFragmentDefinition(name);
+        return definition?.label;
+      }).filter(falsy);
+      if (fragments.length && fragments.length < 3) {
+        return fragments.join(", ");
+      }
+    } else if (itemBundle.value.id === fromLibraryBlockBundle) {
+      const title2 = selection.items.value[0]?.library?.label;
+      if (title2) {
+        return title2;
+      }
+    }
+    return itemBundle.value.label;
+  } else if (!selection.items.value.length) {
+    return state.entity.value.label;
+  }
+  return $t("multipleItemsLabel", "Items");
+});
+const selectedIsNew = computed(() => {
+  const items = selection.items.value;
+  return !!items.length && items.every((v) => v.isNew);
+});
+const selectedTranslationIsOutdated = computed(() => {
+  const items = selection.items.value;
+  if (!items.length) return false;
+  return items.every(
+    (item) => item.outdatedTranslations.includes(context.value.language)
+  );
+});
+const permissionsForSelected = computed(() => {
+  const bundles = selection.bundles.value;
+  if (!bundles.length) {
+    return [];
+  }
+  const allPermissions = ["add", "delete", "edit"];
+  return allPermissions.filter(
+    (permission) => bundles.every(
+      (bundle) => permissions.checkBlockBundlePermission(bundle, permission)
+    )
+  );
+});
+const isPermissionRestricted = computed(
+  () => selection.items.value.length > 0 && permissionsForSelected.value.length < 3
+);
+const restrictedPermissionsLabel = computed(() => {
+  if (!isPermissionRestricted.value) {
+    return null;
+  }
+  const shared = permissionsForSelected.value;
+  if (shared.length === 0) {
+    return $t(
+      "restrictedPermissionsAll",
+      "Some actions are not available due to missing permissions."
+    );
+  }
+  return $t(
+    "restrictedPermissionsSome",
+    "Some actions are restricted due to missing permissions."
+  );
+});
+const itemBundle = computed(() => {
+  if (selection.bundles.value.length !== 1) {
+    return;
+  }
+  const bundle = selection.bundles.value[0];
+  return types.getBlockBundleDefinition(bundle);
+});
+onBlokkliEvent("action:selected", () => {
+  showDropdown.value = false;
+});
+watch(ui.isTransforming, function(isTransforming) {
+  if (isTransforming) {
+    showDropdown.value = false;
+  }
+});
+</script>
+
+<script>
+export default {
+  name: "ItemActionsTitle"
+};
+</script>

package/dist/runtime/editor/components/Actions/Title/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>;